1 00:00:01,920 --> 00:00:02,970 Welcome back, guys, today. 2 00:00:02,990 --> 00:00:09,540 What are we going to do is we can work on The View to display this model and now we need to do a couple 3 00:00:09,540 --> 00:00:15,210 of videos here because we have more things to do, work on. 4 00:00:15,210 --> 00:00:19,500 And also we're going to we're going to change the model and we're going to add a couple of functions 5 00:00:19,500 --> 00:00:20,160 to that model. 6 00:00:20,160 --> 00:00:26,290 And we also are going to probably get more functions in this view, not less. 7 00:00:26,340 --> 00:00:31,710 That's why I want to start here, because at this stage, when we click on a movie, I just want something 8 00:00:31,710 --> 00:00:32,310 to happen. 9 00:00:32,610 --> 00:00:38,550 And that's why I just I'm not going to add more things in the model right now, but I'm going to create 10 00:00:38,550 --> 00:00:39,070 a new view. 11 00:00:39,090 --> 00:00:49,770 So back in your work, we're working start mapi start crippler and go into the views and create movie 12 00:00:50,940 --> 00:00:53,370 view that is now here. 13 00:00:53,380 --> 00:00:54,390 First things first. 14 00:00:54,690 --> 00:00:59,460 You need to import these class names right now. 15 00:01:00,330 --> 00:01:01,440 I'm just going to close this. 16 00:01:01,440 --> 00:01:02,120 We don't need it. 17 00:01:02,370 --> 00:01:09,840 So the first function we're going to do here is we're going to export CONSED display movie. 18 00:01:10,000 --> 00:01:10,310 Right. 19 00:01:10,680 --> 00:01:17,090 And this function will take the movie that we already created back in the controller. 20 00:01:17,100 --> 00:01:22,920 So I'm just going to tell you, control B and that's what that's how I can go through different files 21 00:01:22,920 --> 00:01:23,970 because I know their names. 22 00:01:23,980 --> 00:01:28,800 So I say type I and the and it gives me everything that is indexed right. 23 00:01:29,640 --> 00:01:31,890 So here we have this. 24 00:01:32,190 --> 00:01:38,370 We constantly love this one, but we store the data here and we're going to pass that data back here. 25 00:01:38,430 --> 00:01:39,790 Now, how are we going to do this? 26 00:01:40,260 --> 00:01:41,670 It's very simple. 27 00:01:41,700 --> 00:01:43,670 Just let me just write this function here. 28 00:01:43,860 --> 00:01:48,200 So movie will have the entire data that we have for the movie. 29 00:01:48,210 --> 00:01:49,150 That's that's going to be. 30 00:01:49,860 --> 00:01:56,630 Now, I'm going to say const markup here and it's going to be a template literals like this. 31 00:01:56,850 --> 00:02:05,790 And after that, we need to insert it now in the class names that just first opened the index HTML, 32 00:02:06,660 --> 00:02:07,810 the main content. 33 00:02:07,830 --> 00:02:09,650 So now I'm just going to explain this mean. 34 00:02:09,950 --> 00:02:18,830 But the first copy this one and save it in a class C as a selector and C like that main content. 35 00:02:18,840 --> 00:02:26,820 I'm just, I've just based it down this one and here I will say mean content and I'm going to get I'm 36 00:02:26,820 --> 00:02:28,290 going to cut it this one from here. 37 00:02:29,470 --> 00:02:32,970 So this mincome content already contains our class. 38 00:02:33,120 --> 00:02:33,510 Right. 39 00:02:33,960 --> 00:02:37,890 And in this main content, I do have two parts left side and right side. 40 00:02:38,160 --> 00:02:46,100 The left side is OK, let me just see that stop. 41 00:02:46,560 --> 00:02:51,690 So I just want to show you what we are going to build npm run in it. 42 00:02:51,990 --> 00:02:57,900 And actually I'm just that will be the final, the final version that we have. 43 00:02:58,110 --> 00:02:59,630 So it's going to open up here somewhere. 44 00:03:00,690 --> 00:03:01,250 Here it is. 45 00:03:02,460 --> 00:03:04,020 Now, I should have done this before. 46 00:03:04,050 --> 00:03:08,410 I'm sorry about this, guys, but let's do it like this. 47 00:03:08,410 --> 00:03:14,790 So when at that movie there's a loader, when I click here, this is what we need to achieve here. 48 00:03:15,030 --> 00:03:20,040 And we need we will need a couple of more lectures, actually, one more lecture to create this. 49 00:03:20,040 --> 00:03:23,180 But we are going to create a don't worry about. 50 00:03:23,220 --> 00:03:27,210 So is explaining this part, has it to this mean contains two parts. 51 00:03:27,240 --> 00:03:30,540 The first is the left side, which we have image of the movie. 52 00:03:30,810 --> 00:03:33,540 Then we have you can watch it actually not on YouTube. 53 00:03:33,540 --> 00:03:35,040 We just going to use that you URL. 54 00:03:35,250 --> 00:03:37,280 So that will go straight to IMDB. 55 00:03:37,320 --> 00:03:41,460 We can buy tickets right in on this left or right side. 56 00:03:41,490 --> 00:03:46,140 We have the idea, but I don't we do have a lot of information here. 57 00:03:46,320 --> 00:03:48,840 So that is what we need to copy. 58 00:03:49,020 --> 00:03:56,640 This is the entire HTML markup, so we need to go and copy until the last you hear about the section 59 00:03:57,450 --> 00:03:59,400 and we need to place that one here. 60 00:04:00,870 --> 00:04:01,270 Right. 61 00:04:01,980 --> 00:04:08,820 So it's going to be a little bit messy, but we need to work on this one now in order for you to be 62 00:04:08,820 --> 00:04:09,810 able to see things. 63 00:04:10,140 --> 00:04:11,130 So I'm going to go here. 64 00:04:12,690 --> 00:04:15,090 We straight are going to call this one. 65 00:04:15,100 --> 00:04:16,380 So first things first. 66 00:04:16,560 --> 00:04:21,420 Import this new movie view here. 67 00:04:21,540 --> 00:04:26,160 And we should get that from the movie of you. 68 00:04:26,160 --> 00:04:26,510 Right. 69 00:04:26,700 --> 00:04:29,820 So now I will be able to have the access to this display movie. 70 00:04:30,270 --> 00:04:43,290 But in order to do that, let's class last names, that main content and even sorry, not even the listener. 71 00:04:44,220 --> 00:04:45,630 We need to get here. 72 00:04:48,020 --> 00:04:56,990 Insert adjacent e-mail and we're going to insert after begin in the second parameter is the markup that 73 00:04:56,990 --> 00:04:57,650 we have here. 74 00:04:58,790 --> 00:05:04,370 I think now we're good to go because we haven't changed information here, but at least will be displayed. 75 00:05:04,550 --> 00:05:05,840 So I don't need this anymore. 76 00:05:06,140 --> 00:05:07,190 It will be displayed. 77 00:05:07,460 --> 00:05:08,900 So how are we going to do this? 78 00:05:09,070 --> 00:05:14,630 OK, now go back to the movie controller and here. 79 00:05:14,840 --> 00:05:22,640 So movie view movie view that display movie in here. 80 00:05:22,640 --> 00:05:27,830 I'm going to pass the exact same data that our consulate lost right now. 81 00:05:27,830 --> 00:05:29,540 If I see this should work. 82 00:05:29,690 --> 00:05:30,200 Here it is. 83 00:05:31,100 --> 00:05:37,160 And this is not the actual information because it has already been hard coded here and we never change 84 00:05:37,160 --> 00:05:37,270 it. 85 00:05:37,370 --> 00:05:38,830 OK, we don't have any errors. 86 00:05:38,840 --> 00:05:39,310 That's good. 87 00:05:39,530 --> 00:05:41,810 So let's find. 88 00:05:41,900 --> 00:05:43,960 So let's load this one. 89 00:05:43,970 --> 00:05:48,740 Actually, we have the ID, but let's load the information from this one right now. 90 00:05:48,740 --> 00:05:53,750 Go start from here in the post or this is stored in the IMDB poster. 91 00:05:54,260 --> 00:05:57,020 So movie that poster. 92 00:05:57,320 --> 00:06:04,210 And if I save it now, I should be able to see this one right now, go a little bit down here. 93 00:06:04,730 --> 00:06:09,950 So what I did notice here that we don't have any atrip, so I just want to have a link. 94 00:06:09,950 --> 00:06:11,600 So I'm going to cut this one here. 95 00:06:12,230 --> 00:06:14,330 I'm going to create a trap. 96 00:06:16,540 --> 00:06:23,380 And I'm going to close this up and I'm going to paste everything back now here the you are all we already 97 00:06:23,380 --> 00:06:27,380 have it in our movie Object Home movie. 98 00:06:27,430 --> 00:06:27,850 You are. 99 00:06:29,590 --> 00:06:32,290 And we've got to test this out right now. 100 00:06:32,780 --> 00:06:41,640 So if I refresh it, say cannot get in, why is this a trap movie? 101 00:06:41,650 --> 00:06:43,030 You are l.. 102 00:06:43,150 --> 00:06:45,640 OK, it's you are not. 103 00:06:45,760 --> 00:06:46,510 You are. 104 00:06:47,500 --> 00:06:49,560 So I'm going to refresh again and here. 105 00:06:49,720 --> 00:06:54,880 So if I hover you will see on the left side there it's going to go straight to IMDB. 106 00:06:54,880 --> 00:06:56,560 So this is not actually going to do. 107 00:06:56,890 --> 00:07:00,320 But at least you can see here the video right now. 108 00:07:00,970 --> 00:07:03,640 So the buy tickets, we're not going to do it at this stage. 109 00:07:04,090 --> 00:07:05,170 So we're going to skip this one. 110 00:07:05,170 --> 00:07:11,620 But we do have the title and let's say movie, that title. 111 00:07:12,340 --> 00:07:12,620 Right. 112 00:07:12,650 --> 00:07:13,880 What else we do have here? 113 00:07:14,290 --> 00:07:16,690 OK, let's go down go down here. 114 00:07:16,990 --> 00:07:26,050 So the reviews, we do have some of the reviews here and I think so this was a movie that I am the B 115 00:07:26,770 --> 00:07:30,550 rating, so it was eight point one now. 116 00:07:30,550 --> 00:07:32,380 So if I change it, here it is. 117 00:07:32,380 --> 00:07:33,250 It's seven point seven. 118 00:07:33,250 --> 00:07:34,890 It's coming from this here. 119 00:07:35,230 --> 00:07:38,050 OK, now the reviews. 120 00:07:38,620 --> 00:07:39,910 Let me just open the movie. 121 00:07:41,380 --> 00:07:43,300 I'm not sure if you have done the reviews there. 122 00:07:46,310 --> 00:07:47,840 No, we haven't done the review. 123 00:07:47,880 --> 00:07:53,300 So what we need to do, we need to include those things and they're not included at this stage. 124 00:07:53,870 --> 00:08:04,010 So I'm going to say like this, they start by IMDB votes equal to DataDot. 125 00:08:04,040 --> 00:08:05,350 I'm DB votes. 126 00:08:06,020 --> 00:08:07,430 I think it was votes. 127 00:08:08,300 --> 00:08:11,300 And let's just print it out here. 128 00:08:11,970 --> 00:08:18,440 I'm just going to copy this one here and I'm going to say I'm DBI votes, save it. 129 00:08:18,710 --> 00:08:24,920 And if we see here is almost 300 thousand more than three hundred thousand. 130 00:08:24,920 --> 00:08:25,180 Right. 131 00:08:25,670 --> 00:08:27,110 Good here. 132 00:08:27,110 --> 00:08:28,790 We're going to use this later on. 133 00:08:28,790 --> 00:08:33,050 I'm not going to do it right now because we need to create a function in order to display seven point 134 00:08:33,050 --> 00:08:33,980 seven stars. 135 00:08:34,400 --> 00:08:37,390 And we are not that Veria now or the overview. 136 00:08:37,700 --> 00:08:39,080 I am just going to close. 137 00:08:39,110 --> 00:08:43,270 I'm not going to believe that part in inside of PAETEC. 138 00:08:43,280 --> 00:08:49,240 What I'm going to say here, I'm going to go to the movie Dot Plot here. 139 00:08:49,260 --> 00:08:52,770 Now, I will be able to see a plot here for this movie. 140 00:08:53,060 --> 00:08:55,310 So this is actually if I click, it's not working. 141 00:08:55,790 --> 00:09:00,590 But for the reviews you can just write down something. 142 00:09:00,590 --> 00:09:04,100 But we will not be able to see it right now. 143 00:09:04,490 --> 00:09:08,150 What we're going to see here, he's in a PAETEC. 144 00:09:09,680 --> 00:09:11,180 So the official 145 00:09:14,660 --> 00:09:24,810 official IMDB score is and I'm going to just grab that movie again that I imdb really cool. 146 00:09:25,560 --> 00:09:38,870 Now, this has been calculated based on and I'm going to just paste here the movie that I'm DP Votes. 147 00:09:39,380 --> 00:09:39,940 All right. 148 00:09:41,750 --> 00:09:43,790 Votes recorded. 149 00:09:47,400 --> 00:09:49,930 Just some info here doesn't have to be this one. 150 00:09:50,520 --> 00:09:53,160 OK, let's just make it on this side. 151 00:09:53,250 --> 00:09:55,310 Yeah, here the cast. 152 00:09:55,830 --> 00:10:00,390 I don't have anything for the cast at the moment because here we are going to print something else. 153 00:10:00,390 --> 00:10:01,730 But I don't have the function. 154 00:10:01,740 --> 00:10:02,640 We're not going to create it. 155 00:10:03,480 --> 00:10:08,540 Now, this part here, actually, we do have the writers. 156 00:10:09,600 --> 00:10:12,060 Let me just show you, we do have this here. 157 00:10:12,990 --> 00:10:17,670 Writers and these writers are here. 158 00:10:17,670 --> 00:10:20,310 When we click on the media, we actually can change that one as well. 159 00:10:20,640 --> 00:10:26,400 And we can see what else we can see here, PAETEC. 160 00:10:28,750 --> 00:10:34,360 Actually, we're not seeing any real writing, right, sorry about this, guys, so I'm thinking something, 161 00:10:34,360 --> 00:10:39,130 and that's why, you know, I think we're good to go at this stage. 162 00:10:39,130 --> 00:10:40,970 So we need to change a couple of things here. 163 00:10:41,320 --> 00:10:44,090 Well, we will add them later on now. 164 00:10:45,190 --> 00:10:50,260 OK, so I'm going to go here and look what will happen. 165 00:10:50,260 --> 00:10:54,100 So if I go movie here, if I click this one, it will load the same movie. 166 00:10:54,100 --> 00:11:02,660 But if I click this one, then yeah, this is getting two results and in one same space. 167 00:11:03,190 --> 00:11:06,940 So how we can resolve this, we can get rid of this by cleaning the main panel. 168 00:11:07,510 --> 00:11:14,210 We already have this mean where it is access to this main content here. 169 00:11:14,470 --> 00:11:20,260 So what we need just to create a function and reset the main panel. 170 00:11:21,820 --> 00:11:24,360 This main power is where we store the entire information. 171 00:11:24,370 --> 00:11:31,400 So I'm going to say export const reset mean and that will not take any parameters. 172 00:11:31,720 --> 00:11:38,820 Ladies and gentlemen, and you should be consed, right. 173 00:11:39,440 --> 00:11:40,320 Reset Main. 174 00:11:40,360 --> 00:11:42,030 And what else we need to reset here. 175 00:11:42,160 --> 00:11:51,370 OK, I need to set the entire main content to empty so class names, names start main content. 176 00:11:51,670 --> 00:11:52,120 Cool. 177 00:11:52,360 --> 00:11:55,560 I want to set the inner HTML back to empty. 178 00:11:57,190 --> 00:12:00,390 Now that is pretty much nice. 179 00:12:00,400 --> 00:12:07,810 So what else we need to do is we need to go back to the index and we need to add this in our index just 180 00:12:07,810 --> 00:12:10,330 above this displaying here. 181 00:12:10,330 --> 00:12:14,680 So I'm going to cop I'm going to copy this line here and I'm going to say 182 00:12:17,290 --> 00:12:24,040 reset the main the main content in here. 183 00:12:24,040 --> 00:12:27,370 I'm going to just call with the movie View. 184 00:12:28,960 --> 00:12:30,550 I'm just going to call reset me. 185 00:12:30,970 --> 00:12:32,200 And that should work. 186 00:12:32,950 --> 00:12:34,000 I'm going to save it now. 187 00:12:35,080 --> 00:12:35,590 Here it is. 188 00:12:35,740 --> 00:12:38,020 I have only one because it's loaded. 189 00:12:38,020 --> 00:12:39,710 The only this one before it. 190 00:12:39,730 --> 00:12:41,020 We do have the both of them. 191 00:12:41,050 --> 00:12:41,740 Do you remember? 192 00:12:41,980 --> 00:12:43,930 So I'm just going to try movies here. 193 00:12:44,200 --> 00:12:45,040 We're going to load this one. 194 00:12:45,040 --> 00:12:45,460 Cool. 195 00:12:45,460 --> 00:12:47,140 If I flick to this one. 196 00:12:47,440 --> 00:12:48,070 Nice. 197 00:12:48,130 --> 00:12:54,310 So it's working without being without putting all of the results in one place. 198 00:12:54,610 --> 00:12:56,650 Now that is all nice. 199 00:12:56,920 --> 00:13:05,320 But what we can do here before we are waiting for the results, we can just mimic this thing so we can 200 00:13:05,320 --> 00:13:06,760 just get the loader here. 201 00:13:06,910 --> 00:13:07,320 Right. 202 00:13:08,290 --> 00:13:14,670 So I'm just going to copy this one and I'm going to put the loader back back there. 203 00:13:14,680 --> 00:13:15,040 Why? 204 00:13:15,190 --> 00:13:17,130 Because we still waiting for the results. 205 00:13:17,830 --> 00:13:18,110 Oops. 206 00:13:18,520 --> 00:13:24,250 We still waiting for the results and we can use that loader, but we want to stop the loader, same 207 00:13:24,250 --> 00:13:25,030 as we did here. 208 00:13:25,300 --> 00:13:33,790 After we get the data back right now, after we get the data, we just stopping the loader because we 209 00:13:33,790 --> 00:13:35,590 don't want to spin that indefinitely. 210 00:13:36,790 --> 00:13:37,280 Nice. 211 00:13:37,300 --> 00:13:37,800 Here it is. 212 00:13:37,960 --> 00:13:41,080 So if I save it now, it was too quick. 213 00:13:41,080 --> 00:13:50,260 So if I go back to movies, so if I use this one, here it is until it's loaded, bam, they're nice. 214 00:13:50,470 --> 00:13:52,570 So this is working like a charm. 215 00:13:52,570 --> 00:13:56,980 So what we have done this, ladies and gentlemen, we create a movie of you inside. 216 00:13:56,980 --> 00:13:59,560 We just base the entire markup. 217 00:14:00,190 --> 00:14:07,300 We just use a couple of things from based on the movies, because in the index we pass that data from 218 00:14:07,300 --> 00:14:07,720 the movie. 219 00:14:07,720 --> 00:14:08,020 Right. 220 00:14:08,470 --> 00:14:15,130 And that is how now you can now with practice, you learn how to use the functions into passing the 221 00:14:15,130 --> 00:14:19,540 data from the controller back to the view and using that here. 222 00:14:19,540 --> 00:14:20,560 So don't get confused. 223 00:14:20,560 --> 00:14:23,380 This movie is actually holding the entire data. 224 00:14:24,480 --> 00:14:30,390 From this guy here, DataLab movie, and that data was the application state, right? 225 00:14:31,020 --> 00:14:33,000 So we create the search object here. 226 00:14:34,620 --> 00:14:37,400 The second thing that we created was the movie object. 227 00:14:37,910 --> 00:14:38,670 You remember? 228 00:14:40,260 --> 00:14:41,180 I'm just going to show you. 229 00:14:41,190 --> 00:14:44,040 So make sure that you're updating all of these things as well. 230 00:14:44,280 --> 00:14:48,710 Now, if we click here and inspect comes along. 231 00:14:48,720 --> 00:14:51,740 So if you go back to the window, we're just going to zoom in here. 232 00:14:52,320 --> 00:14:55,340 We know the data in Hitwise. 233 00:14:55,920 --> 00:14:57,680 I do have the movie object here. 234 00:14:57,690 --> 00:15:00,030 I don't have the search because I've never search. 235 00:15:00,030 --> 00:15:00,960 Let's search something. 236 00:15:01,290 --> 00:15:04,290 Let's search on other movies like, I don't know, Tarzan. 237 00:15:05,970 --> 00:15:14,220 And now now if we do go back to the window, the data, I will have the movie Object and searched object 238 00:15:14,580 --> 00:15:16,770 who now in the movie Object. 239 00:15:16,770 --> 00:15:24,630 We do have all these data there and you can use as much of the data you want right now is pretty much 240 00:15:24,630 --> 00:15:29,880 it in the next lecture are going to create a couple of more functions because we want to be able to 241 00:15:30,480 --> 00:15:36,930 display these ratings here, go back to the next to these steps. 242 00:15:37,140 --> 00:15:40,980 For that, we need a function that will do that thing. 243 00:15:41,280 --> 00:15:44,670 And yeah, we will see what else. 244 00:15:44,670 --> 00:15:49,440 We need also to display the actors in here. 245 00:15:49,830 --> 00:15:51,490 So we're going to do that in the next lecture. 246 00:15:51,720 --> 00:15:54,470 So hope you like this one and I will see you in the next one.