1
00:00:03,000 --> 00:00:05,756
We're now getting the "pageCount" property

2
00:00:05,756 --> 00:00:07,397
from the Strapi response,

3
00:00:07,462 --> 00:00:09,352
so we can display how many

4
00:00:09,352 --> 00:00:11,169
pages there are in total.

5
00:00:11,242 --> 00:00:14,242
The final step is to use that information

6
00:00:14,242 --> 00:00:16,566
to disable the next link when

7
00:00:16,566 --> 00:00:18,489
we get to the last page,

8
00:00:18,569 --> 00:00:21,395
preventing users from going past it.

9
00:00:21,395 --> 00:00:23,901
Since we need to modify these links,

10
00:00:23,901 --> 00:00:26,437
we could also make them look a bit nicer,

11
00:00:26,437 --> 00:00:28,962
by using some icons for example.

12
00:00:28,962 --> 00:00:31,538
Now, there are really no new concepts

13
00:00:31,538 --> 00:00:33,071
involved in this task,

14
00:00:33,140 --> 00:00:36,102
so it's something you could do as an exercise,

15
00:00:36,102 --> 00:00:37,067
if you want to.

16
00:00:37,132 --> 00:00:39,128
To make it easier, I'll split

17
00:00:39,128 --> 00:00:40,848
it into 3 separate steps.

18
00:00:40,917 --> 00:00:43,098
First of all, we want to move this

19
00:00:43,098 --> 00:00:45,151
"div" into a separate component,

20
00:00:45,216 --> 00:00:47,970
because it's going to get a bit more complex.

21
00:00:47,970 --> 00:00:51,010
So under "components" let's create a new file,

22
00:00:51,010 --> 00:00:54,022
called "PaginationBar.jsx".

23
00:00:54,330 --> 00:00:57,081
Your first task is to move the existing

24
00:00:57,081 --> 00:00:59,125
code into that new component,

25
00:00:59,196 --> 00:01:02,308
and then insert the PaginationBar here.

26
00:01:02,308 --> 00:01:05,257
Note that you'll need to pass it a few props:

27
00:01:05,257 --> 00:01:06,704
the "page" number,

28
00:01:06,704 --> 00:01:08,906
as well as the "pageCount".

29
00:01:08,906 --> 00:01:12,088
Since it will be a separate, reusable component,

30
00:01:12,088 --> 00:01:15,607
we should also pass it the path where to link to.

31
00:01:15,607 --> 00:01:18,403
I'll call this the "href" prop.

32
00:01:18,403 --> 00:01:19,831
If you want to try this,

33
00:01:19,831 --> 00:01:22,587
pause this video now, and go and do it.

34
00:01:22,587 --> 00:01:28,561
I'll show you my solution in about 3 seconds.

35
00:01:28,561 --> 00:01:31,773
Ok, here's my PaginationBar component.

36
00:01:31,773 --> 00:01:34,299
It returns the same JSX elements

37
00:01:34,299 --> 00:01:36,351
we had in the ReviewsPage,

38
00:01:36,430 --> 00:01:40,613
but taking the "page", and "pageCount" as props.

39
00:01:40,613 --> 00:01:42,377
And also the "href",

40
00:01:42,377 --> 00:01:44,596
that I'm using as the route path

41
00:01:44,596 --> 00:01:46,815
for the previous and next links.

42
00:01:46,884 --> 00:01:49,682
This way we could use this PaginationBar

43
00:01:49,682 --> 00:01:51,011
in different pages,

44
00:01:51,081 --> 00:01:54,429
each one with a different route as "href".

45
00:01:54,429 --> 00:01:57,713
The new component is rendered in the ReviewsPage,

46
00:01:57,713 --> 00:02:00,866
passing "/reviews" as the "href",

47
00:02:00,866 --> 00:02:04,637
along with the "page" and "pageCount" numbers.

48
00:02:04,637 --> 00:02:07,356
Since we just moved some code around,

