1
00:00:00,390 --> 00:00:05,310
So with me do a little bit of spring planning as far as my tabs and then let's start working, we're

2
00:00:05,310 --> 00:00:06,210
going to go with source.

3
00:00:06,720 --> 00:00:11,190
We're looking for pages more specifically match board, online and job.

4
00:00:11,610 --> 00:00:15,390
And yes, this is going to be the case where I will speed this up a little bit.

5
00:00:15,780 --> 00:00:19,230
And when I grabbed the read man, this is a little bit annoying.

6
00:00:19,230 --> 00:00:23,130
Work always opens up the same file here.

7
00:00:23,550 --> 00:00:30,000
So let me grab here, read me and I'm not going to take these ones, but I do want to grab the imports

8
00:00:30,480 --> 00:00:35,220
because I really don't think there's any use for me to type them out.

9
00:00:35,550 --> 00:00:36,690
So copy and paste again.

10
00:00:36,750 --> 00:00:38,310
Form row or, you know, alert.

11
00:00:38,310 --> 00:00:42,120
Now here's our context already know as well as the wrapper.

12
00:00:42,360 --> 00:00:46,870
And again, just to emphasize something when we're talking about the profile.

13
00:00:47,300 --> 00:00:49,830
Notice it's the same component.

14
00:00:49,890 --> 00:00:50,340
Why?

15
00:00:50,760 --> 00:00:52,830
Well, because it's literally the same thing.

16
00:00:53,310 --> 00:00:54,150
Have form here.

17
00:00:54,390 --> 00:00:58,740
I have form here, so I might as well just combine the styles in one place.

18
00:00:59,220 --> 00:01:01,980
Now, as far as ajob, first what I want to do.

19
00:01:02,880 --> 00:01:05,040
Is go with use context.

20
00:01:05,250 --> 00:01:10,470
So use that context, we invoke it and then we want to pull out bunch of things that were here.

21
00:01:10,890 --> 00:01:12,420
First, we want to get Charlotte.

22
00:01:12,930 --> 00:01:14,610
That's going to be our bullion van.

23
00:01:14,620 --> 00:01:20,790
We want to get the actual function, display alert, then we want to get the position, the company

24
00:01:21,180 --> 00:01:23,640
and job location and yada yada yada.

25
00:01:24,000 --> 00:01:28,980
So let's go here with I'm putting pretty much all the values we set up in the previous video.

26
00:01:29,310 --> 00:01:37,310
Now, keep in mind when it comes to job type options and status options, of course, those are arrays

27
00:01:37,710 --> 00:01:41,820
and they will come in handy in the next video when we'll set up the select.

28
00:01:42,180 --> 00:01:45,580
So let's go here with job creation.

29
00:01:46,050 --> 00:01:48,990
Then we also want to go with job type.

30
00:01:49,570 --> 00:01:58,620
And let's also set up job type options options, mitzevich or have better formatting.

31
00:01:59,010 --> 00:02:00,540
Then we want to go status.

32
00:02:01,600 --> 00:02:08,680
And then lastly, let's go with the status status options now, if you named your state variables different

33
00:02:08,680 --> 00:02:12,160
like then please make sure that everything is correct.

34
00:02:12,520 --> 00:02:14,740
Now I'm not going to create the functions yet.

35
00:02:15,040 --> 00:02:16,120
Let's not worry about it.

36
00:02:16,510 --> 00:02:19,060
What I want to do right now is set up my return.

37
00:02:19,140 --> 00:02:20,530
So let's go here with the rapper.

38
00:02:20,860 --> 00:02:23,020
And you know what, before we go any further?

39
00:02:23,470 --> 00:02:27,850
Actually, there's one thing missing and that is the is editing.

40
00:02:28,270 --> 00:02:30,440
So scroll down over here.

41
00:02:30,520 --> 00:02:32,230
I'm going to be using is editing.

42
00:02:32,620 --> 00:02:37,730
So with me quickly set it up here in the read me.

43
00:02:38,110 --> 00:02:40,690
So you have it for your own reference.

