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

2
00:00:00,440 --> 00:00:06,500
And up next, let's set up to select the inputs, one for job status and the other one for job type.

3
00:00:06,650 --> 00:00:12,660
Let's start by hardcoding it in the Add job and then we'll create the component.

4
00:00:12,680 --> 00:00:20,090
So first, let's navigate to the page and still within the div, basically right after the last form

5
00:00:20,090 --> 00:00:20,630
row.

6
00:00:20,870 --> 00:00:22,670
Now let's go with another div.

7
00:00:22,880 --> 00:00:25,490
Like I said, for now we'll just hard code over here.

8
00:00:25,970 --> 00:00:28,880
And this is going to be div with a class of form row.

9
00:00:28,910 --> 00:00:31,010
Then we want to set up the label.

10
00:00:31,980 --> 00:00:35,610
Html4 is going to be job status since that's going to be my ID.

11
00:00:36,570 --> 00:00:38,710
Then we also want to add the class name.

12
00:00:38,730 --> 00:00:41,340
We'll set it equal to form hyphen.

13
00:00:42,200 --> 00:00:42,890
Label.

14
00:00:44,280 --> 00:00:49,890
And as far as the value go with job status, let's save it.

15
00:00:49,890 --> 00:00:55,080
And then right after that, we want to go with select input.

16
00:00:55,110 --> 00:00:57,160
Name will be job status.

17
00:00:57,180 --> 00:01:00,600
So essentially this is what we're going to be sending back to the server.

18
00:01:01,320 --> 00:01:07,020
Since the HTML four in the label is already job status, we might as well use the same one over here

19
00:01:07,020 --> 00:01:07,830
for ID.

20
00:01:08,490 --> 00:01:13,380
We do want to add a class that will be form hyphen.

21
00:01:14,120 --> 00:01:15,260
And select.

22
00:01:15,800 --> 00:01:17,950
And then we want to set up the default value.

23
00:01:17,960 --> 00:01:20,290
So this will be our default option.

24
00:01:20,300 --> 00:01:22,430
So let's go with default value.

25
00:01:22,430 --> 00:01:25,820
And then in this case, we're looking for the job status.

26
00:01:25,820 --> 00:01:28,340
So that's the object coming from the utils.

27
00:01:28,340 --> 00:01:31,970
And as far as the default value, in my case, I'm going to go with pending.

28
00:01:31,970 --> 00:01:35,350
And then here we can either hardcode.

29
00:01:35,480 --> 00:01:41,690
So essentially it's going to look like this if we go with option and then we provide the value or we

30
00:01:41,690 --> 00:01:45,140
can just iterate over and what are we iterating over?

31
00:01:45,140 --> 00:01:51,790
Well, the job status, remember, it's the object with all of the properties that we're interested.

32
00:01:52,070 --> 00:01:56,090
And in order to set it up as an array, same deal.

33
00:01:56,090 --> 00:01:59,720
We want to go here with object dot values.

34
00:01:59,720 --> 00:02:01,940
So now we're accessing only the values.

35
00:02:01,940 --> 00:02:02,750
And you know what?

36
00:02:03,110 --> 00:02:04,580
Let me just quickly showcase.

37
00:02:04,580 --> 00:02:07,550
So again, we're talking about these constants, correct?

38
00:02:07,550 --> 00:02:08,930
So we have job status.

39
00:02:08,930 --> 00:02:10,100
That's our object.

40
00:02:10,100 --> 00:02:12,890
And I'm interested only in these values.

41
00:02:12,890 --> 00:02:14,810
So I want to set it up as an array.

42
00:02:14,810 --> 00:02:18,120
I want to iterate over and then pretty much for every.

43
00:02:18,840 --> 00:02:19,620
Value.

44
00:02:19,650 --> 00:02:23,410
I want to return an option element.

45
00:02:23,430 --> 00:02:25,890
So let's pass here job status.

46
00:02:25,920 --> 00:02:30,840
Now we're iterating over by setting up the map in a callback function.

47
00:02:30,840 --> 00:02:33,120
I'm just going to call this item value.

48
00:02:33,510 --> 00:02:40,140
And then as far as what we want to return, we're going to go again with option element.