49
00:02:07,356 --> 00:02:10,154
everything should still look the same as before,

50
00:02:10,154 --> 00:02:12,220
and work in the same way too,

51
00:02:12,220 --> 00:02:14,763
linking to the right page numbers.

52
00:02:14,763 --> 00:02:18,236
Ok, as the second step of this exercise,

53
00:02:18,236 --> 00:02:20,710
I'd like to replace the "less than"

54
00:02:20,710 --> 00:02:22,407
and "greater than" signs

55
00:02:22,478 --> 00:02:25,288
with some nicer icons instead.

56
00:02:25,288 --> 00:02:27,419
If you remember, we did use an

57
00:02:27,419 --> 00:02:29,408
icon already in our project:

58
00:02:29,479 --> 00:02:32,841
in the ShareLinkButton component we import

59
00:02:32,841 --> 00:02:36,775
the LinkIcon from the Heroicons library.

60
00:02:36,775 --> 00:02:38,734
Let me show you this in the browser.

61
00:02:38,734 --> 00:02:40,831
In each ReviewPage we display

62
00:02:40,831 --> 00:02:42,421
a "Share link" button,

63
00:02:42,494 --> 00:02:44,794
and it includes a little icon.

64
00:02:44,794 --> 00:02:47,562
We also set some styles on the button,

65
00:02:47,562 --> 00:02:49,385
like a rounded border,

66
00:02:49,385 --> 00:02:52,215
and to change colors on mouse over.

67
00:02:52,215 --> 00:02:54,747
We might want to use the same styles

68
00:02:54,747 --> 00:02:56,436
on the pagination links,

69
00:02:56,506 --> 00:02:59,137
to make the user interface consistent.

70
00:02:59,137 --> 00:03:00,577
As for the icons,

71
00:03:00,723 --> 00:03:04,758
the Heroicons library includes some "chevrons".

72
00:03:04,758 --> 00:03:07,322
We could use the "ChevronLeftIcon"

73
00:03:07,322 --> 00:03:08,981
for the previous link,

74
00:03:09,056 --> 00:03:11,929
and "ChevronRight" for the next page.

75
00:03:11,929 --> 00:03:15,742
We can then apply these same styles on each Link.

76
00:03:15,742 --> 00:03:18,144
Although we don't need flexbox.

77
00:03:18,144 --> 00:03:22,304
This button contains both an icon and some text,

78
00:03:22,304 --> 00:03:24,922
but in the PaginationBar each Link

79
00:03:24,922 --> 00:03:27,002
will only contain the icon.

80
00:03:27,079 --> 00:03:30,475
Now, since we need the same styles on both Links,

81
00:03:30,475 --> 00:03:33,466
I suggest extracting a separate component,

82
00:03:33,466 --> 00:03:35,657
let's call it "PaginationLink",

83
00:03:35,886 --> 00:03:38,782
where we can set the right CSS classes.

84
00:03:38,782 --> 00:03:41,321
This way you don't have to duplicate

85
00:03:41,321 --> 00:03:43,508
the same styles in both places.

86
00:03:43,579 --> 00:03:45,845
If you want to implement this step,

87
00:03:45,845 --> 00:03:48,497
that is use the Chevron icons

88
00:03:48,497 --> 00:03:52,377
and apply the same styles as the ShareLinkButton,

89
00:03:52,377 --> 00:03:54,470
go ahead and try this now.

90
00:03:54,470 --> 00:03:59,879
I'll show you my code in a few seconds.

91
00:03:59,879 --> 00:04:01,933
And here's what I've done.

92
00:04:01,933 --> 00:04:03,834
The PaginationLink simply

93
00:04:03,834 --> 00:04:05,735
wraps the Link component,

94
00:04:05,811 --> 00:04:08,433
setting the Tailwind CSS classes

95
00:04:08,433 --> 00:04:10,974
taken from the ShareLinkButton.

96
00:04:11,056 --> 00:04:13,114
Then in the PaginationBar

