1
00:00:00,210 --> 00:00:06,210
All right, and once we have the job component in place now, let's start slowly setting up the functionality

2
00:00:06,450 --> 00:00:08,180
for edit and delete.

3
00:00:08,670 --> 00:00:09,990
And I'll start with edit.

4
00:00:10,530 --> 00:00:16,230
And the first thing that we want to do is actually set up a set added job functionality.

5
00:00:16,620 --> 00:00:17,830
Now why do we want to do that?

6
00:00:17,850 --> 00:00:23,970
Well, because we will perform the request from the AJAB, so that is still coming up.

7
00:00:24,300 --> 00:00:31,380
First of all, we want to do is set up the values and as a result will be able to display them in the

8
00:00:31,380 --> 00:00:31,740
job.

9
00:00:32,009 --> 00:00:34,920
So let me showcase how was I going to look like as far as the big picture?

10
00:00:35,370 --> 00:00:37,470
And then, of course, we'll set up Dealogic.

11
00:00:37,980 --> 00:00:40,380
So let me go right now to the components.

12
00:00:41,430 --> 00:00:42,870
And then I'll showcase.

13
00:00:43,890 --> 00:00:48,360
That in the context provider, we have all the values for a job.

14
00:00:48,720 --> 00:00:52,650
So if I keep on scrolling somewhere, there should be a status one.

15
00:00:52,850 --> 00:00:58,260
And I mean, there's more properties in here, so it's going to be probably hard to see.

16
00:00:59,160 --> 00:01:04,080
But the idea is that once we click on edit notice, how we're changing these powers.

17
00:01:04,569 --> 00:01:11,700
So I change here at a job, the job location as well as the type and we navigate over here.

18
00:01:12,060 --> 00:01:18,120
So the first thing that we want to set up is actually those values in the state, and then we'll worry

19
00:01:18,120 --> 00:01:24,810
about performing the request when we add the jump in the actual database.

20
00:01:24,990 --> 00:01:26,070
Hopefully, it makes sense.

21
00:01:27,090 --> 00:01:34,200
First, let's start by setting up the action so set at a job that incentive our function, the set at

22
00:01:34,200 --> 00:01:34,620
a job.

23
00:01:34,830 --> 00:01:35,610
We're looking for that.

24
00:01:36,150 --> 00:01:37,590
We want to dispatch the action.

25
00:01:37,870 --> 00:01:44,220
And as far as the payload will pass in the R.D, now we'll also write or set up at a job and you'll

26
00:01:44,220 --> 00:01:46,860
see by the end of video why you want to do that again.

27
00:01:46,860 --> 00:01:51,510
This is just going to be a placeholder function for now, but eventually we will use it.

28
00:01:51,870 --> 00:01:53,250
And not in the reducer.

29
00:01:53,820 --> 00:01:59,720
If the action is set at a job first, I want to grab the job based on the idea.

30
00:02:00,270 --> 00:02:02,910
So I have the jobs already in the state, correct?

31
00:02:03,390 --> 00:02:06,480
So in the reducer, I'm going to go with state jobs and then find.

32
00:02:07,600 --> 00:02:14,950
And then I'll look for a job whose I.D. matches the one that's coming in with my argument, and that's

33
00:02:14,950 --> 00:02:17,890
where iterating over the jobs that are in our state.

34
00:02:18,280 --> 00:02:20,380
I mean, the job has to be there.

35
00:02:21,190 --> 00:02:27,370
So we get back the job and then we pull out these values that re the position and all that and when

36
00:02:27,370 --> 00:02:28,180
we update.

37
00:02:28,600 --> 00:02:30,910
So then I say, Yeah, I'm actually editing.

38
00:02:31,210 --> 00:02:37,760
So we set this one to a event at a job idea is going to be equal to that and then position company and

39
00:02:37,760 --> 00:02:38,440
the rest of them.

40
00:02:38,890 --> 00:02:47,560
And eventually, since we have already a ajob, we'll also grab the at a jump and then remember if we're

41
00:02:47,560 --> 00:02:54,400
editing, which is the case here now where we're going with editing true, then we'll invoke at a job.

42
00:02:55,030 --> 00:02:58,720
And then of course, we'll have to set up the request and all that.

43
00:02:58,960 --> 00:03:01,330
Hopefully, it is clear what we're about to do.

