WEBVTT 1 00:00:01.220 --> 00:00:02.710 So, as I mentioned, 2 00:00:02.710 --> 00:00:05.150 by the end of the last lecture. 3 00:00:05.150 --> 00:00:09.010 In this one, we will now make the bookmarks data persist 4 00:00:09.010 --> 00:00:10.830 across page loads. 5 00:00:10.830 --> 00:00:13.970 And for that, we're gonna use local storage. 6 00:00:13.970 --> 00:00:17.360 And once again, this will now become quite easy, 7 00:00:17.360 --> 00:00:19.370 and quite straightforward, 8 00:00:19.370 --> 00:00:22.730 because we already have our entire project structure 9 00:00:22.730 --> 00:00:24.183 so nicely set up. 10 00:00:25.840 --> 00:00:29.540 So storing data in local storage 11 00:00:29.540 --> 00:00:32.230 is of course all about data. 12 00:00:32.230 --> 00:00:36.083 And so that will have to be implemented here in the model. 13 00:00:37.090 --> 00:00:40.863 So let's actually take a look here at our flow chart again. 14 00:00:42.080 --> 00:00:46.110 And so now this is all about loading bookmarks 15 00:00:46.110 --> 00:00:50.720 from local storage and storing bookmarks to local storage. 16 00:00:50.720 --> 00:00:55.213 So when should the bookmarks be stored to local storage? 17 00:00:56.230 --> 00:00:58.750 Well, that happens whenever the user 18 00:00:58.750 --> 00:01:00.970 bookmarks a recipe. 19 00:01:00.970 --> 00:01:03.240 And of course that also when the user 20 00:01:03.240 --> 00:01:05.770 unbookmarks the recipe. 21 00:01:05.770 --> 00:01:07.990 So in either of these cases, 22 00:01:07.990 --> 00:01:09.690 the current bookmarks array 23 00:01:09.690 --> 00:01:12.623 basically needs to be stored to local storage. 24 00:01:14.050 --> 00:01:17.350 Okay, so what I just said, 25 00:01:17.350 --> 00:01:21.260 is that whenever we add a bookmark or delete a bookmark, 26 00:01:21.260 --> 00:01:23.740 we need to persist that data. 27 00:01:23.740 --> 00:01:26.420 And so let's add a function here, 28 00:01:26.420 --> 00:01:30.070 which we can then call in these two functions. 29 00:01:30.070 --> 00:01:32.080 So this one we don't need to export 30 00:01:34.270 --> 00:01:38.073 because we simply will call it in these other two functions. 31 00:01:39.400 --> 00:01:41.063 So persist, bookmarks. 32 00:01:45.510 --> 00:01:47.030 And then here, remember, 33 00:01:47.030 --> 00:01:50.163 all we have to do is local storage.setItem. 34 00:01:51.900 --> 00:01:54.633 Then here we can give that item a name. 35 00:01:56.850 --> 00:01:58.950 So that's bookmarks. 36 00:01:58.950 --> 00:02:01.430 And then here, we need to set a string. 37 00:02:01.430 --> 00:02:04.673 And we do that by calling Json.stringify 38 00:02:05.930 --> 00:02:07.200 and then with the object 39 00:02:07.200 --> 00:02:10.940 that we basically want to convert to a string. 40 00:02:10.940 --> 00:02:14.383 And so that is state.bookmarks, 41 00:02:15.230 --> 00:02:17.090 and that's actually it. 42 00:02:17.090 --> 00:02:19.700 Now, all we have to do is to call this function 43 00:02:19.700 --> 00:02:20.913 in these two places. 44 00:02:24.480 --> 00:02:26.880 And that's already the first step 45 00:02:26.880 --> 00:02:30.133 and we can actually try that out already. 46 00:02:31.330 --> 00:02:33.283 So at least seeing it in the console. 47 00:02:35.920 --> 00:02:40.920 So let's bookmark this one and also this Greek pasta salad. 48 00:02:44.240 --> 00:02:47.620 Right, so both of them are now here 49 00:02:47.620 --> 00:02:52.093 and let's come here to application and then local storage. 50 00:02:53.740 --> 00:02:57.450 And so here it is already. 51 00:02:57.450 --> 00:03:01.210 So here are the bookmarks with these two recipes 52 00:03:01.210 --> 00:03:02.990 that we just stored. 53 00:03:02.990 --> 00:03:05.170 And now, as I reload the page, 54 00:03:05.170 --> 00:03:07.163 you see that the data is still here. 55 00:03:08.130 --> 00:03:11.550 Now, of course it is not yet back here. 56 00:03:11.550 --> 00:03:14.520 So just because the data is still in local storage, 57 00:03:14.520 --> 00:03:18.560 doesn't mean that it's magically gonna show up here 58 00:03:18.560 --> 00:03:21.940 because we didn't write any code for that yet, 59 00:03:21.940 --> 00:03:25.140 but let's now actually go do that. 60 00:03:25.140 --> 00:03:27.760 So basically when the page is loaded, 61 00:03:27.760 --> 00:03:30.030 we then want to run a method 62 00:03:30.030 --> 00:03:33.163 which will basically render the bookmarks here. 63 00:03:34.070 --> 00:03:35.610 All right. 64 00:03:35.610 --> 00:03:37.860 So the first step in doing that, 65 00:03:37.860 --> 00:03:41.600 is to actually get the bookmarks out of the local storage 66 00:03:41.600 --> 00:03:43.670 and back into our code. 67 00:03:43.670 --> 00:03:47.680 And then after that, we can then as I just said, 68 00:03:47.680 --> 00:03:51.903 render them back here to this bookmarks view, okay? 69 00:03:55.160 --> 00:03:57.890 So we have to code for persisting. 70 00:03:57.890 --> 00:04:01.810 So for storing the bookmarks in local storage here, 71 00:04:01.810 --> 00:04:05.430 so let's now also have to code for taking them out 72 00:04:05.430 --> 00:04:06.453 also right here. 73 00:04:07.940 --> 00:04:12.460 And let me simply write an initialization function here. 74 00:04:12.460 --> 00:04:13.823 So an init function, 75 00:04:14.730 --> 00:04:16.550 and then right at the beginning, 76 00:04:16.550 --> 00:04:20.083 I will call that init function. 77 00:04:21.175 --> 00:04:25.540 And here, of course, missing the function keyword. 78 00:04:25.540 --> 00:04:28.833 And so here we need to do the opposite. 79 00:04:29.780 --> 00:04:33.193 So LocalStorage.getItem, 80 00:04:35.660 --> 00:04:39.223 and then remember it is called bookmarks. 81 00:04:40.130 --> 00:04:43.700 And then we also need to store that somewhere 82 00:04:43.700 --> 00:04:46.970 and I'm not storing it directly into our state, 83 00:04:46.970 --> 00:04:51.520 because this data might not be defined actually. 84 00:04:51.520 --> 00:04:54.760 So we might have nothing of course, in the storage. 85 00:04:54.760 --> 00:04:58.010 And so only if there is storage, 86 00:04:58.010 --> 00:05:03.010 then we want state.bookmarks to be 87 00:05:05.680 --> 00:05:08.500 Json.parse, 88 00:05:08.500 --> 00:05:12.403 which is basically to convert the string back to an object. 89 00:05:14.610 --> 00:05:17.520 And so here we are now calling this function 90 00:05:17.520 --> 00:05:20.330 right in the beginning and then 91 00:05:20.330 --> 00:05:25.093 just to see let's then immediately log state.bookmarks 92 00:05:26.490 --> 00:05:27.903 to the console. 93 00:05:31.230 --> 00:05:35.150 Okay, so here we have a lot of logs. 94 00:05:35.150 --> 00:05:38.470 So let's go here to line 11 of these two 95 00:05:38.470 --> 00:05:41.233 and line 114 of the model. 96 00:05:42.590 --> 00:05:46.880 So model, now this one actually, 97 00:05:46.880 --> 00:05:48.630 is the one that I just did, 98 00:05:48.630 --> 00:05:52.400 but here we apparently have some console dot logs 99 00:05:52.400 --> 00:05:53.453 that we don't need. 100 00:05:54.380 --> 00:05:57.743 So here and here, 101 00:05:59.520 --> 00:06:01.430 and in fact, let's close these here 102 00:06:04.140 --> 00:06:05.823 and actually all of them for now. 103 00:06:07.650 --> 00:06:08.920 And so here, right? 104 00:06:08.920 --> 00:06:11.993 Immediately we have the local storage. 105 00:06:13.040 --> 00:06:16.933 Now, for some reason, this recipe was not find let's reload. 106 00:06:18.080 --> 00:06:19.303 Well, that's weird. 107 00:06:21.700 --> 00:06:25.500 And apparently we broke something in our code, 108 00:06:25.500 --> 00:06:28.910 but let's worry about that in a second. 109 00:06:28.910 --> 00:06:30.390 So for now, what matters here, 110 00:06:30.390 --> 00:06:35.060 is that we actually got the data back from local storage. 111 00:06:35.060 --> 00:06:39.480 So let's see if this has anything to do with the code 112 00:06:39.480 --> 00:06:40.913 that we just wrote here. 113 00:06:46.530 --> 00:06:49.200 Well, that's very weird. 114 00:06:49.200 --> 00:06:53.320 So now it is back to working for some reason. 115 00:06:53.320 --> 00:06:55.740 So let's actually log the error 116 00:06:55.740 --> 00:06:57.913 that is actually happening to the console. 117 00:06:59.260 --> 00:07:02.920 So here let's set that back to cause that error, 118 00:07:02.920 --> 00:07:05.120 but then here in the controller, 119 00:07:05.120 --> 00:07:10.120 so the one that is responsible for loading the recipe. 120 00:07:11.090 --> 00:07:11.980 So here, right now, 121 00:07:11.980 --> 00:07:15.620 we are only rendering the error to the user interface, 122 00:07:15.620 --> 00:07:19.400 and we are doing that with this nicely formatted error 123 00:07:19.400 --> 00:07:22.330 that we defined in the recipe view. 124 00:07:22.330 --> 00:07:26.330 But so let's not actually also log the error itself 125 00:07:26.330 --> 00:07:28.520 in the console so that we can see 126 00:07:28.520 --> 00:07:29.893 what is actually happening. 127 00:07:31.300 --> 00:07:34.493 So console error with error. 128 00:07:36.330 --> 00:07:40.410 And so now we get text content of undefined 129 00:07:42.310 --> 00:07:45.023 coming from controller at line 34. 130 00:07:47.030 --> 00:07:49.800 Okay, that's just the log. 131 00:07:49.800 --> 00:07:52.820 And so here we have a stack trace. 132 00:07:52.820 --> 00:07:56.713 And so the error itself is originating in line 25. 133 00:07:58.610 --> 00:08:02.023 So it is here when we update the bookmarks view. 134 00:08:03.640 --> 00:08:08.150 Okay, so this is where the error basically comes from. 135 00:08:08.150 --> 00:08:12.270 And so this is how we use this so-called stack trace. 136 00:08:12.270 --> 00:08:15.240 So here we can then follow exactly what happens. 137 00:08:15.240 --> 00:08:18.600 So here we then need to go to view 27, 138 00:08:18.600 --> 00:08:22.000 which is where this update is defined 10 for each 139 00:08:22.000 --> 00:08:23.493 and then line 37. 140 00:08:24.520 --> 00:08:26.713 So line 37 in the view, 141 00:08:28.890 --> 00:08:31.203 and so that is right here. 142 00:08:32.220 --> 00:08:33.530 So some kind of problem 143 00:08:33.530 --> 00:08:37.920 with updating the bookmarks view. 144 00:08:37.920 --> 00:08:41.810 So apparently we're trying to set the text content 145 00:08:41.810 --> 00:08:45.560 on some element here that doesn't yet exist. 146 00:08:45.560 --> 00:08:49.150 So maybe we are simply calling this method here 147 00:08:49.150 --> 00:08:50.380 a little bit too soon. 148 00:08:50.380 --> 00:08:52.223 So that's moved out here to the end. 149 00:08:56.970 --> 00:09:01.970 So updating a bookmark's view. 150 00:09:04.730 --> 00:09:06.940 So we still have an error. 151 00:09:06.940 --> 00:09:10.233 So this might be a good time to use the debugger. 152 00:09:14.160 --> 00:09:18.250 And I hope that with this, we will be able to find the bug. 153 00:09:18.250 --> 00:09:22.500 And if you're not interested in watching me find this bug 154 00:09:22.500 --> 00:09:25.660 and please feel free to jump to some later point 155 00:09:25.660 --> 00:09:26.493 in the code. 156 00:09:27.690 --> 00:09:29.653 So you see that at this point, 157 00:09:30.510 --> 00:09:32.363 the recipe has actually loaded. 158 00:09:34.880 --> 00:09:38.320 Okay, and so now here we are at the debugger. 159 00:09:38.320 --> 00:09:42.220 And so let's now go to the next step, 160 00:09:42.220 --> 00:09:43.990 which is this one here. 161 00:09:43.990 --> 00:09:47.153 Then we go into bookmarks view.update. 162 00:09:48.420 --> 00:09:50.720 And at this point, the data here, 163 00:09:50.720 --> 00:09:53.600 is actually already the data that is coming 164 00:09:53.600 --> 00:09:57.063 from our local storage, right? 165 00:09:58.320 --> 00:10:02.743 So this bookmarks here is at this point already loaded. 166 00:10:03.670 --> 00:10:08.380 So right here we do that right at the beginning. 167 00:10:08.380 --> 00:10:11.300 And so therefore the bookmarks, 168 00:10:11.300 --> 00:10:15.340 so model.state.bookmarks here is already defined. 169 00:10:15.340 --> 00:10:18.513 So that's these two objects right there. 170 00:10:19.500 --> 00:10:24.163 Let's actually see the scope here. 171 00:10:25.190 --> 00:10:29.093 And so indeed that's these two recipe objects, right? 172 00:10:30.440 --> 00:10:32.933 So here we also have the entire call stack. 173 00:10:36.320 --> 00:10:39.970 Okay, now let's keep going. 174 00:10:39.970 --> 00:10:41.740 So the new markup, 175 00:10:41.740 --> 00:10:44.573 then here we go through all of this. 176 00:10:53.160 --> 00:10:55.683 Okay, once again, 177 00:11:02.383 --> 00:11:04.810 all right, so here we are back. 178 00:11:04.810 --> 00:11:06.373 Whoa, what's that? 179 00:11:07.420 --> 00:11:10.550 Ah, so I just hovered over the string, 180 00:11:10.550 --> 00:11:11.763 which has all of this. 181 00:11:12.810 --> 00:11:15.980 So that's this markup that we just generated 182 00:11:15.980 --> 00:11:19.213 then here let's generate this dam, okay? 183 00:11:23.490 --> 00:11:26.513 And here are the new elements and the current elements. 184 00:11:27.710 --> 00:11:30.523 So right now here, inside the current elements, 185 00:11:31.380 --> 00:11:33.373 let's see what that is. 186 00:11:35.050 --> 00:11:36.920 So that's all of the elements 187 00:11:36.920 --> 00:11:39.890 that are basically right now 188 00:11:39.890 --> 00:11:44.763 in that empty bookmarks panel, right? 189 00:11:48.690 --> 00:11:52.390 Now, and do you see that the length of this one here is five 190 00:11:52.390 --> 00:11:54.600 and this one here is 14. 191 00:11:54.600 --> 00:11:58.950 And so I think I'm starting to see the problem here. 192 00:11:58.950 --> 00:12:01.430 So these two arrays are the arrays 193 00:12:01.430 --> 00:12:05.920 that we are basically comparing here, right? 194 00:12:05.920 --> 00:12:07.840 So we have this hole for each loop 195 00:12:07.840 --> 00:12:12.170 to compare the elements in these two arrays, right? 196 00:12:12.170 --> 00:12:16.700 Because the goal of this method is to not add new elements, 197 00:12:16.700 --> 00:12:19.610 but only to replace some text and elements 198 00:12:19.610 --> 00:12:21.560 that already exist. 199 00:12:21.560 --> 00:12:25.920 However, right now this bookmarks here is still empty. 200 00:12:25.920 --> 00:12:28.770 And what does update here is trying to do, 201 00:12:28.770 --> 00:12:31.650 is to now insert the data in there. 202 00:12:31.650 --> 00:12:35.570 And so that should not happen, okay? 203 00:12:35.570 --> 00:12:37.793 And so I'll actually quit this now, 204 00:12:38.680 --> 00:12:40.683 by going back here, 205 00:12:41.760 --> 00:12:44.623 getting rid of this and simply reloading. 206 00:12:49.800 --> 00:12:51.403 So let's get this down. 207 00:12:52.330 --> 00:12:54.560 And so in order to prevent this, 208 00:12:54.560 --> 00:12:57.160 the first thing that we need to do now on the page 209 00:12:57.160 --> 00:12:59.950 is basically render the bookmarks 210 00:12:59.950 --> 00:13:01.750 and remember that's what happened 211 00:13:01.750 --> 00:13:05.100 right at the beginning when we load the page. 212 00:13:05.100 --> 00:13:07.800 So let's go to the bookmarks view 213 00:13:08.640 --> 00:13:10.813 and here create a new handler. 214 00:13:12.150 --> 00:13:15.433 So add handler render, 215 00:13:16.440 --> 00:13:19.590 which receives an handler, 216 00:13:19.590 --> 00:13:22.723 and then window.addeventlistener and load. 217 00:13:27.130 --> 00:13:30.143 And then we will immediately call this handler. 218 00:13:32.011 --> 00:13:35.030 Okay, and so here, 219 00:13:35.030 --> 00:13:37.250 we already imported it. 220 00:13:37.250 --> 00:13:38.880 And so here at the very end, 221 00:13:38.880 --> 00:13:42.790 let's create then the handler function. 222 00:13:42.790 --> 00:13:47.553 So the controller control and bookmarks, 223 00:13:53.247 --> 00:13:55.230 and then all that we will do 224 00:13:55.230 --> 00:13:59.830 is actually take bookmarksview.render 225 00:13:59.830 --> 00:14:04.830 with state.bookmarks. 226 00:14:04.950 --> 00:14:09.450 And again, that is actually model.state. 227 00:14:09.450 --> 00:14:13.290 And now let's ask the first of all thing here, 228 00:14:13.290 --> 00:14:17.230 do bookmarks view.addhandlerrender 229 00:14:20.210 --> 00:14:22.563 with the control bookmarks? 230 00:14:24.280 --> 00:14:26.470 And so now we are back to working 231 00:14:26.470 --> 00:14:30.363 and the two bookmarks from before are now actually here. 232 00:14:32.560 --> 00:14:35.093 All right, so with that we solved the problem, 233 00:14:36.250 --> 00:14:40.740 because now as the page here tries to then 234 00:14:42.900 --> 00:14:45.840 updating the bookmarks view, 235 00:14:45.840 --> 00:14:48.120 the bookmarks are already there. 236 00:14:48.120 --> 00:14:50.970 And so then there's nothing to update really. 237 00:14:50.970 --> 00:14:55.260 So we can actually move that back up here, I believe 238 00:14:57.370 --> 00:14:58.923 actually this one as well. 239 00:15:02.150 --> 00:15:03.973 So let's try that again. 240 00:15:05.220 --> 00:15:10.220 And yeah, so this is a bit of a more, 241 00:15:10.260 --> 00:15:11.410 a natural order 242 00:15:14.730 --> 00:15:15.573 now, okay. 243 00:15:17.160 --> 00:15:19.610 And so now of course I can click here 244 00:15:19.610 --> 00:15:22.220 and then this gets selected 245 00:15:22.220 --> 00:15:24.670 and everything keeps working the same. 246 00:15:24.670 --> 00:15:28.550 So we don't even need to search functionality 247 00:15:28.550 --> 00:15:32.433 to be able to switch between our recipes. 248 00:15:34.200 --> 00:15:36.517 And of course, if we unbookmark, 249 00:15:36.517 --> 00:15:40.050 then that is gone, and as we reload the page, 250 00:15:40.050 --> 00:15:41.683 then we only have this one, 251 00:15:43.180 --> 00:15:47.600 then let's remove all of them. 252 00:15:47.600 --> 00:15:51.860 And then as this was re-rendered, right? 253 00:15:51.860 --> 00:15:55.770 Then we got this error message here back. 254 00:15:55.770 --> 00:15:57.830 And of course, if we reload now, 255 00:15:57.830 --> 00:16:00.693 then we have no bookmarks at all, again. 256 00:16:01.830 --> 00:16:02.740 Now just to finish, 257 00:16:02.740 --> 00:16:06.843 let's quickly add like a quick function here for debugging. 258 00:16:09.170 --> 00:16:12.643 Let's call it clear bookmarks, 259 00:16:14.060 --> 00:16:16.880 which is simply a function that at some point 260 00:16:16.880 --> 00:16:18.793 we might want to call, 261 00:16:20.420 --> 00:16:23.950 but again, only during development, 262 00:16:23.950 --> 00:16:26.633 so clear 10 bookmarks. 263 00:16:28.550 --> 00:16:30.000 So when I'm working with this, 264 00:16:30.000 --> 00:16:34.230 then sometimes I need to do this. 265 00:16:34.230 --> 00:16:35.873 So clearing all the bookmarks. 266 00:16:37.830 --> 00:16:40.853 So let me add a couple of ones here. 267 00:16:43.410 --> 00:16:45.713 So this one and this one. 268 00:16:46.890 --> 00:16:49.500 Okay, and now as they reload the page, 269 00:16:49.500 --> 00:16:51.193 it should then clear all of them. 270 00:16:52.860 --> 00:16:55.543 Well, it didn't for some reason. 271 00:16:58.600 --> 00:17:00.360 Oh, and that's probably 272 00:17:00.360 --> 00:17:03.060 because this one here happened first, 273 00:17:03.060 --> 00:17:07.220 so let's take this one out, do that again. 274 00:17:07.220 --> 00:17:09.103 And now the bookmarks are gone. 275 00:17:11.110 --> 00:17:12.860 Okay, but by default, 276 00:17:12.860 --> 00:17:15.490 this will, of course be turned off 277 00:17:15.490 --> 00:17:19.173 because otherwise our application is not going to work. 278 00:17:21.850 --> 00:17:24.723 So here is the hot pizza dip. 279 00:17:26.400 --> 00:17:31.010 And it is still bookmarked after we reload the application. 280 00:17:31.010 --> 00:17:33.650 And so let's quickly to finish, 281 00:17:33.650 --> 00:17:35.200 check out our flow chart, 282 00:17:35.200 --> 00:17:38.463 but I'm pretty confident that everything is implemented. 283 00:17:39.310 --> 00:17:41.850 So when the user clicks a bookmark, 284 00:17:41.850 --> 00:17:44.430 it will then mark the selected bookmark here. 285 00:17:44.430 --> 00:17:47.240 And of course it will render the recipe. 286 00:17:47.240 --> 00:17:48.653 When the page loads, 287 00:17:49.934 --> 00:17:52.990 then the bookmarks are loaded from local storage 288 00:17:52.990 --> 00:17:54.890 and they are rendered. 289 00:17:54.890 --> 00:17:57.670 So check here as well. 290 00:17:57.670 --> 00:18:00.150 And when the user bookmarks a recipe, 291 00:18:00.150 --> 00:18:03.520 then it gets stored to local storage. 292 00:18:03.520 --> 00:18:05.590 So check here as well. 293 00:18:05.590 --> 00:18:08.460 And so we just implemented all of this 294 00:18:08.460 --> 00:18:10.650 or rather complex part. 295 00:18:10.650 --> 00:18:13.840 So now it's finally time to take a break 296 00:18:13.840 --> 00:18:17.990 and take an overview of what we need to implement next 297 00:18:17.990 --> 00:18:20.223 in order to finish this application.