1
00:00:03,000 --> 00:00:05,457
We're now using the page number when

2
00:00:05,457 --> 00:00:07,301
fetching data from the CMS,

3
00:00:07,369 --> 00:00:09,790
which means that, if we click next,

4
00:00:09,790 --> 00:00:12,489
we see different reviews on each page.

5
00:00:12,489 --> 00:00:14,871
But we still have a small problem,

6
00:00:14,871 --> 00:00:18,790
in that the user can navigate past the last page,

7
00:00:18,790 --> 00:00:21,597
and we want to prevent that from happening.

8
00:00:21,597 --> 00:00:24,128
We need to disable the Next link

9
00:00:24,128 --> 00:00:27,250
if the user is already on the last page.

10
00:00:27,250 --> 00:00:29,797
But to do that we first need to know

11
00:00:29,797 --> 00:00:32,661
how many pages there are in total.

12
00:00:32,661 --> 00:00:35,747
In fact, we could also display that information,

13
00:00:35,747 --> 00:00:39,895
showing "Page 1 of" whatever the total number is.

14
00:00:39,895 --> 00:00:43,241
The problem is, at the moment we just don't know.

15
00:00:43,241 --> 00:00:46,573
We'll need to get that information from Strapi.

16
00:00:46,573 --> 00:00:49,285
Let's reuse this standalone script,

17
00:00:49,285 --> 00:00:52,450
that we wrote to test API requests.

18
00:00:52,450 --> 00:00:54,984
But we want to use the same parameters

19
00:00:54,984 --> 00:00:57,905
we're now passing in the "getReviews" function,

20
00:00:57,905 --> 00:01:00,942
and see what response we get in this case.

21
00:01:00,942 --> 00:01:03,761
We'll need to set the "pageSize" value,

22
00:01:03,761 --> 00:01:05,759
and also the "page" number,

23
00:01:05,921 --> 00:01:08,430
although it defaults to 1 anyway.

24
00:01:08,430 --> 00:01:10,733
If we run the script in the terminal

25
00:01:10,733 --> 00:01:14,582
this will save the Strapi response to a JSON file,

26
00:01:14,582 --> 00:01:17,504
where we can easily see its full contents.

27
00:01:17,504 --> 00:01:19,853
In addition to the "data" array,

28
00:01:19,853 --> 00:01:23,012
the response also contains a "meta" object,

29
00:01:23,012 --> 00:01:25,632
with some "pagination" values.

30
00:01:25,632 --> 00:01:30,185
We can see that the total number of entries is 25,

31
00:01:30,185 --> 00:01:33,187
and we could use that number to calculate

32
00:01:33,187 --> 00:01:35,816
how many pages we need to display

33
00:01:35,816 --> 00:01:37,250
all those entries.

34
00:01:37,329 --> 00:01:41,476
But Strapi already returns a "pageCount" as well,

35
00:01:41,476 --> 00:01:44,885
based on the "pageSize" parameter we passed,

36
00:01:44,885 --> 00:01:48,558
so we can simply use that "pageCount" value.

37
00:01:48,558 --> 00:01:51,546
We need our "getReviews" function to return

38
00:01:51,546 --> 00:01:54,378
not just the array with all the reviews,

39
00:01:54,378 --> 00:01:56,290
but also an additional value.

40
00:01:56,290 --> 00:01:59,257
So let's change it to return an object,

41
00:01:59,257 --> 00:02:01,411
containing a "reviews" array,

42
00:02:01,411 --> 00:02:03,637
with the same data as before.

43
00:02:03,637 --> 00:02:06,911
But then we can add a "pageCount" property.

44
00:02:06,911 --> 00:02:09,283
Now, that value is returned in the

45
00:02:09,283 --> 00:02:11,378
"meta" object in the response,

46
00:02:11,448 --> 00:02:16,363
and we can access it as "meta.pagination.pageCount",

47
00:02:16,363 --> 00:02:18,795
because in the response it's inside

48
00:02:18,795 --> 00:02:20,463
the "pagination" object.

49
00:02:20,532 --> 00:02:23,871
So that's how in "getReviews" we can return

