Added foldable pagination to SimplePaginator

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 }) => (
-  <Pagination listClassName="flex-wrap mb-0">
-    <PaginationItem disabled={currentPage <= 1}>
-      <PaginationLink previous tag="span" onClick={setCurrentPage(currentPage - 1)} />
-    </PaginationItem>
-    {rangeOf(pagesCount, (page) => (
-      <PaginationItem key={page} active={page === currentPage}>
-        <PaginationLink tag="span" onClick={setCurrentPage(page)}>{page}</PaginationLink>
+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 (
+    <Pagination listClassName="flex-wrap justify-content-center mb-0">
+      <PaginationItem disabled={currentPage <= 1}>
+        <PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} />
       </PaginationItem>
-    ))}
-    <PaginationItem disabled={currentPage >= pagesCount}>
-      <PaginationLink next tag="span" onClick={setCurrentPage(currentPage + 1)} />
-    </PaginationItem>
-  </Pagination>
-);
+      {pagination(currentPage, pagesCount).map((page, index) => (
+        <PaginationItem
+          key={page !== '...' ? page : `${page}_${index}`}
+          active={page === currentPage}
+          disabled={page === '...'}
+        >
+          <PaginationLink tag="span" onClick={onClick(page)}>{page}</PaginationLink>
+        </PaginationItem>
+      ))}
+      <PaginationItem disabled={currentPage >= pagesCount}>
+        <PaginationLink next tag="span" onClick={onClick(currentPage + 1)} />
+      </PaginationItem>
+    </Pagination>
+  );
+};
 
 SimplePaginator.propTypes = propTypes;
 

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 <SimplePaginator currentPage={currentPage} pagesCount={pagesCount} setCurrentPage={setCurrentPage} />;
   }