And before we set up Delete Job page, let's quickly recall the request.
We're going to be working with.
So the URL is going to be forward slash jobs.
And then again, the unique ID, the method will be delete and we're now going to send anything to the
server.
Basically, we're not going to pass anything in the body.
Now, if we're successful, we're going to get back response with a status code of 200 and in there
we'll have the message as well as the job.
Now in Delete Job page actually, regardless whether we get back the success response or the error response,
we'll simply show it in a toast and we'll navigate back to the all jobs page.
All right.
And up next, let's work on delete job functionality.
And this one is going to be very interesting because for starters, we're going to cover the action
attribute in the form component.
And second, in the actual delete job, there's going to be no JS.
So that's the interesting thing with the latest React router Dom version, you can pretty much set up
a page with just a functionality and you'll see what I'm talking about in a second.
And also since we have quite a few steps, just bear with me.
So for starters, let me close this one and then back in the job we're done with edit so we're done
with this link.
And then notice I have the form and in here I have the button type submit.
And since this is going to be delete functionality we need to go with again method and it's going to
be equal to a post.
So the get one again is going to be the default one.
But we have post put, patch and delete.
Then the method of course is going to be equal to a post.
So that's the first step.
After that, the form component also has the action attribute.
And essentially in here you provide where that functionality is going to be handled.
Now in all our examples, for example, the edit job we just set up, since we're not providing this
action, basically it's going to be sent back to the same page.
So that's the default behavior.
If you don't add the action, then it's going to be sent back to the same page, which is obviously
what we're looking for, because the action is located right here.
Now, it's a little bit different here in the job.
If I'm not going to provide the action, where is it going to send it to?
Well, the all jobs, correct, because that's where the component is located.
But in my case, I want to send it to delete job.
So how we can fix that?
Well, we're going to go here with action.
And again, we're going to go right away with the curly.
Since this value is going to be dynamic, then we're going to set up template string.
And again, I'm going to use this approach where I'm going to go with two dots.
So we go back up to a dashboard and of course we haven't set up that page yet, but we're going to do
that in a second As far as the URL is going to be equal to delete job, then forward slash.
And again, we're looking for that underscore and the ID.
Once we save it here, we want to go back to App JS.
And in here the functionality is going to be different since we're going to have Node JS in the lead
job page.
We'll only grab the action from the lead job.
So as far as this object.
Here's what we want to do.
We're going to go here with Path.
It's going to be very similar to edit job.
We're just going to go with Delete job, but we do still want to provide the colon and the ID because
of course we are deleting a specific job and then back in the delete job we want to handle this functionality.
Basically we want to remove the job.
So here we have a form method is post action.
Points to the delete job page.
In here we also provide the ID, so now we want to set up the action in the delete job to handle it.
Basically we'll make a delete request back to the server.
So for starters, let's navigate to delete job.
Same deal in here.
We're going to go with export const, then action.
It's going to be async.
Then remember, we are getting a giant object and in there we're looking for params.
For now, let's return null and let's just log just so we can see that again.
We're successful.
So now once we have this one in place, we want to go back to the App.jsx.
We want to grab that action.
So copy and paste over here.
Let's say delete job action.
This is coming from delete job.
So delete your page.
Then let's scroll down again and we're looking for.
The action and we'll send equal to delete job action.
Then let's navigate back to our project.
Let me click on Delete.
Notice at the moment we're not displaying anything.
That's fine.
We are located in delete job, but of course there is no JS.
So that's why we're not returning anything.
Correct.
And then if I take a look at the console.
Notice.
I'll have my object, and in there I'll have the ID so everything is correct.
Now we just want to navigate back to the delete job and complete this action functionality.
So for starters, again, we'll set up the try and catch.
So we'll make a request.
We want to go with Await.
So again, we're not looking really for that value.
Basically, we just want to complete the delete functionality.
So we're going to go with custom fetch delete.
And again, this will be dynamic as far as the URL, we're going to go with Jobs forward slash, then
we'll access the params and then the ID, So if we're good then of course we're going to delete the
job.
Now, if we're successful, what do we want to do?
Well, let's set up a toast.
Let's go with toast.
Success and.
That's right.
Job deleted successfully.
Now, if there is an error, we also want to showcase the toast.
But of course, in that case, we want to go with the message.
So let me grab it here from the edit one.
And regardless whether we're successful or there was some kind of error, I actually want to redirect
back to all jobs.
So let's go here with return then redirect.
So this one we're getting from React router dom.
And then it's totally up to you if you want to navigate back to our job.
Of course you can do it.
In my case, I'm going to go back to all jobs.
And as far as the component itself, there's really no need to keep it over here.
So let me remove.
And it also looks like I'm missing the forward slash.
So let me navigate to custom fetch dot delete and add a forward slash before jobs.
Now let's navigate to the browser and let's test it out.
And I guess in my case, I'm going to delete this job.
And if everything is correct, we're going to see the post and of course in the all jobs.
I'm going to have only one job.
So basically we have the Crud functionality in place where not only we can create the job, we can take
a look at all the jobs, but we can also edit and delete.