97
00:04:13,114 --> 00:04:15,663
I'm showing two PaginationLinks

98
00:04:15,663 --> 00:04:19,916
containing ChevronLeft and ChevronRight icons,

99
00:04:19,916 --> 00:04:23,549
that I've imported from the Heroicons package.

100
00:04:23,549 --> 00:04:25,868
You can see the result in the browser.

101
00:04:25,868 --> 00:04:29,075
Each link looks a bit more like a button now,

102
00:04:29,075 --> 00:04:31,009
and it will change style when

103
00:04:31,009 --> 00:04:32,744
we move the mouse over it.

104
00:04:32,811 --> 00:04:34,988
The functionality should still work

105
00:04:34,988 --> 00:04:37,256
exactly like it did before.

106
00:04:37,256 --> 00:04:40,054
Ok, we're ready for the final step,

107
00:04:40,054 --> 00:04:42,192
that is disabling each link when

108
00:04:42,192 --> 00:04:43,929
it shouldn't be clickable.

109
00:04:43,996 --> 00:04:48,004
If we're on page 1 then there is no previous page,

110
00:04:48,004 --> 00:04:49,983
and if we're on the last page

111
00:04:49,983 --> 00:04:52,748
then the next link should be disabled.

112
00:04:52,748 --> 00:04:54,609
The way I would implement this

113
00:04:54,609 --> 00:04:58,400
is by adding an "enabled" prop to each Link.

114
00:04:58,400 --> 00:05:00,682
Now, the tricky part is that

115
00:05:00,682 --> 00:05:03,631
there is no "disabled" attribute on a Link,

116
00:05:03,631 --> 00:05:06,864
unlike for an HTML button for example.

117
00:05:06,864 --> 00:05:09,207
So to show a disabled link

118
00:05:09,207 --> 00:05:12,265
we actually need to render a different element.

119
00:05:12,265 --> 00:05:14,068
What we can do is check:

120
00:05:14,068 --> 00:05:16,177
if "enabled" is false

121
00:05:16,893 --> 00:05:19,166
then we render a different element.

122
00:05:19,290 --> 00:05:22,509
Instead of a Link we can use a simple "span",

123
00:05:22,509 --> 00:05:24,309
without the "href".

124
00:05:24,438 --> 00:05:26,986
I'll leave it to you to change the styles

125
00:05:26,986 --> 00:05:29,327
to make it look like it's disabled.

126
00:05:29,327 --> 00:05:32,120
For example you can choose a lighter

127
00:05:32,120 --> 00:05:34,060
shade for the text color.

128
00:05:34,137 --> 00:05:36,594
Then you need to pass the "enabled"

129
00:05:36,594 --> 00:05:38,559
prop to each PaginationLink.

130
00:05:38,629 --> 00:05:41,423
If you want to try this, go ahead now.

131
00:05:41,423 --> 00:05:46,865
I'll reveal the solution in a few moments.

132
00:05:46,865 --> 00:05:48,642
So, here's my code.

133
00:05:48,642 --> 00:05:51,677
I'm setting the previous link to be "enabled"

134
00:05:51,677 --> 00:05:55,218
only if the "page" number is greater than 1.

135
00:05:55,218 --> 00:05:58,329
And the next link if "page" is less

136
00:05:58,329 --> 00:06:00,728
than the total "pageCount".

137
00:06:00,817 --> 00:06:03,104
Otherwise they will be disabled.

138
00:06:03,104 --> 00:06:05,790
Then in the PaginationLink component

139
00:06:05,790 --> 00:06:09,158
I changed the text to "slate-300"

140
00:06:09,158 --> 00:06:12,609
so it will show as grayed out when disabled.

141
00:06:12,609 --> 00:06:16,117
I also added the "cursor-not-allowed" class,

142
00:06:16,117 --> 00:06:18,057
which means that, if you move

143
00:06:18,057 --> 00:06:19,863
the mouse over that element

144
00:06:19,930 --> 00:06:21,662
the cursor changes to show

