1
00:00:00,020 --> 00:00:00,410
All right.

2
00:00:00,410 --> 00:00:02,750
And up next, let's work on the job component.

3
00:00:02,780 --> 00:00:11,210
And the first thing we want to do is to install the JS library, which is going to allow us format the

4
00:00:11,210 --> 00:00:11,780
date.

5
00:00:11,810 --> 00:00:14,930
You see, we nicely get back from Mongo Createdat.

6
00:00:14,930 --> 00:00:20,630
But if you take a look at the value which by the way will log in a second, you'll see that it's not

7
00:00:20,630 --> 00:00:26,240
particularly user friendly and therefore we'll use the de JS library.

8
00:00:26,450 --> 00:00:33,650
And since the format we want to set up is a bit more advanced, we'll also need to do a little bit more

9
00:00:33,650 --> 00:00:40,580
work where not only we're importing from JS after we have installed, but also we want to grab the advanced

10
00:00:40,580 --> 00:00:43,050
format and then extend it.

11
00:00:43,070 --> 00:00:47,470
Again, there's some default format they provide right out of the box.

12
00:00:47,480 --> 00:00:53,600
But since our is going to be a bit more custom, that's why we need to add this extra logic.

13
00:00:53,620 --> 00:00:54,320
And you know what?

14
00:00:54,320 --> 00:01:00,840
Let's also set up a job component, because if you take a look at the complete project, you'll notice

15
00:01:00,840 --> 00:01:06,360
this repeating pattern where we provide the icon as well as the text.

16
00:01:06,360 --> 00:01:10,910
And I just thought that it makes sense to set up a separate component for that.

17
00:01:10,920 --> 00:01:15,080
So for starters, let's go to components and let's create one more.

18
00:01:15,090 --> 00:01:18,570
And in this case it's going to be called job info.

19
00:01:18,810 --> 00:01:20,400
JS six.

20
00:01:20,910 --> 00:01:27,510
Now as far as the return, I'm just going to go with some small heading over here, let's say heading

21
00:01:27,510 --> 00:01:33,490
four and then yes, I'll pretty much right away grab all of these imports.

22
00:01:33,540 --> 00:01:35,820
It's just going to be easier to set up everything.

23
00:01:36,030 --> 00:01:39,930
Let's navigate back to the job and let's go line by line.

24
00:01:39,930 --> 00:01:41,670
So we're grabbing here.

25
00:01:41,670 --> 00:01:44,510
Three icons from the font awesome library.

26
00:01:44,520 --> 00:01:47,010
Then we also want to grab the link and the form.

27
00:01:47,010 --> 00:01:47,850
And you know what?

28
00:01:48,030 --> 00:01:50,070
We can probably combine them over here.

29
00:01:50,660 --> 00:01:53,750
Now, of course, in your Readme, everything should be correct.

30
00:01:54,050 --> 00:01:56,480
Let me actually fix it right now before I forget.

31
00:01:56,480 --> 00:02:03,800
So again, we already have the link one, so we don't need a separate import for the form.

32
00:02:05,210 --> 00:02:07,850
Also, we have over here the wrapper.

33
00:02:07,940 --> 00:02:13,970
This is coming from wrappers and we are more specifically looking for job and then job info.

34
00:02:14,000 --> 00:02:20,360
The component we just created and then import for the JS and like I said, advanced format and we want

35
00:02:20,360 --> 00:02:21,020
to extend.

36
00:02:21,020 --> 00:02:24,950
So they extend and then pass in the advanced format.

37
00:02:25,160 --> 00:02:30,800
Then remember when we're iterating over, we're passing all of the properties, correct?

38
00:02:30,800 --> 00:02:33,140
So now let's destructure them one by one.

39
00:02:33,140 --> 00:02:39,320
So first we're going to start with position ID, then company.

40
00:02:39,680 --> 00:02:45,290
Then we want to go with job location after that job type.

41
00:02:45,950 --> 00:02:48,200
Then we want to go with created at.

