1
00:00:00,390 --> 00:00:01,180
My job.

2
00:00:01,200 --> 00:00:08,060
I think we can start stretching our memories now before we start any work in the context.

3
00:00:08,140 --> 00:00:13,410
Yes, I would want to navigate you home and display two components.

4
00:00:13,560 --> 00:00:18,740
One is going to be form, and the second one is going to be the movie's component.

5
00:00:19,200 --> 00:00:23,730
So essentially, the way it's going to work, we're going to have the form where, of course, we type

6
00:00:23,730 --> 00:00:28,280
our query and then in the movie's component, we will display.

7
00:00:28,800 --> 00:00:31,640
Now, both of them will use the context.

8
00:00:31,660 --> 00:00:33,360
Yes, that's the whole point.

9
00:00:33,570 --> 00:00:39,630
Why we're setting up our global context so that I, I don't have to do the prop drilling where I'm passing

10
00:00:39,870 --> 00:00:46,020
from one component to the next one, even though the one component in the middle doesn't really need

11
00:00:46,020 --> 00:00:46,820
that info.

12
00:00:47,100 --> 00:00:49,680
So in this case, yes, we have one component.

13
00:00:49,860 --> 00:00:54,920
But to tell you honestly, the moment we render form and movies, we're done in this component.

14
00:00:55,200 --> 00:00:58,790
There's really not much that we can do anymore in here.

15
00:00:59,040 --> 00:01:01,830
So we're going to go with one that is going to be our first component.

16
00:01:02,040 --> 00:01:04,170
And then we have a movie component.

17
00:01:04,170 --> 00:01:04,830
We serve it.

18
00:01:05,040 --> 00:01:08,850
And now in the home page, we should see something different.

19
00:01:09,150 --> 00:01:15,030
Now, of course, we don't see anything because I'm at the single movie, but if I navigate to the local

20
00:01:15,030 --> 00:01:20,280
host or the home page, then of course I have such form and movies component.

21
00:01:20,550 --> 00:01:27,180
So leave the search form alone for now and we'll just deal with getting some movies.

22
00:01:27,540 --> 00:01:33,180
So what I would want is to close the sidebar and then we're going to navigate back to the context of

23
00:01:33,180 --> 00:01:33,630
jazz.

24
00:01:34,140 --> 00:01:35,940
So we already have the end point.

25
00:01:36,210 --> 00:01:37,420
That's an awesome start.

26
00:01:37,680 --> 00:01:42,810
So now of course, I can start working with the component with the app provider.

27
00:01:43,140 --> 00:01:50,280
And here again, we get the children and we make sure that we pass the children down and we actually

28
00:01:50,280 --> 00:01:53,040
render them because otherwise you won't be able to see anything.

29
00:01:53,260 --> 00:01:54,600
And as far as the value.

30
00:01:55,140 --> 00:01:58,700
Well, that's the one that we use to pass our data.

31
00:01:59,070 --> 00:02:01,920
And of course, in this case, we just have the dialo.

32
00:02:02,280 --> 00:02:08,340
So if you would like to test it, of course, you can navigate to any of those components, the movies

33
00:02:08,340 --> 00:02:09,240
or the form.

34
00:02:09,600 --> 00:02:12,390
And I already imported the EU's global context.

35
00:02:12,720 --> 00:02:20,430
And if you would want to see whether your functionality works, just go here with CONSED and then I'll

36
00:02:20,430 --> 00:02:21,360
call this data.

37
00:02:22,270 --> 00:02:25,980
And that is going to be equal to a huge global context.

38
00:02:26,390 --> 00:02:28,170
And then, of course, I need to invoke it.

39
00:02:28,510 --> 00:02:33,880
So if you cancel log there, you should see Halo on screen.

40
00:02:34,240 --> 00:02:40,620
So I think I will close all the tabs as far as the API because I think we are in good shape.

41
00:02:40,630 --> 00:02:41,550
We will recover that.

42
00:02:41,800 --> 00:02:46,390
And if you take a look at the star, you should see the halo in the console.

43
00:02:46,720 --> 00:02:54,520
And what that simply means is that once we have our global context anywhere in my application, I can

44
00:02:54,520 --> 00:02:56,510
just import my U.S. global context.

45
00:02:56,540 --> 00:02:58,060
OK, then invoke it.

46
00:02:58,240 --> 00:03:02,080
And whatever data I'm going to be passing from the context.

