1
00:00:00,240 --> 00:00:00,630
All right.

2
00:00:00,660 --> 00:00:07,770
And once we know how we can work with mom and Jess now, it's complete the component of the job component

3
00:00:08,250 --> 00:00:15,420
and will start somewhat interesting where in the app context, actually we want to set up the placeholder

4
00:00:15,420 --> 00:00:16,950
function effectively.

5
00:00:17,160 --> 00:00:18,570
There's not going to be much logic.

6
00:00:18,930 --> 00:00:24,090
We'll just look for the idea and then we'll console.log it with the function name.

7
00:00:24,240 --> 00:00:28,650
Basically, what the function is doing and the reason why I want to do that is because again.

8
00:00:29,790 --> 00:00:35,940
I prefer setting up those placeholder functions because I know that in a few videos, we will attach

9
00:00:35,940 --> 00:00:36,780
that functionality.

10
00:00:37,150 --> 00:00:43,230
So in the job component, won't be able to delete and edit the jump, and we might as well do that right

11
00:00:43,230 --> 00:00:46,080
now so I can get those placeholder functions.

12
00:00:46,380 --> 00:00:48,030
Complete the entire component.

13
00:00:48,360 --> 00:00:53,760
And the only thing I need to do is go back to app context and add the functionality.

14
00:00:54,180 --> 00:00:59,140
And for both of them effectively, they'll be looking for no I.D. for the job.

15
00:00:59,880 --> 00:01:04,970
And yes, in the process, I'll show you where we can get them the first, where we want to do this,

16
00:01:04,980 --> 00:01:11,940
navigate to app context and then right after get jobs, let's set up those two placeholders.

17
00:01:12,090 --> 00:01:14,490
One is going to be four set at a job.

18
00:01:14,850 --> 00:01:16,440
So that's not at a job.

19
00:01:16,980 --> 00:01:19,170
At a job will be a fresh request.

20
00:01:19,650 --> 00:01:26,430
So set at a job is just going to grab the ID of the job and then update all the values that we have

21
00:01:26,430 --> 00:01:27,060
in the state.

22
00:01:27,330 --> 00:01:27,900
And don't worry.

23
00:01:28,260 --> 00:01:31,080
Like I said, we spent an entire video on that.

24
00:01:31,080 --> 00:01:35,430
So for time being, we just want to go, set, edit and job.

25
00:01:35,880 --> 00:01:36,900
We're going to be looking for that.

26
00:01:37,390 --> 00:01:43,890
And as far as the log might just go here and I'm going to go with my template string, let's set.

27
00:01:44,790 --> 00:01:51,810
Added Joe and then Colin, and now it's look forward already so that we clearly know whether I'm running

28
00:01:51,810 --> 00:01:56,850
the correct function now, copy and paste, and this one will be the lead job.

29
00:01:57,100 --> 00:01:59,280
So grimwood over here.

30
00:02:00,710 --> 00:02:07,910
The lead job I'm on the same is going to be in the console.log sort of elite job and then I'm looking

31
00:02:07,910 --> 00:02:08,530
for daddy.

32
00:02:08,810 --> 00:02:10,370
Now we do want to pass them down.

33
00:02:10,850 --> 00:02:11,180
Correct.

34
00:02:11,190 --> 00:02:15,710
So set added job and the lead job as well.

35
00:02:16,400 --> 00:02:17,600
So delete.

36
00:02:17,870 --> 00:02:20,400
And for some reason, I'm giving your suggestion.

37
00:02:20,420 --> 00:02:21,770
Now I have my daily jump.

38
00:02:22,040 --> 00:02:23,630
And now let's take a look at trade me.

39
00:02:24,500 --> 00:02:29,240
So we're pretty much done setting up our placeholders and I'm next in the job.

40
00:02:29,300 --> 00:02:29,630
Yes.

41
00:02:30,020 --> 00:02:31,280
Here's what I want to import.

42
00:02:31,790 --> 00:02:36,810
I want to look for these three icons that are coming from reactor icons.

43
00:02:36,830 --> 00:02:38,660
More specifically, font awesome.

44
00:02:38,900 --> 00:02:41,120
And yes, I don't want to type them out.

45
00:02:41,120 --> 00:02:43,820
So therefore I'll grab them right from the read me.

46
00:02:44,240 --> 00:02:47,060
Then we'll look for a link and I'll show it in a second.

47
00:02:47,060 --> 00:02:47,930
Why one link?

48
00:02:48,320 --> 00:02:49,820
Then use that context?