44
00:02:41,140 --> 00:02:46,090
And then I'll also use it in my ad job, so I'll pass it on a top.

45
00:02:46,390 --> 00:02:49,840
And then when it comes to rapper first, let's just start with the simple form.

46
00:02:50,970 --> 00:02:52,680
Where we want to go with form element.

47
00:02:53,220 --> 00:02:56,130
And there's going to be no action since we'll handle that on our own.

48
00:02:56,640 --> 00:03:00,270
And then we want to go with class name and let's set up the form.

49
00:03:00,840 --> 00:03:03,630
And I simply want to set up my heading three.

50
00:03:03,990 --> 00:03:06,480
With that is that I mean, so let's go over here.

51
00:03:06,840 --> 00:03:10,050
Let's say that we'll look for is editing value.

52
00:03:10,290 --> 00:03:14,100
And then if it is true, then we'll say at a job.

53
00:03:14,460 --> 00:03:20,170
And of course, eventually we'll provide the values to the state and in the process to display them.

54
00:03:20,550 --> 00:03:23,910
For now, I just want to go with added jump or add drum.

55
00:03:24,180 --> 00:03:24,810
It's not me.

56
00:03:24,810 --> 00:03:25,560
Never get back.

57
00:03:25,950 --> 00:03:30,280
And if everything is correct, once I refresh, I have --.

58
00:03:30,630 --> 00:03:34,380
So now we just need to set up the alert as well as the inputs.

59
00:03:34,770 --> 00:03:41,160
So right off 303, we're going to go here with show alert again, our Boolean value, and then we'll

60
00:03:41,170 --> 00:03:49,800
use our alert component when we want to go with form center unless this world plays all our inputs.

61
00:03:49,950 --> 00:03:53,880
So we're going to go here with Dev and then the class will be form center.

62
00:03:54,090 --> 00:03:55,110
That's for the styling.

63
00:03:55,350 --> 00:04:01,110
And then remember, we have the form or component and it's going to be looking for a type which is going

64
00:04:01,110 --> 00:04:05,010
to be the text for the position that name will be positioned.

65
00:04:05,400 --> 00:04:11,220
And it's very, very, very, very important that the names match.

66
00:04:11,220 --> 00:04:11,910
Exactly.

67
00:04:12,450 --> 00:04:17,910
And I know you're probably sick of hearing this, but trust me when it comes to a course, can I?

68
00:04:18,899 --> 00:04:26,490
The most questions are just about simple bugs, where effectively instead of riding position, there's

69
00:04:26,490 --> 00:04:30,150
a typo and the whole functionality goes bananas.

70
00:04:30,720 --> 00:04:34,140
Now I'm not saying that in the condescending way.

71
00:04:34,170 --> 00:04:36,480
Trust me, I meant those typos all the time.

72
00:04:36,720 --> 00:04:44,100
But as I'm recording, I just try to emphasize the fact that, yes, we need to pay attention because

73
00:04:44,160 --> 00:04:48,840
this is not going to be positioned in the state and not very, very important.

74
00:04:49,050 --> 00:04:54,150
So even though you type here value, and then this will be equal to the actual state value.

75
00:04:54,540 --> 00:04:59,250
Again, the whole functionality will go bananas because they don't match.

76
00:04:59,610 --> 00:05:06,720
So make sure that you use the same name as you have here for the value and then we want to set up that

77
00:05:06,720 --> 00:05:07,530
handle change.

78
00:05:07,890 --> 00:05:14,790
So for the time being, let's simply set up a function that is just going to look for that event.

79
00:05:15,180 --> 00:05:20,970
And more specifically, we want to grab the name over here and then devalue.

80
00:05:21,300 --> 00:05:22,770
So let's scroll up a little bit.

81
00:05:24,120 --> 00:05:30,270
And basically, it's come up with that function, handle job input, and I'm skipping a little bit of

82
00:05:30,270 --> 00:05:30,600
head.

83
00:05:30,930 --> 00:05:35,790
But eventually we will invoke the function that is coming from the state.

