1
00:00:03,000 --> 00:00:04,983
We added a simple pagination

2
00:00:04,983 --> 00:00:06,684
bar to our Reviews page,

3
00:00:06,755 --> 00:00:09,034
that allows users to go to the

4
00:00:09,034 --> 00:00:10,857
next and previous pages.

5
00:00:10,933 --> 00:00:13,163
However, at the moment we always

6
00:00:13,163 --> 00:00:15,044
display the same 6 reviews,

7
00:00:15,114 --> 00:00:17,616
no matter what the "page" number is.

8
00:00:17,616 --> 00:00:19,947
Let's see how to fetch different

9
00:00:19,947 --> 00:00:21,258
data from the CMS.

10
00:00:21,331 --> 00:00:23,666
In the "getReviews" function

11
00:00:23,666 --> 00:00:26,384
we already pass a "pageSize" parameter

12
00:00:26,384 --> 00:00:27,815
when calling Strapi,

13
00:00:27,887 --> 00:00:30,931
to limit how many results we get back.

14
00:00:30,931 --> 00:00:33,424
But we can also pass another parameter,

15
00:00:33,424 --> 00:00:36,785
if we look at the REST API documentation.

16
00:00:36,785 --> 00:00:39,171
When using "pagination by page"

17
00:00:39,171 --> 00:00:41,352
we can pass a "page" parameter,

18
00:00:41,352 --> 00:00:44,071
that is in fact the page number,

19
00:00:44,071 --> 00:00:45,601
and defaults to 1.

20
00:00:45,686 --> 00:00:47,860
There's also a different approach,

21
00:00:47,860 --> 00:00:49,778
called "pagination by offset",

22
00:00:49,842 --> 00:00:52,363
where you pass "start" and "limit"

23
00:00:52,363 --> 00:00:53,772
parameters instead.

24
00:00:53,847 --> 00:00:57,515
This is more similar to how databases work.

25
00:00:57,515 --> 00:00:59,904
But we'll use "pagination by page"

26
00:00:59,904 --> 00:01:01,520
that's slightly easier.

27
00:01:01,590 --> 00:01:03,200
The only difference is that

28
00:01:03,200 --> 00:01:06,598
in this case you pass which page number you want,

29
00:01:06,598 --> 00:01:09,291
while with the "offset" approach you pass

30
00:01:09,291 --> 00:01:12,323
the index of the first entry to be returned,

31
00:01:12,323 --> 00:01:14,110
which you can easily calculate

32
00:01:14,110 --> 00:01:17,452
based on how many entries per page you want.

33
00:01:17,452 --> 00:01:20,173
Anyway, we'll use the "page" number,

34
00:01:20,173 --> 00:01:22,938
so let's add it as an argument to this function,

35
00:01:22,938 --> 00:01:24,558
and then we can pass it in

36
00:01:24,558 --> 00:01:26,054
the "pagination" options

37
00:01:26,116 --> 00:01:28,721
when sending the request to Strapi.

38
00:01:28,721 --> 00:01:31,274
Now, since we're changing the arguments

39
00:01:31,274 --> 00:01:34,627
we better check where this function is being used,

40
00:01:34,627 --> 00:01:37,997
to make sure we don't break some existing code.

41
00:01:37,997 --> 00:01:40,318
We're calling it in the ReviewsPage,

42
00:01:40,318 --> 00:01:42,712
that's what we're currently working on.

43
00:01:42,712 --> 00:01:44,876
But also in the HomePage,

44
00:01:44,876 --> 00:01:47,525
and we don't need pagination there,

45
00:01:47,525 --> 00:01:50,576
we simply display the latest 3 reviews,

46
00:01:50,576 --> 00:01:51,671
and that's it.

47
00:01:51,749 --> 00:01:53,729
So, what happens if we leave

48
00:01:53,729 --> 00:01:55,284
the HomePage as it is?

49
00:01:55,354 --> 00:01:57,167
It will not pass a second

50
00:01:57,167 --> 00:01:58,980
argument to "getReviews",

51
00:01:59,053 --> 00:02:01,364
and that should be fine I think,

52
00:02:01,364 --> 00:02:04,787
because if the "page" argument is undefined,

53
00:02:04,787 --> 00:02:07,604
then it will not be sent in the request,

54
00:02:07,604 --> 00:02:11,167
and therefore Strapi should default to page 1.

55
00:02:11,167 --> 00:02:13,270
We can treat the "page" argument

56
00:02:13,270 --> 00:02:15,176
to this function as optional.

57
00:02:15,241 --> 00:02:16,991
But let me check if it does

58
00:02:16,991 --> 00:02:18,481
actually work that way,

59
00:02:18,546 --> 00:02:21,396
by uncommenting this log statement

60
00:02:21,396 --> 00:02:24,294
that will print the full request "url".

