1
00:00:00,080 --> 00:00:00,350
Okay.

2
00:00:00,500 --> 00:00:06,500
And before we set up edit your page, let's quickly recall the request we're going to be working with.

3
00:00:06,620 --> 00:00:09,530
And in this case, actually, there's going to be two requests.

4
00:00:09,530 --> 00:00:14,090
So in order, we'll set up a get single job request.

5
00:00:14,090 --> 00:00:21,110
And if you recall, essentially the URL is forward slash jobs and this is where we need to provide the

6
00:00:21,110 --> 00:00:21,350
ID.

7
00:00:21,650 --> 00:00:26,870
So in that case, of course, we get the unique job and this is going to be a get request.

8
00:00:26,870 --> 00:00:29,180
So we're not going to send anything to the server.

9
00:00:29,180 --> 00:00:34,940
And if we're successful, then of course we'll get that one specific job.

10
00:00:34,940 --> 00:00:39,080
And after that, in the action we're going to work with edit job request.

11
00:00:39,110 --> 00:00:45,410
As far as the URL, we're looking for forward slash jobs and again, the unique ID, the method is going

12
00:00:45,410 --> 00:00:52,160
to be batch and this is what we want to send to the server company position, job status, job type,

13
00:00:52,160 --> 00:00:54,650
as well as the job location.

14
00:00:54,800 --> 00:01:00,410
Now just like in the ad job page, if we're successful, we're actually going to navigate away.

15
00:01:00,420 --> 00:01:04,440
So the only thing we're looking for is the success response.

16
00:01:04,440 --> 00:01:07,320
So if there is no error, we are good to go.

17
00:01:07,320 --> 00:01:13,260
We have modified the job and we can navigate to the all jobs page.

18
00:01:13,260 --> 00:01:13,710
All right.

19
00:01:13,710 --> 00:01:17,490
And up next, let's start working on the edit job functionality.

20
00:01:17,700 --> 00:01:24,630
And in this first video, I want to show you how the URLs work as far as the links are concerned.

21
00:01:24,750 --> 00:01:29,160
And also I want to show you why we want to use the route params.

22
00:01:29,160 --> 00:01:33,300
So for starters, let's just navigate to app.jsx.

23
00:01:34,480 --> 00:01:43,060
And remember we already have the edit job page in the pages, but we haven't set up anything here in

24
00:01:43,060 --> 00:01:43,600
the app.

25
00:01:44,410 --> 00:01:49,390
So essentially either we use auto import or I just say here, edit.

26
00:01:50,190 --> 00:01:52,350
And I believe it's job correct.

27
00:01:52,350 --> 00:01:53,280
So added job.

28
00:01:53,280 --> 00:01:55,650
Yeah, that's what I want to import from the pages.

29
00:01:55,680 --> 00:01:57,210
Then let's keep on scrolling.

30
00:01:57,210 --> 00:02:03,900
It's going to be in the dashboard and the placement is really irrelevant, but I'm going to place it

31
00:02:03,900 --> 00:02:05,130
right after admin.

32
00:02:05,130 --> 00:02:11,640
So essentially I'm going to go for now with path and let's set up edit job.

33
00:02:11,640 --> 00:02:18,060
But please keep in mind that of course eventually we'll set up here the route params as well.

34
00:02:18,060 --> 00:02:21,810
So remember we already learned route params in Express.

35
00:02:21,820 --> 00:02:23,760
Now we're talking about React router.

36
00:02:23,760 --> 00:02:25,950
So for now it's going to be edit job.

37
00:02:25,950 --> 00:02:26,940
That's the path.

38
00:02:26,940 --> 00:02:33,540
And then as far as the element, we have the edit job correct So let's go here with edit, job and component,

39
00:02:33,570 --> 00:02:34,740
let's save it.

40
00:02:34,860 --> 00:02:40,920
Now let's navigate back to our All Jobs page and let's work on that link.

41
00:02:41,650 --> 00:02:43,540
So first let me find it.

42
00:02:43,810 --> 00:02:45,850
And of course, it's in the jobs container, right?

43
00:02:45,850 --> 00:02:46,140
Bad.

44
00:02:46,150 --> 00:02:50,620
So we're looking for the components and more specifically, the job one.

45
00:02:50,800 --> 00:02:52,390
That's where I have the link.

46
00:02:52,390 --> 00:02:56,700
And now let's first understand how the URL is going to work.

47
00:02:56,710 --> 00:02:58,420
So this is a link, correct.

48
00:02:58,420 --> 00:03:02,650
So we need to provide here to prop and where do we want to navigate?

49
00:03:02,650 --> 00:03:08,110
Well, technically I can go here with forward slash and edit job and let's see whether everything is

50
00:03:08,110 --> 00:03:08,890
going to work.

51
00:03:08,890 --> 00:03:13,260
So I'm going to navigate to the browser, click it and check it out.

52
00:03:13,270 --> 00:03:18,340
So notice it complains basically that there is no path edit job.

53
00:03:18,340 --> 00:03:18,910
Why?