84
00:05:36,210 --> 00:05:41,070
So this is just going to be a local one because in my opinion, it's just easier to work this way more

85
00:05:41,310 --> 00:05:42,550
effectively in this function.

86
00:05:42,570 --> 00:05:48,660
I'll grab the event object and then for time being, I'm just going to go name is equal to event dot

87
00:05:48,660 --> 00:05:52,470
target name just so we can see whether or functionality works.

88
00:05:52,830 --> 00:05:59,110
And then I also want to do the same thing with the value for value will be equal to event target and

89
00:05:59,160 --> 00:05:59,910
then devalue.

90
00:06:00,270 --> 00:06:05,490
And as far as the console.log, think I'm going to go this way where I'm going to go with log van,

91
00:06:05,490 --> 00:06:07,080
we're looking for template string.

92
00:06:07,740 --> 00:06:14,280
And here we want to access the name and set up the colon and also grab the value.

93
00:06:14,790 --> 00:06:18,180
So this one, I'll add to all of them.

94
00:06:18,570 --> 00:06:21,390
I'll start with my first one with possession.

95
00:06:21,930 --> 00:06:25,260
So let's go here with on change.

96
00:06:26,200 --> 00:06:32,340
And what we want to pass in is the handle job input that's close our former room.

97
00:06:32,740 --> 00:06:33,970
Let me add here.

98
00:06:34,800 --> 00:06:41,640
Actually, a comment, and I'll write or hear position then when we want to copy and paste two more

99
00:06:41,640 --> 00:06:42,090
times.

100
00:06:42,810 --> 00:06:48,420
So I think I'm being purged now, the second value will be the company, one company.

101
00:06:49,050 --> 00:06:54,340
So again, please make sure that there are no tiny bugs where we want to go.

102
00:06:54,360 --> 00:06:56,850
Here we have a company in both places.

103
00:06:56,850 --> 00:07:02,940
So this is going to be the case where we're going to go to cursors and not just set up the company.

104
00:07:03,480 --> 00:07:05,760
And the last one will be location.

105
00:07:06,150 --> 00:07:13,830
So we're going to go over here, say location and what is the state value provider's job location?

106
00:07:14,200 --> 00:07:14,580
Correct.

107
00:07:14,970 --> 00:07:21,090
So we need to make sure that wherever we have the name, we go here with job location and then the same

108
00:07:21,090 --> 00:07:22,500
goes for value.

109
00:07:22,680 --> 00:07:27,810
So I mean, select let me delete and then we'll go with job location.

110
00:07:28,140 --> 00:07:29,100
Let's save.

111
00:07:29,220 --> 00:07:33,630
Let's go here and then notice something interesting where we right away have the value.

112
00:07:33,900 --> 00:07:34,350
Why?

113
00:07:34,560 --> 00:07:36,300
Well, because it's our state already.

114
00:07:36,810 --> 00:07:39,600
Remember, that's what we getting back with a token.

115
00:07:39,600 --> 00:07:40,800
That's what we said in a state.

116
00:07:41,010 --> 00:07:43,750
And not only that, it is also in our local storage.

117
00:07:43,770 --> 00:07:51,270
So that's why it was so crucial for us to send it back with our request, because that way I clearly

118
00:07:51,270 --> 00:07:55,110
know that, OK, this is going to be a location for John.

119
00:07:55,380 --> 00:07:59,280
So when he's adding more jobs, he will have his location.

120
00:07:59,520 --> 00:08:00,610
Now, can you change it here?

121
00:08:00,630 --> 00:08:01,290
Of course you can.

122
00:08:01,860 --> 00:08:05,550
But by default, you have the user's location.

123
00:08:05,730 --> 00:08:08,670
Now the last thing before we start tackling the button.

124
00:08:09,560 --> 00:08:17,300
Remember, we have the label text correct, because I mean, you can leave it here like this where it

125
00:08:17,300 --> 00:08:22,850
is, job location has one name, but it's probably better if we just set up two separate words.

126
00:08:22,970 --> 00:08:25,170
So let's go here with the label text.

