Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,210 --> 00:00:02,800 Welcome back. 2 2 00:00:02,800 --> 00:00:04,860 So now that you know everything 3 3 00:00:04,860 --> 00:00:08,150 about the model-view-controller architecture 4 4 00:00:08,150 --> 00:00:12,150 and also how it's gonna be implemented in our project, 5 5 00:00:12,150 --> 00:00:15,660 let's now actually go do that in practice. 6 6 00:00:15,660 --> 00:00:18,430 And this is gonna be a long lecture, 7 7 00:00:18,430 --> 00:00:20,313 so let's get started. 8 8 00:00:21,970 --> 00:00:25,680 And let's start by creating the necessary new files 9 9 00:00:25,680 --> 00:00:28,603 so that we can then split up our code between them. 10 10 00:00:29,640 --> 00:00:33,093 So let's start by closing all of the folders here. 11 11 00:00:34,050 --> 00:00:35,770 And then inside of src 12 12 00:00:35,770 --> 00:00:39,780 and JavaScript, let's create a new file, 13 13 00:00:39,780 --> 00:00:42,643 which will be called model.js. 14 14 00:00:44,434 --> 00:00:45,700 And so this is basically going 15 15 00:00:45,700 --> 00:00:49,683 to be the module in which we write our entire model. 16 16 00:00:50,560 --> 00:00:52,790 Then we also need the view, 17 17 00:00:52,790 --> 00:00:54,400 or actually, the views 18 18 00:00:54,400 --> 00:00:56,840 because we will have multiple views. 19 19 00:00:56,840 --> 00:01:00,410 Basically one for each feature. 20 20 00:01:00,410 --> 00:01:03,600 So now we're working on displaying the recipe 21 21 00:01:03,600 --> 00:01:06,320 and so this one is going to be called recipeView. 22 22 00:01:07,970 --> 00:01:10,653 But actually, let's create a new folder here 23 23 00:01:10,653 --> 00:01:15,653 for the views in order not to clutter our JavaScript folder. 24 24 00:01:18,100 --> 00:01:19,040 All right? 25 25 00:01:19,040 --> 00:01:24,040 And so then in here, let's create recipeView.js. 26 26 00:01:26,330 --> 00:01:29,720 So we will have one big module here 27 27 00:01:29,720 --> 00:01:31,890 for all the controllers. 28 28 00:01:31,890 --> 00:01:35,370 Then one big file for the entire model. 29 29 00:01:35,370 --> 00:01:37,850 So for all the models basically. 30 30 00:01:37,850 --> 00:01:40,910 So for the recipe, for search, for bookmarks 31 31 00:01:40,910 --> 00:01:43,550 and all of that but for the views, 32 32 00:01:43,550 --> 00:01:47,520 we will have one module for each of the different views. 33 33 00:01:47,520 --> 00:01:49,747 And you'll understand why that makes sense 34 34 00:01:49,747 --> 00:01:53,140 as we keep developing our application. 35 35 00:01:53,140 --> 00:01:56,070 And probably the first reason that comes to mind 36 36 00:01:56,070 --> 00:01:59,510 is that the views are simply much bigger. 37 37 00:01:59,510 --> 00:02:04,510 And so we don't want a file, which like 500 lines of code. 38 38 00:02:04,680 --> 00:02:07,430 We could, of course, also split up the model 39 39 00:02:07,430 --> 00:02:11,240 and the controller and probably many people would do that 40 40 00:02:11,240 --> 00:02:14,500 but I don't want to have to mess with a lot 41 41 00:02:14,500 --> 00:02:16,360 of files here in this project. 42 42 00:02:16,360 --> 00:02:19,663 That would just make it very confusing for you to follow. 43 43 00:02:21,060 --> 00:02:23,340 So let's actually take a look again here 44 44 00:02:23,340 --> 00:02:24,690 at this architecture 45 45 00:02:24,690 --> 00:02:27,100 that I showed you in the last video. 46 46 00:02:27,100 --> 00:02:30,770 And here, we will actually start with the model. 47 47 00:02:30,770 --> 00:02:34,420 So again, we're going to have a big state object, 48 48 00:02:34,420 --> 00:02:38,270 which then inside will contain an object for recipe, 49 49 00:02:38,270 --> 00:02:40,670 search and bookmarks. 50 50 00:02:40,670 --> 00:02:43,580 And now we will just start with the recipe 51 51 00:02:43,580 --> 00:02:45,760 and then there will be a function 52 52 00:02:45,760 --> 00:02:48,420 for loading the recipe, right? 53 53 00:02:48,420 --> 00:02:50,560 And so then that function will then be called 54 54 00:02:50,560 --> 00:02:53,610 by controlRecipes, which kind of sits 55 55 00:02:53,610 --> 00:02:56,000 between loading the recipe 56 56 00:02:56,000 --> 00:02:59,420 and then rendering it using the view. 57 57 00:02:59,420 --> 00:03:02,140 So remember that the controller kind of sits 58 58 00:03:02,140 --> 00:03:04,510 between model and the view 59 59 00:03:04,510 --> 00:03:06,293 so it acts like a bridge. 60 60 00:03:07,260 --> 00:03:10,880 All right, and let's actually keep it open here 61 61 00:03:10,880 --> 00:03:13,223 and close all of these others. 62 62 00:03:14,460 --> 00:03:16,090 And so here in our model, 63 63 00:03:16,090 --> 00:03:20,910 let's simply create that state object 64 64 00:03:22,130 --> 00:03:24,860 and then in there we have the recipe, 65 65 00:03:24,860 --> 00:03:28,450 which in turn, is also an empty object. 66 66 00:03:28,450 --> 00:03:30,640 At least at the beginning. 67 67 00:03:30,640 --> 00:03:34,950 And then we will export this state 68 68 00:03:34,950 --> 00:03:38,070 so that we can then use it in the controller. 69 69 00:03:38,070 --> 00:03:40,740 And let's put them here just like in the diagram. 70 70 00:03:40,740 --> 00:03:43,193 Model, controller and view. 71 71 00:03:44,440 --> 00:03:45,630 Okay? 72 72 00:03:45,630 --> 00:03:48,070 So we're exporting the state from here 73 73 00:03:48,070 --> 00:03:51,713 and now let's also create that loadRecipe function. 74 74 00:03:53,050 --> 00:03:54,720 And of course, we also export it 75 75 00:03:54,720 --> 00:03:56,723 so that we can use it in the controller. 76 76 00:03:59,350 --> 00:04:00,603 So loadRecipe. 77 77 00:04:01,681 --> 00:04:03,930 And this function will be the one responsible 78 78 00:04:03,930 --> 00:04:06,440 for actually fetching the recipe data 79 79 00:04:06,440 --> 00:04:09,040 from our Forkify API. 80 80 00:04:09,040 --> 00:04:11,403 And so this is going to be an async function. 81 81 00:04:13,380 --> 00:04:14,213 All right? 82 82 00:04:15,230 --> 00:04:18,800 And so now we can actually start grabbing some 83 83 00:04:18,800 --> 00:04:20,163 of the code from here. 84 84 00:04:22,180 --> 00:04:23,410 Okay? 85 85 00:04:23,410 --> 00:04:26,160 So as I said, basically the goal of this lecture 86 86 00:04:26,160 --> 00:04:28,540 is to refactor all the code here 87 87 00:04:28,540 --> 00:04:31,363 into the different parts of the architecture. 88 88 00:04:32,810 --> 00:04:33,950 Okay? 89 89 00:04:33,950 --> 00:04:36,290 So what here exactly is concerned 90 90 00:04:36,290 --> 00:04:38,603 with basically getting the data? 91 91 00:04:40,220 --> 00:04:42,300 So it starts here 92 92 00:04:42,300 --> 00:04:45,680 when we fetch the recipe from the API 93 93 00:04:45,680 --> 00:04:48,223 and then basically, it's all of this here. 94 94 00:04:49,270 --> 00:04:50,550 So all of this. 95 95 00:04:50,550 --> 00:04:51,663 So let's copy it. 96 96 00:04:53,570 --> 00:04:55,390 So rendering the spinner, of course, 97 97 00:04:55,390 --> 00:04:58,210 has nothing to do with the business logic 98 98 00:04:58,210 --> 00:05:00,940 but really, it is only presentation logic 99 99 00:05:00,940 --> 00:05:02,930 and so this one will eventually go 100 100 00:05:02,930 --> 00:05:03,803 into the view. 101 101 00:05:05,823 --> 00:05:07,560 And then here getting the ID, 102 102 00:05:07,560 --> 00:05:10,150 this is also not business logic. 103 103 00:05:10,150 --> 00:05:13,710 This is actually more about the application logic itself. 104 104 00:05:13,710 --> 00:05:16,720 So about making the application work. 105 105 00:05:16,720 --> 00:05:19,170 And so let's keep that part here. 106 106 00:05:19,170 --> 00:05:21,610 So again, I will just copy this 107 107 00:05:21,610 --> 00:05:24,743 or actually cut and put it here. 108 108 00:05:26,497 --> 00:05:29,837 And now we start getting these errors but nevermind. 109 109 00:05:31,210 --> 00:05:34,800 Probably, we should actually terminate our process here 110 110 00:05:34,800 --> 00:05:35,970 with Control + C 111 111 00:05:37,030 --> 00:05:39,363 so that we don't get errors all the time. 112 112 00:05:41,270 --> 00:05:42,380 Okay? 113 113 00:05:42,380 --> 00:05:45,580 Now we need to, of course, adjust this here a little bit. 114 114 00:05:45,580 --> 00:05:49,799 So this first part here makes sense, right? 115 115 00:05:49,799 --> 00:05:53,760 Now, we just need to get this ID from anywhere. 116 116 00:05:53,760 --> 00:05:55,580 So right now, we have no idea 117 117 00:05:55,580 --> 00:05:58,290 which ID we should actually fetch. 118 118 00:05:58,290 --> 00:05:59,980 And so it's probably a good idea 119 119 00:05:59,980 --> 00:06:03,890 to pass that ID into this function. 120 120 00:06:03,890 --> 00:06:05,400 So the controller is the one 121 121 00:06:05,400 --> 00:06:09,200 that will actually get that ID right here 122 122 00:06:09,200 --> 00:06:11,260 and so then when it calls the model, 123 123 00:06:11,260 --> 00:06:12,870 so the loadRecipe function, 124 124 00:06:12,870 --> 00:06:15,673 it can pass that ID into it. 125 125 00:06:17,357 --> 00:06:20,210 Then this part here can all stay the same 126 126 00:06:20,210 --> 00:06:21,934 and this as well. 127 127 00:06:21,934 --> 00:06:23,530 And this actually should now 128 128 00:06:23,530 --> 00:06:26,913 not be the recipe but state.recipe. 129 129 00:06:28,554 --> 00:06:31,693 And here we can just create a const from this. 130 130 00:06:35,362 --> 00:06:37,687 And here let's also log state.recipe. 131 131 00:06:39,800 --> 00:06:41,130 All right. 132 132 00:06:41,130 --> 00:06:45,930 So this function here is not going to return anything. 133 133 00:06:45,930 --> 00:06:49,430 All it will do is to change our state object. 134 134 00:06:49,430 --> 00:06:51,530 So this big state object, 135 135 00:06:51,530 --> 00:06:53,530 which will then contain the recipe 136 136 00:06:53,530 --> 00:06:55,260 and into which the controller 137 137 00:06:55,260 --> 00:06:58,103 will then grab and take the recipe out of there. 138 138 00:06:58,960 --> 00:07:00,650 And this is going to work 139 139 00:07:00,650 --> 00:07:02,440 because there is a live connection 140 140 00:07:02,440 --> 00:07:05,360 between the exports and the imports. 141 141 00:07:05,360 --> 00:07:06,870 Remember that? 142 142 00:07:06,870 --> 00:07:08,750 So when this state object here 143 143 00:07:08,750 --> 00:07:11,313 is going to get updated by loadRecipe, 144 144 00:07:12,150 --> 00:07:15,910 then that state is also updated in the controller, 145 145 00:07:15,910 --> 00:07:17,573 which imports the state. 146 146 00:07:18,530 --> 00:07:22,403 So let's now actually import all of that into here. 147 147 00:07:24,000 --> 00:07:25,993 So doing it here at the very top. 148 148 00:07:27,950 --> 00:07:30,520 So import and then from the model, 149 149 00:07:30,520 --> 00:07:33,190 we simply want to import everything. 150 150 00:07:33,190 --> 00:07:37,220 So we have a couple of named exports here. 151 151 00:07:37,220 --> 00:07:39,680 So again, there are named exports 152 152 00:07:39,680 --> 00:07:41,350 and default exports 153 153 00:07:41,350 --> 00:07:43,480 and these ones are named exports 154 154 00:07:43,480 --> 00:07:46,520 because we explicitly gave them a name 155 155 00:07:46,520 --> 00:07:48,964 and so here we can simply import everything 156 156 00:07:48,964 --> 00:07:51,843 and then call it the model. 157 157 00:07:53,570 --> 00:07:55,090 And so here in the controller, 158 158 00:07:55,090 --> 00:07:59,190 we will then end up with model.state 159 159 00:07:59,190 --> 00:08:00,240 and model.loadRecipe. 160 160 00:08:01,840 --> 00:08:02,673 Remember that? 161 161 00:08:02,673 --> 00:08:06,713 And then here, the current folder, model.js. 162 162 00:08:09,010 --> 00:08:09,883 Okay. 163 163 00:08:12,660 --> 00:08:16,160 So let's go back here to loading the recipe 164 164 00:08:16,160 --> 00:08:19,990 and the spinner should probably be outside of here. 165 165 00:08:19,990 --> 00:08:23,010 And so here, now let's actually call the function. 166 166 00:08:23,010 --> 00:08:26,040 So let's call model.loadRecipe 167 167 00:08:28,510 --> 00:08:30,283 and then pass in the ID. 168 168 00:08:31,300 --> 00:08:33,250 And this loadRecipe function 169 169 00:08:33,250 --> 00:08:36,000 is an async function and therefore, 170 170 00:08:36,000 --> 00:08:38,370 it is going to return a promise. 171 171 00:08:38,370 --> 00:08:39,440 Remember? 172 172 00:08:39,440 --> 00:08:43,290 And so therefore, here we have to avoid that promise 173 173 00:08:43,290 --> 00:08:46,130 before we can move on in the next step here 174 174 00:08:46,130 --> 00:08:49,183 in the execution of this async function. 175 175 00:08:50,050 --> 00:08:52,949 And so you see, this is exactly the situation 176 176 00:08:52,949 --> 00:08:56,903 of one async function calling another async function 177 177 00:08:56,903 --> 00:09:00,810 that we already studied in one of the previous sections. 178 178 00:09:00,810 --> 00:09:02,040 Remember that? 179 179 00:09:02,040 --> 00:09:04,970 And so again, it is really, really important 180 180 00:09:04,970 --> 00:09:07,460 to keep in mind that an async function 181 181 00:09:07,460 --> 00:09:09,640 will return a promise 182 182 00:09:09,640 --> 00:09:11,160 that we then need to handle 183 183 00:09:11,160 --> 00:09:13,900 whenever we call that async function. 184 184 00:09:13,900 --> 00:09:16,900 At least, if we want to get some result out of it 185 185 00:09:16,900 --> 00:09:20,140 or if we kind of want to stop the execution 186 186 00:09:20,140 --> 00:09:23,870 in the function that is calling the other async function. 187 187 00:09:23,870 --> 00:09:25,020 All right? 188 188 00:09:25,020 --> 00:09:28,333 So again, really important to understand the mechanics 189 189 00:09:28,333 --> 00:09:30,453 of what is happening here. 190 190 00:09:32,370 --> 00:09:36,130 Now, here we should probably also have some error handling. 191 191 00:09:36,130 --> 00:09:37,693 So I forgot that part. 192 192 00:09:39,110 --> 00:09:40,000 So try 193 193 00:09:43,220 --> 00:09:44,793 and all the way down here, 194 194 00:09:47,354 --> 00:09:48,800 and then catch the error 195 195 00:09:52,370 --> 00:09:54,433 and then alert the error as well. 196 196 00:09:55,530 --> 00:09:56,393 All right. 197 197 00:09:58,420 --> 00:10:02,260 So remember that this loadRecipe function here 198 198 00:10:02,260 --> 00:10:04,290 does not return anything. 199 199 00:10:04,290 --> 00:10:07,410 And so therefore, we are not storing any result 200 200 00:10:07,410 --> 00:10:09,830 into any new variable. 201 201 00:10:09,830 --> 00:10:12,040 Instead, here we will get access 202 202 00:10:12,040 --> 00:10:14,410 to state.recipe. 203 203 00:10:14,410 --> 00:10:17,853 So to that state.recipe 204 204 00:10:17,853 --> 00:10:21,093 that is going to be manipulated right here. 205 205 00:10:22,070 --> 00:10:25,720 So you see that this loadRecipe function here clearly 206 206 00:10:25,720 --> 00:10:27,960 is not a pure function. 207 207 00:10:27,960 --> 00:10:29,850 So it has the side effect 208 208 00:10:29,850 --> 00:10:32,040 of manipulating this variable 209 209 00:10:32,040 --> 00:10:34,110 that is outside of it. 210 210 00:10:34,110 --> 00:10:35,690 And there would be different ways 211 211 00:10:35,690 --> 00:10:39,940 of avoiding that but that is just a lot of work 212 212 00:10:39,940 --> 00:10:42,810 and it's just not worth it here in this case. 213 213 00:10:42,810 --> 00:10:45,153 We are still trying to learn here, remember. 214 214 00:10:46,260 --> 00:10:48,860 But anyway, we now here have access 215 215 00:10:48,860 --> 00:10:53,860 to model.state.recipe. 216 216 00:10:54,250 --> 00:10:55,840 And so just in order to see 217 217 00:10:55,840 --> 00:10:57,610 if everything still works, 218 218 00:10:57,610 --> 00:11:01,006 let's store that recipe into the recipe variable 219 219 00:11:01,006 --> 00:11:03,263 so that we can then render it, 220 220 00:11:03,263 --> 00:11:06,463 using this code that we already have here. 221 221 00:11:07,960 --> 00:11:11,080 So just temporarily, recipe 222 222 00:11:12,300 --> 00:11:14,233 and then destructure it. 223 223 00:11:16,260 --> 00:11:17,450 So let's give it a save 224 224 00:11:18,640 --> 00:11:20,803 and let's restart our application here. 225 225 00:11:26,284 --> 00:11:27,117 All right. 226 226 00:11:29,970 --> 00:11:31,920 Let's reload here 227 227 00:11:31,920 --> 00:11:34,363 and you see that it's working. 228 228 00:11:36,340 --> 00:11:37,600 Right? 229 229 00:11:37,600 --> 00:11:41,900 So everything we implemented so far was correct 230 230 00:11:41,900 --> 00:11:44,720 and that's pretty important to keep checking 231 231 00:11:44,720 --> 00:11:47,930 when we are refactoring code like this. 232 232 00:11:47,930 --> 00:11:49,580 Okay? 233 233 00:11:49,580 --> 00:11:52,090 So that was actually the easy part, 234 234 00:11:52,090 --> 00:11:54,100 now comes the recipeView, 235 235 00:11:54,100 --> 00:11:57,400 which will then contain basically all the rest 236 236 00:11:57,400 --> 00:11:59,093 of the code that we have here. 237 237 00:11:59,950 --> 00:12:04,250 So let's go here and set the view up. 238 238 00:12:04,250 --> 00:12:06,796 So the view is going to be a class 239 239 00:12:06,796 --> 00:12:09,680 and in this case called RecipeView. 240 240 00:12:11,810 --> 00:12:13,730 And we do this because later, 241 241 00:12:13,730 --> 00:12:16,740 we will also have a parent class called View, 242 242 00:12:16,740 --> 00:12:18,670 which will contain a couple of methods 243 243 00:12:18,670 --> 00:12:21,130 that all the views should inherit. 244 244 00:12:21,130 --> 00:12:23,070 And so using classes makes all 245 245 00:12:23,070 --> 00:12:25,620 of this very simple to implement. 246 246 00:12:25,620 --> 00:12:29,390 Also, we want each view to have a couple of private methods 247 247 00:12:29,390 --> 00:12:32,920 and properties and so classes makes this really easy 248 248 00:12:32,920 --> 00:12:35,050 to implement again. 249 249 00:12:35,050 --> 00:12:37,540 And just in general, I feel that classes 250 250 00:12:37,540 --> 00:12:40,290 are really the right way to go here. 251 251 00:12:40,290 --> 00:12:42,290 And again, it will make even more sense 252 252 00:12:42,290 --> 00:12:45,823 once we start to add the parent class of view. 253 253 00:12:46,680 --> 00:12:49,160 But anyway, I mentioned that I want each 254 254 00:12:49,160 --> 00:12:52,720 of these classes to have a couple of private properties 255 255 00:12:52,720 --> 00:12:55,273 and one of them is going to be the parentElement. 256 256 00:12:56,920 --> 00:13:01,920 So parentElement, and let's right away set the parentElement 257 257 00:13:02,742 --> 00:13:07,467 to the recipe container. 258 258 00:13:09,050 --> 00:13:12,370 So basically, to this element, all right? 259 259 00:13:12,370 --> 00:13:14,540 Because this will then make it really easy 260 260 00:13:14,540 --> 00:13:16,350 to render the spinner 261 261 00:13:16,350 --> 00:13:18,960 and to render success or error messages 262 262 00:13:18,960 --> 00:13:21,683 or to render, of course, the recipe itself. 263 263 00:13:23,620 --> 00:13:27,520 So if each of the views has this parentElement property, 264 264 00:13:27,520 --> 00:13:32,200 then it will be really easy to do all of those tasks 265 265 00:13:32,200 --> 00:13:34,260 and again, that will become really clear 266 266 00:13:34,260 --> 00:13:36,653 once we start adding more and more views. 267 267 00:13:37,490 --> 00:13:39,820 But now the next thing I want to do 268 268 00:13:39,820 --> 00:13:43,140 is to actually export something from this module. 269 269 00:13:43,140 --> 00:13:45,750 So of course, we have to export something 270 270 00:13:45,750 --> 00:13:48,200 from this view so that the controller 271 271 00:13:48,200 --> 00:13:50,020 can then use it. 272 272 00:13:50,020 --> 00:13:53,700 Now, what are we going to export from this view? 273 273 00:13:53,700 --> 00:13:55,560 So we might export, of course, 274 274 00:13:55,560 --> 00:13:58,990 the entire class like this 275 275 00:13:58,990 --> 00:14:00,890 and so then here in the controller, 276 276 00:14:00,890 --> 00:14:03,310 we would have to import that class 277 277 00:14:03,310 --> 00:14:06,550 and create a new object out of that class. 278 278 00:14:06,550 --> 00:14:11,510 So basically, create a new RecipeView object, right? 279 279 00:14:11,510 --> 00:14:13,020 However, in that situation, 280 280 00:14:13,020 --> 00:14:14,117 it might be possible 281 281 00:14:14,117 --> 00:14:16,740 to create more that one view 282 282 00:14:16,740 --> 00:14:19,100 and we would never want that. 283 283 00:14:19,100 --> 00:14:21,650 Also, that would add unnecessary work 284 284 00:14:21,650 --> 00:14:24,130 to the controller, which we basically want 285 285 00:14:24,130 --> 00:14:26,570 to keep as simple as possible. 286 286 00:14:26,570 --> 00:14:28,809 And so in order to avoid all that, 287 287 00:14:28,809 --> 00:14:31,670 we will already create the object here 288 288 00:14:31,670 --> 00:14:34,660 and then export that object. 289 289 00:14:34,660 --> 00:14:37,310 And so like this, no one from the outside 290 290 00:14:37,310 --> 00:14:40,407 of this class here will have access to anything, 291 291 00:14:40,407 --> 00:14:42,793 except for the object. 292 292 00:14:44,720 --> 00:14:48,600 So what we will do is to export default 293 293 00:14:48,600 --> 00:14:50,360 and then a new RecipeView. 294 294 00:14:54,060 --> 00:14:55,020 All right? 295 295 00:14:55,020 --> 00:14:57,090 And that's actually it. 296 296 00:14:57,090 --> 00:14:59,440 So we don't pass any data in 297 297 00:14:59,440 --> 00:15:02,693 and so therefore, we don't need any constructor even. 298 298 00:15:05,800 --> 00:15:06,633 Okay? 299 299 00:15:06,633 --> 00:15:09,273 And then here all we do is import 300 300 00:15:09,273 --> 00:15:12,033 and here we then can give it any name. 301 301 00:15:13,020 --> 00:15:14,920 So I'm calling it recipeView 302 302 00:15:14,920 --> 00:15:17,902 because I think that's what makes most sense. 303 303 00:15:17,902 --> 00:15:22,902 And then views and then recipeView.js. 304 304 00:15:26,260 --> 00:15:29,390 Now, how do we then actually pass any data 305 305 00:15:29,390 --> 00:15:31,340 into the recipeView? 306 306 00:15:31,340 --> 00:15:34,159 Because if we're not creating the new object ourselves, 307 307 00:15:34,159 --> 00:15:36,450 then we cannot pass any data 308 308 00:15:36,450 --> 00:15:39,115 in like for the constructor, right? 309 309 00:15:39,115 --> 00:15:44,115 So we cannot pass any data into this RecipeView, 310 310 00:15:44,500 --> 00:15:47,940 well, because we're creating that object right here 311 311 00:15:47,940 --> 00:15:51,320 in the RecipeView module already. 312 312 00:15:51,320 --> 00:15:53,948 But actually, I did that on purpose 313 313 00:15:53,948 --> 00:15:58,948 so that we can create a very nice method called render. 314 314 00:15:59,326 --> 00:16:02,220 So what I will want to do here, 315 315 00:16:02,220 --> 00:16:04,180 and let me already write it here 316 316 00:16:04,180 --> 00:16:05,993 even before having the method. 317 317 00:16:07,090 --> 00:16:12,090 So what I will want to do is to call recipeView.render. 318 318 00:16:14,070 --> 00:16:17,020 And then here all we do is to pass in the data, 319 319 00:16:17,020 --> 00:16:20,937 which will be model.state.recipe. 320 320 00:16:23,300 --> 00:16:25,750 And this method here called render 321 321 00:16:25,750 --> 00:16:28,690 is a very common name for methods, 322 322 00:16:28,690 --> 00:16:32,720 for example, in React, it is also called render. 323 323 00:16:32,720 --> 00:16:35,590 And so I think this is a nice name. 324 324 00:16:35,590 --> 00:16:39,200 It's really descriptive of what is going to happen. 325 325 00:16:39,200 --> 00:16:40,430 All right? 326 326 00:16:40,430 --> 00:16:44,330 So if we did export the entire class, 327 327 00:16:44,330 --> 00:16:48,647 then here we would have to do like const recipeView 328 328 00:16:50,610 --> 00:16:55,113 equal new RecipeView or something like that. 329 329 00:16:57,140 --> 00:17:01,470 And then here, we would have to pass in the data like this 330 330 00:17:01,470 --> 00:17:03,970 when we create the new recipe. 331 331 00:17:03,970 --> 00:17:06,526 And of course, this would also be possible 332 332 00:17:06,526 --> 00:17:09,700 but honestly, I like it better like this. 333 333 00:17:09,700 --> 00:17:12,590 So having this nice render method 334 334 00:17:12,590 --> 00:17:14,330 is a lot more descriptive 335 335 00:17:14,330 --> 00:17:17,813 and a lot cleaner and also for the reasons 336 336 00:17:17,813 --> 00:17:20,433 that I explained previously already. 337 337 00:17:21,720 --> 00:17:24,240 Now, anyway, this render method here 338 338 00:17:24,240 --> 00:17:26,400 will now accept this data. 339 339 00:17:26,400 --> 00:17:29,093 It will then store it into the object. 340 340 00:17:31,810 --> 00:17:35,620 So let's add the public render method. 341 341 00:17:35,620 --> 00:17:39,293 So this is, of course, part of the public API. 342 342 00:17:40,800 --> 00:17:42,660 So this receives data 343 343 00:17:42,660 --> 00:17:46,040 and will then set this.#data 344 344 00:17:47,600 --> 00:17:50,040 to the data it just received. 345 345 00:17:50,040 --> 00:17:52,913 So we need to declare that up here. 346 346 00:17:55,260 --> 00:17:57,400 And so this render method here 347 347 00:17:57,400 --> 00:17:59,030 and these two properties 348 348 00:17:59,030 --> 00:18:00,840 are something that all the views 349 349 00:18:00,840 --> 00:18:03,000 are going to have in common. 350 350 00:18:03,000 --> 00:18:05,941 And this will be really beautiful to work with 351 351 00:18:05,941 --> 00:18:07,730 as you will see. 352 352 00:18:07,730 --> 00:18:11,280 But now, let's actually do something with this data, 353 353 00:18:11,280 --> 00:18:13,203 which is to actually render it. 354 354 00:18:14,530 --> 00:18:16,130 So basically what we want now 355 355 00:18:16,130 --> 00:18:18,110 is to take all of this code 356 356 00:18:19,564 --> 00:18:22,423 and cut it from here. 357 357 00:18:25,190 --> 00:18:26,713 And put it into our view. 358 358 00:18:27,690 --> 00:18:29,180 Okay? 359 359 00:18:29,180 --> 00:18:32,340 Now, we will actually not put it into the render method 360 360 00:18:32,340 --> 00:18:36,150 because again, this method will later be common 361 361 00:18:36,150 --> 00:18:37,720 to all the views. 362 362 00:18:37,720 --> 00:18:39,660 So to all the classes. 363 363 00:18:39,660 --> 00:18:44,500 However, each view will, of course, render different HTML. 364 364 00:18:44,500 --> 00:18:46,616 And so we will simply have a method 365 365 00:18:46,616 --> 00:18:48,727 that generates that HTML 366 366 00:18:48,727 --> 00:18:53,727 so that the render method can then render that HTML. 367 367 00:18:53,793 --> 00:18:57,263 So if that sounds confusing, let me write it in code. 368 368 00:18:58,440 --> 00:19:02,170 So generateMarkup. 369 369 00:19:02,170 --> 00:19:05,440 And so this is going to be a private method 370 370 00:19:05,440 --> 00:19:07,550 and since we're using Babel here, 371 371 00:19:07,550 --> 00:19:10,970 I can already use this syntax here. 372 372 00:19:14,980 --> 00:19:17,860 So pasting the code here 373 373 00:19:19,770 --> 00:19:23,580 and so this is going to generate this Markup variable 374 374 00:19:23,580 --> 00:19:27,363 and we can actually immediately return that from here. 375 375 00:19:28,640 --> 00:19:29,473 Okay? 376 376 00:19:30,310 --> 00:19:32,865 Now, this is not going to do anything yet 377 377 00:19:32,865 --> 00:19:37,280 because what is recipe here in this case? 378 378 00:19:37,280 --> 00:19:38,700 It's nothing, right? 379 379 00:19:38,700 --> 00:19:40,273 It's not defined at all. 380 380 00:19:41,450 --> 00:19:45,480 Now, in this case, where is this data actually? 381 381 00:19:45,480 --> 00:19:49,983 Well, it is in this.#data, right? 382 382 00:19:51,290 --> 00:19:52,797 So why's that? 383 383 00:19:52,797 --> 00:19:54,970 So let's take a look at our controller 384 384 00:19:56,090 --> 00:19:57,840 and let's start from the beginning. 385 385 00:19:58,890 --> 00:20:01,610 So the recipe is loaded here 386 386 00:20:01,610 --> 00:20:06,073 and then that will store it into the state object, right? 387 387 00:20:06,933 --> 00:20:09,143 Here we don't need that anymore. 388 388 00:20:10,120 --> 00:20:14,190 Then here we take model.state.recipe, 389 389 00:20:14,190 --> 00:20:18,120 which is that data that we just received here in step one 390 390 00:20:18,120 --> 00:20:23,120 and then that data is passed into the render method, right? 391 391 00:20:23,220 --> 00:20:26,050 And so render method then takes that data 392 392 00:20:26,050 --> 00:20:28,923 and stores it inside of this.#data. 393 393 00:20:29,890 --> 00:20:31,810 And so this is so that we can then use 394 394 00:20:31,810 --> 00:20:33,706 that data all over the place 395 395 00:20:33,706 --> 00:20:35,693 inside of this object. 396 396 00:20:37,890 --> 00:20:41,530 And by the way, this is exactly what we have here 397 397 00:20:41,530 --> 00:20:43,710 in this architecture diagram. 398 398 00:20:43,710 --> 00:20:45,273 So inside of controlRecipes, 399 399 00:20:47,477 --> 00:20:49,683 the loadRecipe function is called, 400 400 00:20:49,683 --> 00:20:53,380 then the recipe data foes into the state 401 401 00:20:53,380 --> 00:20:55,400 and then that data passes 402 402 00:20:55,400 --> 00:20:58,570 right through the controller basically 403 403 00:20:58,570 --> 00:21:01,270 and goes into the render method, 404 404 00:21:01,270 --> 00:21:04,293 which then in turn, calls generateMarkup. 405 405 00:21:05,400 --> 00:21:08,060 So you see, we already have many things 406 406 00:21:08,060 --> 00:21:09,760 here implemented here already, 407 407 00:21:09,760 --> 00:21:12,150 like data and parentElement, 408 408 00:21:12,150 --> 00:21:14,701 we're just missing some small parts 409 409 00:21:14,701 --> 00:21:16,913 but we are going to get there. 410 410 00:21:17,770 --> 00:21:19,830 But now what we were doing here 411 411 00:21:19,830 --> 00:21:22,610 is to discuss where this recipe data 412 412 00:21:22,610 --> 00:21:24,810 is actually located right now. 413 413 00:21:24,810 --> 00:21:27,253 And we came to the conclusion that it is in this.#data. 414 414 00:21:29,480 --> 00:21:31,160 So I will copy it 415 415 00:21:31,160 --> 00:21:36,160 and then we need to replace all the recipe. here with that. 416 416 00:21:38,780 --> 00:21:41,094 So I'm hitting Command + D. 417 417 00:21:41,094 --> 00:21:44,193 So for you, that should be Control + D. 418 418 00:21:46,290 --> 00:21:49,210 And then let me paste that dot 419 419 00:21:50,180 --> 00:21:51,573 and then that's it. 420 420 00:21:53,430 --> 00:21:54,910 All right? 421 421 00:21:54,910 --> 00:21:56,560 Then down here, we have this code, 422 422 00:21:56,560 --> 00:21:58,820 which is not supposed to be here 423 423 00:21:58,820 --> 00:22:00,880 because all this function does 424 424 00:22:00,880 --> 00:22:03,560 is to return an HTML string. 425 425 00:22:03,560 --> 00:22:05,400 And it's going to be the render method 426 426 00:22:05,400 --> 00:22:09,060 that will be responsible for then actually putting 427 427 00:22:09,060 --> 00:22:11,810 that HTML onto the page. 428 428 00:22:11,810 --> 00:22:15,590 Now, okay. 429 429 00:22:15,590 --> 00:22:18,970 So here, let's say that the markup 430 430 00:22:18,970 --> 00:22:21,857 is this.#generateMarkup. 431 431 00:22:28,350 --> 00:22:30,960 Well, this is probably something that's coming 432 432 00:22:30,960 --> 00:22:33,683 from Babel here. 433 433 00:22:35,130 --> 00:22:36,543 Not really sure why. 434 434 00:22:38,240 --> 00:22:41,720 But apparently, VS Code doesn't like this yet. 435 435 00:22:41,720 --> 00:22:44,120 Ah, we're still missing the dot here, of course. 436 436 00:22:45,090 --> 00:22:47,090 Now it appears to be working. 437 437 00:22:47,090 --> 00:22:49,370 And of course, we've still got some errors here 438 438 00:22:49,370 --> 00:22:51,790 but nevermind about that. 439 439 00:22:51,790 --> 00:22:54,020 We are still refactoring. 440 440 00:22:54,020 --> 00:22:55,830 So we have our markup. 441 441 00:22:55,830 --> 00:22:57,853 Now we need to put it on the page. 442 442 00:22:58,940 --> 00:23:03,530 So again, we need to start by clearing the parentElement 443 443 00:23:03,530 --> 00:23:08,280 and actually, let's create another small method for that. 444 444 00:23:08,280 --> 00:23:11,780 So just to get in the habit of abstracting some code 445 445 00:23:13,520 --> 00:23:15,970 and so now this is where our parentElement 446 446 00:23:15,970 --> 00:23:17,240 will come into play 447 447 00:23:18,730 --> 00:23:20,660 'cause now we can say 448 448 00:23:20,660 --> 00:23:22,670 this.#parentElement.innerHTML 449 449 00:23:26,650 --> 00:23:27,923 and set it to empty. 450 450 00:23:29,010 --> 00:23:30,310 Right? 451 451 00:23:30,310 --> 00:23:32,330 And so this method here 452 452 00:23:32,330 --> 00:23:34,780 will be usable for all the views 453 453 00:23:34,780 --> 00:23:36,390 as long as all the views 454 454 00:23:36,390 --> 00:23:40,800 have a parentElement property like this one. 455 455 00:23:40,800 --> 00:23:41,780 Right? 456 456 00:23:41,780 --> 00:23:44,890 So all of this will become really reusable 457 457 00:23:44,890 --> 00:23:49,576 as you will in one of the future lectures. 458 458 00:23:49,576 --> 00:23:53,033 So here we now can then call that. 459 459 00:23:56,722 --> 00:23:57,710 And then to finish, 460 460 00:23:57,710 --> 00:24:01,710 we can finally render that HTML to the page. 461 461 00:24:01,710 --> 00:24:03,150 And so here, once again, 462 462 00:24:03,150 --> 00:24:06,360 we can now use this.#parentElement 463 463 00:24:08,540 --> 00:24:11,900 and then insert that HTML there. 464 464 00:24:11,900 --> 00:24:13,120 Okay. 465 465 00:24:13,120 --> 00:24:16,323 So this might already be working actually. 466 466 00:24:17,420 --> 00:24:20,600 So all of this here looks good to me. 467 467 00:24:20,600 --> 00:24:22,750 Let's take a look at the controller. 468 468 00:24:22,750 --> 00:24:26,410 And you see that this is now a really nice 469 469 00:24:26,410 --> 00:24:30,620 and small function here already, right? 470 470 00:24:30,620 --> 00:24:34,013 Now, this one, we actually want to call it controlRecipes. 471 471 00:24:35,490 --> 00:24:37,163 So let's replace it everywhere. 472 472 00:24:38,420 --> 00:24:39,253 controlRecipes. 473 473 00:24:42,280 --> 00:24:46,713 So that's the name that I have here in the diagram. 474 474 00:24:47,800 --> 00:24:49,240 Okay? 475 475 00:24:49,240 --> 00:24:51,010 And so now what we're missing 476 476 00:24:51,010 --> 00:24:55,593 is only to export the renderSpinner also into the view. 477 477 00:24:56,440 --> 00:24:57,480 So this one, of course, 478 478 00:24:57,480 --> 00:25:02,080 also has nothing to do with the controller 479 479 00:25:02,080 --> 00:25:03,773 and so it belongs in the view. 480 480 00:25:08,930 --> 00:25:10,500 So of course, not a function 481 481 00:25:10,500 --> 00:25:15,370 but a method and this one will also be a public method 482 482 00:25:15,370 --> 00:25:18,930 so that the controller can then call this method here 483 483 00:25:18,930 --> 00:25:20,823 as it starts fetching the data. 484 484 00:25:21,730 --> 00:25:22,860 Okay? 485 485 00:25:22,860 --> 00:25:23,950 And now here again, 486 486 00:25:23,950 --> 00:25:28,260 we have the beauty of the parentElement already being 487 487 00:25:28,260 --> 00:25:30,143 inside of the object. 488 488 00:25:32,250 --> 00:25:34,760 So this one we can simply delete 489 489 00:25:34,760 --> 00:25:39,213 and here we can replace it with this.#parentElement. 490 490 00:25:44,050 --> 00:25:45,250 Now, right. 491 491 00:25:45,250 --> 00:25:48,086 Next up, I'm seeing that this icons variable 492 492 00:25:48,086 --> 00:25:51,713 is not going to be defined anywhere in this module. 493 493 00:25:52,930 --> 00:25:56,323 So we will need to grab that from here. 494 494 00:25:58,280 --> 00:26:00,080 So you'll see that here we have the icons 495 495 00:26:00,080 --> 00:26:04,490 and we don't need them here anymore at least. 496 496 00:26:04,490 --> 00:26:07,163 So now we need them right here. 497 497 00:26:11,510 --> 00:26:12,580 And now what we need to do 498 498 00:26:12,580 --> 00:26:16,280 is to then call this renderSpinner method right here. 499 499 00:26:22,060 --> 00:26:24,360 So that's going to be recipeView.renderSpinner 500 500 00:26:27,270 --> 00:26:30,330 and here again, we no longer need to pass 501 501 00:26:30,330 --> 00:26:32,550 in the parentElement. 502 502 00:26:32,550 --> 00:26:35,410 And just watch how beautiful this is. 503 503 00:26:35,410 --> 00:26:39,730 So we have recipeView and then renderSpinner 504 504 00:26:39,730 --> 00:26:40,940 and we already know 505 505 00:26:40,940 --> 00:26:43,702 that this will then automatically render the spinner 506 506 00:26:43,702 --> 00:26:45,912 on the recipeView. 507 507 00:26:45,912 --> 00:26:49,400 And the same is later going to happen with other views. 508 508 00:26:49,400 --> 00:26:51,910 For example, with the bookmarks view. 509 509 00:26:51,910 --> 00:26:55,970 We will also have a renderSpinner on the bookmarks view 510 510 00:26:55,970 --> 00:26:58,470 and it's going to work the exact same way. 511 511 00:26:58,470 --> 00:27:00,540 And the same with render. 512 512 00:27:00,540 --> 00:27:03,800 So all we have to do is call these same methods then 513 513 00:27:03,800 --> 00:27:05,200 on all the views 514 514 00:27:05,200 --> 00:27:08,053 and they will then simply act on whatever view 515 515 00:27:08,053 --> 00:27:11,430 that we are calling them, right? 516 516 00:27:11,430 --> 00:27:13,650 And that works so nice 517 517 00:27:13,650 --> 00:27:16,360 because we have this parentElement here 518 518 00:27:16,360 --> 00:27:18,273 and also this data property. 519 519 00:27:19,500 --> 00:27:23,660 So I think that this is a really nice architecture 520 520 00:27:23,660 --> 00:27:27,310 and so let's now actually see if this works. 521 521 00:27:27,310 --> 00:27:30,750 So let's reload this here. 522 522 00:27:30,750 --> 00:27:32,960 And here we have some errors. 523 523 00:27:32,960 --> 00:27:35,944 So apparently, if there is a really big error, 524 524 00:27:35,944 --> 00:27:39,590 then Parcel will let us know about that. 525 525 00:27:39,590 --> 00:27:42,170 And in this case, the problem is that it failed 526 526 00:27:42,170 --> 00:27:43,833 to resolve this URL. 527 527 00:27:45,410 --> 00:27:47,290 And that actually makes sense 528 528 00:27:47,290 --> 00:27:51,101 because this view here is in a different folder. 529 529 00:27:51,101 --> 00:27:52,410 Right? 530 530 00:27:52,410 --> 00:27:55,750 So here we're only going one folder up 531 531 00:27:55,750 --> 00:27:57,580 and going up one folder from here 532 532 00:27:57,580 --> 00:28:00,480 will end up in the JavaScript folder. 533 533 00:28:00,480 --> 00:28:03,320 However, we want to go into images. 534 534 00:28:03,320 --> 00:28:05,483 So we need to go up one more level. 535 535 00:28:06,720 --> 00:28:07,623 So like this. 536 536 00:28:10,900 --> 00:28:11,890 Okay? 537 537 00:28:11,890 --> 00:28:14,850 So here we have apparently some bug. 538 538 00:28:14,850 --> 00:28:19,240 Let's just see if anything happens still on this event 539 539 00:28:19,240 --> 00:28:20,820 and it does. 540 540 00:28:20,820 --> 00:28:23,990 There's still some problem here maybe 541 541 00:28:23,990 --> 00:28:25,490 that has to do with the fact 542 542 00:28:25,490 --> 00:28:28,923 that we are using these private methods here. 543 543 00:28:29,920 --> 00:28:31,400 So let me change this here 544 544 00:28:31,400 --> 00:28:32,487 to this one. 545 545 00:28:34,130 --> 00:28:38,773 So right here, yeah. 546 546 00:28:40,270 --> 00:28:42,681 And let's also comment out this one 547 547 00:28:42,681 --> 00:28:45,513 and then we're not using any private methods anymore. 548 548 00:28:47,490 --> 00:28:50,663 However, that is apparently still not working. 549 549 00:28:51,751 --> 00:28:53,150 All right. 550 550 00:28:53,150 --> 00:28:57,803 So let's take a look here at our this.#data. 551 551 00:28:59,360 --> 00:29:03,423 So this.#data just to see what we get here. 552 552 00:29:07,550 --> 00:29:09,969 And so we see that apparently 553 553 00:29:09,969 --> 00:29:13,303 that method is not even being called. 554 554 00:29:14,440 --> 00:29:16,357 Ah, and I see the problem. 555 555 00:29:16,357 --> 00:29:19,170 I actually did not call it. 556 556 00:29:19,170 --> 00:29:22,110 So I didn't use the parenthesis, right? 557 557 00:29:22,110 --> 00:29:25,103 So what a stupid mistake. 558 558 00:29:27,480 --> 00:29:30,660 So let's roll back on all the changes I did, 559 559 00:29:30,660 --> 00:29:32,650 except, of course, for this one 560 560 00:29:32,650 --> 00:29:34,610 but here, probably all I need to do 561 561 00:29:34,610 --> 00:29:37,473 is to call these two methods. 562 562 00:29:39,300 --> 00:29:40,543 Ah, beautiful. 563 563 00:29:41,750 --> 00:29:42,770 So we're back. 564 564 00:29:42,770 --> 00:29:44,680 It's working now again. 565 565 00:29:44,680 --> 00:29:46,590 And it's working really nice, 566 566 00:29:46,590 --> 00:29:47,983 including the spinner. 567 567 00:29:50,700 --> 00:29:52,210 Okay? 568 568 00:29:52,210 --> 00:29:54,240 And so I think with this, 569 569 00:29:54,240 --> 00:29:57,430 we successfully refactored our entire code 570 570 00:29:57,430 --> 00:30:00,020 to this new architecture. 571 571 00:30:00,020 --> 00:30:01,940 Well, not the entire code actually. 572 572 00:30:01,940 --> 00:30:05,760 We're still missing this handler here 573 573 00:30:05,760 --> 00:30:08,430 and all of this part that is here. 574 574 00:30:08,430 --> 00:30:11,730 But don't worry about that for now, okay? 575 575 00:30:11,730 --> 00:30:13,430 We will have a separate lecture, 576 576 00:30:13,430 --> 00:30:16,460 which will talk about how we can handle events 577 577 00:30:16,460 --> 00:30:19,320 in this particular architecture. 578 578 00:30:19,320 --> 00:30:20,530 For now what matters 579 579 00:30:20,530 --> 00:30:23,422 is that this works just nicely. 580 580 00:30:23,422 --> 00:30:26,780 There's just one thing that I actually want to change 581 581 00:30:26,780 --> 00:30:30,700 but that has nothing to do with the architecture. 582 582 00:30:30,700 --> 00:30:34,270 So what I want to change is these numbers. 583 583 00:30:34,270 --> 00:30:36,180 So do you see here we have 0.5 584 584 00:30:37,189 --> 00:30:42,189 but in the real world, you will see this more like this. 585 585 00:30:42,980 --> 00:30:46,950 So like 1/2 tablespoon of brown sugar 586 586 00:30:46,950 --> 00:30:49,140 instead of 0.5. 587 587 00:30:49,140 --> 00:30:52,023 So this looks a lot nicer or this, for example, 588 588 00:30:52,023 --> 00:30:54,613 1 1/2 is a lot nicer than 1.5. 589 589 00:30:56,560 --> 00:30:57,640 And so for that, 590 590 00:30:57,640 --> 00:31:00,640 we are actually going to use an external library, 591 591 00:31:00,640 --> 00:31:03,373 which will very easily do this for us. 592 592 00:31:03,373 --> 00:31:05,130 Okay? 593 593 00:31:05,130 --> 00:31:07,707 And so I included this part so I could show you 594 594 00:31:07,707 --> 00:31:10,620 just how to do this. 595 595 00:31:10,620 --> 00:31:12,870 So let me just google it here. 596 596 00:31:12,870 --> 00:31:15,930 Npm fractional 597 597 00:31:15,930 --> 00:31:19,103 just so we can see what this package looks like. 598 598 00:31:20,080 --> 00:31:21,980 So if you google npm, 599 599 00:31:21,980 --> 00:31:26,020 then you will usually end up on npmjs.com 600 600 00:31:26,020 --> 00:31:29,260 and this will then contain like one page 601 601 00:31:29,260 --> 00:31:34,080 for each package that is on npm, all right? 602 602 00:31:34,080 --> 00:31:36,390 And so here what you see 603 603 00:31:36,390 --> 00:31:39,970 is that you can basically create new fractions based 604 604 00:31:39,970 --> 00:31:43,810 on numbers and then you can do all kinds of multiplications 605 605 00:31:43,810 --> 00:31:46,007 with them, like multiplying, dividing 606 606 00:31:46,007 --> 00:31:50,550 and in the end, converting them to a string. 607 607 00:31:50,550 --> 00:31:52,568 And so that's what we will do now. 608 608 00:31:52,568 --> 00:31:55,830 So we will convert each number to a fraction 609 609 00:31:55,830 --> 00:31:58,543 and then immediately convert them to a string. 610 610 00:31:59,620 --> 00:32:01,780 So this is how we install it. 611 611 00:32:01,780 --> 00:32:03,443 Let's just grab that. 612 612 00:32:04,570 --> 00:32:07,423 And then we need our terminal back. 613 613 00:32:09,650 --> 00:32:11,183 Let's add another one. 614 614 00:32:12,070 --> 00:32:13,523 So that's the plus sign. 615 615 00:32:16,250 --> 00:32:18,453 And this should be pretty fast hopefully. 616 616 00:32:21,080 --> 00:32:23,427 And so we need that here 617 617 00:32:23,427 --> 00:32:25,300 and so let's import 618 618 00:32:27,610 --> 00:32:30,370 fractional from 619 619 00:32:31,570 --> 00:32:33,003 and then fractional. 620 620 00:32:34,180 --> 00:32:35,380 And so here again you see 621 621 00:32:35,380 --> 00:32:37,930 that any libraries or any packages 622 622 00:32:37,930 --> 00:32:40,240 that we import from npm, 623 623 00:32:40,240 --> 00:32:43,060 we don't even have to specify any path. 624 624 00:32:43,060 --> 00:32:45,880 All we have to do is to write their names here 625 625 00:32:45,880 --> 00:32:50,200 and then here, we need also what they export. 626 626 00:32:50,200 --> 00:32:52,983 And let me see what they actually export. 627 627 00:32:53,990 --> 00:32:57,380 So it should be called fraction, okay? 628 628 00:32:57,380 --> 00:33:01,660 So this library actually exports something called fraction. 629 629 00:33:01,660 --> 00:33:03,488 And we can see that because here, 630 630 00:33:03,488 --> 00:33:08,488 it is importing the fractional library using require. 631 631 00:33:08,540 --> 00:33:12,500 And that is simply the old CommonJS way of importing, 632 632 00:33:12,500 --> 00:33:14,340 which I showed you earlier. 633 633 00:33:14,340 --> 00:33:16,116 And so that is one of the reasons 634 634 00:33:16,116 --> 00:33:17,950 why I show that to you 635 635 00:33:17,950 --> 00:33:20,920 because yeah, again you will see this all the time 636 636 00:33:20,920 --> 00:33:22,350 in the wild still 637 637 00:33:22,350 --> 00:33:24,550 because so many packages on npm 638 638 00:33:24,550 --> 00:33:25,993 are still using CommonJS. 639 639 00:33:28,060 --> 00:33:32,400 So let's import Fraction here. 640 640 00:33:32,400 --> 00:33:33,473 Actually like this. 641 641 00:33:35,040 --> 00:33:35,873 Okay? 642 642 00:33:35,873 --> 00:33:39,143 And let's just see if this actually does exist now. 643 643 00:33:44,140 --> 00:33:46,060 And yeah, it does. 644 644 00:33:46,060 --> 00:33:50,350 So actually, that's even Fraction inside of Fraction 645 645 00:33:50,350 --> 00:33:55,051 but anyway, let's now go ahead and use this actually 646 646 00:33:55,051 --> 00:33:58,163 so that it's in here. 647 647 00:33:59,010 --> 00:34:01,853 So here we now no longer simply want the quantity 648 648 00:34:01,853 --> 00:34:04,430 but we want the quantity converted 649 649 00:34:04,430 --> 00:34:05,943 to a fraction string. 650 650 00:34:07,430 --> 00:34:09,317 So according to the documentation, 651 651 00:34:09,317 --> 00:34:13,570 we have to say new Fraction 652 652 00:34:14,580 --> 00:34:18,663 and in this case, it's actually Fraction.Fraction. 653 653 00:34:19,760 --> 00:34:22,450 So again that's because here inside of Fraction 654 654 00:34:22,450 --> 00:34:26,780 is where the Fraction function is actually located. 655 655 00:34:26,780 --> 00:34:27,630 Okay? 656 656 00:34:27,630 --> 00:34:32,526 And here you could see that we have to then use new. 657 657 00:34:32,526 --> 00:34:35,460 Now, actually to make this a bit nicer, 658 658 00:34:35,460 --> 00:34:40,340 we can also use destructuring here right away. 659 659 00:34:40,340 --> 00:34:41,973 So we can do this. 660 660 00:34:45,600 --> 00:34:46,973 And if we now take a look, 661 661 00:34:48,660 --> 00:34:50,868 well, now we have this bug here. 662 662 00:34:50,868 --> 00:34:52,913 But nevermind. 663 663 00:34:55,740 --> 00:34:57,083 So let's just do this. 664 664 00:34:58,100 --> 00:35:01,600 And then call toString on that 665 665 00:35:01,600 --> 00:35:03,803 just like it said in the documentation. 666 666 00:35:06,290 --> 00:35:10,010 So you see that now as I destructured that fraction, 667 667 00:35:10,010 --> 00:35:12,180 it became the actual function. 668 668 00:35:12,180 --> 00:35:17,180 And yeah, here you see beautifully that it is now 669 669 00:35:17,331 --> 00:35:21,513 in this size or in this format of the fraction. 670 670 00:35:23,200 --> 00:35:25,100 And if I take a look at the other one, 671 671 00:35:25,100 --> 00:35:26,363 then the same as well. 672 672 00:35:27,260 --> 00:35:31,810 Now, this one doesn't look very beautiful but nevermind. 673 673 00:35:31,810 --> 00:35:34,140 So we cannot fix all of it 674 674 00:35:34,140 --> 00:35:38,440 but at least, this looks really cool now, right? 675 675 00:35:38,440 --> 00:35:43,030 And so this is when we reach for packages on npm. 676 676 00:35:43,030 --> 00:35:44,740 So when we need some functionality 677 677 00:35:44,740 --> 00:35:48,500 that we don't want to implement ourselves. 678 678 00:35:48,500 --> 00:35:49,410 I'm just going back here 679 679 00:35:49,410 --> 00:35:51,890 because I noticed some problem here, 680 680 00:35:51,890 --> 00:35:54,170 which was this one. 681 681 00:35:54,170 --> 00:35:58,550 And that was because previously here we had null. 682 682 00:35:58,550 --> 00:36:02,486 So there was no value for this cilantro. 683 683 00:36:02,486 --> 00:36:07,373 And so we should probably check if the number does exist. 684 684 00:36:09,460 --> 00:36:13,143 So we can say ing.quantity. 685 685 00:36:14,120 --> 00:36:16,739 If it exists, then do this. 686 686 00:36:16,739 --> 00:36:21,250 And if not, then simply put an empty string there 687 687 00:36:21,250 --> 00:36:22,536 and of course, now here. 688 688 00:36:22,536 --> 00:36:26,073 So that must be out here. 689 689 00:36:29,750 --> 00:36:33,033 Yep, now it's gone and it looks a lot nicer. 690 690 00:36:34,750 --> 00:36:36,100 All right. 691 691 00:36:36,100 --> 00:36:37,330 Now just to finish, 692 692 00:36:37,330 --> 00:36:40,960 I actually want to refactor this function here. 693 693 00:36:41,990 --> 00:36:43,320 So let me grab this 694 694 00:36:46,520 --> 00:36:51,207 and put it down here and call it generateMarkupIngredients 695 695 00:36:55,590 --> 00:36:56,823 or just Ingredient. 696 696 00:37:00,907 --> 00:37:01,950 Okay. 697 697 00:37:01,950 --> 00:37:05,183 And this will then receive the ingredient. 698 698 00:37:06,140 --> 00:37:06,973 Okay. 699 699 00:37:06,973 --> 00:37:10,090 And then here inside of the map, 700 700 00:37:10,090 --> 00:37:12,443 we can then simply call this. 701 701 00:37:15,580 --> 00:37:19,250 And let's copy it because these private methods, 702 702 00:37:19,250 --> 00:37:22,963 for some reason, VS Code doesn't really understand them yet. 703 703 00:37:24,460 --> 00:37:27,683 So right here. 704 704 00:37:29,290 --> 00:37:34,290 And so successfully refactored this part 705 705 00:37:34,664 --> 00:37:38,090 and so we are now done in this lecture 706 706 00:37:38,090 --> 00:37:41,063 where we also successfully refactored the entire code 707 707 00:37:41,063 --> 00:37:42,960 that we already had 708 708 00:37:42,960 --> 00:37:46,963 to the model-view-controller architecture. 709 709 00:37:48,330 --> 00:37:49,450 All right? 710 710 00:37:49,450 --> 00:37:51,610 So we're not done 100% 711 711 00:37:51,610 --> 00:37:54,170 but we've done a lot of work in this lecture 712 712 00:37:54,170 --> 00:37:57,540 and I really hope that you understood everything 713 713 00:37:57,540 --> 00:37:58,960 that we did here. 714 714 00:37:58,960 --> 00:38:02,560 So this was a really, really, really important lecture. 715 715 00:38:02,560 --> 00:38:06,010 So make sure that you understand everything that we did. 716 716 00:38:06,010 --> 00:38:07,984 So make sure to review all the code 717 717 00:38:07,984 --> 00:38:11,110 and also compare it here 718 718 00:38:11,110 --> 00:38:13,260 with this diagram one more time 719 719 00:38:13,260 --> 00:38:16,700 so that you see which functions we call when 720 720 00:38:16,700 --> 00:38:19,095 and then also, how exactly the data flows 721 721 00:38:19,095 --> 00:38:21,670 between these different functions. 722 722 00:38:21,670 --> 00:38:24,060 And especially here in this view 723 723 00:38:24,060 --> 00:38:27,239 because I know that this can get a little bit confusing 724 724 00:38:27,239 --> 00:38:29,110 and so reviewing this 725 725 00:38:29,110 --> 00:38:31,340 is gonna be a very good idea, 726 726 00:38:31,340 --> 00:38:34,870 especially because we will use this so many times also 727 727 00:38:34,870 --> 00:38:36,220 in the other features. 728 728 00:38:36,220 --> 00:38:38,900 And so by then, you really must understand 729 729 00:38:38,900 --> 00:38:40,680 how all of this fits together 730 730 00:38:40,680 --> 00:38:43,060 because otherwise, it's gonna be very hard 731 731 00:38:43,060 --> 00:38:46,320 to follow the rest of the project. 732 732 00:38:46,320 --> 00:38:48,370 Okay, so take your time 733 733 00:38:48,370 --> 00:38:51,093 and only then move on to the next video. 60959