All right.
And once we're done working in the server.
Now let's swing back to the front end and let's start setting up the search form.
So for starters, we want to navigate to search container component.
And of course I'll copy and paste the import and effectively we'll just set up some inputs.
We'll provide some default values, we will provide the submit button.
And also I want to set up the log in loader because I want to showcase something pretty impressive.
So for starters, let me grab the imports again.
I'm looking for the components.
More specifically, I want to grab the search one, the search container over here.
And as far as the imports, we want to grab the form row, form, row select as well as the submit button.
But again, please keep in mind that it's just temporary.
Eventually we will set up the.
Onchange listener where every time we'll change the value in the input, we'll automatically make the
request from the scratch.
But not for now.
I just want to showcase the default behavior of HTML forms.
So all of these are coming from the same folder and therefore I can just go here with Dot and we also
want to grab the wrapper.
Remember, this is the dashboard form page.
Also, we want to grab the form, use submit something we're going to use in this particular component,
a link component as well.
And then in this case, from the utils, basically we grab everything.
So job type status and also the sort by and then at the very end we want to grab the use all jobs context
and you'll see why we need that once we set up the functionality.
So for starters, let's just navigate to our search container and one by one, let's set everything
up.
So I want to go here with the wrapper.
Then inside of the wrapper, we're going to set up our form.
Let's add a class form.
Then inside of this component we want to go with heading five.
Let's add a form title then as far as the value, I'm going to go with search.
Form.
And then we want to set up our form center.
So we're going to go with dev form center and then one by one, let's set them up.
First of all, I'm going to go with form Row.
And in this case, type is going to be equal to a search.
So it's not going to be text.
It's actually a search.
And this is straight up HTML.
And effectively, it just provides a nice way how we can clear the values.
Now, as far as the name, yes, it needs to basically match whatever we have on the server since we'll
be adding this to a query string params, I want to make sure that the name is actually a search and
yes, I'll go with some default value and I'll set it equal to a now.
Most likely I'll remove it at the very end.
But you know what?
For now I want to use it.
So let me just navigate back over here.
Let me test whether everything works.
And notice now I have my search form.
It's my first input.
And of course since the default value is a that's why I have it over here.
Okay, awesome.
So now let's add two select ones for job type and job status, and then at the very end we'll set up
one for search or I'm sorry, one for the sort as well.
So we want to look for form row select.
That's my component.
Then I want to go with label text.
Since I have Camelcase here, I'll call this job status then.
Name?
Yes.
It's going to be job status just like we had before and when it comes to list.
So we're importing the values from the constants.
Correct.
But keep in mind that in the constants we don't have this all option, but we definitely want to use
it because I don't want to limit all the time my search to a specific status value, correct.
Remembering the constants over here.
We only have pending interview in the client, so we don't have all but we definitely want to use it.
And the way we'll set it up, remember, we're passing in the array and we can nicely hardcode.
So we'll say, you know what, I'll pass in the array.
Yeah, that's correct.
And in here the first value actually is going to be all.
And then I'll spread out object dot values and just like we did before.
And in this case, of course, we're looking for job status.
And as a result, you'll notice that we'll get that extra all value.
And at the very, very end we want to go with default value and I'll set it equal to all.
So by default, that's the value I'm going to use.
So now we want to copy and paste.
So this one will be for job type.
So let me just.
Change it over here.
Job type.
Job type over here.
And then also we want to change this one.
So our job type.
As far as the default value, yep, it's going to be equal to all.
Then let's go with form row select only.
In this case we're looking for the sort one.
So form row select name equals to sort then default value.
Well, I'm going to go with newest.
So in this case we don't want to provide all.
So yes, in this case we only have four options and I'm just going to stick to the newest one.
Then as far as the list, same deal.
We go over here with our array.
So let's pass it in.
And then dot, dot, dot and then object dot values.
And then we're looking for job sort by.
I think we can close this component.
And then like I said.
Temporarily.
We will set up the submit button.
So still within this div, let me add them here because again, eventually we will set up a different
logic.
But for now I just want to go with submit button since it's in the form I'll provide over here this
parameter.
Let me close it.
And then also let's add a link which is just going to navigate back to the all jobs.
And I fully understand if it's going to look somewhat iffy right now.
Don't worry, we'll get to it.
Once you understand how in HTML we pass in the query params, it will make all of the sense in the world.
So for now, above the submit button, we want to go here with link to where we want to navigate.
And in my case I'm going to go with Dashboard then forward slash all jobs basically back to the same
page.
Yes, like I said, at the moment it looks a little bit iffy, but don't worry, you'll see why we need
that in a few videos.
Then we want to go with button, then form BTN and also we want to go with delete BTN.
Let's close it or you know what?
No, we want to set up the text and I'll just say reset search values.
And at the very, very, very end.
Now let's navigate to All Jobs page.
Like I said in Loader, let's set up that log.
So we're looking for all jobs.
And anywhere here in the loader, it doesn't really matter where.
Let's just type here.
Hello.
And now let's navigate to a browser and notice something interesting.
So by default, if there is no method post on the form in the HTML, actually browser makes the get
request back to the same URL and provides input values as query string parameters.
So take a look at two things.
Take a look at the URL and take a look at the console.
And again for now we'll use this temporary submit button.
So check it out.
First of all, I see the hello.
And essentially it means that we made another request.
Correct.
Back to our page, back to our dashboard all jobs page.
And also notice the URL.
We nicely provide all of the input values here as query string parameters.
Now, of course, we haven't made the request back to the database using these values.
That is coming up.
But again, this is already a giant step because now we know that by default if the method is not post.
Browser is going to make a get request back to the same URL and essentially React router.
Dom is just implementing that logic.
Remember, every time there was a method post, it was sending a post request back to the same URL.
Unless we use the action like we did when we deleted the job.
Now, in this case, since it's a get request, React router just implements the straight up HTML form
behavior.