1 00:00:00,360 --> 00:00:07,420 Beautiful job once we've got our function in place now, of course, on one of my movies now, I do 2 00:00:07,470 --> 00:00:12,990 need to hear here proper query, because first I would want to display the movies and then, of course, 3 00:00:13,230 --> 00:00:14,460 we'll deal with an error. 4 00:00:14,940 --> 00:00:20,970 And of course, once we have context in place, we navigate to movies, dress. 5 00:00:21,160 --> 00:00:22,260 That is our component. 6 00:00:22,560 --> 00:00:27,480 We already have used global context online inside of the component. 7 00:00:27,790 --> 00:00:30,950 I would want to invoke it and grab two things. 8 00:00:31,290 --> 00:00:37,530 I don't want to grab my movies as well as is loading so const. 9 00:00:38,650 --> 00:00:45,520 Then we go with movies and that is loading and that one is equal to your global context, and then we 10 00:00:45,520 --> 00:00:48,880 invoke it and then we're going to go with multiple returns. 11 00:00:49,090 --> 00:00:49,660 We're going to go. 12 00:00:49,750 --> 00:00:53,770 If years loading is true, then we would want to do one thing. 13 00:00:54,100 --> 00:00:58,250 And then when we get the movies back, then, of course, we will render them. 14 00:00:58,600 --> 00:01:03,100 So in this case, as far as the return is going to be somewhat simple where we go with there with a 15 00:01:03,100 --> 00:01:11,190 class of loading and once we're downloading, then, of course we display the movie's component, which 16 00:01:11,200 --> 00:01:15,400 at the moment is just a heading to support a split second. 17 00:01:15,460 --> 00:01:21,850 You can see the loading and then, of course, we display our heading to now as far as the proper return, 18 00:01:22,450 --> 00:01:23,470 we're going to go with section. 19 00:01:24,640 --> 00:01:30,560 Then we're going to select the text and remove it and I'll have to have your class as well. 20 00:01:30,940 --> 00:01:40,480 So class name is Grace and I would want iterate over my movies throughout my movies are a I call map 21 00:01:40,870 --> 00:01:43,180 and plan for each iteration. 22 00:01:43,480 --> 00:01:45,460 I would want to return a link. 23 00:01:45,700 --> 00:01:47,290 Now, why am I returning a link? 24 00:01:47,770 --> 00:01:55,660 Because once I click on the movie poster, I want to navigate to the placeholder page where I'll fetch 25 00:01:55,660 --> 00:01:58,100 more info about the movie. 26 00:01:58,360 --> 00:02:01,270 So movies map and then I'm iterating over. 27 00:02:01,510 --> 00:02:07,210 And as far as the return, well, for the time being, we're just going to go with heading for and we'll 28 00:02:07,210 --> 00:02:08,320 call this a movie. 29 00:02:08,770 --> 00:02:11,560 Now, what I'm really interested in here is the parameter. 30 00:02:11,920 --> 00:02:16,090 So I'm going to call this movie and then let's just see what we're getting back. 31 00:02:16,480 --> 00:02:22,720 So we're going to cancel log and then movie and we should see 10 movies on the screen. 32 00:02:23,050 --> 00:02:23,350 Yep. 33 00:02:23,770 --> 00:02:27,070 That's what we were looking for in the console. 34 00:02:27,070 --> 00:02:29,920 Also should see the object. 35 00:02:30,310 --> 00:02:34,480 And as far as the object, again, properties are capitalized. 36 00:02:34,880 --> 00:02:40,450 So, for example, here I can see the poster title type and you here as well as the. 37 00:02:41,110 --> 00:02:46,580 Now, the idea is important because, of course, I would want to pass it into my link. 38 00:02:46,600 --> 00:02:52,450 So once I click on a movie, not only I would want to navigate to my placeholder page to the movie page, 39 00:02:52,720 --> 00:02:58,290 but I also would want to pass in my ID through the EU URL programs. 40 00:02:58,630 --> 00:03:05,370 So first, I guess I would start by structuring all the properties that we're looking for and all right 41 00:03:05,380 --> 00:03:10,900 away I give it an alias to all of them because in my opinion it is just a bit faster. 42 00:03:11,230 --> 00:03:15,150 So here we go with I Am and then DB and then ID. 43 00:03:15,190 --> 00:03:16,750 That is the property name and. 44 00:03:16,750 --> 00:03:17,160 All right. 45 00:03:17,200 --> 00:03:21,030 We call it an ID, then poster will be poster. 46 00:03:21,520 --> 00:03:25,540 So notice I don't like this capital case, so I just go with lowercase. 47 00:03:25,540 --> 00:03:29,860 The title will be title and then yea you guessed it, we'll be here. 48 00:03:30,130 --> 00:03:34,000 Now all of that is coming from my movie Perama. 49 00:03:34,420 --> 00:03:35,800 I'm not as far as the return. 50 00:03:36,950 --> 00:03:42,890 Like I said, I'm going to go with a link here, and since I would want to make my link dynamic, why 51 00:03:42,890 --> 00:03:44,960 do I need to do I go template string? 52 00:03:45,260 --> 00:03:50,380 Then remember, I went with movies if you didn't and of course, don't have that. 53 00:03:50,660 --> 00:03:52,820 And then what was my primer? 54 00:03:52,880 --> 00:03:54,260 Well, that was the idea. 55 00:03:54,710 --> 00:03:57,730 Now, the only thing that I'm looking for in here is the value. 56 00:03:58,160 --> 00:04:05,780 So remember when we were setting this up, I said that there's going to be YORO of movies and that whatever 57 00:04:05,790 --> 00:04:06,500 is the idea. 58 00:04:06,860 --> 00:04:09,080 So that is my euro primer. 59 00:04:09,350 --> 00:04:10,850 Now I need to pass in the value. 60 00:04:11,060 --> 00:04:14,110 And of course, in this case it is going to be ready. 61 00:04:14,540 --> 00:04:20,990 And then also, since we have a list, I'm going to go with Key and I'll pass in the area since we need 62 00:04:20,990 --> 00:04:23,480 that unique value for our kids. 63 00:04:23,840 --> 00:04:30,070 And then the last thing that I would want is the class name or class name is equal to the movie. 64 00:04:30,500 --> 00:04:34,970 So that, of course, is just going to make sure that we have some kind of styling on the inside of 65 00:04:34,970 --> 00:04:35,420 the link. 66 00:04:35,630 --> 00:04:39,890 We're going to go with article online instead of the article. 67 00:04:39,890 --> 00:04:42,260 I would want to go with my image. 68 00:04:42,680 --> 00:04:46,370 So and eventually we'll make it a bit different. 69 00:04:46,700 --> 00:04:50,840 But for the time being, we're just going to go with poster, because I would want you to see where 70 00:04:50,840 --> 00:04:52,430 the problems are going to be. 71 00:04:52,820 --> 00:04:55,960 So that's why we have to alter this one moment. 72 00:04:56,270 --> 00:04:57,830 And then as far as the alternative. 73 00:04:58,790 --> 00:05:06,020 We're going to go with title, their title and mine right next to the image we're going to go with there 74 00:05:06,020 --> 00:05:10,760 with a class of movie and info online of of. 75 00:05:11,420 --> 00:05:15,360 There's going to be a hearing for the class, a title online. 76 00:05:15,390 --> 00:05:18,580 We will just run under our title property. 77 00:05:18,890 --> 00:05:21,020 And then last hour, I want to go with you. 78 00:05:21,620 --> 00:05:27,490 So once we render all of these things, we should see all our movies show. 79 00:05:28,010 --> 00:05:35,570 And then if I navigate to the bigger screen of we have four column layout like so and then once I click 80 00:05:36,140 --> 00:05:40,850 and navigate to a single movie, but the idea is different. 81 00:05:41,030 --> 00:05:49,250 So if I go back and for example, I'm looking for the other movie click and again, the value is a bit 82 00:05:49,250 --> 00:05:52,730 different, not the last thing that I would want to do in the movies. 83 00:05:53,000 --> 00:05:59,750 And my component is to work with my poster because once you set up the application, you'll notice that 84 00:06:00,080 --> 00:06:03,700 once in a while you don't get the poster back. 85 00:06:03,980 --> 00:06:05,840 So let me go back to the context. 86 00:06:06,290 --> 00:06:09,610 I'll try to remember what was the scenario. 87 00:06:09,650 --> 00:06:15,800 So I'm going to go with this string value and hopefully it is going to return some movies without a 88 00:06:15,800 --> 00:06:23,630 poster, because as you can see, by default, yes, I'm getting all the posters, but that is not always 89 00:06:23,630 --> 00:06:24,300 going to be the case. 90 00:06:24,720 --> 00:06:31,030 So once in a while, you might get a movie, a valid movie, but there's no poster. 91 00:06:31,340 --> 00:06:39,570 And instead of just displaying the text, I would rather want to display some kind of default image. 92 00:06:39,980 --> 00:06:41,270 Now, what am I talking about? 93 00:06:41,690 --> 00:06:49,820 Well, in the movies, you'll notice that there is a URL that points back to no picture is available. 94 00:06:50,190 --> 00:06:53,960 So essentially I went online and I just search for pictures. 95 00:06:54,320 --> 00:06:59,570 And this was the one that I found where I can display no photo available. 96 00:06:59,900 --> 00:07:03,480 Again, technically, you don't have to do it if you don't want it. 97 00:07:03,920 --> 00:07:07,130 You can still display the text if that is your preference. 98 00:07:07,160 --> 00:07:08,570 However, in my case, I thought, you know what? 99 00:07:08,960 --> 00:07:11,110 This is going to be a bit more meaningful. 100 00:07:11,510 --> 00:07:12,920 So in here I have the URL. 101 00:07:13,280 --> 00:07:19,220 So some kind of variable and I'm just pointing to the picture and then I'm going to scroll down and 102 00:07:19,220 --> 00:07:25,100 where I have the poster, I'm actually going to check whether a poster is not available. 103 00:07:25,370 --> 00:07:26,450 Now, why am I doing that? 104 00:07:26,450 --> 00:07:28,100 Because it will console log. 105 00:07:28,480 --> 00:07:34,790 I'll see that if we cannot get the picture for the movie, the value is going to be left. 106 00:07:34,810 --> 00:07:36,440 So it's going to be not available. 107 00:07:36,740 --> 00:07:43,380 So if we can get the picture, then, of course, we're pointing to the URL to specific end point. 108 00:07:43,620 --> 00:07:48,040 However, if we don't have it, we have this and a not available. 109 00:07:48,410 --> 00:07:54,320 So now of course, where I have the poster, instead of just going for my poster value, I'm going to 110 00:07:54,320 --> 00:07:56,830 set up my ternary operator, Wormer. 111 00:07:56,870 --> 00:08:06,270 So if the poster is not available, so and and then of course I would want to display the URL. 112 00:08:06,560 --> 00:08:08,330 Now why do I want to display the URL? 113 00:08:08,660 --> 00:08:10,780 Because this points to no picture available. 114 00:08:11,240 --> 00:08:17,000 However, if the poster is there and of course I would want to go with my poster. 115 00:08:17,270 --> 00:08:20,280 So I set up my tour operator and there it is. 116 00:08:20,330 --> 00:08:27,650 Now, of course, I have at least a photo that says, you know what, there is no photo available instead 117 00:08:27,650 --> 00:08:32,630 of just this empty text and that should do it for our mortgage component. 118 00:08:32,900 --> 00:08:36,290 And now we can start working with our search for.