49
00:02:40,170 --> 00:02:46,170
We do need to provide a key since we have a list and I'm just going to use the item value.

50
00:02:46,870 --> 00:02:47,380
That.

51
00:02:47,380 --> 00:02:53,970
Also, let's set up the actual value which will be equal to item value to our string basically.

52
00:02:53,980 --> 00:02:56,830
And then I want to display that value here as well.

53
00:02:56,830 --> 00:02:59,650
So I'm going to go with item and value.

54
00:02:59,680 --> 00:03:03,870
Let's navigate back to our project and check it out in the browser.

55
00:03:03,880 --> 00:03:11,500
Notice I have the job status and the default value over here is pending and these are the options that

56
00:03:11,500 --> 00:03:14,680
I have because those are the values in my object.

57
00:03:14,710 --> 00:03:20,080
Now, of course, if I'm going to change this around and if I'm going to go with, let me check what

58
00:03:20,080 --> 00:03:21,200
are the other options?

59
00:03:21,220 --> 00:03:22,840
Interview, for example.

60
00:03:23,230 --> 00:03:25,390
So I'm going to set it up over here.

61
00:03:26,350 --> 00:03:30,220
We refresh and now the default value will be interview.

62
00:03:30,220 --> 00:03:32,080
So this is totally up to you.

63
00:03:32,440 --> 00:03:34,480
I'm just going to go with pending over here.

64
00:03:35,200 --> 00:03:39,340
Now, this is nice, but of course we can.

65
00:03:40,060 --> 00:03:46,720
Place this functionality in the separate component, and that way it's just going to be easier to reuse

66
00:03:46,720 --> 00:03:47,110
it.

67
00:03:47,140 --> 00:03:51,520
So let's start I guess, by grabbing this entire div over here.

68
00:03:51,550 --> 00:03:53,020
Let's cut it out.

69
00:03:53,170 --> 00:03:55,990
We want to go to components first.

70
00:03:56,020 --> 00:04:02,620
We want to create one and we're going to go with form row and select.

71
00:04:03,510 --> 00:04:04,260
Gsx.

72
00:04:05,200 --> 00:04:08,200
Then let's create the component.

73
00:04:09,110 --> 00:04:14,360
And then as far as what we're returning, well, let's just copy and paste and then the same deal.

74
00:04:14,810 --> 00:04:21,079
I want to set up the props we're going to pass in and then we're just going to make all of these dynamic.

75
00:04:21,170 --> 00:04:23,600
So one by one, let's look for name.

76
00:04:24,020 --> 00:04:26,780
We'll also pass in eventually label text.

77
00:04:26,930 --> 00:04:30,440
Now, as far as this one, I'm going to call this list.

78
00:04:30,530 --> 00:04:35,390
So this is what we're going to pass in and then default value.

79
00:04:35,390 --> 00:04:39,510
And I'm just going to set it equal to an empty string.

80
00:04:39,530 --> 00:04:44,520
So essentially this is a default parameter syntax in JavaScript.

81
00:04:44,540 --> 00:04:50,240
So if no value is provided, I'm just going to set it equal to an empty string, which is basically

82
00:04:50,240 --> 00:04:52,340
the alternative that we used over here.

83
00:04:52,430 --> 00:04:57,870
Remember, in here I use default value and if there is no value, I went with empty string.

84
00:04:57,890 --> 00:05:01,220
So this is also a syntax you can use.

85
00:05:01,250 --> 00:05:04,190
Then let's go to our return.

86
00:05:04,190 --> 00:05:05,840
So we have form, row, form, row.

87
00:05:05,840 --> 00:05:09,240
And now let's just make these values dynamic.

88
00:05:09,240 --> 00:05:10,770
And here we're looking for name.

89
00:05:10,770 --> 00:05:12,450
Class stays the same.

90
00:05:13,600 --> 00:05:16,210
Remember we have the label text just in case.

91
00:05:16,390 --> 00:05:19,060
So say if there is some value, we'll use that.

92
00:05:19,060 --> 00:05:20,980
If not, then we're going to go with name.

93
00:05:21,070 --> 00:05:23,290
And then let's go down the list.

94
00:05:23,320 --> 00:05:25,000
This is also equal to name.

95
00:05:25,540 --> 00:05:26,800
Same deal with ID.

