1
00:00:00,390 --> 00:00:00,820
Perfect.

2
00:00:01,020 --> 00:00:09,690
We've got our whole list now let's spice things up and set up multiple pages and it's going to be step

3
00:00:09,690 --> 00:00:11,150
by step process more.

4
00:00:11,160 --> 00:00:13,710
First, I would want to go over the general idea.

5
00:00:14,160 --> 00:00:16,740
Now we have the list of followers.

6
00:00:17,220 --> 00:00:24,000
But what I would want is to display only a certain amount of followers at the time, whether or not

7
00:00:24,000 --> 00:00:27,690
it's three or four or again, maybe five thousand, whatever you would want.

8
00:00:28,200 --> 00:00:30,450
And the idea is somewhat simple.

9
00:00:30,720 --> 00:00:34,530
Where we have the whole list, we have this one giant array.

10
00:00:34,920 --> 00:00:39,590
But instead what I would want is an array of arrays.

11
00:00:40,050 --> 00:00:45,310
So I have array of hundred items, but instead I would want all right.

12
00:00:45,340 --> 00:00:47,280
Off, for example, 10 items.

13
00:00:47,580 --> 00:00:52,860
But then each item is going to be the array of those 10 items.

14
00:00:53,190 --> 00:00:59,660
Hopefully that makes sense where instead of one giant array, I'm going to have array of arrays.

15
00:01:00,030 --> 00:01:07,590
And then, of course, as I'm clicking on the buttons, I'm just displaying a certain array in that

16
00:01:07,590 --> 00:01:08,520
array of arrays.

17
00:01:08,850 --> 00:01:14,730
So if I were one display array number four and of course our click on a button and now, of course,

18
00:01:14,730 --> 00:01:15,900
I'm displaying forth.

19
00:01:15,900 --> 00:01:16,300
All right.

20
00:01:16,500 --> 00:01:24,120
And in that four, three, I have these items and not set this up, I'm going to have to navigate back

21
00:01:24,120 --> 00:01:25,020
to our project.

22
00:01:25,370 --> 00:01:29,680
And then remembering the utils, we have this Bagian eight function.

23
00:01:30,000 --> 00:01:34,670
So first, I would want to import that pattern in my custom hook.

24
00:01:35,220 --> 00:01:39,750
Now, I already have the input for the project and it's coming from the URLs.

25
00:01:40,200 --> 00:01:48,690
So instead of simply going with Sadara, eventually we'll pipe our data through the Internet and instead

26
00:01:48,690 --> 00:01:52,500
of retiring, this whole list will return array of.

27
00:01:52,500 --> 00:01:52,940
All right.

28
00:01:53,250 --> 00:01:59,670
Now, for the time being, I simply would want to invoke it and pass in the data and nothing is going

29
00:01:59,670 --> 00:01:59,950
to happen.

30
00:01:59,970 --> 00:02:03,990
Don't worry, we're still setting up some data with our whole data.

31
00:02:04,350 --> 00:02:10,470
So we're going to go here with a unit that is my function name, of course, and then I pass in the

32
00:02:10,470 --> 00:02:11,400
data, whatever.

33
00:02:11,400 --> 00:02:13,440
I'm getting back from the server.

34
00:02:13,740 --> 00:02:19,740
And then in order to see better what is happening, I'm just going to navigate back to my utils and

35
00:02:19,740 --> 00:02:23,540
then more specifically, progenies, I need to name that argument.

36
00:02:23,820 --> 00:02:26,490
So in there I had it as a data in here.

37
00:02:26,490 --> 00:02:32,160
Just to be a bit more explicit, I'm going to go with followers and then if we cancel log, we should

38
00:02:32,160 --> 00:02:35,490
see the same array of hundred items.

39
00:02:36,240 --> 00:02:39,180
But of course, this catalog is coming from different places.

40
00:02:39,600 --> 00:02:42,080
So we're going to go to inspect console.

41
00:02:42,120 --> 00:02:45,090
You should see the same thing, array of items.

42
00:02:45,300 --> 00:02:52,440
Or of course, now it is coming from the utils, unlike the first time when it was coming from the abcess.

43
00:02:52,890 --> 00:02:54,000
And what's the plan?

44
00:02:54,240 --> 00:02:56,700
Well, I have my data beautiful.

45
00:02:57,000 --> 00:03:04,890
But what I would want to return from this function is not the whole list of hundred items or five thousand

46
00:03:04,890 --> 00:03:07,460
items is array of arrays.

47
00:03:08,070 --> 00:03:13,640
So some kind of array that splits up all those items and separate.

48
00:03:13,650 --> 00:03:14,030
All right.

