And once we have our form now, it starts setting up our functionality and we'll start by going over
the get up API one more time where as far as the Gateway API, if we would want to have a root and point.
So this is where all our requests are going to start.
The end point would be a [REMOVED] P.S. then call on them to forward slashers API and GitHub dot com.
So that's where we'll start.
Now we would want to have user.
Then we're gonna go with forward slash and users, then whatever user.
And we can already imagine that this is how we're going to perform their first request, where we're
gonna take the user out of the search component and just place it in our it just request that if would
want to have repost.
Again, we go with users, then user, whoever it is, and then we're looking for EBOs now.
By default, you're going to get 30 repos.
That's why we're adding this query here where I'm saying, yeah, get me, please.
The hundred.
So this just gives us a hundred repost instead of 30.
And the same thing I'm doing here for followers where essentially I'm just adding the per page as well.
Now, I haven't added it to a read me, but eventually it's gonna be there where again, we're getting
four followers and we're getting our hundred per page.
And last thing that we can do is we can check the orate limit.
And essentially, this does not use our requests so we can do it as many times as we would want.
And of course, if we want to check it out, how that work, while we can simply copy your roll it over
to a browser, the browser is going to perform.
I get a request narrative's.
So that's what we're going to get back in here.
I can see that I have a limit of 60.
That's the default one.
And I have the remaining one.
It also tells me when it's going to be reset because remember, we got 60 requests per hour.
So here's what I would want to do in our application.
The moment I load my application, I would want to set up a request to get how many requests I still
can do.
And then depending on that, I right away would want to, for example, display the error.
If there are no requests available, if we have used all of them.
And also, for example, hide the search button, because that's just going to signal to a user that,
hey, listen, you cannot do any more requests.
So let's do that.
We want to head over to my context.
This is where all set up our logic.
And in order to perform a Ajax request.
I'm going to use the Axios library.
Now, if you want.
Of course, you can use fetch as well.
That's up to you.
But there's just some things that I like about Axios.
And of course, it is already installed in dependencies so you can write or use it.
I'm right away importing in the context.
So what I would want is the moment my application loads, I would want to perform a fresh request where
it gets me the rate limit.
So essentially it gets me the info of how many quests the user can do.
So then we can do multiple things once we have that data.
And we already know that in order to perform that kind of request, we most likely would use a user
effect.
Because that runs after each and every render.
Correct.
Now, we also know that it would probably be useful if we would have some kind of state variable.
So let's start over there where I'm gonna go.
Only requests.
And then also I'm going to say lowering, because I'm also going to add that right away.
Even though the moment it's not going to make much sense.
Meaning we're not going to work on loading just yet.
But eventually we will.
So in here we go with requests.
And then, of course, the function is set request.
And that is equal to my use state.
I'll just say that at the very start.
The value is going to be zero.
So by default and zero.
And of course, once I check that, I'm gonna display the proper value.
And also, like I said, I would want to work on my loading.
So we're gonna go with cost.
And then a lowering then set is loading.
And that is equal to my use state.
And if you want by default, you can set it.
True.
But in my case, I'm just gonna go with false.
And then eventually there's also gonna be something for the errors.
But since we're gonna cover that next video, I'm just gonna leave the comment here.
Error.
Great.
Now, once we have this setup.
Now, I would want to set up my use of fact online for the time being is going to be an empty function.
Just console logs, hey, everything works.
So we go with use of fact.
Then remember, we had to pass in callback function.
And then since I would only want to run my user effect once, I'll pass in my dependency array and I'll
set it to an equal array.
I'm sorry.
Do an empty array.
Let's go with console log.
Hey, up loaded.
All right.
Let's not forget the bigger screen.
I enjoy always console on a very strange.
Let's refresh and we should see somewhere.
The console.
Hey, the app loaded.
Beautiful.
So now let's set up our function.
So the function that hits the GitHub API, but not just some random you are all essentially will check
for at a rate limit.
So what we could do is go back to context.
I already have the road yellow.
So this is just gonna help you to setup the requests because you can always just reference the variable.
Let's set up our function where I'm going to close the sidebar now.
Above the use effect.
I think that should be a good place.
We're gonna go with a comment of check and then.
All right.
And then let's go with concept check requests.
That's the name of my function.
As always, you can call.
How are you?
Like, as far as you remember how it's called later.
So please don't call it banana land.
Try to invoke each request because of course, that's not going to work.
And the way Axia years work by default, its a guest request.
This is exactly what you want.
So we just type axios on line.
I'm going to access my root.
You are all then forward slash.
And I remember the address that I was looking for was right and then a limit.
And then since Axios returns, a promise we can right away due to things where I could set up then.
So this is where I'm gonna be looking for the data that I'm getting back.
So this is my callback function.
So I'm just gonna pass here data or you can name this response.
And also right away set up to catch where I'm going to say, yeah, catch.
And if there is an error than just console, log it.
So I'll go with console log and line error.
OK.
Of course.
Now what I would want is to invoke it wants the app nodes, not what could technically pass check requests
in the user could do something like this.
So check requests.
But what's all but knowing that right now you'll see in warnings that essentially we have an added check
request to our dependency array.
Again, it's not the end of the world, but definitely that warnings that are now at the moment, I
consider, of course, there's many, many warnings.
So maybe this is not the most useful one.
But eventually, yeah, I can tell you right away that it's there.
That's what I what I'm going to do instead is instead of passing this as an empty arrow function, I'm
just going to say, yeah, once the app load.
Then just use check requests as our callback function.
And that's something that I haven't included in my previous project.
That's why I purposely set it up this way.
And now we should see our data.
So we should see our data.
Now, of course, nothing is there at the moment because I didn't do anything with that.
So I'm going to go with console lock data and essentially we should get back the same object.
Now, of course, in this time, this is going to be in a console.
And then since we are using Axios, we get a response from the Axios.
And right away we have everything in Jason.
So we don't need to run this that Jason method like you would with fetch.
That's also a very neat feature.
And then the data is going to be, of course, if the request is successful in the data property.
So you're getting back the object.
And then from that object, you would want to the structure data.
So instead of just looking for response, I'm going to go here.
We had structuring my data out.
And then again, we can do the same thing.
Now we're just going to console log our data.
And again, our lab loads.
And then the rate is going to be in the right property.
And then we have the limit.
We have remaining and we have the reset.
So now I would want to structure that remaining out of the data.
So let's go back.
We're not going to console Log-in this time.
We're just going to say let and then.
Right.
So first property is right and in the right we have remaining that we would want and the structure out
of the data.
And yes, I'm fully aware that KHUSH, we can structure it here as well.
But just for change, I went into a new one.
And now what I would want is to set my request more as these ones.
I would want to set them to this value to the one that I'm getting back, of course.
And in here will say Sutt requests.
So such requests.
And then let's pass in the remaining.
Now, we also need to right away check if the remaining is zero.
So we're going to go if and then remaining if it is zero, then of course, I know that I don't have
requests.
So now I want to throw an error and we'll do that in the next video.
So thrown out.
OK, I'd request zero.
If not, then we'll set our remaining correct.
Meaning we'll set our request.
And then of course, if the remaining zero is there no more requests, then I would want to do something.
Then we would want to hide the search button because there's no point of showing that buttons since
the user cannot perform requests anyway.
And also, I'd want to throw the error similarly, like I showed you before, where if the user is not
there, we'll do something similar.
Where on.
By the way.
Cause that user has to be there.
Still this one as well.
So let's see.
Well, this one doesn't exist.
So there is no user.
So do the same thing when there are no requests.
Meaning we have used up all our requests.
Our will also hide this button.
So not once we have those requests.
Once I have it here in my state where we know that we can nicely pass it down.
Correct.
So I could say, yeah, pass down requests.
Beautiful.
And now in the search, of course, I would want to access that.
So either you can do it before or after.
Doesn't really matter as far as the user.
Now would want to access some things from my global state.
And now I want to start working on them.
So I'm gonna go here with concert and then we're gonna look for my requests because that's what I passed
him.
And that is coming from react.
Then use context.
And then, of course, we pass in the gap context in here just so I don't run around like a headless
chicken.
I'm just going to check whether I'm getting something there.
As far as the value.
Otherwise, it's not going to be pretty watching me trying to debug the application.
Of course there is.
I have forty seven.
So what do we can do next.
Well we can use this one.
And of course start by just setting up here the request.
Let's do that.
Let's say requests over here.
Hey, beautiful.
So now this is gonna be dynamic.
Notice how I'm getting forty seven.
So of course I can only show you that if I go back to my complete application and do some kind of request
because we still haven't set up our star application.
But remember, we are using our API right now for those requests.
Well, that's why when I go back and when I refresh, this is gonna be already forty four.
So that's what I was trying to tell you all the time, that the IP address is the one that's important,
not the user you're searching for or anything like that.
So now once I can show the requests, like I keep on mentioning, I also would want to hide the button.
So if there are no requests available, then I would want to hide my button.
So here I have my button and we could set up with Conditional where I'm going to say requests, requests
if the request is bigger and zero.
Only then show my button.
So do.
And operator will cut out my button and place it over here.
So now what happens?
Only if we are requests.
Then we display.
Now, of course, the easiest way for me to share that is by heading open the context.
And instead of passing and remaining, could just say zero and narrative's.
Now, of course you want see the button.
Well, because we have used up all our requests.
So let's pass in the remaining.
And now we have already some functionality where we check the requests.
The moment the app loads.
And then depending on that, we display them here.
Requests and also show or high D button.