reactjs - Gatsby blog pagination disable button on the last page

Question

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.

Answer 1

If you want to keep the title you just need to remove the condition and leave the component like:

          <FlatButton
            item={
              {
                title: "Next Page",
                icon: "/images/icons/right-arrow.svg",
                link: `/blog/${nextPage}`,
              }
            }
          />

To make the button disabled you have multiple workarounds. The most simple and native is, if your FlatButton component extends from any button tag, you can pass an isDisabled prop like:

          <FlatButton
            item={
              {
                isDisabled: isLast
                title: "Next Page",
                icon: "/images/icons/right-arrow.svg",
                link: `/blog/${nextPage}`,
              }
            }
          />

Then, in your component:

const FlatButton = ({ item })=>{

  return <button disabled={item.isDisabled}>{item.title}</button>
}

Of course, without knowing how your FlatButton looks like you'll need to tweak it a little bit, but you get the idea.

Otherwise, you can play with the class names of the components and use, among other styling, pointer-events: none CSS rule.

how do i select isDisabled in css? using styled components

Like all props in styled-components:

  color: ${props => props.isDisabled? "white" : "red"};