42
00:02:48,970 --> 00:02:52,690
And lastly, we're going to go with job status.

43
00:02:52,990 --> 00:02:57,940
Let's start by logging the createdat just so we're on the same page.

44
00:02:57,940 --> 00:02:59,170
So Createdat.

45
00:02:59,200 --> 00:03:06,130
Yes, it's awesome that we can get this value, but like I said, it's not going to be particularly

46
00:03:06,130 --> 00:03:07,240
user friendly.

47
00:03:07,420 --> 00:03:13,180
Notice we'll have this value over here and therefore we'll right away use our library.

48
00:03:13,180 --> 00:03:20,710
So we'll create a new variable and I'm going to go with const date is equal to day.

49
00:03:20,770 --> 00:03:24,700
So that's my import we want to pass here the createdat.

50
00:03:24,820 --> 00:03:32,680
So the value coming from mongo and then format and then we just need to come up with the value and in

51
00:03:32,680 --> 00:03:34,270
my case I'm going to go with this one.

52
00:03:34,270 --> 00:03:37,980
So I'm going to go with month day and then the year.

53
00:03:37,990 --> 00:03:42,910
If you want to find out more options, please reference the docs, of course.

54
00:03:42,910 --> 00:03:45,340
And then here, let's go with wrapper.

55
00:03:45,940 --> 00:03:48,600
So this is what we're returning inside of it.

56
00:03:48,610 --> 00:03:54,580
We're going to go with Header and then let's set up a div with the main icon.

57
00:03:54,580 --> 00:03:56,670
So what are we talking about over here?

58
00:03:56,680 --> 00:03:57,460
Well, this one.

59
00:03:57,460 --> 00:04:03,040
So essentially I'll just use the first character and I believe we're going to use the company for that.

60
00:04:03,040 --> 00:04:05,260
So let's go with Main Icon.

61
00:04:06,450 --> 00:04:08,340
Run as far as the value.

62
00:04:08,370 --> 00:04:12,060
Let's go with company and then character at.

63
00:04:12,390 --> 00:04:19,620
Remember, it's a string and I just want to grab the first character and therefore I just run this method.

64
00:04:19,649 --> 00:04:21,540
Then we want to set up the info.

65
00:04:21,540 --> 00:04:24,530
So this will be for position on the company.

66
00:04:24,540 --> 00:04:29,880
So info div and then inside of it let's set up a heading five with position.

67
00:04:31,430 --> 00:04:33,440
And then also let's set up the company.

68
00:04:33,440 --> 00:04:35,990
So we're going to have a paragraph here.

69
00:04:36,630 --> 00:04:39,450
And we'll set it equal to a company.

70
00:04:39,780 --> 00:04:44,520
Then we have a content and content center.

71
00:04:44,520 --> 00:04:48,210
So yes, the structure is going to be quite nested.

72
00:04:48,210 --> 00:04:49,440
So first one is the header.

73
00:04:49,440 --> 00:04:50,250
And you know what?

74
00:04:50,430 --> 00:04:53,280
In this case we will switch back to.

75
00:04:53,840 --> 00:04:57,560
The browser because I want to make sure that everything is correct.

76
00:04:57,560 --> 00:05:03,680
And again, this is going to be our header where we have that first character as well as the position

77
00:05:03,680 --> 00:05:06,350
and company, and now we want to work on the content.

78
00:05:06,350 --> 00:05:08,330
So let's navigate back.

79
00:05:08,330 --> 00:05:13,790
We're looking for another div, we're going to add the class of content and then.

80
00:05:14,430 --> 00:05:16,590
The content center.

81
00:05:16,590 --> 00:05:23,880
And here, let's set up that job info, three instances of that job info component.

82
00:05:23,880 --> 00:05:25,830
And for now, let's just pass them in.

83
00:05:25,830 --> 00:05:32,550
So first I'm going to pass in the icon and second is going to be the actual data.

84
00:05:32,550 --> 00:05:36,330
So for starters, we're going to go with job and location.

