Nicely done.
I think we are finally ready to tackle the big beast.
What am I talking about?
Well, we have everything in place to set up the functionality where when the visitor types, the GitHub
user, he or she can click the search.
And, of course, we can fetch the data about the user, including the repos and the followers and,
of course, the split.
So essentially, we'll finally make our app dynamic.
Not what we're interested in is, for the time being, just one.
You know, the one that I'm talking about is in the Read Me.
Again, we're going to get back to get our API and all that.
I'm going to close the sidebar and we're looking for our user.
So let's copy that one.
I will open up a new tab.
Copy and paste.
So that's the response that I'm getting.
If my request is successful and also let's try it out right away.
What is going to happen if we have some kind of our search here?
I'm going to type a bunch of gibberish.
Now, as a side note, if you don't want to waste your request, you don't have to do that.
This is just a showcase that once we try to get some kind of user that clearly doesn't exist, probably
would be very hard to imagine that someone would come up with that type of user name.
Of course, we're going to get the error, essentially.
We're not going to get the user.
So those are two options.
We set up the function.
We hit the API and either we successfully get back the user or we don't.
Correct.
So now the only thing left to do is just to set up that function and just wire up that function to Iran
every time we submit the form.
So let's start extremely simply by navigating back to our context.
And we're just gonna create that function.
So I'm going to say here, concept and search, search, GitHub user, GitHub user.
And then this function is just going to be looking for one thing or it's going to be async because we'll
have two once in a while wait for something.
So that's why it's gonna be a sync function and it's gonna be looking for the user that we will pass
in.
And then, of course, there's gonna be some functionality at the moment, not much.
We're going to do simple console log where we'll say, all right.
Show me the user that I will be searching for.
And, of course, what we would want to do is pass this search, get Abuzer to our value, because,
of course, we would want to use it in the search.
Correct.
So let's pass it down on line and research.
Of course, we will restructure it.
So search GitHub user.
And now I would want to run this function if the user exists.
Again, this is optional.
If you want to remove whatever the visitor has typed out, you can do that.
I'm not gonna do that.
This is just the showcase.
That, of course, is just possible.
And here I am going to run my search GitHub user search user, and I'm going to pass in the user that
I'm getting from the local state, so I'll save it.
And of course, I'm going to now get to a bigger screen right now and I'm going to open up the console
just so we can see that we're definitely passing data.
And then if that is the case, then, of course, we can start setting up the functionality, because
a lot of times I see that people start writing 10000 lines of code before even making sure that the
functionality is going to work.
Because if I see the user.
Yes.
And I know that I can do whatever I would like, but if it's not there, maybe I had a typo or something.
And it's always easier to find that bug if you have less code.
So let's try it out.
I'm just going to go with user here type search and.
Yep.
I have two users.
Beautiful.
Now, once I have that design, of course, I can head back to my context and then in the context.
Well, we'll set up the functionality.
Correct.
So what happens when we start searching?
Well, eventually we'll toggle narrow.
So I'm going to leave the common here, toggle error and I'll cover that a little bit later.
Then we'll set loading.
So another comment, something we're going to do a little bit later on.
So loading.
True.
And we'll start by just waiting for our response.
So now I want to use Axios to hit that Yoro.
Remember in the read me, we had API GitHub.
That was the root one that I'm looking for the users.
And then whatever user is Pastan.
So let's set that up in here.
I'm going to have a concert, a response, and that is going to be equal to.
Oh, wait.
Since I'm using a zip code and I'm gonna go of course, with Axios and in the Axios it is by default
to get requests or I don't need to do anything special.
Then I'm looking for my route.
You are all then forward slash users online, whatever user I passed in as an argument.
So user.
Now of course I have two options.
I can do that then, or I can just catch it.
So in my case, since I'm already waiting, I'm just going to take a look at what is my response and
then I'm gonna deal with it.
So essentially what I'm saying, there's gonna be no that Dennes I'm just gonna go with Cutch if there
is an error.
So error here and we're gonna cancel log there.
So there is an error.
Yes, we would like to cancel it.
Now, what are the options for our response?
Now let's take a look again.
If you don't want to use your requests, just keep on watching.
And then once I cover what are two options, which, by the way, we kind of already khadar in the browser,
then of course, you can set up the code.
So in here I'm going to say if response is true.
So it's not going to be false.
Then, of course, I would want to do something and that something is going to be set up user.
And we're gonna with response and then data and of course, why don't we also console logged response
just so we know when we have one condition and one the other one.
So log online response and learn what is our other option?
Well, that is going to be if, of course, we cannot find the refuser.
Correct.
So in this case, I would want to toggle that error.
So I'm going to go here with toggle error and we'll pass in.
True.
So one shockers there.
And what was my message?
Well, I could go with.
There is no user with that username.
Something like that.
And now, of course, let's try to set up our form where first I'm going to search for the user that
doesn't exist.
So let's go back to Brad.
So, Brad, transversely.
Let's see.
And notice how already some data changed.
And here I can see the response where I have the data.
So the user information then one that a little green over here in the axios is in the data.
That's why I'm asked here, said give up user and then response data.
So remember, we had that function that controls it.
So right away, past the user information.
If, of course, the response makes sense.
Meaning if our request was successful, what would be the case?
If our success wasn't successful.
Now we can probably just add zie and we're gonna get there.
And of course, we have four or four in a console.
Correct.
Because we can still log the error.
So forfour we cannot find a user.
And then notice we have undefined.
So if that is the case, of course, then we throw the error.
Then we say, well, there is no user with that username.
And remember.
At the beginning, I said doggle error.
So while I was doing that, well, imagine this scenario right now.
So we search for the user, correct?
Now, if I'm going to search for the user to actually does exists, I'm going to go back to Brad.
You'll see that I still have my error because I didn't remove it.
So that's why what I would want to do is every time I start searching for the user, I would want to
make sure that if there is an error, I remove it.
Now, if it's not there, it's not going to do any bad because I already have default of show, false
of message.
So essentially, I'm just sending this back to a default.
So I'm going to uncommon this.
And then remember when I was setting up my function, the toggle error function.
Notice how I passed in the E6 defaults where if I don't pass in the show by default, is going to be
false.
If I don't pass in, the message by default is just going to be empty string.
Now of course we can use it.
That's why I'm just invoking because I already have some predefined defaults.
So now of course, once I sell it.
Notice that if someone search for a user doesn't exist, I'm going to go back to Brad Travis.
See see.
I search for it.
Then I remove it online once I search.
Now everything works.
And I'm not displaying that there again.
We have three things that we need to worry about.
First, we have our Freda's request, meaning using the axios and all that.
So rejects requests.
And then we're looking for users.
And then whoever we pass in from our search and then we have two options.
Either we're gonna have pay success, meaning our request is going to be successful.
So we're gonna get back some response.
And the user data is in the response and data.
And then the other option is, of course, undefined.
So if the response is undefined, then we toggle error.
Now, of course, there's more logic here.
So let me add here, comma, more logic here.
And I'm sorry I said comma.
Let me add the comment where there's gonna be more logic.
Don't worry.
I purposely put this up in multiple videos because I would want everyone to be on the same bridge.
So there's gonna be more logic.
But as long as we have the user beautiful, we now use the set.
Get Abuzer, our function that controls that user.
And we can clearly already see that the moment I search for some user that does exist.
For example, again, we can go maybe with Scott Dolinski.
I believe his user name was like this.
Notice we right away change them.
Bower's now not all of them.
Of course, we haven't worked yet.
We, the followers, ordinary poles and all that.
But we nicely saw how this information changed right away.
And that's real important.
So hopefully this makes sense.
We are starting to move the right direction.
So now we just need to add a little bit of tweaks with the loading and then we'll finally be able to
finish it off by getting the followers as well as the REPOLISH.