49
00:02:50,060 --> 00:02:50,390
Why?

50
00:02:50,440 --> 00:02:55,730
Well, because I want to grab these two placeholder functions that I just set up, as well as the styling.

51
00:02:56,000 --> 00:02:59,360
That's why we have the wrapper and then we have the job info.

52
00:02:59,630 --> 00:03:04,700
So I want to discuss the link and job info, and then we'll start working on the component.

53
00:03:05,090 --> 00:03:10,730
Now, as far as the link notes with the added functionality, not only when we will click the edit button,

54
00:03:11,330 --> 00:03:14,240
we will set which item we want to add.

55
00:03:14,240 --> 00:03:20,210
It basically will set the state values and therefore automatically in the ajob.

56
00:03:20,660 --> 00:03:22,610
We'll display them in those inputs.

57
00:03:22,850 --> 00:03:28,940
But also, we want to navigate there and that's why this edit button actually is going to be a React

58
00:03:28,940 --> 00:03:30,020
router downlink.

59
00:03:30,350 --> 00:03:38,810
So once we click notice, navigate to our job and all the values already pre-filled coming from the

60
00:03:38,810 --> 00:03:39,860
job that we want to.

61
00:03:40,190 --> 00:03:41,140
Hopefully this makes sense.

62
00:03:41,150 --> 00:03:43,790
That's why we were setting up that global state.

63
00:03:44,600 --> 00:03:52,460
So I just grabbed daddy and I navigate to the ad job page, which turns into at a job page and I get

64
00:03:52,460 --> 00:03:54,800
all the values directly from the state.

65
00:03:55,100 --> 00:03:58,110
So that is as far as the added.

66
00:03:58,550 --> 00:04:02,130
Now why do we want to have a separate component, the job in full?

67
00:04:02,510 --> 00:04:04,520
Well, because take a look at these ones.

68
00:04:04,850 --> 00:04:11,240
So in here, how the icon I have next, I'm technically yes, we can set it up right there in the job

69
00:04:11,240 --> 00:04:17,390
component, but I just thought that makes it a little bit more sense if we set this up in separate components.

70
00:04:17,480 --> 00:04:22,220
And as a quick set out, we'll actually split the job component into videos.

71
00:04:22,610 --> 00:04:26,330
And when it comes to the job info, we'll work on that one in the next one.

72
00:04:26,600 --> 00:04:29,390
So let's navigate back and grab my imports.

73
00:04:30,340 --> 00:04:35,800
Because there's no point you retype them one by one, they're going to let me select them with me copy.

74
00:04:36,130 --> 00:04:37,910
I'm going to go to job now.

75
00:04:37,930 --> 00:04:43,330
I did not include the moment because my assumption is that you did follow along with previous video,

76
00:04:43,720 --> 00:04:46,300
and therefore you should already have it now.

77
00:04:46,330 --> 00:04:51,490
We'll leave this code as it is, meaning we already have format of date.

78
00:04:51,730 --> 00:04:52,870
So we're good to go.

79
00:04:53,320 --> 00:04:56,830
But the first thing that I want to do is pull out all the hours.

80
00:04:57,370 --> 00:05:01,600
So not only the company and created that I want to get the underscore idea.

81
00:05:01,930 --> 00:05:04,540
I want to get the position and rest of them.

82
00:05:04,810 --> 00:05:10,420
And again, if you need to double check where that, please go to state, look for jobs and then more

83
00:05:10,420 --> 00:05:13,930
specifically, each object and you'll see the properties order.

84
00:05:14,350 --> 00:05:15,250
So I'm going to go with it.

85
00:05:15,940 --> 00:05:19,210
Then I'm looking for a position here of that.

86
00:05:19,210 --> 00:05:25,330
I want to get the company, which I already have when we want to look for a job location.

87
00:05:25,870 --> 00:05:29,460
Also, we want to go with a job type created out.

88
00:05:29,470 --> 00:05:32,800
And then lastly, we have the status for a job.

89
00:05:33,710 --> 00:05:38,870
We pull out all of ours, and then, like I said, the date will stay exactly like it is.

90
00:05:39,290 --> 00:05:44,930
But I do want to grab those two placeholder functions we just set up and where is it coming from?

91
00:05:44,940 --> 00:05:46,340
It's coming from the context, correct?

92
00:05:46,730 --> 00:05:50,720
So we're going to go sit at it and a job.

93
00:05:51,650 --> 00:05:58,500
The first one and the lead job, and both of them are coming from huge context, and we're just invoke

94
00:05:58,500 --> 00:06:00,990
it now as far as the return.

