1
00:00:03,000 --> 00:00:05,389
In this section we'll add pagination

2
00:00:05,389 --> 00:00:06,782
to this Reviews page,

3
00:00:06,849 --> 00:00:09,012
because at the moment we only

4
00:00:09,012 --> 00:00:11,175
display the latest 6 reviews,

5
00:00:11,250 --> 00:00:14,212
and there's no way for our users to see

6
00:00:14,212 --> 00:00:17,263
all the other articles we have in the CMS.

7
00:00:17,263 --> 00:00:19,524
In the process we'll learn some

8
00:00:19,524 --> 00:00:21,640
new Next.js features as well.

9
00:00:21,712 --> 00:00:23,910
Note that I have the dev server

10
00:00:23,910 --> 00:00:25,966
running here in the terminal.

11
00:00:26,036 --> 00:00:29,254
Now, let's open the code for the ReviewsPage,

12
00:00:29,254 --> 00:00:32,360
and think about how we can add pagination.

13
00:00:32,360 --> 00:00:35,809
For a start we'll need a bit of user interface

14
00:00:35,809 --> 00:00:37,688
showing the page number,

15
00:00:37,688 --> 00:00:41,204
and links to the next and previous pages.

16
00:00:41,204 --> 00:00:44,125
Let's add a simple "div" before the list,

17
00:00:44,125 --> 00:00:47,450
with a "span" showing the current page number,

18
00:00:47,450 --> 00:00:49,344
like "1" for example.

19
00:00:49,344 --> 00:00:51,401
Before that we can put a Link

20
00:00:51,401 --> 00:00:52,891
to the previous page,

21
00:00:52,962 --> 00:00:55,890
and I'll leave the "href" empty for the moment;

22
00:00:55,890 --> 00:00:59,446
we'll think about which URL to use in a minute.

23
00:00:59,446 --> 00:01:03,168
As for the text I'll use a "less than" character,

24
00:01:03,168 --> 00:01:05,802
which looks a bit like a left arrow.

25
00:01:05,802 --> 00:01:08,934
Let's put another link after the page number,

26
00:01:08,934 --> 00:01:11,790
this time with a "greater than" symbol,

27
00:01:11,790 --> 00:01:13,942
to indicate the next page.

28
00:01:13,942 --> 00:01:16,485
It could do with a little bit of styling.

29
00:01:16,485 --> 00:01:18,482
We can use flexbox to add some

30
00:01:18,482 --> 00:01:20,280
"gap" between the elements,

31
00:01:20,346 --> 00:01:23,094
and then put some padding at the bottom.

32
00:01:23,094 --> 00:01:26,204
Ok. It's pretty basic, but it's a start.

33
00:01:26,204 --> 00:01:29,199
Now, what should happen when we click next?

34
00:01:29,199 --> 00:01:31,474
We need to decide which "href"

35
00:01:31,474 --> 00:01:32,991
to put on this Link.

36
00:01:33,067 --> 00:01:35,771
We still want to show the "/reviews" page,

37
00:01:35,771 --> 00:01:39,010
so the path can be the same as the current route,

38
00:01:39,010 --> 00:01:41,617
but then we could add the "page" number

39
00:01:41,617 --> 00:01:43,957
as a parameter in the query string,

40
00:01:44,024 --> 00:01:47,107
passing "page=2" for example.

41
00:01:47,107 --> 00:01:50,424
This is a common way to implement pagination.

42
00:01:50,424 --> 00:01:52,384
If we click the next arrow,

43
00:01:52,384 --> 00:01:55,323
you can see that the URL in the browser changed

44
00:01:55,323 --> 00:01:59,044
and now includes the "page=2" parameter.

45
00:01:59,044 --> 00:02:00,964
The question at this point is:

46
00:02:00,964 --> 00:02:03,067
how can we read that parameter

47
00:02:03,067 --> 00:02:05,029
value in our page component?

48
00:02:05,099 --> 00:02:08,667
We know that each component receives some "props".

49
00:02:08,667 --> 00:02:11,186
Let's log these "props" when it's rendered,

50
00:02:11,345 --> 00:02:13,906
instead of printing all the reviews.