49
00:03:14,460 --> 00:03:18,880
And first, we would need to decide how many items per page we would want.

50
00:03:19,260 --> 00:03:25,080
So in here you can go with 500 or, you know, no, sorry, I'm overexaggerating don't go with five

51
00:03:25,080 --> 00:03:30,390
hundred because our array is only 100 items long.

52
00:03:30,750 --> 00:03:37,050
So I guess I don't know, Max probably go with 99, but probably it's going to be a bit more interesting

53
00:03:37,050 --> 00:03:40,660
if you're going to go with ten, nine or something along those lines.

54
00:03:41,070 --> 00:03:47,070
So in my case I could go with ten, but since there's something that I would want to showcase, I will

55
00:03:47,070 --> 00:03:48,380
eventually change it tonight.

56
00:03:48,570 --> 00:03:54,420
But for the time being, we're going to go with ten and we're going to set that up in the variable items

57
00:03:54,540 --> 00:03:57,990
per page and again, come up with your own value.

58
00:03:58,140 --> 00:04:00,660
But in my case, I'm going to start with 10.

59
00:04:01,020 --> 00:04:04,560
So that is how many items I would want to showcase.

60
00:04:04,830 --> 00:04:11,760
At one point as I'm clicking, I have that items displayed on screen.

61
00:04:11,940 --> 00:04:12,460
OK, good.

62
00:04:12,900 --> 00:04:16,770
Now, of course, we would need to calculate, well, how many pages do we have?

63
00:04:17,280 --> 00:04:25,170
And in this case, I would want to divide the length of the followers of Meira that I'm passing in with

64
00:04:25,170 --> 00:04:26,130
items per page.

65
00:04:26,130 --> 00:04:26,470
Correct.

66
00:04:26,640 --> 00:04:32,300
So we've got cons on that page and now we're going to go with followers and then that length.

67
00:04:32,700 --> 00:04:40,560
So whatever MONAMI items that have divided by items per page and in this case, everything is going

68
00:04:40,560 --> 00:04:43,050
to come out beautifully because we have round numbers.

69
00:04:43,080 --> 00:04:49,620
If we count the log pages, we should have ten correct hundred divided by ten last time I checked.

70
00:04:50,040 --> 00:04:52,080
Is that so?

71
00:04:52,080 --> 00:04:57,000
If I can log in my staff, I should see ten.

72
00:04:57,600 --> 00:04:59,730
And at the moment I don't see anything so.

73
00:05:00,000 --> 00:05:04,650
Once I navigate to the star, I see my then and that is awesome.

74
00:05:05,010 --> 00:05:07,700
However, what if we don't have round numbers?

75
00:05:07,770 --> 00:05:09,750
What if I go with nine?

76
00:05:09,870 --> 00:05:18,570
So I want to display nine items per page and then once I divide hundred by nine, what kind of value

77
00:05:18,570 --> 00:05:21,750
I'm going to have on one have 11 dot and then one.

78
00:05:21,750 --> 00:05:22,590
One, one, one one.

79
00:05:23,010 --> 00:05:31,650
Now do you really have 11 pages and then point one or instead we would want to have round numbers.

80
00:05:32,070 --> 00:05:38,970
And then since that one, one one represents that one last item that needs a separate page.

81
00:05:39,240 --> 00:05:44,040
That's why I will use math ceiling and all the way around up.

82
00:05:44,520 --> 00:05:49,140
So that way in the last page I'll just have those remaining items.

83
00:05:49,410 --> 00:05:57,990
So we'll go here with Matt Ceiling and then we pass in the same values, so follower's the length divided

84
00:05:57,990 --> 00:05:59,160
by items per page.

85
00:05:59,460 --> 00:06:02,670
So in this case, you'll notice that will always round up.

86
00:06:03,120 --> 00:06:05,610
In this case I have twelve pages.

87
00:06:05,620 --> 00:06:10,650
So in that 12 page I'm just going to display remaining of the items.

88
00:06:10,650 --> 00:06:14,910
So I have eleven pages, full pages with nine items per page.

89
00:06:14,910 --> 00:06:19,140
And then in that 12 page I'm going to display that last item.

90
00:06:19,380 --> 00:06:20,570
OK, that is good.

91
00:06:21,330 --> 00:06:29,040
And of course I would want to create that array of arrows and for that I'm going to use array dot from.

92
00:06:29,430 --> 00:06:32,950
So in here we're going to go with consed new followers.

93
00:06:33,010 --> 00:06:38,090
So some kind of variable name and we're going to go with a dot from now.

94
00:06:38,130 --> 00:06:38,510
All right.

95
00:06:38,510 --> 00:06:44,790
That from a school because we can create arrays from the eatables or from the objects.

