1
00:00:00,200 --> 00:00:06,410
And once we have our form now, it starts setting up our functionality and we'll start by going over

2
00:00:06,410 --> 00:00:13,290
the get up API one more time where as far as the Gateway API, if we would want to have a root and point.

3
00:00:13,710 --> 00:00:16,620
So this is where all our requests are going to start.

4
00:00:17,100 --> 00:00:24,030
The end point would be a [REMOVED] P.S. then call on them to forward slashers API and GitHub dot com.

5
00:00:24,520 --> 00:00:25,570
So that's where we'll start.

6
00:00:25,950 --> 00:00:27,930
Now we would want to have user.

7
00:00:28,260 --> 00:00:32,250
Then we're gonna go with forward slash and users, then whatever user.

8
00:00:32,730 --> 00:00:38,430
And we can already imagine that this is how we're going to perform their first request, where we're

9
00:00:38,470 --> 00:00:46,980
gonna take the user out of the search component and just place it in our it just request that if would

10
00:00:46,980 --> 00:00:47,990
want to have repost.

11
00:00:48,360 --> 00:00:55,560
Again, we go with users, then user, whoever it is, and then we're looking for EBOs now.

12
00:00:55,680 --> 00:00:58,380
By default, you're going to get 30 repos.

13
00:00:58,800 --> 00:01:03,780
That's why we're adding this query here where I'm saying, yeah, get me, please.

14
00:01:04,170 --> 00:01:04,980
The hundred.

15
00:01:05,400 --> 00:01:09,190
So this just gives us a hundred repost instead of 30.

16
00:01:09,660 --> 00:01:16,110
And the same thing I'm doing here for followers where essentially I'm just adding the per page as well.

17
00:01:16,440 --> 00:01:21,450
Now, I haven't added it to a read me, but eventually it's gonna be there where again, we're getting

18
00:01:21,450 --> 00:01:25,260
four followers and we're getting our hundred per page.

19
00:01:25,860 --> 00:01:30,480
And last thing that we can do is we can check the orate limit.

20
00:01:31,030 --> 00:01:37,440
And essentially, this does not use our requests so we can do it as many times as we would want.

21
00:01:37,830 --> 00:01:44,090
And of course, if we want to check it out, how that work, while we can simply copy your roll it over

22
00:01:44,100 --> 00:01:46,560
to a browser, the browser is going to perform.

23
00:01:46,570 --> 00:01:48,110
I get a request narrative's.

24
00:01:48,630 --> 00:01:52,020
So that's what we're going to get back in here.

25
00:01:52,380 --> 00:01:54,810
I can see that I have a limit of 60.

26
00:01:55,290 --> 00:01:56,130
That's the default one.

27
00:01:56,490 --> 00:01:57,960
And I have the remaining one.

28
00:01:59,100 --> 00:02:06,360
It also tells me when it's going to be reset because remember, we got 60 requests per hour.

29
00:02:06,900 --> 00:02:09,420
So here's what I would want to do in our application.

30
00:02:10,290 --> 00:02:18,630
The moment I load my application, I would want to set up a request to get how many requests I still

31
00:02:18,630 --> 00:02:19,050
can do.

32
00:02:19,770 --> 00:02:25,380
And then depending on that, I right away would want to, for example, display the error.

33
00:02:25,740 --> 00:02:30,030
If there are no requests available, if we have used all of them.

34
00:02:30,420 --> 00:02:35,040
And also, for example, hide the search button, because that's just going to signal to a user that,

35
00:02:35,040 --> 00:02:37,740
hey, listen, you cannot do any more requests.

36
00:02:38,200 --> 00:02:38,820
So let's do that.

37
00:02:39,360 --> 00:02:43,050
We want to head over to my context.

38
00:02:43,680 --> 00:02:45,600
This is where all set up our logic.

39
00:02:46,120 --> 00:02:48,600
And in order to perform a Ajax request.

40
00:02:49,110 --> 00:02:50,760
I'm going to use the Axios library.

41
00:02:51,030 --> 00:02:51,880
Now, if you want.

42
00:02:51,900 --> 00:02:54,810
Of course, you can use fetch as well.

43
00:02:55,170 --> 00:02:55,770
That's up to you.

44
00:02:55,800 --> 00:02:58,310
But there's just some things that I like about Axios.

45
00:02:58,320 --> 00:03:03,210
And of course, it is already installed in dependencies so you can write or use it.

46
00:03:03,700 --> 00:03:06,330
I'm right away importing in the context.

47
00:03:06,990 --> 00:03:14,580
So what I would want is the moment my application loads, I would want to perform a fresh request where