85
00:05:36,330 --> 00:05:37,740
Let me close it here.

86
00:05:37,770 --> 00:05:44,160
Again, we're not going to render anything since we don't have the logic and job info, but I want to

87
00:05:44,190 --> 00:05:45,360
nicely set it up.

88
00:05:45,360 --> 00:05:50,400
And then of course, at the end of this video, we'll actually work on this component as well.

89
00:05:50,400 --> 00:05:56,970
So we're looking for this icon and then let's copy and paste and we just want to change some values.

90
00:05:56,970 --> 00:05:59,640
So the second one is going to be our date.

91
00:06:00,000 --> 00:06:05,310
And then the third value will be a job type.

92
00:06:06,070 --> 00:06:10,810
And as far as the icon in this case, we're going to go with the calendar one.

93
00:06:11,290 --> 00:06:16,110
And then the last one over here is going to be a briefcase again in the browser.

94
00:06:16,120 --> 00:06:19,290
It's just going to be that heading four or whatever we're passing in.

95
00:06:19,300 --> 00:06:22,180
We still need to destructure these props, of course.

96
00:06:22,300 --> 00:06:29,050
And then at the very end, inside of this div, the content center, there's going to be another one.

97
00:06:29,410 --> 00:06:32,710
So essentially I'm going to go with a div.

98
00:06:33,300 --> 00:06:36,370
And here I'm going to have some dynamic classes.

99
00:06:36,390 --> 00:06:40,720
So first, let me set up the logic and then I'll show you what I'm talking about.

100
00:06:40,740 --> 00:06:43,770
So for starters, we want to go here with the curlies.

101
00:06:43,860 --> 00:06:46,480
Then we're going to go with the template string.

102
00:06:46,500 --> 00:06:51,360
So this will be a generic class, which is going to get added to all of them.

103
00:06:51,360 --> 00:06:55,170
And I'll also pass here the job status value.

104
00:06:55,500 --> 00:07:02,820
And lastly, let's close it and let's actually render the job status.

105
00:07:04,350 --> 00:07:05,390
That is over here.

106
00:07:05,390 --> 00:07:07,370
And essentially the idea is following.

107
00:07:07,370 --> 00:07:13,460
So there's a generic class for all of the badges, which just adds the main styles for those badges.

108
00:07:13,460 --> 00:07:19,370
But then when it comes to a background color as well as the color, this is going to be dynamic.

109
00:07:19,370 --> 00:07:22,130
So if the job is pending, we're going to have one color.

110
00:07:22,130 --> 00:07:24,950
If it's declined, then it's going to be another one.

111
00:07:25,070 --> 00:07:29,090
And if I believe what was the third one, I already forgot.

112
00:07:29,090 --> 00:07:32,090
Let me take a look at the utils constants.

113
00:07:32,360 --> 00:07:35,300
If it's interview, then of course it's going to be a different value.

114
00:07:35,330 --> 00:07:37,910
Now, where are we getting those values from?

115
00:07:37,910 --> 00:07:41,330
Well, if we take a look at the index CSS, check it out.

116
00:07:41,330 --> 00:07:45,110
So these are all the classes we're going to use.

117
00:07:45,140 --> 00:07:51,560
Again, the main one over here, the status one is just going to add the general style.

118
00:07:51,560 --> 00:07:56,000
So if let's say I'm going to remove this job status, you'll notice that.

119
00:07:56,730 --> 00:07:58,920
Basically it's going to look something like this.

120
00:07:58,920 --> 00:08:04,230
And then if we add that dynamic one, that's where we add those values.

121
00:08:04,230 --> 00:08:10,320
So essentially, if I'm going to remove this value and instead of hard coding, I'm going to go here,

122
00:08:10,320 --> 00:08:11,850
for example, with.

123
00:08:12,650 --> 00:08:14,990
Interview, you'll notice different styles.

124
00:08:14,990 --> 00:08:21,680
So if we go here with declined and of course it's going to look even more different.