44
00:03:01,750 --> 00:03:05,950
So let's start first in the actions where again?

45
00:03:06,220 --> 00:03:07,330
Copy and paste.

46
00:03:08,020 --> 00:03:10,420
And then let's set up those two cursor here.

47
00:03:11,320 --> 00:03:15,250
And as far as my name for the action, I'm going to go set at a job.

48
00:03:15,730 --> 00:03:23,350
So let's do that and we're going to go set at it and jab and serve it as far as the import.

49
00:03:23,350 --> 00:03:28,240
Well, in this case, I think I'm going to copy here and we're looking for the context.

50
00:03:29,470 --> 00:03:33,190
Here, let's copy and paste and let's navigate down.

51
00:03:33,230 --> 00:03:34,360
And that's not what I wanted.

52
00:03:34,840 --> 00:03:36,520
So let me navigate down over here.

53
00:03:37,150 --> 00:03:40,450
And we're looking for already set at a job.

54
00:03:40,930 --> 00:03:42,120
We're going to be getting dirty.

55
00:03:42,430 --> 00:03:43,990
So now this patch, that action.

56
00:03:44,580 --> 00:03:49,780
Let's say this patch, the type will be set at a job.

57
00:03:49,990 --> 00:03:53,890
And as far as the payload, we're going to pass in my handy.

58
00:03:54,960 --> 00:03:57,000
Now, let's go to the producer.

59
00:03:57,980 --> 00:03:59,300
Then let's go up.

60
00:04:00,060 --> 00:04:07,620
And we're looking for a reset at a job, and let's not ever get down and land in here and let's go if

61
00:04:07,620 --> 00:04:12,720
action and then not type is equal to set at a job.

62
00:04:13,110 --> 00:04:19,670
Like I said first, we want to grab the job out of the jobs that we have in the states.

63
00:04:19,680 --> 00:04:22,270
A cost is equal to marriage.

64
00:04:22,770 --> 00:04:26,430
Located in the state, then jobs and then find.

65
00:04:26,880 --> 00:04:29,280
So that's the method we can use on the array.

66
00:04:29,640 --> 00:04:32,280
And here I'm just going to say if the job.

67
00:04:33,220 --> 00:04:36,640
It matches to that I'm passing in.

68
00:04:37,030 --> 00:04:41,720
Then, of course, get me back the job, so I'm going to go with the job on the security.

69
00:04:41,740 --> 00:04:42,710
That's the proper name.

70
00:04:42,970 --> 00:04:47,890
And if that is equal to action, then payload and the I.D..

71
00:04:48,700 --> 00:04:51,310
And once I have the job, let me pull out the values.

72
00:04:51,790 --> 00:04:54,790
So I'm going to go with concert and then on the security.

73
00:04:55,760 --> 00:04:58,850
Then I also want to get the position company.

74
00:05:00,140 --> 00:05:05,930
The job, location, location, location and we want to go job.

75
00:05:06,800 --> 00:05:12,140
Type that out, we want to go in status, and all of that is equal to the job.

76
00:05:12,410 --> 00:05:18,390
So that's what we pull out and then let's update the state where we're going to go with return.

77
00:05:18,690 --> 00:05:20,090
That's not and then state.

78
00:05:20,360 --> 00:05:23,300
And the first thing that we want to set up is everything true.

79
00:05:23,780 --> 00:05:25,370
So now we're editing.

80
00:05:25,730 --> 00:05:31,940
And therefore, in the ad job, we'll right away flip those values where instead of our job, we'll

81
00:05:31,940 --> 00:05:32,750
have had a job.

82
00:05:32,780 --> 00:05:35,570
And remember, we'll navigate there because we have the link, correct?

83
00:05:35,930 --> 00:05:39,590
So we're going to go with his editing now that is said equal to true.

84
00:05:40,250 --> 00:05:42,830
And we're going to go with edit job.

85
00:05:43,790 --> 00:05:47,240
And also that one equal to the ad that we have over here.

86
00:05:47,390 --> 00:05:54,080
So that is equal to the idea that we want to go with position, company, job, location, basically

87
00:05:54,080 --> 00:05:58,610
all of these values and not spirits up, I can just grab them and copy and paste.

88
00:05:58,880 --> 00:06:05,090
So now all of my state vows will be equal to whatever I have in this job.

89
00:06:05,390 --> 00:06:13,280
And as a result, when we navigate to our jobs since we are using them as the initial value for our

