All right.
And once we're familiar with the default behavior of HTML forms, now let's see how we can access those
values in the loader and attach it to our request.
And as a result, since we already have the server logic in place, we'll get back jobs based on whatever
the values are in the form.
So essentially we'll be able to filter the jobs that we're getting back.
So for starters, let's navigate to all jobs then.
Remember, when it comes to action as well as the loader, we have access to the giant object and in
there we actually have the request.
Now in the request there is a URL property.
So.
If you want, you can log it.
But I can tell you right away that the property is there and we'll actually use the new URL constructor
in order to grab all of those values.
So basically we'll write a one liner and if you're interested.
There are more details in the Readme.
Essentially, the code is going to look like this.
I'm going to create right now a params object.
So essentially I want to gather all of the query params and first I'll run object from entries.
Remember that essentially turns it into an object.
I want to spread out new URLs.
So this is going to be the constructor.
I'll pass here the request url and then the new URL constructor has search params and then dot entries.
So this one line of code turns all of the query params into an object.
So let me.
First showcase.
Guess the request URL.
So let me log two things over here.
So back in the all jobs, first of all, let's look for request URL, then let's set up the logic and
I also want to log those params since I think it's going to be super useful.
So let's go here with params.
Again, we start with object dot and then from entries just like we did with form data in here we want
to create the array, we want to spread out new URL, then we pass in the req.
Or I'm sorry, it's request URL.
My bad.
Then it has a property of search params and then it also has the entries method.
So let's save it here.
And now let's log the params.
So we have two things.
Let's navigate to the browser.
Let's refresh for now.
Again, we're not passing any query parameters.
That's totally fine.
Let's take a look at the console and we'll see two things.
We'll see the URL.
And again, at the moment there are no query parameters, but eventually they're going to be over here.
And also we have this object.
So at the moment our params is this object.
So now let's actually submit the form.
And remember at that point we make the request back to the same URL, but in this case we're attaching
the form input values to our URL.
So let's submit and check it out.
Now, essentially I have way longer URL correct because now of course we're adding the params and take
a look at our params object.
It also has right of way all of the properties as well as the values.
Now, what's also super, super cool with Axios, we can directly pass this object when we make the
request and it will automatically set up everything for us.
What am I talking about?
Well, we can pass here the options object.
And guess what?
The property we're looking for is params.
And again, you can hard code in here.
You can say, Hey, listen, this is going to be my prom and this is going to be the value, or we can
simply just set it equal to our params object.
Basically we right away pass the same values to the Axios and what's super, super awesome When we make
the request we'll actually take those query params along for a ride.
And once we have this logic in place, now let's navigate back to the browser.
I'll start everything from scratch, so I'm going to go to add job then back to all jobs.
So at the moment again we don't have any query params, but take a look.
Once I make this request and in this case I'm going to go for example with pending notice.
I right away get only the jobs where the value is pending.
Why?
Well, because again we pass those query params now we grab them in our loader and you can probably
already guess that if I take a look at the network tab and in this case, let me.
Adhere full time as well.
Now these values are going for a ride, so they're going to a server and essentially from the server
we're getting this response where only the jobs with this job status and job type are returned.
And therefore, if we take a look at our response in the browser, this is what we see.
So this is how we can nicely access.
And pass the values, the query parameter values to the Axios.
And as a result, we make the request and we get very specific jobs where the values match whatever
the user is searching for.