1
00:00:00,750 --> 00:00:03,900
And as far as the jobs container, here's what we want to do.

2
00:00:04,150 --> 00:00:09,870
Like I said, we want to get the user app context since we're going to be getting all of these things

3
00:00:09,870 --> 00:00:10,410
from the state.

4
00:00:10,650 --> 00:00:17,300
So get jobs function, which will invoke the moment the jobs container is rendered.

5
00:00:17,310 --> 00:00:19,410
And yes, eventually we'll add more things here.

6
00:00:19,740 --> 00:00:25,170
Once we set up these search, but not for now at the moment, is just going to be on the initial render

7
00:00:25,470 --> 00:00:25,940
when we go.

8
00:00:25,980 --> 00:00:30,360
Jobs is loading page and total jobs again page.

9
00:00:30,360 --> 00:00:36,510
We technically won't use right now, but I write we want to set it up and then I have the loading,

10
00:00:36,510 --> 00:00:38,070
which will create in a second.

11
00:00:38,490 --> 00:00:41,730
So this is going to be a separate component when we have job.

12
00:00:42,630 --> 00:00:46,230
Which effectively will be that component that displays that single jump.

13
00:00:46,500 --> 00:00:51,600
And yes, there is also a rapper 40 jobs container.

14
00:00:52,050 --> 00:00:55,950
And before we go any further, I've just set up the loading.

15
00:00:55,950 --> 00:01:01,020
Otherwise once I copy and paste the imports, the whole thing is going to go bananas.

16
00:01:01,470 --> 00:01:06,220
So let me go to components, then I want to go with loading jobs.

17
00:01:06,660 --> 00:01:07,500
And here.

18
00:01:08,500 --> 00:01:10,570
We're not going to get any rappers.

19
00:01:10,940 --> 00:01:13,060
And we're also not going to export.

20
00:01:13,150 --> 00:01:17,680
So this is going to stay local and the way we'll set it up was, say Loading.

21
00:01:18,010 --> 00:01:19,420
So that's going to be my component.

22
00:01:19,780 --> 00:01:24,580
And eventually, I will look for a prop for the center and you'll see in the second one.

23
00:01:24,880 --> 00:01:27,250
But for the time being, let's just go here with a return.

24
00:01:27,590 --> 00:01:28,780
Let's turn a there.

25
00:01:29,350 --> 00:01:30,640
So I'm going to go here with there.

26
00:01:30,970 --> 00:01:38,680
And if you take a look at the CSIS, the global sources, you'll find loading and unloading center now

27
00:01:38,680 --> 00:01:38,980
for hour.

28
00:01:39,010 --> 00:01:45,100
I just want to showcase the loading one and then I'll showcase why do we want to grab the problem?

29
00:01:45,490 --> 00:01:48,970
So let's just set it up here as a class name.

30
00:01:50,000 --> 00:01:53,450
So class and the name and for time being.

31
00:01:53,800 --> 00:02:00,560
We're just going to go with loading and you'll see that effectively with the help of SS, we just have

32
00:02:00,560 --> 00:02:01,940
the loading spinner.

33
00:02:02,370 --> 00:02:07,250
Well, then let's go with our export, then default, and we're looking for the loading.

34
00:02:07,760 --> 00:02:12,530
And now I can go back to the read me in, like I said, in order to speed that up.

35
00:02:12,530 --> 00:02:18,860
Oh, but it was going to go with my imports or copy them and not in the jobs container.

36
00:02:19,280 --> 00:02:20,870
Let's set everything up.

37
00:02:20,870 --> 00:02:28,310
Let's say it mean hopefully nothing is going to break and we'll get to go so well is in place now.

38
00:02:28,460 --> 00:02:30,590
Grab those things from the state.

39
00:02:30,920 --> 00:02:33,650
In this case, we're talking about get jobs.

40
00:02:33,830 --> 00:02:41,090
That's the function of jobs that is loading one page and then total jobs.

41
00:02:41,780 --> 00:02:47,300
Sir, how many jobs we have total now, all of that is coming with use and context.

42
00:02:47,490 --> 00:02:48,560
OK, awesome.

43
00:02:48,590 --> 00:02:50,840
And then let's right away set up the use effect.

44
00:02:51,350 --> 00:02:58,490
So in this case, I'm going to say once of the component, meaning the jobs component renders, here's

