GatsbyJS: Numbered Pagination Component

I created a simple GatsbyJS pagination component that would work in a similar way to my earlier ASP.NET Core version, where the user will be able to paginate through a list using the standard "Previous" and "Next" links as well as selecting individual page numbers.

Like the ASP.NET Core version, I have tried to make this pagination component very portable, so there shouldn't be any issues in adding this straight into your project. Plug and play!

import * as React from 'react'
import { Link } from 'gatsby'
import PropTypes from 'prop-types'

// Create URL path for numeric pagination
const getPageNumberPath = (currentIndex, basePath) => {
  if (currentIndex === 1) {
    return basePath
  }
  
  return `${basePath}/page-${(currentIndex)}`
}

// Create an object array of pagination numbers. 
// The number of page numbers to render is set to 5.
const getPaginationGroup = (basePath, currentPage, pageCount, noOfPagesNos = 5) => {
    let startPage = currentPage;

    if (startPage === 1 || startPage === 2 || pageCount < noOfPagesNos)
        startPage = 1;
    else
        startPage -= 2;

    let maxPage = startPage + noOfPagesNos;

    if (pageCount < maxPage) {
        maxPage = pageCount + 1
    }

    if (maxPage - startPage !== noOfPagesNos && maxPage > noOfPagesNos) {
        startPage = maxPage - noOfPagesNos;
    }

    let paginationInfo = [];

    for (let i = startPage; i < maxPage; i++) {        
        paginationInfo.push({
            number: i,
            url: getPageNumberPath(i, basePath),
            isCurrent: currentPage === i
        });
    }

    return paginationInfo;
};

export const Pagination = ({ pageInfo, basePath }) => {
    if (!pageInfo) 
        return null

    const { currentPage, pageCount } = pageInfo

    // Create URL path for previous and next buttons
    const prevPagePath = currentPage === 2 ? basePath : `${basePath}/page-${(currentPage - 1)}`
    const nextPagePath = `${basePath}/page-${(currentPage + 1)}`
    
    if (pageCount > 1) { 
        return (
                <ol>
                    {currentPage > 1 ? 
                        <li>
                            <Link to={prevPagePath}>
                                Go to previous page
                            </Link>
                        </li> : null}       
                    {getPaginationGroup(basePath, currentPage, pageCount).map((item, i) => {
                        return (
                            <li key={i}>
                                <Link to={item.url} className={`${item.isCurrent ?  "is-current" : ""}`}>
                                    Go to page {item.number}
                                </Link>
                            </li>
                        )
                    })}
                    {currentPage !== pageCount ?
                        <li>
                            <Link to={nextPagePath}>
                                Go to next page
                            </Link>
                        </li> : null}
                </ol>
        )
    }
    else {
        return null
    }
  }

Pagination.propTypes = {
    pageInfo: PropTypes.object,
    basePath: PropTypes.string
}

export default Pagination;

This component requires just two parameters:

  1. pageInfo: A page context object created when Gatsby generates the site pages. The object should contain two properties consisting of the current page the that is being viewed (currentPage) and total number of pages (pageCount).
  2. basePath: The parent URL of where the pagination component will reside. For example, if your listing page is "/customers", this will be the base path. The pagination component will then prefix this to construct URL's in the format of - "/customers/page-2".

A Mother Tongue Lost

I've always been unashamedly honest about not having the capability of speaking my mother tongue - Punjabi. I was brought up in an Indian household where those older than I would freely converse with one another in the home-grown language handed down to them. So Punjabi isn't a completely foreign language to me and I'm capable of getting the gist of what is being said... especially Indian family gossip!

Throughout my life, I have always been spoken to in English by family around me and speaking fluently in Punjabi wasn't something that was ever forced upon me. In some ways, I'm grateful for this. If I look back at the mindset of my younger self, I more than likely would have rejected the notion of speaking a different language as I felt inadequate when it came to anything to do with learning. I knew from a very young age I was someone who wasn't naturally gifted in the art of learning - not from the lack of trying.

Sometimes it's easier to reject our weaknesses instead of confronting them.

I can't help thinking how different things could have been if my primary language of birth was Punjabi and English as secondary...

Would I feel less ostracised from my own culture?
Would I have taken more of a liking to Indian films and music?
Would I be more aware of key festivals and take an active part in them?

These thoughts have always been a part of me and it is only now they've come to the surface and stare me in the face each day after many years of keeping it locked tight within. The driving force behind these thoughts is being married to someone born in India where my cultural inadequacies that were once hidden in the dark now shines brightly for her to see.

The time has come where change needs to happen, where I no longer take humour (a sign of weakness) in not knowing my cultural heritage or language. Why hasn't this cultural yearning come sooner? Well, I guess you never yearn for the thing you've never felt was lost.

Through my wife's influence, I think my "Indian meter" is increasing day by day and have been introduced to things that are new to me, which can both be interesting and scary at the same time. I've even been watching a lot of Indian films and to my surprise rather enjoyed.

I think it's through her where I worry less of not knowing certain aspects of my culture, whereas in the past only ever relied on my Mum to keep me in the loop. I've previously said in my Preserving Digital Memories post the following:

I came to the sudden realisation as we all sat down to my mum belting out her prayers that this will not last forever and it dawned on me that these are truly special moments. Being an Indian who is culturally inept in all the senses and cannot speak his native tongue, I would be comforted knowing that I'll have photos and video to look back on many years to come.

I am comforted knowing that the little Indian culture I have left will (as a minimum) be retained, if not grow through both their influences.

The path that lies ahead won’t be easy, especially the part where I have to grasp the concepts of learning Punjabi as well as taking more of an invested effort in special days of the year and the reasons behind them.

I can take comfort in knowing my journey has already begun and have learnt a lot from watching Indian TV shows alone. Even though the TV shows are in Hindi, it’s a start. For some reason, I seem to have the ability to remember bad words and phrases with such ease - to my wife's displeasure.

At the core, I will always be British but somewhere along the way, I will always be an Indian at heart too.