1 00:00:01,200 --> 00:00:03,930 ‫Let's keep working on our application 2 00:00:03,930 --> 00:00:06,690 ‫and allow users to select a movie 3 00:00:06,690 --> 00:00:09,513 ‫so that they can see some details about it. 4 00:00:10,950 --> 00:00:12,960 ‫So checking our demo app, 5 00:00:12,960 --> 00:00:16,620 ‫what we want to do now again is to add the ability 6 00:00:16,620 --> 00:00:18,930 ‫to select a movie like this. 7 00:00:18,930 --> 00:00:22,020 ‫And so then our app will load some additional data 8 00:00:22,020 --> 00:00:24,750 ‫about that movie and display it here. 9 00:00:24,750 --> 00:00:27,990 ‫And then we can also go back by clicking on this button, 10 00:00:27,990 --> 00:00:30,123 ‫which will then close that movie. 11 00:00:31,980 --> 00:00:32,813 ‫All right. 12 00:00:33,840 --> 00:00:37,350 ‫So basically that is adding some more dynamics 13 00:00:37,350 --> 00:00:38,580 ‫to the application. 14 00:00:38,580 --> 00:00:41,010 ‫And so what that means once again 15 00:00:41,010 --> 00:00:44,070 ‫is that we need a new piece of state. 16 00:00:44,070 --> 00:00:46,500 ‫And so that state will basically store 17 00:00:46,500 --> 00:00:49,650 ‫which movie has been selected here. 18 00:00:49,650 --> 00:00:53,190 ‫Now the selection itself, so updating the state, 19 00:00:53,190 --> 00:00:57,780 ‫will happen here in this box on the left side, right? 20 00:00:57,780 --> 00:01:00,450 ‫But the displaying of the movie happens here 21 00:01:00,450 --> 00:01:03,450 ‫on the right side, so in this box. 22 00:01:03,450 --> 00:01:07,650 ‫So this box will also need to know about the selected ID. 23 00:01:07,650 --> 00:01:11,370 ‫And so this means that this new piece of state, 24 00:01:11,370 --> 00:01:15,540 ‫so the selected ID state, will have to live here 25 00:01:15,540 --> 00:01:18,633 ‫in the parent component, so right in app. 26 00:01:20,460 --> 00:01:22,710 ‫So, selectedId 27 00:01:22,710 --> 00:01:24,360 ‫and setSelectedId, 28 00:01:27,995 --> 00:01:28,828 ‫useState, 29 00:01:29,880 --> 00:01:33,150 ‫and we are going to start with null. 30 00:01:33,150 --> 00:01:36,810 ‫And here it's, of course, Selected. 31 00:01:36,810 --> 00:01:39,450 ‫Then here, let's get rid of this, 32 00:01:39,450 --> 00:01:41,310 ‫which we don't need anymore. 33 00:01:41,310 --> 00:01:45,120 ‫And now you might be wondering why here we are only going 34 00:01:45,120 --> 00:01:49,710 ‫to store the ID and not the entire movie object itself. 35 00:01:49,710 --> 00:01:52,560 ‫Well, the reason for that is that the movies 36 00:01:52,560 --> 00:01:56,310 ‫that we get here from the search are very limited. 37 00:01:56,310 --> 00:02:00,300 ‫So we only get the data really about the title, the year, 38 00:02:00,300 --> 00:02:01,770 ‫and the poster here. 39 00:02:01,770 --> 00:02:03,120 ‫While here on the right side, 40 00:02:03,120 --> 00:02:05,340 ‫we will want all kinds of details 41 00:02:05,340 --> 00:02:08,160 ‫that are not included in this first search. 42 00:02:08,160 --> 00:02:11,790 ‫So there will have to be another API call. 43 00:02:11,790 --> 00:02:14,190 ‫And we can see that here when we click, 44 00:02:14,190 --> 00:02:15,960 ‫it loads the movie again. 45 00:02:15,960 --> 00:02:19,770 ‫And so only then all of these details here are fetched. 46 00:02:19,770 --> 00:02:21,390 ‫And this fetch here, 47 00:02:21,390 --> 00:02:25,200 ‫so this movie will be fetched based on the ID 48 00:02:25,200 --> 00:02:27,690 ‫that we got here in this array. 49 00:02:27,690 --> 00:02:30,210 ‫So let's take a look at that quickly. 50 00:02:30,210 --> 00:02:31,620 ‫So it's very important 51 00:02:31,620 --> 00:02:35,700 ‫that you understand how we actually built this application. 52 00:02:35,700 --> 00:02:39,750 ‫So it's not just about the React concepts themselves 53 00:02:39,750 --> 00:02:43,530 ‫but also about the logic of how we build an application. 54 00:02:43,530 --> 00:02:45,530 ‫So I think that's also pretty important. 55 00:02:47,610 --> 00:02:49,713 ‫So let's see. 56 00:02:51,240 --> 00:02:53,850 ‫So taking a close look at our results, 57 00:02:53,850 --> 00:02:55,890 ‫each of the objects has the poster, 58 00:02:55,890 --> 00:03:00,210 ‫the title, the type, the year, and the ID. 59 00:03:00,210 --> 00:03:02,130 ‫And again it's based on this ID 60 00:03:02,130 --> 00:03:04,800 ‫that we then will search for details. 61 00:03:04,800 --> 00:03:08,130 ‫And actually let's copy this ID here, 62 00:03:08,130 --> 00:03:12,843 ‫and I will temporarily use that here. 63 00:03:14,400 --> 00:03:15,273 ‫All right. 64 00:03:17,340 --> 00:03:19,410 ‫So just so we can see what happens 65 00:03:19,410 --> 00:03:22,083 ‫when we actually have a selected movie. 66 00:03:23,130 --> 00:03:25,380 ‫Then we no longer need this, 67 00:03:25,380 --> 00:03:28,770 ‫and now let's create a new component. 68 00:03:28,770 --> 00:03:31,320 ‫And so that component will then be displayed 69 00:03:31,320 --> 00:03:33,093 ‫if there is a selected ID. 70 00:03:34,470 --> 00:03:38,070 ‫So basically that's like a selected movie. 71 00:03:38,070 --> 00:03:41,133 ‫So movie list, movie, let's do it right here, 72 00:03:42,750 --> 00:03:44,760 ‫function SelectedMovie. 73 00:03:47,100 --> 00:03:49,140 ‫And this one will get as an input, 74 00:03:49,140 --> 00:03:51,393 ‫as you can guess, the selectedId. 75 00:03:53,910 --> 00:03:56,580 ‫So here let's for now just return a div 76 00:03:56,580 --> 00:03:59,253 ‫with the class name of detail. 77 00:04:01,560 --> 00:04:03,870 ‫And then for now, all we are going to do 78 00:04:03,870 --> 00:04:07,353 ‫is to display that selected ID in there. 79 00:04:08,370 --> 00:04:09,333 ‫All right. 80 00:04:10,350 --> 00:04:15,090 ‫And now going back up here into our JSX, 81 00:04:15,090 --> 00:04:19,470 ‫here on the right side, we now want to display not this, 82 00:04:19,470 --> 00:04:22,470 ‫but instead that component that we just created 83 00:04:22,470 --> 00:04:25,413 ‫in case that there is a selected ID. 84 00:04:26,670 --> 00:04:30,930 ‫So let's wrap all of this into a JavaScript mode block, 85 00:04:30,930 --> 00:04:33,330 ‫and then let's do a ternary operator. 86 00:04:33,330 --> 00:04:35,760 ‫So all we have to do is to say 87 00:04:35,760 --> 00:04:40,303 ‫if there is a selectedId, then display MovieDetail. 88 00:04:41,972 --> 00:04:44,970 ‫I'm not sure why that's not appearing here. 89 00:04:44,970 --> 00:04:46,570 ‫Maybe I gave it some other name. 90 00:04:47,610 --> 00:04:48,783 ‫Ah, SelectedMovie. 91 00:04:49,860 --> 00:04:52,360 ‫Well, actually I wanted to call it MovieDetail 92 00:04:53,790 --> 00:04:55,683 ‫or MovieDetails even. 93 00:04:57,120 --> 00:05:00,600 ‫So that makes a bit more sense, I think. 94 00:05:00,600 --> 00:05:02,287 ‫Yeah, so MovieDetails. 95 00:05:03,551 --> 00:05:07,070 ‫And then we pass in the selectedId. 96 00:05:10,440 --> 00:05:11,580 ‫Okay. 97 00:05:11,580 --> 00:05:16,260 ‫And if not, then that's where we want to display these two. 98 00:05:16,260 --> 00:05:19,590 ‫However, this is not going to work, so let's see. 99 00:05:19,590 --> 00:05:21,600 ‫And indeed, once again, 100 00:05:21,600 --> 00:05:25,595 ‫it's because here we have a piece of JSX, 101 00:05:25,595 --> 00:05:30,150 ‫so all this, which has basically two root elements. 102 00:05:30,150 --> 00:05:33,300 ‫So it doesn't have just one single parent element, 103 00:05:33,300 --> 00:05:37,680 ‫which, remember, is always necessary in a piece of JSX. 104 00:05:37,680 --> 00:05:41,880 ‫And so this is yet another great use case of a fragment 105 00:05:41,880 --> 00:05:43,650 ‫because, of course, we don't want 106 00:05:43,650 --> 00:05:46,380 ‫to create like a new div element 107 00:05:46,380 --> 00:05:48,843 ‫or something like that around these two. 108 00:05:50,640 --> 00:05:51,870 ‫So, just like this. 109 00:05:51,870 --> 00:05:54,360 ‫And again the reason for that is here 110 00:05:54,360 --> 00:05:58,860 ‫as the third part of the ternary operator, 111 00:05:58,860 --> 00:06:01,020 ‫we needed a new piece of JSX, 112 00:06:01,020 --> 00:06:05,520 ‫which cannot have two elements as the root element. 113 00:06:05,520 --> 00:06:09,513 ‫And so we just created one root element with the fragment. 114 00:06:10,710 --> 00:06:12,000 ‫Okay. 115 00:06:12,000 --> 00:06:17,000 ‫So now we can indeed see this ID that we passed in, 116 00:06:17,220 --> 00:06:18,840 ‫so the SelectedId, 117 00:06:18,840 --> 00:06:21,483 ‫but, of course, we don't want this to be hard-coded. 118 00:06:22,590 --> 00:06:24,240 ‫So let's set it back to null, 119 00:06:24,240 --> 00:06:26,370 ‫and then this will disappear. 120 00:06:26,370 --> 00:06:27,390 ‫Indeed. 121 00:06:27,390 --> 00:06:31,413 ‫And so the final step, as always, is to update the state. 122 00:06:32,460 --> 00:06:35,040 ‫So where are we going to do that? 123 00:06:35,040 --> 00:06:38,010 ‫Well, basically as the user clicks one 124 00:06:38,010 --> 00:06:40,110 ‫of these movie objects 125 00:06:40,110 --> 00:06:42,603 ‫or actually movie components. 126 00:06:43,440 --> 00:06:46,473 ‫So let's go to the movie component then, 127 00:06:47,550 --> 00:06:50,010 ‫and let's do that here with the trick 128 00:06:50,010 --> 00:06:53,850 ‫where we hover and then command or control + click. 129 00:06:53,850 --> 00:06:58,560 ‫So, movie list, and then right here on the movie on the li, 130 00:06:58,560 --> 00:07:01,983 ‫we can attach the onClick handler. 131 00:07:03,060 --> 00:07:06,210 ‫However, we don't have access to any function here yet, 132 00:07:06,210 --> 00:07:09,873 ‫so let's first go back and create that function. 133 00:07:11,370 --> 00:07:15,273 ‫So let's do that, well, maybe before the effect. 134 00:07:16,620 --> 00:07:18,753 ‫Okay, so let's do that here. 135 00:07:19,710 --> 00:07:22,650 ‫So this is just what we have done many times before, 136 00:07:22,650 --> 00:07:25,680 ‫which is in the component that owns the state, 137 00:07:25,680 --> 00:07:29,310 ‫we write some event handler functions that we then pass down 138 00:07:29,310 --> 00:07:33,333 ‫to some child component to update the state in the parent. 139 00:07:34,290 --> 00:07:37,413 ‫So here I will call it handleSelectMovie. 140 00:07:40,560 --> 00:07:44,343 ‫And so then this will pass in a movie ID. 141 00:07:46,350 --> 00:07:50,400 ‫Set selected ID to that ID. 142 00:07:50,400 --> 00:07:52,080 ‫And so we could also have simply 143 00:07:52,080 --> 00:07:55,590 ‫passed down the setSelectedId, 144 00:07:55,590 --> 00:07:56,970 ‫but I think like this, 145 00:07:56,970 --> 00:07:59,463 ‫it is a little bit cleaner in some situations. 146 00:08:01,500 --> 00:08:02,333 ‫All right. 147 00:08:05,880 --> 00:08:07,620 ‫So it's cleaner in my view 148 00:08:07,620 --> 00:08:10,650 ‫because like this, we give it a really clear name, 149 00:08:10,650 --> 00:08:14,223 ‫and so then we know exactly what's happening. 150 00:08:16,830 --> 00:08:19,533 ‫Ah, of course, we didn't pass it yet into the movie. 151 00:08:20,550 --> 00:08:25,470 ‫So that movie is inside MovieList. 152 00:08:25,470 --> 00:08:27,900 ‫And so we need to pass it there first. 153 00:08:27,900 --> 00:08:30,810 ‫So here we are going to need a little bit of prop drilling, 154 00:08:30,810 --> 00:08:32,700 ‫but if it's just one level, 155 00:08:32,700 --> 00:08:35,220 ‫then that's not a big deal at all. 156 00:08:35,220 --> 00:08:37,680 ‫So let's call this here onSelectMovie, 157 00:08:41,550 --> 00:08:42,850 ‫will be handleSelectMovie. 158 00:08:44,130 --> 00:08:48,420 ‫And then let's just grab this, move to our movie list. 159 00:08:48,420 --> 00:08:50,640 ‫Then we accept that prop here 160 00:08:50,640 --> 00:08:54,060 ‫and pass it right into the movie, 161 00:08:54,060 --> 00:08:57,190 ‫so just like we have have been doing so many times 162 00:08:58,290 --> 00:09:00,510 ‫except that here and then here, 163 00:09:00,510 --> 00:09:03,240 ‫we need to create a brand-new function, 164 00:09:03,240 --> 00:09:05,673 ‫remember, not just calling a function. 165 00:09:06,720 --> 00:09:10,247 ‫Okay, and then we pass in the movie.imdbID. 166 00:09:13,980 --> 00:09:16,050 ‫So we can see that right from here. 167 00:09:16,050 --> 00:09:17,760 ‫So in each of the movie objects, 168 00:09:17,760 --> 00:09:20,433 ‫the ID has this name right here. 169 00:09:21,330 --> 00:09:24,663 ‫Okay, give it a save, and now let's see what happens. 170 00:09:25,920 --> 00:09:26,970 ‫So we click here. 171 00:09:26,970 --> 00:09:28,770 ‫Then we get this ID. 172 00:09:28,770 --> 00:09:30,300 ‫Then we get another one. 173 00:09:30,300 --> 00:09:32,760 ‫And then here we get this, 174 00:09:32,760 --> 00:09:34,713 ‫which is exactly the same as this one. 175 00:09:35,610 --> 00:09:38,010 ‫So, this is working great. 176 00:09:38,010 --> 00:09:39,030 ‫The only thing I noticed 177 00:09:39,030 --> 00:09:42,543 ‫is that here we don't have these styles, which here we have. 178 00:09:43,500 --> 00:09:45,513 ‫Let me just see if we are missing, 179 00:09:47,130 --> 00:09:48,960 ‫if we are missing some styles here. 180 00:09:48,960 --> 00:09:51,150 ‫And apparently this list here 181 00:09:51,150 --> 00:09:56,150 ‫also needs the list of movies class. 182 00:09:57,240 --> 00:09:59,850 ‫So I forgot that one earlier. 183 00:09:59,850 --> 00:10:04,380 ‫And yeah, so now as we hover over each of these movies, 184 00:10:04,380 --> 00:10:06,690 ‫we get this nice highlighting. 185 00:10:06,690 --> 00:10:08,670 ‫Okay, and now just to finish, 186 00:10:08,670 --> 00:10:10,410 ‫let's quickly add the ability 187 00:10:10,410 --> 00:10:14,130 ‫to also close basically the movie detail, 188 00:10:14,130 --> 00:10:18,783 ‫which is simply to set the selected ID back to null. 189 00:10:20,280 --> 00:10:25,280 ‫So, let's create that function as well, 190 00:10:25,800 --> 00:10:26,823 ‫so handleCloseMovie. 191 00:10:31,110 --> 00:10:33,300 ‫And this one doesn't need anything 192 00:10:33,300 --> 00:10:38,290 ‫because all it will do is to set the selected ID to null. 193 00:10:40,950 --> 00:10:42,540 ‫Okay. 194 00:10:42,540 --> 00:10:45,030 ‫And then, of course, we need to pass this function 195 00:10:45,030 --> 00:10:46,803 ‫into the movie detail. 196 00:10:48,750 --> 00:10:52,500 ‫So right here, onCloseMovie. 197 00:10:56,040 --> 00:10:58,953 ‫And then let's grab that, move there, 198 00:11:00,420 --> 00:11:01,890 ‫pass it in. 199 00:11:01,890 --> 00:11:05,043 ‫And now let's just create a button here. 200 00:11:07,238 --> 00:11:09,640 ‫And this one has the class of btn-back 201 00:11:13,020 --> 00:11:14,343 ‫and onClick. 202 00:11:16,170 --> 00:11:18,810 ‫Well, it's simply onCloseMovie. 203 00:11:18,810 --> 00:11:21,630 ‫And so since in this case we are not passing 204 00:11:21,630 --> 00:11:24,480 ‫in any ID here or anything, 205 00:11:24,480 --> 00:11:27,450 ‫there's no need to create a new function. 206 00:11:27,450 --> 00:11:29,490 ‫So, of course, we could do this, 207 00:11:29,490 --> 00:11:32,220 ‫which would be exactly the same thing, 208 00:11:32,220 --> 00:11:35,160 ‫but that doesn't make sense in this case 209 00:11:35,160 --> 00:11:36,660 ‫because, again, there's no need 210 00:11:36,660 --> 00:11:39,063 ‫to pass anything into this function. 211 00:11:40,290 --> 00:11:42,330 ‫So let's just do this. 212 00:11:42,330 --> 00:11:46,473 ‫But, of course, we also need some content into that button. 213 00:11:49,170 --> 00:11:54,170 ‫So let's use this HTML entity, which means left arrow. 214 00:11:54,810 --> 00:11:56,340 ‫And there we go. 215 00:11:56,340 --> 00:12:00,033 ‫So if we click this, then we go back to what we had before. 216 00:12:01,620 --> 00:12:04,290 ‫Now finally, we could also implement 217 00:12:04,290 --> 00:12:05,850 ‫that when we click here again, 218 00:12:05,850 --> 00:12:07,983 ‫that it will also close the movie. 219 00:12:09,120 --> 00:12:12,120 ‫So, of course, if we click on one of the other ones, 220 00:12:12,120 --> 00:12:14,160 ‫then we see the ID here change. 221 00:12:14,160 --> 00:12:15,810 ‫But if we click on the same again, 222 00:12:15,810 --> 00:12:18,930 ‫we could also make it so that the movie then closes. 223 00:12:18,930 --> 00:12:22,740 ‫And so let's do that to finish this lecture. 224 00:12:22,740 --> 00:12:26,073 ‫So going back here, that's not too hard. 225 00:12:27,240 --> 00:12:31,080 ‫So right here, we can simply do a ternary operator. 226 00:12:31,080 --> 00:12:33,990 ‫So basically we can ask if the ID is equal 227 00:12:33,990 --> 00:12:38,990 ‫to the current one, then set the new selected ID to null. 228 00:12:39,330 --> 00:12:43,200 ‫So this means that we will now set the new state 229 00:12:43,200 --> 00:12:45,180 ‫based on the current one. 230 00:12:45,180 --> 00:12:49,230 ‫So let's just use the callback, 231 00:12:49,230 --> 00:12:50,730 ‫so selectedId, 232 00:12:50,730 --> 00:12:55,260 ‫and then we just say id equal to the already selectedId. 233 00:12:55,260 --> 00:12:57,840 ‫And if so, set the new one to null 234 00:12:57,840 --> 00:13:00,273 ‫and, otherwise, to the passed in ID. 235 00:13:01,980 --> 00:13:03,720 ‫So let's try that. 236 00:13:03,720 --> 00:13:07,140 ‫And if I click again, ah, then it closes. 237 00:13:07,140 --> 00:13:08,250 ‫Beautiful. 238 00:13:08,250 --> 00:13:11,940 ‫And so with this, we are now ready to, in the next lecture, 239 00:13:11,940 --> 00:13:14,730 ‫actually fetch the movie that corresponds 240 00:13:14,730 --> 00:13:16,803 ‫to the selected ID here.