45
00:02:58,490 --> 00:02:59,150
what I want to do.

46
00:02:59,530 --> 00:03:01,400
Want to go and get jobs.

47
00:03:01,700 --> 00:03:04,450
And then let's invoke it now.

48
00:03:04,460 --> 00:03:05,930
If you want, we can test that out.

49
00:03:06,290 --> 00:03:12,230
But for the time being, I just want to showcase how the lowering is going to work effectively.

50
00:03:12,650 --> 00:03:17,390
Once you invoke this one, yes, you'll again see those updates in the state.

51
00:03:17,810 --> 00:03:20,020
So for now, let's just go here with diff.

52
00:03:20,400 --> 00:03:21,650
Eventually, we'll set up the wrapper.

53
00:03:21,650 --> 00:03:28,200
Don't worry, but let's just add here right now the loading loading.

54
00:03:28,250 --> 00:03:29,270
That's my component.

55
00:03:29,630 --> 00:03:33,620
And what you'll notice as I get jobs is not a function.

56
00:03:34,010 --> 00:03:41,670
And yes, of course, because I wasn't particularly great in the previous videos and I didn't export

57
00:03:41,670 --> 00:03:41,840
that.

58
00:03:42,200 --> 00:03:42,770
My apologies.

59
00:03:42,770 --> 00:03:49,790
Let's go back to context and we're going to go over here with get jobs and we want to pass in the function.

60
00:03:50,240 --> 00:03:56,570
And you know what, I'll actually update or read me as well, just so you don't make that mistake.

61
00:03:57,080 --> 00:04:01,850
So let me go to get jobs and have the use effect.

62
00:04:02,150 --> 00:04:04,430
Let me add here that value.

63
00:04:05,270 --> 00:04:09,200
And let's say that will pass in the get jobs.

64
00:04:09,380 --> 00:04:14,700
So however, when you are looking at your enemy, you're sure now that you need to pass in the good

65
00:04:14,720 --> 00:04:16,579
jobs to invoke it, OK?

66
00:04:16,790 --> 00:04:17,540
And now notice.

67
00:04:17,930 --> 00:04:20,450
So that's going to be my loading spinner.

68
00:04:21,370 --> 00:04:24,910
Now, the thing is, I actually want it in the center more.

69
00:04:26,170 --> 00:04:28,870
Once I actually search for something, I want it in the center.

70
00:04:29,330 --> 00:04:32,200
And the way we can do that, I can just add an extra glass.

71
00:04:32,530 --> 00:04:38,860
Now I don't want always a loading spinner to be in the center and therefore will set it up as a prop.

72
00:04:39,250 --> 00:04:42,640
I'll say that if the prop exists, awesome allowed the class.

73
00:04:42,640 --> 00:04:47,260
If not, that will just display the default one.

74
00:04:47,270 --> 00:04:48,580
So let's go back to loading.

75
00:04:49,060 --> 00:04:51,420
Let's check for the center prop.

76
00:04:51,700 --> 00:04:56,440
And now, instead of just loading, let's set up our usual turning operator.

77
00:04:56,740 --> 00:05:00,130
So if the center is true, then we want to go with loading.

78
00:05:00,660 --> 00:05:02,500
Believe that was the name of the class.

79
00:05:03,310 --> 00:05:06,460
If it is loading online, we want to go with loading.

80
00:05:06,940 --> 00:05:11,950
Again, if you want to take a look at CIUSSS, please go to the emergency, assess the global one.

81
00:05:12,250 --> 00:05:16,000
And that is going to be loading if the center is false.

82
00:05:16,360 --> 00:05:19,180
Now, if we go back, it should be in center.

83
00:05:19,570 --> 00:05:25,540
And since it is now I can navigate back to my jobs container and now we can start setting up some kind

84
00:05:25,540 --> 00:05:26,290
of functionality.

85
00:05:26,680 --> 00:05:30,070
And the first thing that I want to check is whether we are loading.

86
00:05:30,490 --> 00:05:36,070
So in the complete application, you'll notice that we only display this one if we're loading and then

87
00:05:36,070 --> 00:05:38,170
I'm not displaying the jobs, correct?

88
00:05:38,470 --> 00:05:40,510
So let's come up with our first condition.

