WEBVTT

1
00:00:00.480 --> 00:00:02.380
Hello and welcome back.

2
00:00:02.400 --> 00:00:04.300
Today we're going to be discussing how

3
00:00:04.330 --> 00:00:09.540
to create this pagination for our flat
list that we have been talking about.

4
00:00:09.570 --> 00:00:14.400
So great, what we're going to need is
a pagination function and we're going

5
00:00:14.430 --> 00:00:17.580
to have to control the state
of these items as well.

6
00:00:17.600 --> 00:00:19.780
But we are going to be getting the whole

7
00:00:19.810 --> 00:00:25.660
list of categories from our Reducers still
and we're going to have to define some

8
00:00:25.690 --> 00:00:32.140
initial states so we're going
to need to use state for those.

9
00:00:32.170 --> 00:00:34.420
I'm just going to sort the selectors

10
00:00:34.450 --> 00:00:39.620
and dispatches so that they're exactly
visible as we need them to be.

11
00:00:39.640 --> 00:00:42.100
And then what I want to do is create

12
00:00:42.130 --> 00:00:47.100
a content for category pages here
and a setter for category page.

13
00:00:47.130 --> 00:00:49.900
And by default, let's say the categories

14
00:00:49.930 --> 00:00:54.420
are on page one
and then what we're going to need is

15
00:00:54.450 --> 00:00:58.940
the truncated list of the items
that should be visible and as the user is

16
00:00:58.970 --> 00:01:02.540
going to be scrolling we're going
to be adding more items as needed.

17
00:01:02.560 --> 00:01:04.200
So we're going to say that we're going

18
00:01:04.230 --> 00:01:09.210
to need a category list and a
setter of this category list.

19
00:01:09.240 --> 00:01:12.930
And initially, it's going to be empty,

20
00:01:12.960 --> 00:01:18.460
and now we're going to have to use this
category list here instead of categories.

21
00:01:18.490 --> 00:01:21.050
And that is going to get rid of our flat

22
00:01:21.080 --> 00:01:23.700
list because there's no
data to be displayed.

23
00:01:23.730 --> 00:01:29.560
But what we're also going to do is define
how many items of the categories should be

24
00:01:29.590 --> 00:01:34.780
displayed on our page at the initial
state on the page one.

25
00:01:34.810 --> 00:01:38.620
And as the users call, how many
items per page do we want to get.

26
00:01:38.650 --> 00:01:42.100
So I think if we say that category page

27
00:01:42.130 --> 00:01:49.780
size for each page is four items should
be good enough for us to see the results.

28
00:01:49.810 --> 00:01:52.960
And then what we need to do is we're going

29
00:01:52.990 --> 00:01:57.260
to have to build this pagination function
so I'm just going to call it pagination

30
00:01:57.290 --> 00:02:02.340
and we're going to say that it takes
the items list that we're paginating

31
00:02:02.370 --> 00:02:09.660
through and it needs a page number that
we're on and that it needs page size.

32
00:02:09.690 --> 00:02:12.060
And then we're going to create a function

33
00:02:12.090 --> 00:02:18.380
that gets the starting inter
and the starting index is going to be page

34
00:02:18.410 --> 00:02:25.020
number minus one page size
and the ending index is going to be

35
00:02:25.050 --> 00:02:30.730
whatever starting index was plus the page
size so that we get that many elements.

36
00:02:30.760 --> 00:02:33.260
And then let's check that if starting

37
00:02:33.290 --> 00:02:38.820
index is more than or equal to the whole
list of items that we have,

38
00:02:38.850 --> 00:02:43.450
then we just want to return an empty
array because there's nothing to return.

39
00:02:43.480 --> 00:02:46.300
And otherwise we're going to use the items

40
00:02:46.330 --> 00:02:51.020
and slice it and give it the starting
index and give it ending index so that we

41
00:02:51.050 --> 00:02:56.940
get exactly
the part of the array of categories list

