All right.
And once we have added jobs set up in place.
Now let's navigate to the edit job page and essentially start working on the functionality.
And the first thing we want to do is go back to Readme.
And essentially I just want to grab all of these imports in here.
So let me select these lines of code.
Then I want to go back to the edit job.
Let me copy and paste.
And as far as the imports, we have one for form row, then form row select.
Basically this page is going to be very similar to create job.
The only difference of course, now once we click on submit, we'll actually send the batch request.
Then we also have one for wrapper.
Remember, this is the.
Rapper.
We already set up the dashboard form page.
Then use loader data since we'll utilize the loader and I want to get some data back.
Also, job status and job type form use navigation for submitting the form as well as the redirect and
the toast and custom fetch.
And I guess let's just start by setting up loader and action.
Import them both in the app.jsx and then I'll show you how we can access those route params in three
places in the loader in the action as well as in the actual component.
So this should be already very familiar.
I'm just going to go here with loader and that one is equal to async.
Let's set up the function and let's just go with return and null.
Then we want to select this copy and paste and instead of loader, this is going to be an action then
back in the app JSX.
Let's scroll down or sorry, let's scroll up.
Guess we have already one action and one loader.
So you know what?
Let me just copy and paste this twice.
This will be a edit job loader and it's going to be coming from edit job page.
And then this will be an action.
And again, the same deal.
We're going to go with edit job and action.
And then, of course, it's coming from the same page.
So let me select let me copy and paste.
Then let's scroll down where we have edit job.
Pretty much the same deal.
We have one loader that is going to be edit job loader, and then we also have one action which is going
to be edit job action.
Now why we have two of them?
Well, because when we load the page, I want to get that specific job.
So essentially I want to get the values about that specific job from the server.
Essentially, we'll make a get request to get info on one single job and then once we submit, we will
make a patch request back to the server.
So essentially we'll provide new values and then we'll send it back to a server.
And effectively, if we want to access the params in the loader and action, we simply want to go over
here.
Remember we were getting there a giant object and I'll right away the structure, the params and I'm
not going to repeat that with an action.
Please keep in mind that of course it's going to be the case since basically they get the same values.
And then now let's navigate back to a browser and we'll nicely see something very, very interesting.
So if I take a look at the console, notice in here I have the object and since I called my route param
an ID, this is why I have this value over here.
So if I'm going to go back to, let's say add job and I'm just going to call this front end.
And then this will be Apple.
If I create this job and then if I navigate.
The all jobs notice.
Of course, this value right now is going to be different.
So like I said, as far as this value, you can call it whatever you want.
You just need to remember that, of course, in order to access whatever we have over here, you will
need to use this value.
And whatever we have here after the forward slash is going to be that value for the root parameter.
And if you want to access those root params in the actual component, then we need to use a hook.
Now please keep in mind we're not going to use this in this particular page.
I don't remember.
Maybe we're going to use it in some other page, but.
In this one for sure.
No, but I do want to showcase how we would access that.
We need to come up with some kind of value.
In my case, I'm going to call this params and then we want to go with use params.
So that's a hook we want to import from React router dom.
And now check it out.
If I'm going to log it, we're not going to be surprised if we see the same value in the console.
So again, both of them deliver the same thing.
So this one is going to be in the actual component and this one is going to be in the loader.
And of course, since we can access pretty much the same object over here as well.
We can grab the route params in action as well.