47
00:03:02,110 --> 00:03:04,760
Yes, well, I'll be able to access.

48
00:03:04,810 --> 00:03:05,180
Correct.

49
00:03:05,470 --> 00:03:07,290
And at this point it is just silly.

50
00:03:07,310 --> 00:03:07,960
A little hello.

51
00:03:08,410 --> 00:03:13,420
But don't worry, we're just going to get way more complicated than that.

52
00:03:13,850 --> 00:03:15,530
Now what is next?

53
00:03:15,970 --> 00:03:21,240
I think I'm going to start by setting up the state values in my context.

54
00:03:21,550 --> 00:03:22,900
That's going to be my first step.

55
00:03:23,260 --> 00:03:25,460
And essentially, I have four values.

56
00:03:25,840 --> 00:03:27,010
One is going to be for loading.

57
00:03:27,790 --> 00:03:33,070
Since we're fetching data, then there's going to be one for error, because this is going to be interesting

58
00:03:33,070 --> 00:03:40,330
application where we are getting specific errors back with our is too many requests, whether that is

59
00:03:40,330 --> 00:03:44,280
that no more, we've matched the search and all that kind of good stuff.

60
00:03:44,440 --> 00:03:48,070
So that's why there's going to be also a error state failure.

61
00:03:48,430 --> 00:03:53,920
Now, I also have movies since of course I would want to render my movies and we already know that most

62
00:03:53,920 --> 00:03:59,470
likely that is going to be an array and then the query because remember, we will be typing something

63
00:03:59,470 --> 00:04:01,260
eventually in the input.

64
00:04:01,480 --> 00:04:02,710
So let's start with loading.

65
00:04:02,860 --> 00:04:11,170
We go with is loading and then we go with set is loading, of course, loading on line that is equal

66
00:04:11,170 --> 00:04:14,400
to use and then state and we pass intro.

67
00:04:14,770 --> 00:04:19,810
So by default we always are going to be loading so const and then error.

68
00:04:20,140 --> 00:04:23,620
Now error is going to be an object because there's going to be different messages.

69
00:04:23,890 --> 00:04:25,540
So we're going to go set error.

70
00:04:27,030 --> 00:04:32,220
And that one is equal to you state, and then I'll have my default one, where there's going to be a

71
00:04:32,220 --> 00:04:35,170
show property, which by default is going to be false.

72
00:04:35,370 --> 00:04:36,730
So we're not going to display that.

73
00:04:37,230 --> 00:04:39,360
And the second one is a message.

74
00:04:39,690 --> 00:04:41,910
A message, of course, is going to change.

75
00:04:41,940 --> 00:04:42,900
That was the whole point.

76
00:04:43,080 --> 00:04:47,400
Why we're setting this up as an object and we have movies and the query.

77
00:04:47,520 --> 00:04:52,840
So we'll go with concert and movies, online set movies.

78
00:04:53,370 --> 00:04:54,460
OK, good.

79
00:04:54,780 --> 00:04:59,820
And then, of course, that is going to be equal to my U.S. state.

80
00:05:00,210 --> 00:05:03,750
So I go with your state and it's just going to be an empty row.

81
00:05:04,140 --> 00:05:10,920
And then last thing is the query where as we're typing something in the input value will change.

82
00:05:11,310 --> 00:05:18,540
But since I would want to display some movies by default, so it would go back noticed, once you refresh

83
00:05:18,540 --> 00:05:21,150
the application, you're getting some kind of movie.

84
00:05:21,570 --> 00:05:25,230
I will right away have my value as a Batman.

85
00:05:25,400 --> 00:05:32,430
Like I said, I'm not the biggest movie buff, so that is pretty much the only movie that I know, meaning

86
00:05:32,430 --> 00:05:33,840
I'm overexaggerating, of course.

87
00:05:33,840 --> 00:05:37,650
But as far as the name, that is probably the easiest one.

88
00:05:37,920 --> 00:05:45,300
So I'm going to go over here with CONSED online query and I'll set some query and we're just going to

89
00:05:45,300 --> 00:05:51,600
go with Years State and in my case I'm going to go with Batman, so I'll save it.

90
00:05:51,900 --> 00:05:58,680
I have my state values and since we have done that already quite a few times out right away, set up

91
00:05:58,680 --> 00:06:02,030
my first movie function more.

92
00:06:02,040 --> 00:06:03,270
Of course I have the URL.