127
00:08:25,190 --> 00:08:29,690
Remember, that was our prop that we set up in the component.

128
00:08:30,080 --> 00:08:36,350
And let's just say here, job location and now you can see it in action.

129
00:08:36,500 --> 00:08:38,059
So hopefully this is clear enough.

130
00:08:38,059 --> 00:08:41,090
For example, why label text is so nifty.

131
00:08:41,390 --> 00:08:41,750
All right.

132
00:08:42,020 --> 00:08:44,300
So those are our three inputs.

133
00:08:44,690 --> 00:08:49,790
And you know, before we deal with a submit button, why don't we just test them out where I want to

134
00:08:49,790 --> 00:08:50,720
go and inspect?

135
00:08:50,990 --> 00:08:55,190
I want to go to council, and it looks like over here I have big old dewji.

136
00:08:55,330 --> 00:08:55,550
Hmm.

137
00:08:56,780 --> 00:09:00,740
You provide a value prop to a farm field without on chain Schundler.

138
00:09:00,920 --> 00:09:01,160
Hmm.

139
00:09:01,820 --> 00:09:02,070
OK.

140
00:09:02,090 --> 00:09:02,870
Let me double check.

141
00:09:02,870 --> 00:09:04,820
I think I know where are the errors.

142
00:09:05,300 --> 00:09:08,630
And again, this is just to showcase how easy it is to make those errors.

143
00:09:09,130 --> 00:09:12,380
I mean, I would get quickly, quickly back to the form row.

144
00:09:13,010 --> 00:09:14,370
And yes, of course.

145
00:09:14,420 --> 00:09:18,080
So over here, the proper name is and I'll change my bet.

146
00:09:18,470 --> 00:09:20,270
So let me go back to and jump.

147
00:09:20,780 --> 00:09:26,060
And instead of on change, which we are setting up in the form row, let me select all these suckers

148
00:09:26,060 --> 00:09:26,360
here.

149
00:09:26,690 --> 00:09:30,260
And let's just say handle and change.

150
00:09:30,440 --> 00:09:33,710
Let's say I won, and now we shouldn't get the error.

151
00:09:33,770 --> 00:09:33,980
Yep.

152
00:09:34,250 --> 00:09:35,150
Everything is correct.

153
00:09:35,420 --> 00:09:42,680
And now, if we start typing in any of the fields, what you'll notice is the name in the state.

154
00:09:42,680 --> 00:09:43,580
So that's the position.

155
00:09:43,850 --> 00:09:45,930
And this is going to be the value now.

156
00:09:45,950 --> 00:09:48,860
At the moment, we're not updating anything as far as the state.

157
00:09:49,190 --> 00:09:52,520
So that's why, of course, you'll just see that first thing over here.

158
00:09:53,000 --> 00:10:00,750
But eventually, yes, the moment will Typekit in the input will also automatically update everything

159
00:10:00,750 --> 00:10:02,660
going to state and notice over here.

160
00:10:02,930 --> 00:10:06,800
Same thing is with our job location.

161
00:10:06,860 --> 00:10:07,220
All right.

162
00:10:07,220 --> 00:10:07,910
So that's good.

163
00:10:08,150 --> 00:10:13,010
So now we can go back to the read me and check out what else we need to do.

164
00:10:14,140 --> 00:10:19,450
So and here we have the button container where we want to set up handle some button to do that.

165
00:10:19,960 --> 00:10:23,290
Let's go right after the last formal.

166
00:10:23,590 --> 00:10:25,150
I'll add two comments right away.

167
00:10:25,420 --> 00:10:27,430
I'll say jump type.

168
00:10:28,090 --> 00:10:29,890
This is where we'll have our select one.

169
00:10:30,220 --> 00:10:33,160
And also, I'll go with a job and then status.

170
00:10:33,610 --> 00:10:40,480
So right after these two guys said, we're going to go with our button container and then instead of

171
00:10:40,480 --> 00:10:43,630
the button container first, let's set up that submit button.

172
00:10:43,990 --> 00:10:45,100
So let's go with our button.

