Extracted paginator used in SortableBarGraph to its own component

src/common/SimplePaginator.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+import { rangeOf } from '../utils/utils';
+
+const propTypes = {
+  pagesCount: PropTypes.number.isRequired,
+  currentPage: PropTypes.number.isRequired,
+  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>
+      </PaginationItem>
+    ))}
+    <PaginationItem disabled={currentPage >= pagesCount}>
+      <PaginationLink next tag="span" onClick={setCurrentPage(currentPage + 1)} />
+    </PaginationItem>
+  </Pagination>
+);
+
+SimplePaginator.propTypes = propTypes;
+
+export default SimplePaginator;

src/visits/SortableBarGraph.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { fromPairs, head, keys, pipe, prop, reverse, sortBy, splitEvery, toLower, toPairs, type } from 'ramda';
-import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
 import SortingDropdown from '../utils/SortingDropdown';
 import PaginationDropdown from '../utils/PaginationDropdown';
 import { rangeOf, roundTen } from '../utils/utils';
+import SimplePaginator from '../common/SimplePaginator';
 import GraphCard from './GraphCard';
 
 const { max } = Math;
@@ -66,22 +66,9 @@ export default class SortableBarGraph extends React.Component {
 
   renderPagination(pagesCount) {
     const { currentPage } = this.state;
+    const setCurrentPage = (currentPage) => () => this.setState({ currentPage });
 
-    return (
+    return <SimplePaginator currentPage={currentPage} pagesCount={pagesCount} setCurrentPage={setCurrentPage} />;
-      <Pagination listClassName="flex-wrap mb-0">
-        <PaginationItem disabled={currentPage === 1}>
-          <PaginationLink previous tag="span" onClick={() => this.setState({ currentPage: currentPage - 1 })} />
-        </PaginationItem>
-        {rangeOf(pagesCount, (page) => (
-          <PaginationItem key={page} active={page === currentPage}>
-            <PaginationLink tag="span" onClick={() => this.setState({ currentPage: page })}>{page}</PaginationLink>
-          </PaginationItem>
-        ))}
-        <PaginationItem disabled={currentPage >= pagesCount}>
-          <PaginationLink next tag="span" onClick={() => this.setState({ currentPage: currentPage + 1 })} />
-        </PaginationItem>
-      </Pagination>
-    );
   }
 
   render() {

test/visits/SortableBarGraph.test.js

@@ -49,12 +49,10 @@ describe('<SortableBarGraph />', () => {
       assert = (sortName, sortDir, expectedKeys, expectedValues, done) => {
         dropdown.prop('onChange')(sortName, sortDir);
         setImmediate(() => {
-          const graphCard = wrapper.find(GraphCard);
+          const stats = wrapper.find(GraphCard).prop('stats');
-          const statsKeys = keys(graphCard.prop('stats'));
-          const statsValues = values(graphCard.prop('stats'));
 
-          expect(statsKeys).toEqual(expectedKeys);
+          expect(keys(stats)).toEqual(expectedKeys);
-          expect(statsValues).toEqual(expectedValues);
+          expect(values(stats)).toEqual(expectedValues);
           done();
         });
       };
@@ -80,10 +78,9 @@ describe('<SortableBarGraph />', () => {
       assert = (itemsPerPage, expectedStats, done) => {
         dropdown.prop('setValue')(itemsPerPage);
         setImmediate(() => {
-          const graphCard = wrapper.find(GraphCard);
+          const stats = wrapper.find(GraphCard).prop('stats');
-          const statsKeys = keys(graphCard.prop('stats'));
 
-          expect(statsKeys).toEqual(expectedStats);
+          expect(keys(stats)).toEqual(expectedStats);
           done();
         });
       };