diff --git a/src/common/SimplePaginator.js b/src/common/SimplePaginator.js index 8683e303..9a67dc69 100644 --- a/src/common/SimplePaginator.js +++ b/src/common/SimplePaginator.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Pagination, PaginationItem, PaginationLink } from 'reactstrap'; -import { rangeOf } from '../utils/utils'; +import { range, max, min } from 'ramda'; const propTypes = { pagesCount: PropTypes.number.isRequired, @@ -9,21 +9,53 @@ const propTypes = { setCurrentPage: PropTypes.func.isRequired, }; -const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage }) => ( - - - - - {rangeOf(pagesCount, (page) => ( - - {page} +const pagination = (currentPage, pageCount) => { + const delta = 2; + const pages = range( + max(delta, currentPage - delta), + min(pageCount - 1, currentPage + delta) + 1 + ); + + if (currentPage - delta > delta) { + pages.unshift('...'); + } + if (currentPage + delta < pageCount - 1) { + pages.push('...'); + } + + pages.unshift(1); + pages.push(pageCount); + + return pages; +}; + +const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage }) => { + if (pagesCount < 2) { + return null; + } + + const onClick = (page) => () => setCurrentPage(page); + + return ( + + + - ))} - = pagesCount}> - - - -); + {pagination(currentPage, pagesCount).map((page, index) => ( + + {page} + + ))} + = pagesCount}> + + + + ); +}; SimplePaginator.propTypes = propTypes; diff --git a/src/visits/SortableBarGraph.js b/src/visits/SortableBarGraph.js index de96e655..7e236e76 100644 --- a/src/visits/SortableBarGraph.js +++ b/src/visits/SortableBarGraph.js @@ -66,7 +66,7 @@ export default class SortableBarGraph extends React.Component { renderPagination(pagesCount) { const { currentPage } = this.state; - const setCurrentPage = (currentPage) => () => this.setState({ currentPage }); + const setCurrentPage = (currentPage) => this.setState({ currentPage }); return ; }