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 ;
}