1
00:00:00,170 --> 00:00:00,650
All right.

2
00:00:00,920 --> 00:00:07,490
Before we set up a job page, let's also quickly recall the request we're going to be working with.

3
00:00:07,580 --> 00:00:10,940
So the URL is going to be forward slash jobs.

4
00:00:10,970 --> 00:00:13,130
The method is going to be post.

5
00:00:13,280 --> 00:00:20,030
And as far as the data in the body, this is what we're going to send the company position, job status,

6
00:00:20,030 --> 00:00:23,180
job type, as well as the job location.

7
00:00:23,180 --> 00:00:29,630
And if we're successful, we're going to get back the object and in there there's going to be a job

8
00:00:29,630 --> 00:00:31,880
property with all of these values.

9
00:00:31,910 --> 00:00:37,580
Now, on the front end, we're actually going to navigate away to our jobs page.

10
00:00:37,580 --> 00:00:42,860
So technically, we're only looking for the success response.

11
00:00:42,860 --> 00:00:46,740
Basically, if there is no error, we are good to go.

12
00:00:46,760 --> 00:00:51,620
Now, of course, if there's some kind of error, we're going to get back the error response.

13
00:00:51,620 --> 00:00:56,210
And in that case, we're going to display the error to the user.

14
00:00:56,240 --> 00:00:56,690
All right.

15
00:00:56,690 --> 00:01:00,690
And up next, let's work on create job functionality effectively.

16
00:01:00,690 --> 00:01:08,160
We want to set up an action where we send the data from our inputs to our server.

17
00:01:08,160 --> 00:01:14,850
And this is an extremely good use case for the challenge because at the end of the day, the functionality

18
00:01:14,850 --> 00:01:19,950
is going to be extremely similar to the login as well as the register.

19
00:01:19,950 --> 00:01:27,350
So I highly encourage you to stop the video, try to set up the entire functionality yourself.

20
00:01:27,360 --> 00:01:31,860
Basically we want to grab the form data, we want to send a post request.

21
00:01:31,950 --> 00:01:39,000
Remember, you just need to double check the URLs and also if you're successful, display some kind

22
00:01:39,000 --> 00:01:47,070
of post, navigate to all jobs page and also if there is an error, display a toast with the error message.

23
00:01:47,100 --> 00:01:49,110
Let's get cracking.

24
00:01:49,350 --> 00:01:52,830
I'm going to go right away with export, const and action.

25
00:01:52,830 --> 00:01:57,660
And before I forget, I'll actually set it up in app JS.

26
00:01:57,840 --> 00:01:59,310
So for now let me.

27
00:02:00,360 --> 00:02:02,670
The structure, the request.

28
00:02:04,080 --> 00:02:07,290
Over here and let me just return null.

29
00:02:08,440 --> 00:02:14,080
And then let's navigate to pum pum pum pum pum App.jsx over here.

30
00:02:15,320 --> 00:02:16,940
Let's copy and paste.

31
00:02:17,000 --> 00:02:19,220
Guess it's not going to be a loader.

32
00:02:19,280 --> 00:02:20,900
It's going to be an action.

33
00:02:20,990 --> 00:02:23,300
It's not a dashboard loader.

34
00:02:23,480 --> 00:02:25,670
I'm going to go with Add job action.

35
00:02:27,550 --> 00:02:30,940
And then, okay, for some reason this was all uppercase.

36
00:02:30,940 --> 00:02:33,760
And then we're looking for the Add job page.

37
00:02:33,790 --> 00:02:37,600
So pages forward, slash and then add job.

38
00:02:37,990 --> 00:02:38,830
Let's scroll down.

39
00:02:38,830 --> 00:02:40,900
Let's look for our Add job.

40
00:02:42,180 --> 00:02:44,490
It's over here somewhere.

41
00:02:45,980 --> 00:02:49,160
Yep, of course it's the index one.

42
00:02:49,160 --> 00:02:51,110
That's why it was hard for me to find it.

43
00:02:51,350 --> 00:02:53,360
So let's go with action.

44
00:02:53,360 --> 00:02:57,470
And that will be equal to add job action.

45
00:02:57,680 --> 00:02:59,900
And let's just add a comma over here.

46
00:03:00,390 --> 00:03:03,800
With this in place now, let's navigate back to add job.

