Okay.
And before we set up edit your page, let's quickly recall the request we're going to be working with.
And in this case, actually, there's going to be two requests.
So in order, we'll set up a get single job request.
And if you recall, essentially the URL is forward slash jobs and this is where we need to provide the
ID.
So in that case, of course, we get the unique job and this is going to be a get request.
So we're not going to send anything to the server.
And if we're successful, then of course we'll get that one specific job.
And after that, in the action we're going to work with edit job request.
As far as the URL, we're looking for forward slash jobs and again, the unique ID, the method is going
to be batch and this is what we want to send to the server company position, job status, job type,
as well as the job location.
Now just like in the ad job page, if we're successful, we're actually going to navigate away.
So the only thing we're looking for is the success response.
So if there is no error, we are good to go.
We have modified the job and we can navigate to the all jobs page.
All right.
And up next, let's start working on the edit job functionality.
And in this first video, I want to show you how the URLs work as far as the links are concerned.
And also I want to show you why we want to use the route params.
So for starters, let's just navigate to app.jsx.
And remember we already have the edit job page in the pages, but we haven't set up anything here in
the app.
So essentially either we use auto import or I just say here, edit.
And I believe it's job correct.
So added job.
Yeah, that's what I want to import from the pages.
Then let's keep on scrolling.
It's going to be in the dashboard and the placement is really irrelevant, but I'm going to place it
right after admin.
So essentially I'm going to go for now with path and let's set up edit job.
But please keep in mind that of course eventually we'll set up here the route params as well.
So remember we already learned route params in Express.
Now we're talking about React router.
So for now it's going to be edit job.
That's the path.
And then as far as the element, we have the edit job correct So let's go here with edit, job and component,
let's save it.
Now let's navigate back to our All Jobs page and let's work on that link.
So first let me find it.
And of course, it's in the jobs container, right?
Bad.
So we're looking for the components and more specifically, the job one.
That's where I have the link.
And now let's first understand how the URL is going to work.
So this is a link, correct.
So we need to provide here to prop and where do we want to navigate?
Well, technically I can go here with forward slash and edit job and let's see whether everything is
going to work.
So I'm going to navigate to the browser, click it and check it out.
So notice it complains basically that there is no path edit job.
Why?
Well, because it's in a dashboard, correct.
So it's dashboard and then edit job.
So technically if we want we can probably do it this way.
I can say here, dashboard forward slash and then edit job.
So now let's guess, navigate back.
Click on edit and everything is correct.
So this is one way how we can set up everything.
Now, please keep it in mind that we still haven't passed in the URL parameter.
Something very, very important, but technically you can take this route or essentially you just go
with forward slash dashboard and then more specifically edit job.
Now there is another way how we can navigate since the path we provide is relative, and since we are
already in the all jobs page, we can just go with dot dot basically one level up back to a dashboard
and then edit job.
So how is that going to look like?
Let me remove, let me go here with dot dot and again, let's try it out.
I'm going to navigate back.
Then let's click on edit and notice again we navigate back to the same place.
So those are the two approaches you can take.
Now let's talk about the route parameters.
You see, I mean, everything is awesome.
We navigate to the edit job page, but which job?
I mean, eventually we'll have quite a few jobs and I don't want to edit some random job.
I actually want to edit a very specific job.
The one that I have clicked on and in order to access that specific job, we also need to pass in the
parameter, the URL parameter.
And in our case, of course that is going to be ID.
So how is that going to look like?
And you know what?
Let me just set up everything from scratch.
I'm going to go here with curly braces then template string.
Since this is going to be dynamic, then I'm going to go with this dot dot approach.
Edit job.
That's the page then forward slash.
And now I want to access the underscore ID, remember.
Each job has that property.
And of course, this is unique.
So this is the first step.
Now, if I navigate right now back to the browser, actually there's going to be an error because we
haven't set up those route params in the app.
So check it out.
I click here on edit and again we navigate to a 404 because there is no dashboard forward slash edit
job and then the ID it doesn't exist.
There is no such page.
So now we want to navigate back to the app.
JS And let's scroll where we have the edit job.
And like I said, it's not going to be just edit job.
Actually, we're going to go here with Forward Slash and then we just need to come up with the value
basically colon and how we want to call this route parameter.
Now you can call this shake and bake, you can call this banana or you can call this ID And of course,
in my case, I'm going to go with the last option essentially this ID.
Represents whatever value we pass here after the forward slash.
And of course, in the following video, I'll show you how we can access it.
For now, I just want to showcase that everything works since we're taking care of those root params.