1
00:00:00,380 --> 00:00:04,880
And before we set up Delete Job page, let's quickly recall the request.

2
00:00:04,910 --> 00:00:06,230
We're going to be working with.

3
00:00:06,470 --> 00:00:10,270
So the URL is going to be forward slash jobs.

4
00:00:10,280 --> 00:00:18,020
And then again, the unique ID, the method will be delete and we're now going to send anything to the

5
00:00:18,020 --> 00:00:18,490
server.

6
00:00:18,500 --> 00:00:21,320
Basically, we're not going to pass anything in the body.

7
00:00:21,440 --> 00:00:27,470
Now, if we're successful, we're going to get back response with a status code of 200 and in there

8
00:00:27,470 --> 00:00:29,930
we'll have the message as well as the job.

9
00:00:30,110 --> 00:00:38,930
Now in Delete Job page actually, regardless whether we get back the success response or the error response,

10
00:00:39,050 --> 00:00:45,500
we'll simply show it in a toast and we'll navigate back to the all jobs page.

11
00:00:45,800 --> 00:00:46,250
All right.

12
00:00:46,250 --> 00:00:49,670
And up next, let's work on delete job functionality.

13
00:00:49,820 --> 00:00:55,400
And this one is going to be very interesting because for starters, we're going to cover the action

14
00:00:55,400 --> 00:00:57,680
attribute in the form component.

15
00:00:57,680 --> 00:01:02,640
And second, in the actual delete job, there's going to be no JS.

16
00:01:03,150 --> 00:01:09,090
So that's the interesting thing with the latest React router Dom version, you can pretty much set up

17
00:01:09,090 --> 00:01:13,560
a page with just a functionality and you'll see what I'm talking about in a second.

18
00:01:13,560 --> 00:01:17,470
And also since we have quite a few steps, just bear with me.

19
00:01:17,490 --> 00:01:23,700
So for starters, let me close this one and then back in the job we're done with edit so we're done

20
00:01:23,700 --> 00:01:24,480
with this link.

21
00:01:24,480 --> 00:01:30,120
And then notice I have the form and in here I have the button type submit.

22
00:01:30,600 --> 00:01:38,490
And since this is going to be delete functionality we need to go with again method and it's going to

23
00:01:38,490 --> 00:01:39,900
be equal to a post.

24
00:01:39,900 --> 00:01:43,560
So the get one again is going to be the default one.

25
00:01:44,200 --> 00:01:47,660
But we have post put, patch and delete.

26
00:01:47,690 --> 00:01:50,170
Then the method of course is going to be equal to a post.

27
00:01:50,170 --> 00:01:51,520
So that's the first step.

28
00:01:51,790 --> 00:01:57,340
After that, the form component also has the action attribute.

29
00:01:57,490 --> 00:02:02,140
And essentially in here you provide where that functionality is going to be handled.

30
00:02:02,170 --> 00:02:09,310
Now in all our examples, for example, the edit job we just set up, since we're not providing this

31
00:02:09,310 --> 00:02:13,760
action, basically it's going to be sent back to the same page.

32
00:02:13,780 --> 00:02:15,670
So that's the default behavior.

33
00:02:15,670 --> 00:02:20,920
If you don't add the action, then it's going to be sent back to the same page, which is obviously

34
00:02:20,920 --> 00:02:24,160
what we're looking for, because the action is located right here.

35
00:02:24,190 --> 00:02:26,440
Now, it's a little bit different here in the job.

36
00:02:26,440 --> 00:02:30,490
If I'm not going to provide the action, where is it going to send it to?

37
00:02:30,520 --> 00:02:35,130
Well, the all jobs, correct, because that's where the component is located.

38
00:02:35,140 --> 00:02:38,230
But in my case, I want to send it to delete job.

39
00:02:38,230 --> 00:02:39,720
So how we can fix that?

40
00:02:39,730 --> 00:02:41,770
Well, we're going to go here with action.

41
00:02:41,770 --> 00:02:44,150
And again, we're going to go right away with the curly.

42
00:02:44,150 --> 00:02:49,010
Since this value is going to be dynamic, then we're going to set up template string.

43
00:02:49,010 --> 00:02:52,130
And again, I'm going to use this approach where I'm going to go with two dots.

44
00:02:52,130 --> 00:02:58,160
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

45
00:02:58,160 --> 00:03:02,990
that in a second As far as the URL is going to be equal to delete job, then forward slash.

46
00:03:02,990 --> 00:03:06,980
And again, we're looking for that underscore and the ID.

47
00:03:07,830 --> 00:03:11,960
Once we save it here, we want to go back to App JS.

48
00:03:12,510 --> 00:03:17,770
And in here the functionality is going to be different since we're going to have Node JS in the lead

49
00:03:17,790 --> 00:03:18,940
job page.

50
00:03:18,960 --> 00:03:22,660
We'll only grab the action from the lead job.

51
00:03:22,680 --> 00:03:24,420
So as far as this object.

52
00:03:25,310 --> 00:03:26,630
Here's what we want to do.

53
00:03:26,660 --> 00:03:28,430
We're going to go here with Path.

54
00:03:28,760 --> 00:03:31,880
It's going to be very similar to edit job.

55
00:03:32,060 --> 00:03:37,790
We're just going to go with Delete job, but we do still want to provide the colon and the ID because

56
00:03:37,820 --> 00:03:44,600
of course we are deleting a specific job and then back in the delete job we want to handle this functionality.

57
00:03:44,630 --> 00:03:46,740
Basically we want to remove the job.

58
00:03:46,760 --> 00:03:50,810
So here we have a form method is post action.

59
00:03:50,930 --> 00:03:53,930
Points to the delete job page.