95
00:06:01,230 --> 00:06:02,100
Well, let's take a look.

96
00:06:02,700 --> 00:06:09,290
So how the various other functions have the functionality to format the date and for the time being,

97
00:06:09,300 --> 00:06:15,150
like I said, we're not going to focus on the center, on the content center.

98
00:06:15,150 --> 00:06:17,640
So that is coming up notice over here.

99
00:06:17,670 --> 00:06:22,980
There's going to be a content center where the job info component, which we're going to set up in next

100
00:06:22,980 --> 00:06:23,310
video.

101
00:06:23,610 --> 00:06:29,250
So for the time being, I just want to create the header and line inside of the content will place a

102
00:06:29,250 --> 00:06:37,110
footer with our two buttons and one of them is going to be like a manual focus on this one later.

103
00:06:37,560 --> 00:06:39,520
So let's go back to the job.

104
00:06:39,550 --> 00:06:39,960
Yes.

105
00:06:40,410 --> 00:06:42,330
First, we want to get some styling correct.

106
00:06:42,720 --> 00:06:44,220
So let's go here with the wrapper.

107
00:06:45,250 --> 00:06:48,670
Then more and more of these 200 fires, we're not going to need them.

108
00:06:49,060 --> 00:06:52,390
And let's start first by setting up the main icon.

109
00:06:52,780 --> 00:06:56,560
Now what is the mania in Congress one over here and essentially the way I'll set it up?

110
00:06:56,890 --> 00:07:01,810
There's some kind of styling, and I'll just grab the first character of the company string.

111
00:07:01,820 --> 00:07:05,350
So let's go with the main and let's call this icon.

112
00:07:05,720 --> 00:07:11,560
And then inside of it, we're going to go with company company Dot and then character at.

113
00:07:12,470 --> 00:07:19,100
Like, so let's pass in the zero and then I'll set up the rest of them, meaning whatever I have in

114
00:07:19,100 --> 00:07:23,390
the header and then I'll show you in the browser and I'll sign up actually forgot to add a header.

115
00:07:23,420 --> 00:07:28,070
So first we want to get the header and then inside of the header, we'll have all the data.

116
00:07:28,430 --> 00:07:34,340
So first one is the icon and right next to it will have a div with following things.

117
00:07:34,640 --> 00:07:41,240
First, I want to have a hang fire with a position again that is coming from my props.

118
00:07:42,310 --> 00:07:44,440
And then we want to go with company.

119
00:07:44,480 --> 00:07:47,380
No company is going to be sitting here in the paragraph.

120
00:07:47,980 --> 00:07:51,610
So let's say here's a company now, let's save it.

121
00:07:51,970 --> 00:07:53,770
And once I navigate through the browser.

122
00:07:54,140 --> 00:07:55,810
Well, this is what we should see.

123
00:07:56,080 --> 00:07:58,510
And then we'll use the first letter of the company.

124
00:07:59,180 --> 00:08:02,170
And here is the role in heading five.

125
00:08:02,530 --> 00:08:07,300
And then as far as the company is going to be a paragraph so not scheduled for later.

126
00:08:07,820 --> 00:08:10,690
Well, then we want to go with Dave with a class of content.

127
00:08:11,880 --> 00:08:19,290
And then inside of it, we're going to place a comment here, so content and not center later.

128
00:08:19,590 --> 00:08:24,960
So this one will add later and now let's go with water and they're all set up our actions.

129
00:08:25,600 --> 00:08:27,300
So let's set up the four element.

130
00:08:27,660 --> 00:08:32,820
And then there's going to be a there with a actions glass and two buttons.

131
00:08:33,299 --> 00:08:36,000
So the first one will be set at a jump.

132
00:08:36,270 --> 00:08:38,429
But this is going to be the lynk1.

133
00:08:38,730 --> 00:08:44,910
And since we're importing link component from the reactor Rotterdam, we can do over here or we can

134
00:08:44,910 --> 00:08:45,870
go with Link.

135
00:08:46,140 --> 00:08:46,530
Correct.

136
00:08:46,980 --> 00:08:52,650
Van, we'll set up where we want to navigate in the second for time being, let just go to class name

137
00:08:53,130 --> 00:08:54,270
and then beaten.

138
00:08:55,280 --> 00:08:58,790
An added burden, so this is just for styling.

139
00:08:59,060 --> 00:09:01,190
Now, instead of dealing, what do we want to pass in?

140
00:09:01,310 --> 00:09:04,610
Well, I just say it, so that's the first button.