51
00:02:13,906 --> 00:02:17,062
If we save, and check the logs in the terminal,

52
00:02:17,062 --> 00:02:19,935
the page in the browser reloaded automatically,

53
00:02:19,935 --> 00:02:22,659
and you can see that "props" contains

54
00:02:22,659 --> 00:02:24,425
a "searchParams" object,

55
00:02:24,499 --> 00:02:27,913
with the "page" value we passed in the URL.

56
00:02:27,913 --> 00:02:29,872
Note that there's also another

57
00:02:29,872 --> 00:02:31,505
property called "params",

58
00:02:31,570 --> 00:02:35,399
but "page" is inside "searchParams" instead.

59
00:02:35,399 --> 00:02:39,271
"searchParams" are the values in the query string,

60
00:02:39,271 --> 00:02:41,560
that are those passed after the

61
00:02:41,560 --> 00:02:43,406
question mark in the URL.

62
00:02:43,480 --> 00:02:45,378
While "params" is for values

63
00:02:45,378 --> 00:02:47,141
that are part of the path,

64
00:02:47,209 --> 00:02:50,519
like the "slug" we use in the ReviewPage.

65
00:02:50,519 --> 00:02:52,357
Here we extract the "slug"

66
00:02:52,357 --> 00:02:54,124
from the "params" object.

67
00:02:54,195 --> 00:02:57,687
So "params" really means path parameters,

68
00:02:57,687 --> 00:02:59,836
while those in the query string

69
00:02:59,836 --> 00:03:01,639
are called "searchParams",

70
00:03:01,708 --> 00:03:04,190
and that's what we want to use in this case.

71
00:03:04,190 --> 00:03:07,870
Now, note that the "page" value is a string,

72
00:03:07,870 --> 00:03:10,445
not a number like you might expect.

73
00:03:10,445 --> 00:03:12,945
That's because the URL is a string,

74
00:03:12,945 --> 00:03:15,155
so any values passed as part

75
00:03:15,155 --> 00:03:16,971
of it are also strings.

76
00:03:17,050 --> 00:03:18,991
If we want a number we'll

77
00:03:18,991 --> 00:03:20,932
need to parse that string

78
00:03:21,010 --> 00:03:24,069
and let's assign it to a "page" variable.

79
00:03:24,069 --> 00:03:26,567
We also need to be careful that the

80
00:03:26,567 --> 00:03:28,636
"page" parameter is optional.

81
00:03:28,707 --> 00:03:31,357
We can still link to the "/reviews" route

82
00:03:31,357 --> 00:03:33,749
without passing any "page" parameter.

83
00:03:33,814 --> 00:03:36,083
So only if it is set

84
00:03:36,083 --> 00:03:38,537
we can call "parseInt" to convert

85
00:03:38,537 --> 00:03:40,396
the string into a number.

86
00:03:40,470 --> 00:03:43,087
Otherwise we can default to "1",

87
00:03:43,087 --> 00:03:45,033
to show the first page.

88
00:03:45,033 --> 00:03:46,776
Let me log this variable,

89
00:03:46,776 --> 00:03:48,378
and check what we get.

90
00:03:48,378 --> 00:03:49,828
It's printing "2",

91
00:03:49,828 --> 00:03:53,245
which shows it parsed the parameter correctly.

92
00:03:53,245 --> 00:03:55,318
We can now display the "page"

93
00:03:55,318 --> 00:03:57,319
value in the pagination bar.

94
00:03:57,390 --> 00:03:59,900
And if we save, of course it shows

95
00:03:59,900 --> 00:04:01,671
"Page 2" in the browser.

96
00:04:01,745 --> 00:04:04,312
At this point we can also calculate

97
00:04:04,312 --> 00:04:05,852
the next page number,

98
00:04:05,925 --> 00:04:08,458
and use it in the Link "href":

99
00:04:08,458 --> 00:04:11,298
the next will be "page + 1".

100
00:04:11,298 --> 00:04:13,448
And we want to do something similar

101
00:04:13,448 --> 00:04:14,800
for the previous link,

102
00:04:15,605 --> 00:04:18,605
although this will be "page - 1".

103
00:04:18,605 --> 00:04:20,194
Let's go and test this.

