1 00:00:01,110 --> 00:00:04,590 ‫Let's now make our watched movies list work, 2 00:00:04,590 --> 00:00:07,200 ‫and let's do it all in one go. 3 00:00:07,200 --> 00:00:09,450 ‫So this is gonna be a long one, 4 00:00:09,450 --> 00:00:11,793 ‫and so let's quickly get started. 5 00:00:13,500 --> 00:00:16,980 ‫And let's actually get started by quickly recapping 6 00:00:16,980 --> 00:00:20,640 ‫what this watched list actually is. 7 00:00:20,640 --> 00:00:24,450 ‫So remember how we already have this watched state here, 8 00:00:24,450 --> 00:00:26,670 ‫which right now is this empty array, 9 00:00:26,670 --> 00:00:30,377 ‫but it used to be this tempWatchedData. 10 00:00:33,150 --> 00:00:35,010 ‫So let's close this here. 11 00:00:35,010 --> 00:00:38,070 ‫And so you see that then we had these two movies 12 00:00:38,070 --> 00:00:41,220 ‫with a few details, with the user rating 13 00:00:41,220 --> 00:00:43,533 ‫and then also this summary right here. 14 00:00:45,000 --> 00:00:48,420 ‫Now, of course we will start from zero here, 15 00:00:48,420 --> 00:00:53,130 ‫and then we can add each of the movies here to our list. 16 00:00:53,130 --> 00:00:55,083 ‫So they will then appear over there. 17 00:00:56,010 --> 00:00:58,413 ‫So we already have the list component. 18 00:00:59,940 --> 00:01:03,540 ‫So it should be somewhere down here. 19 00:01:03,540 --> 00:01:05,640 ‫So we have the watched summary, 20 00:01:05,640 --> 00:01:08,130 ‫we have the watched movie list, 21 00:01:08,130 --> 00:01:10,323 ‫and we have the watched movie itself. 22 00:01:11,340 --> 00:01:15,240 ‫So each of these movies needs the poster, the title, 23 00:01:15,240 --> 00:01:19,203 ‫the rating, the user rating, and the runtime. 24 00:01:20,370 --> 00:01:23,250 ‫So basically we need to create a brand-new object 25 00:01:23,250 --> 00:01:24,820 ‫for each of these movies 26 00:01:26,010 --> 00:01:31,010 ‫and then pass each of these objects here 27 00:01:31,140 --> 00:01:33,093 ‫into this watched array. 28 00:01:34,260 --> 00:01:37,890 ‫So actually let's start by creating that function 29 00:01:37,890 --> 00:01:41,793 ‫with which we can add a new item to that array. 30 00:01:42,810 --> 00:01:44,410 ‫So let's call it handleAddWatch. 31 00:01:48,366 --> 00:01:50,082 ‫Then we get a movie. 32 00:01:50,082 --> 00:01:52,384 ‫Let's call this watched. 33 00:01:52,384 --> 00:01:53,820 ‫And then let's do it as always. 34 00:01:53,820 --> 00:01:55,580 ‫So we call setWatched, 35 00:01:56,720 --> 00:02:01,074 ‫and then we get the current watched movies array, 36 00:02:01,074 --> 00:02:05,430 ‫and then we create a brand-new one based on that one, 37 00:02:05,430 --> 00:02:08,013 ‫so based on all the elements of that array, 38 00:02:08,850 --> 00:02:11,313 ‫and then the brand-new movie object. 39 00:02:12,630 --> 00:02:17,430 ‫Okay, and now we just need to pass that in, 40 00:02:17,430 --> 00:02:19,200 ‫so again as a prop. 41 00:02:19,200 --> 00:02:22,530 ‫And you see that this component is getting really big, 42 00:02:22,530 --> 00:02:24,840 ‫and the same for this entire file. 43 00:02:24,840 --> 00:02:28,140 ‫So if you want, feel free to split up this file 44 00:02:28,140 --> 00:02:32,340 ‫into multiple files, so one component per file. 45 00:02:32,340 --> 00:02:34,653 ‫But anyway, I will just keep working here. 46 00:02:35,730 --> 00:02:38,190 ‫And so let's pass that function 47 00:02:38,190 --> 00:02:40,383 ‫that we just created here as onAddWatched, 48 00:02:45,278 --> 00:02:46,650 ‫handleAddWatched. 49 00:02:46,650 --> 00:02:49,470 ‫So we're passing that into MovieDetails 50 00:02:49,470 --> 00:02:52,260 ‫because, again, that is where we will actually have 51 00:02:52,260 --> 00:02:56,250 ‫the button to add the movie to the watched list. 52 00:02:56,250 --> 00:02:57,690 ‫So it will be right here. 53 00:02:57,690 --> 00:03:00,630 ‫And so then here in this component, we set the state. 54 00:03:00,630 --> 00:03:03,120 ‫It will get updated in the parent, 55 00:03:03,120 --> 00:03:07,560 ‫and from there it goes back here into the statistics 56 00:03:07,560 --> 00:03:09,663 ‫and then into this list, of course. 57 00:03:11,160 --> 00:03:16,140 ‫Okay, but now let's then move to the MovieDetails component 58 00:03:16,140 --> 00:03:21,140 ‫and let's add a button right here, 59 00:03:21,300 --> 00:03:23,163 ‫so under this rating. 60 00:03:25,590 --> 00:03:28,950 ‫So here let's say button 61 00:03:28,950 --> 00:03:31,427 ‫with the className of btn-add 62 00:03:34,187 --> 00:03:38,220 ‫and then Add to list. 63 00:03:38,220 --> 00:03:42,570 ‫Now, here of course, we need our event handler, 64 00:03:42,570 --> 00:03:47,490 ‫and let's actually create another event handler right here 65 00:03:47,490 --> 00:03:48,750 ‫which will then call the one 66 00:03:48,750 --> 00:03:50,673 ‫that we passed into the component, 67 00:03:51,660 --> 00:03:56,013 ‫because here we actually need to do a lot of stuff. 68 00:03:59,100 --> 00:04:01,203 ‫So function handleAdd. 69 00:04:04,039 --> 00:04:06,630 ‫And so, again, this one will then eventually call 70 00:04:06,630 --> 00:04:09,450 ‫that function that we passed here as a prop. 71 00:04:09,450 --> 00:04:10,893 ‫So that was onAddWatched. 72 00:04:18,030 --> 00:04:21,450 ‫So again, in the end, we will call that function here, 73 00:04:21,450 --> 00:04:26,220 ‫which, remember, needs a new movie object as the input. 74 00:04:26,220 --> 00:04:29,640 ‫So newMovie, basically. 75 00:04:29,640 --> 00:04:31,473 ‫So like a new watched movie. 76 00:04:32,640 --> 00:04:34,653 ‫So let's create that object here. 77 00:04:37,710 --> 00:04:39,930 ‫Let's actually call it newWatchedMovie, 78 00:04:39,930 --> 00:04:43,023 ‫just so we understand what we are doing here. 79 00:04:45,120 --> 00:04:49,710 ‫So this movie object will also need an IMDB rating, 80 00:04:49,710 --> 00:04:51,990 ‫and here we can simply use the one 81 00:04:51,990 --> 00:04:53,910 ‫that is currently selected. 82 00:04:53,910 --> 00:04:56,160 ‫So the currently selected ID is 83 00:04:56,160 --> 00:04:59,610 ‫of course the IMDB rating of that movie 84 00:04:59,610 --> 00:05:00,860 ‫that we are going to add. 85 00:05:02,940 --> 00:05:05,250 ‫Then remember we also need the title, of course, 86 00:05:05,250 --> 00:05:09,093 ‫of the movie, the year, the poster, 87 00:05:10,410 --> 00:05:15,210 ‫the IMDB rating. 88 00:05:15,210 --> 00:05:19,230 ‫And here we actually need to convert that to a number. 89 00:05:19,230 --> 00:05:21,840 ‫And the reason for that is that the rating needs 90 00:05:21,840 --> 00:05:25,860 ‫to be a number so that we can then do the statistics here, 91 00:05:25,860 --> 00:05:27,573 ‫so calculating the averages. 92 00:05:29,220 --> 00:05:34,220 ‫So let's just use the number function on the IMDB rating. 93 00:05:34,950 --> 00:05:39,303 ‫And finally, we also need the runtime. 94 00:05:40,290 --> 00:05:43,857 ‫Now, if we take a look at one of the movies, 95 00:05:43,857 --> 00:05:47,340 ‫you you see that the runtime includes the minutes here. 96 00:05:47,340 --> 00:05:48,990 ‫And so again, with this, 97 00:05:48,990 --> 00:05:52,440 ‫we can then later not do any calculations. 98 00:05:52,440 --> 00:05:54,783 ‫So we need to basically split that, 99 00:05:55,800 --> 00:05:59,410 ‫so runtime.split 100 00:06:00,420 --> 00:06:04,380 ‫by an empty string, which will just get us that first part. 101 00:06:04,380 --> 00:06:07,980 ‫And then from there, we can just take that first part, 102 00:06:07,980 --> 00:06:12,090 ‫and then we just convert everything 103 00:06:12,090 --> 00:06:14,310 ‫to a number again. 104 00:06:14,310 --> 00:06:16,410 ‫Now, here we get some problem. 105 00:06:16,410 --> 00:06:19,980 ‫It's because we have a duplicate key. 106 00:06:19,980 --> 00:06:23,673 ‫That's because here, of course, it is the imdbID. 107 00:06:25,410 --> 00:06:28,800 ‫So thanks ESLint here for letting me know. 108 00:06:28,800 --> 00:06:32,343 ‫That was a pretty big problem, actually. 109 00:06:33,210 --> 00:06:37,380 ‫So let's see if this already works at this point. 110 00:06:37,380 --> 00:06:41,880 ‫So maybe it does, maybe it doesn't, but let's see. 111 00:06:41,880 --> 00:06:43,800 ‫Let's see our console. 112 00:06:43,800 --> 00:06:46,773 ‫So there are a lot of moving pieces here, so let's check. 113 00:06:48,480 --> 00:06:50,790 ‫So let's add this to our list. 114 00:06:50,790 --> 00:06:53,010 ‫And we didn't get any error, 115 00:06:53,010 --> 00:06:56,883 ‫so let's go back to see our list, and there it is. 116 00:06:57,810 --> 00:07:00,360 ‫I mean, there are still some problems here, 117 00:07:00,360 --> 00:07:04,293 ‫but something did work, so that's great. 118 00:07:05,400 --> 00:07:08,133 ‫Now, I think it is because down here, 119 00:07:09,030 --> 00:07:11,160 ‫we are using some of these properties 120 00:07:11,160 --> 00:07:15,690 ‫with their uppercase letters here. 121 00:07:15,690 --> 00:07:20,223 ‫So this should be title, and title like this. 122 00:07:22,170 --> 00:07:24,420 ‫And, yeah, beautiful. 123 00:07:24,420 --> 00:07:27,780 ‫The only thing that we are missing here is the stars. 124 00:07:27,780 --> 00:07:31,773 ‫And so that's actually what we're gonna take care of next. 125 00:07:33,240 --> 00:07:34,863 ‫So let's go back here. 126 00:07:36,060 --> 00:07:40,230 ‫And I just remembered that actually there is something else. 127 00:07:40,230 --> 00:07:43,050 ‫So let's say we also want to add this one. 128 00:07:43,050 --> 00:07:46,260 ‫So we add it to the list, but then nothing happens. 129 00:07:46,260 --> 00:07:48,390 ‫So I think that as we click here, 130 00:07:48,390 --> 00:07:52,560 ‫we should probably close this movie 131 00:07:52,560 --> 00:07:54,450 ‫and then basically go back. 132 00:07:54,450 --> 00:07:57,450 ‫And so then we can immediately see the new movie 133 00:07:57,450 --> 00:07:58,563 ‫that has been added. 134 00:08:00,060 --> 00:08:02,880 ‫So that's not too difficult 135 00:08:02,880 --> 00:08:05,133 ‫because we already have a function for that. 136 00:08:06,090 --> 00:08:08,470 ‫So it's this handleCloseMovie. 137 00:08:09,390 --> 00:08:11,040 ‫And so this is the function 138 00:08:11,040 --> 00:08:13,290 ‫that we now want to call here as well 139 00:08:13,290 --> 00:08:17,163 ‫as soon as a new movie is added there to that list. 140 00:08:19,260 --> 00:08:21,630 ‫So into MovieDetails. 141 00:08:21,630 --> 00:08:24,330 ‫Ah, we already have the function there. 142 00:08:24,330 --> 00:08:25,833 ‫Well, that's very convenient. 143 00:08:26,910 --> 00:08:28,860 ‫And, yeah, of course we do have it 144 00:08:28,860 --> 00:08:32,433 ‫because of this button here. 145 00:08:35,160 --> 00:08:37,263 ‫Okay, but anyway, 146 00:08:39,030 --> 00:08:40,500 ‫yeah, here it is. 147 00:08:40,500 --> 00:08:42,090 ‫So after adding a movie, 148 00:08:42,090 --> 00:08:46,143 ‫we then want to immediately also close the movie. 149 00:08:50,460 --> 00:08:51,933 ‫Okay, let's add this. 150 00:08:52,800 --> 00:08:54,900 ‫And so there it is again. 151 00:08:54,900 --> 00:08:57,300 ‫Now, you immediately see that there is a problem 152 00:08:57,300 --> 00:08:59,520 ‫because we already have the movie on the list, 153 00:08:59,520 --> 00:09:02,310 ‫but we will take care of that a little bit later. 154 00:09:02,310 --> 00:09:05,463 ‫For now, let's take care of the user rating here. 155 00:09:06,750 --> 00:09:10,143 ‫So let's maybe just reload, which will clear our list. 156 00:09:13,470 --> 00:09:15,873 ‫And, yeah. 157 00:09:17,040 --> 00:09:20,070 ‫So basically we want to be able 158 00:09:20,070 --> 00:09:22,620 ‫to get this rating here from the user, 159 00:09:22,620 --> 00:09:24,930 ‫and then as we add to the list, 160 00:09:24,930 --> 00:09:28,020 ‫that should be the rating that should be added here 161 00:09:28,020 --> 00:09:31,590 ‫to this new watched movie, right? 162 00:09:31,590 --> 00:09:36,480 ‫Or in other words, we now need the state that we have here, 163 00:09:36,480 --> 00:09:37,980 ‫like this nine rating. 164 00:09:37,980 --> 00:09:41,250 ‫We need it outside the StarRating component 165 00:09:41,250 --> 00:09:44,820 ‫and inside our MovieDetails component. 166 00:09:44,820 --> 00:09:47,340 ‫So how do we do that? 167 00:09:47,340 --> 00:09:50,910 ‫Well, remember that we actually created a way 168 00:09:50,910 --> 00:09:54,360 ‫of getting that state outside the component 169 00:09:54,360 --> 00:09:57,270 ‫by adding in a function. 170 00:09:57,270 --> 00:10:00,090 ‫So we defined the onSetRating prop. 171 00:10:00,090 --> 00:10:03,783 ‫And so into this, we can pass a state, set, or function. 172 00:10:05,400 --> 00:10:09,360 ‫So then we need that state, set, or function. 173 00:10:09,360 --> 00:10:12,210 ‫So let's create yet another piece of state here 174 00:10:12,210 --> 00:10:13,860 ‫for that rating. 175 00:10:13,860 --> 00:10:16,890 ‫So userRating 176 00:10:16,890 --> 00:10:20,313 ‫and setUserRating. 177 00:10:23,340 --> 00:10:28,340 ‫So useState, and here let's just start at an empty string. 178 00:10:30,034 --> 00:10:30,867 ‫Okay. 179 00:10:31,980 --> 00:10:34,830 ‫Now, for some reason we are already using this somewhere. 180 00:10:37,170 --> 00:10:38,553 ‫Well, not really. 181 00:10:40,410 --> 00:10:43,200 ‫So I was saying that because it wasn't 182 00:10:43,200 --> 00:10:45,000 ‫with the yellow underline. 183 00:10:45,000 --> 00:10:47,430 ‫But anyway, let's get the setUserRating 184 00:10:47,430 --> 00:10:52,023 ‫and then pass it here into our StarRating component. 185 00:10:55,830 --> 00:10:57,063 ‫Then let's reload. 186 00:11:01,740 --> 00:11:03,273 ‫Then let's open up this. 187 00:11:04,380 --> 00:11:05,670 ‫Give a rating. 188 00:11:05,670 --> 00:11:08,973 ‫And if we now check in here in our component. 189 00:11:10,740 --> 00:11:12,660 ‫So this we haven't done in a long time, 190 00:11:12,660 --> 00:11:14,433 ‫but, again, this is really helpful. 191 00:11:15,630 --> 00:11:18,240 ‫So here we have... 192 00:11:18,240 --> 00:11:20,610 ‫Ah, that reset everything. 193 00:11:20,610 --> 00:11:22,510 ‫Sometimes that happens when you click. 194 00:11:23,550 --> 00:11:26,190 ‫But anyway, here in our MovieDetails, 195 00:11:26,190 --> 00:11:30,510 ‫we see all the props, like the selected ID and the state. 196 00:11:30,510 --> 00:11:32,760 ‫So here we have, of course, the MovieObject 197 00:11:32,760 --> 00:11:34,050 ‫that has been loading. 198 00:11:34,050 --> 00:11:36,120 ‫Then we have the is loading state 199 00:11:36,120 --> 00:11:38,790 ‫and finally the current rating. 200 00:11:38,790 --> 00:11:42,330 ‫So as we click here now, you see that this changes, 201 00:11:42,330 --> 00:11:45,480 ‫and so therefore that means that now we have the state 202 00:11:45,480 --> 00:11:49,440 ‫inside our MovieDetails component. 203 00:11:49,440 --> 00:11:52,970 ‫Of course, it's also still inside the StarRating. 204 00:11:54,030 --> 00:11:55,293 ‫So here we have the same. 205 00:11:56,160 --> 00:11:58,173 ‫So of course now that changes to 10, 206 00:11:59,190 --> 00:12:02,763 ‫but now it also changed to 10 in MovieDetails. 207 00:12:04,170 --> 00:12:06,360 ‫All right, so that's really helpful. 208 00:12:06,360 --> 00:12:10,590 ‫And so now we can just add that new state 209 00:12:10,590 --> 00:12:14,000 ‫right here to that object, so userRating. 210 00:12:15,360 --> 00:12:17,460 ‫And now as we have this userRating, 211 00:12:17,460 --> 00:12:21,090 ‫we only want to allow a movie to be added to the list 212 00:12:21,090 --> 00:12:23,433 ‫if the user actually gave it a rating. 213 00:12:25,290 --> 00:12:28,353 ‫So let's translate that requirement into code. 214 00:12:29,370 --> 00:12:34,370 ‫And so what I just said is basically this. 215 00:12:35,010 --> 00:12:40,010 ‫So if userRating is greater than zero, 216 00:12:41,280 --> 00:12:43,113 ‫then display the button. 217 00:12:47,730 --> 00:12:49,953 ‫So let's reload that here manually. 218 00:12:53,190 --> 00:12:55,920 ‫Okay, and so now the button is gone. 219 00:12:55,920 --> 00:12:58,890 ‫But then as soon as I click here, the button will appear. 220 00:12:58,890 --> 00:13:02,130 ‫And now I add it, and there it is. 221 00:13:02,130 --> 00:13:03,453 ‫So there is our eight. 222 00:13:04,560 --> 00:13:07,170 ‫Now, I haven't watched any of these other ones. 223 00:13:07,170 --> 00:13:09,330 ‫Let's just give it something. 224 00:13:09,330 --> 00:13:14,280 ‫And then indeed, we get this movie with the IMDB rating 225 00:13:14,280 --> 00:13:16,020 ‫and with my own rating. 226 00:13:16,020 --> 00:13:18,240 ‫And so then the average between these two 227 00:13:18,240 --> 00:13:21,633 ‫is actually correctly calculated with 5 1/2. 228 00:13:22,830 --> 00:13:23,910 ‫Great. 229 00:13:23,910 --> 00:13:27,390 ‫Now, next up we need to ensure 230 00:13:27,390 --> 00:13:29,670 ‫that I cannot just add this movie here 231 00:13:29,670 --> 00:13:31,740 ‫as many times as I want. 232 00:13:31,740 --> 00:13:33,960 ‫So of course, I can keep going, 233 00:13:33,960 --> 00:13:36,840 ‫and I can keep going over and over again. 234 00:13:36,840 --> 00:13:40,560 ‫So now I have the exact same movie here three times 235 00:13:40,560 --> 00:13:43,143 ‫in my list, and that should not be allowed. 236 00:13:44,580 --> 00:13:48,480 ‫So basically when we come here to this component, 237 00:13:48,480 --> 00:13:52,110 ‫we want to check if this movie is already in the list. 238 00:13:52,110 --> 00:13:53,133 ‫And if it is, 239 00:13:53,133 --> 00:13:56,850 ‫then we don't want to display any of this here. 240 00:13:56,850 --> 00:13:58,590 ‫So then we can no longer rate it, 241 00:13:58,590 --> 00:14:01,113 ‫and it should then simply display the rating 242 00:14:01,113 --> 00:14:02,583 ‫that we already gave. 243 00:14:04,110 --> 00:14:04,943 ‫All right. 244 00:14:06,300 --> 00:14:09,000 ‫Now, does that maybe sound like something 245 00:14:09,000 --> 00:14:11,373 ‫that you might want to try on your own? 246 00:14:12,810 --> 00:14:15,660 ‫I know it sounds probably a bit scary, 247 00:14:15,660 --> 00:14:18,240 ‫but I think you could actually do it. 248 00:14:18,240 --> 00:14:19,620 ‫So if you are up to speed 249 00:14:19,620 --> 00:14:22,560 ‫with how the data flows through this application, 250 00:14:22,560 --> 00:14:25,350 ‫I think you will be able to do this. 251 00:14:25,350 --> 00:14:27,660 ‫So maybe take a minute or two now, 252 00:14:27,660 --> 00:14:30,993 ‫and then I see you back here once you are done with that. 253 00:14:33,090 --> 00:14:36,960 ‫All right, so maybe you tried it. 254 00:14:36,960 --> 00:14:40,503 ‫And if not, that's also absolutely no problem. 255 00:14:41,430 --> 00:14:46,327 ‫So what we need to do is to now pass the watched array 256 00:14:47,280 --> 00:14:49,653 ‫into that component, right? 257 00:14:50,880 --> 00:14:54,093 ‫So that is right here. 258 00:14:55,380 --> 00:15:00,060 ‫So the watched array, we simply pass it as a prop. 259 00:15:00,060 --> 00:15:03,540 ‫And so then with that, we can check for each of these movies 260 00:15:03,540 --> 00:15:06,873 ‫if it is already part of the watched list. 261 00:15:09,630 --> 00:15:13,380 ‫Okay, so let's calculate that here. 262 00:15:13,380 --> 00:15:16,350 ‫So a new piece of derived state, 263 00:15:16,350 --> 00:15:19,593 ‫which is isWatched. 264 00:15:20,520 --> 00:15:23,580 ‫So what we need to do now is to basically check 265 00:15:23,580 --> 00:15:26,370 ‫if the watched array that we need 266 00:15:26,370 --> 00:15:28,293 ‫to accept here still as a prop. 267 00:15:29,760 --> 00:15:33,510 ‫So we need to check if this array of objects 268 00:15:33,510 --> 00:15:37,320 ‫includes the array that is currently selected. 269 00:15:37,320 --> 00:15:41,160 ‫So let's do that, so watched. 270 00:15:41,160 --> 00:15:45,573 ‫And let's first transform this simply into array of IDs. 271 00:15:46,890 --> 00:15:48,600 ‫So we grab all the movies, 272 00:15:48,600 --> 00:15:52,623 ‫and then we simply take out the movie.imdbDB. 273 00:15:55,298 --> 00:15:57,900 ‫So let's just lock that to the console here, 274 00:15:57,900 --> 00:15:58,983 ‫just to make sure. 275 00:16:03,450 --> 00:16:04,443 ‫All right. 276 00:16:07,020 --> 00:16:08,493 ‫Let's check that. 277 00:16:10,410 --> 00:16:12,423 ‫Somehow it's taking a lot of time here. 278 00:16:13,290 --> 00:16:15,740 ‫So right now we have nothing on the watched list. 279 00:16:20,910 --> 00:16:22,810 ‫So let's add a couple of movies there. 280 00:16:25,470 --> 00:16:27,450 ‫All right, and for some reason, 281 00:16:27,450 --> 00:16:29,103 ‫we are getting undefined here. 282 00:16:30,210 --> 00:16:33,933 ‫Ah, but I see that's because here it should be imdbID. 283 00:16:37,230 --> 00:16:39,870 ‫And indeed, now it works. 284 00:16:39,870 --> 00:16:43,320 ‫So we have this array now, and so now all we need to do is 285 00:16:43,320 --> 00:16:47,730 ‫to check whether this array 286 00:16:47,730 --> 00:16:50,463 ‫includes the currently selected ID. 287 00:16:53,130 --> 00:16:55,620 ‫All right, and now based on that, 288 00:16:55,620 --> 00:17:00,210 ‫we will basically display this entire thing here, 289 00:17:00,210 --> 00:17:01,683 ‫so all of this. 290 00:17:04,530 --> 00:17:08,113 ‫So let's say if isWatched... 291 00:17:10,704 --> 00:17:13,200 ‫Well, let's start with if it's not watched, 292 00:17:13,200 --> 00:17:15,213 ‫then display what we have here. 293 00:17:17,130 --> 00:17:22,130 ‫And if not, then let's just create another paragraph here. 294 00:17:23,580 --> 00:17:26,820 ‫You rated this movie. 295 00:17:26,820 --> 00:17:29,520 ‫And then we can also later calculate 296 00:17:29,520 --> 00:17:33,240 ‫or derive the rating that we actually gave. 297 00:17:33,240 --> 00:17:36,070 ‫Now, here we need to return yet again 298 00:17:38,040 --> 00:17:42,933 ‫a piece of JSX with a fragment. 299 00:17:45,030 --> 00:17:46,533 ‫So just like this. 300 00:17:48,300 --> 00:17:53,163 ‫And, yeah, so here is where we then place that paragraph. 301 00:17:54,150 --> 00:17:56,370 ‫So working with JSX, as you see, 302 00:17:56,370 --> 00:17:58,140 ‫can always be a bit confusing. 303 00:17:58,140 --> 00:18:00,960 ‫And even after you have done it for years, 304 00:18:00,960 --> 00:18:03,393 ‫it can still take a little bit of time. 305 00:18:04,830 --> 00:18:09,830 ‫All right, and now you see you rated this movie. 306 00:18:10,920 --> 00:18:12,780 ‫And the same with this one, 307 00:18:12,780 --> 00:18:16,533 ‫but this one we haven't rated, so it not on our list. 308 00:18:17,610 --> 00:18:18,810 ‫So only these two. 309 00:18:18,810 --> 00:18:22,023 ‫And so for all the other ones, we can still rate them. 310 00:18:23,700 --> 00:18:25,830 ‫So we tried the third one, 311 00:18:25,830 --> 00:18:27,990 ‫and so now as we click on that again, 312 00:18:27,990 --> 00:18:31,890 ‫then you see that we can longer add it to the list. 313 00:18:31,890 --> 00:18:34,320 ‫So that option is now gone. 314 00:18:34,320 --> 00:18:36,720 ‫And so we fixed that problem. 315 00:18:36,720 --> 00:18:38,730 ‫Now all we have left to do is 316 00:18:38,730 --> 00:18:42,090 ‫to then place the current rating there. 317 00:18:42,090 --> 00:18:46,053 ‫So let's again derive that from the watched array. 318 00:18:47,070 --> 00:18:50,433 ‫So let's say const watchedUserrating. 319 00:18:54,450 --> 00:18:58,020 ‫And then let's take watched.find. 320 00:19:00,090 --> 00:19:02,380 ‫So we will just find the movie 321 00:19:03,540 --> 00:19:07,780 ‫where the movie.imdbID 322 00:19:09,750 --> 00:19:12,750 ‫is equal to the selected ID. 323 00:19:12,750 --> 00:19:14,700 ‫And then if that exists. 324 00:19:14,700 --> 00:19:17,370 ‫And so here we are now using optional chaining 325 00:19:17,370 --> 00:19:19,230 ‫because there might be 326 00:19:19,230 --> 00:19:21,840 ‫actually no movie already in the list. 327 00:19:21,840 --> 00:19:23,940 ‫So if we haven't watched a movie, 328 00:19:23,940 --> 00:19:28,940 ‫then here this find method will return nothing. 329 00:19:29,370 --> 00:19:31,620 ‫So here then we need optional chaining 330 00:19:31,620 --> 00:19:36,620 ‫so that userRating is only taken from that object 331 00:19:36,720 --> 00:19:38,583 ‫in case it actually exists. 332 00:19:40,860 --> 00:19:44,850 ‫All right, so again pretty standard JavaScript right here, 333 00:19:44,850 --> 00:19:48,240 ‫but if that's confusing, then, yeah. 334 00:19:48,240 --> 00:19:51,270 ‫As I said many times, I have a review section 335 00:19:51,270 --> 00:19:55,050 ‫for all the stuff right at the beginning of the course. 336 00:19:55,050 --> 00:19:57,123 ‫So watchedUserRating. 337 00:19:59,580 --> 00:20:03,543 ‫And, yeah, here we go. 338 00:20:04,590 --> 00:20:06,303 ‫You rated this movie seven. 339 00:20:07,140 --> 00:20:11,433 ‫Maybe let's add some nice emoji here once again. 340 00:20:13,680 --> 00:20:15,753 ‫So the star, where is it? 341 00:20:20,820 --> 00:20:25,820 ‫Okay, and so with this, we are now almost, almost done. 342 00:20:26,730 --> 00:20:30,333 ‫So our list works almost the same way as before. 343 00:20:32,790 --> 00:20:34,650 ‫So you see now it is here. 344 00:20:34,650 --> 00:20:37,350 ‫And our "Inception," for example, has the eight, 345 00:20:37,350 --> 00:20:39,450 ‫which is also had here. 346 00:20:39,450 --> 00:20:42,480 ‫And all the other ones have the seven. 347 00:20:42,480 --> 00:20:45,810 ‫Okay, and now the only thing that is left to do 348 00:20:45,810 --> 00:20:50,100 ‫is the ability to also remove movies from the list. 349 00:20:50,100 --> 00:20:53,523 ‫So that's the only thing that is here in the demo app, 350 00:20:57,360 --> 00:20:59,610 ‫but which we do not have yet. 351 00:20:59,610 --> 00:21:02,190 ‫So this button right here where we click, 352 00:21:02,190 --> 00:21:04,263 ‫and it will then remove it from the list. 353 00:21:05,520 --> 00:21:09,090 ‫All right, so let's go again back up here 354 00:21:09,090 --> 00:21:10,953 ‫where the state actually lives. 355 00:21:15,150 --> 00:21:18,000 ‫And then let's add the function 356 00:21:18,000 --> 00:21:20,553 ‫for handleDeleteWatched. 357 00:21:23,280 --> 00:21:26,223 ‫So then here let's pass in the ID, 358 00:21:28,629 --> 00:21:32,970 ‫and then here we do it just like we always do. 359 00:21:32,970 --> 00:21:36,930 ‫So we use the current watched movies array, 360 00:21:36,930 --> 00:21:40,533 ‫and then we filter out the one that we no longer want. 361 00:21:43,290 --> 00:21:44,697 ‫So we get the current movie, 362 00:21:44,697 --> 00:21:49,697 ‫and then if movie.imdb.ID 363 00:21:49,830 --> 00:21:53,310 ‫is different from the passed in ID, 364 00:21:53,310 --> 00:21:57,240 ‫then that movie will stay basically in the array. 365 00:21:57,240 --> 00:22:00,840 ‫But if it's the same, then that movie will be filtered out, 366 00:22:00,840 --> 00:22:03,960 ‫so it will be deleted basically. 367 00:22:03,960 --> 00:22:08,960 ‫And so now let's pass in this function into the list here. 368 00:22:11,820 --> 00:22:16,820 ‫So that is the WatchedMoviesList. 369 00:22:17,970 --> 00:22:21,690 ‫So the movies, so these movies right here, 370 00:22:21,690 --> 00:22:24,900 ‫they are inside the WatchedMoviesList, 371 00:22:24,900 --> 00:22:29,460 ‫and so therefore we need to pass this function into there 372 00:22:29,460 --> 00:22:30,990 ‫so that we can then pass it 373 00:22:30,990 --> 00:22:34,113 ‫into each of these movie components right there. 374 00:22:35,130 --> 00:22:36,773 ‫So onDeleteWatched 375 00:22:40,275 --> 00:22:42,192 ‫is handleDeleteWatched. 376 00:22:45,390 --> 00:22:47,883 ‫And let's move there, 377 00:22:50,400 --> 00:22:52,157 ‫so onDeleteWatched. 378 00:22:53,220 --> 00:22:55,950 ‫And then let's immediately pass that down 379 00:22:55,950 --> 00:22:57,873 ‫into the child component, 380 00:22:58,860 --> 00:23:02,237 ‫so onDeleteWatched is onDeleteWatched. 381 00:23:03,720 --> 00:23:06,483 ‫Okay, and then let's go there. 382 00:23:07,500 --> 00:23:10,000 ‫Ah, that's right here, onDeleteWatched. 383 00:23:12,060 --> 00:23:15,210 ‫And don't worry if it's taking you a lot longer 384 00:23:15,210 --> 00:23:18,300 ‫to process all of this, so to write all the code. 385 00:23:18,300 --> 00:23:20,970 ‫That's just completely normal, of course. 386 00:23:20,970 --> 00:23:23,610 ‫When I built this app here for the first time, 387 00:23:23,610 --> 00:23:26,580 ‫it also took me a few hours to build this, 388 00:23:26,580 --> 00:23:30,030 ‫so it was not nearly as fast as right now. 389 00:23:30,030 --> 00:23:34,118 ‫But of course, here we cannot take like 30 hours 390 00:23:34,118 --> 00:23:37,203 ‫(chuckles) just to build one small application, right? 391 00:23:38,550 --> 00:23:41,910 ‫But anyway, here let's now create this button. 392 00:23:41,910 --> 00:23:46,690 ‫We need to give it the class of btn-delete 393 00:23:48,412 --> 00:23:50,187 ‫and then onClick. 394 00:23:50,187 --> 00:23:53,280 ‫And don't forget it needs to be a function, 395 00:23:53,280 --> 00:23:56,957 ‫not a function call, so onDeleteWatched. 396 00:23:58,590 --> 00:24:02,580 ‫And then all we have to do is to pass in the ID. 397 00:24:02,580 --> 00:24:05,943 ‫So once again, that's movie.imdbID. 398 00:24:08,220 --> 00:24:10,023 ‫And that should be it. 399 00:24:11,070 --> 00:24:15,843 ‫So you see that the buttons are here, and let's see. 400 00:24:16,770 --> 00:24:21,033 ‫Yes, that works, and our statistics get updated. 401 00:24:22,020 --> 00:24:23,970 ‫Now here we have still this weird thing 402 00:24:23,970 --> 00:24:27,690 ‫where JavaScript is like really bad at math. 403 00:24:27,690 --> 00:24:29,490 ‫Or actually this time it looks 404 00:24:29,490 --> 00:24:31,770 ‫like it's not even JavaScript's fault. 405 00:24:31,770 --> 00:24:33,600 ‫But let's just fix that 406 00:24:33,600 --> 00:24:36,333 ‫because that looks just like really bad. 407 00:24:37,848 --> 00:24:40,800 ‫So we should be able to just append 408 00:24:40,800 --> 00:24:45,573 ‫a toFixed here, hopefully. 409 00:24:49,500 --> 00:24:50,820 ‫Yeah, that's a lot better. 410 00:24:50,820 --> 00:24:53,763 ‫Let's do the same here for the rating, toFixed. 411 00:24:55,860 --> 00:24:59,643 ‫So the two here is the number of decimal points basically 412 00:24:59,643 --> 00:25:00,993 ‫that we are allowing. 413 00:25:03,750 --> 00:25:06,900 ‫Yeah, but anyway, that's actually it. 414 00:25:06,900 --> 00:25:10,950 ‫So you see our stats updates in real time, of course, 415 00:25:10,950 --> 00:25:13,983 ‫and now everything is back to zero. 416 00:25:15,060 --> 00:25:18,150 ‫All right, so as I said in the beginning, 417 00:25:18,150 --> 00:25:23,150 ‫it was a long lecture, but we also got a lot of stuff done. 418 00:25:23,460 --> 00:25:26,820 ‫Now, I'm aware that we moved a lot of, like, data 419 00:25:26,820 --> 00:25:28,110 ‫up and down the tree 420 00:25:28,110 --> 00:25:30,360 ‫and the same for some handler functions, 421 00:25:30,360 --> 00:25:32,820 ‫and so please again just make sure 422 00:25:32,820 --> 00:25:36,360 ‫that you really understand what we just did here. 423 00:25:36,360 --> 00:25:39,540 ‫And with that, I think our component tree 424 00:25:39,540 --> 00:25:41,730 ‫can really help you out a lot. 425 00:25:41,730 --> 00:25:43,830 ‫So just analyze all the props 426 00:25:43,830 --> 00:25:46,500 ‫that all these components receive, 427 00:25:46,500 --> 00:25:49,170 ‫how the state changes over time. 428 00:25:49,170 --> 00:25:52,710 ‫And so all of that will really help you out 429 00:25:52,710 --> 00:25:55,170 ‫in becoming a better React developer 430 00:25:55,170 --> 00:25:57,780 ‫because, as I mentioned many times before, 431 00:25:57,780 --> 00:25:59,490 ‫you will also have to learn 432 00:25:59,490 --> 00:26:01,770 ‫to work with other developers' code. 433 00:26:01,770 --> 00:26:05,610 ‫And so then these skills of really analyzing the code 434 00:26:05,610 --> 00:26:08,283 ‫and the data flow will become very handy.