1
00:00:00,210 --> 00:00:00,840
Nicely done.

2
00:00:00,900 --> 00:00:09,120
We're in the final stretch now, of course, we just need to set up our single movie page so we have

3
00:00:09,120 --> 00:00:10,110
a bunch of movies.

4
00:00:10,110 --> 00:00:13,680
We click on a movie online and we navigate the single page.

5
00:00:13,680 --> 00:00:21,230
But of course, what I want is to display specific info about the movie that is going to be the poster,

6
00:00:21,240 --> 00:00:29,120
the title, some description as well as there, and also a link to navigate back to all my movies.

7
00:00:29,580 --> 00:00:34,740
And once we have the idea and what we're going to be building, we're going to navigate, of course,

8
00:00:34,740 --> 00:00:36,780
to our single movie dress.

9
00:00:36,930 --> 00:00:41,280
That is our component, and we'll set up our page.

10
00:00:41,580 --> 00:00:45,750
And since it's not our first rodeo, I'll try to make everything in this video.

11
00:00:46,320 --> 00:00:54,360
So my apologies if it gets a bit lengthy and we're going to start by grabbing the idea from the use.

12
00:00:54,840 --> 00:01:02,880
Remember, react router down provides the hook used perhaps hook where we can get the value that we're

13
00:01:02,880 --> 00:01:03,450
passing in.

14
00:01:04,000 --> 00:01:08,190
So once we click on a movie, we pass in the eddy in our YORO.

15
00:01:08,520 --> 00:01:10,320
So now of course I would want to get it back.

16
00:01:10,710 --> 00:01:13,150
And that's why our second line.

17
00:01:13,170 --> 00:01:18,060
Remember, we have key value pair and I named my key body.

18
00:01:18,540 --> 00:01:24,120
If you name the shake and bake, just look for shake and bake and we invoke use prompts.

19
00:01:24,480 --> 00:01:28,140
And then of course, if we want to double check, we just go with it.

20
00:01:28,740 --> 00:01:33,640
And then if everything is correct in a console, we should see the beautiful.

21
00:01:34,200 --> 00:01:38,910
And then of course we want to set up some state values as well.

22
00:01:39,150 --> 00:01:44,460
So I'm going to go over here with CONSED online movie now that by default is going to be an object.

23
00:01:44,760 --> 00:01:52,260
So we're going to go with that movie and that one is equal to use state and then we're going to pass

24
00:01:52,260 --> 00:01:54,270
in the object by default.

25
00:01:54,750 --> 00:01:55,800
We will be empty.

26
00:01:56,490 --> 00:02:00,750
Then we're going to look for a loading and unloading and set loading.

27
00:02:01,050 --> 00:02:04,650
So is loading and then set loading.

28
00:02:04,890 --> 00:02:10,020
So, um, and that one is used state again and by default it is going to be true.

29
00:02:11,290 --> 00:02:17,980
Then also, what I would want is to have an IRA, so I'm going to go to concert and error and then set

30
00:02:17,980 --> 00:02:24,710
Setara, remember, error was an object in our context and in here will do exactly the same.

31
00:02:25,120 --> 00:02:27,520
So we have a show and then forth.

32
00:02:27,970 --> 00:02:29,200
So show coal.

33
00:02:29,200 --> 00:02:32,110
And so the value for show will be false by default.

34
00:02:32,320 --> 00:02:35,120
And then also I'm going to go with my message.

35
00:02:35,590 --> 00:02:41,160
So once we've got this, then of course I would want to set up my function to fetch Amawi.

36
00:02:41,470 --> 00:02:46,240
So we go here with Consed and fetch a movie, but.

37
00:02:46,960 --> 00:02:55,570
And that movie and of course, I'll use my sink again, so I think I'll pass in the URL, so say you

38
00:02:55,570 --> 00:03:04,060
are all online as far as the function body will or wait for seconds and then response is equal to wait

39
00:03:04,060 --> 00:03:08,380
and then fetch here and then will pass in the URL.

40
00:03:08,680 --> 00:03:15,010
So whatever we're passing in and then of course I'm going to go with CONSED and then data amount is

41
00:03:15,010 --> 00:03:17,360
equal to a white man.

