All right.
And up next, let's start working on the Add job functionality.
And essentially, it's just going to be a form with few inputs.
Once we provide the inputs, we can submit.
And of course, we will make a request back to our server and create a job.
First, let me navigate back to the project.
We are looking for the Readme and this is the case where I will copy and paste from the Readme the imports.
I really don't see the point of setting it together line by line.
Now of course I will explain what the imports are doing as we start working on the functionality.
So let me take all of this code then I want to navigate to my page more specifically the Add job page.
So at the moment we have no imports.
Let's set it up over here.
And essentially we're looking for form row.
So remember this is where we have the div with the input as well as the label.
Then this is the wrapper and as a side note.
If you take a look at the project, you'll notice that there are quite a few pages that use the form
with the inputs.
And essentially I just combined the layout in one page.
So this is going to be the case where again, we'll set up this wrapper and then we'll reuse it in multiple
places.
Then we have this use outlet context and with the help of this hook, we'll actually access the user
value which we provided here in the outlet.
More specifically, in the context and as far as the value we're going to be looking for the user.
Then we have job status and job type, and this is coming from the constants.
So when we were setting up our job model in the process, we created those constants and we also used
them in the validation.
And this is the case where we'll also set them up on the front end, because if you take a look at our
logic, essentially when it comes to job status and job type notice, it's going to be a select input
with predefined values.
And since we already have those values in the utils, well, we can nicely reuse it.
Then we have form component which will allow us to use the action.
Also use navigation.
Because we want to check the state more specifically the submitting state, and also a redirect, because
once we submit the form, we want to navigate away to a get all jobs page.
Also a nice toast and a custom fetch.
Now, as far as the functionality, first let's start by grabbing this user.
Again, how do I know that it's there?
Well, because we passed it a few videos ago and in order to access it, we simply want to use use outlet
context.
And I know that I already mentioned this before, but please keep in mind what's really, really, really,
really nifty.
We just need to use this context.
Prop on the outlet, provide the value and we're good to go.
So we don't have to set up a separate context.
This is provided.
By default in React Router six, the latest version more precise.
And then let's set up the navigation.
So we're looking for navigation that is equal to use navigation.
So again, I'm just checking for that state and I want to nicely grab the is submitting.
Basically I'll set up the value and that is going to be equal to navigation state and whether it's equal
to submitting.
And as far as the return, let's wrap everything in our wrapper.
So that's the first step.
Then we want to create the form.
The method is going to be post, correct.
We're going to be creating a resource on the server, more specifically a job.
As far as the class name, I'm going to go here with form.
Then instead of the form, Let's start by setting up some kind of title.
So heading for class name will be form.
Title on here.
Basically, I'm just going to go with ad job, but we want to set up a Div with a class of form center.
And in here for now, let's set up three form rows for position, company and job location.
As well as the submit button.
And then in the following video, we'll set up the first select and then we'll create another component
which is going to be very similar to Form Row.
It's just going to be for the select input.
So let's start, I guess by just grabbing the form row.
That's my component.
And then remember, we just need to set up some kind of values.
And if you want, of course you can also provide here a default value.
But I think I'm just going to type it in the browser.
And the most important part of course, is the name.
So make sure that you provide the name here and provide the value of position because remember, that's
what the server is looking for.
So default value, this is totally up to you if you want to save on typing, of course.
You can do it here as well.
But in my case, I'm just going to skip it and then the next one is going to be company.
And then last one is the job location.
And here's the kicker.
I want to use the user's location because it kind of makes sense.
If the user has applied for the job, most likely that job is in the area.
Now, of course, we can change this around.
This is just going to be a default value.
So, for example, if the job is in the neighboring city, then you can always type it.
But in my opinion, it just saves a little bit of time for the user.
So let's go over here with form row.
Type is also going to be.
Text over here and then.
Since I have here a job location, I'll set up the label text.
So job location.
Then we have the actual name.
Make sure this is camel case.
So job, location.
And then like I said, as far as the default value, I'll actually.
Go with user and then location.
So I'll use users location.
Then still within this div we want to set up the submit button.
So here we're going to go with button.
Then type is going to be equal to submit, then class name, BTN, BTN hyphen block and then form BTN.
So another class and basically we want to disable it if we are submitting.
So let's go here with disabled and let's set it equal to our variable.
So is submitting just like we had the functionality in the login as well as the register.
And guess what?
I also want to control the text inside of the button with the help of this variable.
So let's set up over here.
Our ternary operator and I'm just going to say submitting.
And submit.
So let's see what we've got.
Going to navigate to the browser.
This is all jobs.
So this is where we're going to navigate after that.
And when we take a look at the Add job at this point, we should have the position company as well as
the job location.
And since for John I have here Earth.
That's why of course, we're using that value.
And with this in place we can set up the select input.