61
00:02:24,294 --> 00:02:25,773
Let me show the logs,

62
00:02:25,773 --> 00:02:27,419
and go to Home.

63
00:02:27,543 --> 00:02:29,986
The page still displays correctly,

64
00:02:29,986 --> 00:02:31,376
and if we look at the logs

65
00:02:31,376 --> 00:02:33,238
we can see that it's passing

66
00:02:33,238 --> 00:02:35,100
the "pageSize" in the "url",

67
00:02:35,166 --> 00:02:37,703
but there is no "page" parameter.

68
00:02:37,703 --> 00:02:40,313
So it does work as I expected.

69
00:02:40,313 --> 00:02:43,491
We can now go and update the ReviewsPage.

70
00:02:43,491 --> 00:02:46,479
Here we do want to pass the "page" number

71
00:02:46,479 --> 00:02:49,490
as the second argument to "getReviews".

72
00:02:49,490 --> 00:02:51,363
And if we go back to the Reviews

73
00:02:51,363 --> 00:02:52,534
page in the browser,

74
00:02:52,593 --> 00:02:54,650
it's still working fine.

75
00:02:54,650 --> 00:02:57,021
This time in the logs we can see that

76
00:02:57,021 --> 00:03:00,602
the "url" does include the "page" parameter.

77
00:03:00,602 --> 00:03:03,472
This means that, if we go to the next page,

78
00:03:03,472 --> 00:03:05,850
in theory it should load different

79
00:03:05,850 --> 00:03:07,109
data from the CMS.

80
00:03:07,179 --> 00:03:08,937
But looks like the browser

81
00:03:08,937 --> 00:03:10,695
is showing cached content.

82
00:03:10,763 --> 00:03:13,600
Sometimes you just need to click reload.

83
00:03:13,600 --> 00:03:16,474
There you go: we now see different reviews.

84
00:03:16,474 --> 00:03:18,519
And the request "url" has

85
00:03:18,519 --> 00:03:20,563
"page: 2" as a parameter.

86
00:03:20,645 --> 00:03:23,184
So it should now fetch the right data

87
00:03:23,184 --> 00:03:25,311
for each different page number.

88
00:03:25,379 --> 00:03:27,374
And that's the main pagination

89
00:03:27,374 --> 00:03:28,837
functionality working.

90
00:03:28,904 --> 00:03:32,584
Now, rather than hard-coding the number 6 here,

91
00:03:32,584 --> 00:03:35,009
let me define a separate constant,

92
00:03:35,009 --> 00:03:37,170
we can call it "PAGE_SIZE".

93
00:03:37,170 --> 00:03:38,937
This way it will be clearer

94
00:03:38,937 --> 00:03:42,393
what the first "getReviews" argument actually is.

95
00:03:42,393 --> 00:03:44,782
That was just a bit of refactoring,

96
00:03:44,782 --> 00:03:46,590
it should make no different

97
00:03:46,590 --> 00:03:48,332
in terms of functionality.

98
00:03:48,399 --> 00:03:51,702
We can see 6 different reviews on each page.

99
00:03:51,702 --> 00:03:55,429
Of course, the last page may have less than 6.

100
00:03:55,429 --> 00:03:57,615
Now, our pagination feature

101
00:03:57,615 --> 00:03:59,720
is not quite complete yet.

102
00:03:59,801 --> 00:04:02,547
There's nothing stopping us from clicking next,

103
00:04:02,547 --> 00:04:05,627
even though there are no more pages available.

104
00:04:05,627 --> 00:04:08,760
Ideally we should disable the next link

105
00:04:08,760 --> 00:04:10,913
once we reach the last page.

106
00:04:10,913 --> 00:04:12,685
We'll take care of that in the

107
00:04:12,685 --> 00:04:14,280
following couple of videos.

108
00:04:14,339 --> 00:04:17,156
But we did implement the main functionality,

109
00:04:17,156 --> 00:04:19,649
that is displaying different reviews

110
00:04:19,649 --> 00:04:21,103
for each page number.

111
00:04:21,173 --> 00:04:23,209
We're doing that by passing the

112
00:04:23,209 --> 00:04:24,981
"page" parameter to Strapi.

113
00:04:25,047 --> 00:04:27,638
By the way, let me comment out the line

114
00:04:27,638 --> 00:04:30,163
where we log the "url" every time.

115
00:04:30,163 --> 00:04:31,979
But in "getReviews"

116
00:04:31,979 --> 00:04:35,953
we accept the "page" number and send it to Strapi.

117
00:04:35,953 --> 00:04:38,089
And then in the ReviewsPage

118
00:04:38,089 --> 00:04:40,671
we pass the "page" number extracted

119
00:04:40,671 --> 00:04:42,368
from the "searchParams"

120
00:04:42,441 --> 00:04:45,241
as the second argument to "getReviews".