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.