Pagination in React

NextPageButton.js

function NextPageButton({ updateCurrentPage, currentPage, isDisabled }) {
  const handleClick = () => updateCurrentPage(currentPage + 1);

  return (
    <li>
      <button
        className={`page${isDisabled ? '' : ' page--clickable'}`}
        onClick={handleClick}
        disabled={isDisabled}
        style={{ cursor: `${isDisabled ? 'auto' : 'pointer'}` }}
      >
        <img src='/images/right_arrow.svg' alt='right arrow' />
      </button>
    </li>
  );
}

export default NextPageButton;

Page.js

function Page({ pageNumber, isActive, updateCurrentPage }) {
  const handleClick = event => {
    event.preventDefault();
    updateCurrentPage(pageNumber);
  };

  return (
    <li>
      <button
        className={`page page--clickable${isActive ? ' active-page' : ''}`}
        onClick={handleClick}
      >
        {pageNumber}
      </button>
    </li>
  );
}

export default Page;

PagesList.js

import Page from './page/Page';
import { v4 as uuidv4 } from 'uuid';
import PreviousPageButton from './page navigation buttons/PreviousPageButton';
import NextPageButton from './page navigation buttons/NextPageButton';

function PagesList({ currentPage, totalPages, updateCurrentPage }) {
  const endPagesNotReached = () => currentPage + 2 <= totalPages;

  const getPageNumbers = () => {
    const pageNumbers = [];

    if (endPagesNotReached()) {
      for (
        let pageNumber = currentPage;
        pageNumber <= currentPage + 2;
        pageNumber++
      ) {
        pageNumbers.push(pageNumber);
      }
    } else {
      for (
        let pageNumber = totalPages - 2;
        pageNumber <= totalPages;
        pageNumber++
      ) {
        if (pageNumber > 0) pageNumbers.push(pageNumber);
      }
    }
    return pageNumbers;
  };

  const disablePreviousPageButton = () => currentPage === 1;

  const disableNextPageButton = () => currentPage === totalPages;

  return (
    <ul className='pages__list'>
      <PreviousPageButton
        isDisabled={disablePreviousPageButton()}
        currentPage={currentPage}
        updateCurrentPage={updateCurrentPage}
      />
      {getPageNumbers().map(pageNumber => (
        <Page
          pageNumber={pageNumber}
          updateCurrentPage={updateCurrentPage}
          isActive={pageNumber === currentPage}
          key={uuidv4()}
        />
      ))}
      <NextPageButton
        isDisabled={disableNextPageButton()}
        currentPage={currentPage}
        updateCurrentPage={updateCurrentPage}
      />
    </ul>
  );
}

export default PagesList;

pagination.js

import PagesList from './pages list/PagesList';

function Pages(props) {
  const { currentPage, totalItems, itemsPerPage, updateCurrentPage } = props;

  const getTotalPages = () => Math.ceil(totalItems / itemsPerPage);

  return (
    <div className='pages'>
      <PagesList
        currentPage={currentPage}
        totalPages={getTotalPages()}
        updateCurrentPage={updateCurrentPage}
      />
      <p className='pages__info'>
        Page {currentPage} of{' '}
        <span className='pages__info__total-pages'>{getTotalPages()}</span>
      </p>
    </div>
  );
}

export default Pages;

PreviousPageButton.js

function PreviousPageButton({ updateCurrentPage, currentPage, isDisabled }) {
  const handleClick = () => updateCurrentPage(currentPage - 1);

  return (
    <li>
      <button
        className={`page${isDisabled ? '' : ' page--clickable'}`}
        onClick={handleClick}
        disabled={isDisabled}
        style={{ cursor: `${isDisabled ? 'auto' : 'pointer'}` }}
      >
        <img src='/images/left_arrow.svg' alt='left arrow' />
      </button>
    </li>
  );
}

export default PreviousPageButton;