141
00:09:05,120 --> 00:09:08,990
Now second one will go with button element.

142
00:09:09,350 --> 00:09:12,650
Then we want to set up type, which is going to be equal to a button.

143
00:09:13,010 --> 00:09:15,060
After that, we want to set up some classes.

144
00:09:15,080 --> 00:09:20,600
So let's say here, class name, I'm looking for button and then delete button.

145
00:09:21,030 --> 00:09:25,130
And eventually there's going to be also the on click one number for us.

146
00:09:25,130 --> 00:09:26,090
Set up the on click.

147
00:09:26,450 --> 00:09:29,450
We'll just go here and let's say delete.

148
00:09:29,900 --> 00:09:34,400
And now, which function do I want to run when I click on edit button?

149
00:09:34,760 --> 00:09:35,390
Well, this one.

150
00:09:36,280 --> 00:09:41,910
Now, the one thing, though, we need to remember that in the Arab context, what are we looking in

151
00:09:41,930 --> 00:09:46,300
the function we're looking for daddy now, where is that sitting sitting over here?

152
00:09:46,570 --> 00:09:47,550
That's our idea.

153
00:09:47,860 --> 00:09:53,230
And we also need to keep in mind that we'll have to use that Arab function since now we're passing arguments

154
00:09:53,770 --> 00:09:55,390
and therefore we don't want to invoke it.

155
00:09:55,660 --> 00:09:56,240
There are none.

156
00:09:56,260 --> 00:09:57,970
We want to invoke it when we actually click.

157
00:09:58,390 --> 00:10:01,010
So let's go here with and click online.

158
00:10:01,070 --> 00:10:03,010
Like I said, who passed in our Arab function?

159
00:10:03,430 --> 00:10:05,200
And then let's just go delete.

160
00:10:05,660 --> 00:10:08,020
And I'm looking for the lead job.

161
00:10:08,880 --> 00:10:14,310
And as far as what do I want a person want to pass in the underscore, are they now?

162
00:10:14,520 --> 00:10:15,600
Quick suggestion.

163
00:10:15,990 --> 00:10:19,230
If you want to give it an alias here, you can definitely do so.

164
00:10:19,560 --> 00:10:22,830
Basically, it's going to look something like this where you can just pass in there.

165
00:10:22,950 --> 00:10:24,750
But in my case, I'm not going to do that.

166
00:10:24,870 --> 00:10:27,030
But yes, that is definitely an option.

167
00:10:27,420 --> 00:10:30,060
So that should do it for our daily job.

168
00:10:30,870 --> 00:10:32,220
Now what about the other job?

169
00:10:32,520 --> 00:10:34,500
Well, first of all, it is a link, correct?

170
00:10:34,530 --> 00:10:35,940
So where do we want to navigate?

171
00:10:36,180 --> 00:10:37,690
Well, it's going to prop.

172
00:10:38,130 --> 00:10:42,570
And what is the page matters ad and then hyphen job?

173
00:10:42,990 --> 00:10:46,230
Now another thing that we want to do, we want to have this on click.

174
00:10:47,100 --> 00:10:48,600
The function, though, is going to be different.

175
00:10:49,140 --> 00:10:54,180
I grew up in paste and that instead of the lead job, when are we going to pass and we're here, we'll

176
00:10:54,180 --> 00:10:57,240
say set, edit and job.

177
00:10:57,630 --> 00:11:01,410
And once we navigate to the big screen right now, this is what we should see.

178
00:11:01,980 --> 00:11:04,830
So that is going to be our header and then we have the footer.

179
00:11:05,190 --> 00:11:11,910
And then I'm more interested in what is happening in the console and whether we can navigate to the

180
00:11:12,180 --> 00:11:13,440
add job page.

181
00:11:13,650 --> 00:11:15,000
So let's take a look at the console.

182
00:11:15,510 --> 00:11:19,200
And then once I click on Edit, Yup, Master, here the jump.

183
00:11:19,470 --> 00:11:21,620
And then that is going to be that unique.

184
00:11:22,260 --> 00:11:28,650
So I know that functionality works online when it comes to edit, let's click and check it out.

185
00:11:28,920 --> 00:11:33,030
So first of all, notice we end up in our job, which is just awesome.

186
00:11:33,300 --> 00:11:37,770
We just need to add the functionality and also we have the console work.

187
00:11:38,340 --> 00:11:45,240
So with this, we're done with the main structure when it comes to our job component.

188
00:11:45,630 --> 00:11:51,090
So now we just need to add that extra info here in between the header and for.