96
00:06:44,820 --> 00:06:48,280
In this case I'm going to pass in brand new object.

97
00:06:48,600 --> 00:06:54,460
Now the one thing that we need when we're setting up New Aurora is the length property in our object.

98
00:06:54,720 --> 00:07:00,100
So in here I'm going to go with length property and I'm going to set it equal to my pages.

99
00:07:00,510 --> 00:07:07,420
So now what I'm doing is I'm creating new array with that many items.

100
00:07:07,800 --> 00:07:09,050
So in this case, I have 12.

101
00:07:09,390 --> 00:07:13,740
So you'll notice that once you log in, you follow worse.

102
00:07:14,400 --> 00:07:19,570
So you have a right of arrays and there's going to be 12 items.

103
00:07:19,590 --> 00:07:26,160
Now, of course, all of them are undefined at the moment because we haven't set up the rest of functionality.

104
00:07:26,160 --> 00:07:30,420
But it is already a good start where I have an array of arrays.

105
00:07:30,870 --> 00:07:39,240
And now what I would want is every time I'm setting up this array of arrays in each item, I would want

106
00:07:39,240 --> 00:07:44,970
to pull certain amount of items from my list.

107
00:07:45,390 --> 00:07:53,430
So remember, I'm passing in the holders a list of hundred and then I would want to iterate over this

108
00:07:53,580 --> 00:07:54,410
new followers.

109
00:07:54,810 --> 00:08:00,750
And then in each iteration, depending on the index, I would want to set up first nine followers,

110
00:08:00,750 --> 00:08:07,080
the next nine, next nine, and then all the way to 12 will pass in remaining all the followers.

111
00:08:07,410 --> 00:08:10,080
And we do that by passing in the second argument here.

112
00:08:10,900 --> 00:08:17,110
And we can access the item first, so just like with a map, we have a callback function and then the

113
00:08:17,110 --> 00:08:23,070
first argument is that item, but we really don't care about this item because this is going to be undefined

114
00:08:23,080 --> 00:08:23,490
anyway.

115
00:08:23,800 --> 00:08:25,710
What I care about is the index.

116
00:08:25,990 --> 00:08:32,890
And then as I'm iterating over, then whatever I'm going to be returning is going to be placed in that

117
00:08:32,890 --> 00:08:35,620
item, which currently is undefined.

118
00:08:35,980 --> 00:08:39,820
And I'm going to set up some kind of variable for start.

119
00:08:40,090 --> 00:08:48,550
So I'm going to go with CONSED and then START is equal to index times and then we go with items per

120
00:08:48,760 --> 00:08:49,990
page like so.

121
00:08:50,410 --> 00:08:53,740
So the first time, of course, the index is going to be zero.

122
00:08:54,010 --> 00:08:54,400
Correct.

123
00:08:54,580 --> 00:08:57,130
Next iteration is going to be one and two.

124
00:08:57,280 --> 00:09:02,020
And then every time I'm just going to multiply this by items per page.

125
00:09:02,350 --> 00:09:08,050
So if you want to take a look at start value your cancela, you'll notice that the first time is going

126
00:09:08,050 --> 00:09:13,660
to be zero, the nine, the nineteen twenty seven and all the way to ninety nine.

127
00:09:13,990 --> 00:09:15,550
So that's our starting point.

128
00:09:15,950 --> 00:09:22,560
That is the value that we'll use to pull out the followers from our main list.

129
00:09:22,870 --> 00:09:27,490
And we'll do that by using another array method and that one is slice.

130
00:09:27,850 --> 00:09:30,820
So in here I'm going to say return then follower's.

131
00:09:30,820 --> 00:09:32,480
So this is my whole list.

132
00:09:32,920 --> 00:09:34,060
OK, keep that in mind.

133
00:09:34,370 --> 00:09:39,980
Not talking about new followers, talking about the whole list, and we go with slight method.

134
00:09:40,150 --> 00:09:41,500
So what's the method is doing?

135
00:09:41,500 --> 00:09:47,490
It is pulling out the items from the original array and setting up the new right.

136
00:09:48,010 --> 00:09:51,840
Now, one thing we need to pass in is the starting point.

137
00:09:52,240 --> 00:09:56,800
So where we would want to start grabbing the items and where we would want to end.

138
00:09:57,100 --> 00:09:59,100
And this is where I pass in my start.

139
00:09:59,500 --> 00:10:06,130
So my start position, which notes every time is changing, start with zero, then we'll go with nine,

140
00:10:06,130 --> 00:10:07,230
18 and all that.

141
00:10:07,450 --> 00:10:10,850
And then I just go with end position, which is not included.