96
00:05:27,750 --> 00:05:32,520
It's going to be cool to a name and then default value, well, we'll pass it in.

97
00:05:32,520 --> 00:05:33,080
Correct.

98
00:05:33,090 --> 00:05:35,190
So the default value here as well.

99
00:05:35,310 --> 00:05:39,990
And then instead of again, hardcoding the job status and all that.

100
00:05:40,890 --> 00:05:42,090
I'm just going to change it around.

101
00:05:42,090 --> 00:05:45,960
I'll say that eventually there's going to be a list.

102
00:05:46,240 --> 00:05:49,200
And now let's navigate back to our Or.

103
00:05:49,200 --> 00:05:49,580
You know what?

104
00:05:49,590 --> 00:05:50,700
No, we cannot do that.

105
00:05:50,700 --> 00:05:54,600
Actually, we still need to copy and paste over here.

106
00:05:55,510 --> 00:05:58,150
Then let's call this form row select.

107
00:05:58,180 --> 00:06:00,820
Let me just double check whether we're exporting.

108
00:06:00,820 --> 00:06:02,350
Yep, everything is correct.

109
00:06:02,650 --> 00:06:06,100
So now let me close this one.

110
00:06:07,920 --> 00:06:09,120
And then.

111
00:06:09,920 --> 00:06:10,640
We want to.

112
00:06:11,620 --> 00:06:13,090
Select these two.

113
00:06:14,100 --> 00:06:16,860
Let's call this form row.

114
00:06:17,480 --> 00:06:18,470
And select.

115
00:06:19,140 --> 00:06:25,110
And then we want to navigate to our job and we want to grab that component as well.

116
00:06:26,160 --> 00:06:28,320
So we're going to go with former Select.

117
00:06:29,020 --> 00:06:32,820
Then let's scroll down and let's set up those two components.

118
00:06:32,830 --> 00:06:35,250
So right after the job location.

119
00:06:35,550 --> 00:06:39,540
Let's go with Form row, select, and let's just provide these values.

120
00:06:39,930 --> 00:06:43,980
Let's start here with label text, which is going to be equal to job status.

121
00:06:44,190 --> 00:06:48,540
Then we want to go with name and this will be equal to a job status.

122
00:06:48,540 --> 00:06:57,270
However, in this case I go with camel case, then default value will be equal to my job status and

123
00:06:57,270 --> 00:07:05,400
let's provide again the pending one and then list will be equal to object dot values and job status.

124
00:07:06,080 --> 00:07:12,800
So let's go here with object dot values and then we're looking for job status.

125
00:07:12,800 --> 00:07:13,730
Let's save it.

126
00:07:13,730 --> 00:07:20,630
I just want to close it here and basically let's copy and paste and just change what we've got over

127
00:07:20,630 --> 00:07:21,110
here.

128
00:07:21,110 --> 00:07:26,090
So instead of job status, this will be equal to a job type.

129
00:07:26,300 --> 00:07:29,870
Then of course, we want to change the name here as well.

130
00:07:31,010 --> 00:07:34,180
So that will be equal to a job default value.

131
00:07:34,370 --> 00:07:35,800
So I'm going to be pending.

132
00:07:35,800 --> 00:07:38,350
And actually job status is also not going to be here.

133
00:07:38,350 --> 00:07:42,100
We're going to look for job type dot and then full time.

134
00:07:42,100 --> 00:07:44,890
And then lastly, let's go with.

135
00:07:45,690 --> 00:07:46,980
The job type.

136
00:07:47,690 --> 00:07:51,790
So I want to pass here this object just so I can get the values.

137
00:07:52,580 --> 00:07:55,070
With this in place, we should be done.

138
00:07:55,100 --> 00:07:56,750
Let me again navigate.

139
00:07:57,080 --> 00:07:59,570
Let me log in and check it out.

140
00:07:59,570 --> 00:08:03,170
So this is going to be my ad job setup.

141
00:08:03,560 --> 00:08:05,750
And up next, we're going to.

142
00:08:06,500 --> 00:08:08,010
Work on the action.

143
00:08:08,030 --> 00:08:13,970
Basically, we want to grab all of these values and send it to a server in order to create the job.