42
00:02:56.970 --> 00:03:04.140
that we're going to be using
that represents exactly that page's items.

43
00:03:04.170 --> 00:03:07.140
So then what we're going to have to do is

44
00:03:07.170 --> 00:03:12.060
we're going to have to display some items
on the page load and we're going to use

45
00:03:12.090 --> 00:03:18.040
effect for that and we're going to say
that on page load

46
00:03:19.720 --> 00:03:26.700
set the category list to pagination
and let's give it initial setup.

47
00:03:26.730 --> 00:03:30.610
So let's give it the categories
categories list.

48
00:03:30.640 --> 00:03:32.980
Let's say that page number is whatever

49
00:03:33.010 --> 00:03:40.220
category page is and let's say that page
size is whatever category page size is

50
00:03:40.250 --> 00:03:45.320
and then we're going to have to increase
the category page because we're going

51
00:03:45.350 --> 00:03:48.980
to be fetching the data
for the first page already.

52
00:03:49.010 --> 00:03:59.200
So we're going to say set category page
two, previous take plus one.

53
00:04:00.040 --> 00:04:05.340
Now if we save this, well first
we need to import the use effect.

54
00:04:05.370 --> 00:04:09.610
If we save this, let's check that we're
using category list here.

55
00:04:09.640 --> 00:04:12.500
Great, we should be able
to see the first four items.

56
00:04:12.530 --> 00:04:15.940
But when we scroll,
nothing is really happening.

57
00:04:15.970 --> 00:04:19.820
We don't have anything
for the pagination function here.

58
00:04:19.840 --> 00:04:22.260
So what we need to set up from our

59
00:04:22.280 --> 00:04:25.540
previous flat list knowledge,
I hope that you do remember.

60
00:04:25.570 --> 00:04:27.980
If not then you can always hop back

61
00:04:28.010 --> 00:04:32.700
to that video where we first
explored our flat list.

62
00:04:32.720 --> 00:04:35.220
We're going to need an on end reached

63
00:04:35.250 --> 00:04:38.180
threshold and we're going
to say that it's 50%.

64
00:04:38.210 --> 00:04:42.860
And whenever the user scrolls through
the 50% of the items that they have

65
00:04:42.890 --> 00:04:49.300
displayed, we're going to fetch more items
for them so that they don't have to wait

66
00:04:49.330 --> 00:04:54.340
up on the fetch once they
completely reach the end.

67
00:04:54.360 --> 00:05:00.820
And then we're going to say that on end
reached we're going to call a function.

68
00:05:00.840 --> 00:05:04.100
And what this function will do is first

69
00:05:04.130 --> 00:05:08.500
of all get the new data
and to get the new data we're going to use

70
00:05:08.530 --> 00:05:14.780
pagination and we're going to pass it
the categories list,

71
00:05:14.800 --> 00:05:20.300
we're going to pass it the current page
number and we're going to pass it

72
00:05:20.330 --> 00:05:28.220
category page and we'll pass
it the category page size.

73
00:05:28.250 --> 00:05:30.460
So this should get us the new data.

74
00:05:30.480 --> 00:05:35.100
But then we want to use this new data
to set the category list, right?

75
00:05:35.130 --> 00:05:41.700
So we're going to say if new data length
is more than zero and it did return us

76
00:05:41.730 --> 00:05:47.260
something other than an empty array,
then we want to resend the category list

77
00:05:47.290 --> 00:05:52.420
and we're going to grab the previous state
and we're going to say return an array

78
00:05:52.450 --> 00:05:58.820
with all the items in the previous
state plus the new data.

79
00:05:58.850 --> 00:06:01.140
And also we're going to have to update

80
00:06:01.170 --> 00:06:06.020
the page so that we're ready for the next
fetch when the user scrolls more.

81
00:06:06.040 --> 00:06:15.900
So we're going to say set category page to
previous state, previous state plus one.