48
00:03:14,670 --> 00:03:16,650
it gets me the rate limit.

49
00:03:16,920 --> 00:03:22,740
So essentially it gets me the info of how many quests the user can do.

50
00:03:23,130 --> 00:03:26,150
So then we can do multiple things once we have that data.

51
00:03:26,830 --> 00:03:33,260
And we already know that in order to perform that kind of request, we most likely would use a user

52
00:03:33,260 --> 00:03:33,420
effect.

53
00:03:34,080 --> 00:03:37,480
Because that runs after each and every render.

54
00:03:37,770 --> 00:03:38,100
Correct.

55
00:03:38,910 --> 00:03:45,810
Now, we also know that it would probably be useful if we would have some kind of state variable.

56
00:03:46,230 --> 00:03:49,190
So let's start over there where I'm gonna go.

57
00:03:49,310 --> 00:03:50,690
Only requests.

58
00:03:51,630 --> 00:03:55,530
And then also I'm going to say lowering, because I'm also going to add that right away.

59
00:03:55,560 --> 00:03:58,530
Even though the moment it's not going to make much sense.

60
00:03:58,560 --> 00:04:01,140
Meaning we're not going to work on loading just yet.

61
00:04:01,470 --> 00:04:02,490
But eventually we will.

62
00:04:02,880 --> 00:04:05,230
So in here we go with requests.

63
00:04:06,120 --> 00:04:09,480
And then, of course, the function is set request.

64
00:04:10,080 --> 00:04:13,170
And that is equal to my use state.

65
00:04:14,220 --> 00:04:17,220
I'll just say that at the very start.

66
00:04:17,340 --> 00:04:19,050
The value is going to be zero.

67
00:04:19,470 --> 00:04:20,640
So by default and zero.

68
00:04:21,030 --> 00:04:25,230
And of course, once I check that, I'm gonna display the proper value.

69
00:04:25,960 --> 00:04:28,800
And also, like I said, I would want to work on my loading.

70
00:04:29,400 --> 00:04:30,820
So we're gonna go with cost.

71
00:04:31,770 --> 00:04:35,460
And then a lowering then set is loading.

72
00:04:36,270 --> 00:04:39,480
And that is equal to my use state.

73
00:04:40,070 --> 00:04:41,970
And if you want by default, you can set it.

74
00:04:42,090 --> 00:04:42,680
True.

75
00:04:42,950 --> 00:04:46,310
But in my case, I'm just gonna go with false.

76
00:04:47,010 --> 00:04:50,140
And then eventually there's also gonna be something for the errors.

77
00:04:50,190 --> 00:04:54,570
But since we're gonna cover that next video, I'm just gonna leave the comment here.

78
00:04:54,990 --> 00:04:55,370
Error.

79
00:04:56,010 --> 00:04:56,270
Great.

80
00:04:57,050 --> 00:04:58,890
Now, once we have this setup.

81
00:04:59,600 --> 00:05:06,510
Now, I would want to set up my use of fact online for the time being is going to be an empty function.

82
00:05:06,830 --> 00:05:09,230
Just console logs, hey, everything works.

83
00:05:09,590 --> 00:05:11,900
So we go with use of fact.

84
00:05:12,360 --> 00:05:15,320
Then remember, we had to pass in callback function.

85
00:05:15,860 --> 00:05:24,500
And then since I would only want to run my user effect once, I'll pass in my dependency array and I'll

86
00:05:24,500 --> 00:05:26,270
set it to an equal array.

87
00:05:26,720 --> 00:05:27,080
I'm sorry.

88
00:05:27,080 --> 00:05:28,110
Do an empty array.

89
00:05:28,970 --> 00:05:30,140
Let's go with console log.

90
00:05:30,170 --> 00:05:33,080
Hey, up loaded.

91
00:05:33,980 --> 00:05:34,390
All right.

92
00:05:35,240 --> 00:05:36,590
Let's not forget the bigger screen.

93
00:05:37,310 --> 00:05:39,530
I enjoy always console on a very strange.

94
00:05:39,930 --> 00:05:43,460
Let's refresh and we should see somewhere.

95
00:05:43,640 --> 00:05:44,080
The console.

96
00:05:44,720 --> 00:05:45,780
Hey, the app loaded.

97
00:05:46,010 --> 00:05:46,370
Beautiful.

98
00:05:46,880 --> 00:05:48,530
So now let's set up our function.

99
00:05:49,010 --> 00:05:56,540
So the function that hits the GitHub API, but not just some random you are all essentially will check

100
00:05:56,840 --> 00:05:58,340
for at a rate limit.

101
00:05:58,910 --> 00:06:02,270
So what we could do is go back to context.