47
00:03:04,770 --> 00:03:06,660
First we want to grab the form data.

48
00:03:06,660 --> 00:03:07,020
Correct.

49
00:03:07,020 --> 00:03:09,210
So form data is equal to.

50
00:03:09,910 --> 00:03:10,990
The await.

51
00:03:11,680 --> 00:03:13,600
Then request form data.

52
00:03:15,540 --> 00:03:18,960
Let's invoke that and then we want to turn this into an object.

53
00:03:18,960 --> 00:03:20,040
So we're going to go with const.

54
00:03:20,040 --> 00:03:26,130
Data is equal to object dot from entries and we want to provide the form data.

55
00:03:26,990 --> 00:03:29,510
Well, then we're going to go with try and catch.

56
00:03:30,050 --> 00:03:33,770
And essentially we'll move this null up.

57
00:03:34,280 --> 00:03:36,920
Eventually there's going to be a redirect, but not for now.

58
00:03:36,920 --> 00:03:38,930
So let's go over here with Await.

59
00:03:39,110 --> 00:03:41,630
We're looking for custom fetch.

60
00:03:41,720 --> 00:03:43,760
Then it's going to be a post request.

61
00:03:43,760 --> 00:03:47,960
And remember, we already pointing to localhost 5100.

62
00:03:47,990 --> 00:03:51,260
Then the base URL is API version one.

63
00:03:51,260 --> 00:03:58,460
And then remember, in order to create a job, we needed to make a post request to forward slash jobs.

64
00:03:58,460 --> 00:04:03,320
And the second value is going to be our data, basically our object with input values.

65
00:04:03,320 --> 00:04:07,910
And if everything is correct, for now, we're going to set up a post.

66
00:04:08,930 --> 00:04:14,750
Then we'll provide the success option and we'll say job added successfully.

67
00:04:14,750 --> 00:04:21,940
And if we have an error, we want to go post error and then look for message and also return the error.

68
00:04:21,950 --> 00:04:23,130
And you know what?

69
00:04:23,150 --> 00:04:24,530
In order to.

70
00:04:25,540 --> 00:04:26,710
Make this a little bit faster.

71
00:04:26,710 --> 00:04:29,380
I'm just going to copy and paste from the login.

72
00:04:30,070 --> 00:04:31,560
Now let's try it out.

73
00:04:31,570 --> 00:04:36,250
I'm going to navigate to the browser and let me right away open up the dev tools.

74
00:04:36,970 --> 00:04:42,940
Specifically, I'm going to look for network over here and again, in order to speed this up, I already

75
00:04:42,940 --> 00:04:48,040
clicked on the fetch one, so that way I'll right away be able to see my request.

76
00:04:48,430 --> 00:04:51,040
As far as the position I'm going to go with front end.

77
00:04:53,250 --> 00:04:54,360
And then.

78
00:04:55,510 --> 00:04:56,860
Let's go with coding addict.

79
00:04:57,840 --> 00:04:59,640
Let's send a request.

80
00:04:59,850 --> 00:05:01,980
Notice two things are happening.

81
00:05:01,980 --> 00:05:05,390
Basically, we create the job, correct?

82
00:05:05,400 --> 00:05:10,320
So jobs URL, and then we have 201.

83
00:05:10,320 --> 00:05:11,880
And we were successful.

84
00:05:11,910 --> 00:05:14,960
And yes, we'll also have here this current user.

85
00:05:15,000 --> 00:05:16,740
Basically the reason why it's happening.

86
00:05:16,740 --> 00:05:21,300
Well, because the dashboard layout is apparent for all of these routes over here.

87
00:05:21,300 --> 00:05:27,840
And since in the loader there, we're grabbing the current user pretty much every time we'll do something

88
00:05:27,840 --> 00:05:30,570
with the pages, we will refetch that user.

89
00:05:30,600 --> 00:05:36,330
Now eventually we will set up a cache with React query, but let's not worry about it right now.

90
00:05:36,330 --> 00:05:40,410
Just don't be surprised if you keep seeing this current user request.

91
00:05:40,410 --> 00:05:42,090
Yes, that's going to be the case.

92
00:05:42,090 --> 00:05:49,200
And remember, if for example, something goes wrong with the cookie or the JWT will automatically log