93
00:06:03,750 --> 00:06:07,740
I just need to construct it to get specific movies.

94
00:06:07,740 --> 00:06:11,850
In this case, of course, that is going to be movies about Batman.

95
00:06:12,210 --> 00:06:13,470
So we go here first.

96
00:06:13,470 --> 00:06:16,110
I guess with usufruct doesn't really matter.

97
00:06:16,500 --> 00:06:18,210
The order is relevant again.

98
00:06:18,210 --> 00:06:24,020
We have done that quite a few times and for the time being I'll just say Ampera.

99
00:06:24,180 --> 00:06:28,800
However, eventually there's going to be a query, but I would just want to cover why I'm out of there

100
00:06:29,130 --> 00:06:34,140
and my only function name is going to be fetch and line movies.

101
00:06:34,500 --> 00:06:36,750
Now, I'll also eventually set up the URL.

102
00:06:37,080 --> 00:06:43,800
So for the time being I'm just going to go with Template String and then we'll go with API and then

103
00:06:43,800 --> 00:06:43,980
end.

104
00:06:44,490 --> 00:06:48,810
Don't worry, of course we'll have to add something here, but for the time being we'll just pass this

105
00:06:48,810 --> 00:06:49,440
one in here.

106
00:06:49,830 --> 00:06:52,400
And then of course we have our memory.

107
00:06:52,460 --> 00:06:56,100
So we got Consed and then fetch then movies.

108
00:06:56,110 --> 00:07:01,290
That is my function and in this case I would want to set it up that I pass in the euro.

109
00:07:01,770 --> 00:07:07,340
So yes, of course I can pass it directly, but I just thought that to change it around and pass this

110
00:07:07,370 --> 00:07:09,510
URL as a parameter.

111
00:07:09,930 --> 00:07:18,060
Now as far as logic, well again remember that eventually we will run this function every time we type

112
00:07:18,060 --> 00:07:19,980
something in the input.

113
00:07:20,550 --> 00:07:21,000
Correct.

114
00:07:21,360 --> 00:07:28,440
So what I would want is when I'm searching for that new movie, I would want that loading to be displayed.

115
00:07:28,890 --> 00:07:29,340
Correct.

116
00:07:29,640 --> 00:07:37,140
So that's why every time we invoke the function, I'll start by set is loading and I'll start at the

117
00:07:37,140 --> 00:07:39,540
true, even though we're loading by default.

118
00:07:39,840 --> 00:07:44,340
Again, the reason why we're doing that, because there's going to be an input and every time we type

119
00:07:44,340 --> 00:07:47,400
something in input, we want to invoke this function.

120
00:07:48,330 --> 00:07:55,290
And then once I invoke it first, I would want to set loading strew to display the user that, listen,

121
00:07:55,440 --> 00:07:59,970
we are loading then again for no particular reason.

122
00:08:00,180 --> 00:08:05,220
Just so we can remember how we did that, I'm going to go with try and catch.

123
00:08:05,610 --> 00:08:07,480
And of course, I would want to set it up.

124
00:08:07,480 --> 00:08:10,170
And I think that's something that I missed out.

125
00:08:10,410 --> 00:08:15,720
So this is going to be a function and I want to use the built and fetch API.

126
00:08:16,020 --> 00:08:23,430
So we go online response here and that one is equal to await and then fetch.

127
00:08:23,790 --> 00:08:29,000
And of course I'll be using the URL as fast and as a parameter.

128
00:08:29,430 --> 00:08:31,020
So I pass it here as a parameter.

129
00:08:31,200 --> 00:08:38,490
I set up my fetch and where I have the user, of course I pass in the API endpoint.

130
00:08:38,850 --> 00:08:41,160
So that's my route and point.

131
00:08:41,160 --> 00:08:41,850
At the moment.

132
00:08:42,300 --> 00:08:48,810
I still need to construct a little bit, but for the time being that's my route endpoint and I'm waiting

133
00:08:48,810 --> 00:08:49,650
for response.

134
00:08:49,890 --> 00:08:55,950
And then I'm going to go with data and of course I'll set that they are equal to your response and land

135
00:08:55,950 --> 00:08:56,730
adjacent.

136
00:08:57,060 --> 00:09:03,150
And then I would want to console log data just so I can see what is happening and remember the API.

137
00:09:03,580 --> 00:09:10,980
So at the moment we have the root endpoint, correct, where we have the euro and then the API.