102
00:06:02,420 --> 00:06:04,400
I already have the road yellow.

103
00:06:04,760 --> 00:06:11,180
So this is just gonna help you to setup the requests because you can always just reference the variable.

104
00:06:12,020 --> 00:06:15,750
Let's set up our function where I'm going to close the sidebar now.

105
00:06:17,150 --> 00:06:18,180
Above the use effect.

106
00:06:18,530 --> 00:06:20,390
I think that should be a good place.

107
00:06:20,780 --> 00:06:24,830
We're gonna go with a comment of check and then.

108
00:06:24,920 --> 00:06:25,360
All right.

109
00:06:26,090 --> 00:06:29,230
And then let's go with concept check requests.

110
00:06:30,140 --> 00:06:31,490
That's the name of my function.

111
00:06:32,150 --> 00:06:33,080
As always, you can call.

112
00:06:33,110 --> 00:06:33,530
How are you?

113
00:06:33,530 --> 00:06:37,240
Like, as far as you remember how it's called later.

114
00:06:37,580 --> 00:06:41,150
So please don't call it banana land.

115
00:06:41,330 --> 00:06:44,990
Try to invoke each request because of course, that's not going to work.

116
00:06:45,480 --> 00:06:48,770
And the way Axia years work by default, its a guest request.

117
00:06:49,010 --> 00:06:50,290
This is exactly what you want.

118
00:06:50,320 --> 00:06:53,120
So we just type axios on line.

119
00:06:53,410 --> 00:06:54,820
I'm going to access my root.

120
00:06:54,960 --> 00:06:57,290
You are all then forward slash.

121
00:06:57,610 --> 00:07:03,170
And I remember the address that I was looking for was right and then a limit.

122
00:07:03,470 --> 00:07:11,000
And then since Axios returns, a promise we can right away due to things where I could set up then.

123
00:07:11,450 --> 00:07:15,080
So this is where I'm gonna be looking for the data that I'm getting back.

124
00:07:15,230 --> 00:07:16,610
So this is my callback function.

125
00:07:17,030 --> 00:07:20,420
So I'm just gonna pass here data or you can name this response.

126
00:07:20,870 --> 00:07:25,240
And also right away set up to catch where I'm going to say, yeah, catch.

127
00:07:25,580 --> 00:07:28,550
And if there is an error than just console, log it.

128
00:07:29,090 --> 00:07:32,670
So I'll go with console log and line error.

129
00:07:33,380 --> 00:07:33,640
OK.

130
00:07:34,880 --> 00:07:35,390
Of course.

131
00:07:35,480 --> 00:07:43,160
Now what I would want is to invoke it wants the app nodes, not what could technically pass check requests

132
00:07:43,250 --> 00:07:45,560
in the user could do something like this.

133
00:07:46,370 --> 00:07:47,480
So check requests.

134
00:07:47,990 --> 00:07:55,730
But what's all but knowing that right now you'll see in warnings that essentially we have an added check

135
00:07:55,750 --> 00:07:58,310
request to our dependency array.

136
00:07:58,730 --> 00:08:03,230
Again, it's not the end of the world, but definitely that warnings that are now at the moment, I

137
00:08:03,270 --> 00:08:05,960
consider, of course, there's many, many warnings.

138
00:08:06,410 --> 00:08:09,860
So maybe this is not the most useful one.

139
00:08:10,130 --> 00:08:12,800
But eventually, yeah, I can tell you right away that it's there.

140
00:08:13,190 --> 00:08:20,180
That's what I what I'm going to do instead is instead of passing this as an empty arrow function, I'm

141
00:08:20,180 --> 00:08:23,510
just going to say, yeah, once the app load.

142
00:08:24,020 --> 00:08:28,310
Then just use check requests as our callback function.

143
00:08:28,640 --> 00:08:32,510
And that's something that I haven't included in my previous project.

144
00:08:32,570 --> 00:08:34,490
That's why I purposely set it up this way.

145
00:08:35,000 --> 00:08:37,610
And now we should see our data.

146
00:08:38,120 --> 00:08:39,350
So we should see our data.

147
00:08:39,620 --> 00:08:43,250
Now, of course, nothing is there at the moment because I didn't do anything with that.

148
00:08:43,550 --> 00:08:48,350
So I'm going to go with console lock data and essentially we should get back the same object.

149
00:08:48,980 --> 00:08:52,400
Now, of course, in this time, this is going to be in a console.

150
00:08:52,760 --> 00:08:58,340
And then since we are using Axios, we get a response from the Axios.

151
00:08:58,820 --> 00:09:01,340
And right away we have everything in Jason.