54
00:03:18,910 --> 00:03:21,550
Well, because it's in a dashboard, correct.

55
00:03:21,550 --> 00:03:24,430
So it's dashboard and then edit job.

56
00:03:24,430 --> 00:03:28,300
So technically if we want we can probably do it this way.

57
00:03:28,870 --> 00:03:32,620
I can say here, dashboard forward slash and then edit job.

58
00:03:32,620 --> 00:03:35,410
So now let's guess, navigate back.

59
00:03:36,140 --> 00:03:38,540
Click on edit and everything is correct.

60
00:03:38,540 --> 00:03:41,420
So this is one way how we can set up everything.

61
00:03:41,420 --> 00:03:46,120
Now, please keep it in mind that we still haven't passed in the URL parameter.

62
00:03:46,130 --> 00:03:51,590
Something very, very important, but technically you can take this route or essentially you just go

63
00:03:51,590 --> 00:03:55,790
with forward slash dashboard and then more specifically edit job.

64
00:03:55,850 --> 00:04:03,470
Now there is another way how we can navigate since the path we provide is relative, and since we are

65
00:04:03,470 --> 00:04:11,780
already in the all jobs page, we can just go with dot dot basically one level up back to a dashboard

66
00:04:11,780 --> 00:04:13,190
and then edit job.

67
00:04:13,190 --> 00:04:15,170
So how is that going to look like?

68
00:04:15,350 --> 00:04:19,850
Let me remove, let me go here with dot dot and again, let's try it out.

69
00:04:20,029 --> 00:04:21,829
I'm going to navigate back.

70
00:04:22,710 --> 00:04:26,310
Then let's click on edit and notice again we navigate back to the same place.

71
00:04:26,310 --> 00:04:29,250
So those are the two approaches you can take.

72
00:04:29,550 --> 00:04:32,130
Now let's talk about the route parameters.

73
00:04:32,160 --> 00:04:34,860
You see, I mean, everything is awesome.

74
00:04:34,860 --> 00:04:38,730
We navigate to the edit job page, but which job?

75
00:04:38,760 --> 00:04:44,730
I mean, eventually we'll have quite a few jobs and I don't want to edit some random job.

76
00:04:44,790 --> 00:04:48,420
I actually want to edit a very specific job.

77
00:04:48,450 --> 00:04:56,250
The one that I have clicked on and in order to access that specific job, we also need to pass in the

78
00:04:56,250 --> 00:04:58,830
parameter, the URL parameter.

79
00:04:58,830 --> 00:05:01,590
And in our case, of course that is going to be ID.

80
00:05:01,800 --> 00:05:03,510
So how is that going to look like?

81
00:05:03,510 --> 00:05:03,990
And you know what?

82
00:05:03,990 --> 00:05:05,970
Let me just set up everything from scratch.

83
00:05:06,090 --> 00:05:09,030
I'm going to go here with curly braces then template string.

84
00:05:09,030 --> 00:05:13,980
Since this is going to be dynamic, then I'm going to go with this dot dot approach.

85
00:05:14,980 --> 00:05:15,700
Edit job.

86
00:05:15,700 --> 00:05:18,120
That's the page then forward slash.

87
00:05:18,130 --> 00:05:22,150
And now I want to access the underscore ID, remember.

88
00:05:22,990 --> 00:05:24,850
Each job has that property.

89
00:05:25,060 --> 00:05:26,740
And of course, this is unique.

90
00:05:26,740 --> 00:05:28,240
So this is the first step.

91
00:05:28,240 --> 00:05:33,640
Now, if I navigate right now back to the browser, actually there's going to be an error because we

92
00:05:33,640 --> 00:05:36,790
haven't set up those route params in the app.

93
00:05:37,360 --> 00:05:38,020
So check it out.

94
00:05:38,020 --> 00:05:45,310
I click here on edit and again we navigate to a 404 because there is no dashboard forward slash edit

95
00:05:45,310 --> 00:05:48,580
job and then the ID it doesn't exist.

96
00:05:48,610 --> 00:05:50,070
There is no such page.

97
00:05:50,080 --> 00:05:54,190
So now we want to navigate back to the app.

98
00:05:54,190 --> 00:05:58,900
JS And let's scroll where we have the edit job.

99
00:05:58,930 --> 00:06:01,960
And like I said, it's not going to be just edit job.

100
00:06:01,960 --> 00:06:07,300
Actually, we're going to go here with Forward Slash and then we just need to come up with the value

101
00:06:07,330 --> 00:06:11,560
basically colon and how we want to call this route parameter.

102
00:06:11,590 --> 00:06:19,240
Now you can call this shake and bake, you can call this banana or you can call this ID And of course,

103
00:06:19,240 --> 00:06:23,900
in my case, I'm going to go with the last option essentially this ID.

104
00:06:24,780 --> 00:06:29,550
Represents whatever value we pass here after the forward slash.

105
00:06:29,580 --> 00:06:33,390
And of course, in the following video, I'll show you how we can access it.

106
00:06:33,420 --> 00:06:38,940
For now, I just want to showcase that everything works since we're taking care of those root params.