1
00:00:00,050 --> 00:00:00,380
All right.

2
00:00:00,380 --> 00:00:02,840
And once we have added jobs set up in place.

3
00:00:02,870 --> 00:00:09,320
Now let's navigate to the edit job page and essentially start working on the functionality.

4
00:00:09,320 --> 00:00:13,280
And the first thing we want to do is go back to Readme.

5
00:00:13,370 --> 00:00:17,030
And essentially I just want to grab all of these imports in here.

6
00:00:17,210 --> 00:00:19,520
So let me select these lines of code.

7
00:00:20,800 --> 00:00:24,520
Then I want to go back to the edit job.

8
00:00:25,420 --> 00:00:26,920
Let me copy and paste.

9
00:00:26,920 --> 00:00:31,170
And as far as the imports, we have one for form row, then form row select.

10
00:00:31,180 --> 00:00:35,140
Basically this page is going to be very similar to create job.

11
00:00:35,170 --> 00:00:41,590
The only difference of course, now once we click on submit, we'll actually send the batch request.

12
00:00:41,700 --> 00:00:43,550
Then we also have one for wrapper.

13
00:00:43,570 --> 00:00:45,400
Remember, this is the.

14
00:00:46,250 --> 00:00:46,700
Rapper.

15
00:00:46,700 --> 00:00:49,620
We already set up the dashboard form page.

16
00:00:49,640 --> 00:00:55,820
Then use loader data since we'll utilize the loader and I want to get some data back.

17
00:00:55,850 --> 00:01:03,860
Also, job status and job type form use navigation for submitting the form as well as the redirect and

18
00:01:03,860 --> 00:01:06,350
the toast and custom fetch.

19
00:01:06,470 --> 00:01:10,070
And I guess let's just start by setting up loader and action.

20
00:01:10,190 --> 00:01:17,330
Import them both in the app.jsx and then I'll show you how we can access those route params in three

21
00:01:17,330 --> 00:01:22,130
places in the loader in the action as well as in the actual component.

22
00:01:22,130 --> 00:01:24,740
So this should be already very familiar.

23
00:01:24,940 --> 00:01:28,850
I'm just going to go here with loader and that one is equal to async.

24
00:01:29,210 --> 00:01:33,350
Let's set up the function and let's just go with return and null.

25
00:01:33,590 --> 00:01:40,520
Then we want to select this copy and paste and instead of loader, this is going to be an action then

26
00:01:40,520 --> 00:01:42,050
back in the app JSX.

27
00:01:43,460 --> 00:01:46,790
Let's scroll down or sorry, let's scroll up.

28
00:01:46,850 --> 00:01:50,600
Guess we have already one action and one loader.

29
00:01:50,600 --> 00:01:51,350
So you know what?

30
00:01:51,350 --> 00:01:54,230
Let me just copy and paste this twice.

31
00:01:54,260 --> 00:02:00,590
This will be a edit job loader and it's going to be coming from edit job page.

32
00:02:01,840 --> 00:02:04,840
And then this will be an action.

33
00:02:06,040 --> 00:02:07,900
And again, the same deal.

34
00:02:07,930 --> 00:02:11,710
We're going to go with edit job and action.

35
00:02:12,690 --> 00:02:14,940
And then, of course, it's coming from the same page.

36
00:02:15,840 --> 00:02:17,970
So let me select let me copy and paste.

37
00:02:18,000 --> 00:02:20,790
Then let's scroll down where we have edit job.

38
00:02:20,880 --> 00:02:22,340
Pretty much the same deal.

39
00:02:22,350 --> 00:02:29,790
We have one loader that is going to be edit job loader, and then we also have one action which is going

40
00:02:29,790 --> 00:02:31,610
to be edit job action.

41
00:02:31,620 --> 00:02:32,970
Now why we have two of them?

42
00:02:32,970 --> 00:02:38,010
Well, because when we load the page, I want to get that specific job.

43
00:02:38,010 --> 00:02:43,020
So essentially I want to get the values about that specific job from the server.

44
00:02:43,410 --> 00:02:52,620
Essentially, we'll make a get request to get info on one single job and then once we submit, we will

45
00:02:53,100 --> 00:02:55,800
make a patch request back to the server.

46
00:02:55,800 --> 00:03:00,090
So essentially we'll provide new values and then we'll send it back to a server.

47
00:03:00,270 --> 00:03:08,190
And effectively, if we want to access the params in the loader and action, we simply want to go over

48
00:03:08,190 --> 00:03:08,820
here.

49
00:03:08,850 --> 00:03:14,910
Remember we were getting there a giant object and I'll right away the structure, the params and I'm

50
00:03:14,910 --> 00:03:16,810
not going to repeat that with an action.

51
00:03:16,810 --> 00:03:22,750
Please keep in mind that of course it's going to be the case since basically they get the same values.

52
00:03:22,750 --> 00:03:29,410
And then now let's navigate back to a browser and we'll nicely see something very, very interesting.

53
00:03:29,410 --> 00:03:36,180
So if I take a look at the console, notice in here I have the object and since I called my route param

54
00:03:36,190 --> 00:03:39,970
an ID, this is why I have this value over here.

55
00:03:39,970 --> 00:03:47,080
So if I'm going to go back to, let's say add job and I'm just going to call this front end.

56
00:03:49,300 --> 00:03:51,520
And then this will be Apple.

57
00:03:51,550 --> 00:03:55,120
If I create this job and then if I navigate.

58
00:03:56,450 --> 00:03:57,530
The all jobs notice.

59
00:03:57,560 --> 00:04:00,110
Of course, this value right now is going to be different.

60
00:04:00,120 --> 00:04:03,950
So like I said, as far as this value, you can call it whatever you want.

61
00:04:03,980 --> 00:04:09,740
You just need to remember that, of course, in order to access whatever we have over here, you will

62
00:04:09,740 --> 00:04:11,210
need to use this value.

63
00:04:11,210 --> 00:04:19,040
And whatever we have here after the forward slash is going to be that value for the root parameter.

64
00:04:19,160 --> 00:04:25,820
And if you want to access those root params in the actual component, then we need to use a hook.

65
00:04:25,850 --> 00:04:29,930
Now please keep in mind we're not going to use this in this particular page.

66
00:04:29,930 --> 00:04:30,740
I don't remember.

67
00:04:30,740 --> 00:04:33,950
Maybe we're going to use it in some other page, but.

68
00:04:34,510 --> 00:04:35,650
In this one for sure.

69
00:04:35,650 --> 00:04:38,530
No, but I do want to showcase how we would access that.

70
00:04:38,560 --> 00:04:40,640
We need to come up with some kind of value.

71
00:04:40,660 --> 00:04:44,530
In my case, I'm going to call this params and then we want to go with use params.

72
00:04:44,530 --> 00:04:48,580
So that's a hook we want to import from React router dom.

73
00:04:48,700 --> 00:04:49,600
And now check it out.

74
00:04:49,600 --> 00:04:54,760
If I'm going to log it, we're not going to be surprised if we see the same value in the console.

75
00:04:54,760 --> 00:04:58,360
So again, both of them deliver the same thing.

76
00:04:58,360 --> 00:05:03,670
So this one is going to be in the actual component and this one is going to be in the loader.

77
00:05:03,790 --> 00:05:08,140
And of course, since we can access pretty much the same object over here as well.

78
00:05:08,850 --> 00:05:12,420
We can grab the route params in action as well.