42
00:03:17,380 --> 00:03:22,510
We're looking for response, response, response and then Drayson.

43
00:03:23,140 --> 00:03:29,530
So now of course we have the data and this is going to be again the case where if we're successful,

44
00:03:29,950 --> 00:03:32,760
then of course their response will be true.

45
00:03:33,100 --> 00:03:39,160
So I'm going to go with console log and then there and now I would want to set up my user.

46
00:03:39,820 --> 00:03:41,770
So use fact.

47
00:03:42,310 --> 00:03:46,450
And as far as the callback function, well, here's the deal.

48
00:03:46,960 --> 00:03:48,400
I would want to invoke it.

49
00:03:49,360 --> 00:03:56,590
When my I.D. changes and of course, I'm going to go fetch and here's the kicker in the context, I

50
00:03:56,590 --> 00:03:59,770
already have a pinpoint correct.

51
00:04:00,260 --> 00:04:04,150
So if I take a look at my context, I should have my variable.

52
00:04:04,780 --> 00:04:09,040
And in here I just have the root and point with my API.

53
00:04:09,820 --> 00:04:16,300
So instead of constructing a new one, what I did is just imported from the context.

54
00:04:16,840 --> 00:04:21,040
I said, yep, there is a variable by the name of API endpoint.

55
00:04:21,400 --> 00:04:26,530
Please grab that one and then when I'm fetching I'll use that URL.

56
00:04:26,740 --> 00:04:29,920
Now, of course we'll have to construct it a bit different.

57
00:04:30,100 --> 00:04:37,240
The URL in this case we're looking for the idea, but at least the general setup is going to be similar

58
00:04:37,240 --> 00:04:40,690
to what we have in a context where again, we have an API endpoint.

59
00:04:40,690 --> 00:04:47,200
And then in this case we added a query with our URL primer for search.

60
00:04:47,500 --> 00:04:54,370
Now, in this case, I we want to set up a euro parameter for the ID, so we want to get specific info

61
00:04:54,550 --> 00:04:55,950
about the movie.

62
00:04:56,380 --> 00:04:58,630
So I'll set up again the template literal.

63
00:04:59,550 --> 00:05:02,410
Then I'm going to be looking for my API and point.

64
00:05:02,740 --> 00:05:08,620
So and then we add and again and we go with AI and then we set up.

65
00:05:08,620 --> 00:05:13,910
Well what is going to be the idea, of course, as far as the value we pass in this site.

66
00:05:14,500 --> 00:05:19,540
So the one that we have over here and then once we fetch course we should.

67
00:05:19,840 --> 00:05:23,830
By the way, this is not fetch this fetch movie like so.

68
00:05:24,280 --> 00:05:26,530
And of course, we should have some kind of value.

69
00:05:26,920 --> 00:05:30,820
Now, in this case, it complains that usufruct is not defined.

70
00:05:31,420 --> 00:05:33,670
And that is, of course, because I have a bug.

71
00:05:34,300 --> 00:05:35,770
So I'm going to invoke it.

72
00:05:35,980 --> 00:05:41,380
And there is now I'm getting back the info about specific movie.

73
00:05:42,100 --> 00:05:46,290
I have title, of course, and rest of the properties.

74
00:05:46,810 --> 00:05:48,220
So we're going to go back.

75
00:05:48,610 --> 00:05:53,170
And again, we have at the moment the response to be equal to true.

76
00:05:53,680 --> 00:05:54,160
Correct.

77
00:05:54,550 --> 00:05:57,280
But there's going to be cases where there's an error.

78
00:05:57,610 --> 00:05:59,800
That's why the same how we did before.

79
00:06:00,100 --> 00:06:08,390
We're going to go if and Mandera and then response response is equal to false.

80
00:06:08,680 --> 00:06:11,370
So in this case, I'm just going to check for false.

81
00:06:11,590 --> 00:06:13,600
So that's going to be a bit different.

82
00:06:13,900 --> 00:06:17,350
And then if that is the case, then of course I'm going to set my error.

83
00:06:17,650 --> 00:06:22,540
If not, I'm just going to go with loading so else and then set the movie.

