Proyectos de Subversion LeadersLinked - Backend

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;