1 00:00:01,050 --> 00:00:04,320 ‫So let's now split one huge components 2 00:00:04,320 --> 00:00:07,470 ‫into many small ones using the framework 3 00:00:07,470 --> 00:00:09,543 ‫that we just learned about. 4 00:00:11,190 --> 00:00:12,690 ‫Now, as always, to start 5 00:00:12,690 --> 00:00:17,190 ‫we need to get our starter files here from this folder. 6 00:00:17,190 --> 00:00:20,430 ‫So let's wrap these two 7 00:00:20,430 --> 00:00:24,320 ‫and then let's move back to our project folder. 8 00:00:24,320 --> 00:00:26,850 ‫And as always, I'm renaming it. 9 00:00:26,850 --> 00:00:31,850 ‫And then let's paste the new files right in here 10 00:00:32,010 --> 00:00:33,230 ‫into the source folder. 11 00:00:33,230 --> 00:00:35,610 ‫And then we need to replace these 12 00:00:35,610 --> 00:00:40,233 ‫and just get rid of some of this garbage that we have here. 13 00:00:43,060 --> 00:00:45,180 ‫All right, so as always 14 00:00:45,180 --> 00:00:47,820 ‫we just end up with index.js 15 00:00:47,820 --> 00:00:50,823 ‫index.CSS, and app.js. 16 00:00:51,690 --> 00:00:56,690 ‫Then we just grab all this and open it in VS code as always. 17 00:00:59,910 --> 00:01:01,653 ‫Close down this one. 18 00:01:03,330 --> 00:01:07,570 ‫And yeah, then we need to clean up this file here. 19 00:01:07,570 --> 00:01:11,130 ‫And so this is always a little bit of tedious work 20 00:01:11,130 --> 00:01:13,350 ‫but we just have to do it. 21 00:01:13,350 --> 00:01:15,183 ‫And actually that's already done. 22 00:01:16,110 --> 00:01:18,610 ‫You can take a look here at the CSS if you'd like 23 00:01:18,610 --> 00:01:20,259 ‫because there's actually a lot 24 00:01:20,259 --> 00:01:23,680 ‫of it to make this application here work 25 00:01:23,680 --> 00:01:26,280 ‫so to style that application. 26 00:01:26,280 --> 00:01:31,280 ‫But what matters most to us is of course this app.js. 27 00:01:31,290 --> 00:01:33,660 ‫So here we have this array of objects 28 00:01:33,660 --> 00:01:37,200 ‫that I talked about in the previous lecture here. 29 00:01:37,200 --> 00:01:39,690 ‫Then we have another array of objects 30 00:01:39,690 --> 00:01:42,050 ‫which is for this watch list. 31 00:01:42,050 --> 00:01:46,020 ‫And then here we have that huge component 32 00:01:46,020 --> 00:01:48,750 ‫that I was talking about. 33 00:01:48,750 --> 00:01:52,380 ‫So it has all this JSX inside. 34 00:01:52,380 --> 00:01:54,390 ‫So basically all of this 35 00:01:54,390 --> 00:01:56,850 ‫the entire application is now inside 36 00:01:56,850 --> 00:01:58,620 ‫of one component. 37 00:01:58,620 --> 00:01:59,580 ‫To prove that to you, 38 00:01:59,580 --> 00:02:02,490 ‫let's actually start this application here 39 00:02:02,490 --> 00:02:05,133 ‫because this one here is of course still the demo. 40 00:02:06,510 --> 00:02:10,020 ‫So let's open up our integrated terminal 41 00:02:10,020 --> 00:02:15,020 ‫that's slightly too big, and then NPM start. 42 00:02:16,740 --> 00:02:19,293 ‫So that should then open up a new tab in here. 43 00:02:20,330 --> 00:02:22,023 ‫And there it is. 44 00:02:23,250 --> 00:02:25,293 ‫So make this even smaller. 45 00:02:26,430 --> 00:02:28,680 ‫And yeah, so there is step up 46 00:02:28,680 --> 00:02:31,020 ‫and as I was saying in the first lecture 47 00:02:31,020 --> 00:02:35,910 ‫it does work here in terms of collecting these two lists 48 00:02:35,910 --> 00:02:38,190 ‫also writing something in here. 49 00:02:38,190 --> 00:02:39,630 ‫So all of that is working 50 00:02:39,630 --> 00:02:44,040 ‫and it's all working within this one huge component. 51 00:02:44,040 --> 00:02:47,130 ‫And so I thought that it was a nice exercise to 52 00:02:47,130 --> 00:02:50,670 ‫basically pretend that we're working on some team 53 00:02:50,670 --> 00:02:54,270 ‫and that one of our team members created this huge component 54 00:02:54,270 --> 00:02:58,110 ‫and now it's our task to take it and split it up 55 00:02:58,110 --> 00:03:01,050 ‫into small components that make it easy to work 56 00:03:01,050 --> 00:03:05,460 ‫with and well, which isn't this huge mess. 57 00:03:05,460 --> 00:03:07,860 ‫So let's use the framework that we learned 58 00:03:07,860 --> 00:03:10,473 ‫about in the previous lecture to do that. 59 00:03:11,370 --> 00:03:14,823 ‫So let's take a look at our JSX here, 60 00:03:15,750 --> 00:03:16,583 ‫and if you want, 61 00:03:16,583 --> 00:03:19,140 ‫you can of course pause the video and do that on your own 62 00:03:19,140 --> 00:03:21,633 ‫because there is a lot to unpack here. 63 00:03:22,650 --> 00:03:25,080 ‫So we have this nav bar here. 64 00:03:25,080 --> 00:03:28,610 ‫So this entire thing here is this nav element 65 00:03:28,610 --> 00:03:31,260 ‫and then we have this main part, 66 00:03:31,260 --> 00:03:32,990 ‫which is all of this. 67 00:03:32,990 --> 00:03:35,900 ‫Then inside the nav we have this box here 68 00:03:35,900 --> 00:03:40,083 ‫for this left side, which contains this list. 69 00:03:40,940 --> 00:03:42,510 ‫And then we have another box 70 00:03:42,510 --> 00:03:45,990 ‫on the right side which contains all of this 71 00:03:45,990 --> 00:03:48,240 ‫but we will take care of that later. 72 00:03:48,240 --> 00:03:51,210 ‫So for now, let's basically split up all 73 00:03:51,210 --> 00:03:55,110 ‫of this here into the NEF bar and into this main part. 74 00:03:55,110 --> 00:03:55,943 ‫So I think to start, 75 00:03:55,943 --> 00:03:58,850 ‫that's the best logical separation of the content 76 00:03:58,850 --> 00:04:03,210 ‫which is remember the first criteria that we talked about. 77 00:04:03,210 --> 00:04:06,020 ‫So those were logical, separation of content. 78 00:04:06,020 --> 00:04:08,070 ‫Second, reusability. 79 00:04:08,070 --> 00:04:11,040 ‫Third, responsibilities in complexity. 80 00:04:11,040 --> 00:04:14,020 ‫And fourth, the personal coding style. 81 00:04:14,020 --> 00:04:17,710 ‫So this here and the main content here 82 00:04:17,710 --> 00:04:20,370 ‫they really don't belong together. 83 00:04:20,370 --> 00:04:24,420 ‫And so that's a good idea then to create a component 84 00:04:24,420 --> 00:04:26,040 ‫for each of them. 85 00:04:26,040 --> 00:04:28,400 ‫So I'm cutting this code here 86 00:04:28,400 --> 00:04:31,570 ‫and I will actually now create these components here on top 87 00:04:31,570 --> 00:04:34,083 ‫otherwise I have to scroll too much. 88 00:04:35,820 --> 00:04:38,680 ‫So let's write function, NAF bar 89 00:04:40,500 --> 00:04:44,820 ‫and then return simply this, give it a safe. 90 00:04:44,820 --> 00:04:46,983 ‫And now it's complaining here. 91 00:04:47,880 --> 00:04:50,940 ‫So we now need to also move the state here 92 00:04:50,940 --> 00:04:52,170 ‫into this other component. 93 00:04:52,170 --> 00:04:55,810 ‫So this one here is depending on query and set query. 94 00:04:55,810 --> 00:04:59,490 ‫And so therefore we need to move that state right there. 95 00:04:59,490 --> 00:05:02,130 ‫And so actually having all the state here 96 00:05:02,130 --> 00:05:03,660 ‫was another great indicator 97 00:05:03,660 --> 00:05:07,890 ‫that this component here had way too many responsibilities. 98 00:05:07,890 --> 00:05:10,080 ‫So we have five pieces of state 99 00:05:10,080 --> 00:05:12,870 ‫and then these three derived states. 100 00:05:12,870 --> 00:05:14,550 ‫So that's way too much. 101 00:05:14,550 --> 00:05:16,203 ‫So let's just cut this here, 102 00:05:17,460 --> 00:05:19,290 ‫paste that here, 103 00:05:19,290 --> 00:05:21,180 ‫and here we also need the movies, 104 00:05:21,180 --> 00:05:24,633 ‫but I'll for now just replace this here with an X. 105 00:05:26,250 --> 00:05:28,130 ‫Okay, so now the nav bar is gone 106 00:05:28,130 --> 00:05:31,473 ‫because of course we haven't yet included it here. 107 00:05:32,440 --> 00:05:37,440 ‫And so let's do that. 108 00:05:38,850 --> 00:05:41,450 ‫And now, or up looks just like before. 109 00:05:41,450 --> 00:05:44,793 ‫And so now let's then grab all this other code, 110 00:05:46,050 --> 00:05:47,163 ‫all of this. 111 00:05:48,090 --> 00:05:52,370 ‫Cut it and put it into yet another component. 112 00:05:52,370 --> 00:05:55,730 ‫And this one, let's actually call it main. 113 00:05:55,730 --> 00:05:58,650 ‫And as we save it, it'll now complain 114 00:05:58,650 --> 00:06:02,103 ‫that it needs all of these states here. 115 00:06:03,180 --> 00:06:06,570 ‫So for now, let's just grab everything 116 00:06:06,570 --> 00:06:11,570 ‫and paste that here now, right? 117 00:06:14,880 --> 00:06:16,680 ‫And then well, 118 00:06:16,680 --> 00:06:18,510 ‫we just have to include of course, 119 00:06:18,510 --> 00:06:20,250 ‫that main right here. 120 00:06:20,250 --> 00:06:21,110 ‫And then after doing that, 121 00:06:21,110 --> 00:06:24,260 ‫the app should look just like before. 122 00:06:24,260 --> 00:06:26,850 ‫Well, for some reason it isn't 123 00:06:26,850 --> 00:06:29,250 ‫but let's see that in a minute. 124 00:06:29,250 --> 00:06:31,320 ‫For now, I will just take this component here. 125 00:06:31,320 --> 00:06:34,023 ‫Actually back to the top. 126 00:06:36,480 --> 00:06:37,383 ‫So just here. 127 00:06:38,340 --> 00:06:40,050 ‫Now let's open up our console. 128 00:06:40,050 --> 00:06:43,950 ‫Maybe we have some errors here that we're not catching 129 00:06:43,950 --> 00:06:46,140 ‫but well actually no. 130 00:06:46,140 --> 00:06:47,870 ‫Ah, but I think I know. 131 00:06:47,870 --> 00:06:50,410 ‫And the reason is that here we are not returning 132 00:06:53,430 --> 00:06:55,450 ‫so we were not returning any JSX. 133 00:06:55,450 --> 00:06:56,940 ‫And so then of course, 134 00:06:56,940 --> 00:06:59,553 ‫we couldn't have any JSX here in the UI. 135 00:07:00,420 --> 00:07:02,640 ‫Great, so let's keep going 136 00:07:02,640 --> 00:07:06,540 ‫and let's look again at our NAF bar. 137 00:07:06,540 --> 00:07:10,170 ‫So our NAF bar is now a lot simpler than before 138 00:07:10,170 --> 00:07:12,150 ‫but it's still doing a lot 139 00:07:12,150 --> 00:07:14,250 ‫of different things here, I would say. 140 00:07:14,250 --> 00:07:16,110 ‫So we are displaying a logo. 141 00:07:16,110 --> 00:07:17,920 ‫We have this input field 142 00:07:17,920 --> 00:07:20,610 ‫and we have the number of results here. 143 00:07:20,610 --> 00:07:24,140 ‫Now, in a way, all of this does actually belong together 144 00:07:24,140 --> 00:07:28,170 ‫because well together they form this nav bar. 145 00:07:28,170 --> 00:07:29,790 ‫So we could definitely argue 146 00:07:29,790 --> 00:07:31,920 ‫that this is okay like this. 147 00:07:31,920 --> 00:07:32,940 ‫But on the other hand, 148 00:07:32,940 --> 00:07:35,700 ‫it still takes some work to actually figure out 149 00:07:35,700 --> 00:07:37,800 ‫what this component here is doing 150 00:07:37,800 --> 00:07:41,310 ‫and maybe we even might want to reuse some parts of it. 151 00:07:41,310 --> 00:07:43,170 ‫So for example, this search bar, 152 00:07:43,170 --> 00:07:44,760 ‫which is basically this. 153 00:07:44,760 --> 00:07:47,010 ‫We might want to reuse it all over the place 154 00:07:47,010 --> 00:07:48,150 ‫in the application 155 00:07:48,150 --> 00:07:51,540 ‫At least if the app grew a bit bigger in the future. 156 00:07:51,540 --> 00:07:54,490 ‫And so let's at least grab this part here 157 00:07:54,490 --> 00:07:57,850 ‫and extract it into its own component. 158 00:07:57,850 --> 00:07:59,493 ‫So I'm cutting that. 159 00:08:02,850 --> 00:08:06,830 ‫And then let's create a function simply called search 160 00:08:08,300 --> 00:08:10,090 ‫then return that JSX. 161 00:08:10,090 --> 00:08:14,230 ‫And of course, we will then need this state 162 00:08:15,270 --> 00:08:18,303 ‫and we will want to include that here, 163 00:08:19,590 --> 00:08:20,550 ‫give it a save, 164 00:08:20,550 --> 00:08:23,430 ‫and then it looks exactly like before. 165 00:08:23,430 --> 00:08:24,600 ‫Okay? 166 00:08:24,600 --> 00:08:27,510 ‫But now something happened here that I personally 167 00:08:27,510 --> 00:08:31,500 ‫really don't like, which is to have one piece of JSX 168 00:08:31,500 --> 00:08:35,160 ‫which mixes like these native HTML elements 169 00:08:35,160 --> 00:08:37,030 ‫with our custom components. 170 00:08:37,030 --> 00:08:38,910 ‫So we have this div, 171 00:08:38,910 --> 00:08:39,780 ‫we have this P, 172 00:08:39,780 --> 00:08:42,780 ‫but then in the middle we have like our own search. 173 00:08:42,780 --> 00:08:45,390 ‫So that I think looks really ugly 174 00:08:45,390 --> 00:08:47,190 ‫and I really don't like that. 175 00:08:47,190 --> 00:08:48,990 ‫I think it's quite confusing. 176 00:08:48,990 --> 00:08:51,950 ‫And so let's actually also extract the logo 177 00:08:51,950 --> 00:08:53,190 ‫and the number results. 178 00:08:53,190 --> 00:08:56,130 ‫And so then we make this component here really nice 179 00:08:56,130 --> 00:08:58,930 ‫and clean and end up with these three components here 180 00:08:58,930 --> 00:09:02,133 ‫where each of them has its own responsibility. 181 00:09:04,440 --> 00:09:06,333 ‫So let's create the logo. 182 00:09:09,450 --> 00:09:11,359 ‫So we will end up here with a few small 183 00:09:11,359 --> 00:09:14,163 ‫and reusable components if we'd like. 184 00:09:15,130 --> 00:09:20,130 ‫So we have our logo and then let's say num results 185 00:09:21,810 --> 00:09:25,803 ‫function, num results. 186 00:09:29,010 --> 00:09:30,060 ‫Not right. 187 00:09:30,060 --> 00:09:31,923 ‫This doesn't look quite correct. 188 00:09:34,680 --> 00:09:37,660 ‫And yeah, now all we have to do is to include them here 189 00:09:40,440 --> 00:09:43,860 ‫And then num results. 190 00:09:43,860 --> 00:09:46,260 ‫And this looks a lot nicer. 191 00:09:46,260 --> 00:09:49,200 ‫So as soon as we look at on nav bar component, 192 00:09:49,200 --> 00:09:51,090 ‫we can immediately see ah 193 00:09:51,090 --> 00:09:52,530 ‫it contains a logo, 194 00:09:52,530 --> 00:09:54,979 ‫a search, and the num results. 195 00:09:54,979 --> 00:09:56,580 ‫And from there, if we were interested 196 00:09:56,580 --> 00:09:58,510 ‫we could then really drill down 197 00:09:58,510 --> 00:10:02,100 ‫into each of these components if we needed to. 198 00:10:02,100 --> 00:10:03,960 ‫And of course if we wanted, 199 00:10:03,960 --> 00:10:05,790 ‫we could even keep going. 200 00:10:05,790 --> 00:10:09,270 ‫So we could now create like one component here 201 00:10:09,270 --> 00:10:12,810 ‫for the icon and one for the title so to say. 202 00:10:12,810 --> 00:10:15,090 ‫But that would then be that situation 203 00:10:15,090 --> 00:10:16,410 ‫in which we would end up 204 00:10:16,410 --> 00:10:18,960 ‫with like hundreds of many components 205 00:10:18,960 --> 00:10:20,970 ‫which really isn't worth it. 206 00:10:20,970 --> 00:10:23,250 ‫So this is more than enough. 207 00:10:23,250 --> 00:10:25,890 ‫This logo is doing just one thing 208 00:10:25,890 --> 00:10:28,200 ‫so it has one responsibility already 209 00:10:28,200 --> 00:10:30,960 ‫which is basically to display this logo, 210 00:10:30,960 --> 00:10:31,859 ‫which is all this. 211 00:10:31,859 --> 00:10:36,270 ‫So there's absolutely no need to break it down even further. 212 00:10:36,270 --> 00:10:38,240 ‫So this is perfect like this. 213 00:10:38,240 --> 00:10:40,620 ‫So the nav bar is now finished 214 00:10:40,620 --> 00:10:43,052 ‫and we are ready to break up the main component, 215 00:10:43,052 --> 00:10:45,660 ‫of course a lot more as well. 216 00:10:45,660 --> 00:10:48,070 ‫So looking at our first criterion 217 00:10:48,070 --> 00:10:50,920 ‫which is the logical separation of content 218 00:10:50,920 --> 00:10:54,040 ‫we clearly have no clear separation right now. 219 00:10:54,040 --> 00:10:57,240 ‫So we have one component that has all of this. 220 00:10:57,240 --> 00:10:59,730 ‫And so the first visual division 221 00:10:59,730 --> 00:11:02,880 ‫that I would make here is to create one component 222 00:11:02,880 --> 00:11:06,810 ‫for this box and one for the right one here. 223 00:11:06,810 --> 00:11:08,540 ‫And so let's do just that. 224 00:11:08,540 --> 00:11:12,410 ‫Take this box and then let's move down here 225 00:11:14,950 --> 00:11:19,323 ‫and create the list box. 226 00:11:24,420 --> 00:11:27,240 ‫All right, and I'm calling it the list box. 227 00:11:27,240 --> 00:11:30,540 ‫And now we can see, so again 228 00:11:30,540 --> 00:11:32,670 ‫I'm calling this component here, "The list box". 229 00:11:32,670 --> 00:11:34,920 ‫Because in there is where we will have 230 00:11:34,920 --> 00:11:36,873 ‫this list of movies here. 231 00:11:38,280 --> 00:11:41,010 ‫So let's now grab the state that is missing here. 232 00:11:41,010 --> 00:11:44,493 ‫So set open one and the movies. 233 00:11:47,400 --> 00:11:52,400 ‫So cutting that from here and placing it here. 234 00:11:54,760 --> 00:11:56,700 ‫Alright? 235 00:11:56,700 --> 00:11:59,479 ‫Now, of course when you build your own apps in the future 236 00:11:59,479 --> 00:12:02,883 ‫then you will not build one huge component like this. 237 00:12:02,883 --> 00:12:05,850 ‫This is just an exercise so that we can apply 238 00:12:05,850 --> 00:12:07,530 ‫what we learned before, 239 00:12:07,530 --> 00:12:11,520 ‫but again, never build such a huge component like this 240 00:12:11,520 --> 00:12:14,730 ‫because there's really no need to then have all the work 241 00:12:14,730 --> 00:12:17,220 ‫of splitting that huge component up 242 00:12:17,220 --> 00:12:19,140 ‫like we are doing right now. 243 00:12:19,140 --> 00:12:20,930 ‫But I think that, yeah, for learning 244 00:12:20,930 --> 00:12:24,513 ‫this is fun and absolutely no problem. 245 00:12:25,920 --> 00:12:28,170 ‫So let's grab this other box as well 246 00:12:28,170 --> 00:12:32,120 ‫and place it into the watched box. 247 00:12:32,120 --> 00:12:36,183 ‫So function watched box. 248 00:12:39,460 --> 00:12:44,460 ‫Alright, let's grab all the states that we need here. 249 00:12:45,400 --> 00:12:48,640 ‫And let's also already include both the boxes here. 250 00:12:48,640 --> 00:12:53,640 ‫So that's the list box and the watched box. 251 00:12:54,290 --> 00:12:56,820 ‫So basically exactly the code that we had here 252 00:12:56,820 --> 00:13:00,580 ‫before now split up into these two components 253 00:13:02,100 --> 00:13:06,720 ‫placing the state there and it's not appearing 254 00:13:06,720 --> 00:13:10,563 ‫but that's because once again I forgot to return here. 255 00:13:11,760 --> 00:13:14,250 ‫Nice, so let's keep going 256 00:13:14,250 --> 00:13:18,510 ‫because I still think that this is way too big. 257 00:13:18,510 --> 00:13:21,690 ‫So just looking at this code, it looks quite confusing. 258 00:13:21,690 --> 00:13:24,150 ‫You cannot immediately understand what this 259 00:13:24,150 --> 00:13:25,770 ‫component here is doing. 260 00:13:25,770 --> 00:13:27,510 ‫It has like this button here, 261 00:13:27,510 --> 00:13:28,570 ‫which does something. 262 00:13:28,570 --> 00:13:31,570 ‫And then we have all of this code down here. 263 00:13:31,570 --> 00:13:34,980 ‫And so now what I want to do is to extract this 264 00:13:34,980 --> 00:13:37,200 ‫code here into its own list component 265 00:13:37,200 --> 00:13:40,120 ‫which will then have only one responsibility 266 00:13:40,120 --> 00:13:44,283 ‫which is to simply display well the list of movies. 267 00:13:45,240 --> 00:13:48,693 ‫So let's grab this, cut it from here, 268 00:13:50,940 --> 00:13:52,880 ‫and place it right here. 269 00:13:52,880 --> 00:13:57,880 ‫So movie list and I keep forgetting to return. 270 00:14:01,490 --> 00:14:05,230 ‫And then here we also need that movies state 271 00:14:09,210 --> 00:14:12,540 ‫and yeah, here all we need to do 272 00:14:12,540 --> 00:14:16,143 ‫is to include that movie list. 273 00:14:17,640 --> 00:14:19,923 ‫Nice, and this is still working. 274 00:14:20,910 --> 00:14:24,510 ‫Yes, and so we're doing a great job here. 275 00:14:24,510 --> 00:14:27,480 ‫So this component is now a lot easier to understand here 276 00:14:27,480 --> 00:14:28,443 ‫if you ask me. 277 00:14:29,430 --> 00:14:30,960 ‫So we have one button 278 00:14:30,960 --> 00:14:32,445 ‫and then if that button is open, 279 00:14:32,445 --> 00:14:34,413 ‫we show the movie list. 280 00:14:35,250 --> 00:14:38,710 ‫Nice, so getting better and better. 281 00:14:38,710 --> 00:14:40,770 ‫And I just want to mention that 282 00:14:40,770 --> 00:14:44,010 ‫in the real world we would probably have one file 283 00:14:44,010 --> 00:14:45,810 ‫for each of these components. 284 00:14:45,810 --> 00:14:48,150 ‫So something I said already many times ago 285 00:14:48,150 --> 00:14:49,510 ‫or many times before 286 00:14:49,510 --> 00:14:52,743 ‫but I still wanted to just mention that here. 287 00:14:54,510 --> 00:14:58,410 ‫So we now have this movie list component right here 288 00:14:58,410 --> 00:15:01,560 ‫and for many people this would now be enough. 289 00:15:01,560 --> 00:15:04,830 ‫But if it comes down to my personal coding style 290 00:15:04,830 --> 00:15:06,780 ‫or my personal preference, 291 00:15:06,780 --> 00:15:09,750 ‫I would actually like to still extract 292 00:15:09,750 --> 00:15:13,650 ‫this list element here into its own movie. 293 00:15:13,650 --> 00:15:16,800 ‫And we have actually done that many times before already 294 00:15:16,800 --> 00:15:19,880 ‫in this application where we had one component for the list 295 00:15:19,880 --> 00:15:23,170 ‫which would then simply loop over some array 296 00:15:23,170 --> 00:15:26,250 ‫and then display one component for each element. 297 00:15:26,250 --> 00:15:29,013 ‫And so now I will do exactly the same here. 298 00:15:29,870 --> 00:15:33,660 ‫So again, this is now a bit more of my personal preference 299 00:15:33,660 --> 00:15:36,480 ‫but I think that it's actually quite a sensible thing to do 300 00:15:36,480 --> 00:15:40,650 ‫because then here we have the mapping over the array here 301 00:15:40,650 --> 00:15:44,140 ‫isolated in this one component and have then one component 302 00:15:44,140 --> 00:15:48,030 ‫which is really only about the movie and nothing else. 303 00:15:48,030 --> 00:15:51,753 ‫And again, I keep forgetting to return here. 304 00:15:53,820 --> 00:15:57,350 ‫And yeah, let's then use that movie here. 305 00:15:57,350 --> 00:16:00,813 ‫And what will happen is that we will pass the current movie. 306 00:16:02,640 --> 00:16:04,200 ‫So this one here that's coming 307 00:16:04,200 --> 00:16:08,583 ‫from the map as a prop into that component. 308 00:16:10,440 --> 00:16:13,530 ‫We will also need this key no longer here, 309 00:16:13,530 --> 00:16:15,210 ‫but now here. 310 00:16:15,210 --> 00:16:20,073 ‫And finally accept that prop right here. 311 00:16:21,020 --> 00:16:23,760 ‫We give it a safe, we have no error. 312 00:16:23,760 --> 00:16:25,920 ‫And so let's keep going. 313 00:16:25,920 --> 00:16:29,650 ‫So I think we are quite finished here with this left part. 314 00:16:29,650 --> 00:16:32,640 ‫And so let's go over here. 315 00:16:32,640 --> 00:16:35,660 ‫Now here we can already see that it's a bit more complex 316 00:16:35,660 --> 00:16:38,370 ‫because here we have not only the list 317 00:16:38,370 --> 00:16:41,870 ‫but also like this summary of the list. 318 00:16:41,870 --> 00:16:44,790 ‫But let's see what we actually have there. 319 00:16:44,790 --> 00:16:47,350 ‫So it's inside this watch box. 320 00:16:47,350 --> 00:16:52,140 ‫And of course we can also start seeing our components 321 00:16:52,140 --> 00:16:55,170 ‫tree right here, which is always nice. 322 00:16:55,170 --> 00:16:58,110 ‫So I always like to do that actually. 323 00:16:58,110 --> 00:17:01,690 ‫And so it's coming together here quite nicely. 324 00:17:01,690 --> 00:17:04,389 ‫Maybe it doesn't even have to be this big 325 00:17:04,389 --> 00:17:07,413 ‫then we can see a bit better. 326 00:17:08,950 --> 00:17:12,990 ‫And so yeah, this is exactly what we have been building. 327 00:17:12,990 --> 00:17:15,930 ‫And now all we have to do is to also break up 328 00:17:15,930 --> 00:17:18,363 ‫this watched box a bit better. 329 00:17:19,740 --> 00:17:21,510 ‫So let's take care of that. 330 00:17:21,510 --> 00:17:23,940 ‫And first up I will do that division 331 00:17:23,940 --> 00:17:26,210 ‫that I just mentioned earlier. 332 00:17:26,210 --> 00:17:29,703 ‫So we have this list here and also this summary. 333 00:17:31,050 --> 00:17:33,790 ‫So let's grab that summary here. 334 00:17:33,790 --> 00:17:35,790 ‫And so that's basically this div 335 00:17:35,790 --> 00:17:38,073 ‫with the class name of summary. 336 00:17:39,030 --> 00:17:40,860 ‫So I'm cutting that. 337 00:17:40,860 --> 00:17:44,463 ‫And then let's just create function, 338 00:17:46,590 --> 00:17:48,850 ‫watched summary 339 00:17:51,990 --> 00:17:54,363 ‫And then returning this. 340 00:17:55,500 --> 00:17:59,820 ‫So now this code here actually depends on a few things. 341 00:17:59,820 --> 00:18:01,380 ‫So all of these variables, 342 00:18:01,380 --> 00:18:02,763 ‫so let's see what they are. 343 00:18:03,720 --> 00:18:06,420 ‫So that's these variables right here, 344 00:18:06,420 --> 00:18:08,040 ‫plus the watched. 345 00:18:08,040 --> 00:18:11,730 ‫Now we could pass all of these three here individually 346 00:18:11,730 --> 00:18:13,110 ‫or actually the four of them. 347 00:18:13,110 --> 00:18:15,840 ‫So watched plus these three here. 348 00:18:15,840 --> 00:18:17,230 ‫So we could pass them in 349 00:18:18,450 --> 00:18:23,450 ‫into the watched box component that we just created. 350 00:18:24,210 --> 00:18:26,040 ‫But actually if we take a look at them, 351 00:18:26,040 --> 00:18:29,910 ‫all of them simply depends on the watched state. 352 00:18:29,910 --> 00:18:33,390 ‫And so what we're going to do is to grab this 353 00:18:33,390 --> 00:18:35,943 ‫and pass this watched list. 354 00:18:36,870 --> 00:18:39,700 ‫So that array right here as a prop 355 00:18:43,200 --> 00:18:47,610 ‫Okay, moving there, pasting that here. 356 00:18:47,610 --> 00:18:51,880 ‫Ah, and of course we need to accept that prompt in here 357 00:18:52,959 --> 00:18:55,263 ‫and now React is happy again. 358 00:18:56,340 --> 00:19:00,270 ‫So again, what we did is that these three pieces here 359 00:19:00,270 --> 00:19:02,820 ‫are derived state and they are derived 360 00:19:02,820 --> 00:19:05,510 ‫from this watched array right here. 361 00:19:05,510 --> 00:19:07,919 ‫And so we simply passed the watched array 362 00:19:07,919 --> 00:19:11,100 ‫into this component and then yeah, 363 00:19:11,100 --> 00:19:13,140 ‫just moved these three here 364 00:19:13,140 --> 00:19:15,300 ‫of course, also into this component. 365 00:19:15,300 --> 00:19:17,790 ‫And so we did that instead of leaving this year 366 00:19:17,790 --> 00:19:21,540 ‫in the parent component and passing all of them one by one. 367 00:19:21,540 --> 00:19:24,770 ‫But this code here clearly belongs in this component. 368 00:19:24,770 --> 00:19:27,409 ‫So it's clearly part of the responsibility 369 00:19:27,409 --> 00:19:31,560 ‫of watched summary to calculate its own statistics. 370 00:19:31,560 --> 00:19:33,450 ‫And if all it needs to do that, 371 00:19:33,450 --> 00:19:35,130 ‫is this watched array. 372 00:19:35,130 --> 00:19:37,740 ‫Well then we are happy to provide it 373 00:19:37,740 --> 00:19:39,333 ‫with exactly that array. 374 00:19:40,170 --> 00:19:43,380 ‫But moving on, let's now create another list 375 00:19:43,380 --> 00:19:45,663 ‫which is here for this watched. 376 00:19:46,920 --> 00:19:48,873 ‫So this watched movies list, 377 00:19:50,190 --> 00:19:51,783 ‫so cut that as well. 378 00:19:55,300 --> 00:19:56,677 ‫So let's call this one here, 379 00:19:56,677 --> 00:19:58,527 ‫"The watch list". 380 00:19:59,461 --> 00:20:01,267 ‫And of course we could have also called it 381 00:20:01,267 --> 00:20:03,730 ‫"The watched movie list". 382 00:20:03,730 --> 00:20:05,343 ‫And let's actually do that. 383 00:20:06,290 --> 00:20:09,240 ‫So remember how I said that we should not be afraid 384 00:20:09,240 --> 00:20:11,490 ‫of long component names? 385 00:20:11,490 --> 00:20:15,180 ‫And so I think that this is a bit better actually. 386 00:20:15,180 --> 00:20:18,270 ‫Now here we will need that watched array. 387 00:20:18,270 --> 00:20:21,287 ‫So that piece of state that we have up here, right? 388 00:20:23,320 --> 00:20:26,500 ‫But let's first give it a safe and then see that error 389 00:20:29,770 --> 00:20:34,770 ‫And well, nothing really happened here. 390 00:20:37,540 --> 00:20:38,700 ‫Well first of all, 391 00:20:38,700 --> 00:20:41,760 ‫we have a bug here and it's a big one, 392 00:20:41,760 --> 00:20:44,040 ‫which is that we are here including 393 00:20:44,040 --> 00:20:46,680 ‫the same component inside itself. 394 00:20:46,680 --> 00:20:50,040 ‫So we are including watch box inside watch box. 395 00:20:50,040 --> 00:20:51,900 ‫So this was by mistake, 396 00:20:51,900 --> 00:20:55,260 ‫probably you have noticed this as I was typing. 397 00:20:55,260 --> 00:20:58,260 ‫So here of course it needs to be the watched summary 398 00:20:58,260 --> 00:21:00,960 ‫which is a component that we were talking about before 399 00:21:01,830 --> 00:21:03,393 ‫but still nothing is happening. 400 00:21:04,290 --> 00:21:06,330 ‫So let's try to reload here. 401 00:21:06,330 --> 00:21:09,330 ‫But now we have like this infinite loop 402 00:21:09,330 --> 00:21:13,110 ‫so maybe we have some errors, but yeah 403 00:21:13,110 --> 00:21:16,170 ‫I think the best thing to do is to actually 404 00:21:16,170 --> 00:21:18,840 ‫quit the application altogether 405 00:21:18,840 --> 00:21:21,363 ‫and then just try to restart. 406 00:21:22,860 --> 00:21:27,860 ‫So let's wait for it and yeah, 407 00:21:28,470 --> 00:21:30,153 ‫let's close the old one. 408 00:21:31,440 --> 00:21:34,443 ‫And now we get that error that we had before. 409 00:21:36,270 --> 00:21:37,893 ‫So before I fix that, 410 00:21:40,020 --> 00:21:43,100 ‫or actually let's pass it in already here, 411 00:21:43,100 --> 00:21:45,780 ‫but I still wanted to say that it's really, 412 00:21:45,780 --> 00:21:46,710 ‫really important 413 00:21:46,710 --> 00:21:51,180 ‫that you do not call the component inside of itself. 414 00:21:51,180 --> 00:21:55,080 ‫So again, I was calling watch box in here. 415 00:21:55,080 --> 00:21:56,130 ‫And so the problem was 416 00:21:56,130 --> 00:21:58,290 ‫that this then created an infinite loop 417 00:21:58,290 --> 00:22:00,080 ‫of the component calling itself. 418 00:22:00,080 --> 00:22:03,540 ‫And so that's why when I was reloading the application 419 00:22:03,540 --> 00:22:05,919 ‫React here wasn't really reacting. 420 00:22:05,919 --> 00:22:10,150 ‫So the application wasn't really able to then render itself. 421 00:22:10,150 --> 00:22:12,900 ‫And again, because of that infinite loop. 422 00:22:12,900 --> 00:22:16,263 ‫So never do what I just did here by mistake. 423 00:22:17,310 --> 00:22:21,360 ‫But anyway, we now passed the watched array here 424 00:22:21,360 --> 00:22:23,060 ‫into this watched movies list. 425 00:22:23,060 --> 00:22:27,543 ‫And so here we just need to receive that, 426 00:22:28,380 --> 00:22:29,880 ‫give it a save, 427 00:22:29,880 --> 00:22:31,750 ‫and then we are back to normal. 428 00:22:31,750 --> 00:22:35,373 ‫Let's quickly get our console back. 429 00:22:37,560 --> 00:22:41,970 ‫And yeah, so this is the list that we have. 430 00:22:41,970 --> 00:22:45,550 ‫And now just one more component where just like before 431 00:22:45,550 --> 00:22:49,720 ‫I will extract the list item into its own component. 432 00:22:49,720 --> 00:22:52,320 ‫So grabbing all of this, 433 00:22:52,320 --> 00:22:56,790 ‫let's create the watched movie here. 434 00:22:58,710 --> 00:23:01,770 ‫We already know that we need to accept the movie. 435 00:23:01,770 --> 00:23:03,419 ‫And here, remember, it's very important 436 00:23:03,419 --> 00:23:05,380 ‫that we place the corrupt name 437 00:23:05,380 --> 00:23:08,750 ‫into these curly braces because we are in fact 438 00:23:08,750 --> 00:23:13,200 ‫just distracting the props object, right? 439 00:23:13,200 --> 00:23:15,300 ‫And so then here 440 00:23:15,300 --> 00:23:20,300 ‫all we have to do is to write watched movie pass 441 00:23:20,850 --> 00:23:23,433 ‫in the movie prop. 442 00:23:25,020 --> 00:23:28,503 ‫And yeah, we also need this key right here. 443 00:23:30,930 --> 00:23:35,040 ‫And with this we should be done and we are indeed. 444 00:23:35,040 --> 00:23:39,630 ‫So the app works and looks just like before 445 00:23:39,630 --> 00:23:41,970 ‫but we now divided this application 446 00:23:41,970 --> 00:23:44,010 ‫into its logical components. 447 00:23:44,010 --> 00:23:46,950 ‫So components that have a logical separation 448 00:23:46,950 --> 00:23:50,220 ‫of the content that might be reusable 449 00:23:50,220 --> 00:23:51,720 ‫and that have the right number 450 00:23:51,720 --> 00:23:55,113 ‫of responsibilities and of complexity.