All right.
And once we can access the specific job, now let's set up the form.
So essentially, let's work on the return.
For starters, it's not going to be a heading one.
We're going to go here with the wrapper.
Then we'll place the form.
So let me remove all of this text we're looking for.
Form method will be post.
So again, instead of creating a job now we'll just send a patch request.
So class name will be form as well.
Then inside of this particular component I want to start with heading for.
Or the class that will be formed.
Title.
And then let's set up edit job.
Then let's go with the div and let's add a class of form center.
And one by one let's set up those form rows.
So first one will be position.
So form row, then type will be equal to text.
As far as the name will go with position.
So this is very, very important.
Please keep the same syntax.
We still need to use a name and yes, it still needs to be positioned because when we make a request,
this is what we're going to be sending back to the server and as far as the default value.
We're not going to hardcode this.
Actually, this will be equal to job and then position because again, keep in mind when it comes to
edit functionality, I want to reuse the existing values.
And then of course, once I update them, make a request, then of course we'll update that on the server
as well.
Hopefully that is clear.
Let me copy and paste in here.
We're looking for company and instead of job position we're going to go with job company.
After that, we have one for job location.
So pretty much same deal type is equal to text.
The name is equal to job location.
Of course, in here.
We also want to fix this.
And this is going to be the case where we also want to add the label text.
So right next to the name, I'm going to go with label text and I'll set it equal to job location.
Then we have to form row select where we'll still iterate over the job status and job type.
But you can probably already guess that when it comes to default value, we'll use the values from the
job.
So let's navigate here right after the form row.
We want to go with Form row Select.
Name will be equal to job status.
Then label text.
We'll set it as job status.
In here, the default value will be equal to job dot and then job status.
And after that, remember, we want to set up the list and therefore we're going to go with object dot
values and we'll pass in the job status.
So the options are the same.
The only thing that's changing is actually the default value.
Then let's close this one.
Copy and paste.
And then let's go here with job type.
Then the label text is going to be also job type.
Default value job type.
And as far as what we're passing in the object value as well, same deal.
We're going to go here with job type and then still within this div, we want to set up the submit button.
And you know what?
We also want to navigate up, pretty much set up that.
Is submitting.
So we're looking for the navigation.
That is equal to use navigation.
Let's invoke that and then we're going to go with const is submitting and we'll set it equal to navigation
dot state equals to submitting.
Then let's scroll down and let's set up that button.
So we're looking for the button element.
Then we want to add type equals to submit.
After that, let's add some classes BTN, BTN hyphen block and then form hyphen btn.
Let's add the disabled attribute.
So we're looking for disabled and we'll set it equal to is submitting.
And then when it comes to the text we're going to go with is submitting.
We're going to set up ternary operator in here.
Let's write submitting dot, dot, dot.
And then if the is submitting is not true, then we'll just simply say submit.
So let's navigate here again.
Pick any job you have in the all Jobs page.
Click on edit and notice.
Basically we'll get these values over here.
Now it looks like I have a tiny typo over here.
Of course, I didn't place this one inside of the button.
So let me set it correctly.
And now, of course, I have these values.
Now, if I'm going to go back and take a look at this job now, of course, the values are going to
be different.
And with this in place, we can start working on the action functionality.