WEBVTT 1 00:00:01.290 --> 00:00:02.750 Well, welcome back. 2 00:00:02.750 --> 00:00:07.480 And I hope that you're still having fun in this project. 3 00:00:07.480 --> 00:00:09.930 Now, the next part of this project 4 00:00:09.930 --> 00:00:12.710 is going to be implementing bookmarks. 5 00:00:12.710 --> 00:00:14.380 And so that's what we will do 6 00:00:14.380 --> 00:00:16.743 in this lecture and the next one. 7 00:00:19.193 --> 00:00:20.030 Okay. 8 00:00:20.030 --> 00:00:24.160 And let's start again with a look at our flow chart here. 9 00:00:24.160 --> 00:00:25.520 And so in this video 10 00:00:25.520 --> 00:00:29.440 what we will do is simply basically adding a handler 11 00:00:29.440 --> 00:00:34.440 to the recipe so that then the user can bookmark the recipe 12 00:00:34.550 --> 00:00:39.170 and then a that will render or update the recipe 13 00:00:39.170 --> 00:00:42.880 with the bookmark button, then update it. 14 00:00:42.880 --> 00:00:46.470 And for doing that there's actually a lot of stuff 15 00:00:46.470 --> 00:00:48.560 that we need to implement. 16 00:00:48.560 --> 00:00:53.333 So there's a lot of work for us to do, so let's get started. 17 00:00:54.270 --> 00:00:57.200 And actually, before we get started 18 00:00:57.200 --> 00:01:00.550 I think we should actually also see this in action. 19 00:01:00.550 --> 00:01:04.550 So here in the demo version, so let's say that we are here 20 00:01:04.550 --> 00:01:08.143 on this first recipe and when I click this recipe 21 00:01:08.143 --> 00:01:12.290 I then want this, icon here to change right? 22 00:01:12.290 --> 00:01:15.450 And so this is now bookmarked. 23 00:01:15.450 --> 00:01:17.980 So when I then go to the next result 24 00:01:17.980 --> 00:01:21.880 then of course this bookmark here is back to being empty. 25 00:01:21.880 --> 00:01:25.890 But when I go back to that recipe that I had bookmarked, 26 00:01:25.890 --> 00:01:28.330 then it is back to being filled. 27 00:01:28.330 --> 00:01:29.310 And so this means 28 00:01:29.310 --> 00:01:33.200 that the current recipe is indeed a bookmark. 29 00:01:33.200 --> 00:01:35.750 Then in the next lecture, we will take care 30 00:01:35.750 --> 00:01:40.090 of also displaying all the bookmarks up here. 31 00:01:40.090 --> 00:01:43.056 All right, but that's something different. 32 00:01:43.056 --> 00:01:46.728 And so for now, let's take care of the core functionality 33 00:01:46.728 --> 00:01:50.133 of being able to bookmark a recipe. 34 00:01:52.020 --> 00:01:55.840 Okay and finally there's one more thing 35 00:01:55.840 --> 00:01:58.963 that we actually need to do before starting that. 36 00:02:00.280 --> 00:02:02.910 So I discovered a small bug here. 37 00:02:02.910 --> 00:02:05.950 Let's say that we searched for something. 38 00:02:05.950 --> 00:02:10.750 And then we go to page two or page three, for example 39 00:02:10.750 --> 00:02:13.913 and then let's say we search for something else. 40 00:02:14.990 --> 00:02:16.820 So that gives us our results. 41 00:02:16.820 --> 00:02:18.520 But as we go back here 42 00:02:18.520 --> 00:02:21.960 notice how we are still on page number three. 43 00:02:21.960 --> 00:02:25.380 And so that is a bug that we need to fix. 44 00:02:25.380 --> 00:02:28.010 Now, can you figure out maybe on your own, 45 00:02:28.010 --> 00:02:30.250 why does bug is happening? 46 00:02:30.250 --> 00:02:32.460 So I think that this would be a nice challenge 47 00:02:32.460 --> 00:02:34.920 for you to pause this video actually 48 00:02:34.920 --> 00:02:38.933 right now and try to figure out why this bug is happening. 49 00:02:40.660 --> 00:02:44.090 So hopefully you figured it out. 50 00:02:44.090 --> 00:02:47.480 And the reason for it is that here in the model, 51 00:02:47.480 --> 00:02:51.490 when we do the search so here, 52 00:02:51.490 --> 00:02:53.620 when we load the search results 53 00:02:53.620 --> 00:02:57.320 of course the state is set to one. 54 00:02:57.320 --> 00:03:01.380 So the page is set to one here automatically. 55 00:03:01.380 --> 00:03:03.920 However, as we move to another page 56 00:03:03.920 --> 00:03:07.100 then this variable here gets updated right. 57 00:03:07.100 --> 00:03:10.070 But then when we search for something else 58 00:03:10.070 --> 00:03:15.070 we never reset this page to one right? 59 00:03:15.160 --> 00:03:18.380 And so that's what we have to do right here 60 00:03:18.380 --> 00:03:20.393 where we load the search results. 61 00:03:21.790 --> 00:03:26.650 So after this here, we need to say state.search.page 62 00:03:30.270 --> 00:03:32.480 and set it back to once. 63 00:03:32.480 --> 00:03:36.710 And so now whenever we load some new search results 64 00:03:36.710 --> 00:03:39.640 so basically whenever we do a new search 65 00:03:39.640 --> 00:03:42.990 then the page will reset to one. 66 00:03:42.990 --> 00:03:44.603 So let's try that again now. 67 00:03:46.922 --> 00:03:51.922 So we are again at page three and you already see, 68 00:03:53.420 --> 00:03:54.950 we have different results. 69 00:03:54.950 --> 00:03:57.933 And indeed now we are at page number one. 70 00:03:59.520 --> 00:04:03.260 Okay so that was a small bug that needed to be fixed. 71 00:04:03.260 --> 00:04:06.800 But now let's go back to the actual topic of this video, 72 00:04:06.800 --> 00:04:09.063 which is to implement bookmarking. 73 00:04:11.240 --> 00:04:15.080 So bookmarks are all about data. 74 00:04:15.080 --> 00:04:18.560 And so we will start by working again in the model 75 00:04:18.560 --> 00:04:20.260 and we will add a new method here. 76 00:04:21.474 --> 00:04:22.450 Well actually a new function 77 00:04:22.450 --> 00:04:25.960 that we export that we will then use from the controller, 78 00:04:25.960 --> 00:04:30.960 which is simply add a bookmark. 79 00:04:31.130 --> 00:04:35.850 And so this will receive basically a recipe 80 00:04:35.850 --> 00:04:39.283 and then it will set that recipe as a bookmark. 81 00:04:41.200 --> 00:04:44.630 So a recipe and then in our state, 82 00:04:44.630 --> 00:04:47.630 we already have an array for bookmarks 83 00:04:48.780 --> 00:04:52.060 or actually we don't, but I think I had it 84 00:04:52.060 --> 00:04:53.943 in the architecture diagram. 85 00:04:55.770 --> 00:04:59.380 So anyway, we have an array of bookmarks, 86 00:04:59.380 --> 00:05:02.200 which we start as an empty array, 87 00:05:02.200 --> 00:05:04.930 but then basically adding a bookmark 88 00:05:04.930 --> 00:05:08.713 simply means to push the recipe here into this array. 89 00:05:13.410 --> 00:05:18.410 Okay so what I just said is this state.bookmarks.push 90 00:05:22.980 --> 00:05:26.593 and then the recipe object that we just received here. 91 00:05:27.440 --> 00:05:28.860 So let's add a comment here 92 00:05:30.800 --> 00:05:34.600 add bookmark because besides this 93 00:05:34.600 --> 00:05:39.230 we also want to mark the current recipe as being bookmarked. 94 00:05:39.230 --> 00:05:42.450 So at least if the current recipe is the same recipe 95 00:05:42.450 --> 00:05:45.153 as this one that we are adding here. 96 00:05:46.570 --> 00:05:51.410 So mark current recipe as bookmark 97 00:05:53.110 --> 00:05:56.740 because this will then allow us to actually display 98 00:05:56.740 --> 00:06:01.163 this current recipe as bookmarked in the recipe view. 99 00:06:02.120 --> 00:06:06.350 So we can say if recipe.id. 100 00:06:06.350 --> 00:06:09.250 So the idea of the recipe that we passed in here 101 00:06:09.250 --> 00:06:12.420 is equal to the ID of the current recipe. 102 00:06:12.420 --> 00:06:16.230 So the one that is currently loaded in our application 103 00:06:16.230 --> 00:06:21.117 which is state.recipe.id, while in this case 104 00:06:23.270 --> 00:06:28.270 we want to say state.recipe.bookmarked should be true. 105 00:06:33.100 --> 00:06:37.463 So basically setting a new property on this recipe object. 106 00:06:38.950 --> 00:06:43.880 So for now that is the add bookmark function here. 107 00:06:43.880 --> 00:06:47.020 And so now let's create a new controller. 108 00:06:47.020 --> 00:06:50.023 So a controller for adding a new bookmark, 109 00:06:51.910 --> 00:06:55.833 so control, add bookmark. 110 00:07:01.640 --> 00:07:04.860 And so here let's not try to add a bookmark 111 00:07:06.370 --> 00:07:09.210 with the current recipe. 112 00:07:09.210 --> 00:07:13.520 So model.state.recipe 113 00:07:14.470 --> 00:07:18.330 and then let's also immediately log that to the console 114 00:07:18.330 --> 00:07:23.170 so that we can see that it is actually marked as a bookmark. 115 00:07:25.530 --> 00:07:29.970 And now of course we need a way of calling this 116 00:07:29.970 --> 00:07:31.850 a controller function. 117 00:07:31.850 --> 00:07:33.883 So when will that happen? 118 00:07:34.900 --> 00:07:39.900 Well, it should happen when we click on this button right? 119 00:07:40.070 --> 00:07:41.520 So this bookmark button 120 00:07:42.400 --> 00:07:45.850 and right now the icon here is actually wrong. 121 00:07:45.850 --> 00:07:50.203 So let's start by fixing that here in the recipe view. 122 00:07:52.020 --> 00:07:54.683 So where is that, 123 00:07:56.610 --> 00:07:57.443 here. 124 00:07:57.443 --> 00:07:59.750 So here it should not be fill for now, 125 00:07:59.750 --> 00:08:03.963 it should simply be the empty icon like this. 126 00:08:04.870 --> 00:08:05.703 All right. 127 00:08:07.570 --> 00:08:11.570 Now the name of this button here is button round 128 00:08:12.840 --> 00:08:16.020 but let's add a another class here. 129 00:08:16.020 --> 00:08:17.280 So let's say button 130 00:08:19.970 --> 00:08:24.850 bookmark, and so now we want to listen for clicks 131 00:08:24.850 --> 00:08:25.923 on this element. 132 00:08:26.990 --> 00:08:30.020 However, to keep this view simple 133 00:08:30.020 --> 00:08:34.400 I will not select this element, so at least not directly. 134 00:08:34.400 --> 00:08:38.400 And instead I will once again, do event delegation. 135 00:08:38.400 --> 00:08:42.577 So here let's add another function called addHandler 136 00:08:43.740 --> 00:08:46.793 and hear add bookmark. 137 00:08:49.010 --> 00:08:53.640 Which has always will receive a handler function 138 00:08:53.640 --> 00:08:55.840 which in this case is going to be the controller, 139 00:08:55.840 --> 00:08:58.163 we just created a minute ago. 140 00:08:59.260 --> 00:09:04.260 So here this.parentelement.event listener click, 141 00:09:08.160 --> 00:09:11.283 and then, or a function here. 142 00:09:12.400 --> 00:09:15.200 And so in fact this is really necessary 143 00:09:15.200 --> 00:09:18.135 because the element that we are trying to select. 144 00:09:18.135 --> 00:09:21.360 So this button with this class 145 00:09:21.360 --> 00:09:26.360 of a button bookmark does actually not exist 146 00:09:26.900 --> 00:09:31.070 by the time the application is loaded, right. 147 00:09:31.070 --> 00:09:34.389 So basically by the time that the page starts 148 00:09:34.389 --> 00:09:37.200 this element does not exist. 149 00:09:37.200 --> 00:09:39.990 And so it's impossible to add an event listener 150 00:09:39.990 --> 00:09:42.740 to an element that doesn't exist. 151 00:09:42.740 --> 00:09:45.560 And so that is yet another great use case 152 00:09:45.560 --> 00:09:47.580 for event delegation. 153 00:09:47.580 --> 00:09:49.950 So we do exactly what we do here 154 00:09:49.950 --> 00:09:53.585 which is to simply listen for the event on a parent element 155 00:09:53.585 --> 00:09:57.390 and then try to figure out if the click actually happened 156 00:09:57.390 --> 00:09:59.743 on the element that we are looking for. 157 00:10:00.985 --> 00:10:05.310 And so once again, we will do a button element here 158 00:10:05.310 --> 00:10:10.310 and then e.target.closest, because one more time 159 00:10:10.330 --> 00:10:13.780 the user might actually click on the icon element. 160 00:10:13.780 --> 00:10:16.233 So on the SVG data is in there. 161 00:10:18.660 --> 00:10:21.630 Okay and if there is a button 162 00:10:22.700 --> 00:10:25.030 or let's actually say, if there is no button 163 00:10:26.570 --> 00:10:30.190 then return so the same guard clause as always 164 00:10:31.210 --> 00:10:34.950 and otherwise call or handler. 165 00:10:34.950 --> 00:10:38.030 So this was pretty straight forward I believe 166 00:10:38.030 --> 00:10:41.210 because we have done this many times before. 167 00:10:41.210 --> 00:10:42.880 Okay and so now 168 00:10:42.880 --> 00:10:46.660 all we have to do is in the controller module 169 00:10:46.660 --> 00:10:50.573 to call this method here right. 170 00:10:53.650 --> 00:10:58.210 So recipe, view.addhandler add bookmark 171 00:10:58.210 --> 00:11:03.210 and then we pass in control add bookmark. 172 00:11:03.420 --> 00:11:07.230 And so then when we click the element that we just selected 173 00:11:07.230 --> 00:11:10.810 then we will add the current recipe as a bookmark 174 00:11:10.810 --> 00:11:14.490 and prologue also that current recipe to the console 175 00:11:14.490 --> 00:11:17.490 so that we can see that it was actually marked 176 00:11:17.490 --> 00:11:18.693 as bookmarked. 177 00:11:21.120 --> 00:11:25.010 Okay so lets the reload just to make sure 178 00:11:25.010 --> 00:11:26.293 let's click the button. 179 00:11:27.780 --> 00:11:30.270 And did anything happen? 180 00:11:30.270 --> 00:11:32.090 Oh yeah, I think it just 181 00:11:33.520 --> 00:11:35.830 yeah locked this object here. 182 00:11:35.830 --> 00:11:36.883 So let's see. 183 00:11:37.980 --> 00:11:39.510 Ah, and here we have it. 184 00:11:39.510 --> 00:11:42.393 So bookmarked is now set to true. 185 00:11:43.400 --> 00:11:44.233 Great. 186 00:11:45.110 --> 00:11:49.540 So an important piece of the work here is already done 187 00:11:49.540 --> 00:11:54.540 but now we then want to render here this icon as filled. 188 00:11:55.060 --> 00:11:58.400 And so let's go back to our view and basically say 189 00:11:58.400 --> 00:12:02.830 if bookmarked is true, then a render the filled icon. 190 00:12:02.830 --> 00:12:05.903 And if not, then simply render this one. 191 00:12:07.720 --> 00:12:10.573 So that should be easy enough. 192 00:12:12.340 --> 00:12:13.980 So not here in the view, of course 193 00:12:13.980 --> 00:12:17.033 but in the recipe view where regenerate a markup. 194 00:12:18.453 --> 00:12:23.453 So yeah, this is the button here, and this is the icon 195 00:12:24.530 --> 00:12:26.630 that I'm talking about. 196 00:12:26.630 --> 00:12:29.300 So here, when the recipe is bookmarked 197 00:12:29.300 --> 00:12:33.033 we want to add like this fill part. 198 00:12:34.120 --> 00:12:38.707 And so we can simply say this.data 199 00:12:41.790 --> 00:12:45.293 which is the recipe.bookmarked. 200 00:12:47.440 --> 00:12:52.440 So if so then here create a fill and otherwise nothing. 201 00:12:55.294 --> 00:12:58.640 Okay and now finally, to actually make this work 202 00:12:58.640 --> 00:13:03.350 of course, we will also have to update the entire recipe. 203 00:13:03.350 --> 00:13:08.350 So recipe view and so this is why we created 204 00:13:08.600 --> 00:13:10.633 that update method before. 205 00:13:11.610 --> 00:13:15.470 And so now again, this method is coming in very useful 206 00:13:15.470 --> 00:13:20.050 because otherwise we would have to render the entire page 207 00:13:20.050 --> 00:13:22.330 or actually the entire view 208 00:13:22.330 --> 00:13:24.520 which would make a lot of sense 209 00:13:24.520 --> 00:13:27.550 because with this we will only update the element 210 00:13:27.550 --> 00:13:29.453 which has actually changed. 211 00:13:31.550 --> 00:13:34.860 And so here then again we need to pass in the data 212 00:13:34.860 --> 00:13:36.900 that we want to update. 213 00:13:36.900 --> 00:13:41.003 And so that's model.state.recipe once again. 214 00:13:41.910 --> 00:13:45.030 Okay and so now as we click here 215 00:13:45.030 --> 00:13:50.030 let's see, and indeed the button was updated. 216 00:13:51.590 --> 00:13:53.700 Now we get all of these logs here. 217 00:13:53.700 --> 00:13:57.543 Let's take them out that is in the view. 218 00:13:58.870 --> 00:14:02.460 So that's this one here. 219 00:14:02.460 --> 00:14:04.120 Great. 220 00:14:04.120 --> 00:14:06.120 So here, let's now search for something. 221 00:14:11.260 --> 00:14:13.733 So let's mark this one here as a bookmark, 222 00:14:14.950 --> 00:14:16.310 then this one here 223 00:14:17.590 --> 00:14:21.223 but now as we come back here, let's see what happens. 224 00:14:22.610 --> 00:14:25.383 And you see that the bookmark is actually gone, 225 00:14:27.500 --> 00:14:28.720 right? 226 00:14:28.720 --> 00:14:33.720 So now here you no longer see bookmarked set to true. 227 00:14:33.770 --> 00:14:35.113 So why is that? 228 00:14:35.950 --> 00:14:39.550 Well, as we load each new recipe 229 00:14:39.550 --> 00:14:42.660 it will always be loaded basically from scratch. 230 00:14:42.660 --> 00:14:46.800 So it will be loaded from the API, right? 231 00:14:46.800 --> 00:14:51.070 We are not loading this recipe from the bookmarks. 232 00:14:51.070 --> 00:14:53.570 And actually we won't do that. 233 00:14:53.570 --> 00:14:57.260 But what we will do is to now use the data that we store 234 00:14:57.260 --> 00:14:59.930 in the bookmarks array and the state 235 00:14:59.930 --> 00:15:04.350 to basically Mark any recipe that we load as bookmarked, 236 00:15:04.350 --> 00:15:07.163 if it is already in the bookmarks array. 237 00:15:08.490 --> 00:15:11.470 So that probably sounded more complicated 238 00:15:11.470 --> 00:15:13.450 than it actually is. 239 00:15:13.450 --> 00:15:16.780 Okay so let's go here back to the model 240 00:15:16.780 --> 00:15:20.260 and then to our function, which loads the recipe. 241 00:15:20.260 --> 00:15:21.763 So that is this one. 242 00:15:22.630 --> 00:15:25.520 So here the as we got all this data 243 00:15:25.520 --> 00:15:28.380 and store it in the state. 244 00:15:28.380 --> 00:15:32.060 Then what we can do is to check if there is already a recipe 245 00:15:32.060 --> 00:15:35.270 with the same ID in the bookmarks state. 246 00:15:35.270 --> 00:15:38.740 And if it is then we will mark the current recipe 247 00:15:38.740 --> 00:15:43.740 that we just loaded from the API as bookmarked set to true. 248 00:15:44.030 --> 00:15:46.070 So let's use 249 00:15:46.070 --> 00:15:49.060 one of the nice array methods that we learned about, 250 00:15:49.060 --> 00:15:52.050 which is the sum method. 251 00:15:52.050 --> 00:15:55.830 And remember that the sum method returns true or false. 252 00:15:55.830 --> 00:15:59.663 And so that's great for doing an if check like this. 253 00:16:00.620 --> 00:16:04.820 So here we can check if state.bookmarks.some 254 00:16:08.350 --> 00:16:10.570 which basically means any, 255 00:16:10.570 --> 00:16:14.660 so at least that's how I like to think about this method. 256 00:16:14.660 --> 00:16:17.500 So this method will loop over an array 257 00:16:17.500 --> 00:16:21.920 and then return true if any of them actually has to 258 00:16:21.920 --> 00:16:24.003 for the condition that we specify here. 259 00:16:25.300 --> 00:16:29.350 So if bookmark.id is the same 260 00:16:30.540 --> 00:16:33.360 as the ID that we just received here 261 00:16:33.360 --> 00:16:36.113 okay, let's call this here bookmark actually. 262 00:16:38.380 --> 00:16:40.960 And so basically what this means is that 263 00:16:40.960 --> 00:16:45.240 if there is any bookmark, which has the bookmark ID 264 00:16:45.240 --> 00:16:48.000 equal to the ID that we just received 265 00:16:48.000 --> 00:16:51.240 well, then we want the current recipe 266 00:16:51.240 --> 00:16:56.090 which is state.recipe to be bookmarked. 267 00:16:56.090 --> 00:16:59.763 So bookmark equal to true. 268 00:17:00.810 --> 00:17:04.793 Okay and otherwise we wanted a set to false. 269 00:17:08.790 --> 00:17:12.580 And so with this, all the recipes that we now load 270 00:17:12.580 --> 00:17:17.390 we'll always have bookmarked set to either true or false. 271 00:17:17.390 --> 00:17:19.620 Okay great. 272 00:17:19.620 --> 00:17:24.550 And so now we actually used this state.bookmarks 273 00:17:24.550 --> 00:17:26.600 for anything meaningful. 274 00:17:26.600 --> 00:17:30.180 So up until this point, we had stored the recipe 275 00:17:30.180 --> 00:17:33.760 in the bookmarks array, but it wasn't really useful. 276 00:17:33.760 --> 00:17:36.620 So there was really no point up until now, 277 00:17:36.620 --> 00:17:39.254 but now here use basically use this array 278 00:17:39.254 --> 00:17:41.860 in order to store all the bookmarks 279 00:17:41.860 --> 00:17:44.640 so that when we come back to one of them, 280 00:17:44.640 --> 00:17:48.163 we can then mark the recipe as being bookmarked. 281 00:17:49.290 --> 00:17:51.003 So let's try this now again. 282 00:17:52.630 --> 00:17:56.320 So bookmarking this, then I come to this 283 00:17:56.320 --> 00:18:01.320 and yeah so that worked and you see that it is bookmarked 284 00:18:02.150 --> 00:18:04.910 set to true and the previous one. 285 00:18:04.910 --> 00:18:07.940 So the double crust stuffed pizza 286 00:18:07.940 --> 00:18:10.740 is of course bookmarked set to false. 287 00:18:10.740 --> 00:18:13.420 And so when we click that here, 288 00:18:13.420 --> 00:18:15.830 it doesn't have the bookmark. 289 00:18:15.830 --> 00:18:17.313 Now we bookmarked it. 290 00:18:18.200 --> 00:18:20.913 And when we come back to it, then there it is. 291 00:18:22.200 --> 00:18:26.327 Okay and now just as the final piece here, 292 00:18:26.327 --> 00:18:28.900 when we click on this button again 293 00:18:28.900 --> 00:18:33.620 we then want to unbookmark basically this recipe. 294 00:18:33.620 --> 00:18:36.420 So we want to remove it from the bookmarks 295 00:18:36.420 --> 00:18:40.040 but right now, of course, that doesn't happen. 296 00:18:40.040 --> 00:18:44.900 And so what we need now is basically yet another method 297 00:18:44.900 --> 00:18:47.010 or function here in our model, 298 00:18:47.010 --> 00:18:51.450 which will simply remove a bookmark. 299 00:18:51.450 --> 00:18:54.203 So doing the opposite of add bookmark. 300 00:18:55.590 --> 00:18:59.940 So const delete bookmark 301 00:19:02.830 --> 00:19:05.800 and this one will simply receive an ID 302 00:19:05.800 --> 00:19:08.530 because that is actually simpler. 303 00:19:08.530 --> 00:19:11.160 And this is actually a common pattern 304 00:19:11.160 --> 00:19:14.340 that you will see in programming when we add something 305 00:19:14.340 --> 00:19:16.130 we get the entire data. 306 00:19:16.130 --> 00:19:19.393 And when we want to delete something, we only get to the ID. 307 00:19:20.350 --> 00:19:24.090 So this is a pretty common pattern again. 308 00:19:24.090 --> 00:19:28.710 So what we want to do here is to basically delete the recipe 309 00:19:28.710 --> 00:19:33.710 which has this ID from the bookmarks array right? 310 00:19:34.330 --> 00:19:39.010 So state.bookmarks and then to delete something, 311 00:19:39.010 --> 00:19:41.550 we use the splice method. 312 00:19:41.550 --> 00:19:45.610 Remember, and then here we need the index 313 00:19:45.610 --> 00:19:48.160 where the element is actually located 314 00:19:48.160 --> 00:19:49.310 that we want to delete. 315 00:19:50.330 --> 00:19:53.309 So we will calculate the index in a second. 316 00:19:53.309 --> 00:19:56.670 And then how many items we want to delete 317 00:19:56.670 --> 00:19:57.763 which has only one. 318 00:19:59.123 --> 00:20:02.980 And so this index here, we can calculate it by using 319 00:20:02.980 --> 00:20:05.783 our old friend defined index method. 320 00:20:07.310 --> 00:20:08.963 So state.bookmarks. 321 00:20:10.010 --> 00:20:13.300 And I think we already did something very similar to this 322 00:20:13.300 --> 00:20:15.833 in the Bankist application. 323 00:20:17.620 --> 00:20:19.710 So here we are looking for the element 324 00:20:20.830 --> 00:20:25.830 which has the ID equal to the ID that was passed in. 325 00:20:26.800 --> 00:20:28.920 So there's going to be one bookmark 326 00:20:28.920 --> 00:20:33.110 for which this condition here is true. 327 00:20:33.110 --> 00:20:37.730 So word current bookmark.id is equal to this ID. 328 00:20:37.730 --> 00:20:41.045 And so for this element where this condition is true 329 00:20:41.045 --> 00:20:43.330 the index will be returned. 330 00:20:43.330 --> 00:20:46.913 And then we can take that index and deleted from the array. 331 00:20:47.840 --> 00:20:52.840 And then finally, let's also mark the current recipe 332 00:20:54.440 --> 00:20:57.023 as not a bookmark anymore. 333 00:20:59.790 --> 00:21:04.790 So as not bookmarked and here as well, 334 00:21:05.920 --> 00:21:10.920 and here let's say delete bookmark, okay. 335 00:21:13.500 --> 00:21:17.330 And now we need to of course use this function somewhere. 336 00:21:17.330 --> 00:21:20.433 And that's always, that can only be in the controller. 337 00:21:22.130 --> 00:21:27.130 Okay, so this control add bookmark function will be executed 338 00:21:27.290 --> 00:21:30.830 whenever we click on that bookmark button. 339 00:21:30.830 --> 00:21:32.900 And so here we now need to control 340 00:21:32.900 --> 00:21:35.900 what exactly should happen in that case. 341 00:21:35.900 --> 00:21:40.540 So when do we actually want to add a bookmark? 342 00:21:40.540 --> 00:21:45.493 Well, actually only when the recipe is not yet bookmarked. 343 00:21:46.330 --> 00:21:47.573 So let's write that. 344 00:21:48.910 --> 00:21:53.157 So if model.state.recipe.bookmarked 345 00:21:55.860 --> 00:21:57.173 so if that's false, 346 00:21:58.270 --> 00:22:00.250 then do this. 347 00:22:00.250 --> 00:22:03.493 So add to bookmark then but if not, 348 00:22:04.820 --> 00:22:07.160 and so let's now do this instead of an else 349 00:22:07.160 --> 00:22:09.610 because this is more readable 350 00:22:09.610 --> 00:22:12.203 then we want to delete bookmark. 351 00:22:13.370 --> 00:22:17.970 And again, here we pass in actually the ID like this 352 00:22:19.290 --> 00:22:23.160 and that's actually it, and this is possible. 353 00:22:23.160 --> 00:22:27.650 Remember so it's possible that we read the bookmark property 354 00:22:27.650 --> 00:22:29.250 right at the beginning 355 00:22:29.250 --> 00:22:31.610 because we add that to all the recipes 356 00:22:31.610 --> 00:22:35.663 that are ever loaded right at the beginning right here. 357 00:22:37.070 --> 00:22:42.070 Okay and so now this should not work. 358 00:22:45.770 --> 00:22:48.323 Let's try avocado now for a change. 359 00:22:49.510 --> 00:22:52.240 So some sushi here that looks delicious 360 00:22:54.290 --> 00:22:57.100 and we get ourselves a bug. 361 00:22:57.100 --> 00:23:01.883 So let's go to line number eight, 98 actually. 362 00:23:02.850 --> 00:23:05.010 So 98. 363 00:23:05.010 --> 00:23:08.480 Oh and here we are using recipe.id 364 00:23:09.570 --> 00:23:12.120 because we simply copied it from here. 365 00:23:12.120 --> 00:23:16.870 So you see that simply copying some code many times can 366 00:23:16.870 --> 00:23:19.010 make us run into bugs. 367 00:23:19.010 --> 00:23:22.093 So here, of course we are already receiving the ID. 368 00:23:23.300 --> 00:23:26.940 So that's only ID let's go back 369 00:23:29.030 --> 00:23:31.503 and let's search for avocado again. 370 00:23:33.900 --> 00:23:37.253 So here we have that let's bookmark it. 371 00:23:38.300 --> 00:23:40.493 Well, that didn't work. 372 00:23:41.380 --> 00:23:46.380 Let's see why, so probably something wrong 373 00:23:46.700 --> 00:23:47.953 in our controller. 374 00:23:49.190 --> 00:23:53.120 So let's lock this year to the console, 375 00:23:53.120 --> 00:23:55.660 just to see if this is having any effect 376 00:24:00.630 --> 00:24:04.803 let's clear this here, and it is false. 377 00:24:06.140 --> 00:24:07.223 And so, 378 00:24:08.220 --> 00:24:10.010 therefore this should have worked 379 00:24:11.970 --> 00:24:14.363 but somehow nothing worked. 380 00:24:15.860 --> 00:24:19.713 So this code here did not get executed for some reason. 381 00:24:20.630 --> 00:24:24.550 Oh and actually I see what is happening. 382 00:24:24.550 --> 00:24:28.470 So this code actually did get executed. 383 00:24:28.470 --> 00:24:32.860 So this code here, will mark the recipe as bookmarked, 384 00:24:32.860 --> 00:24:36.730 but then in the next line of code right here, 385 00:24:36.730 --> 00:24:39.810 then the recipe is already bookmarked. 386 00:24:39.810 --> 00:24:42.980 And so then it will delete that bookmark. 387 00:24:42.980 --> 00:24:45.903 And so here, actually we need an else. 388 00:24:49.340 --> 00:24:54.340 Okay so that's the kind of sometimes difficult 389 00:24:55.042 --> 00:24:59.090 bugs to find, but I'm sure that with time, 390 00:24:59.090 --> 00:25:01.823 you will also be able to find all of these bug. 391 00:25:03.610 --> 00:25:07.743 So let's click on some recipe here, mark it as a bookmark. 392 00:25:08.760 --> 00:25:11.713 Then we go here to some other one mark that. 393 00:25:14.040 --> 00:25:17.620 Then here, that is still working and now let's click 394 00:25:17.620 --> 00:25:19.730 and see if it disappears. 395 00:25:19.730 --> 00:25:22.053 And yes, it does. 396 00:25:23.590 --> 00:25:27.030 Now do the same here, come back. 397 00:25:27.030 --> 00:25:28.563 And it is still unbookmarked. 398 00:25:32.030 --> 00:25:34.930 Well, all right. 399 00:25:34.930 --> 00:25:37.600 So with this, we have two core functionality 400 00:25:37.600 --> 00:25:41.880 of bookmarking actually already implemented. 401 00:25:41.880 --> 00:25:44.380 So great job once again. 402 00:25:44.380 --> 00:25:46.260 And now all that is missing 403 00:25:46.260 --> 00:25:49.390 is that we display all our bookmarks up here 404 00:25:49.390 --> 00:25:51.570 in this bookmarks panel. 405 00:25:51.570 --> 00:25:54.860 And that is a little bit more work than it might sound. 406 00:25:54.860 --> 00:25:57.713 And so that's leave that for our next video.