WEBVTT 1 00:00:01.210 --> 00:00:02.800 Welcome back. 2 00:00:02.800 --> 00:00:04.860 So now that you know everything 3 00:00:04.860 --> 00:00:08.150 about the model-view-controller architecture 4 00:00:08.150 --> 00:00:12.150 and also how it's gonna be implemented in our project, 5 00:00:12.150 --> 00:00:15.660 let's now actually go do that in practice. 6 00:00:15.660 --> 00:00:18.430 And this is gonna be a long lecture, 7 00:00:18.430 --> 00:00:20.313 so let's get started. 8 00:00:21.970 --> 00:00:25.680 And let's start by creating the necessary new files 9 00:00:25.680 --> 00:00:28.603 so that we can then split up our code between them. 10 00:00:29.640 --> 00:00:33.093 So let's start by closing all of the folders here. 11 00:00:34.050 --> 00:00:35.770 And then inside of src 12 00:00:35.770 --> 00:00:39.780 and JavaScript, let's create a new file, 13 00:00:39.780 --> 00:00:42.643 which will be called model.js. 14 00:00:44.434 --> 00:00:45.700 And so this is basically going 15 00:00:45.700 --> 00:00:49.683 to be the module in which we write our entire model. 16 00:00:50.560 --> 00:00:52.790 Then we also need the view, 17 00:00:52.790 --> 00:00:54.400 or actually, the views 18 00:00:54.400 --> 00:00:56.840 because we will have multiple views. 19 00:00:56.840 --> 00:01:00.410 Basically one for each feature. 20 00:01:00.410 --> 00:01:03.600 So now we're working on displaying the recipe 21 00:01:03.600 --> 00:01:06.320 and so this one is going to be called recipeView. 22 00:01:07.970 --> 00:01:10.653 But actually, let's create a new folder here 23 00:01:10.653 --> 00:01:15.653 for the views in order not to clutter our JavaScript folder. 24 00:01:18.100 --> 00:01:19.040 All right? 25 00:01:19.040 --> 00:01:24.040 And so then in here, let's create recipeView.js. 26 00:01:26.330 --> 00:01:29.720 So we will have one big module here 27 00:01:29.720 --> 00:01:31.890 for all the controllers. 28 00:01:31.890 --> 00:01:35.370 Then one big file for the entire model. 29 00:01:35.370 --> 00:01:37.850 So for all the models basically. 30 00:01:37.850 --> 00:01:40.910 So for the recipe, for search, for bookmarks 31 00:01:40.910 --> 00:01:43.550 and all of that but for the views, 32 00:01:43.550 --> 00:01:47.520 we will have one module for each of the different views. 33 00:01:47.520 --> 00:01:49.747 And you'll understand why that makes sense 34 00:01:49.747 --> 00:01:53.140 as we keep developing our application. 35 00:01:53.140 --> 00:01:56.070 And probably the first reason that comes to mind 36 00:01:56.070 --> 00:01:59.510 is that the views are simply much bigger. 37 00:01:59.510 --> 00:02:04.510 And so we don't want a file, which like 500 lines of code. 38 00:02:04.680 --> 00:02:07.430 We could, of course, also split up the model 39 00:02:07.430 --> 00:02:11.240 and the controller and probably many people would do that 40 00:02:11.240 --> 00:02:14.500 but I don't want to have to mess with a lot 41 00:02:14.500 --> 00:02:16.360 of files here in this project. 42 00:02:16.360 --> 00:02:19.663 That would just make it very confusing for you to follow. 43 00:02:21.060 --> 00:02:23.340 So let's actually take a look again here 44 00:02:23.340 --> 00:02:24.690 at this architecture 45 00:02:24.690 --> 00:02:27.100 that I showed you in the last video. 46 00:02:27.100 --> 00:02:30.770 And here, we will actually start with the model. 47 00:02:30.770 --> 00:02:34.420 So again, we're going to have a big state object, 48 00:02:34.420 --> 00:02:38.270 which then inside will contain an object for recipe, 49 00:02:38.270 --> 00:02:40.670 search and bookmarks. 50 00:02:40.670 --> 00:02:43.580 And now we will just start with the recipe 51 00:02:43.580 --> 00:02:45.760 and then there will be a function 52 00:02:45.760 --> 00:02:48.420 for loading the recipe, right? 53 00:02:48.420 --> 00:02:50.560 And so then that function will then be called 54 00:02:50.560 --> 00:02:53.610 by controlRecipes, which kind of sits 55 00:02:53.610 --> 00:02:56.000 between loading the recipe 56 00:02:56.000 --> 00:02:59.420 and then rendering it using the view. 57 00:02:59.420 --> 00:03:02.140 So remember that the controller kind of sits 58 00:03:02.140 --> 00:03:04.510 between model and the view 59 00:03:04.510 --> 00:03:06.293 so it acts like a bridge. 60 00:03:07.260 --> 00:03:10.880 All right, and let's actually keep it open here 61 00:03:10.880 --> 00:03:13.223 and close all of these others. 62 00:03:14.460 --> 00:03:16.090 And so here in our model, 63 00:03:16.090 --> 00:03:20.910 let's simply create that state object 64 00:03:22.130 --> 00:03:24.860 and then in there we have the recipe, 65 00:03:24.860 --> 00:03:28.450 which in turn, is also an empty object. 66 00:03:28.450 --> 00:03:30.640 At least at the beginning. 67 00:03:30.640 --> 00:03:34.950 And then we will export this state 68 00:03:34.950 --> 00:03:38.070 so that we can then use it in the controller. 69 00:03:38.070 --> 00:03:40.740 And let's put them here just like in the diagram. 70 00:03:40.740 --> 00:03:43.193 Model, controller and view. 71 00:03:44.440 --> 00:03:45.630 Okay? 72 00:03:45.630 --> 00:03:48.070 So we're exporting the state from here 73 00:03:48.070 --> 00:03:51.713 and now let's also create that loadRecipe function. 74 00:03:53.050 --> 00:03:54.720 And of course, we also export it 75 00:03:54.720 --> 00:03:56.723 so that we can use it in the controller. 76 00:03:59.350 --> 00:04:00.603 So loadRecipe. 77 00:04:01.681 --> 00:04:03.930 And this function will be the one responsible 78 00:04:03.930 --> 00:04:06.440 for actually fetching the recipe data 79 00:04:06.440 --> 00:04:09.040 from our Forkify API. 80 00:04:09.040 --> 00:04:11.403 And so this is going to be an async function. 81 00:04:13.380 --> 00:04:14.213 All right? 82 00:04:15.230 --> 00:04:18.800 And so now we can actually start grabbing some 83 00:04:18.800 --> 00:04:20.163 of the code from here. 84 00:04:22.180 --> 00:04:23.410 Okay? 85 00:04:23.410 --> 00:04:26.160 So as I said, basically the goal of this lecture 86 00:04:26.160 --> 00:04:28.540 is to refactor all the code here 87 00:04:28.540 --> 00:04:31.363 into the different parts of the architecture. 88 00:04:32.810 --> 00:04:33.950 Okay? 89 00:04:33.950 --> 00:04:36.290 So what here exactly is concerned 90 00:04:36.290 --> 00:04:38.603 with basically getting the data? 91 00:04:40.220 --> 00:04:42.300 So it starts here 92 00:04:42.300 --> 00:04:45.680 when we fetch the recipe from the API 93 00:04:45.680 --> 00:04:48.223 and then basically, it's all of this here. 94 00:04:49.270 --> 00:04:50.550 So all of this. 95 00:04:50.550 --> 00:04:51.663 So let's copy it. 96 00:04:53.570 --> 00:04:55.390 So rendering the spinner, of course, 97 00:04:55.390 --> 00:04:58.210 has nothing to do with the business logic 98 00:04:58.210 --> 00:05:00.940 but really, it is only presentation logic 99 00:05:00.940 --> 00:05:02.930 and so this one will eventually go 100 00:05:02.930 --> 00:05:03.803 into the view. 101 00:05:05.823 --> 00:05:07.560 And then here getting the ID, 102 00:05:07.560 --> 00:05:10.150 this is also not business logic. 103 00:05:10.150 --> 00:05:13.710 This is actually more about the application logic itself. 104 00:05:13.710 --> 00:05:16.720 So about making the application work. 105 00:05:16.720 --> 00:05:19.170 And so let's keep that part here. 106 00:05:19.170 --> 00:05:21.610 So again, I will just copy this 107 00:05:21.610 --> 00:05:24.743 or actually cut and put it here. 108 00:05:26.497 --> 00:05:29.837 And now we start getting these errors but nevermind. 109 00:05:31.210 --> 00:05:34.800 Probably, we should actually terminate our process here 110 00:05:34.800 --> 00:05:35.970 with Control + C 111 00:05:37.030 --> 00:05:39.363 so that we don't get errors all the time. 112 00:05:41.270 --> 00:05:42.380 Okay? 113 00:05:42.380 --> 00:05:45.580 Now we need to, of course, adjust this here a little bit. 114 00:05:45.580 --> 00:05:49.799 So this first part here makes sense, right? 115 00:05:49.799 --> 00:05:53.760 Now, we just need to get this ID from anywhere. 116 00:05:53.760 --> 00:05:55.580 So right now, we have no idea 117 00:05:55.580 --> 00:05:58.290 which ID we should actually fetch. 118 00:05:58.290 --> 00:05:59.980 And so it's probably a good idea 119 00:05:59.980 --> 00:06:03.890 to pass that ID into this function. 120 00:06:03.890 --> 00:06:05.400 So the controller is the one 121 00:06:05.400 --> 00:06:09.200 that will actually get that ID right here 122 00:06:09.200 --> 00:06:11.260 and so then when it calls the model, 123 00:06:11.260 --> 00:06:12.870 so the loadRecipe function, 124 00:06:12.870 --> 00:06:15.673 it can pass that ID into it. 125 00:06:17.357 --> 00:06:20.210 Then this part here can all stay the same 126 00:06:20.210 --> 00:06:21.934 and this as well. 127 00:06:21.934 --> 00:06:23.530 And this actually should now 128 00:06:23.530 --> 00:06:26.913 not be the recipe but state.recipe. 129 00:06:28.554 --> 00:06:31.693 And here we can just create a const from this. 130 00:06:35.362 --> 00:06:37.687 And here let's also log state.recipe. 131 00:06:39.800 --> 00:06:41.130 All right. 132 00:06:41.130 --> 00:06:45.930 So this function here is not going to return anything. 133 00:06:45.930 --> 00:06:49.430 All it will do is to change our state object. 134 00:06:49.430 --> 00:06:51.530 So this big state object, 135 00:06:51.530 --> 00:06:53.530 which will then contain the recipe 136 00:06:53.530 --> 00:06:55.260 and into which the controller 137 00:06:55.260 --> 00:06:58.103 will then grab and take the recipe out of there. 138 00:06:58.960 --> 00:07:00.650 And this is going to work 139 00:07:00.650 --> 00:07:02.440 because there is a live connection 140 00:07:02.440 --> 00:07:05.360 between the exports and the imports. 141 00:07:05.360 --> 00:07:06.870 Remember that? 142 00:07:06.870 --> 00:07:08.750 So when this state object here 143 00:07:08.750 --> 00:07:11.313 is going to get updated by loadRecipe, 144 00:07:12.150 --> 00:07:15.910 then that state is also updated in the controller, 145 00:07:15.910 --> 00:07:17.573 which imports the state. 146 00:07:18.530 --> 00:07:22.403 So let's now actually import all of that into here. 147 00:07:24.000 --> 00:07:25.993 So doing it here at the very top. 148 00:07:27.950 --> 00:07:30.520 So import and then from the model, 149 00:07:30.520 --> 00:07:33.190 we simply want to import everything. 150 00:07:33.190 --> 00:07:37.220 So we have a couple of named exports here. 151 00:07:37.220 --> 00:07:39.680 So again, there are named exports 152 00:07:39.680 --> 00:07:41.350 and default exports 153 00:07:41.350 --> 00:07:43.480 and these ones are named exports 154 00:07:43.480 --> 00:07:46.520 because we explicitly gave them a name 155 00:07:46.520 --> 00:07:48.964 and so here we can simply import everything 156 00:07:48.964 --> 00:07:51.843 and then call it the model. 157 00:07:53.570 --> 00:07:55.090 And so here in the controller, 158 00:07:55.090 --> 00:07:59.190 we will then end up with model.state 159 00:07:59.190 --> 00:08:00.240 and model.loadRecipe. 160 00:08:01.840 --> 00:08:02.673 Remember that? 161 00:08:02.673 --> 00:08:06.713 And then here, the current folder, model.js. 162 00:08:09.010 --> 00:08:09.883 Okay. 163 00:08:12.660 --> 00:08:16.160 So let's go back here to loading the recipe 164 00:08:16.160 --> 00:08:19.990 and the spinner should probably be outside of here. 165 00:08:19.990 --> 00:08:23.010 And so here, now let's actually call the function. 166 00:08:23.010 --> 00:08:26.040 So let's call model.loadRecipe 167 00:08:28.510 --> 00:08:30.283 and then pass in the ID. 168 00:08:31.300 --> 00:08:33.250 And this loadRecipe function 169 00:08:33.250 --> 00:08:36.000 is an async function and therefore, 170 00:08:36.000 --> 00:08:38.370 it is going to return a promise. 171 00:08:38.370 --> 00:08:39.440 Remember? 172 00:08:39.440 --> 00:08:43.290 And so therefore, here we have to avoid that promise 173 00:08:43.290 --> 00:08:46.130 before we can move on in the next step here 174 00:08:46.130 --> 00:08:49.183 in the execution of this async function. 175 00:08:50.050 --> 00:08:52.949 And so you see, this is exactly the situation 176 00:08:52.949 --> 00:08:56.903 of one async function calling another async function 177 00:08:56.903 --> 00:09:00.810 that we already studied in one of the previous sections. 178 00:09:00.810 --> 00:09:02.040 Remember that? 179 00:09:02.040 --> 00:09:04.970 And so again, it is really, really important 180 00:09:04.970 --> 00:09:07.460 to keep in mind that an async function 181 00:09:07.460 --> 00:09:09.640 will return a promise 182 00:09:09.640 --> 00:09:11.160 that we then need to handle 183 00:09:11.160 --> 00:09:13.900 whenever we call that async function. 184 00:09:13.900 --> 00:09:16.900 At least, if we want to get some result out of it 185 00:09:16.900 --> 00:09:20.140 or if we kind of want to stop the execution 186 00:09:20.140 --> 00:09:23.870 in the function that is calling the other async function. 187 00:09:23.870 --> 00:09:25.020 All right? 188 00:09:25.020 --> 00:09:28.333 So again, really important to understand the mechanics 189 00:09:28.333 --> 00:09:30.453 of what is happening here. 190 00:09:32.370 --> 00:09:36.130 Now, here we should probably also have some error handling. 191 00:09:36.130 --> 00:09:37.693 So I forgot that part. 192 00:09:39.110 --> 00:09:40.000 So try 193 00:09:43.220 --> 00:09:44.793 and all the way down here, 194 00:09:47.354 --> 00:09:48.800 and then catch the error 195 00:09:52.370 --> 00:09:54.433 and then alert the error as well. 196 00:09:55.530 --> 00:09:56.393 All right. 197 00:09:58.420 --> 00:10:02.260 So remember that this loadRecipe function here 198 00:10:02.260 --> 00:10:04.290 does not return anything. 199 00:10:04.290 --> 00:10:07.410 And so therefore, we are not storing any result 200 00:10:07.410 --> 00:10:09.830 into any new variable. 201 00:10:09.830 --> 00:10:12.040 Instead, here we will get access 202 00:10:12.040 --> 00:10:14.410 to state.recipe. 203 00:10:14.410 --> 00:10:17.853 So to that state.recipe 204 00:10:17.853 --> 00:10:21.093 that is going to be manipulated right here. 205 00:10:22.070 --> 00:10:25.720 So you see that this loadRecipe function here clearly 206 00:10:25.720 --> 00:10:27.960 is not a pure function. 207 00:10:27.960 --> 00:10:29.850 So it has the side effect 208 00:10:29.850 --> 00:10:32.040 of manipulating this variable 209 00:10:32.040 --> 00:10:34.110 that is outside of it. 210 00:10:34.110 --> 00:10:35.690 And there would be different ways 211 00:10:35.690 --> 00:10:39.940 of avoiding that but that is just a lot of work 212 00:10:39.940 --> 00:10:42.810 and it's just not worth it here in this case. 213 00:10:42.810 --> 00:10:45.153 We are still trying to learn here, remember. 214 00:10:46.260 --> 00:10:48.860 But anyway, we now here have access 215 00:10:48.860 --> 00:10:53.860 to model.state.recipe. 216 00:10:54.250 --> 00:10:55.840 And so just in order to see 217 00:10:55.840 --> 00:10:57.610 if everything still works, 218 00:10:57.610 --> 00:11:01.006 let's store that recipe into the recipe variable 219 00:11:01.006 --> 00:11:03.263 so that we can then render it, 220 00:11:03.263 --> 00:11:06.463 using this code that we already have here. 221 00:11:07.960 --> 00:11:11.080 So just temporarily, recipe 222 00:11:12.300 --> 00:11:14.233 and then destructure it. 223 00:11:16.260 --> 00:11:17.450 So let's give it a save 224 00:11:18.640 --> 00:11:20.803 and let's restart our application here. 225 00:11:26.284 --> 00:11:27.117 All right. 226 00:11:29.970 --> 00:11:31.920 Let's reload here 227 00:11:31.920 --> 00:11:34.363 and you see that it's working. 228 00:11:36.340 --> 00:11:37.600 Right? 229 00:11:37.600 --> 00:11:41.900 So everything we implemented so far was correct 230 00:11:41.900 --> 00:11:44.720 and that's pretty important to keep checking 231 00:11:44.720 --> 00:11:47.930 when we are refactoring code like this. 232 00:11:47.930 --> 00:11:49.580 Okay? 233 00:11:49.580 --> 00:11:52.090 So that was actually the easy part, 234 00:11:52.090 --> 00:11:54.100 now comes the recipeView, 235 00:11:54.100 --> 00:11:57.400 which will then contain basically all the rest 236 00:11:57.400 --> 00:11:59.093 of the code that we have here. 237 00:11:59.950 --> 00:12:04.250 So let's go here and set the view up. 238 00:12:04.250 --> 00:12:06.796 So the view is going to be a class 239 00:12:06.796 --> 00:12:09.680 and in this case called RecipeView. 240 00:12:11.810 --> 00:12:13.730 And we do this because later, 241 00:12:13.730 --> 00:12:16.740 we will also have a parent class called View, 242 00:12:16.740 --> 00:12:18.670 which will contain a couple of methods 243 00:12:18.670 --> 00:12:21.130 that all the views should inherit. 244 00:12:21.130 --> 00:12:23.070 And so using classes makes all 245 00:12:23.070 --> 00:12:25.620 of this very simple to implement. 246 00:12:25.620 --> 00:12:29.390 Also, we want each view to have a couple of private methods 247 00:12:29.390 --> 00:12:32.920 and properties and so classes makes this really easy 248 00:12:32.920 --> 00:12:35.050 to implement again. 249 00:12:35.050 --> 00:12:37.540 And just in general, I feel that classes 250 00:12:37.540 --> 00:12:40.290 are really the right way to go here. 251 00:12:40.290 --> 00:12:42.290 And again, it will make even more sense 252 00:12:42.290 --> 00:12:45.823 once we start to add the parent class of view. 253 00:12:46.680 --> 00:12:49.160 But anyway, I mentioned that I want each 254 00:12:49.160 --> 00:12:52.720 of these classes to have a couple of private properties 255 00:12:52.720 --> 00:12:55.273 and one of them is going to be the parentElement. 256 00:12:56.920 --> 00:13:01.920 So parentElement, and let's right away set the parentElement 257 00:13:02.742 --> 00:13:07.467 to the recipe container. 258 00:13:09.050 --> 00:13:12.370 So basically, to this element, all right? 259 00:13:12.370 --> 00:13:14.540 Because this will then make it really easy 260 00:13:14.540 --> 00:13:16.350 to render the spinner 261 00:13:16.350 --> 00:13:18.960 and to render success or error messages 262 00:13:18.960 --> 00:13:21.683 or to render, of course, the recipe itself. 263 00:13:23.620 --> 00:13:27.520 So if each of the views has this parentElement property, 264 00:13:27.520 --> 00:13:32.200 then it will be really easy to do all of those tasks 265 00:13:32.200 --> 00:13:34.260 and again, that will become really clear 266 00:13:34.260 --> 00:13:36.653 once we start adding more and more views. 267 00:13:37.490 --> 00:13:39.820 But now the next thing I want to do 268 00:13:39.820 --> 00:13:43.140 is to actually export something from this module. 269 00:13:43.140 --> 00:13:45.750 So of course, we have to export something 270 00:13:45.750 --> 00:13:48.200 from this view so that the controller 271 00:13:48.200 --> 00:13:50.020 can then use it. 272 00:13:50.020 --> 00:13:53.700 Now, what are we going to export from this view? 273 00:13:53.700 --> 00:13:55.560 So we might export, of course, 274 00:13:55.560 --> 00:13:58.990 the entire class like this 275 00:13:58.990 --> 00:14:00.890 and so then here in the controller, 276 00:14:00.890 --> 00:14:03.310 we would have to import that class 277 00:14:03.310 --> 00:14:06.550 and create a new object out of that class. 278 00:14:06.550 --> 00:14:11.510 So basically, create a new RecipeView object, right? 279 00:14:11.510 --> 00:14:13.020 However, in that situation, 280 00:14:13.020 --> 00:14:14.117 it might be possible 281 00:14:14.117 --> 00:14:16.740 to create more that one view 282 00:14:16.740 --> 00:14:19.100 and we would never want that. 283 00:14:19.100 --> 00:14:21.650 Also, that would add unnecessary work 284 00:14:21.650 --> 00:14:24.130 to the controller, which we basically want 285 00:14:24.130 --> 00:14:26.570 to keep as simple as possible. 286 00:14:26.570 --> 00:14:28.809 And so in order to avoid all that, 287 00:14:28.809 --> 00:14:31.670 we will already create the object here 288 00:14:31.670 --> 00:14:34.660 and then export that object. 289 00:14:34.660 --> 00:14:37.310 And so like this, no one from the outside 290 00:14:37.310 --> 00:14:40.407 of this class here will have access to anything, 291 00:14:40.407 --> 00:14:42.793 except for the object. 292 00:14:44.720 --> 00:14:48.600 So what we will do is to export default 293 00:14:48.600 --> 00:14:50.360 and then a new RecipeView. 294 00:14:54.060 --> 00:14:55.020 All right? 295 00:14:55.020 --> 00:14:57.090 And that's actually it. 296 00:14:57.090 --> 00:14:59.440 So we don't pass any data in 297 00:14:59.440 --> 00:15:02.693 and so therefore, we don't need any constructor even. 298 00:15:05.800 --> 00:15:06.633 Okay? 299 00:15:06.633 --> 00:15:09.273 And then here all we do is import 300 00:15:09.273 --> 00:15:12.033 and here we then can give it any name. 301 00:15:13.020 --> 00:15:14.920 So I'm calling it recipeView 302 00:15:14.920 --> 00:15:17.902 because I think that's what makes most sense. 303 00:15:17.902 --> 00:15:22.902 And then views and then recipeView.js. 304 00:15:26.260 --> 00:15:29.390 Now, how do we then actually pass any data 305 00:15:29.390 --> 00:15:31.340 into the recipeView? 306 00:15:31.340 --> 00:15:34.159 Because if we're not creating the new object ourselves, 307 00:15:34.159 --> 00:15:36.450 then we cannot pass any data 308 00:15:36.450 --> 00:15:39.115 in like for the constructor, right? 309 00:15:39.115 --> 00:15:44.115 So we cannot pass any data into this RecipeView, 310 00:15:44.500 --> 00:15:47.940 well, because we're creating that object right here 311 00:15:47.940 --> 00:15:51.320 in the RecipeView module already. 312 00:15:51.320 --> 00:15:53.948 But actually, I did that on purpose 313 00:15:53.948 --> 00:15:58.948 so that we can create a very nice method called render. 314 00:15:59.326 --> 00:16:02.220 So what I will want to do here, 315 00:16:02.220 --> 00:16:04.180 and let me already write it here 316 00:16:04.180 --> 00:16:05.993 even before having the method. 317 00:16:07.090 --> 00:16:12.090 So what I will want to do is to call recipeView.render. 318 00:16:14.070 --> 00:16:17.020 And then here all we do is to pass in the data, 319 00:16:17.020 --> 00:16:20.937 which will be model.state.recipe. 320 00:16:23.300 --> 00:16:25.750 And this method here called render 321 00:16:25.750 --> 00:16:28.690 is a very common name for methods, 322 00:16:28.690 --> 00:16:32.720 for example, in React, it is also called render. 323 00:16:32.720 --> 00:16:35.590 And so I think this is a nice name. 324 00:16:35.590 --> 00:16:39.200 It's really descriptive of what is going to happen. 325 00:16:39.200 --> 00:16:40.430 All right? 326 00:16:40.430 --> 00:16:44.330 So if we did export the entire class, 327 00:16:44.330 --> 00:16:48.647 then here we would have to do like const recipeView 328 00:16:50.610 --> 00:16:55.113 equal new RecipeView or something like that. 329 00:16:57.140 --> 00:17:01.470 And then here, we would have to pass in the data like this 330 00:17:01.470 --> 00:17:03.970 when we create the new recipe. 331 00:17:03.970 --> 00:17:06.526 And of course, this would also be possible 332 00:17:06.526 --> 00:17:09.700 but honestly, I like it better like this. 333 00:17:09.700 --> 00:17:12.590 So having this nice render method 334 00:17:12.590 --> 00:17:14.330 is a lot more descriptive 335 00:17:14.330 --> 00:17:17.813 and a lot cleaner and also for the reasons 336 00:17:17.813 --> 00:17:20.433 that I explained previously already. 337 00:17:21.720 --> 00:17:24.240 Now, anyway, this render method here 338 00:17:24.240 --> 00:17:26.400 will now accept this data. 339 00:17:26.400 --> 00:17:29.093 It will then store it into the object. 340 00:17:31.810 --> 00:17:35.620 So let's add the public render method. 341 00:17:35.620 --> 00:17:39.293 So this is, of course, part of the public API. 342 00:17:40.800 --> 00:17:42.660 So this receives data 343 00:17:42.660 --> 00:17:46.040 and will then set this.#data 344 00:17:47.600 --> 00:17:50.040 to the data it just received. 345 00:17:50.040 --> 00:17:52.913 So we need to declare that up here. 346 00:17:55.260 --> 00:17:57.400 And so this render method here 347 00:17:57.400 --> 00:17:59.030 and these two properties 348 00:17:59.030 --> 00:18:00.840 are something that all the views 349 00:18:00.840 --> 00:18:03.000 are going to have in common. 350 00:18:03.000 --> 00:18:05.941 And this will be really beautiful to work with 351 00:18:05.941 --> 00:18:07.730 as you will see. 352 00:18:07.730 --> 00:18:11.280 But now, let's actually do something with this data, 353 00:18:11.280 --> 00:18:13.203 which is to actually render it. 354 00:18:14.530 --> 00:18:16.130 So basically what we want now 355 00:18:16.130 --> 00:18:18.110 is to take all of this code 356 00:18:19.564 --> 00:18:22.423 and cut it from here. 357 00:18:25.190 --> 00:18:26.713 And put it into our view. 358 00:18:27.690 --> 00:18:29.180 Okay? 359 00:18:29.180 --> 00:18:32.340 Now, we will actually not put it into the render method 360 00:18:32.340 --> 00:18:36.150 because again, this method will later be common 361 00:18:36.150 --> 00:18:37.720 to all the views. 362 00:18:37.720 --> 00:18:39.660 So to all the classes. 363 00:18:39.660 --> 00:18:44.500 However, each view will, of course, render different HTML. 364 00:18:44.500 --> 00:18:46.616 And so we will simply have a method 365 00:18:46.616 --> 00:18:48.727 that generates that HTML 366 00:18:48.727 --> 00:18:53.727 so that the render method can then render that HTML. 367 00:18:53.793 --> 00:18:57.263 So if that sounds confusing, let me write it in code. 368 00:18:58.440 --> 00:19:02.170 So generateMarkup. 369 00:19:02.170 --> 00:19:05.440 And so this is going to be a private method 370 00:19:05.440 --> 00:19:07.550 and since we're using Babel here, 371 00:19:07.550 --> 00:19:10.970 I can already use this syntax here. 372 00:19:14.980 --> 00:19:17.860 So pasting the code here 373 00:19:19.770 --> 00:19:23.580 and so this is going to generate this Markup variable 374 00:19:23.580 --> 00:19:27.363 and we can actually immediately return that from here. 375 00:19:28.640 --> 00:19:29.473 Okay? 376 00:19:30.310 --> 00:19:32.865 Now, this is not going to do anything yet 377 00:19:32.865 --> 00:19:37.280 because what is recipe here in this case? 378 00:19:37.280 --> 00:19:38.700 It's nothing, right? 379 00:19:38.700 --> 00:19:40.273 It's not defined at all. 380 00:19:41.450 --> 00:19:45.480 Now, in this case, where is this data actually? 381 00:19:45.480 --> 00:19:49.983 Well, it is in this.#data, right? 382 00:19:51.290 --> 00:19:52.797 So why's that? 383 00:19:52.797 --> 00:19:54.970 So let's take a look at our controller 384 00:19:56.090 --> 00:19:57.840 and let's start from the beginning. 385 00:19:58.890 --> 00:20:01.610 So the recipe is loaded here 386 00:20:01.610 --> 00:20:06.073 and then that will store it into the state object, right? 387 00:20:06.933 --> 00:20:09.143 Here we don't need that anymore. 388 00:20:10.120 --> 00:20:14.190 Then here we take model.state.recipe, 389 00:20:14.190 --> 00:20:18.120 which is that data that we just received here in step one 390 00:20:18.120 --> 00:20:23.120 and then that data is passed into the render method, right? 391 00:20:23.220 --> 00:20:26.050 And so render method then takes that data 392 00:20:26.050 --> 00:20:28.923 and stores it inside of this.#data. 393 00:20:29.890 --> 00:20:31.810 And so this is so that we can then use 394 00:20:31.810 --> 00:20:33.706 that data all over the place 395 00:20:33.706 --> 00:20:35.693 inside of this object. 396 00:20:37.890 --> 00:20:41.530 And by the way, this is exactly what we have here 397 00:20:41.530 --> 00:20:43.710 in this architecture diagram. 398 00:20:43.710 --> 00:20:45.273 So inside of controlRecipes, 399 00:20:47.477 --> 00:20:49.683 the loadRecipe function is called, 400 00:20:49.683 --> 00:20:53.380 then the recipe data foes into the state 401 00:20:53.380 --> 00:20:55.400 and then that data passes 402 00:20:55.400 --> 00:20:58.570 right through the controller basically 403 00:20:58.570 --> 00:21:01.270 and goes into the render method, 404 00:21:01.270 --> 00:21:04.293 which then in turn, calls generateMarkup. 405 00:21:05.400 --> 00:21:08.060 So you see, we already have many things 406 00:21:08.060 --> 00:21:09.760 here implemented here already, 407 00:21:09.760 --> 00:21:12.150 like data and parentElement, 408 00:21:12.150 --> 00:21:14.701 we're just missing some small parts 409 00:21:14.701 --> 00:21:16.913 but we are going to get there. 410 00:21:17.770 --> 00:21:19.830 But now what we were doing here 411 00:21:19.830 --> 00:21:22.610 is to discuss where this recipe data 412 00:21:22.610 --> 00:21:24.810 is actually located right now. 413 00:21:24.810 --> 00:21:27.253 And we came to the conclusion that it is in this.#data. 414 00:21:29.480 --> 00:21:31.160 So I will copy it 415 00:21:31.160 --> 00:21:36.160 and then we need to replace all the recipe. here with that. 416 00:21:38.780 --> 00:21:41.094 So I'm hitting Command + D. 417 00:21:41.094 --> 00:21:44.193 So for you, that should be Control + D. 418 00:21:46.290 --> 00:21:49.210 And then let me paste that dot 419 00:21:50.180 --> 00:21:51.573 and then that's it. 420 00:21:53.430 --> 00:21:54.910 All right? 421 00:21:54.910 --> 00:21:56.560 Then down here, we have this code, 422 00:21:56.560 --> 00:21:58.820 which is not supposed to be here 423 00:21:58.820 --> 00:22:00.880 because all this function does 424 00:22:00.880 --> 00:22:03.560 is to return an HTML string. 425 00:22:03.560 --> 00:22:05.400 And it's going to be the render method 426 00:22:05.400 --> 00:22:09.060 that will be responsible for then actually putting 427 00:22:09.060 --> 00:22:11.810 that HTML onto the page. 428 00:22:11.810 --> 00:22:15.590 Now, okay. 429 00:22:15.590 --> 00:22:18.970 So here, let's say that the markup 430 00:22:18.970 --> 00:22:21.857 is this.#generateMarkup. 431 00:22:28.350 --> 00:22:30.960 Well, this is probably something that's coming 432 00:22:30.960 --> 00:22:33.683 from Babel here. 433 00:22:35.130 --> 00:22:36.543 Not really sure why. 434 00:22:38.240 --> 00:22:41.720 But apparently, VS Code doesn't like this yet. 435 00:22:41.720 --> 00:22:44.120 Ah, we're still missing the dot here, of course. 436 00:22:45.090 --> 00:22:47.090 Now it appears to be working. 437 00:22:47.090 --> 00:22:49.370 And of course, we've still got some errors here 438 00:22:49.370 --> 00:22:51.790 but nevermind about that. 439 00:22:51.790 --> 00:22:54.020 We are still refactoring. 440 00:22:54.020 --> 00:22:55.830 So we have our markup. 441 00:22:55.830 --> 00:22:57.853 Now we need to put it on the page. 442 00:22:58.940 --> 00:23:03.530 So again, we need to start by clearing the parentElement 443 00:23:03.530 --> 00:23:08.280 and actually, let's create another small method for that. 444 00:23:08.280 --> 00:23:11.780 So just to get in the habit of abstracting some code 445 00:23:13.520 --> 00:23:15.970 and so now this is where our parentElement 446 00:23:15.970 --> 00:23:17.240 will come into play 447 00:23:18.730 --> 00:23:20.660 'cause now we can say 448 00:23:20.660 --> 00:23:22.670 this.#parentElement.innerHTML 449 00:23:26.650 --> 00:23:27.923 and set it to empty. 450 00:23:29.010 --> 00:23:30.310 Right? 451 00:23:30.310 --> 00:23:32.330 And so this method here 452 00:23:32.330 --> 00:23:34.780 will be usable for all the views 453 00:23:34.780 --> 00:23:36.390 as long as all the views 454 00:23:36.390 --> 00:23:40.800 have a parentElement property like this one. 455 00:23:40.800 --> 00:23:41.780 Right? 456 00:23:41.780 --> 00:23:44.890 So all of this will become really reusable 457 00:23:44.890 --> 00:23:49.576 as you will in one of the future lectures. 458 00:23:49.576 --> 00:23:53.033 So here we now can then call that. 459 00:23:56.722 --> 00:23:57.710 And then to finish, 460 00:23:57.710 --> 00:24:01.710 we can finally render that HTML to the page. 461 00:24:01.710 --> 00:24:03.150 And so here, once again, 462 00:24:03.150 --> 00:24:06.360 we can now use this.#parentElement 463 00:24:08.540 --> 00:24:11.900 and then insert that HTML there. 464 00:24:11.900 --> 00:24:13.120 Okay. 465 00:24:13.120 --> 00:24:16.323 So this might already be working actually. 466 00:24:17.420 --> 00:24:20.600 So all of this here looks good to me. 467 00:24:20.600 --> 00:24:22.750 Let's take a look at the controller. 468 00:24:22.750 --> 00:24:26.410 And you see that this is now a really nice 469 00:24:26.410 --> 00:24:30.620 and small function here already, right? 470 00:24:30.620 --> 00:24:34.013 Now, this one, we actually want to call it controlRecipes. 471 00:24:35.490 --> 00:24:37.163 So let's replace it everywhere. 472 00:24:38.420 --> 00:24:39.253 controlRecipes. 473 00:24:42.280 --> 00:24:46.713 So that's the name that I have here in the diagram. 474 00:24:47.800 --> 00:24:49.240 Okay? 475 00:24:49.240 --> 00:24:51.010 And so now what we're missing 476 00:24:51.010 --> 00:24:55.593 is only to export the renderSpinner also into the view. 477 00:24:56.440 --> 00:24:57.480 So this one, of course, 478 00:24:57.480 --> 00:25:02.080 also has nothing to do with the controller 479 00:25:02.080 --> 00:25:03.773 and so it belongs in the view. 480 00:25:08.930 --> 00:25:10.500 So of course, not a function 481 00:25:10.500 --> 00:25:15.370 but a method and this one will also be a public method 482 00:25:15.370 --> 00:25:18.930 so that the controller can then call this method here 483 00:25:18.930 --> 00:25:20.823 as it starts fetching the data. 484 00:25:21.730 --> 00:25:22.860 Okay? 485 00:25:22.860 --> 00:25:23.950 And now here again, 486 00:25:23.950 --> 00:25:28.260 we have the beauty of the parentElement already being 487 00:25:28.260 --> 00:25:30.143 inside of the object. 488 00:25:32.250 --> 00:25:34.760 So this one we can simply delete 489 00:25:34.760 --> 00:25:39.213 and here we can replace it with this.#parentElement. 490 00:25:44.050 --> 00:25:45.250 Now, right. 491 00:25:45.250 --> 00:25:48.086 Next up, I'm seeing that this icons variable 492 00:25:48.086 --> 00:25:51.713 is not going to be defined anywhere in this module. 493 00:25:52.930 --> 00:25:56.323 So we will need to grab that from here. 494 00:25:58.280 --> 00:26:00.080 So you'll see that here we have the icons 495 00:26:00.080 --> 00:26:04.490 and we don't need them here anymore at least. 496 00:26:04.490 --> 00:26:07.163 So now we need them right here. 497 00:26:11.510 --> 00:26:12.580 And now what we need to do 498 00:26:12.580 --> 00:26:16.280 is to then call this renderSpinner method right here. 499 00:26:22.060 --> 00:26:24.360 So that's going to be recipeView.renderSpinner 500 00:26:27.270 --> 00:26:30.330 and here again, we no longer need to pass 501 00:26:30.330 --> 00:26:32.550 in the parentElement. 502 00:26:32.550 --> 00:26:35.410 And just watch how beautiful this is. 503 00:26:35.410 --> 00:26:39.730 So we have recipeView and then renderSpinner 504 00:26:39.730 --> 00:26:40.940 and we already know 505 00:26:40.940 --> 00:26:43.702 that this will then automatically render the spinner 506 00:26:43.702 --> 00:26:45.912 on the recipeView. 507 00:26:45.912 --> 00:26:49.400 And the same is later going to happen with other views. 508 00:26:49.400 --> 00:26:51.910 For example, with the bookmarks view. 509 00:26:51.910 --> 00:26:55.970 We will also have a renderSpinner on the bookmarks view 510 00:26:55.970 --> 00:26:58.470 and it's going to work the exact same way. 511 00:26:58.470 --> 00:27:00.540 And the same with render. 512 00:27:00.540 --> 00:27:03.800 So all we have to do is call these same methods then 513 00:27:03.800 --> 00:27:05.200 on all the views 514 00:27:05.200 --> 00:27:08.053 and they will then simply act on whatever view 515 00:27:08.053 --> 00:27:11.430 that we are calling them, right? 516 00:27:11.430 --> 00:27:13.650 And that works so nice 517 00:27:13.650 --> 00:27:16.360 because we have this parentElement here 518 00:27:16.360 --> 00:27:18.273 and also this data property. 519 00:27:19.500 --> 00:27:23.660 So I think that this is a really nice architecture 520 00:27:23.660 --> 00:27:27.310 and so let's now actually see if this works. 521 00:27:27.310 --> 00:27:30.750 So let's reload this here. 522 00:27:30.750 --> 00:27:32.960 And here we have some errors. 523 00:27:32.960 --> 00:27:35.944 So apparently, if there is a really big error, 524 00:27:35.944 --> 00:27:39.590 then Parcel will let us know about that. 525 00:27:39.590 --> 00:27:42.170 And in this case, the problem is that it failed 526 00:27:42.170 --> 00:27:43.833 to resolve this URL. 527 00:27:45.410 --> 00:27:47.290 And that actually makes sense 528 00:27:47.290 --> 00:27:51.101 because this view here is in a different folder. 529 00:27:51.101 --> 00:27:52.410 Right? 530 00:27:52.410 --> 00:27:55.750 So here we're only going one folder up 531 00:27:55.750 --> 00:27:57.580 and going up one folder from here 532 00:27:57.580 --> 00:28:00.480 will end up in the JavaScript folder. 533 00:28:00.480 --> 00:28:03.320 However, we want to go into images. 534 00:28:03.320 --> 00:28:05.483 So we need to go up one more level. 535 00:28:06.720 --> 00:28:07.623 So like this. 536 00:28:10.900 --> 00:28:11.890 Okay? 537 00:28:11.890 --> 00:28:14.850 So here we have apparently some bug. 538 00:28:14.850 --> 00:28:19.240 Let's just see if anything happens still on this event 539 00:28:19.240 --> 00:28:20.820 and it does. 540 00:28:20.820 --> 00:28:23.990 There's still some problem here maybe 541 00:28:23.990 --> 00:28:25.490 that has to do with the fact 542 00:28:25.490 --> 00:28:28.923 that we are using these private methods here. 543 00:28:29.920 --> 00:28:31.400 So let me change this here 544 00:28:31.400 --> 00:28:32.487 to this one. 545 00:28:34.130 --> 00:28:38.773 So right here, yeah. 546 00:28:40.270 --> 00:28:42.681 And let's also comment out this one 547 00:28:42.681 --> 00:28:45.513 and then we're not using any private methods anymore. 548 00:28:47.490 --> 00:28:50.663 However, that is apparently still not working. 549 00:28:51.751 --> 00:28:53.150 All right. 550 00:28:53.150 --> 00:28:57.803 So let's take a look here at our this.#data. 551 00:28:59.360 --> 00:29:03.423 So this.#data just to see what we get here. 552 00:29:07.550 --> 00:29:09.969 And so we see that apparently 553 00:29:09.969 --> 00:29:13.303 that method is not even being called. 554 00:29:14.440 --> 00:29:16.357 Ah, and I see the problem. 555 00:29:16.357 --> 00:29:19.170 I actually did not call it. 556 00:29:19.170 --> 00:29:22.110 So I didn't use the parenthesis, right? 557 00:29:22.110 --> 00:29:25.103 So what a stupid mistake. 558 00:29:27.480 --> 00:29:30.660 So let's roll back on all the changes I did, 559 00:29:30.660 --> 00:29:32.650 except, of course, for this one 560 00:29:32.650 --> 00:29:34.610 but here, probably all I need to do 561 00:29:34.610 --> 00:29:37.473 is to call these two methods. 562 00:29:39.300 --> 00:29:40.543 Ah, beautiful. 563 00:29:41.750 --> 00:29:42.770 So we're back. 564 00:29:42.770 --> 00:29:44.680 It's working now again. 565 00:29:44.680 --> 00:29:46.590 And it's working really nice, 566 00:29:46.590 --> 00:29:47.983 including the spinner. 567 00:29:50.700 --> 00:29:52.210 Okay? 568 00:29:52.210 --> 00:29:54.240 And so I think with this, 569 00:29:54.240 --> 00:29:57.430 we successfully refactored our entire code 570 00:29:57.430 --> 00:30:00.020 to this new architecture. 571 00:30:00.020 --> 00:30:01.940 Well, not the entire code actually. 572 00:30:01.940 --> 00:30:05.760 We're still missing this handler here 573 00:30:05.760 --> 00:30:08.430 and all of this part that is here. 574 00:30:08.430 --> 00:30:11.730 But don't worry about that for now, okay? 575 00:30:11.730 --> 00:30:13.430 We will have a separate lecture, 576 00:30:13.430 --> 00:30:16.460 which will talk about how we can handle events 577 00:30:16.460 --> 00:30:19.320 in this particular architecture. 578 00:30:19.320 --> 00:30:20.530 For now what matters 579 00:30:20.530 --> 00:30:23.422 is that this works just nicely. 580 00:30:23.422 --> 00:30:26.780 There's just one thing that I actually want to change 581 00:30:26.780 --> 00:30:30.700 but that has nothing to do with the architecture. 582 00:30:30.700 --> 00:30:34.270 So what I want to change is these numbers. 583 00:30:34.270 --> 00:30:36.180 So do you see here we have 0.5 584 00:30:37.189 --> 00:30:42.189 but in the real world, you will see this more like this. 585 00:30:42.980 --> 00:30:46.950 So like 1/2 tablespoon of brown sugar 586 00:30:46.950 --> 00:30:49.140 instead of 0.5. 587 00:30:49.140 --> 00:30:52.023 So this looks a lot nicer or this, for example, 588 00:30:52.023 --> 00:30:54.613 1 1/2 is a lot nicer than 1.5. 589 00:30:56.560 --> 00:30:57.640 And so for that, 590 00:30:57.640 --> 00:31:00.640 we are actually going to use an external library, 591 00:31:00.640 --> 00:31:03.373 which will very easily do this for us. 592 00:31:03.373 --> 00:31:05.130 Okay? 593 00:31:05.130 --> 00:31:07.707 And so I included this part so I could show you 594 00:31:07.707 --> 00:31:10.620 just how to do this. 595 00:31:10.620 --> 00:31:12.870 So let me just google it here. 596 00:31:12.870 --> 00:31:15.930 Npm fractional 597 00:31:15.930 --> 00:31:19.103 just so we can see what this package looks like. 598 00:31:20.080 --> 00:31:21.980 So if you google npm, 599 00:31:21.980 --> 00:31:26.020 then you will usually end up on npmjs.com 600 00:31:26.020 --> 00:31:29.260 and this will then contain like one page 601 00:31:29.260 --> 00:31:34.080 for each package that is on npm, all right? 602 00:31:34.080 --> 00:31:36.390 And so here what you see 603 00:31:36.390 --> 00:31:39.970 is that you can basically create new fractions based 604 00:31:39.970 --> 00:31:43.810 on numbers and then you can do all kinds of multiplications 605 00:31:43.810 --> 00:31:46.007 with them, like multiplying, dividing 606 00:31:46.007 --> 00:31:50.550 and in the end, converting them to a string. 607 00:31:50.550 --> 00:31:52.568 And so that's what we will do now. 608 00:31:52.568 --> 00:31:55.830 So we will convert each number to a fraction 609 00:31:55.830 --> 00:31:58.543 and then immediately convert them to a string. 610 00:31:59.620 --> 00:32:01.780 So this is how we install it. 611 00:32:01.780 --> 00:32:03.443 Let's just grab that. 612 00:32:04.570 --> 00:32:07.423 And then we need our terminal back. 613 00:32:09.650 --> 00:32:11.183 Let's add another one. 614 00:32:12.070 --> 00:32:13.523 So that's the plus sign. 615 00:32:16.250 --> 00:32:18.453 And this should be pretty fast hopefully. 616 00:32:21.080 --> 00:32:23.427 And so we need that here 617 00:32:23.427 --> 00:32:25.300 and so let's import 618 00:32:27.610 --> 00:32:30.370 fractional from 619 00:32:31.570 --> 00:32:33.003 and then fractional. 620 00:32:34.180 --> 00:32:35.380 And so here again you see 621 00:32:35.380 --> 00:32:37.930 that any libraries or any packages 622 00:32:37.930 --> 00:32:40.240 that we import from npm, 623 00:32:40.240 --> 00:32:43.060 we don't even have to specify any path. 624 00:32:43.060 --> 00:32:45.880 All we have to do is to write their names here 625 00:32:45.880 --> 00:32:50.200 and then here, we need also what they export. 626 00:32:50.200 --> 00:32:52.983 And let me see what they actually export. 627 00:32:53.990 --> 00:32:57.380 So it should be called fraction, okay? 628 00:32:57.380 --> 00:33:01.660 So this library actually exports something called fraction. 629 00:33:01.660 --> 00:33:03.488 And we can see that because here, 630 00:33:03.488 --> 00:33:08.488 it is importing the fractional library using require. 631 00:33:08.540 --> 00:33:12.500 And that is simply the old CommonJS way of importing, 632 00:33:12.500 --> 00:33:14.340 which I showed you earlier. 633 00:33:14.340 --> 00:33:16.116 And so that is one of the reasons 634 00:33:16.116 --> 00:33:17.950 why I show that to you 635 00:33:17.950 --> 00:33:20.920 because yeah, again you will see this all the time 636 00:33:20.920 --> 00:33:22.350 in the wild still 637 00:33:22.350 --> 00:33:24.550 because so many packages on npm 638 00:33:24.550 --> 00:33:25.993 are still using CommonJS. 639 00:33:28.060 --> 00:33:32.400 So let's import Fraction here. 640 00:33:32.400 --> 00:33:33.473 Actually like this. 641 00:33:35.040 --> 00:33:35.873 Okay? 642 00:33:35.873 --> 00:33:39.143 And let's just see if this actually does exist now. 643 00:33:44.140 --> 00:33:46.060 And yeah, it does. 644 00:33:46.060 --> 00:33:50.350 So actually, that's even Fraction inside of Fraction 645 00:33:50.350 --> 00:33:55.051 but anyway, let's now go ahead and use this actually 646 00:33:55.051 --> 00:33:58.163 so that it's in here. 647 00:33:59.010 --> 00:34:01.853 So here we now no longer simply want the quantity 648 00:34:01.853 --> 00:34:04.430 but we want the quantity converted 649 00:34:04.430 --> 00:34:05.943 to a fraction string. 650 00:34:07.430 --> 00:34:09.317 So according to the documentation, 651 00:34:09.317 --> 00:34:13.570 we have to say new Fraction 652 00:34:14.580 --> 00:34:18.663 and in this case, it's actually Fraction.Fraction. 653 00:34:19.760 --> 00:34:22.450 So again that's because here inside of Fraction 654 00:34:22.450 --> 00:34:26.780 is where the Fraction function is actually located. 655 00:34:26.780 --> 00:34:27.630 Okay? 656 00:34:27.630 --> 00:34:32.526 And here you could see that we have to then use new. 657 00:34:32.526 --> 00:34:35.460 Now, actually to make this a bit nicer, 658 00:34:35.460 --> 00:34:40.340 we can also use destructuring here right away. 659 00:34:40.340 --> 00:34:41.973 So we can do this. 660 00:34:45.600 --> 00:34:46.973 And if we now take a look, 661 00:34:48.660 --> 00:34:50.868 well, now we have this bug here. 662 00:34:50.868 --> 00:34:52.913 But nevermind. 663 00:34:55.740 --> 00:34:57.083 So let's just do this. 664 00:34:58.100 --> 00:35:01.600 And then call toString on that 665 00:35:01.600 --> 00:35:03.803 just like it said in the documentation. 666 00:35:06.290 --> 00:35:10.010 So you see that now as I destructured that fraction, 667 00:35:10.010 --> 00:35:12.180 it became the actual function. 668 00:35:12.180 --> 00:35:17.180 And yeah, here you see beautifully that it is now 669 00:35:17.331 --> 00:35:21.513 in this size or in this format of the fraction. 670 00:35:23.200 --> 00:35:25.100 And if I take a look at the other one, 671 00:35:25.100 --> 00:35:26.363 then the same as well. 672 00:35:27.260 --> 00:35:31.810 Now, this one doesn't look very beautiful but nevermind. 673 00:35:31.810 --> 00:35:34.140 So we cannot fix all of it 674 00:35:34.140 --> 00:35:38.440 but at least, this looks really cool now, right? 675 00:35:38.440 --> 00:35:43.030 And so this is when we reach for packages on npm. 676 00:35:43.030 --> 00:35:44.740 So when we need some functionality 677 00:35:44.740 --> 00:35:48.500 that we don't want to implement ourselves. 678 00:35:48.500 --> 00:35:49.410 I'm just going back here 679 00:35:49.410 --> 00:35:51.890 because I noticed some problem here, 680 00:35:51.890 --> 00:35:54.170 which was this one. 681 00:35:54.170 --> 00:35:58.550 And that was because previously here we had null. 682 00:35:58.550 --> 00:36:02.486 So there was no value for this cilantro. 683 00:36:02.486 --> 00:36:07.373 And so we should probably check if the number does exist. 684 00:36:09.460 --> 00:36:13.143 So we can say ing.quantity. 685 00:36:14.120 --> 00:36:16.739 If it exists, then do this. 686 00:36:16.739 --> 00:36:21.250 And if not, then simply put an empty string there 687 00:36:21.250 --> 00:36:22.536 and of course, now here. 688 00:36:22.536 --> 00:36:26.073 So that must be out here. 689 00:36:29.750 --> 00:36:33.033 Yep, now it's gone and it looks a lot nicer. 690 00:36:34.750 --> 00:36:36.100 All right. 691 00:36:36.100 --> 00:36:37.330 Now just to finish, 692 00:36:37.330 --> 00:36:40.960 I actually want to refactor this function here. 693 00:36:41.990 --> 00:36:43.320 So let me grab this 694 00:36:46.520 --> 00:36:51.207 and put it down here and call it generateMarkupIngredients 695 00:36:55.590 --> 00:36:56.823 or just Ingredient. 696 00:37:00.907 --> 00:37:01.950 Okay. 697 00:37:01.950 --> 00:37:05.183 And this will then receive the ingredient. 698 00:37:06.140 --> 00:37:06.973 Okay. 699 00:37:06.973 --> 00:37:10.090 And then here inside of the map, 700 00:37:10.090 --> 00:37:12.443 we can then simply call this. 701 00:37:15.580 --> 00:37:19.250 And let's copy it because these private methods, 702 00:37:19.250 --> 00:37:22.963 for some reason, VS Code doesn't really understand them yet. 703 00:37:24.460 --> 00:37:27.683 So right here. 704 00:37:29.290 --> 00:37:34.290 And so successfully refactored this part 705 00:37:34.664 --> 00:37:38.090 and so we are now done in this lecture 706 00:37:38.090 --> 00:37:41.063 where we also successfully refactored the entire code 707 00:37:41.063 --> 00:37:42.960 that we already had 708 00:37:42.960 --> 00:37:46.963 to the model-view-controller architecture. 709 00:37:48.330 --> 00:37:49.450 All right? 710 00:37:49.450 --> 00:37:51.610 So we're not done 100% 711 00:37:51.610 --> 00:37:54.170 but we've done a lot of work in this lecture 712 00:37:54.170 --> 00:37:57.540 and I really hope that you understood everything 713 00:37:57.540 --> 00:37:58.960 that we did here. 714 00:37:58.960 --> 00:38:02.560 So this was a really, really, really important lecture. 715 00:38:02.560 --> 00:38:06.010 So make sure that you understand everything that we did. 716 00:38:06.010 --> 00:38:07.984 So make sure to review all the code 717 00:38:07.984 --> 00:38:11.110 and also compare it here 718 00:38:11.110 --> 00:38:13.260 with this diagram one more time 719 00:38:13.260 --> 00:38:16.700 so that you see which functions we call when 720 00:38:16.700 --> 00:38:19.095 and then also, how exactly the data flows 721 00:38:19.095 --> 00:38:21.670 between these different functions. 722 00:38:21.670 --> 00:38:24.060 And especially here in this view 723 00:38:24.060 --> 00:38:27.239 because I know that this can get a little bit confusing 724 00:38:27.239 --> 00:38:29.110 and so reviewing this 725 00:38:29.110 --> 00:38:31.340 is gonna be a very good idea, 726 00:38:31.340 --> 00:38:34.870 especially because we will use this so many times also 727 00:38:34.870 --> 00:38:36.220 in the other features. 728 00:38:36.220 --> 00:38:38.900 And so by then, you really must understand 729 00:38:38.900 --> 00:38:40.680 how all of this fits together 730 00:38:40.680 --> 00:38:43.060 because otherwise, it's gonna be very hard 731 00:38:43.060 --> 00:38:46.320 to follow the rest of the project. 732 00:38:46.320 --> 00:38:48.370 Okay, so take your time 733 00:38:48.370 --> 00:38:51.093 and only then move on to the next video.