All right.
And up next, let's remove the temporary submit button and let's add a functionality where every time
we change something in the input, we actually make a new request.
So technically, you can say that we will make these inputs controlled inputs.
And before we do that, let's quickly discuss why we have this link over here.
So first of all, let's navigate back to not all jobs.
Sorry, we're looking for search container, I believe over here.
And remember, I mentioned that I'll talk about it later and later is now.
So why do we have this link?
Well, let's take a look.
We have over here dashboard, then forward slash all jobs.
Now do you see any query params over here?
No.
So what we're doing with this link, once we navigate back to all jobs, essentially we just clear out
those query parameters and as a result, now we're not taking them for a ride when we make a request
and as a result, we get back pretty much all of the jobs.
So let's try it out.
Now, of course, at the moment.
These values are not going to change in the input.
Again, this is something that's coming up.
Please don't focus on these inputs right now.
I want you to focus here on this URL.
So check it out.
I click on a link.
Notice we navigate back, but we don't have any query params.
And as a result, of course when we make the request, our Axios request we don't have those params
as well.
Let me just make sure that we're all on the same page.
So again, I'm going to go with, for example, interview.
I'll submit.
So notice this is my URL.
Essentially, this is what I'm requesting from the server.
And now check it out.
I make this request and now I only have the jobs.
So of course as a result I get back all of the jobs.
Hopefully that is clear and hopefully I clearly explained why we have over here this URL.
Okay.
Up next Now let's see how we can trigger the form submission every time we change something in the input.
And what's really cool about the.
React Router dom.
We simply need to use this use submit and we need to add onchange on the input.
Now, please keep in mind that of course we have form, row and form select.
So first we'll need to attach the onchange on both of these components and then of course we'll need
to swing back and add it to the component itself.
So if I'm going to go over here to a form row and if I'll say on change and set it equal to a function
just like we normally do in React.
So again, there's nothing really.
Unique about the syntax.
What's unique is the fact that we can use that submit and we just need to pass in the current form.
So what am I talking about over here?
Again, this is pretty typical functionality where we go with Onchange and then we have over here this
callback function.
Correct.
And before we set up this onchange in both of the components because of course at the moment it's not
going to work regardless since it's not going to get invoked in any of those components.
We want to go here with const submit is equal to use submit.
So we invoke the hook, the use submit hook, and then in here in the onchange, remember we always
have access to the current event and we just want to invoke submit and the functionality is following
e then current.
Target.
And then we pass in the form.
That's what the React router expects.
Again, at the moment nothing is going to happen for very simple reason.
We first need to navigate back to both of the components.
So we're looking for for Mauro and for Mauro Select.
And we want to add this as a prop since our actual input is sitting over here.
So we want to go with Onchange is equal to Onchange since the value will pass in as a prop and the same
deal is going to be in the form row select.
So let's add a comma.
Let's go with On Change.
And then in here where I have the select.
I also want to add it.
Let's set it equal to on change.
And now let's navigate back to our search container.
And pretty much we just want to copy and paste and set it up on all of them.
And you know what?
Just so you don't think that I'm messing with you, I'll actually remove the submit button.
Just so you don't think that there's some dark magic involved.
So let me take this on change.
And again, one by one, let's add it to form a row select.
And yes, eventually at the end of this video, I will also change these default values because you'll
see that there's a gotcha here.
So on change for the job status on change is also going to be form row.
Also for job type and then lastly for the sort as well.
So now let's navigate back to the browser and let's test it out.
So essentially I'm going to go here with pending and notice right away without me clicking on submit.
Since there is no submit button, we make the request and I only get the jobs where the value is pending.
Now also we can do of course the same with part time over here.
So now the value is part time.
And let's also test out our search.
So in my case, I'm going to go with the B, So now I'm only looking for the jobs where there is B in
the company value or the position.
And lastly, here's what we want to do.
We want to go to all jobs and essentially I want to pass down those params back to our component because
I want to set those values as my default value.
So how is that going to look like?
Remember I said that eventually we will pass more things.
That's why I'm setting this up as an object and essentially this is what we want to do right now.
So in here I'm going to create a new property, I'll call it search values, and I'm going to spread
out the params.
Then let's keep on moving.
We have this use loader data, so let's go here with search values and let's also access it.
And then at the very end we also want to provide it.
So we're going to go here with search values and now back in the search container.
Of course we have the use all jobs context.
So in my case, I'm going to do that above the submit.
We're going to go over here with search values.
Let's set it equal to use all jobs context.
And you know, before we destructure, let me just see whether everything is correct.
So now let's navigate back to the browser and I want to start from the scratch since I want to showcase
something.
So I'm going to go to add job, then back to all jobs.
And now notice I make the request.
So the value over here is going to be pending and I'm getting the correct jobs.
So all of this is correct.
However, once I refresh notice how job status is going to go back to all.
Why?
Well, because that's our default value.
Correct.
Even though in here I can nicely see that the actual value is pending and that's why we're going to
navigate back.
We can clearly see that we can access those values.
And more specifically, we're looking for search job status.
Then we also want to access job type.
Also we want to look for sort and all of those are located in the search values.
Then let's scroll down and instead of this hardcoded default value, I'll set this one equal to search.
Then this one will be equal to job status and pretty much do the same thing for us to them.
So let's keep on moving.
When we have the default value, now we're going to go with job type.
And then lastly, we also have a sort over here.
Now let's navigate back to the browser and check it out.
So if I go again with my famous pending, I'll get the pending jobs and if I refresh, notice how I
nicely use the same value over here.
So essentially we're just persisting this value between the page refreshes and with this in place,
we can move on to the next step.