138
00:09:11,670 --> 00:09:14,850
But in order to construct it, why did we need to do?

139
00:09:15,240 --> 00:09:20,150
Well, we needed to add and and then we have the URL parameters.

140
00:09:20,490 --> 00:09:26,580
So in this case, I would want to go with S, so I would want to search and of course all set it equal

141
00:09:26,850 --> 00:09:30,150
to whatever my query is now at the moment.

142
00:09:30,160 --> 00:09:30,980
What is the query.

143
00:09:31,290 --> 00:09:36,680
Well in my case that is Batmen might be in your case that is Avenger's or Superman or whatever.

144
00:09:37,080 --> 00:09:45,420
So are you set up this URL by adding the parameter offers so you'll be searching online?

145
00:09:45,660 --> 00:09:53,450
I would want to pass in my query, in my case, Batman and also our right away and the query in my dependency

146
00:09:53,460 --> 00:09:53,570
here.

147
00:09:53,820 --> 00:09:54,240
Why?

148
00:09:54,600 --> 00:10:02,490
Well, because I would want to run watch movies every single time when I type something in input.

149
00:10:02,820 --> 00:10:03,210
Correct.

150
00:10:03,660 --> 00:10:06,870
And then I also will set up the log.

151
00:10:07,710 --> 00:10:09,720
So we'll go here with a log.

152
00:10:09,720 --> 00:10:12,030
And of course I'll just cancel log the error.

153
00:10:12,480 --> 00:10:13,620
We will say it.

154
00:10:14,040 --> 00:10:19,410
And now let's take a look at what we're getting back as far as data.

155
00:10:19,890 --> 00:10:22,350
So I'm going to go to my starter and notice here.

156
00:10:22,800 --> 00:10:27,420
I have a search, I have array, and that gives me back ten results.

157
00:10:27,810 --> 00:10:32,010
And not, by the way, I'm going to navigate two movies.

158
00:10:32,010 --> 00:10:34,560
And I don't think we need this data at the moment.

159
00:10:34,770 --> 00:10:36,570
Eventually, yes, we'll get something there.

160
00:10:36,570 --> 00:10:39,780
But the moment that comes along is just in our way.

161
00:10:40,170 --> 00:10:45,840
And then what's interesting about this API, that they have the property names capitalized.

162
00:10:46,200 --> 00:10:48,710
So we have the search and that is there.

163
00:10:48,930 --> 00:10:52,820
And then also we have total results and the response is true.

164
00:10:53,460 --> 00:10:57,860
So if we know that response is beautiful, we, of course, have the right.

165
00:10:58,200 --> 00:11:00,180
Now, I also would like to showcase that.

166
00:11:00,180 --> 00:11:03,810
Of course not always that response will be true.

167
00:11:04,380 --> 00:11:11,760
So if we're going to go, for example, we want a nice letter n now of course, the response is equal

168
00:11:11,760 --> 00:11:12,240
to false.

169
00:11:12,660 --> 00:11:18,180
And as far as the error message, well it just says here movie not from.

170
00:11:18,540 --> 00:11:20,280
So we will need to deal with that.

171
00:11:20,640 --> 00:11:22,140
And how do we deal with that.

172
00:11:22,140 --> 00:11:28,370
Well in the try where we're getting there, of course I would want to check well what is the value for

173
00:11:28,380 --> 00:11:28,980
response.

174
00:11:29,520 --> 00:11:32,280
If the response is true, then I would want to do one thing.

175
00:11:32,640 --> 00:11:38,870
And if the response is not true, meaning it is false, then of course I would want to set the.

176
00:11:39,450 --> 00:11:46,230
So in this case, I'm going to say if I'm not data and then dot and then remember the property names

177
00:11:46,230 --> 00:11:47,280
are capitalized.

178
00:11:47,700 --> 00:11:50,550
So that's one got you need to remember about this API.

179
00:11:50,910 --> 00:11:53,910
So I'm going to set this equal to true.

180
00:11:54,450 --> 00:11:59,040
So I need to make sure that the actual casing matches.

181
00:11:59,040 --> 00:11:59,600
Exactly.

182
00:11:59,910 --> 00:12:01,320
Otherwise it's not going to make sense.

183
00:12:01,620 --> 00:12:06,140
And then we go with set movies and we're passing data.

184
00:12:06,330 --> 00:12:10,170
So my object and then I remember it was in the search.