152
00:09:01,340 --> 00:09:05,360
So we don't need to run this that Jason method like you would with fetch.

153
00:09:05,420 --> 00:09:07,520
That's also a very neat feature.

154
00:09:07,910 --> 00:09:14,190
And then the data is going to be, of course, if the request is successful in the data property.

155
00:09:14,750 --> 00:09:16,010
So you're getting back the object.

156
00:09:16,580 --> 00:09:20,600
And then from that object, you would want to the structure data.

157
00:09:21,080 --> 00:09:25,850
So instead of just looking for response, I'm going to go here.

158
00:09:26,200 --> 00:09:28,280
We had structuring my data out.

159
00:09:28,940 --> 00:09:30,880
And then again, we can do the same thing.

160
00:09:30,890 --> 00:09:33,350
Now we're just going to console log our data.

161
00:09:34,220 --> 00:09:36,170
And again, our lab loads.

162
00:09:36,650 --> 00:09:39,200
And then the rate is going to be in the right property.

163
00:09:39,920 --> 00:09:41,240
And then we have the limit.

164
00:09:41,780 --> 00:09:45,050
We have remaining and we have the reset.

165
00:09:45,650 --> 00:09:52,670
So now I would want to structure that remaining out of the data.

166
00:09:53,270 --> 00:09:53,990
So let's go back.

167
00:09:55,020 --> 00:09:56,550
We're not going to console Log-in this time.

168
00:09:57,060 --> 00:10:00,250
We're just going to say let and then.

169
00:10:00,930 --> 00:10:01,320
Right.

170
00:10:01,890 --> 00:10:09,000
So first property is right and in the right we have remaining that we would want and the structure out

171
00:10:09,000 --> 00:10:09,770
of the data.

172
00:10:10,100 --> 00:10:13,660
And yes, I'm fully aware that KHUSH, we can structure it here as well.

173
00:10:14,160 --> 00:10:18,150
But just for change, I went into a new one.

174
00:10:18,780 --> 00:10:24,180
And now what I would want is to set my request more as these ones.

175
00:10:24,660 --> 00:10:29,340
I would want to set them to this value to the one that I'm getting back, of course.

176
00:10:29,910 --> 00:10:33,480
And in here will say Sutt requests.

177
00:10:34,050 --> 00:10:35,160
So such requests.

178
00:10:35,520 --> 00:10:37,800
And then let's pass in the remaining.

179
00:10:38,310 --> 00:10:44,070
Now, we also need to right away check if the remaining is zero.

180
00:10:44,430 --> 00:10:50,550
So we're going to go if and then remaining if it is zero, then of course, I know that I don't have

181
00:10:50,550 --> 00:10:51,030
requests.

182
00:10:51,510 --> 00:10:56,940
So now I want to throw an error and we'll do that in the next video.

183
00:10:57,300 --> 00:10:58,000
So thrown out.

184
00:10:58,650 --> 00:11:00,620
OK, I'd request zero.

185
00:11:01,170 --> 00:11:04,860
If not, then we'll set our remaining correct.

186
00:11:05,070 --> 00:11:06,900
Meaning we'll set our request.

187
00:11:07,380 --> 00:11:13,050
And then of course, if the remaining zero is there no more requests, then I would want to do something.

188
00:11:13,170 --> 00:11:17,640
Then we would want to hide the search button because there's no point of showing that buttons since

189
00:11:17,640 --> 00:11:19,330
the user cannot perform requests anyway.

190
00:11:19,740 --> 00:11:25,800
And also, I'd want to throw the error similarly, like I showed you before, where if the user is not

191
00:11:25,800 --> 00:11:27,690
there, we'll do something similar.

192
00:11:28,140 --> 00:11:29,040
Where on.

193
00:11:29,070 --> 00:11:29,550
By the way.

194
00:11:29,760 --> 00:11:31,170
Cause that user has to be there.

195
00:11:31,620 --> 00:11:32,850
Still this one as well.

196
00:11:33,450 --> 00:11:34,020
So let's see.

197
00:11:34,210 --> 00:11:35,340
Well, this one doesn't exist.

198
00:11:35,370 --> 00:11:36,240
So there is no user.

199
00:11:36,510 --> 00:11:40,110
So do the same thing when there are no requests.

200
00:11:40,170 --> 00:11:42,090
Meaning we have used up all our requests.

201
00:11:42,500 --> 00:11:44,550
Our will also hide this button.

202
00:11:45,090 --> 00:11:48,360
So not once we have those requests.

203
00:11:48,630 --> 00:11:53,020
Once I have it here in my state where we know that we can nicely pass it down.