82
00:06:15.920 --> 00:06:25.100
So now let's say that we console log here,
that user has reached the end and we are

83
00:06:25.130 --> 00:06:32.580
getting more data for page number
and then category page.

84
00:06:32.600 --> 00:06:35.140
And now let's save this

85
00:06:35.170 --> 00:06:42.300
and let's reload our application
and we see that once we reload.

86
00:06:42.330 --> 00:06:44.740
We have the first four items here.

87
00:06:44.770 --> 00:06:47.140
But if we start scrolling and we scroll

88
00:06:47.170 --> 00:06:51.760
through the half of the items,
we're going to see user has reached

89
00:06:51.790 --> 00:06:55.180
the end, we're getting more
data for page number two.

90
00:06:55.210 --> 00:07:00.460
And if we scroll more and we reach halfway
through our data again,

91
00:07:00.480 --> 00:07:05.660
we're going to see that we're getting
more data for page number three.

92
00:07:05.690 --> 00:07:12.700
And that's going to continue so
until we reach the end and we see the arts

93
00:07:12.730 --> 00:07:16.860
and craft supplies,
which is our last element here.

94
00:07:16.890 --> 00:07:23.340
And actually if we console log
categorylist length,

95
00:07:23.360 --> 00:07:28.680
which should tell us how many items are
inside our category,

96
00:07:30.480 --> 00:07:36.100
we should be able to see
that it increases up to 13.

97
00:07:36.130 --> 00:07:37.880
And

98
00:07:38.440 --> 00:07:44.260
we did get this item many more times
because we don't control when we're

99
00:07:44.290 --> 00:07:46.820
loading the data,
which we technically could.

100
00:07:46.850 --> 00:07:51.300
So we could say that we have an is loading

101
00:07:51.330 --> 00:08:00.740
and set is loading categories and set is
loading categories here which has a state

102
00:08:00.770 --> 00:08:08.380
of false here and we could say that
set is loading categories here is true

103
00:08:08.410 --> 00:08:16.580
and then once it is done with that,
it is false again.

104
00:08:16.600 --> 00:08:22.900
And then what we could do here is
the same.

105
00:08:22.920 --> 00:08:30.200
Let's set is loading categories to true

106
00:08:30.600 --> 00:08:34.380
and then let's set is loading categories

107
00:08:34.410 --> 00:08:39.720
to false and here we can have a check
and if we're already

108
00:08:40.680 --> 00:08:47.480
is loading categories, if it's true
we can return and not do anything.

109
00:08:48.080 --> 00:08:53.600
So now if we reload our application again,

110
00:08:54.960 --> 00:08:58.180
we can see that even if we scroll through

111
00:08:58.200 --> 00:09:02.820
really fast, we're going to be only
loading the categories

112
00:09:02.850 --> 00:09:08.420
when we're not actually calling
and updating the categories already.

113
00:09:08.440 --> 00:09:15.900
So we have a list of 13 items here and if
we go here, we actually have 13 items here

114
00:09:15.930 --> 00:09:19.700
as well in our reducer,
which means that our

115
00:09:19.730 --> 00:09:24.700
scrolling is working just fine
and we're able to paginate through

116
00:09:24.730 --> 00:09:28.700
the items and we're able to click
on the items and activate them.

117
00:09:28.730 --> 00:09:30.780
So this is great.

118
00:09:30.810 --> 00:09:35.220
We're all done with paginating our flat
list and what we're going to do

119
00:09:35.250 --> 00:09:41.660
in the next video is set up a new
reducer for our donation items.

120
00:09:41.690 --> 00:09:46.100
And I can't wait for that because our
categories are actually going to control

121
00:09:46.130 --> 00:09:50.900
which donation items are going
to be visible on the screen.

122
00:09:50.930 --> 00:09:54.840
So thanks so much for watching
and I'll see you in the next video.