173
00:10:45,490 --> 00:10:48,660
I will be submit, submit.

174
00:10:49,030 --> 00:10:55,240
And then let's also add a little bit of glasses for styling began button block.

175
00:10:55,600 --> 00:10:58,420
And then lastly, we want to go submit button.

176
00:10:59,060 --> 00:11:03,780
Now I will also set up on Click, but we just add text here.

177
00:11:03,850 --> 00:11:07,660
So submit and let's set up that function, I guess.

178
00:11:07,840 --> 00:11:13,120
So right above or below handle in Punjab, where drop input.

179
00:11:13,390 --> 00:11:17,320
So let me go with const and then handle submit.

180
00:11:17,830 --> 00:11:21,790
And yes, we'll grab the event because right away, we want to prevent the default.

181
00:11:22,120 --> 00:11:24,970
And once we prevent the default, what do we want to do?

182
00:11:25,420 --> 00:11:28,630
Well, I guess let's check right away for those empty hours.

183
00:11:28,900 --> 00:11:35,200
Now again, this is going to be the case where I will comment this out when we're making requests because

184
00:11:35,500 --> 00:11:38,800
I do want to check whether we are getting the error from the server.

185
00:11:38,890 --> 00:11:42,700
But once we're done, yes, there's going to be basically three checks in place.

186
00:11:43,060 --> 00:11:45,850
We'll have one on the front and then we'll have one in the controller.

187
00:11:45,970 --> 00:11:48,640
And yes, remember we also have the Mongoose one.

188
00:11:48,790 --> 00:11:52,990
And as a result, and just make sure that we definitely always check for those empty values.

189
00:11:53,320 --> 00:11:55,840
So let's say here, if there is no position.

190
00:11:56,050 --> 00:11:58,960
So this is a state of our I mean, I can right away.

191
00:11:59,170 --> 00:11:59,770
Is that correct?

192
00:12:00,190 --> 00:12:02,860
And the same is going to be for the company.

193
00:12:03,640 --> 00:12:05,950
And I also want to look for job location.

194
00:12:06,430 --> 00:12:09,700
So we're going to go over here and say job creation.

195
00:12:10,060 --> 00:12:13,090
Now I do want to make sure that this one is with the capital case.

196
00:12:13,630 --> 00:12:17,110
And then if that is the case, let's go with this play alert.

197
00:12:17,470 --> 00:12:18,250
Let's invoke it.

198
00:12:18,490 --> 00:12:23,250
And let's right away over time, because what's going to happen over here will go with log online and

199
00:12:23,320 --> 00:12:25,990
we'll go with create and job.

200
00:12:26,200 --> 00:12:30,100
So if all three values are provided, then we're good to go.

201
00:12:30,580 --> 00:12:35,690
Now your next question is probably OK, but I mean, what about the rest of them again?

202
00:12:35,770 --> 00:12:42,270
Keep in mind that these two essentially are select browsers, so there's going to be some kind of I

203
00:12:42,310 --> 00:12:48,190
remember we just set up in a state some kind of default value, and that's the case where we don't need

204
00:12:48,190 --> 00:12:49,030
to worry about them.

205
00:12:49,570 --> 00:12:55,420
There's always going to be some kind of value analysis that out where we want to go back to my project.

206
00:12:55,720 --> 00:13:02,740
Now it's not going to work as far as us providing values here because again, notice we're not actually

207
00:13:02,740 --> 00:13:06,730
updating the state yet, but at least we can try out whether our alert works.

208
00:13:07,090 --> 00:13:09,580
And, you know, I think I forgot to add here.

209
00:13:09,940 --> 00:13:18,100
So let me scroll back down and we want to go on and then click and then that one will be equal to the

210
00:13:18,100 --> 00:13:20,170
handle, submit or handle submit function.

211
00:13:20,560 --> 00:13:21,790
Let's navigate back.

212
00:13:21,790 --> 00:13:26,500
And now let me finally test that out where I should see please provide home hours.

213
00:13:26,860 --> 00:13:35,620
And if I do, that means that we have successfully set up of the main structure for our add job page.