Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect } from "react";
import styled from "styled-components";
import { Pagination } from "react-bootstrap";

const StyledDefaultPagination = styled(Pagination)`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: inherit !important;
  position: inherit !important;
  transform: inherit !important;
`;
const StyledRowPagination = styled(Pagination)`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: initial !important;
  position: inherit !important;
  transform: inherit !important;
`;

const PaginationComponent = (props) => {
  const { pages = 1, currentActivePage = 1, onChangePage } = props;
  const currentPage = currentActivePage;
  const StyledPagination = props.isRow ? StyledRowPagination : StyledDefaultPagination
  // const pages = 10;
  const nextPages = [];
  const previousPages = [];
  const maxPages = 5 > pages ? pages : 5;

  useEffect(() => {}, [currentPage, pages]);

  const generateCurrentPages = () => {
    let isPreviousOrNext = false;
    let pagesCont = 1;
    let nextPage = currentPage + 1;
    let previousPage = currentPage - 1;
    do {
      if (isPreviousOrNext) {
        // nextPage
        if (nextPage <= pages) {
          nextPages.push(nextPage);
          nextPage++;
          pagesCont++;
        }
        isPreviousOrNext = !isPreviousOrNext;
      } else {
        // previousPage
        if (previousPage > 0) {
          previousPages.unshift(previousPage);
          previousPage--;
          pagesCont++;
        }
        isPreviousOrNext = !isPreviousOrNext;
      }
    } while (pagesCont < maxPages);
  };

  const previousPageHandler = () => {
    onChangePage(currentPage - 1);
  };
  const nextPageHandler = () => {
    onChangePage(currentPage + 1);
  };

  const onClickHandler = (pageToNavigate) => {
    onChangePage(pageToNavigate);
  };

  generateCurrentPages();
  return (
    <React.Fragment>
      {pages > 1 ? (
        <StyledPagination>
          <Pagination.Prev
            disabled={currentPage - 1 <= 0}
            onClick={previousPageHandler}
          />
          {previousPages.map((previousPage) => (
            <Pagination.Item
              key={previousPage}
              onClick={() => onClickHandler(previousPage)}
            >
              {previousPage}
            </Pagination.Item>
          ))}
          <Pagination.Item active>{currentPage}</Pagination.Item>
          {nextPages.map((nextPage) => (
            <Pagination.Item
              key={nextPage}
              onClick={() => onClickHandler(nextPage)}
            >
              {nextPage}
            </Pagination.Item>
          ))}
          <Pagination.Next
            onClick={nextPageHandler}
            disabled={currentPage + 1 > pages}
          />
        </StyledPagination>
      ) : (
        ""
      )}
    </React.Fragment>
  );
};

export default PaginationComponent;