1 00:00:01,090 --> 00:00:02,170 In this lecture, 2 00:00:02,170 --> 00:00:05,980 we will develop an algorithm which will update the DOM 3 00:00:05,980 --> 00:00:08,833 only in places where it actually changed. 4 00:00:10,660 --> 00:00:13,330 And remember that that is necessary 5 00:00:13,330 --> 00:00:17,090 because right now, as we update the servings here, 6 00:00:17,090 --> 00:00:20,680 then that will always basically re-render 7 00:00:20,680 --> 00:00:23,453 the entire recipe view here. 8 00:00:24,780 --> 00:00:28,920 And so we can see some flickering around the page. 9 00:00:28,920 --> 00:00:31,650 Right now, it's not really happening 10 00:00:31,650 --> 00:00:33,270 for some reason. 11 00:00:33,270 --> 00:00:35,440 But you saw that in the previous video 12 00:00:35,440 --> 00:00:38,680 where every time that I would update the servings, 13 00:00:38,680 --> 00:00:42,160 it would then basically reload this image, 14 00:00:42,160 --> 00:00:45,460 which would then cause a short flicker. 15 00:00:45,460 --> 00:00:48,990 And having to re-render the entire view, 16 00:00:48,990 --> 00:00:51,650 so all of these HTML elements 17 00:00:51,650 --> 00:00:54,170 is actually a bit overkill 18 00:00:54,170 --> 00:00:57,630 and it will put too much strain on the browser. 19 00:00:57,630 --> 00:01:00,380 So it will create unnecessary work. 20 00:01:00,380 --> 00:01:03,920 And so therefore, let's now create an update method 21 00:01:03,920 --> 00:01:06,870 that we can use in this situation. 22 00:01:06,870 --> 00:01:07,703 All right? 23 00:01:09,890 --> 00:01:14,400 So again, here instead of calling the render method, 24 00:01:14,400 --> 00:01:18,540 we actually want to be able to call an update method. 25 00:01:18,540 --> 00:01:21,070 So let's duplicate this line here 26 00:01:21,070 --> 00:01:21,993 or comment it. 27 00:01:23,300 --> 00:01:27,740 And so here we want to call update. 28 00:01:27,740 --> 00:01:31,810 And of course, the update will still need all the data, 29 00:01:31,810 --> 00:01:33,680 just like the render method 30 00:01:33,680 --> 00:01:36,890 but again, the difference between update and render 31 00:01:36,890 --> 00:01:38,630 is that the update method 32 00:01:38,630 --> 00:01:41,090 will basically only update text 33 00:01:41,090 --> 00:01:43,330 and attributes in the DOM. 34 00:01:43,330 --> 00:01:46,633 So without having to re-render the entire view. 35 00:01:47,530 --> 00:01:49,990 And so let's now go to the view here 36 00:01:49,990 --> 00:01:52,910 because we will want this update method 37 00:01:52,910 --> 00:01:55,370 to be available on all the views 38 00:01:56,770 --> 00:01:58,860 because actually, we will use this 39 00:01:58,860 --> 00:02:01,810 in multiple situations in this project. 40 00:02:01,810 --> 00:02:03,730 So actually, not just here 41 00:02:03,730 --> 00:02:05,273 for updating the servings. 42 00:02:07,350 --> 00:02:10,370 But anyway, this is called update 43 00:02:10,370 --> 00:02:13,500 and it receives also some data. 44 00:02:13,500 --> 00:02:18,470 Here then, let's get this same check here. 45 00:02:18,470 --> 00:02:21,833 And also, we will want to do these two parts. 46 00:02:23,020 --> 00:02:27,470 And that is because well, once we update the data, 47 00:02:27,470 --> 00:02:29,350 we then want the view's data 48 00:02:29,350 --> 00:02:31,950 to become that new data. 49 00:02:31,950 --> 00:02:35,750 And we also want to generate some new Markup. 50 00:02:35,750 --> 00:02:38,330 So let's actually call this here the newMarkup. 51 00:02:40,440 --> 00:02:43,220 And this will basically be the entire Markup 52 00:02:43,220 --> 00:02:47,010 as if we wanted to render a new view. 53 00:02:47,010 --> 00:02:50,640 But again, here we are just going to update the Markup, 54 00:02:50,640 --> 00:02:54,290 but for doing that, we still need the entire Markup 55 00:02:54,290 --> 00:02:56,160 so that we can then compare it 56 00:02:56,160 --> 00:02:58,603 to the old Markup basically. 57 00:02:59,520 --> 00:03:01,870 So again, what we will do here 58 00:03:01,870 --> 00:03:05,010 in this method is to create newMarkup 59 00:03:05,010 --> 00:03:07,010 but not render it. 60 00:03:07,010 --> 00:03:09,160 So instead, all that we're gonna do 61 00:03:09,160 --> 00:03:10,980 is to generate this Markup 62 00:03:10,980 --> 00:03:13,940 and then compare that new HTML 63 00:03:13,940 --> 00:03:15,700 to the current HTML. 64 00:03:15,700 --> 00:03:17,470 And then only change text 65 00:03:17,470 --> 00:03:20,270 and attributes that actually have changed 66 00:03:20,270 --> 00:03:24,380 from the old version to the new version, okay? 67 00:03:24,380 --> 00:03:26,870 So here we now have the Markup 68 00:03:26,870 --> 00:03:28,850 but that is just a string. 69 00:03:28,850 --> 00:03:31,980 And so that is gonna be very difficult to compare 70 00:03:31,980 --> 00:03:34,420 to the DOM elements that we currently have 71 00:03:34,420 --> 00:03:35,740 on the page. 72 00:03:35,740 --> 00:03:37,560 And so to fix that problem, 73 00:03:37,560 --> 00:03:39,950 we can actually use a nice trick, 74 00:03:39,950 --> 00:03:43,750 which is to basically convert this Markup string 75 00:03:43,750 --> 00:03:45,440 to a DOM object 76 00:03:45,440 --> 00:03:47,330 that's living in the memory 77 00:03:47,330 --> 00:03:48,870 and that we can then use 78 00:03:48,870 --> 00:03:51,953 to compare with the actual DOM that's on the page. 79 00:03:52,970 --> 00:03:55,917 So let's do that and create newDOM. 80 00:03:58,360 --> 00:04:00,220 And so document. 81 00:04:00,220 --> 00:04:05,220 And then we need to call a function called createRange. 82 00:04:10,300 --> 00:04:11,440 Okay? 83 00:04:11,440 --> 00:04:13,960 So this will create something called a range, 84 00:04:13,960 --> 00:04:17,090 and on the range, we can then call yet another method, 85 00:04:17,090 --> 00:04:20,127 which is called createContextualFragment. 86 00:04:23,980 --> 00:04:26,950 And so this is where we then pass in the string 87 00:04:26,950 --> 00:04:30,573 of Markup, so like a string of HTML. 88 00:04:31,790 --> 00:04:33,850 And so as I said before, 89 00:04:33,850 --> 00:04:36,490 this method will then convert that string 90 00:04:36,490 --> 00:04:39,250 into real DOM Node objects. 91 00:04:39,250 --> 00:04:40,910 So basically, newDOM here 92 00:04:40,910 --> 00:04:43,690 will become like a big object, 93 00:04:43,690 --> 00:04:46,410 which is like a virtual DOM. 94 00:04:46,410 --> 00:04:49,680 So a DOM that is not really living on the page 95 00:04:49,680 --> 00:04:51,890 but which lives in our memory. 96 00:04:51,890 --> 00:04:53,990 And so we can now use that DOM 97 00:04:53,990 --> 00:04:57,250 as if it was the real DOM on our page. 98 00:04:57,250 --> 00:04:59,453 And so we can do something like this. 99 00:05:00,320 --> 00:05:03,123 We can say newElements. 100 00:05:05,270 --> 00:05:07,247 And then we can take that newDOM, 101 00:05:08,650 --> 00:05:11,880 and then on that, we can call querySelectorAll, 102 00:05:14,120 --> 00:05:16,283 and select all the elements in there. 103 00:05:17,450 --> 00:05:19,563 And so if we now log this to the console, 104 00:05:21,740 --> 00:05:24,450 then we will basically see all the elements 105 00:05:24,450 --> 00:05:28,559 that will be contained inside of this newDOM element 106 00:05:28,559 --> 00:05:31,843 that we basically created from generating the new Markup 107 00:05:31,843 --> 00:05:35,517 from the updated data, okay? 108 00:05:35,517 --> 00:05:38,423 So that sounds confusing I'm sure. 109 00:05:40,280 --> 00:05:43,650 But we will see it in practice really soon. 110 00:05:43,650 --> 00:05:45,765 So we are calling update here. 111 00:05:45,765 --> 00:05:48,000 And so that will then trigger all of this 112 00:05:48,000 --> 00:05:49,590 and so let's now see in the console 113 00:05:49,590 --> 00:05:50,453 what happens. 114 00:05:53,990 --> 00:05:56,803 So just to make sure everything works here, 115 00:06:00,230 --> 00:06:01,710 so as we're clicking here, 116 00:06:01,710 --> 00:06:05,887 it will, of course, now no longer update the values here 117 00:06:05,887 --> 00:06:10,150 in the DOM because we are now using the update method, 118 00:06:10,150 --> 00:06:12,093 which for now doesn't do that. 119 00:06:13,570 --> 00:06:16,670 Okay, but what we did got 120 00:06:16,670 --> 00:06:19,700 was the entire list of all the elements 121 00:06:19,700 --> 00:06:20,973 in the new DOM. 122 00:06:22,170 --> 00:06:26,803 So in this so to say virtual DOM, okay? 123 00:06:27,790 --> 00:06:30,340 So if we check now this element, 124 00:06:30,340 --> 00:06:33,020 so this is the element that contains the number, 125 00:06:33,020 --> 00:06:34,703 that should now contain five. 126 00:06:36,400 --> 00:06:39,480 So let's see the textContent property 127 00:06:40,640 --> 00:06:43,000 or innerHTML is the same 128 00:06:43,000 --> 00:06:45,603 and so indeed, here we have five now. 129 00:06:46,470 --> 00:06:48,830 And so again, the reason for that 130 00:06:48,830 --> 00:06:50,470 is that this here 131 00:06:50,470 --> 00:06:53,260 is now basically the DOM that would be rendered 132 00:06:53,260 --> 00:06:57,853 on the page if we simply used the render method from before. 133 00:06:59,190 --> 00:07:00,810 Okay? 134 00:07:00,810 --> 00:07:02,400 And so now with this, 135 00:07:02,400 --> 00:07:04,290 we can compare this DOM 136 00:07:04,290 --> 00:07:06,590 that we have here, which is a little bit 137 00:07:06,590 --> 00:07:08,460 like a virtual DOM. 138 00:07:08,460 --> 00:07:12,620 So to the actual DOM that is really on the page. 139 00:07:12,620 --> 00:07:16,100 So for example, again, this one here 140 00:07:16,100 --> 00:07:18,220 has now changed to five 141 00:07:18,220 --> 00:07:20,040 and this one is still at four. 142 00:07:20,040 --> 00:07:22,450 And so that is one of the elements, 143 00:07:22,450 --> 00:07:25,050 which is different and so that is then one 144 00:07:25,050 --> 00:07:27,110 of the things that we will change. 145 00:07:27,110 --> 00:07:30,010 But everything else is the same 146 00:07:30,010 --> 00:07:32,430 or at least, most of the things. 147 00:07:32,430 --> 00:07:34,340 For example, here the minutes, 148 00:07:34,340 --> 00:07:38,503 this value here, this is, of course, still 45. 149 00:07:40,010 --> 00:07:43,270 So you see, of course, it's still 45 150 00:07:43,270 --> 00:07:46,060 and so this element will not change, 151 00:07:46,060 --> 00:07:48,160 and the same, for example, for the image 152 00:07:48,160 --> 00:07:49,730 and for this icon 153 00:07:49,730 --> 00:07:52,780 and for lots of things here. 154 00:07:52,780 --> 00:07:54,700 And so with this, we will be able 155 00:07:54,700 --> 00:07:56,610 to only change what happened 156 00:07:56,610 --> 00:07:57,620 from the new DOM, 157 00:07:57,620 --> 00:08:01,060 which is this one here to the actual current DOM, 158 00:08:01,060 --> 00:08:04,770 which is basically what we have here on the page. 159 00:08:04,770 --> 00:08:07,030 So in order to being able 160 00:08:07,030 --> 00:08:09,610 to actually do that comparison, 161 00:08:09,610 --> 00:08:13,150 we now also need to get all the actual elements 162 00:08:13,150 --> 00:08:15,173 that are currently on the page. 163 00:08:16,250 --> 00:08:18,630 So get them into our code. 164 00:08:18,630 --> 00:08:20,883 And so therefore, let's also select them. 165 00:08:22,550 --> 00:08:24,550 So let's call that the current elements, 166 00:08:26,010 --> 00:08:30,140 which are at this._parentElement 167 00:08:32,315 --> 00:08:34,482 and then querySelectorAll. 168 00:08:35,787 --> 00:08:38,623 And then again, selecting all of them. 169 00:08:39,640 --> 00:08:41,040 And maybe you saw previously 170 00:08:41,040 --> 00:08:43,800 that this here returned a Node list 171 00:08:43,800 --> 00:08:46,950 and so let's right away convert this and this one 172 00:08:46,950 --> 00:08:48,720 to a real array. 173 00:08:48,720 --> 00:08:53,543 So remember, we can do that with Array.from. 174 00:08:55,350 --> 00:08:56,183 All right? 175 00:08:57,400 --> 00:09:00,953 And so let's actually now do that comparison. 176 00:09:01,847 --> 00:09:05,530 Well, I mean, only visually in the console for now. 177 00:09:05,530 --> 00:09:08,740 So let's log the current elements 178 00:09:09,940 --> 00:09:13,097 and let's also again log the newElements. 179 00:09:16,690 --> 00:09:18,557 So let's click here now. 180 00:09:19,900 --> 00:09:22,823 And you see that now it is actually an array. 181 00:09:24,700 --> 00:09:26,020 I'll go OK. 182 00:09:26,020 --> 00:09:29,140 So let's look again for the servings 183 00:09:29,140 --> 00:09:32,080 and that's actually not the one, 184 00:09:32,080 --> 00:09:33,203 this is the one. 185 00:09:34,300 --> 00:09:36,733 So let's see the textContent or the innerHTML. 186 00:09:38,350 --> 00:09:41,620 And so indeed, it is still four, right? 187 00:09:41,620 --> 00:09:44,240 And again, because that is the current DOM. 188 00:09:44,240 --> 00:09:46,763 But if we now come to our new DOM, 189 00:09:47,830 --> 00:09:52,503 then well, it's gotta be down here. 190 00:09:54,610 --> 00:09:58,960 So then if we open up this one, 191 00:09:58,960 --> 00:10:01,423 then again we should be already at five. 192 00:10:02,550 --> 00:10:03,670 Right? 193 00:10:03,670 --> 00:10:05,100 So here we have five 194 00:10:05,100 --> 00:10:08,980 and so now let's actually compare these two, 195 00:10:08,980 --> 00:10:10,920 basically one by one. 196 00:10:10,920 --> 00:10:11,920 Okay? 197 00:10:11,920 --> 00:10:15,263 So I'm going to loop over the newElements array now, 198 00:10:18,930 --> 00:10:20,830 and here in the callback function, 199 00:10:20,830 --> 00:10:22,080 then the current element 200 00:10:22,080 --> 00:10:25,230 is the newEl let's say, 201 00:10:25,230 --> 00:10:29,030 and then we also need access to the current index 202 00:10:30,260 --> 00:10:34,160 so that we can then also grab the current element 203 00:10:34,160 --> 00:10:36,490 from this array. 204 00:10:36,490 --> 00:10:39,120 So basically, we need to loop over the two arrays 205 00:10:39,120 --> 00:10:40,550 at the same time 206 00:10:40,550 --> 00:10:42,780 and I think we've done that before. 207 00:10:42,780 --> 00:10:44,890 So for that, we also need the index 208 00:10:44,890 --> 00:10:49,190 so that now we can say that the current element 209 00:10:49,190 --> 00:10:54,190 is equal current elements at position i. 210 00:10:56,800 --> 00:11:00,130 Okay, and now, how will we actually compare 211 00:11:00,130 --> 00:11:01,800 these two elements? 212 00:11:01,800 --> 00:11:05,320 So current element and newElement? 213 00:11:05,320 --> 00:11:07,943 Well, there's actually a very handy method 214 00:11:07,943 --> 00:11:10,540 that is available on all nodes, 215 00:11:10,540 --> 00:11:12,423 which is isEqualNode. 216 00:11:13,890 --> 00:11:16,410 So let's log that here to the console. 217 00:11:16,410 --> 00:11:17,620 So in each iteration, 218 00:11:17,620 --> 00:11:21,170 we will log whether the new element 219 00:11:22,336 --> 00:11:26,720 isEqualNode to the current element. 220 00:11:28,240 --> 00:11:31,623 And then let's disable these two console.logs here. 221 00:11:32,500 --> 00:11:35,530 And let's also log the current element 222 00:11:35,530 --> 00:11:37,400 so that we actually know 223 00:11:37,400 --> 00:11:40,960 what element we are comparing here, all right? 224 00:11:40,960 --> 00:11:42,890 So again, this method here 225 00:11:42,890 --> 00:11:45,280 will basically compare the content 226 00:11:45,280 --> 00:11:47,500 of this one and of this one. 227 00:11:47,500 --> 00:11:50,120 So it doesn't have to be the exact same node. 228 00:11:50,120 --> 00:11:52,080 All that matters is that the content 229 00:11:52,080 --> 00:11:54,103 in these nodes is the same. 230 00:11:55,380 --> 00:11:56,290 Right? 231 00:11:56,290 --> 00:11:58,350 And if you're curious about the difference 232 00:11:58,350 --> 00:12:00,950 between elements and nodes, 233 00:12:00,950 --> 00:12:02,640 then please go watch the beginning 234 00:12:02,640 --> 00:12:04,860 of the advanced DOM section 235 00:12:04,860 --> 00:12:08,240 because there's a very nice lecture about that. 236 00:12:08,240 --> 00:12:09,190 Okay? 237 00:12:09,190 --> 00:12:11,163 But anyway, let's now check this. 238 00:12:12,640 --> 00:12:13,873 So clearing this. 239 00:12:16,376 --> 00:12:18,226 And so a lot of things happened here. 240 00:12:20,210 --> 00:12:23,194 And so you see that most of these nodes 241 00:12:23,194 --> 00:12:24,693 are actually the same. 242 00:12:25,540 --> 00:12:28,193 Let's go all the way to the top here. 243 00:12:31,170 --> 00:12:32,800 So these here are all the same, 244 00:12:32,800 --> 00:12:34,390 so you see true. 245 00:12:34,390 --> 00:12:36,850 But here you also see false. 246 00:12:36,850 --> 00:12:38,717 So basically, this entire container 247 00:12:38,717 --> 00:12:41,130 is not the same as before 248 00:12:41,130 --> 00:12:43,323 because something inside of there changed. 249 00:12:45,020 --> 00:12:47,463 But let's actually go to that detail. 250 00:12:48,690 --> 00:12:51,970 So here it is. 251 00:12:51,970 --> 00:12:54,130 So here this is now false 252 00:12:54,130 --> 00:12:56,280 because this current element here 253 00:12:56,280 --> 00:12:58,780 is now different from the new element, 254 00:12:58,780 --> 00:13:01,850 which will have five servings. 255 00:13:01,850 --> 00:13:04,193 And the same here for these two buttons. 256 00:13:07,130 --> 00:13:09,550 So this button and also this button 257 00:13:09,550 --> 00:13:11,780 because this data attribute in there 258 00:13:11,780 --> 00:13:13,510 will also be different. 259 00:13:13,510 --> 00:13:15,210 So if we are on page five, 260 00:13:15,210 --> 00:13:17,350 then this here will update to six 261 00:13:17,350 --> 00:13:18,483 and this one to four. 262 00:13:20,090 --> 00:13:21,600 Okay? 263 00:13:21,600 --> 00:13:24,440 So again, we have this to false 264 00:13:24,440 --> 00:13:27,330 because the current element is, at this point, 265 00:13:27,330 --> 00:13:29,540 different from the new element. 266 00:13:29,540 --> 00:13:30,890 But the same also happens 267 00:13:30,890 --> 00:13:33,750 on all the parent elements of that. 268 00:13:33,750 --> 00:13:37,252 So it happens here in recipe__info 269 00:13:37,252 --> 00:13:39,920 and then as we saw previously, 270 00:13:39,920 --> 00:13:42,000 also in this whole container 271 00:13:42,000 --> 00:13:44,460 simply because the four in there changed. 272 00:13:44,460 --> 00:13:47,420 And so that means that this entire container is, 273 00:13:47,420 --> 00:13:50,290 of course, different to what it was before. 274 00:13:50,290 --> 00:13:52,460 But nevermind about that for now. 275 00:13:52,460 --> 00:13:55,100 That's the detail we will tackle later. 276 00:13:55,100 --> 00:13:58,870 For now, let's use this node here for our advantage 277 00:13:58,870 --> 00:14:01,603 and do something in this situation. 278 00:14:05,280 --> 00:14:08,873 So basically, if the newElement isEqual 279 00:14:12,460 --> 00:14:13,713 to the current element, 280 00:14:15,250 --> 00:14:17,610 so if that is not the case, 281 00:14:17,610 --> 00:14:19,590 so if they are different, 282 00:14:19,590 --> 00:14:21,780 then we want to change the text content 283 00:14:21,780 --> 00:14:24,880 of the current element to the text content 284 00:14:24,880 --> 00:14:26,763 of the new element. 285 00:14:28,430 --> 00:14:29,263 Right? 286 00:14:29,263 --> 00:14:32,570 And so this essentially is updating your DOM 287 00:14:32,570 --> 00:14:35,560 only in places where it has changed. 288 00:14:35,560 --> 00:14:37,993 Or where it was about to change. 289 00:14:39,600 --> 00:14:41,323 So currentElement.textContent, 290 00:14:43,090 --> 00:14:45,160 and remember that this current element 291 00:14:45,160 --> 00:14:48,700 is the actual element that is currently on the page. 292 00:14:48,700 --> 00:14:52,220 And so that is the one that we want to update. 293 00:14:52,220 --> 00:14:53,850 So to mutate. 294 00:14:53,850 --> 00:14:57,050 And a textContent should be the same 295 00:14:57,050 --> 00:14:59,390 as the newElement.textContent. 296 00:15:02,060 --> 00:15:06,470 However, now we will get a problem as you will see. 297 00:15:06,470 --> 00:15:07,600 So let's click here 298 00:15:08,650 --> 00:15:12,150 and indeed, some replacement was done. 299 00:15:12,150 --> 00:15:15,200 So you see, we now have five servings, 300 00:15:15,200 --> 00:15:16,750 but again, the problem here 301 00:15:16,750 --> 00:15:21,750 is that we now basically replaced the entire container here 302 00:15:21,930 --> 00:15:25,160 because here there was already some change. 303 00:15:25,160 --> 00:15:26,670 And then right away, 304 00:15:26,670 --> 00:15:29,350 the entire text content from this parent element 305 00:15:29,350 --> 00:15:32,100 was taken and replaced. 306 00:15:32,100 --> 00:15:34,910 And so, of course, this doesn't work. 307 00:15:34,910 --> 00:15:37,470 So instead of what we're doing right now, 308 00:15:37,470 --> 00:15:40,520 we now need to find a way of determining 309 00:15:40,520 --> 00:15:43,400 if the element only contains text 310 00:15:43,400 --> 00:15:47,210 because that is the only thing that we want to replace. 311 00:15:47,210 --> 00:15:50,120 So again, what we want to replace 312 00:15:50,120 --> 00:15:52,110 is only this one here 313 00:15:52,110 --> 00:15:56,434 because this here contains only text, okay? 314 00:15:56,434 --> 00:15:59,123 So how can we do that? 315 00:16:00,230 --> 00:16:03,500 Well, there is yet another very nice method 316 00:16:03,500 --> 00:16:05,110 or actually property 317 00:16:05,110 --> 00:16:07,950 that is available on all nodes. 318 00:16:07,950 --> 00:16:10,442 And let me actually show that to you 319 00:16:10,442 --> 00:16:13,190 on the MDN documentation, 320 00:16:13,190 --> 00:16:15,107 and it is called nodeValue. 321 00:16:18,332 --> 00:16:20,222 So this is the one. 322 00:16:20,222 --> 00:16:21,413 And so the value of nodeValue 323 00:16:23,250 --> 00:16:27,220 will be null if the node is an element 324 00:16:27,220 --> 00:16:29,660 or really most of these things 325 00:16:29,660 --> 00:16:31,490 but if it is text, 326 00:16:31,490 --> 00:16:33,430 then we actually get the content 327 00:16:33,430 --> 00:16:35,150 of the text node. 328 00:16:35,150 --> 00:16:38,463 And so we can now use this to our advantage. 329 00:16:40,350 --> 00:16:42,940 So besides checking for this, 330 00:16:42,940 --> 00:16:45,140 we can now also do another check. 331 00:16:45,140 --> 00:16:47,100 So, of course, the elements still need 332 00:16:47,100 --> 00:16:48,810 to be different but now, 333 00:16:48,810 --> 00:16:52,360 we only want elements that are actually text. 334 00:16:52,360 --> 00:16:53,763 So this is how we can do it. 335 00:16:55,280 --> 00:16:56,900 So new element, 336 00:16:56,900 --> 00:17:00,093 and now we need to select the child node. 337 00:17:01,320 --> 00:17:03,640 So let's take the first child, 338 00:17:03,640 --> 00:17:06,170 which remember, will return a node 339 00:17:06,170 --> 00:17:10,170 as we learned also in that advanced DOM section. 340 00:17:10,170 --> 00:17:12,420 And we need to select the child 341 00:17:12,420 --> 00:17:14,430 because the child node 342 00:17:14,430 --> 00:17:17,720 is actually what contains the text, right? 343 00:17:17,720 --> 00:17:20,220 So the element is really just an element. 344 00:17:20,220 --> 00:17:22,010 It is an element node 345 00:17:22,010 --> 00:17:23,920 and not a text node. 346 00:17:23,920 --> 00:17:26,380 And so what is, in fact, the text 347 00:17:26,380 --> 00:17:28,720 is the first child node. 348 00:17:28,720 --> 00:17:33,010 And again, we talked about that in the advanced DOM section, 349 00:17:33,010 --> 00:17:35,400 which I hope you remember. 350 00:17:35,400 --> 00:17:38,020 And so now we can take the nodeValue here 351 00:17:39,430 --> 00:17:41,430 and so if this is text, 352 00:17:41,430 --> 00:17:44,520 this will then be some kind of text here. 353 00:17:44,520 --> 00:17:46,943 And so this text should not be empty. 354 00:17:48,710 --> 00:17:51,223 So different from an empty string. 355 00:17:52,510 --> 00:17:55,253 And actually, let's also trim any white space here. 356 00:17:56,330 --> 00:17:57,490 Okay. 357 00:17:57,490 --> 00:17:59,683 And so with this, it should work. 358 00:18:00,600 --> 00:18:04,220 But I'm sure this is again a little bit confusing, 359 00:18:04,220 --> 00:18:06,730 so let's actually log this value here 360 00:18:06,730 --> 00:18:07,823 to the console. 361 00:18:09,370 --> 00:18:10,203 Okay? 362 00:18:10,203 --> 00:18:13,163 Just so you see what this will actually be. 363 00:18:14,170 --> 00:18:17,920 And let's log this together with some emoji 364 00:18:17,920 --> 00:18:20,870 just so we can see it in the console different 365 00:18:20,870 --> 00:18:22,923 from all the other logs. 366 00:18:23,810 --> 00:18:26,593 So by now, this should actually already been working. 367 00:18:27,620 --> 00:18:29,640 But I want to focus for now 368 00:18:31,790 --> 00:18:34,503 only on the log. 369 00:18:36,290 --> 00:18:40,220 So you see it already did work here. 370 00:18:40,220 --> 00:18:42,480 But let's now go to our logs. 371 00:18:42,480 --> 00:18:43,830 And all the way to the top. 372 00:18:45,630 --> 00:18:47,400 So this here has the explosion, 373 00:18:47,400 --> 00:18:50,060 so it's the log we are interested in. 374 00:18:50,060 --> 00:18:53,640 And so indeed, it just got the text here 375 00:18:53,640 --> 00:18:56,750 out of this element, right? 376 00:18:56,750 --> 00:18:59,620 So this was the current element in the loop 377 00:18:59,620 --> 00:19:00,800 and so then at this point, 378 00:19:00,800 --> 00:19:04,920 the first child.node value is five. 379 00:19:04,920 --> 00:19:06,950 And again, in all other elements, 380 00:19:06,950 --> 00:19:09,998 which do not contain text directly, 381 00:19:09,998 --> 00:19:12,890 this nodeValue will be null. 382 00:19:12,890 --> 00:19:17,200 And so therefore, then this whole expression here 383 00:19:17,200 --> 00:19:18,580 will be false, 384 00:19:18,580 --> 00:19:21,270 and so then this replacement here 385 00:19:21,270 --> 00:19:22,603 does not take place. 386 00:19:23,580 --> 00:19:26,930 Now, here, let's just add some optional chaining 387 00:19:26,930 --> 00:19:31,230 because the first child might not always exist. 388 00:19:31,230 --> 00:19:34,580 So with this, we make 100% sure 389 00:19:34,580 --> 00:19:36,213 that this code is going to work. 390 00:19:37,350 --> 00:19:39,173 So let's check it out again here. 391 00:19:40,100 --> 00:19:42,750 And so if we click on minus now, 392 00:19:42,750 --> 00:19:45,660 you see that only this value is replaced 393 00:19:45,660 --> 00:19:47,530 and also, these values here 394 00:19:47,530 --> 00:19:49,970 but you don't see any of the flickering 395 00:19:49,970 --> 00:19:52,210 or any other weird effects here 396 00:19:52,210 --> 00:19:53,990 because there is nothing else 397 00:19:53,990 --> 00:19:55,800 that is being replaced. 398 00:19:55,800 --> 00:19:57,850 It's only really this text. 399 00:19:57,850 --> 00:20:00,560 Everything else is staying the same. 400 00:20:00,560 --> 00:20:03,560 And so that is exactly what we wanted to achieve 401 00:20:03,560 --> 00:20:05,880 with this algorithm. 402 00:20:05,880 --> 00:20:08,660 Now, as you noticed, as I click here, 403 00:20:08,660 --> 00:20:11,990 the only options I have is to go to three servings 404 00:20:11,990 --> 00:20:14,010 and to five servings. 405 00:20:14,010 --> 00:20:16,230 And the reason for that is that right now, 406 00:20:16,230 --> 00:20:19,080 we are not replacing yet the attributes here 407 00:20:19,080 --> 00:20:20,870 on these buttons. 408 00:20:20,870 --> 00:20:24,390 So they are still at three and five. 409 00:20:24,390 --> 00:20:25,933 Let's check that here. 410 00:20:27,730 --> 00:20:31,160 So indeed, we still get three and five 411 00:20:31,160 --> 00:20:34,540 because all we did yet was to update the text 412 00:20:34,540 --> 00:20:36,340 but not attributes. 413 00:20:36,340 --> 00:20:38,330 So whenever an element changes, 414 00:20:38,330 --> 00:20:40,893 we also want to change the attributes. 415 00:20:42,170 --> 00:20:44,493 So let's quickly do that here as well. 416 00:20:45,370 --> 00:20:48,370 And this, we can actually nod to here 417 00:20:48,370 --> 00:20:50,390 in this if block 418 00:20:50,390 --> 00:20:52,840 because the condition that we created here 419 00:20:52,840 --> 00:20:54,470 makes it so that this code 420 00:20:54,470 --> 00:20:56,810 is only executed on elements 421 00:20:56,810 --> 00:20:59,003 that contain text directly. 422 00:20:59,838 --> 00:21:02,304 So that was the whole point 423 00:21:02,304 --> 00:21:04,560 of this line of code 424 00:21:04,560 --> 00:21:09,500 that I explained like over the last five minutes or so. 425 00:21:09,500 --> 00:21:11,570 And so instead, we only want 426 00:21:11,570 --> 00:21:13,575 to change the attributes 427 00:21:13,575 --> 00:21:15,810 when the new element is different 428 00:21:15,810 --> 00:21:18,683 from the old one or the current one. 429 00:21:20,490 --> 00:21:21,323 Okay? 430 00:21:22,220 --> 00:21:24,453 So let's just comment this here. 431 00:21:25,850 --> 00:21:30,053 Updates changed TEXT. 432 00:21:31,288 --> 00:21:32,838 And then here we want to update 433 00:21:34,330 --> 00:21:37,863 changed ATTRIBUTES. 434 00:21:41,050 --> 00:21:43,910 Now, here there is something cool that we can use, 435 00:21:43,910 --> 00:21:45,610 so yet another new thing, 436 00:21:45,610 --> 00:21:48,803 which is the attributes property on an element. 437 00:21:49,840 --> 00:21:51,310 So let's start by logging that 438 00:21:51,310 --> 00:21:52,693 to the console this time. 439 00:21:53,590 --> 00:21:57,593 So let's say newElement.attributes. 440 00:21:58,780 --> 00:22:02,040 And let's get rid of this console.log here now 441 00:22:02,040 --> 00:22:02,880 and so for now, 442 00:22:02,880 --> 00:22:06,170 what this will do is to log this attributes property 443 00:22:06,170 --> 00:22:08,523 of all the elements that have changed. 444 00:22:11,270 --> 00:22:12,323 So let's see. 445 00:22:13,380 --> 00:22:15,730 Well, we still get a lot of different logs here 446 00:22:16,570 --> 00:22:18,650 but that doesn't matter. 447 00:22:18,650 --> 00:22:21,070 So here we have, for example, 448 00:22:21,070 --> 00:22:22,880 this ingredient here 449 00:22:22,880 --> 00:22:24,550 and so this has changed 450 00:22:24,550 --> 00:22:26,400 and so here we then get a list 451 00:22:26,400 --> 00:22:28,510 of all the attributes. 452 00:22:28,510 --> 00:22:30,560 So we have the class, we have the length. 453 00:22:32,350 --> 00:22:33,580 So let's see here 454 00:22:35,210 --> 00:22:36,843 what that actually is. 455 00:22:38,080 --> 00:22:39,810 But this one doesn't really matter. 456 00:22:39,810 --> 00:22:41,220 The one I'm interested in 457 00:22:41,220 --> 00:22:43,233 is actually the one on the buttons. 458 00:22:44,410 --> 00:22:46,210 So let's go up a little bit further. 459 00:22:50,550 --> 00:22:51,550 And this is the one. 460 00:22:52,780 --> 00:22:53,700 Right? 461 00:22:53,700 --> 00:22:56,370 So here we have the actual attributes, 462 00:22:56,370 --> 00:22:58,290 so data-update-to, 463 00:22:58,290 --> 00:23:00,650 and probably they should have the values 464 00:23:00,650 --> 00:23:02,073 also somewhere in there. 465 00:23:03,960 --> 00:23:06,670 So this is a lot of stuff we don't need 466 00:23:06,670 --> 00:23:08,300 to take a look at this. 467 00:23:08,300 --> 00:23:10,520 So this is very confusing 468 00:23:10,520 --> 00:23:12,060 but I just wanted to show 469 00:23:12,060 --> 00:23:15,090 that basically, this here will return something 470 00:23:15,090 --> 00:23:19,680 like an object of all the attributes that have changed. 471 00:23:19,680 --> 00:23:22,600 So let's now convert this object here 472 00:23:22,600 --> 00:23:26,430 to an array, and then we can loop over this array 473 00:23:26,430 --> 00:23:28,650 and basically copy all the attributes 474 00:23:28,650 --> 00:23:31,690 from one element to the other element. 475 00:23:31,690 --> 00:23:36,150 So from the new element basically to the current one. 476 00:23:36,150 --> 00:23:38,000 So basically, doing something similar 477 00:23:39,030 --> 00:23:40,483 as we did here with the text. 478 00:23:43,950 --> 00:23:48,950 So we want to loop over newElement.attributes, 479 00:23:50,410 --> 00:23:55,163 and again, we need to convert that to an array like this. 480 00:23:56,559 --> 00:23:57,859 And then for each of them, 481 00:23:58,930 --> 00:24:00,523 so each is an attribute. 482 00:24:02,190 --> 00:24:04,010 And then on the current element, 483 00:24:04,010 --> 00:24:06,003 we want to set the attribute. 484 00:24:06,880 --> 00:24:09,413 So remember this method from way back. 485 00:24:10,920 --> 00:24:13,360 setAttribute, which again, we learned about 486 00:24:13,360 --> 00:24:15,123 in the advanced DOM section. 487 00:24:16,460 --> 00:24:17,990 And so here we want to take the name 488 00:24:17,990 --> 00:24:18,910 of the attribute 489 00:24:21,400 --> 00:24:22,283 and the value. 490 00:24:23,460 --> 00:24:24,510 Okay? 491 00:24:24,510 --> 00:24:26,903 And maybe just to make this a bit more clear, 492 00:24:28,020 --> 00:24:29,530 so right now, 493 00:24:29,530 --> 00:24:31,510 this kind of comes out of nowhere, 494 00:24:31,510 --> 00:24:33,510 so let's also log this to the console 495 00:24:36,830 --> 00:24:39,503 so we can see what we're actually looping over here. 496 00:24:44,550 --> 00:24:46,003 So let's go back. 497 00:24:52,690 --> 00:24:55,493 Ah, and so here is that array. 498 00:24:57,270 --> 00:25:00,793 And so here we have the class and data-update-to. 499 00:25:03,233 --> 00:25:05,603 And so now let me actually show you the name. 500 00:25:06,530 --> 00:25:08,070 So that is the name. 501 00:25:08,070 --> 00:25:10,610 And let's do it for data-update-to, 502 00:25:10,610 --> 00:25:12,960 which is the one we are actually interested in. 503 00:25:13,805 --> 00:25:15,250 So we will take that name 504 00:25:15,250 --> 00:25:17,233 and set it to the value, 505 00:25:18,080 --> 00:25:19,890 which is four. 506 00:25:19,890 --> 00:25:22,900 So we will get that value 507 00:25:22,900 --> 00:25:25,993 and set it into the current element. 508 00:25:27,320 --> 00:25:28,153 Okay? 509 00:25:29,150 --> 00:25:33,373 So we don't need these curly braces anymore. 510 00:25:34,240 --> 00:25:37,660 And so again, basically, what we are doing here 511 00:25:37,660 --> 00:25:40,500 is to simply replace all the attributes 512 00:25:40,500 --> 00:25:41,970 in the current element 513 00:25:41,970 --> 00:25:45,003 by the attributes coming from the new element. 514 00:25:46,620 --> 00:25:50,603 And so this will then replace the five 515 00:25:50,603 --> 00:25:53,550 that is currently here with six. 516 00:25:53,550 --> 00:25:58,550 And so now we are able to go as far as we want here. 517 00:26:01,840 --> 00:26:02,673 All right? 518 00:26:03,700 --> 00:26:06,540 And so we successfully implemented a method 519 00:26:06,540 --> 00:26:10,690 for updating the DOM only in places where the text 520 00:26:10,690 --> 00:26:13,670 or the attributes actually changed. 521 00:26:13,670 --> 00:26:15,240 Now, this algorithm here 522 00:26:15,240 --> 00:26:18,050 is probably not the most robust one 523 00:26:18,050 --> 00:26:21,070 and so maybe it might not be the best algorithm 524 00:26:21,070 --> 00:26:23,630 to really use in the real world 525 00:26:23,630 --> 00:26:25,450 unless you have like a kind 526 00:26:25,450 --> 00:26:27,820 of small application, like this one. 527 00:26:27,820 --> 00:26:30,310 But for a really huge application, 528 00:26:30,310 --> 00:26:33,560 probably this algorithm is not performant enough 529 00:26:33,560 --> 00:26:35,580 and might not be good enough. 530 00:26:35,580 --> 00:26:37,100 But here in this project, 531 00:26:37,100 --> 00:26:40,173 I think that this was an excellent exercise 532 00:26:40,173 --> 00:26:42,240 to get even more familiar 533 00:26:42,240 --> 00:26:44,990 with some of the lower-level details 534 00:26:44,990 --> 00:26:49,010 of the DOM, and also to think logically a little bit 535 00:26:49,010 --> 00:26:51,800 about what we wanted to achieve here. 536 00:26:51,800 --> 00:26:54,780 And so again, I hope that you liked this kind 537 00:26:54,780 --> 00:26:56,600 of small exercise, 538 00:26:56,600 --> 00:26:58,030 which was a little bit different 539 00:26:58,030 --> 00:27:00,480 from the rest of the project. 540 00:27:00,480 --> 00:27:02,050 And this was actually one 541 00:27:02,050 --> 00:27:03,840 of the more difficult parts 542 00:27:03,840 --> 00:27:05,700 for me to also figure out 543 00:27:05,700 --> 00:27:08,000 when I was building this project, 544 00:27:08,000 --> 00:27:11,280 and so I hope that you can go over this code 545 00:27:11,280 --> 00:27:13,170 one more time by yourself 546 00:27:13,170 --> 00:27:14,950 and really figure out exactly 547 00:27:14,950 --> 00:27:16,363 what is happening here. 548 00:27:17,330 --> 00:27:21,890 So let's check out our flow chart here on page two 549 00:27:21,890 --> 00:27:24,020 or actually, part two. 550 00:27:24,020 --> 00:27:29,020 And so we successfully just did this part here. 551 00:27:29,090 --> 00:27:32,100 Now, I also want to use this algorithm 552 00:27:32,100 --> 00:27:37,020 that we just developed to quickly tackle this part here 553 00:27:37,020 --> 00:27:38,410 of the application, 554 00:27:38,410 --> 00:27:40,700 which is to mark the selected result 555 00:27:40,700 --> 00:27:42,083 in the search results. 556 00:27:42,970 --> 00:27:45,340 So let me show that to you in practice. 557 00:27:45,340 --> 00:27:46,630 So here in the demo, 558 00:27:46,630 --> 00:27:49,770 whenever I select one of the recipes, 559 00:27:49,770 --> 00:27:53,070 it will then get this selected class here. 560 00:27:53,070 --> 00:27:54,220 Right? 561 00:27:54,220 --> 00:27:56,660 And so then when I move out the mouse, 562 00:27:56,660 --> 00:27:58,330 it will stay selected. 563 00:27:58,330 --> 00:28:00,140 And so that's a nice touch 564 00:28:00,140 --> 00:28:05,067 that we are currently still missing here, right? 565 00:28:06,220 --> 00:28:08,760 So of course, it doesn't stay selected, 566 00:28:08,760 --> 00:28:12,790 and so we can now use this update algorithm 567 00:28:12,790 --> 00:28:16,960 in order to update this entire search results view 568 00:28:16,960 --> 00:28:19,973 whenever we click on one of these results. 569 00:28:21,064 --> 00:28:24,173 And so let's go implement that. 570 00:28:25,180 --> 00:28:28,253 And we actually need to start with the view here. 571 00:28:29,190 --> 00:28:33,013 So searchView or actually, resultsView 572 00:28:34,510 --> 00:28:36,680 because this is where we need the logic 573 00:28:36,680 --> 00:28:40,463 of marking the current recipe as selected here. 574 00:28:41,570 --> 00:28:46,570 So the link that is selected will get a special class here. 575 00:28:46,740 --> 00:28:50,160 Let me show that to you here in the results. 576 00:28:50,160 --> 00:28:51,820 And so that is this one here. 577 00:28:51,820 --> 00:28:54,223 So preview__link--active. 578 00:28:56,120 --> 00:28:59,100 And so here we want to give that class 579 00:28:59,950 --> 00:29:02,240 to this anchor element here 580 00:29:02,240 --> 00:29:04,880 if this result.id 581 00:29:04,880 --> 00:29:08,723 is basically the same as the current ID in the URL. 582 00:29:10,170 --> 00:29:11,410 Okay? 583 00:29:11,410 --> 00:29:14,463 So let's start by determining that ID. 584 00:29:18,450 --> 00:29:23,340 And so remember that is at window.location.hash. 585 00:29:25,750 --> 00:29:27,830 And then we want to take everything 586 00:29:27,830 --> 00:29:30,600 except the first element. 587 00:29:30,600 --> 00:29:33,623 So basically, starting to read from the first element. 588 00:29:34,791 --> 00:29:35,624 Okay? 589 00:29:35,624 --> 00:29:38,333 And now here we want to conditionally add that class. 590 00:29:40,430 --> 00:29:43,583 So we can write a simple template literal here. 591 00:29:45,380 --> 00:29:47,810 And I'm right away putting the class here. 592 00:29:47,810 --> 00:29:51,050 And so here we want to say if the result.id 593 00:29:52,920 --> 00:29:55,523 is the same as the current id, 594 00:29:56,720 --> 00:29:58,480 then the result of this expression 595 00:29:58,480 --> 00:30:00,920 should become this class name. 596 00:30:00,920 --> 00:30:04,713 And otherwise, then simply an empty string. 597 00:30:05,660 --> 00:30:07,020 All right? 598 00:30:07,020 --> 00:30:11,160 And so now here in the controller, 599 00:30:11,160 --> 00:30:14,790 so the controller for the results, 600 00:30:14,790 --> 00:30:17,703 so SearchResults or actually, 601 00:30:18,660 --> 00:30:22,520 in this one here, so the one controlling the recipes, 602 00:30:22,520 --> 00:30:25,647 so here we now want to update the resultsView. 603 00:30:27,421 --> 00:30:31,496 And let's do that right at the beginning right here. 604 00:30:31,496 --> 00:30:32,746 Let's say zero. 605 00:30:36,036 --> 00:30:39,703 Results view to mark selected search result. 606 00:30:44,764 --> 00:30:47,157 And so that's gonna be resultsView.update, 607 00:30:50,020 --> 00:30:53,340 and then here, we want to pass in the current page. 608 00:30:53,340 --> 00:30:56,443 And so remember that is model.getSeachResultsPage. 609 00:31:01,200 --> 00:31:02,420 Okay? 610 00:31:02,420 --> 00:31:05,700 So basically, we are doing here exactly the same 611 00:31:05,700 --> 00:31:06,653 as this here. 612 00:31:08,180 --> 00:31:12,240 But instead of using render, we use update. 613 00:31:12,240 --> 00:31:13,290 Okay? 614 00:31:13,290 --> 00:31:15,810 Now, it would also work with render, 615 00:31:15,810 --> 00:31:18,283 and let's first see that. 616 00:31:23,800 --> 00:31:24,633 So let's 617 00:31:27,180 --> 00:31:29,330 search for something here. 618 00:31:29,330 --> 00:31:30,530 So pizza. 619 00:31:30,530 --> 00:31:32,910 And now I will click on this one here 620 00:31:33,770 --> 00:31:37,070 and you see that it stays selected. 621 00:31:37,070 --> 00:31:41,060 And that happened because as the hash here changed, 622 00:31:41,060 --> 00:31:45,010 remember, then this recipe got loaded 623 00:31:45,010 --> 00:31:47,220 and also as we just did, 624 00:31:47,220 --> 00:31:51,410 this entire search results view got rendered again. 625 00:31:51,410 --> 00:31:54,360 And then this time, the ID of this result 626 00:31:54,360 --> 00:31:56,160 is the same as this one, 627 00:31:56,160 --> 00:31:59,293 and so therefore, it got that active class. 628 00:32:00,530 --> 00:32:01,363 Right? 629 00:32:01,363 --> 00:32:03,920 But watch what happens to all these images 630 00:32:03,920 --> 00:32:06,833 when I click, for example, this recipe here. 631 00:32:08,170 --> 00:32:10,320 So you see, like before, 632 00:32:10,320 --> 00:32:11,880 there is this flickering 633 00:32:11,880 --> 00:32:14,520 because everything is re-rendered. 634 00:32:14,520 --> 00:32:17,770 And so these images are basically loading again. 635 00:32:17,770 --> 00:32:19,030 And that is the whole reason 636 00:32:19,030 --> 00:32:22,670 why we have now the update method. 637 00:32:22,670 --> 00:32:25,533 And so with this, we will now fix that problem. 638 00:32:26,840 --> 00:32:29,950 So pizza again, and you see that already 639 00:32:29,950 --> 00:32:33,603 it did select the recipe that is currently active. 640 00:32:35,840 --> 00:32:36,673 Okay? 641 00:32:36,673 --> 00:32:39,930 And now you see that there is no flickering 642 00:32:39,930 --> 00:32:41,660 because now only the element 643 00:32:41,660 --> 00:32:44,403 that actually changed was updated. 644 00:32:45,310 --> 00:32:47,680 Great, now I just noticed 645 00:32:47,680 --> 00:32:49,400 that when we reload the page, 646 00:32:49,400 --> 00:32:53,030 then we get no recipes found right here. 647 00:32:53,030 --> 00:32:55,620 And the reason for that is that our application 648 00:32:55,620 --> 00:33:00,413 is immediately trying to update this view here. 649 00:33:00,413 --> 00:33:03,920 So when the page loads and there is an ID, 650 00:33:03,920 --> 00:33:08,550 then it will, of course, immediately load that recipe. 651 00:33:08,550 --> 00:33:09,400 Right? 652 00:33:09,400 --> 00:33:12,290 Even if there was no search before. 653 00:33:12,290 --> 00:33:13,740 And so then here, 654 00:33:13,740 --> 00:33:16,460 as we are trying to update, of course, 655 00:33:16,460 --> 00:33:18,360 there are no search results. 656 00:33:18,360 --> 00:33:22,350 And so this here will then return an empty array. 657 00:33:22,350 --> 00:33:24,703 And so let's go to our update method here. 658 00:33:25,750 --> 00:33:28,563 And here we can then remove this check. 659 00:33:29,550 --> 00:33:32,580 So again, right now, we are calling update 660 00:33:32,580 --> 00:33:34,420 with an empty array. 661 00:33:34,420 --> 00:33:36,157 So data is this empty array 662 00:33:36,157 --> 00:33:39,190 and so therefore, this part will then be true 663 00:33:39,190 --> 00:33:41,570 and then this error gets rendered. 664 00:33:41,570 --> 00:33:46,170 And this doesn't make sense so let's remove that, 665 00:33:46,170 --> 00:33:49,053 and so now that error is gone. 666 00:33:50,513 --> 00:33:54,710 And now immediately this one here gets selected 667 00:33:55,560 --> 00:33:58,313 and so everything keeps working the same. 668 00:33:59,330 --> 00:34:02,810 All right, so we just did a big step 669 00:34:02,810 --> 00:34:05,970 towards improving our application even more 670 00:34:05,970 --> 00:34:08,880 and making it even more user friendly. 671 00:34:08,880 --> 00:34:10,570 And it was a lot of work 672 00:34:10,570 --> 00:34:14,170 but I really hope that it was worth it for you. 673 00:34:14,170 --> 00:34:15,470 And with that being said, 674 00:34:15,470 --> 00:34:17,730 let's now move on to the next feature, 675 00:34:17,730 --> 00:34:20,423 which will be to implement bookmarks.