89
00:05:40,950 --> 00:05:42,660
Let's see if we are loading.

90
00:05:42,670 --> 00:05:43,480
What do we want to do?

91
00:05:43,780 --> 00:05:44,860
Well, we want our turn.

92
00:05:44,860 --> 00:05:45,670
We want to return.

93
00:05:46,000 --> 00:05:46,540
Loading.

94
00:05:46,750 --> 00:05:48,550
And then let's use that center one.

95
00:05:48,550 --> 00:05:51,640
So center or here and then let's close it.

96
00:05:52,030 --> 00:05:53,710
So this is only if we're launching.

97
00:05:53,710 --> 00:05:57,580
So now, of course, I can remove it from my straight up return.

98
00:05:57,970 --> 00:06:06,610
And then also, I have if I want to check if the length is zero, meaning if there are no jobs again,

99
00:06:06,850 --> 00:06:08,290
this is not going to be an error.

100
00:06:09,100 --> 00:06:11,440
It's perfectly fine to have an empty array.

101
00:06:11,830 --> 00:06:14,020
That doesn't mean that there's something wrong with our request.

102
00:06:14,380 --> 00:06:15,880
And why do I want to display all here?

103
00:06:16,150 --> 00:06:19,870
Well, I'm just going to go with no jobs to display as far as the text.

104
00:06:20,140 --> 00:06:24,850
Now I do want to wrap it in my wrapper as far as the styling is concerned.

105
00:06:24,850 --> 00:06:27,100
So let's just set up our check first.

106
00:06:27,110 --> 00:06:33,970
So if jobs and the length, if it is equal to zero, what do we want to do?

107
00:06:34,150 --> 00:06:40,900
Well, let's go with return van and let's set up the wrapper here and then inside of the wrapper, we're

108
00:06:40,900 --> 00:06:44,050
going to go with heading to you and whatever text you want to go with.

109
00:06:44,350 --> 00:06:49,120
My gosh, I'm going to go with no jobs too and display.

110
00:06:49,450 --> 00:06:51,250
That's not to say that one.

111
00:06:51,470 --> 00:06:53,800
And if you're interested, how is this going to look like?

112
00:06:54,100 --> 00:06:59,530
Well, we can do a little bit of trickery where I don't want to go back to the server and send back

113
00:06:59,530 --> 00:07:05,560
an empty array and then come back and simply just remember how many jobs I have total, which I think

114
00:07:05,560 --> 00:07:07,480
in my case was three or four.

115
00:07:07,810 --> 00:07:09,590
So it major just changes around two three.

116
00:07:10,000 --> 00:07:13,090
And you'll notice that the moment we have no jobs and.

117
00:07:13,720 --> 00:07:19,720
So that is going to look like eventually when we set up the search functionality because it's perfectly

118
00:07:19,720 --> 00:07:22,930
fine to return an empty array.

119
00:07:23,260 --> 00:07:25,150
And as far as the main return.

120
00:07:25,330 --> 00:07:33,940
So if we're not loading and if jobs length is effectively bigger than zero, then we're going to go

121
00:07:33,940 --> 00:07:34,710
with our wrapper.

122
00:07:35,200 --> 00:07:41,560
And first, I want to display the heading five and in here, let's just display the total jobs and that

123
00:07:41,560 --> 00:07:43,870
is going to be the amount of jobs that we have.

124
00:07:44,380 --> 00:07:47,050
And remember, we can have also one job.

125
00:07:47,230 --> 00:07:51,010
So let me set up one more condition where I'm going to say you have jobs.

126
00:07:51,400 --> 00:07:54,460
Length is bigger than one.

127
00:07:54,720 --> 00:07:56,650
And then I want to add the ask there.

128
00:07:56,980 --> 00:08:04,060
So let me go and operator and I'm just going to add ash over here and what you'll notice if we have,

129
00:08:04,060 --> 00:08:10,210
for example, only one job done is going to say one job found now in our case, we have three.

130
00:08:10,600 --> 00:08:15,250
So we should see jobs now since I have set up techs to be capitalized.

131
00:08:15,280 --> 00:08:18,050
That's why you said in such a way, once you say notice.

132
00:08:18,400 --> 00:08:22,900
Now we have three jobs found, and now let's just iterate over those jobs.