90
00:06:13,280 --> 00:06:15,290
input, there will be right away display.

91
00:06:15,650 --> 00:06:16,940
So we have our logic.

92
00:06:16,970 --> 00:06:17,420
Awesome.

93
00:06:17,540 --> 00:06:23,930
So now let's just start out by setting up the function in the context, the placeholder one.

94
00:06:24,170 --> 00:06:29,030
And I think I'm going to do that before daily job, when I'm going to go with concept and then edit

95
00:06:29,030 --> 00:06:29,570
job.

96
00:06:29,930 --> 00:06:31,070
So that's my function.

97
00:06:31,070 --> 00:06:33,890
And here, let's just go with console.log.

98
00:06:34,160 --> 00:06:36,350
I'll just say here added job.

99
00:06:36,860 --> 00:06:42,890
Now you're probably wondering, OK, but why are we not grabbing some values since we will invoke this

100
00:06:43,430 --> 00:06:45,410
in our AJOB function?

101
00:06:45,760 --> 00:06:52,310
Remember, all our values are in this state, and this again emphasizes something that I already mentioned.

102
00:06:52,610 --> 00:07:02,000
Normally, all of these values our most likely set up in the ad job page, let's say if I'm just performing

103
00:07:02,300 --> 00:07:06,770
a fetch request to add jobs to the database.

104
00:07:07,280 --> 00:07:12,140
But since in this case, I wanted to combine both functionality where we can also edit.

105
00:07:12,410 --> 00:07:15,650
That's why I set them up instead, because keep in mind.

106
00:07:16,610 --> 00:07:19,220
We are setting those logs from two different pages.

107
00:07:19,670 --> 00:07:22,160
So there has to be some kind of way how we can communicate.

108
00:07:22,550 --> 00:07:25,490
That's why they are state voters going to let me repeat.

109
00:07:25,850 --> 00:07:32,240
Normally, if that's not the case, I would simply set them up in the ajob and I would just forget about

110
00:07:32,240 --> 00:07:32,360
it.

111
00:07:33,190 --> 00:07:34,360
Hopefully that makes sense.

112
00:07:34,720 --> 00:07:41,710
And let me go right now and actually import this one, meaning I've added to the value and here I'm

113
00:07:41,710 --> 00:07:47,620
going to go with added job, so not at a job if you are looking for at a job.

114
00:07:47,920 --> 00:07:54,080
And now let's navigate through the ad one very ad job page of refine its pages.

115
00:07:54,610 --> 00:07:56,350
Then we're looking for a dashboard one.

116
00:07:56,620 --> 00:07:59,140
And then we want to have the ad job one.

117
00:07:59,410 --> 00:08:00,100
And remember.

118
00:08:01,070 --> 00:08:02,060
In here, what happens?

119
00:08:02,450 --> 00:08:07,070
Well, we grab all of these things from the state, and there's one more thing we want to add.

120
00:08:07,430 --> 00:08:08,930
So we already have is editing.

121
00:08:09,230 --> 00:08:10,790
That's why you married me.

122
00:08:11,270 --> 00:08:13,250
I just pretty much showcased that.

123
00:08:13,760 --> 00:08:18,200
Yes, you should grab the editing if it's not there, but it should be already there.

124
00:08:18,530 --> 00:08:19,700
So we're editing.

125
00:08:19,910 --> 00:08:21,950
And I also want to get the added job.

126
00:08:22,340 --> 00:08:23,570
So let me take this one.

127
00:08:24,050 --> 00:08:32,570
So I'm going to go with edit and then jump and then remember where we have the handles submit if we

128
00:08:32,570 --> 00:08:35,679
are editing, which at the moment we're changing in a state.

129
00:08:35,690 --> 00:08:36,080
Correct?

130
00:08:36,409 --> 00:08:37,429
What do we want to call?

131
00:08:37,820 --> 00:08:40,309
Well, eventually you want to call out a job.

132
00:08:40,760 --> 00:08:44,330
So let me just come on this one and remove this eventually.

133
00:08:44,750 --> 00:08:51,770
So now, since we're changing that state value instead of creating the job we should see in the council

134
00:08:52,400 --> 00:08:53,060
edit job.

135
00:08:53,210 --> 00:08:54,050
So let's try it out.