204
00:11:53,040 --> 00:11:53,430
Correct.

205
00:11:53,880 --> 00:11:57,180
So I could say, yeah, pass down requests.

206
00:11:57,700 --> 00:11:58,230
Beautiful.

207
00:11:58,680 --> 00:12:01,280
And now in the search, of course, I would want to access that.

208
00:12:01,740 --> 00:12:03,780
So either you can do it before or after.

209
00:12:04,080 --> 00:12:06,120
Doesn't really matter as far as the user.

210
00:12:06,450 --> 00:12:10,560
Now would want to access some things from my global state.

211
00:12:11,210 --> 00:12:13,200
And now I want to start working on them.

212
00:12:13,670 --> 00:12:19,910
So I'm gonna go here with concert and then we're gonna look for my requests because that's what I passed

213
00:12:19,910 --> 00:12:20,120
him.

214
00:12:20,610 --> 00:12:22,440
And that is coming from react.

215
00:12:23,070 --> 00:12:24,390
Then use context.

216
00:12:24,810 --> 00:12:30,960
And then, of course, we pass in the gap context in here just so I don't run around like a headless

217
00:12:30,960 --> 00:12:31,410
chicken.

218
00:12:32,070 --> 00:12:34,380
I'm just going to check whether I'm getting something there.

219
00:12:34,650 --> 00:12:35,730
As far as the value.

220
00:12:36,300 --> 00:12:40,230
Otherwise, it's not going to be pretty watching me trying to debug the application.

221
00:12:40,230 --> 00:12:41,010
Of course there is.

222
00:12:41,100 --> 00:12:42,720
I have forty seven.

223
00:12:43,260 --> 00:12:45,060
So what do we can do next.

224
00:12:45,570 --> 00:12:47,470
Well we can use this one.

225
00:12:47,490 --> 00:12:51,690
And of course start by just setting up here the request.

226
00:12:52,500 --> 00:12:53,090
Let's do that.

227
00:12:53,310 --> 00:12:55,690
Let's say requests over here.

228
00:12:56,050 --> 00:12:56,730
Hey, beautiful.

229
00:12:57,060 --> 00:12:58,410
So now this is gonna be dynamic.

230
00:12:58,620 --> 00:13:00,100
Notice how I'm getting forty seven.

231
00:13:00,660 --> 00:13:07,500
So of course I can only show you that if I go back to my complete application and do some kind of request

232
00:13:07,530 --> 00:13:09,990
because we still haven't set up our star application.

233
00:13:10,500 --> 00:13:14,130
But remember, we are using our API right now for those requests.

234
00:13:14,220 --> 00:13:18,840
Well, that's why when I go back and when I refresh, this is gonna be already forty four.

235
00:13:19,410 --> 00:13:24,750
So that's what I was trying to tell you all the time, that the IP address is the one that's important,

236
00:13:25,230 --> 00:13:28,440
not the user you're searching for or anything like that.

237
00:13:28,920 --> 00:13:35,250
So now once I can show the requests, like I keep on mentioning, I also would want to hide the button.

238
00:13:36,030 --> 00:13:43,260
So if there are no requests available, then I would want to hide my button.

239
00:13:43,620 --> 00:13:51,960
So here I have my button and we could set up with Conditional where I'm going to say requests, requests

240
00:13:52,680 --> 00:13:55,260
if the request is bigger and zero.

241
00:13:55,620 --> 00:13:57,630
Only then show my button.

242
00:13:58,200 --> 00:13:58,870
So do.

243
00:13:59,350 --> 00:14:03,750
And operator will cut out my button and place it over here.

244
00:14:04,350 --> 00:14:05,520
So now what happens?

245
00:14:06,030 --> 00:14:07,560
Only if we are requests.

246
00:14:07,620 --> 00:14:08,550
Then we display.

247
00:14:09,360 --> 00:14:13,920
Now, of course, the easiest way for me to share that is by heading open the context.

248
00:14:14,370 --> 00:14:19,980
And instead of passing and remaining, could just say zero and narrative's.

249
00:14:20,100 --> 00:14:21,660
Now, of course you want see the button.

250
00:14:22,110 --> 00:14:24,240
Well, because we have used up all our requests.

251
00:14:24,600 --> 00:14:26,340
So let's pass in the remaining.

252
00:14:26,910 --> 00:14:31,140
And now we have already some functionality where we check the requests.

253
00:14:31,440 --> 00:14:33,600
The moment the app loads.

254
00:14:34,050 --> 00:14:36,690
And then depending on that, we display them here.

255
00:14:37,000 --> 00:14:40,800
Requests and also show or high D button.