84
00:06:23,790 --> 00:06:31,240
That movie, and then we're going to go with data and also I'll set my loading to be false set loading

85
00:06:31,240 --> 00:06:32,920
and then we're going for false.

86
00:06:33,280 --> 00:06:38,830
And if there is an error, so if response is equal to false, then of course, I would want to set my

87
00:06:38,830 --> 00:06:39,480
hair correct.

88
00:06:39,820 --> 00:06:46,180
So we're going to go with set error and we passing the object show should be true now.

89
00:06:46,450 --> 00:06:53,080
And as far as the message, again, it is located in data and that I'm an error like so.

90
00:06:53,380 --> 00:06:57,140
And of course I would want to do the same thing where loading should be false.

91
00:06:57,460 --> 00:07:01,330
So set loading and we go with false wind rocket.

92
00:07:01,600 --> 00:07:02,220
Beautiful.

93
00:07:02,710 --> 00:07:09,430
And now of course, I would want to deal with my return and there's going to be three returns.

94
00:07:09,550 --> 00:07:17,020
There's going to be one for loading, one for error, and then one when we actually have successful

95
00:07:17,150 --> 00:07:17,580
batch.

96
00:07:17,860 --> 00:07:21,820
So when we get the movie back, well, that is going to be our third return.

97
00:07:22,030 --> 00:07:25,650
So again, let's just go with if and we're going to go what is loading.

98
00:07:25,870 --> 00:07:28,200
So if we're loading, what are we doing?

99
00:07:28,210 --> 00:07:37,240
Well, we just return a death and the class should be loading class name and then loading like so.

100
00:07:37,690 --> 00:07:40,380
And after that I'm going to go with another.

101
00:07:40,750 --> 00:07:43,690
And then of course, in this case, I'm going to go with error.

102
00:07:44,110 --> 00:07:45,790
Now, what is the proper you going?

103
00:07:45,790 --> 00:07:46,510
I'm looking for the.

104
00:07:47,660 --> 00:07:52,340
I'm looking for every object and then the property of show, correct?

105
00:07:52,700 --> 00:07:54,650
So we're going to go with our ANNUNZIO.

106
00:07:54,800 --> 00:07:58,240
If that is true, what I would want is to return.

107
00:07:58,790 --> 00:08:05,210
So I'm going to go here with the return and we're going to go with Dave will add a class name of page

108
00:08:05,570 --> 00:08:08,540
and line or so and line.

109
00:08:08,540 --> 00:08:12,760
Instead of this div, we're going to have a one with the Arab name.

110
00:08:13,010 --> 00:08:16,790
So our I'm on that message.

111
00:08:17,000 --> 00:08:20,380
So that's where our error is displayed.

112
00:08:20,600 --> 00:08:26,500
And then also I would want to have a link that just allows us to navigate back to the home page.

113
00:08:26,510 --> 00:08:27,710
We had a class name here.

114
00:08:28,040 --> 00:08:35,090
The class name is between and inside of it will go back to movies like Shall We Say.

115
00:08:36,130 --> 00:08:41,800
We should see, first of all, loading, which, of course, is not going to be visible at the moment

116
00:08:41,800 --> 00:08:48,310
because everything loads fast and eventually we should have heading to what the text of a single movie,

117
00:08:48,580 --> 00:08:55,820
since everything is correct and once we have covered if the loading is true, an error is true as well.

118
00:08:56,140 --> 00:09:02,820
Now, of course, I would want to get the values from my movie screen here, by the way, which show

119
00:09:02,860 --> 00:09:03,130
different.

120
00:09:03,130 --> 00:09:03,520
Come on.

121
00:09:03,520 --> 00:09:04,500
That's not what I wanted.

122
00:09:04,900 --> 00:09:08,010
I would want of the structure, the values from the movie.

123
00:09:08,020 --> 00:09:16,180
However, again, keep in mind that we can only do it because we're doing that after the loading and

124
00:09:16,180 --> 00:09:18,670
the error, because by default.

125
00:09:19,810 --> 00:09:25,330
Well, this is going to be empty object, so if you'll try to the structure properties from the object,

126
00:09:25,330 --> 00:09:28,050
of course, you're going to get a big, fat error.

