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

2
00:00:00,350 --> 00:00:02,760
And up next, let's work on the pagination.

3
00:00:02,780 --> 00:00:06,430
Now, in this project, I'll show you two approaches.

4
00:00:06,440 --> 00:00:13,820
So first, we'll set up a straight up pagination approach where effectively we'll display all of the

5
00:00:13,820 --> 00:00:14,630
pages.

6
00:00:14,840 --> 00:00:22,610
But since few students complain in the previous course iteration that in some cases, if you have tons

7
00:00:22,610 --> 00:00:25,310
of jobs, you also have tons of buttons.

8
00:00:25,940 --> 00:00:33,140
We will work on more complex approach where we only display limited amount of.

9
00:00:33,790 --> 00:00:34,600
Page button.

10
00:00:34,600 --> 00:00:35,810
So notice over here.

11
00:00:35,830 --> 00:00:43,540
Technically, I have eight pages, but basically I only display one, two, three, four, five pages

12
00:00:43,540 --> 00:00:44,340
at a time.

13
00:00:44,350 --> 00:00:46,990
Now, of course, you'll be able to control these values.

14
00:00:46,990 --> 00:00:54,040
And also keep in mind that even if you have, let's say, 50, you will still display only those five

15
00:00:54,070 --> 00:00:55,540
page buttons.

16
00:00:55,540 --> 00:01:00,330
And of course, I'll come back to this topic as we're working on the functionality.

17
00:01:00,340 --> 00:01:04,510
So the main thing I want you to understand that there's going to be two approaches.

18
00:01:04,510 --> 00:01:09,310
First, we'll go with the straight up approach and then we'll make it more complex.

19
00:01:10,000 --> 00:01:16,630
And as a result, even if you have 100 pages, you'll be able to limit how many page buttons you actually

20
00:01:16,630 --> 00:01:17,500
display.

21
00:01:17,530 --> 00:01:23,020
So now let's navigate back to our project and we actually want to start in the components.

22
00:01:23,020 --> 00:01:24,620
We want to create another one.

23
00:01:24,640 --> 00:01:29,350
So in this case, I'm going to go with Page BTN Container.

24
00:01:29,380 --> 00:01:34,450
Now please keep in mind that I'll use the same component, but you'll have the reference code in the

25
00:01:34,450 --> 00:01:36,340
Readme just like previously.

26
00:01:36,340 --> 00:01:42,010
So technically, if you want to set up two components, one for just regular buttons and then one for

27
00:01:42,010 --> 00:01:44,280
more complex ones, you can definitely do so.

28
00:01:44,290 --> 00:01:50,940
In my case I'll have one and I will refactor it in the scenario when we create a more complex approach.

29
00:01:50,950 --> 00:01:55,390
So let's go with page BTN Container.

30
00:01:55,390 --> 00:02:03,070
JS As far as the import export, I don't think we need to do it because we're only going to use it in

31
00:02:03,070 --> 00:02:04,270
the jobs container.

32
00:02:04,270 --> 00:02:05,950
So it's in the same one.

33
00:02:05,950 --> 00:02:07,480
Yep, everything is correct.

34
00:02:07,480 --> 00:02:10,580
So now let's just set up some kind of basic return.

35
00:02:11,220 --> 00:02:13,290
We're going to go over here with heading one.

36
00:02:13,380 --> 00:02:14,580
Okay, Beautiful.

37
00:02:14,610 --> 00:02:15,690
Then you know what?

38
00:02:15,690 --> 00:02:17,010
Let me close everything.

39
00:02:17,920 --> 00:02:21,100
They're looking again for the client for source.

40
00:02:21,840 --> 00:02:25,530
And then we want to grab the jobs container.

41
00:02:26,450 --> 00:02:27,290
Over here.

42
00:02:27,770 --> 00:02:30,110
So somewhere here we shouldn't have jobs.

