1
00:00:00,480 --> 00:00:01,050
Awesome.

2
00:00:01,200 --> 00:00:06,720
With our initial items displayed now we're going to set up the buttons so each and every time we're

3
00:00:06,720 --> 00:00:08,190
going to click on a button.

4
00:00:08,190 --> 00:00:14,550
Then of course we're going to display the next or the previous item in our array and then since it is

5
00:00:14,550 --> 00:00:20,280
array of arrays then we're gonna display our next four items or I don't know our next three items whatever

6
00:00:20,280 --> 00:00:22,170
items you have per page.

7
00:00:22,170 --> 00:00:27,960
Now I also want to right away mention that I'm going to setup the condition where I'm only going to

8
00:00:27,960 --> 00:00:32,530
display the buttons if I have more than one page.

9
00:00:32,630 --> 00:00:33,990
How that is gonna look like.

10
00:00:34,170 --> 00:00:40,740
Well if we refresh so I'm gonna start with zero and if I'm going to look for some kind of item where

11
00:00:40,740 --> 00:00:46,050
I don't have more than one page you're going to see that we're not going to have buttons because let's

12
00:00:46,050 --> 00:00:46,840
think about it.

13
00:00:46,950 --> 00:00:53,490
If I have only four items or whatever items you have per page so if I see here that total product is

14
00:00:53,490 --> 00:00:55,800
four and I only have one page.

15
00:00:55,860 --> 00:00:57,540
What is the reason for buttons.

16
00:00:57,600 --> 00:00:59,230
Why would you want to show the buttons.

17
00:00:59,280 --> 00:01:04,100
Whether that's preview next or whatever different pages there are no different page.

18
00:01:04,110 --> 00:01:09,000
The total amount of items matches the items that I have in one page.

19
00:01:09,000 --> 00:01:10,280
So I'm just displaying the page.

20
00:01:10,570 --> 00:01:16,740
That's why we're going to set up the condition where we only display the buttons that allow us to navigate

21
00:01:16,740 --> 00:01:22,650
from page to page if there is more than one page how we can check that work and we can check that by

22
00:01:22,650 --> 00:01:23,830
checking the saw it.

23
00:01:24,150 --> 00:01:30,240
So the length of my array of arrays is bigger than one then I'm going to display the buttons.

24
00:01:30,240 --> 00:01:33,060
If it's not well then we're not going to do anything.

25
00:01:33,060 --> 00:01:34,380
So we're going to go door turn.

26
00:01:34,460 --> 00:01:34,820
OK.

27
00:01:34,830 --> 00:01:36,510
So we're turning now.

28
00:01:36,510 --> 00:01:42,540
In this case again we do need to set up our fragment because there's going to be some adjacent stuff.

29
00:01:42,540 --> 00:01:44,570
I'm going to go with product list.

30
00:01:44,790 --> 00:01:50,310
We're going to close this out and then we're going to set up our condition where we're going to say

31
00:01:50,310 --> 00:01:58,110
if sorted length length is bigger than one then I would want to display my buttons.

32
00:01:58,110 --> 00:02:00,740
If it's not then I'm not going to do anything.

33
00:02:00,780 --> 00:02:04,770
And the way we're going to set this up I'm going to go with article just because it's going to be a

34
00:02:04,770 --> 00:02:07,270
little bit easier and I'm going to say.

35
00:02:07,320 --> 00:02:12,900
And so if that is the case then display my article with my page ignition buttons.

36
00:02:12,900 --> 00:02:15,220
If not then don't do anything.

37
00:02:15,300 --> 00:02:20,700
We're gonna head back within our expression we're going to copy and paste and we can right away add

38
00:02:20,730 --> 00:02:28,690
a class name just for the styling serve and call this pageant nation Virgin nation buttons.

39
00:02:28,720 --> 00:02:31,750
Now there's gonna be a preview and next button.