136
00:08:54,950 --> 00:09:01,130
We're going to navigate to your my application and I will showcase how we're changing stuff instead,

137
00:09:01,130 --> 00:09:06,260
because maybe it was hard to see since there were so many states of ours already in the complete one.

138
00:09:06,590 --> 00:09:08,360
So let me take a look at the provider.

139
00:09:09,350 --> 00:09:11,180
And at the moment, what are the values here?

140
00:09:11,570 --> 00:09:19,430
Well, is that it is false and a job empty, position empty, and we have some default ones for select

141
00:09:19,430 --> 00:09:19,800
buyers.

142
00:09:19,850 --> 00:09:20,220
OK.

143
00:09:20,270 --> 00:09:21,410
So that kind of makes sense.

144
00:09:21,950 --> 00:09:26,840
Now, once I click on Edit, I should update my status.

145
00:09:27,170 --> 00:09:31,970
And then as a result in the Ajob, two things should be there.

146
00:09:32,360 --> 00:09:37,880
First of all, it should be is editing, meaning we should have the text of editing job.

147
00:09:37,940 --> 00:09:41,150
That's number one, and all the values should be already filled.

148
00:09:41,210 --> 00:09:41,630
Why?

149
00:09:41,960 --> 00:09:46,640
Because they're coming from the state and the moment we click, we should update this stuff out.

150
00:09:46,910 --> 00:09:47,780
So let's try it out.

151
00:09:47,900 --> 00:09:52,190
And I successfully navigate here, but it looks like I didn't update any values.

152
00:09:52,370 --> 00:09:52,610
Hmm.

153
00:09:53,000 --> 00:09:58,700
So before I start running around like I had less chicken, let me try one more time by just refreshing,

154
00:09:59,120 --> 00:10:02,030
because that sometimes is the case with me.

155
00:10:02,040 --> 00:10:02,540
Go back.

156
00:10:02,570 --> 00:10:04,490
I'm not going to give you the whole speech again.

157
00:10:05,130 --> 00:10:06,560
I just open everything.

158
00:10:06,830 --> 00:10:09,530
I will try with the same value just to showcase that.

159
00:10:09,800 --> 00:10:12,140
And now everything works.

160
00:10:12,380 --> 00:10:17,810
We do have the added gem in the add job page and check it out.

161
00:10:18,340 --> 00:10:20,390
Estate values are filled out.

162
00:10:21,200 --> 00:10:24,930
We are editing the added job position and all that.

163
00:10:24,950 --> 00:10:32,120
And again, the case is that the moment I'll click the segment now will edit the job and the reason

164
00:10:32,120 --> 00:10:39,080
why we're not passing anything into the added job function simply because we'll grab those values right

165
00:10:39,080 --> 00:10:40,490
from the state anyway.

166
00:10:40,940 --> 00:10:42,740
So they already located over here.

167
00:10:42,740 --> 00:10:47,090
So when we'll set up the request, well, they'll all be available.

168
00:10:47,810 --> 00:10:48,660
So let's try it out.

169
00:10:48,680 --> 00:10:50,480
I'll click on submit notice.

170
00:10:50,480 --> 00:10:51,710
Right now, we have had a jump.

171
00:10:51,950 --> 00:10:54,230
And then one last thing that I want to mention in this video.

172
00:10:54,530 --> 00:11:02,660
Remember, we also have clear functionality, and if you remember in the reducer, we pretty much set

173
00:11:02,660 --> 00:11:03,950
everything back to the default.

174
00:11:04,220 --> 00:11:10,730
And since I want to showcase that notice the moment I click clear now, I'm not adding the added job

175
00:11:10,970 --> 00:11:14,720
is clean and the same goes for position and a company.

176
00:11:14,930 --> 00:11:21,230
We still have default ones for the pending and full time, and this is coming as our location from the

177
00:11:21,230 --> 00:11:21,620
user.

178
00:11:21,950 --> 00:11:27,980
But hopefully this makes sense where that's the reason why, with clear, we pretty much took everything

179
00:11:27,980 --> 00:11:35,360
back to the start since I don't want this is editing lingering around when the user actually decides

180
00:11:35,360 --> 00:11:36,200
to clear the form.

181
00:11:36,470 --> 00:11:43,040
And with this in place now, we can start setting up edit job functionality on the server and then eventually

182
00:11:43,040 --> 00:11:45,410
implement in the front as well.