60
00:03:53,960 --> 00:04:00,830
In here we also provide the ID, so now we want to set up the action in the delete job to handle it.

61
00:04:00,890 --> 00:04:05,060
Basically we'll make a delete request back to the server.

62
00:04:05,390 --> 00:04:07,850
So for starters, let's navigate to delete job.

63
00:04:08,060 --> 00:04:08,960
Same deal in here.

64
00:04:08,960 --> 00:04:12,830
We're going to go with export const, then action.

65
00:04:13,130 --> 00:04:14,660
It's going to be async.

66
00:04:16,870 --> 00:04:22,180
Then remember, we are getting a giant object and in there we're looking for params.

67
00:04:23,010 --> 00:04:28,560
For now, let's return null and let's just log just so we can see that again.

68
00:04:28,590 --> 00:04:29,610
We're successful.

69
00:04:29,610 --> 00:04:34,100
So now once we have this one in place, we want to go back to the App.jsx.

70
00:04:34,500 --> 00:04:36,270
We want to grab that action.

71
00:04:38,150 --> 00:04:39,890
So copy and paste over here.

72
00:04:40,310 --> 00:04:42,410
Let's say delete job action.

73
00:04:42,680 --> 00:04:44,720
This is coming from delete job.

74
00:04:46,270 --> 00:04:48,190
So delete your page.

75
00:04:48,920 --> 00:04:52,940
Then let's scroll down again and we're looking for.

76
00:04:53,770 --> 00:04:58,600
The action and we'll send equal to delete job action.

77
00:04:59,460 --> 00:05:01,710
Then let's navigate back to our project.

78
00:05:01,740 --> 00:05:03,360
Let me click on Delete.

79
00:05:03,390 --> 00:05:05,530
Notice at the moment we're not displaying anything.

80
00:05:05,550 --> 00:05:06,660
That's fine.

81
00:05:06,810 --> 00:05:11,160
We are located in delete job, but of course there is no JS.

82
00:05:11,370 --> 00:05:13,260
So that's why we're not returning anything.

83
00:05:13,260 --> 00:05:13,880
Correct.

84
00:05:13,890 --> 00:05:16,140
And then if I take a look at the console.

85
00:05:16,790 --> 00:05:17,360
Notice.

86
00:05:17,360 --> 00:05:21,980
I'll have my object, and in there I'll have the ID so everything is correct.

87
00:05:22,010 --> 00:05:27,690
Now we just want to navigate back to the delete job and complete this action functionality.

88
00:05:27,710 --> 00:05:31,010
So for starters, again, we'll set up the try and catch.

89
00:05:31,010 --> 00:05:32,570
So we'll make a request.

90
00:05:32,660 --> 00:05:34,430
We want to go with Await.

91
00:05:35,340 --> 00:05:37,940
So again, we're not looking really for that value.

92
00:05:37,950 --> 00:05:40,760
Basically, we just want to complete the delete functionality.

93
00:05:40,770 --> 00:05:43,710
So we're going to go with custom fetch delete.

94
00:05:43,920 --> 00:05:50,250
And again, this will be dynamic as far as the URL, we're going to go with Jobs forward slash, then

95
00:05:50,250 --> 00:05:57,120
we'll access the params and then the ID, So if we're good then of course we're going to delete the

96
00:05:57,120 --> 00:05:57,690
job.

97
00:05:57,690 --> 00:06:00,690
Now, if we're successful, what do we want to do?

98
00:06:00,690 --> 00:06:03,270
Well, let's set up a toast.

99
00:06:03,750 --> 00:06:04,740
Let's go with toast.

100
00:06:04,740 --> 00:06:06,000
Success and.

101
00:06:06,940 --> 00:06:07,360
That's right.

102
00:06:07,360 --> 00:06:09,580
Job deleted successfully.

103
00:06:09,610 --> 00:06:12,730
Now, if there is an error, we also want to showcase the toast.

104
00:06:12,730 --> 00:06:16,410
But of course, in that case, we want to go with the message.

105
00:06:16,420 --> 00:06:18,910
So let me grab it here from the edit one.

106
00:06:18,910 --> 00:06:25,450
And regardless whether we're successful or there was some kind of error, I actually want to redirect

107
00:06:25,450 --> 00:06:27,400
back to all jobs.

108
00:06:27,400 --> 00:06:31,180
So let's go here with return then redirect.

109
00:06:31,210 --> 00:06:33,580
So this one we're getting from React router dom.

110
00:06:34,390 --> 00:06:39,140
And then it's totally up to you if you want to navigate back to our job.

111
00:06:39,160 --> 00:06:40,030
Of course you can do it.

112
00:06:40,030 --> 00:06:42,790
In my case, I'm going to go back to all jobs.

113
00:06:42,790 --> 00:06:47,080
And as far as the component itself, there's really no need to keep it over here.

114
00:06:47,080 --> 00:06:48,460
So let me remove.

115
00:06:49,390 --> 00:06:52,570
And it also looks like I'm missing the forward slash.

116
00:06:52,570 --> 00:06:59,170
So let me navigate to custom fetch dot delete and add a forward slash before jobs.

117
00:06:59,220 --> 00:07:01,810
Now let's navigate to the browser and let's test it out.

118
00:07:02,080 --> 00:07:04,600
And I guess in my case, I'm going to delete this job.

119
00:07:04,600 --> 00:07:10,150
And if everything is correct, we're going to see the post and of course in the all jobs.

120
00:07:10,890 --> 00:07:12,660
I'm going to have only one job.

121
00:07:12,660 --> 00:07:19,590
So basically we have the Crud functionality in place where not only we can create the job, we can take

122
00:07:19,590 --> 00:07:23,550
a look at all the jobs, but we can also edit and delete.