104
00:04:20,721 --> 00:04:24,022
If we click Next, that increases the number.

105
00:04:24,022 --> 00:04:25,964
And if we click Previous, of

106
00:04:25,964 --> 00:04:27,698
course we move backwards.

107
00:04:27,767 --> 00:04:29,511
So that's working fine.

108
00:04:29,511 --> 00:04:31,437
But there's nothing stopping us

109
00:04:31,437 --> 00:04:33,239
from clicking Previous again,

110
00:04:33,301 --> 00:04:35,609
and going into negative numbers.

111
00:04:35,609 --> 00:04:38,310
Also, since it's a URL parameter,

112
00:04:38,310 --> 00:04:42,244
somebody could pass an invalid value like "xyz",

113
00:04:42,244 --> 00:04:44,911
which results in "Page NaN",

114
00:04:44,911 --> 00:04:47,528
because parsing an invalid number in

115
00:04:47,528 --> 00:04:50,000
JavaScript returns "Not a Number".

116
00:04:50,072 --> 00:04:52,869
Let's make this code a bit more robust,

117
00:04:52,869 --> 00:04:54,970
by writing a separate function

118
00:04:54,970 --> 00:04:56,932
to parse the page parameter.

119
00:04:57,002 --> 00:04:59,704
We'll take the string value as input,

120
00:04:59,704 --> 00:05:02,960
and first of all we need to check if it's set.

121
00:05:02,960 --> 00:05:05,716
If that's the case we can try parsing

122
00:05:05,716 --> 00:05:07,504
it as an integer number.

123
00:05:08,136 --> 00:05:11,886
But then we need to check if the result is finite,

124
00:05:11,886 --> 00:05:15,875
which will return false if "page" is Not a Number.

125
00:05:15,875 --> 00:05:19,051
And we also want to make sure it's greater than 0,

126
00:05:19,051 --> 00:05:22,746
because page numbers start at 1 obviously.

127
00:05:22,746 --> 00:05:25,922
This way we only return the value passed

128
00:05:25,922 --> 00:05:28,622
in the URL if it's a valid number.

129
00:05:28,702 --> 00:05:32,401
In all other cases we can return "1" instead.

130
00:05:32,401 --> 00:05:34,517
Now we can use this function to

131
00:05:34,517 --> 00:05:36,292
parse the parameter value,

132
00:05:36,536 --> 00:05:38,455
replacing our previous code

133
00:05:38,455 --> 00:05:40,304
that was a bit too simple.

134
00:05:40,375 --> 00:05:42,714
Ok, this should work better.

135
00:05:42,714 --> 00:05:46,561
You can see that it's showing "Page 1" for "xyz",

136
00:05:46,561 --> 00:05:50,441
so any invalid value will simply be ignored.

137
00:05:50,441 --> 00:05:53,330
Likewise, if we follow the NavBar link,

138
00:05:53,330 --> 00:05:56,153
there is no "page" parameter in the URL

139
00:05:56,153 --> 00:05:58,936
and therefore we show the first page.

140
00:05:58,936 --> 00:06:01,167
But if we click the Next link,

141
00:06:01,167 --> 00:06:02,803
this still works fine,

142
00:06:02,878 --> 00:06:05,771
and of course we can go backwards as well.

143
00:06:05,771 --> 00:06:09,051
Now, on Page 1 we can still click Previous,

144
00:06:09,051 --> 00:06:13,116
and this goes to a URL with "page=0",

145
00:06:13,116 --> 00:06:15,711
so it's not quite perfect yet.

146
00:06:15,711 --> 00:06:18,717
Ideally we should disable the Previous link

147
00:06:18,717 --> 00:06:21,389
if we're already on the first page.

148
00:06:21,389 --> 00:06:23,852
But we'll worry about that later.

149
00:06:23,852 --> 00:06:27,085
This pagination bar is good enough for the moment.

150
00:06:27,085 --> 00:06:29,715
The main functionality we're still missing

151
00:06:29,715 --> 00:06:31,713
is fetching the right reviews

152
00:06:31,713 --> 00:06:33,367
for each different page.

153
00:06:33,436 --> 00:06:36,035
We'll see how to do that in the next video.