40
00:02:31,750 --> 00:02:33,020
So breathe.

41
00:02:33,280 --> 00:02:35,620
And then just copy and paste and the next button.

42
00:02:35,620 --> 00:02:37,960
But we're gonna add them after this one.

43
00:02:38,050 --> 00:02:42,940
So first I just want to display the buttons and the way I'm going to work with the buttons.

44
00:02:42,940 --> 00:02:45,990
I'm gonna check how big is my array.

45
00:02:46,120 --> 00:02:49,110
How big is my sorted my arrays and array.

46
00:02:49,270 --> 00:02:55,180
And then for each and every item I have within my right I'm going to return the button.

47
00:02:55,180 --> 00:02:59,680
So here I'm going to say alright I'm going to have the expression sorted.

48
00:02:59,830 --> 00:03:04,840
We're going to map over it and in this case again I really don't care about the actual item.

49
00:03:05,290 --> 00:03:12,050
I don't care about that array so I'm going to have here underscore where I care about is the index.

50
00:03:12,050 --> 00:03:15,770
So I'm gonna use this index of value to pass it in a button.

51
00:03:15,790 --> 00:03:19,330
So then if I click on a button we're gonna change the page.

52
00:03:19,420 --> 00:03:21,460
So we still have the map method.

53
00:03:21,460 --> 00:03:25,890
Now what I would want to return as I'm iterating well a mapping over the array.

54
00:03:26,020 --> 00:03:28,600
But like I said I don't care about the actual item.

55
00:03:28,630 --> 00:03:35,080
It's not like I'm going or returning the product like I'm doing within the product list instead for

56
00:03:35,080 --> 00:03:36,770
each and every item that I have.

57
00:03:37,060 --> 00:03:43,120
That is of course my array of arrays items meaning this is gonna be I don't know array with four items.

58
00:03:43,120 --> 00:03:45,220
The first one the second one the third one.

59
00:03:45,220 --> 00:03:46,420
And how many we have.

60
00:03:46,870 --> 00:03:53,530
And then for each and every item that I have within the array of arrays I'm going to go with the button.

61
00:03:53,530 --> 00:03:55,660
Then we're gonna go with on click.

62
00:03:55,660 --> 00:04:01,230
Now for the time being we're not going to set anything apart apart from simple placeholder where we're

63
00:04:01,240 --> 00:04:06,460
just gonna go with console log and I would want to cancel out the change page.

64
00:04:06,460 --> 00:04:09,230
So we're going to go the change page and index.

65
00:04:09,400 --> 00:04:15,640
Remember within the context this is what we had we had the change page and we're just gonna be console

66
00:04:15,640 --> 00:04:18,470
logging the index just so we can see what's happening.

67
00:04:18,490 --> 00:04:24,520
So we have the button then we're gonna have also key prop because we're iterating over the list and

68
00:04:24,520 --> 00:04:26,140
then we're turning the list.

69
00:04:26,140 --> 00:04:28,490
So we need to pass in some kind of unique value.

70
00:04:28,570 --> 00:04:33,460
And in this case I'm just going to pass in the next and the last one is gonna be the class name so we're

71
00:04:33,460 --> 00:04:34,700
going to go with class name.

72
00:04:34,870 --> 00:04:40,980
But it is going to be a bit more interesting where if again I'm going to go to all you're gonna note

73
00:04:40,970 --> 00:04:47,770
as that once you click the actual page that we're displaying is displayed in the button.

74
00:04:47,770 --> 00:04:54,830
So not only as I'm hovering over these buttons I'm actually changing this ISIS also the page that I'm

75
00:04:54,850 --> 00:04:55,450
currently on.

76
00:04:55,840 --> 00:05:01,620
So if this is the page number three then of course my styling is also a bit different.

77
00:05:01,660 --> 00:05:05,270
That's why as I click notice we're adding different sources.