50
00:02:23,871 --> 00:02:25,968
both the "reviews" array and

51
00:02:25,968 --> 00:02:27,691
the "pageCount" number.

52
00:02:27,766 --> 00:02:30,476
Now, let me restart the dev server

53
00:02:30,476 --> 00:02:32,727
so we can test this change.

54
00:02:32,727 --> 00:02:35,931
Right now our page will probably be broken,

55
00:02:35,931 --> 00:02:39,147
because it still assumes that "getReviews"

56
00:02:39,147 --> 00:02:40,449
returns an array.

57
00:02:40,526 --> 00:02:42,792
But we now get an object instead,

58
00:02:43,218 --> 00:02:45,820
containing the "reviews" as a property.

59
00:02:45,820 --> 00:02:47,693
So that was easy to fix.

60
00:02:47,693 --> 00:02:49,507
But we'll need to do the same

61
00:02:49,507 --> 00:02:51,008
in the HomePage as well,

62
00:02:51,070 --> 00:02:54,397
because we also call "getReviews" in that page.

63
00:02:54,397 --> 00:02:57,030
Let's update this code to destructure

64
00:02:57,030 --> 00:02:58,453
the returned object,

65
00:02:58,524 --> 00:03:01,469
and define the "reviews" array that way.

66
00:03:01,469 --> 00:03:04,268
Ok, the Home page is working again.

67
00:03:04,268 --> 00:03:06,519
Let's go back to Reviews now,

68
00:03:06,519 --> 00:03:08,495
and finish what we started.

69
00:03:08,495 --> 00:03:10,736
Our goal was to know how many

70
00:03:10,736 --> 00:03:12,669
pages there are in total,

71
00:03:12,746 --> 00:03:15,322
and we can now get that information

72
00:03:15,322 --> 00:03:17,383
as the "pageCount" property.

73
00:03:17,456 --> 00:03:21,033
Let's display that number in the pagination bar.

74
00:03:21,138 --> 00:03:22,136
If we save,

75
00:03:22,136 --> 00:03:26,282
it now shows that we're on "Page 1 of 5".

76
00:03:26,282 --> 00:03:29,771
So we know that there are 5 pages in total,

77
00:03:29,771 --> 00:03:32,863
and we'll also be able to use that information

78
00:03:32,863 --> 00:03:34,476
to disable the next link

79
00:03:34,543 --> 00:03:36,741
once we reach the last page,

80
00:03:36,741 --> 00:03:39,597
stopping the user from going too far.

81
00:03:39,597 --> 00:03:42,496
But we'll do that part in the next video.

82
00:03:42,496 --> 00:03:44,034
The important thing is that

83
00:03:44,034 --> 00:03:47,432
we now have the "pageCount" information available.

84
00:03:47,432 --> 00:03:49,770
In fact, we could test this a bit

85
00:03:49,770 --> 00:03:52,107
more by changing the "PAGE_SIZE".

86
00:03:52,178 --> 00:03:54,890
If we set it to "10" for example,

87
00:03:54,890 --> 00:03:57,456
then there are 3 pages in total.

88
00:03:57,456 --> 00:04:00,763
Because we have 25 entries in the CMS.

89
00:04:00,763 --> 00:04:03,377
If we show 3 reviews per page,

90
00:04:03,377 --> 00:04:08,332
then we'll need 9 pages to display all 25 entries.

91
00:04:08,332 --> 00:04:09,625
So you can see that

92
00:04:09,625 --> 00:04:12,396
Strapi returns the right "pageCount",

93
00:04:12,396 --> 00:04:15,764
based on the "pageSize" parameter we pass.

94
00:04:15,764 --> 00:04:17,494
All we had to do was

95
00:04:17,494 --> 00:04:20,603
change "getReviews" to return an object,

96
00:04:20,603 --> 00:04:23,258
containing both the "reviews" array

97
00:04:23,258 --> 00:04:25,305
and the "pageCount" number.

98
00:04:25,381 --> 00:04:27,545
And that's how we can receive that

99
00:04:27,545 --> 00:04:29,517
information in the ReviewsPage.