93
00:05:49,200 --> 00:05:52,920
out this user, since that's our setup in the loader.

94
00:05:52,920 --> 00:05:55,170
Now, let's also take a look at the payload.

95
00:05:55,170 --> 00:06:01,210
So essentially, I'm sending all of these values nicely over here and this is going to be my response.

96
00:06:01,210 --> 00:06:02,740
So we're sending back the job.

97
00:06:02,740 --> 00:06:07,090
But like I said, we're not using it anywhere here on the front end.

98
00:06:07,120 --> 00:06:15,160
If we're successful, then essentially we're just going to display the toast and eventually we'll navigate

99
00:06:15,160 --> 00:06:16,390
away from the page.

100
00:06:16,390 --> 00:06:21,160
Now, there is one thing that I want to showcase, though, and that is the pending class.

101
00:06:21,400 --> 00:06:24,280
And I guess in order to showcase that, I need to do two things.

102
00:06:24,280 --> 00:06:30,160
First of all, I'll make this 3G slow and also I want to go to a elements.

103
00:06:30,160 --> 00:06:34,060
And more specifically, I want to look for this ad job one over here.

104
00:06:34,820 --> 00:06:36,830
And notice something interesting over here.

105
00:06:36,860 --> 00:06:42,150
The moment I will click on Submit, I'll have different background color.

106
00:06:42,170 --> 00:06:42,860
Why?

107
00:06:42,890 --> 00:06:44,630
Because by default.

108
00:06:45,590 --> 00:06:48,890
On an Eyeblink we get this pending class as well.

109
00:06:49,010 --> 00:06:56,990
And if you take a look at the index CSS, so basically our global CSS, you'll find over here this pending

110
00:06:56,990 --> 00:06:57,500
class.

111
00:06:57,500 --> 00:07:00,260
That's why you see the background there.

112
00:07:00,500 --> 00:07:06,080
Now we will use these classes later in order to set up the badges for the job.

113
00:07:06,080 --> 00:07:07,850
So that's why I don't want to remove it.

114
00:07:07,850 --> 00:07:13,850
I just want to explain that, yes, we're getting that pending class on the nav link and since I already

115
00:07:13,850 --> 00:07:18,320
have some styles for that pending class, that's why you see that background.

116
00:07:18,350 --> 00:07:21,950
Now, in order to fix that, we need to add some logic in the wrapper.

117
00:07:21,950 --> 00:07:24,290
So let's look for assets and wrappers.

118
00:07:24,290 --> 00:07:28,900
And we're looking for big sidebar and let's keep on scrolling.

119
00:07:28,910 --> 00:07:33,230
Remember the active class right after it, we're going to go with Dot.

120
00:07:34,150 --> 00:07:35,710
And we're looking for pending.

121
00:07:35,710 --> 00:07:38,020
And in here I just want to change the background.

122
00:07:38,020 --> 00:07:44,890
So I'm just going to go with Var and then I'm going to go with background color variable.

123
00:07:44,890 --> 00:07:47,410
So now let's navigate back to our browser.

124
00:07:47,560 --> 00:07:51,700
I actually want to go back to a normal speed.

125
00:07:52,060 --> 00:07:53,560
Then let's refresh.

126
00:07:54,750 --> 00:07:57,750
And essentially we want to again, provide some value.

127
00:07:59,110 --> 00:08:01,060
Front end and then coding addict.

128
00:08:01,060 --> 00:08:04,570
And you'll notice that we're going to get a different background color.

129
00:08:04,570 --> 00:08:10,720
So hopefully it's clear how the nav link adds the class and why we had a different background.

130
00:08:10,720 --> 00:08:17,110
And the last thing that I want to do in this video is to navigate programmatically away from the Add

131
00:08:17,110 --> 00:08:19,390
job to all jobs.

132
00:08:19,390 --> 00:08:26,140
So if we're successful, instead of returning null, we already have the redirect in place.

133
00:08:26,660 --> 00:08:29,060
So now we just need to say, where do we want to navigate?

134
00:08:29,060 --> 00:08:31,240
And I'm just going to go with all jobs.

135
00:08:31,250 --> 00:08:36,770
So once I add the job, we're going to nicely navigate to all jobs.

136
00:08:36,770 --> 00:08:42,740
Page since this is where we're going to make a request to get all the jobs back from the database.