78
00:05:05,320 --> 00:05:08,660
That's the reason why class name is going to be our expression.

79
00:05:08,710 --> 00:05:13,470
I'm going to have a template string I mean say First there's gonna be page Button class.

80
00:05:13,600 --> 00:05:20,120
So that's gonna be for all of them but then I would want to check whether the page matches the index

81
00:05:20,230 --> 00:05:25,360
again page is gonna be whether at 0 or 1 or whatever value we're going to be changing.

82
00:05:25,810 --> 00:05:32,860
So if the value for the page is going to match the index then I'm passing inform my button.

83
00:05:32,860 --> 00:05:39,430
That means that I'm gonna be on the actual page and I'm going to say here if the page matches the index

84
00:05:40,000 --> 00:05:46,480
then I would want to add one more class and that class is gonna be page Piti and current that just tells

85
00:05:46,480 --> 00:05:52,530
me that the page value matches the index value which of course is for the button.

86
00:05:52,570 --> 00:05:55,220
So Page B10 current.

87
00:05:55,270 --> 00:05:59,320
Now I do want to place some value within the button.

88
00:05:59,320 --> 00:06:03,320
So just to show you where just a simple index would fail.

89
00:06:03,400 --> 00:06:08,610
I'm gonna pass it in but please keep in mind in the second we're going to update this a bit if we head

90
00:06:08,610 --> 00:06:11,220
to a bigger screen what you're going to see.

91
00:06:11,230 --> 00:06:17,670
Well first of all I can see that I have four buttons why I have four buttons because my array of arrows

92
00:06:17,830 --> 00:06:20,200
the this one has four items.

93
00:06:20,200 --> 00:06:26,800
So as we're iterating over our array I'm displaying the four buttons not step number one.

94
00:06:26,830 --> 00:06:34,510
Then also the current button since the page is zero an index is zero for my button.

95
00:06:34,510 --> 00:06:40,710
That's why my first page course does have the specific success as we're going to be clicking on it.

96
00:06:40,720 --> 00:06:44,890
We don't have the functionality yet but of course we're going to change it around where we have the

97
00:06:44,890 --> 00:06:49,270
functionality where as we're changing the page state value.

98
00:06:49,270 --> 00:06:54,910
This also is going to change but you can see that it is probably not the best setup where we start our

99
00:06:54,910 --> 00:06:56,710
pages with the zero.

100
00:06:56,720 --> 00:07:01,810
Now technically we have to do it because our arrays are zero index based but that doesn't mean that

101
00:07:01,810 --> 00:07:03,870
I cannot display something else.

102
00:07:04,030 --> 00:07:06,440
I could say you know what index plus 1.

103
00:07:06,460 --> 00:07:11,780
So that way I'm going to say all right I'm going I have a page number one on page number two three four.

104
00:07:11,830 --> 00:07:17,320
Again why I have four pages because this is the amount of items I have.

105
00:07:17,320 --> 00:07:23,620
If we're gonna had two helpers and if I'm going to say that I would want three items per page you're

106
00:07:23,620 --> 00:07:31,740
clearly going to see I have more buttons why I have more buttons because again now we have items within

107
00:07:31,740 --> 00:07:36,560
the array of arrays but each and every array has only three items instead of four.

108
00:07:37,050 --> 00:07:38,810
And that's why I have more pages.

109
00:07:38,930 --> 00:07:44,350
And that's why I have more buttons because I'm iterating more the array of arrays of sorted.

110
00:07:44,740 --> 00:07:49,650
Now let's also take a look at the functionality because currently what happens if I click of course

111
00:07:49,680 --> 00:07:50,970
nothing happens.

112
00:07:50,980 --> 00:07:55,050
However within the console course we're going to see that we are displaying something.

113
00:07:55,200 --> 00:07:57,240
This would be index number two.

114
00:07:57,270 --> 00:08:02,860
Then this would be index number three because of course here we're displaying index plus one.