145
00:06:21,662 --> 00:06:23,261
that it's not clickable.

146
00:06:23,327 --> 00:06:26,834
On Page 1, the previous link is disabled.

147
00:06:26,834 --> 00:06:29,983
We can click next, and go to Page 2.

148
00:06:29,983 --> 00:06:32,104
And at this point, the previous

149
00:06:32,104 --> 00:06:33,472
link is now enabled.

150
00:06:33,540 --> 00:06:35,215
As for the next one,

151
00:06:35,215 --> 00:06:37,408
it should become disabled once

152
00:06:37,408 --> 00:06:39,162
we get to the last page.

153
00:06:39,235 --> 00:06:42,455
So we can no longer go beyond the limit.

154
00:06:42,455 --> 00:06:46,139
And this is the PaginationBar fully working.

155
00:06:46,139 --> 00:06:48,003
Now, I should mention that

156
00:06:48,003 --> 00:06:50,758
there's an important thing still missing here,

157
00:06:50,758 --> 00:06:52,826
and that is accessibility.

158
00:06:52,826 --> 00:06:56,118
At the moment, each link only shows an icon,

159
00:06:56,118 --> 00:06:58,358
so if somebody is browsing our

160
00:06:58,358 --> 00:07:00,599
website using a screen reader,

161
00:07:00,674 --> 00:07:03,166
these links will not be accessible.

162
00:07:03,166 --> 00:07:04,894
We should really add some

163
00:07:04,894 --> 00:07:06,623
text describing the link,

164
00:07:06,692 --> 00:07:08,745
like "Previous Page", that can

165
00:07:08,745 --> 00:07:10,730
be read by the screen reader.

166
00:07:10,798 --> 00:07:13,594
And we want to do the same for the other link,

167
00:07:13,594 --> 00:07:16,087
this time saying "Next Page".

168
00:07:16,154 --> 00:07:17,441
But if we save,

169
00:07:17,441 --> 00:07:20,527
that additional text messes up our layout.

170
00:07:20,527 --> 00:07:21,767
What we can do is

171
00:07:21,767 --> 00:07:25,328
only provide this description for screen readers,

172
00:07:25,328 --> 00:07:27,958
without actually displaying it visually.

173
00:07:27,958 --> 00:07:31,218
Tailwind includes a class called "sr-only"

174
00:07:31,218 --> 00:07:34,505
that's short for "screen readers only".

175
00:07:34,505 --> 00:07:38,170
If we apply this style to both link descriptions,

176
00:07:38,170 --> 00:07:40,951
you'll see that they're no longer visible.

177
00:07:40,951 --> 00:07:43,346
But the text is still there, and

178
00:07:43,346 --> 00:07:45,667
will be used by screen readers.

179
00:07:45,742 --> 00:07:47,461
There are a few other attributes

180
00:07:47,461 --> 00:07:49,073
we could add to these elements

181
00:07:49,127 --> 00:07:51,582
to improve accessibility support.

182
00:07:51,582 --> 00:07:54,308
And we should also update the page title,

183
00:07:54,308 --> 00:07:56,382
to say which page number we're

184
00:07:56,382 --> 00:07:57,834
currently displaying,

185
00:07:57,903 --> 00:08:00,370
so screen readers will read the new

186
00:08:00,370 --> 00:08:02,343
title when the page changes.

187
00:08:02,414 --> 00:08:04,358
But I'll stop here for this video,

188
00:08:04,358 --> 00:08:06,411
otherwise it gets too long.

189
00:08:06,411 --> 00:08:08,554
I just wanted you to be aware that

190
00:08:08,554 --> 00:08:10,689
there's a bit more work required

191
00:08:10,689 --> 00:08:11,956
in a real world app

192
00:08:12,023 --> 00:08:14,049
to make it fully accessible.

193
00:08:14,049 --> 00:08:16,130
Other than that, our pagination

194
00:08:16,130 --> 00:08:18,211
implementation is now complete.