142
00:10:10,870 --> 00:10:12,280
And that is very important.

143
00:10:12,460 --> 00:10:17,240
I go with start plus and then items per page.

144
00:10:17,740 --> 00:10:22,900
So in the first iteration, the start is going to be what will it is zero.

145
00:10:23,260 --> 00:10:23,710
Correct.

146
00:10:24,130 --> 00:10:29,130
And what we're doing is we're pulling out follower's from our main list.

147
00:10:29,410 --> 00:10:34,340
We start with zero and then we end with nine.

148
00:10:34,780 --> 00:10:41,290
So our last index is going to be nine because we go start, which is zero plus nine and nine is not

149
00:10:41,290 --> 00:10:41,770
included.

150
00:10:42,370 --> 00:10:47,880
So essentially we will get items starting from index of zero all the way to eight.

151
00:10:48,280 --> 00:10:51,340
And of course, that returns those nine items.

152
00:10:51,580 --> 00:10:59,290
So now if you'll consider log the new followers, you'll notice that we're getting the array of arrays

153
00:10:59,770 --> 00:11:01,290
every time we're iterating.

154
00:11:01,840 --> 00:11:04,960
I'm just grabbing items from my main array.

155
00:11:05,500 --> 00:11:11,880
I start with nine, then another nine and all the way to ninety nine.

156
00:11:11,890 --> 00:11:16,470
And then I'm actually I have that last item again just to go over.

157
00:11:16,880 --> 00:11:19,030
We set up how many items prepared you would want.

158
00:11:19,720 --> 00:11:20,350
All changes.

159
00:11:20,380 --> 00:11:20,890
Eleven.

160
00:11:21,220 --> 00:11:24,060
What is going to happen is I'm going to have less pages.

161
00:11:24,880 --> 00:11:32,890
So in this case I only have ten pages but of course I have different amount of items in a page, so

162
00:11:32,890 --> 00:11:34,120
now I have eleven.

163
00:11:34,510 --> 00:11:38,060
So that's when I said that you can change this value however you'd want.

164
00:11:38,380 --> 00:11:39,690
The functionality still work.

165
00:11:39,940 --> 00:11:44,680
Now, of course, don't set up five hundred items per page because of course we don't have five hundred

166
00:11:44,680 --> 00:11:45,550
items in the list.

167
00:11:45,820 --> 00:11:50,430
But if it's something reasonable within hundred and of course it is going to work.

168
00:11:50,440 --> 00:11:55,010
So I'm going to go back to nine that we set up our pages.

169
00:11:55,210 --> 00:11:56,770
So how many pages you will have?

170
00:11:57,010 --> 00:12:03,460
And then we create array of arrays using array dot from method.

171
00:12:03,820 --> 00:12:11,740
And then in here I pass an empty object with length property because that is what the array from requires

172
00:12:12,250 --> 00:12:14,080
to create of that era.

173
00:12:14,290 --> 00:12:20,770
And I set it equal to pages, whatever is that value, whether that is twelve, twenty or whatever.

174
00:12:21,040 --> 00:12:27,700
And then as a second argument in array from I can pass in callback function that just iterate over my

175
00:12:27,700 --> 00:12:28,000
right.

176
00:12:28,030 --> 00:12:33,040
Now keep in mind I'm iterating over those twelve items, not the hundred.

177
00:12:33,250 --> 00:12:41,320
And as I'm iterating I would want to use the slight method where I'm going to say, well grab from the

178
00:12:41,320 --> 00:12:45,610
original list those items with starting point and point.

179
00:12:45,910 --> 00:12:52,320
But since I would want to set up those values dynamically, I'm just going to use the index not to say,

180
00:12:52,330 --> 00:12:59,100
well, get me the index of that page and then every time multiplied by items per page.

181
00:12:59,500 --> 00:13:03,790
So that way my starting point is changing and also my endpoint.

182
00:13:04,090 --> 00:13:07,060
So as I'm iterating, I'm just grabbing the values.

183
00:13:07,270 --> 00:13:09,730
And then eventually I have my array of.

184
00:13:10,500 --> 00:13:14,230
And what we would want to do is, of course, return that new followers.

185
00:13:14,550 --> 00:13:16,680
So we're going to go here with new followers.

186
00:13:17,550 --> 00:13:23,310
And now, of course, we'll have a ray of orange now, I can tell you right away that if you'll change

187
00:13:23,330 --> 00:13:26,700
this around right away, our functionality will break.

188
00:13:26,910 --> 00:13:34,800
That's why I will set up everything in the next video as far as displaying only one array right at the

189
00:13:34,800 --> 00:13:35,120
time.

190
00:13:35,610 --> 00:13:38,010
So only one page at a time.