185
00:12:10,590 --> 00:12:11,070
Correct.

186
00:12:11,460 --> 00:12:17,850
And then also I would want to set my error to be false because again, we will be typing.

187
00:12:18,390 --> 00:12:25,620
So as you're typing notes here, for example, in this case says movie not found, but if I actually

188
00:12:25,620 --> 00:12:28,110
get the movie, I would want to remove that error.

189
00:12:28,320 --> 00:12:28,770
Correct.

190
00:12:28,930 --> 00:12:30,360
It doesn't make sense displaying it.

191
00:12:30,630 --> 00:12:39,540
That's why when we set up set movies and data that search and we also want to go set error and outside

192
00:12:39,540 --> 00:12:40,390
equal to false.

193
00:12:40,620 --> 00:12:41,970
Now, of course, this is an object.

194
00:12:42,360 --> 00:12:46,770
So in here I go would show up on false like so.

195
00:12:47,130 --> 00:12:47,380
So.

196
00:12:47,510 --> 00:12:50,390
Go with shovels and then as far as the message.

197
00:12:50,750 --> 00:12:57,260
Well, I'm just going to say message is equal to empty strength, then I have the false one as well.

198
00:12:57,720 --> 00:13:00,480
I go else and then set error.

199
00:13:00,620 --> 00:13:06,440
So this is the case where if the response is not true now, of course, I would want to display that

200
00:13:06,440 --> 00:13:06,690
error.

201
00:13:07,070 --> 00:13:12,730
So again, we pass in the object and I say show is equal to true.

202
00:13:12,990 --> 00:13:20,960
OK, so, um, as far as the message we go with whatever message that we're getting back, and if you

203
00:13:20,960 --> 00:13:26,150
want to take a look at the message, you'll see that it is in the error property.

204
00:13:26,600 --> 00:13:32,090
So we go back and we say messages equal to my data and line error.

205
00:13:32,420 --> 00:13:39,480
OK, so now last thing that I would want still within my try, I would want to say set is loading and

206
00:13:39,480 --> 00:13:41,020
that one is equal to false.

207
00:13:41,300 --> 00:13:51,770
We it and we should have the successful Frege function where we pass in of course the URL now we constructed

208
00:13:51,770 --> 00:13:58,850
the you are all by setting up the root endpoint plus our as parameter we is the query.

209
00:13:59,300 --> 00:14:05,270
And then of course if there's an error when displayed, if we successfully get the moisture then of

210
00:14:05,270 --> 00:14:06,500
course we get them always.

211
00:14:06,800 --> 00:14:12,800
So now the last thing before we start working in the moon, which component are we want to pass all

212
00:14:12,800 --> 00:14:13,990
those things down.

213
00:14:14,450 --> 00:14:19,940
So when I have the value, I'm going to go back to the jobs plan, sets up the colors, and then I would

214
00:14:19,940 --> 00:14:21,380
want to pass in the object.

215
00:14:21,680 --> 00:14:22,700
What am I looking for?

216
00:14:22,910 --> 00:14:24,920
Is loading that must add value.

217
00:14:25,370 --> 00:14:28,280
Then I would want the error if there is one.

218
00:14:28,610 --> 00:14:31,600
And also I want to get all the movies that I'm getting back.

219
00:14:31,610 --> 00:14:34,970
So that is my error and also the query.

220
00:14:35,300 --> 00:14:39,020
And in this case, I'll directly pass insectary.

221
00:14:39,260 --> 00:14:45,080
Remember, previously we were setting up the functions and then in that function we call this set query.

222
00:14:45,500 --> 00:14:52,520
Well, since there's not much functionality in the function, I just went the route where I'm passing

223
00:14:52,520 --> 00:14:53,750
in the whole function.

224
00:14:54,020 --> 00:14:58,310
So set query and then of course we use it in my search form.

225
00:14:58,520 --> 00:15:01,520
So query and then set query.

226
00:15:01,910 --> 00:15:08,210
And once we're done with our context API, I think we are in good shape.

227
00:15:09,030 --> 00:15:15,570
Where, of course, we can start working in the movies component and display some movies and of course,

228
00:15:15,570 --> 00:15:18,990
eventually we'll get to the search form as well.

229
00:15:19,110 --> 00:15:23,820
So I think I can just make this one a little bit bigger because now it will matter what we say.

230
00:15:24,180 --> 00:15:26,850
And let's start working on a movie component.