115
00:08:03,000 --> 00:08:04,690
But the actual index is three.

116
00:08:05,100 --> 00:08:08,070
So what do you think we need to do within our functionality.

117
00:08:08,550 --> 00:08:10,380
Well it's actually very simple.

118
00:08:10,380 --> 00:08:18,690
We have changed page and we're passing in the index so whatever index that button represents in my array

119
00:08:18,690 --> 00:08:26,610
of arrays and what I would want is use set page that actually controls the state value to set it equal

120
00:08:26,610 --> 00:08:28,440
to that particular index.

121
00:08:28,470 --> 00:08:29,650
That's all we have to do.

122
00:08:29,730 --> 00:08:36,900
So we're gonna go with set page and then pass in whatever index we are getting from my button we're

123
00:08:36,900 --> 00:08:42,510
gonna head back and you're going to notice that if I click now I change the state value.

124
00:08:42,990 --> 00:08:45,050
So now what is my page.

125
00:08:45,060 --> 00:08:46,890
Well my page is gonna be one.

126
00:08:46,890 --> 00:08:50,340
Don't look at the number two because of course that is index plus 1.

127
00:08:50,430 --> 00:08:56,610
But the actual second button had the index in one so it changed the page value.

128
00:08:56,610 --> 00:09:05,040
Now since I'm accessing within the page product sorted plus page now I'm displaying the second array

129
00:09:05,400 --> 00:09:05,910
correct.

130
00:09:05,910 --> 00:09:11,250
Since I clicked on a button then each and every time as I'm going to click on some kind of button this

131
00:09:11,250 --> 00:09:12,940
is the item that I'm going to show.

132
00:09:13,000 --> 00:09:19,200
Now just to give you another example if we head back to help us if I'm gonna go with two items let's

133
00:09:19,200 --> 00:09:24,000
say I notice now I'm going to have more pages I'm gonna have eight pages.

134
00:09:24,000 --> 00:09:26,280
So the last page is only going to have one item.

135
00:09:26,280 --> 00:09:29,730
But again the functionality is exactly the same as I'm hovering.

136
00:09:29,730 --> 00:09:31,380
I'm going to be changing the C assess.

137
00:09:31,590 --> 00:09:38,670
But if the page so the number I'm setting with an index is gonna match the index that the button has.

138
00:09:38,850 --> 00:09:41,870
And of course it shows that this is gonna be page number four.

139
00:09:41,910 --> 00:09:49,620
Start with 0 9 2 and then whatever six seven all the way up to eight if we're gonna change at an all

140
00:09:49,920 --> 00:09:56,440
the helpers to 10 you're going to see that I'm going to have ten items and then I only have two pages.

141
00:09:56,490 --> 00:09:57,080
Why.

142
00:09:57,120 --> 00:09:59,350
Because I had 15 items I click.

143
00:09:59,400 --> 00:10:04,230
The second one is gonna have two items or I'm sorry five items but that is gonna be the page number

144
00:10:04,230 --> 00:10:04,890
two.

145
00:10:04,900 --> 00:10:08,140
Hopefully this makes sense I'm going to go back to four.

146
00:10:08,270 --> 00:10:13,630
So displaying four items and now we're going to start working on next and pre buttons.

147
00:10:13,650 --> 00:10:19,650
Hopefully this makes sense where we have our rate of arrays I'm displaying with how many pages I have.

148
00:10:20,010 --> 00:10:22,410
And then each and every button gets the index.

149
00:10:22,560 --> 00:10:30,030
And as we click on a button we just use the index that button has and change our page value where we

150
00:10:30,030 --> 00:10:33,900
have within the product a number we had a page and set page.

151
00:10:33,900 --> 00:10:39,630
Initially it was zero and then each and every time we click on a button we just use that page and then

152
00:10:39,630 --> 00:10:45,270
we use the index that we're getting from the button and update our page state value.