43
00:02:30,110 --> 00:02:30,560
Yep.

44
00:02:30,650 --> 00:02:31,340
So we're here.

45
00:02:31,340 --> 00:02:35,000
And then remember, we already grabbing the data, right?

46
00:02:35,000 --> 00:02:39,320
So let's just log one more time just so we are on the same page.

47
00:02:39,410 --> 00:02:41,420
Let me navigate back to the project.

48
00:02:42,100 --> 00:02:43,210
That means packed.

49
00:02:43,920 --> 00:02:46,950
And it looks like I have some previous logs, so let me remove them.

50
00:02:47,340 --> 00:02:49,680
Let me refresh and check it out.

51
00:02:49,680 --> 00:02:53,420
This is going to be the response from the server since we added those extra properties.

52
00:02:53,430 --> 00:02:53,910
Correct.

53
00:02:53,940 --> 00:02:58,770
We added how many jobs num of pages as well as the current page.

54
00:02:58,770 --> 00:03:05,100
And lastly, we have jobs array which is set to ten jobs since we have a limit of ten.

55
00:03:05,430 --> 00:03:12,240
So now back in the jobs container, I want to destructure out more properties, not only I want to get

56
00:03:12,240 --> 00:03:15,510
the jobs, I also want to get total jobs.

57
00:03:16,650 --> 00:03:24,090
And we want to get num of pages since we'll use that value to showcase our buttons.

58
00:03:24,120 --> 00:03:30,150
Now this condition stays the same, so we're still checking whether the job's length is equal to zero.

59
00:03:30,180 --> 00:03:31,380
We're not going to touch that.

60
00:03:31,380 --> 00:03:36,980
However, in this wrapper above the div, we'll actually set up a heading five.

61
00:03:36,990 --> 00:03:40,810
And in here I want to display how many jobs in total we have.

62
00:03:40,830 --> 00:03:48,000
So we're going to go with total jobs then, since there might be one job or plenty of jobs.

63
00:03:48,000 --> 00:03:54,630
I want to control the S, so I'll say, Hey, listen, if the job's length is bigger than one, then

64
00:03:54,630 --> 00:03:55,920
I'm going to go with S.

65
00:03:55,920 --> 00:03:57,390
So jobs found.

66
00:03:57,420 --> 00:03:58,230
If.

67
00:03:58,850 --> 00:04:03,850
It's only one job, then I'm just going to go with Job and you'll see what I'm talking about in a second.

68
00:04:03,860 --> 00:04:05,510
So we're going to go here with jobs.

69
00:04:05,510 --> 00:04:07,490
Length is bigger than one.

70
00:04:07,490 --> 00:04:10,010
If that's the case, guess what?

71
00:04:10,010 --> 00:04:13,670
We're going to go over here with S and we'll write found.

72
00:04:13,700 --> 00:04:20,480
Now, if it's only one job, then of course we'll just say job and then after the div actually want

73
00:04:20,480 --> 00:04:27,230
to go with num of pages and if it's bigger than one then I want to display the page button container.

74
00:04:27,560 --> 00:04:32,270
In my opinion, what's the point of showing all the buttons if we have only one page anyway?

75
00:04:32,390 --> 00:04:32,990
Correct.

76
00:04:32,990 --> 00:04:38,390
So let's go over here with and operator and then we're going to look for Page.

77
00:04:39,090 --> 00:04:43,500
Button container, which for some reason I'm not getting.

78
00:04:43,710 --> 00:04:44,340
So.

79
00:04:44,340 --> 00:04:45,870
BTN container.

80
00:04:47,200 --> 00:04:47,800
Yep.

81
00:04:47,800 --> 00:04:49,810
Unfortunately I didn't import.

82
00:04:49,840 --> 00:04:51,190
Let me try here on the top.

83
00:04:51,190 --> 00:04:53,440
So import page.

84
00:04:54,680 --> 00:04:56,300
Button container.