125
00:08:21,680 --> 00:08:28,820
But since job status is dynamic, essentially it's our variable with those three potential values.

126
00:08:28,820 --> 00:08:30,860
That's why we pass it over here.

127
00:08:30,890 --> 00:08:32,299
Hopefully that is clear.

128
00:08:32,299 --> 00:08:39,169
And then at the very end still within this content div, but outside of the content center, we want

129
00:08:39,169 --> 00:08:43,940
to set up a footer element and we'll add here a class name of actions.

130
00:08:43,940 --> 00:08:47,060
So class name actions and let's set up two things.

131
00:08:47,060 --> 00:08:48,800
We're going to have a link.

132
00:08:49,530 --> 00:08:54,700
Back to the edit page and also a form with delete button.

133
00:08:54,720 --> 00:09:01,920
Now there's going to be no logic, so essentially we're just setting it up so the job component is complete,

134
00:09:01,920 --> 00:09:04,800
but we'll work on these things a little bit later.

135
00:09:04,800 --> 00:09:07,290
So for starters, let's get a link again.

136
00:09:07,380 --> 00:09:08,610
Nothing is going to happen.

137
00:09:08,610 --> 00:09:10,500
We're not going to navigate anywhere.

138
00:09:10,500 --> 00:09:17,070
We haven't set up any of this logic yet and therefore we're just going to go with button edit, BTN

139
00:09:17,070 --> 00:09:19,980
And then as far as the value, we will write over here.

140
00:09:19,980 --> 00:09:23,280
Edit And the second thing is going to be our form.

141
00:09:23,280 --> 00:09:26,640
So we're going to go with form inside of the form.

142
00:09:26,640 --> 00:09:28,800
It's simply going to be a button.

143
00:09:29,340 --> 00:09:32,970
And more specifically, we're looking for submit button.

144
00:09:32,970 --> 00:09:35,040
Then let's add some classes here.

145
00:09:35,730 --> 00:09:37,470
So class name BTN.

146
00:09:37,500 --> 00:09:39,300
Delete BTN.

147
00:09:39,300 --> 00:09:43,290
And as far as the value, we're going to go over here with delete.

148
00:09:43,290 --> 00:09:46,650
So you should see these two buttons over here.

149
00:09:46,650 --> 00:09:50,940
And I guess at the very end, let's work on that job info.

150
00:09:51,060 --> 00:09:51,900
Remember.

151
00:09:52,600 --> 00:09:55,590
Essentially we're passing these two props over here.

152
00:09:55,600 --> 00:09:57,770
So now let's just navigate here.

153
00:09:57,790 --> 00:09:59,500
We want to grab the wrapper.

154
00:09:59,510 --> 00:10:01,660
Basically, we want to grab the styles.

155
00:10:01,960 --> 00:10:07,870
And in order to do that, we are just looking for wrapper, more specifically, job info.

156
00:10:08,630 --> 00:10:12,440
And then when it comes to return, let's just set up the wrapper.

157
00:10:13,500 --> 00:10:14,980
We have two props here.

158
00:10:15,000 --> 00:10:16,430
First one is the icon.

159
00:10:16,440 --> 00:10:18,180
Second one is the text.

160
00:10:18,300 --> 00:10:23,040
And then inside of this job info, we want to set up the span.

161
00:10:23,070 --> 00:10:27,150
We want to add a class name, job hyphen, icon.

162
00:10:27,300 --> 00:10:31,530
And then, of course, we want to render it on the same deal is going to be for text.

163
00:10:31,530 --> 00:10:33,300
We just want to change some values here.

164
00:10:33,300 --> 00:10:36,900
So instead of job icon, we're going to go with text.

165
00:10:37,670 --> 00:10:40,040
And then same deal over here.

166
00:10:40,310 --> 00:10:41,960
And with this in place.

167
00:10:42,950 --> 00:10:45,260
Our job component is complete.

168
00:10:45,590 --> 00:10:48,620
And up next, we can work on the optional CSS.