We're now getting the "pageCount" property
from the Strapi response,
so we can display how many
pages there are in total.
The final step is to use that information
to disable the next link when
we get to the last page,
preventing users from going past it.
Since we need to modify these links,
we could also make them look a bit nicer,
by using some icons for example.
Now, there are really no new concepts
involved in this task,
so it's something you could do as an exercise,
if you want to.
To make it easier, I'll split
it into 3 separate steps.
First of all, we want to move this
"div" into a separate component,
because it's going to get a bit more complex.
So under "components" let's create a new file,
called "PaginationBar.jsx".
Your first task is to move the existing
code into that new component,
and then insert the PaginationBar here.
Note that you'll need to pass it a few props:
the "page" number,
as well as the "pageCount".
Since it will be a separate, reusable component,
we should also pass it the path where to link to.
I'll call this the "href" prop.
If you want to try this,
pause this video now, and go and do it.
I'll show you my solution in about 3 seconds.
Ok, here's my PaginationBar component.
It returns the same JSX elements
we had in the ReviewsPage,
but taking the "page", and "pageCount" as props.
And also the "href",
that I'm using as the route path
for the previous and next links.
This way we could use this PaginationBar
in different pages,
each one with a different route as "href".
The new component is rendered in the ReviewsPage,
passing "/reviews" as the "href",
along with the "page" and "pageCount" numbers.
Since we just moved some code around,
everything should still look the same as before,
and work in the same way too,
linking to the right page numbers.
Ok, as the second step of this exercise,
I'd like to replace the "less than"
and "greater than" signs
with some nicer icons instead.
If you remember, we did use an
icon already in our project:
in the ShareLinkButton component we import
the LinkIcon from the Heroicons library.
Let me show you this in the browser.
In each ReviewPage we display
a "Share link" button,
and it includes a little icon.
We also set some styles on the button,
like a rounded border,
and to change colors on mouse over.
We might want to use the same styles
on the pagination links,
to make the user interface consistent.
As for the icons,
the Heroicons library includes some "chevrons".
We could use the "ChevronLeftIcon"
for the previous link,
and "ChevronRight" for the next page.
We can then apply these same styles on each Link.
Although we don't need flexbox.
This button contains both an icon and some text,
but in the PaginationBar each Link
will only contain the icon.
Now, since we need the same styles on both Links,
I suggest extracting a separate component,
let's call it "PaginationLink",
where we can set the right CSS classes.
This way you don't have to duplicate
the same styles in both places.
If you want to implement this step,
that is use the Chevron icons
and apply the same styles as the ShareLinkButton,
go ahead and try this now.
I'll show you my code in a few seconds.
And here's what I've done.
The PaginationLink simply
wraps the Link component,
setting the Tailwind CSS classes
taken from the ShareLinkButton.
Then in the PaginationBar
I'm showing two PaginationLinks
containing ChevronLeft and ChevronRight icons,
that I've imported from the Heroicons package.
You can see the result in the browser.
Each link looks a bit more like a button now,
and it will change style when
we move the mouse over it.
The functionality should still work
exactly like it did before.
Ok, we're ready for the final step,
that is disabling each link when
it shouldn't be clickable.
If we're on page 1 then there is no previous page,
and if we're on the last page
then the next link should be disabled.
The way I would implement this
is by adding an "enabled" prop to each Link.
Now, the tricky part is that
there is no "disabled" attribute on a Link,
unlike for an HTML button for example.
So to show a disabled link
we actually need to render a different element.
What we can do is check:
if "enabled" is false
then we render a different element.
Instead of a Link we can use a simple "span",
without the "href".
I'll leave it to you to change the styles
to make it look like it's disabled.
For example you can choose a lighter
shade for the text color.
Then you need to pass the "enabled"
prop to each PaginationLink.
If you want to try this, go ahead now.
I'll reveal the solution in a few moments.
So, here's my code.
I'm setting the previous link to be "enabled"
only if the "page" number is greater than 1.
And the next link if "page" is less
than the total "pageCount".
Otherwise they will be disabled.
Then in the PaginationLink component
I changed the text to "slate-300"
so it will show as grayed out when disabled.
I also added the "cursor-not-allowed" class,
which means that, if you move
the mouse over that element
the cursor changes to show
that it's not clickable.
On Page 1, the previous link is disabled.
We can click next, and go to Page 2.
And at this point, the previous
link is now enabled.
As for the next one,
it should become disabled once
we get to the last page.
So we can no longer go beyond the limit.
And this is the PaginationBar fully working.
Now, I should mention that
there's an important thing still missing here,
and that is accessibility.
At the moment, each link only shows an icon,
so if somebody is browsing our
website using a screen reader,
these links will not be accessible.
We should really add some
text describing the link,
like "Previous Page", that can
be read by the screen reader.
And we want to do the same for the other link,
this time saying "Next Page".
But if we save,
that additional text messes up our layout.
What we can do is
only provide this description for screen readers,
without actually displaying it visually.
Tailwind includes a class called "sr-only"
that's short for "screen readers only".
If we apply this style to both link descriptions,
you'll see that they're no longer visible.
But the text is still there, and
will be used by screen readers.
There are a few other attributes
we could add to these elements
to improve accessibility support.
And we should also update the page title,
to say which page number we're
currently displaying,
so screen readers will read the new
title when the page changes.
But I'll stop here for this video,
otherwise it gets too long.
I just wanted you to be aware that
there's a bit more work required
in a real world app
to make it fully accessible.
Other than that, our pagination
implementation is now complete.