85
00:04:56,850 --> 00:04:57,780
From.

86
00:04:58,080 --> 00:05:01,410
And then we're looking for the same folder.

87
00:05:02,010 --> 00:05:02,230
Yep.

88
00:05:02,250 --> 00:05:03,030
Over here.

89
00:05:03,390 --> 00:05:05,940
I mean, it should work.

90
00:05:06,560 --> 00:05:08,420
But again, for some reason, it doesn't.

91
00:05:08,450 --> 00:05:08,780
Okay.

92
00:05:08,780 --> 00:05:10,310
Let me try one more time.

93
00:05:10,340 --> 00:05:11,390
Let's refresh.

94
00:05:12,600 --> 00:05:13,530
Let's start from scratch.

95
00:05:13,560 --> 00:05:18,660
Okay, let's keep on scrolling and notice since, of course, the total jobs is 100.

96
00:05:18,690 --> 00:05:20,850
There's more than one page.

97
00:05:20,850 --> 00:05:24,690
And of course, that's why we showcase the page button container.

98
00:05:25,080 --> 00:05:32,150
And lastly, I guess in the page button container, let's just grab again some values from the context.

99
00:05:32,160 --> 00:05:40,050
Remember when we were setting up everything here in the all Jobs page, we added a context.

100
00:05:40,050 --> 00:05:40,620
Correct.

101
00:05:40,620 --> 00:05:44,160
So let me go back over here to all jobs in here.

102
00:05:44,160 --> 00:05:46,200
We have the context where we have the data.

103
00:05:46,350 --> 00:05:52,200
And of course, I still want to have access to those things in the page button container.

104
00:05:52,200 --> 00:05:55,230
And remember, we're passing them down from all jobs.

105
00:05:55,260 --> 00:06:01,050
They're available in jobs container, and also they're going to be available in a page button container

106
00:06:01,170 --> 00:06:03,720
once we set up all the proper imports.

107
00:06:03,930 --> 00:06:11,970
So now let me look for me because I do want to quickly grab all of the imports we're going to use in

108
00:06:12,070 --> 00:06:14,920
this page or I'm sorry, the component.

109
00:06:14,920 --> 00:06:16,150
It's not really a page.

110
00:06:16,560 --> 00:06:20,450
So in the page button container, we're going to have following imports.

111
00:06:20,460 --> 00:06:22,230
So we'll have a few icons.

112
00:06:22,350 --> 00:06:27,690
And also we have a wrapper, something we're going to style a little bit later and also use location,

113
00:06:27,690 --> 00:06:32,340
link and use navigate from React router Dom and you'll see why we need these ones.

114
00:06:33,000 --> 00:06:38,040
Essentially, once we set up the functionality and like I said, use all jobs context.

115
00:06:38,070 --> 00:06:38,460
Why?

116
00:06:38,460 --> 00:06:44,310
Well, because I want to access the num of pages and also the current page.

117
00:06:44,310 --> 00:06:52,860
So let's invoke it here, const and there's a data and I know that in that data I have those two properties.

118
00:06:52,860 --> 00:07:00,480
So we're just going to go with num of pages then comma, and then we're going to look for current page

119
00:07:00,480 --> 00:07:04,290
and that is equal to use all jobs context.

120
00:07:04,290 --> 00:07:10,500
And then again, just to stay on the safe side, I'm going to go with Num pages and also I want to see

121
00:07:10,500 --> 00:07:11,670
the current page.

122
00:07:11,940 --> 00:07:17,290
And once we navigate here, once we refresh and all that, we should see the result.

123
00:07:17,290 --> 00:07:19,330
And notice here I have ten.

124
00:07:19,330 --> 00:07:21,280
So that is going to be num of pages.

125
00:07:21,280 --> 00:07:23,920
And the second value is the current page.

126
00:07:23,920 --> 00:07:28,360
And with this in place now we can start working on our return.