133
00:08:23,170 --> 00:08:29,230
So right after the heading, five set up a jobs there, so there was a class of jobs.

134
00:08:29,600 --> 00:08:37,210
Then let's iterate over the same map and now I'll reference each job a job parameter.

135
00:08:37,539 --> 00:08:41,260
And then as far as the return, we're going to go with the job component.

136
00:08:41,770 --> 00:08:44,710
And we just set it up and then remember, we have the key.

137
00:08:45,590 --> 00:08:54,140
And let's all remember what we have in the array, so array has what it has object and each object represents

138
00:08:54,140 --> 00:08:56,990
what represents that job, correct?

139
00:08:57,350 --> 00:09:03,500
I noticed over here I have the idea so I can just grab that one and pass it as the unique one.

140
00:09:03,830 --> 00:09:07,780
So let's just go here with jump underscore and then ID.

141
00:09:08,390 --> 00:09:15,290
And that since I want to pass all of these properties, it companies positions and all of them into

142
00:09:15,290 --> 00:09:16,310
that job component.

143
00:09:16,730 --> 00:09:20,000
I'm just going to go with dot dot dot and then I'll spread out the job.

144
00:09:20,090 --> 00:09:24,410
That essentially is my preferred way of passing the props.

145
00:09:24,860 --> 00:09:30,860
And then eventually we'll check for a number of pages and display the pagination buttons.

146
00:09:31,340 --> 00:09:37,760
So therefore, if you're looking at the complete one, if you don't have enough jobs, you won't see

147
00:09:37,760 --> 00:09:39,110
the product mentioned here on the bottom.

148
00:09:39,530 --> 00:09:40,980
But that is still coming up.

149
00:09:41,090 --> 00:09:42,800
So for now, let me just add a comment here.

150
00:09:43,220 --> 00:09:44,090
Pagination.

151
00:09:45,040 --> 00:09:53,380
And buttons like so let's say that I want and when it comes to every single job, I just want to showcase

152
00:09:53,680 --> 00:09:54,790
what we're getting back.

153
00:09:55,150 --> 00:09:59,230
So let me now get you a job components or jobs?

154
00:09:59,230 --> 00:09:59,560
Yes.

155
00:09:59,920 --> 00:10:06,310
And then in here, since I know that I'm getting the entire object, essentially I'm just spreading

156
00:10:06,310 --> 00:10:07,120
out the properties.

157
00:10:07,540 --> 00:10:09,580
I'm going to look for a company one.

158
00:10:10,510 --> 00:10:17,620
And let's turn this around to earning five, maybe so five and what's around there, not company name.

159
00:10:17,830 --> 00:10:20,950
So that way, we'll for sure know that everything is correct.

160
00:10:21,370 --> 00:10:22,750
So let's go here with company.

161
00:10:23,740 --> 00:10:30,550
And then once I navigate to my application, I'll notice that we have three jobs found and have Google,

162
00:10:30,550 --> 00:10:32,230
Hulu and something.

163
00:10:32,590 --> 00:10:39,820
Now if you don't believe me, you can go to a reactor tools and learn more specifically, you're looking

164
00:10:39,820 --> 00:10:45,010
for two jobs and you'll see that we have the array and then each item is an object.

165
00:10:45,580 --> 00:10:48,130
And where I'm getting this company, we're here.

166
00:10:48,520 --> 00:10:52,180
So this one is goggles and we have something and also have four.

167
00:10:52,420 --> 00:10:54,670
And while we're still here, why don't we test it out?

168
00:10:54,970 --> 00:10:56,590
Why don't we add a new job?

169
00:10:56,920 --> 00:11:03,130
So let me go to and jump when we want to go with intern, maybe company will be Apple.

170
00:11:03,430 --> 00:11:06,730
And as far as the location, I think I'm going to leave Mexico for now.

171
00:11:07,120 --> 00:11:08,080
Let's submit.

172
00:11:08,530 --> 00:11:11,740
So we added the job to our database.

173
00:11:12,220 --> 00:11:15,940
And now if I navigate all jobs now, I'm going to have four of them.

174
00:11:16,180 --> 00:11:17,860
And the last one will be Apple.

175
00:11:18,370 --> 00:11:24,250
And with this in place now, we can start focusing on the single job component.