I'm setting blog pagination in Gatsby like this:
gatsby-node.js
File:
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
const result = await graphql(`
query {
allContentfulPost(sort: { order: ASC, fields: [createdAt] }) {
edges {
node {
postTitle
slug
}
}
}
}
`)
const postsPerPage = 2
const numPages = Math.ceil(posts.length / postsPerPage)
Array.from({ length: numPages }).forEach((_, i) => {
createPage({
path: i === 0 ? `/blog` : `/blog/${i + 1}`,
component: path.resolve("./src/templates/blog.js"),
context: {
limit: postsPerPage,
skip: i * postsPerPage,
numPages,
currentPage: i + 1,
},
})
})
}
then in blog.js
file i add the buttons and the page numbers like this:
function Blog({ pageContext, data }) {
const { currentPage, numPages } = pageContext
const isFirst = currentPage === 1
const isLast = currentPage === numPages
const prevPage = currentPage - 1 === 1 ? "" : (currentPage - 1).toString()
const nextPage = (currentPage + 1).toString()
return (
<PaginationContainer>
<FlatButton
item={
!isFirst && {
title: "Previous Page",
icon: "/images/icons/left-arrow.svg",
link: `/blog/${prevPage}`,
}
}
/>
<PageNumbersContainer>
{Array.from({ length: numPages }, (_, i) => (
<PageNumber
item={{
title: `${i + 1}`,
icon: "",
link: `/blog/${i === 0 ? "" : i + 1}`,
key: `pagination-number${i + 1}`,
}}
/>
))}
</PageNumbersContainer>
<FlatButton
item={
!isLast && {
title: "Next Page",
icon: "/images/icons/right-arrow.svg",
link: `/blog/${nextPage}`,
}
}
/>
</PaginationContainer>
)}
now when theres no previous page or next page, in the button the title
dissapears and only the container is there.
i want to keep the title and the button shape to stay as it is but to make it disabled (un-cklickable)
i'd appreciate your help.
See Question&Answers more detail:os