127
00:09:28,420 --> 00:09:33,450
And as far as the properties, again, I'll give them Alias because I find it a bit easier.

128
00:09:33,760 --> 00:09:38,980
So we're going to go for a title here title and that one is equal to title.

129
00:09:39,370 --> 00:09:49,630
The plot is equal to plot and then each year is equal to a year like so year.

130
00:09:50,020 --> 00:09:53,490
And we're going to set that equal to the movie.

131
00:09:53,950 --> 00:09:55,800
So the name of my parameter.

132
00:09:56,260 --> 00:10:01,690
And then once we've got all of these properties, then of course let's just work on our return.

133
00:10:01,990 --> 00:10:06,820
So we go with Section Class nine will be single and then hyphen movie.

134
00:10:07,250 --> 00:10:14,140
And as far as the values inside of the section, well, we're just going to go with HMG then we're looking

135
00:10:14,140 --> 00:10:15,670
for our poster here.

136
00:10:16,040 --> 00:10:21,320
And when it comes to alternative course, we're going to go with the title.

137
00:10:21,790 --> 00:10:29,860
Now, if you want functionality like we did with movies where you have this no picture available, definitely

138
00:10:29,860 --> 00:10:30,300
to do so.

139
00:10:30,490 --> 00:10:32,980
In my case, I didn't want to repeat myself.

140
00:10:32,980 --> 00:10:34,780
So we're just going to skip that part.

141
00:10:35,380 --> 00:10:37,140
Poster is equal to the poster.

142
00:10:37,300 --> 00:10:40,360
If you want to set up that ternary operator, definitely do so.

143
00:10:40,690 --> 00:10:43,390
And then we're going to have a deal with a class of single.

144
00:10:44,260 --> 00:10:53,950
I found movie movie hyphen and info, and of this there was go with heading to we're going to say title

145
00:10:53,950 --> 00:10:57,460
here and there's a plot as well.

146
00:10:57,510 --> 00:10:59,770
So plot properly plot.

147
00:11:00,250 --> 00:11:01,810
And then also a year.

148
00:11:01,960 --> 00:11:05,510
So heading for and we just set our year.

149
00:11:05,980 --> 00:11:06,260
OK.

150
00:11:07,230 --> 00:11:14,450
Beautiful, and then the last thing that I would want to display is the link back to the home page.

151
00:11:14,850 --> 00:11:18,870
So I'm going to say a link to basically you can just copy and paste if you want.

152
00:11:19,660 --> 00:11:20,610
That's going to be faster.

153
00:11:21,240 --> 00:11:27,630
So I'm going to take the link from my error and just copy and paste, and I should have the link back

154
00:11:27,630 --> 00:11:28,450
to all the more.

155
00:11:28,970 --> 00:11:36,080
So now, of course, we have successfully set up all the movies as well as single movie page.

156
00:11:36,150 --> 00:11:43,260
Now, technically, we're done with application, but there's optional video coming up where I will

157
00:11:43,260 --> 00:11:52,260
refactor the fetch, because as you're looking at it now, we have a bunch of properties that are very

158
00:11:52,260 --> 00:11:52,710
similar.

159
00:11:53,160 --> 00:11:56,070
So we have these state powers here as well as the function.

160
00:11:56,460 --> 00:11:59,190
Pretty similar to context, Charles.

161
00:11:59,610 --> 00:12:07,230
So next video, I will refactor our application so we have one use for each custom.

162
00:12:08,320 --> 00:12:13,510
And then we just use it in multiple places, if you want to set yourself a challenge where you would

163
00:12:13,510 --> 00:12:18,390
want to set up that use for each customer like yourself, please definitely do so.

164
00:12:18,790 --> 00:12:20,200
But as an extra video.

165
00:12:20,470 --> 00:12:21,940
So it's going to be optional.

166
00:12:22,420 --> 00:12:28,960
I'm going to show you how I would refactor my application so I don't have to repeat this functionality.

167
00:12:29,440 --> 00:12:32,410
So there's going to be one use fetch hook.

168
00:12:32,860 --> 00:12:35,910
If you're not interested in that, we're done with the project.

169
00:12:36,190 --> 00:12:41,350
Hopefully everyone enjoyed it and you can just move on to our next project.