Awesome work on setting up all our static components, meaning the components that just take the data,
whether it is user data, whether that is the repos or followers the split.
Now, of course, this would be an awesome time to make our app dynamic where we'll also include a search
form.
So then the user can type the user he or she wants to search for.
For example, we could search for Brad Traverse, say, online, of course, the moment we submit the
form.
Now we hit Egert API.
We get all the awesome data that is going to come back.
And once it does, then we display information about our user, the one that we search for.
And also, of course, we display how many requests we can still make.
So let's do that.
Let's start working on this search form.
And of course, we would first need to find our component and also in the dashboard, remember, we
come and Daudi search.
So now this would be a awesome time to comment search.
Now, we should have that heading to the one from the very beginning of our project.
And now Insurge J.
S Let's start working on this component.
And in this component, there's going to be a local state.
So as we're typing in the form, there's going to be a state that collects that.
And then from the global one, we'll get a function that hits the API.
So I decided to split this up because I think it makes a little bit more sense instead of jamming everything
globally.
That's why I will start with this component, by setting up a user and we'll use use state.
So we're gonna go the user then some user function and that is going to be equal.
Let me correctly add that that user.
And that is equal to react.
React.
Use state your state and we'll start with an empty value.
So essentially just a empty string.
Then we're gonna get some things from global.
Not for now.
So get things from global context.
That is gonna happen eventually.
And also, once I submit the form, since I know that I'm going to have the form, I'm going to have
a function that handles that for the time being.
I'm just gonna go with council handle.
I've met online.
Of course, I would want to have a event object.
So I'm just gonna say here e online for the time being.
We're just going to console log stuff.
So we're going to say log.
Log on.
Let's see.
We're going to take a look at the user.
All right.
So that is our handle submit.
Of course, there's going to be a little bit more functionality in the handle submit.
But for time being.
That should do it.
So now let's set up our return instead of heading to.
I'm going to go.
We have a section.
We'll add a class name here.
So class name is equal to a section then in the section.
We're going to go with a rapper like show, the one that we currently have here.
Rapper and man.
Let's add a class name here as well.
Class name section Santore.
And then within this whole hour, rapper.
Let's start by setting up the forum.
So we're going to go with form and then instead of action, I would want to handle it on our end, of
course.
So that's why.
All right.
Away say that once we submit the form, we will invoke the handle submit.
So I'm going to go with on.
Have met and that is going to be equal to my handle.
Submit.
All right.
Awesome line inside the form.
What I would want to set it up.
Well, I would want to probably have a form control of form control.
And then inside of that form control, I imported a icon.
And also, I'm going to place the input on a button.
So let's do that.
I'm going to go with my icon.
And the icon name is.
And the search.
Let's close the icon event input.
That is just gonna be sample text.
But let's add a placeholder there as well.
So place holder.
And that is going to be equal to enter GitHub user.
All right.
Beautiful.
And let's say that just so we can see what we have.
Right.
So we have our form.
And also, it would be awesome if we would have a button that allows us to submit the form.
So let's go with Button.
It's going to have a type of submit online.
We're just gonna type here.
Search.
Well, let's do that.
And also, I would want to set up my requests because notice on the right hand side here, I have my
requests.
So each and every time I'll set up a request and the moment we load the application, we'll check how
many requests the person who is visiting the site still has.
So we'll do that right outside of form.
But still inside the wrapper, we're gonna go with heading three and overstay requests.
And eventually it's going to be coming from our global state, but not for now.
So let's just hardcourt some kind of value.
60 out of 16.
Let's save it.
All right.
So we have our requests acknowledged just two things.
First, I would want to update the value in the state, the user value as I'm typing.
So the moment I start typing, I would want to update this value.
And the second thing is, I would want to prevent the default once I submit the form, because at the
moment I'm not doing that.
So notice how we are reloading the application each and every time we submit the form.
And I guess I'm going to start by updating the user so I have my user and set user.
So first for the input, I could add a value here and I can say that value is going to be equal to a
user.
So whatever.
I already have typed it out.
And the second thing, of course, we need to have our own change.
So as we're typing out, we're listening for this event and then we decide, well, what are we doing?
And then in this case, I'm going to have my arrow function.
I'm going to pass my event.
And I'm going to say.
Set.
User.
So I'm invoking my set user function and I'll just pass here.
Event target and then value since I have access to the event.
Object on the event object have property by the name of Target.
And then I can just look for the value.
So whatever I'm going to be typing.
And then of course in order to prevent the default as far as the forms we just go with EA.
And then prevent default.
And then once we invoke this method, of course, in a console, we should see whatever value we have
for years.
Again.
Don't worry.
There's gonna be more logic here.
So type more logic.
Coming up soon.
Let's do this one.
Let's save it.
I think I'm going to navigate to a bigger screen just so I can see it better.
What do you expect?
We have our console.
Awesome.
We have the warnings.
We don't care about those.
Just type something out there.
And once I submit the form, I just need to scroll down and there it is.
Whatever.
I typed it out.
And I guess we'll start by setting up our logic where I would want to check whether I have entered something.
So what I'm going to do right now.
So I'm just gonna say if user is true.
Now, that means that if the user is gonna be empty string, then I'm just not going to do anything.
That's all I'm not going to display among and say you can't submit the form with empty user.
I mean, of course, if you want, you can do that because later I will show you how we can have some
kind of errors.
For example, if we're searching for user, that doesn't exist.
If I tried to do this in the application, you'll notice that there is going to be an error.
There is no user with that username.
So definitely if you want.
You can also set up a flag where, for example, if you're trying to submit the empty form.
Ha.
In my case, I just decided that if that is the case, if the person who is visiting your app and searching
for user by trying to submit the form with an empty value, I'm just not going to do anything.
I'm going to say, yeah, if the user is true, then I would want to do that.
More logic.
If not, while nothing is going to happen.
So you can click all day long.
But if there's no value in there, well, nothing is going to happen.
And the second thing, again, there's going to be more logic.
But the second thing is optional.
So I'm going to type here.
Optional.
Because you also can do set user.
And get it back to an empty string.
So if we test it out and then navigate back to a star.
And if you type the moment, you'll submit the form.
And of course, there's going to be some kind of value.
You could go back to a empty form.
However, in my case, again, in the complete app.
That's not what I went with.
So, for example, if you're searching for some kind of user order here.
And then if you give that user, I'm still leaving that name because I think it just makes more sense.
Because, for example, what if you mess that up?
And now you need to retype the whole name just because you messed up with one letter?
That is my preference.
That's why I'm saying that this is optional.
This is up to you if you want.
Of course, each and every time you submit the form, you can set it back to an empty.
But in my case, I won't do that.
So that should be our basic setup for the search form.
Of course, now we can just head back to our context and then setup the logic where we can make this
dynamic.
So we'll start communicating with the GitHub API.