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