1 00:00:01,450 --> 00:00:02,450 Welcome back, everyone. 2 00:00:02,470 --> 00:00:05,080 In today's lecture, we will quote the movie controller. 3 00:00:05,140 --> 00:00:08,620 Now this movie controller will be different from the search controller, right? 4 00:00:08,660 --> 00:00:11,770 Obviously, we need to load the movie that we clicked on. 5 00:00:11,890 --> 00:00:13,990 Now, here we can learn a couple of things. 6 00:00:14,380 --> 00:00:19,930 We can learn to get data from the Beechboro, use the hash change event, use alone event. 7 00:00:20,080 --> 00:00:20,530 Right. 8 00:00:20,560 --> 00:00:23,920 So we're going to do this pretty much three things. 9 00:00:24,100 --> 00:00:26,510 And, yeah, we're going to set up the controller. 10 00:00:26,530 --> 00:00:34,150 Now, we're not going to be able to display anything here, for example, but we will try to get this. 11 00:00:34,330 --> 00:00:39,070 So when I click on this one to be able to see something, so we we're going to control it, like, by 12 00:00:39,070 --> 00:00:43,780 the way, right now, what else we need to do here? 13 00:00:44,140 --> 00:00:44,770 Nothing else. 14 00:00:44,770 --> 00:00:45,680 We need to just start. 15 00:00:45,700 --> 00:00:47,180 So why this is happening here? 16 00:00:47,350 --> 00:00:52,930 So, look, when I click here, we are going we are having this hash, plus the idea of the movie. 17 00:00:53,320 --> 00:00:53,860 Why? 18 00:00:53,860 --> 00:00:57,180 Because if we go, I'm just going to close everything here. 19 00:00:57,490 --> 00:01:03,160 If we go to the search movie view here, we do have this. 20 00:01:03,670 --> 00:01:07,240 We display the movie and the aircraft is actually the link. 21 00:01:07,990 --> 00:01:13,450 We do have the hash plus the movie idea that we've done this by ourself and we need this. 22 00:01:13,720 --> 00:01:19,120 So we're going to grab this movie idea from here and we're going to manipulate because I know this movie, 23 00:01:19,120 --> 00:01:24,910 I'd I would be able to get that to use the method that we did last time. 24 00:01:24,910 --> 00:01:25,260 Right. 25 00:01:25,870 --> 00:01:27,070 So I go to movie. 26 00:01:27,070 --> 00:01:33,970 I will be able to use this method and I will be able to set to call the class in passing the movie constructor, 27 00:01:34,450 --> 00:01:35,380 the idea constructor. 28 00:01:35,380 --> 00:01:35,630 Right. 29 00:01:36,850 --> 00:01:39,010 That's pretty much what we have to do. 30 00:01:39,050 --> 00:01:41,410 Now let's start working. 31 00:01:41,410 --> 00:01:45,190 So open up the index, the index file. 32 00:01:45,430 --> 00:01:53,140 Now, that one here where we have the movie, let's do this one or. 33 00:01:53,410 --> 00:01:54,540 Yeah, we're going to build this one. 34 00:01:54,550 --> 00:01:55,180 We don't need it. 35 00:01:55,390 --> 00:01:56,140 Now, here. 36 00:01:56,140 --> 00:01:56,980 First thing's first. 37 00:01:57,310 --> 00:02:00,180 We need to add event listener. 38 00:02:00,190 --> 00:02:02,800 Now, how where are we going to add this event. 39 00:02:02,800 --> 00:02:05,260 Listener So it's here actually. 40 00:02:05,260 --> 00:02:05,560 Right. 41 00:02:05,710 --> 00:02:07,320 It's in the U.S. or else what. 42 00:02:07,330 --> 00:02:11,920 We can't actually get any other on click event listener. 43 00:02:12,220 --> 00:02:15,820 But what we can do, we have the access of the global window. 44 00:02:15,820 --> 00:02:16,140 Right. 45 00:02:16,420 --> 00:02:23,350 So what we can do here, we can say we dot an event listener and there is a method called hash change. 46 00:02:23,350 --> 00:02:24,430 So we're going to use this one. 47 00:02:25,180 --> 00:02:27,640 And here we need to pass the name of the function. 48 00:02:28,060 --> 00:02:30,490 Actually, our function will be movie controller. 49 00:02:33,510 --> 00:02:40,190 And this function, we haven't done it yet, right, so let's make sure that we write the function here, 50 00:02:40,200 --> 00:02:40,980 movie control. 51 00:02:40,980 --> 00:02:46,800 So I'm going to say cast movie controller and it will not take any parameters. 52 00:02:46,830 --> 00:02:50,370 For now, let's write this function, OK? 53 00:02:50,370 --> 00:02:56,730 Now, in a movie controller, every time we click on this one, every time actually changes this one, 54 00:02:56,910 --> 00:02:57,990 it will go here. 55 00:02:58,290 --> 00:03:02,280 Right, because we are listening for changes on the hash. 56 00:03:02,580 --> 00:03:02,960 Nice. 57 00:03:03,210 --> 00:03:08,220 So what we will do is actually build this controller first things first. 58 00:03:08,430 --> 00:03:09,750 We need to get the idea. 59 00:03:10,110 --> 00:03:11,700 We need to get this one here. 60 00:03:12,390 --> 00:03:14,700 OK, how are we going to do this? 61 00:03:14,910 --> 00:03:20,340 So we're going to say consed I'm going to say everything, the constants of ideas in here. 62 00:03:20,370 --> 00:03:30,300 What I will use is window dot location sorry, not local storage location. 63 00:03:30,720 --> 00:03:33,430 And then I will use the hash method. 64 00:03:33,760 --> 00:03:41,190 Now if I console it like I would probably today my my computer is slower than me. 65 00:03:41,190 --> 00:03:43,230 That is not good. 66 00:03:43,860 --> 00:03:45,240 I'm going to come to love the idea. 67 00:03:46,140 --> 00:03:49,200 So let's go to the movies. 68 00:03:49,930 --> 00:03:55,210 Like any movie you want in here is actually can't see it's too small. 69 00:03:55,230 --> 00:03:55,510 Right. 70 00:03:55,770 --> 00:04:00,120 If I change it here it will go to 20 this. 71 00:04:00,540 --> 00:04:06,240 So if I click twice to three times, this is not change and it will not fire up this event. 72 00:04:06,390 --> 00:04:07,410 But if I click here. 73 00:04:07,410 --> 00:04:08,400 If I click here. 74 00:04:08,700 --> 00:04:10,500 Yeah, the event will be there. 75 00:04:10,650 --> 00:04:16,620 I mean we will you will be able to see now because I've clicked everything here, we can just go back 76 00:04:16,620 --> 00:04:23,760 here and it's pretty much working, but it's not working because we can't this actually it is not usable. 77 00:04:24,030 --> 00:04:27,330 It has a hasheem front so we need to clean it up now. 78 00:04:27,330 --> 00:04:28,230 How are we going to do this? 79 00:04:28,800 --> 00:04:31,360 There is a very simple because this is a string. 80 00:04:31,400 --> 00:04:39,300 What we can do, we can say just replace and we can we can just define what it needs to be replaced. 81 00:04:39,540 --> 00:04:44,010 So I want to be replace this hash symbol with nothing with empty. 82 00:04:44,670 --> 00:04:46,380 Now, that's pretty much it. 83 00:04:46,800 --> 00:04:49,080 OK, let's do movies again. 84 00:04:49,410 --> 00:04:50,340 Click on here. 85 00:04:50,340 --> 00:04:56,970 And I do have the idea only without hash cuz that is what we need now. 86 00:04:57,330 --> 00:05:04,360 From now on we need to find out, OK, if we have ID, so we need to check if we have a deal. 87 00:05:04,440 --> 00:05:06,840 This is actually not empty. 88 00:05:07,830 --> 00:05:14,670 What we want to do now first I want to create the movie new movie data. 89 00:05:17,700 --> 00:05:18,190 Right. 90 00:05:18,300 --> 00:05:24,610 So we need to create new movie object, and the second is to get movie data, right. 91 00:05:24,810 --> 00:05:27,460 So how are we going to do this, get movie data now? 92 00:05:28,740 --> 00:05:30,800 It's very simple data, that movie. 93 00:05:31,410 --> 00:05:37,070 So we're going to create this one equal new movie here. 94 00:05:37,080 --> 00:05:41,510 Remember here that we delete that one before we were passing the ID. 95 00:05:41,680 --> 00:05:41,990 All right. 96 00:05:42,180 --> 00:05:43,790 But now we do have this idea here. 97 00:05:43,800 --> 00:05:49,800 So I can just pass this to and it will go straight to the constructor and it will set this ID. 98 00:05:50,160 --> 00:05:52,020 So I'm talking about the movie object. 99 00:05:52,290 --> 00:05:53,420 The movie model. 100 00:05:53,460 --> 00:05:53,820 Right. 101 00:05:54,720 --> 00:05:55,830 So we actually doing this. 102 00:05:56,850 --> 00:06:03,050 So we create a new object and we save in our global data global application state. 103 00:06:03,070 --> 00:06:03,390 Right. 104 00:06:03,870 --> 00:06:04,340 Nice. 105 00:06:04,770 --> 00:06:06,030 What else we need to do here? 106 00:06:06,120 --> 00:06:14,820 What else we need to do is actually to get the data to call data, not movie and call that get movie. 107 00:06:14,820 --> 00:06:17,150 I think get movie was the method right. 108 00:06:18,060 --> 00:06:18,490 There it is. 109 00:06:18,870 --> 00:06:21,840 So what I'm doing here, I'm saving this movie now. 110 00:06:21,960 --> 00:06:23,880 I've just created that movie. 111 00:06:23,910 --> 00:06:24,370 Right. 112 00:06:24,420 --> 00:06:25,770 All the data here. 113 00:06:26,500 --> 00:06:33,270 So the title rated director in plus all these two methods here that we just created last time. 114 00:06:33,360 --> 00:06:40,620 Okay, let's test this out because I don't want to talk too much without being able to see. 115 00:06:40,630 --> 00:06:49,410 So if I click here, so I do have the object title teens go stuff like that that is loading. 116 00:06:50,670 --> 00:06:56,280 So what we can do because we do have the access of the window, the data now here it is. 117 00:06:56,280 --> 00:06:57,910 I do have another object. 118 00:06:57,930 --> 00:07:00,050 It's not only search, right. 119 00:07:00,350 --> 00:07:03,240 So if I click here, I have this cool. 120 00:07:03,360 --> 00:07:05,030 I have the movie IMDB title. 121 00:07:05,040 --> 00:07:06,800 Let's see what we have in the object. 122 00:07:07,050 --> 00:07:08,370 Let's see if everything is working. 123 00:07:08,820 --> 00:07:17,370 I worked it good up box office not applicable director good main actors Greg Greg Sipes. 124 00:07:17,370 --> 00:07:18,170 I have no idea. 125 00:07:18,180 --> 00:07:21,900 Here he is actually the actors now are changed into Harry. 126 00:07:22,170 --> 00:07:30,930 Remember we did is we change this cast new actors and we put it here and we overwrite this one. 127 00:07:30,990 --> 00:07:31,410 Right. 128 00:07:31,830 --> 00:07:32,240 Nice. 129 00:07:32,940 --> 00:07:37,170 So we have that one uh plot poster. 130 00:07:37,170 --> 00:07:38,820 Good production. 131 00:07:38,820 --> 00:07:39,720 Warner Bros. 132 00:07:40,110 --> 00:07:40,770 Rated. 133 00:07:40,770 --> 00:07:43,350 It's undefined means that we have somewhere mistake. 134 00:07:43,860 --> 00:07:47,340 Ladies and gentlemen, the title Good The You are out now. 135 00:07:47,340 --> 00:07:48,330 The Earl is working. 136 00:07:48,330 --> 00:07:52,320 So if I click on the Eurail, let's let's copy, copy this. 137 00:07:52,320 --> 00:08:01,500 You are here and if I go back straight there it will give me Teen Titans go and it will give me everything 138 00:08:01,500 --> 00:08:02,310 that we want. 139 00:08:02,490 --> 00:08:05,940 So even this is working right now. 140 00:08:05,940 --> 00:08:10,620 The writers, we do have the error of them and it's inside of every good. 141 00:08:10,920 --> 00:08:12,820 Everything that we have done, it's working. 142 00:08:12,820 --> 00:08:13,380 Is that this. 143 00:08:13,380 --> 00:08:13,920 Read it. 144 00:08:14,250 --> 00:08:15,330 Let's see what's happening. 145 00:08:15,330 --> 00:08:16,860 Here it is. 146 00:08:16,860 --> 00:08:17,250 Read it. 147 00:08:17,400 --> 00:08:17,910 OK, yeah. 148 00:08:17,910 --> 00:08:25,950 Probably because this should be the capital are everything is capital on this side right now. 149 00:08:26,190 --> 00:08:34,560 Let's refresh go back to the movies and I'm going to click this one and let's data not. 150 00:08:34,590 --> 00:08:35,190 Oh sorry. 151 00:08:35,190 --> 00:08:42,870 We know that data and let's see if that will work now actually we can kind of like this one, ladies 152 00:08:42,870 --> 00:08:45,210 and gentlemen, without doing this here. 153 00:08:45,240 --> 00:08:46,680 It's, uh, rated. 154 00:08:46,680 --> 00:08:47,590 Where was the rated? 155 00:08:48,640 --> 00:08:50,550 It is rated PG. 156 00:08:50,580 --> 00:08:51,630 Oh, my God. 157 00:08:51,660 --> 00:08:54,930 Everything is working now here. 158 00:08:54,930 --> 00:08:56,640 Are we going to see this fully 159 00:08:59,610 --> 00:09:00,250 displayed? 160 00:09:00,250 --> 00:09:12,840 The data come on the movie now here we don't have any any view because the views are responsible for 161 00:09:12,840 --> 00:09:13,710 displaying the data. 162 00:09:13,830 --> 00:09:18,530 So I'm just going to cancel it like that data. 163 00:09:18,530 --> 00:09:19,230 That movie. 164 00:09:19,630 --> 00:09:22,380 Right, good. 165 00:09:22,680 --> 00:09:28,890 Now what else I want here is something that let's save it. 166 00:09:28,890 --> 00:09:29,850 Let's refresh. 167 00:09:30,660 --> 00:09:32,700 Let's just see if it's working. 168 00:09:32,700 --> 00:09:37,020 I'm going to click here and here it is. 169 00:09:37,950 --> 00:09:39,840 So we do have the object first. 170 00:09:41,100 --> 00:09:41,670 Nice. 171 00:09:41,910 --> 00:09:43,410 Everything is working, ladies and gentlemen. 172 00:09:43,710 --> 00:09:50,340 And before we are just bringing the previous one, let's see, just going to comment this one that we 173 00:09:50,340 --> 00:09:51,870 don't need this one anymore. 174 00:09:52,170 --> 00:09:55,530 So I'm just going to go movie movies again. 175 00:09:55,530 --> 00:09:57,270 I'm going to click here and here it is. 176 00:09:58,470 --> 00:09:59,490 Everything is there. 177 00:09:59,490 --> 00:09:59,880 Nice. 178 00:10:00,090 --> 00:10:00,840 Now what? 179 00:10:00,840 --> 00:10:02,640 I want to show you something else. 180 00:10:03,120 --> 00:10:10,680 Look, when I do what I do, if I refresh that idea that I click before it's staying in the euro so 181 00:10:10,680 --> 00:10:15,420 we can use this, we have the power on this to use it to our own benefit. 182 00:10:15,420 --> 00:10:16,530 So what I can do. 183 00:10:17,280 --> 00:10:23,190 I can just create another event listener and that even listen, I'm just going to copy this one, put 184 00:10:23,190 --> 00:10:27,670 it here and it will be a load event listener, right? 185 00:10:27,990 --> 00:10:30,830 So means every time we load this, here it is. 186 00:10:30,840 --> 00:10:31,740 It's even working. 187 00:10:31,900 --> 00:10:34,290 Every time we load this, it will go back. 188 00:10:34,290 --> 00:10:40,350 It will call this movie controller and it will grab the idea, everything that we have before. 189 00:10:40,680 --> 00:10:42,000 And it will save it. 190 00:10:42,010 --> 00:10:43,350 I mean, it will do its job. 191 00:10:44,310 --> 00:10:48,260 Now, I don't like the way this is working, right? 192 00:10:48,510 --> 00:10:50,970 So we need to do some couple of changes. 193 00:10:51,330 --> 00:10:54,420 I want to wait for the results here. 194 00:10:54,560 --> 00:10:54,830 Right. 195 00:10:55,110 --> 00:10:59,940 Because I want that first to be loaded to get the movie from this part here. 196 00:10:59,940 --> 00:11:00,320 Right. 197 00:11:00,750 --> 00:11:04,550 Because here this is a weight function is async function. 198 00:11:04,890 --> 00:11:09,320 So what we need to do is also create this async function here. 199 00:11:10,890 --> 00:11:12,200 Right now. 200 00:11:12,960 --> 00:11:14,200 It will not have heat. 201 00:11:14,220 --> 00:11:21,270 See, it waited for a while because it's waiting for that promise to be fulfilled and that's why it's 202 00:11:21,270 --> 00:11:21,690 doing there. 203 00:11:21,690 --> 00:11:23,580 So let's try this one here. 204 00:11:24,690 --> 00:11:25,120 Yeah. 205 00:11:25,180 --> 00:11:29,970 And so now when I refresh it will go to this one twenty at the end. 206 00:11:30,180 --> 00:11:32,550 So Martin Scorsese. 207 00:11:32,670 --> 00:11:35,550 Oh, I like that director. 208 00:11:35,580 --> 00:11:37,500 Here he is now. 209 00:11:37,500 --> 00:11:39,120 Everything is working as you shoot. 210 00:11:39,390 --> 00:11:42,860 But I need to show you one more thing before I let you go. 211 00:11:43,350 --> 00:11:49,320 Now, every time we use this async away, we just hoping that the promise will be fulfilled. 212 00:11:49,320 --> 00:11:53,010 Remember, they can be rejected or fulfilled. 213 00:11:53,130 --> 00:11:53,520 Right. 214 00:11:53,850 --> 00:11:56,580 That was the way the promises were working. 215 00:11:56,850 --> 00:11:59,400 But here we just we're not checking. 216 00:11:59,400 --> 00:12:00,690 We just printing out. 217 00:12:00,690 --> 00:12:05,400 And we're hoping that, yeah, it will be fulfilled and I will be able to grab the results. 218 00:12:05,880 --> 00:12:07,920 Well, that sometimes not the case. 219 00:12:07,920 --> 00:12:09,210 The API can go wrong. 220 00:12:09,210 --> 00:12:10,290 Anything can go wrong. 221 00:12:10,590 --> 00:12:10,920 Right. 222 00:12:10,920 --> 00:12:15,540 Even this here, for example, if you put S. 223 00:12:15,540 --> 00:12:22,920 S in hit enter now, it will not be able something went wrong loading the movie, of course, because 224 00:12:22,920 --> 00:12:26,970 we've not been able to get that movie here, these undefined, undefined, undefined. 225 00:12:27,240 --> 00:12:28,590 So we need to fix that one. 226 00:12:28,890 --> 00:12:32,490 So how we are fixing this one, it's pretty much simple. 227 00:12:32,730 --> 00:12:37,620 We're going to cut this one from here and try and catch block. 228 00:12:38,700 --> 00:12:44,820 So in the catch for it, we see an error here and we do this error. 229 00:12:44,820 --> 00:12:50,250 But in the try, we just trying to get the data and if everything is OK, we will get the data. 230 00:12:50,250 --> 00:12:54,210 But if not, we will get some error right in. 231 00:12:54,210 --> 00:12:58,110 We want to display that error because next time we will know what's happening. 232 00:12:58,380 --> 00:13:03,540 And so what we're going to write here, well, simply we can just say alert. 233 00:13:06,420 --> 00:13:12,690 Something went wrong with that gene. 234 00:13:13,890 --> 00:13:19,830 The movie from ID right in here. 235 00:13:19,830 --> 00:13:22,380 It should be PC instead of that. 236 00:13:22,380 --> 00:13:23,580 Won't save it. 237 00:13:24,180 --> 00:13:30,960 Now, if I click here, actually, it's not going to work. 238 00:13:30,960 --> 00:13:31,270 Oops. 239 00:13:31,290 --> 00:13:31,770 What happened? 240 00:13:33,450 --> 00:13:36,390 Something was wrong with loading the movie and this is coming from the other one. 241 00:13:36,390 --> 00:13:37,510 So it gets cut. 242 00:13:37,540 --> 00:13:38,340 It doesn't matter. 243 00:13:38,610 --> 00:13:40,620 Now remove this part. 244 00:13:40,920 --> 00:13:47,820 Now we know that we will be able to catch that error if occurs and we do have this async function also 245 00:13:49,110 --> 00:13:49,620 here. 246 00:13:50,550 --> 00:13:54,930 So what we can do, we can we need to find a way how we can just get rid of this. 247 00:13:55,170 --> 00:14:02,040 And what we will create is actually movie search here, get search result. 248 00:14:02,400 --> 00:14:04,110 So I'm going to cut it from here. 249 00:14:04,710 --> 00:14:07,320 And what I'm going to see try again. 250 00:14:07,440 --> 00:14:12,030 I'm going to wrap it around the try and catch lock and error in here. 251 00:14:12,030 --> 00:14:20,760 I will say a word error while searching the movie. 252 00:14:21,900 --> 00:14:23,250 Get in here. 253 00:14:23,250 --> 00:14:25,980 I will paste everything that I've got it from before. 254 00:14:26,760 --> 00:14:27,860 Everything to copy it. 255 00:14:28,080 --> 00:14:29,150 Cut it from before. 256 00:14:29,190 --> 00:14:29,540 Right. 257 00:14:29,910 --> 00:14:31,490 So shouldn't work. 258 00:14:31,500 --> 00:14:33,060 Everything should go the same. 259 00:14:33,390 --> 00:14:39,030 But now we do have mechanism for finding a way if something is is going wrong. 260 00:14:39,030 --> 00:14:39,330 Right. 261 00:14:39,480 --> 00:14:39,900 Nice. 262 00:14:40,140 --> 00:14:42,150 That is pretty much it for this lecture. 263 00:14:42,360 --> 00:14:44,370 So we added to event listeners. 264 00:14:44,610 --> 00:14:47,310 The one is we have change, the other one wislow. 265 00:14:47,520 --> 00:14:54,390 When we load here, it will get this idea and it will go call the movie controller that we just created. 266 00:14:54,780 --> 00:14:57,000 And first things first, we're cleaning up. 267 00:14:57,120 --> 00:15:01,650 We are getting the you earlier and we are cleaning up that hatch. 268 00:15:01,860 --> 00:15:10,540 Right, because there is that we need only the clean ID in order to call data. 269 00:15:10,560 --> 00:15:12,330 That movie will new movie ID. 270 00:15:12,330 --> 00:15:12,660 Right. 271 00:15:12,840 --> 00:15:15,990 Because this if we pass the hash, it will not work. 272 00:15:15,990 --> 00:15:16,440 It will not. 273 00:15:16,790 --> 00:15:25,040 Right now that he's had something wrong with the loading, the movie, TV catching here, but we it 274 00:15:25,040 --> 00:15:29,960 was good idea to put it here as well, and that is pretty much it for this lecture I hope you enjoyed. 275 00:15:30,170 --> 00:15:36,080 We will continue working on The View next time because we just consoling log the data at the moment, 276 00:15:36,080 --> 00:15:36,740 nothing else. 277 00:15:37,250 --> 00:15:39,500 But now we need to display it here. 278 00:15:39,860 --> 00:15:47,090 And it's easy because we have all of the data we want so we can work on that thing where we are displaying 279 00:15:47,090 --> 00:15:48,560 the results. 280 00:15:48,620 --> 00:15:50,810 Thank you very much and I'll see you in the next one.