Replacing Pagination Component

client/coral-ui/components/Pager.css

@@ -1,19 +0,0 @@
-.pager {
-  text-align: center;
-
-  li {
-    display: inline-block;
-    margin-right: 5px;
-    color: white;
-    height: 30px;
-    text-align: center;
-    vertical-align: middle;
-    line-height: 30px;
-    width: 30px;
-  }
-}
-
-.current {
-  background: #696969;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-}

client/coral-ui/components/Pager.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from './Pager.css';
-
-const Rows = (curr, total, onClickHandler) => Array.from(Array(total)).map((e, i) =>
-  <li className={curr === i ? styles.current : ''}
-    key={i} onClick={() => onClickHandler(i + 1)}>
-    {i + 1}
-  </li>
-);
-
-const Pager = ({totalPages, page, onNewPageHandler}) => (
-  <div className={styles.pager}>
-    <ul>
-      {
-        (totalPages > page && totalPages > 1) ?
-          <li
-            onClick={() => onNewPageHandler(page - 1)}>
-            Prev
-          </li>
-          :
-          null
-      }
-      {Rows(page, totalPages, onNewPageHandler)}
-      {
-        (page < totalPages && totalPages > 1) ?
-          <li
-            onClick={() => onNewPageHandler(page + 1)}>
-          Next
-          </li>
-          :
-          null
-      }
-    </ul>
-  </div>
-);
-
-Pager.propTypes = {
-  totalPages: PropTypes.number.isRequired,
-  page: PropTypes.number.isRequired,
-};
-
-export default Pager;

client/coral-ui/components/Paginate.css

@@ -0,0 +1,31 @@
+.container {
+  text-align: center;
+}
+
+.page, .previous, .next {
+  display: inline-block;
+  margin-right: 5px;
+  height: 30px;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 30px;
+  width: 30px;
+  list-style: none;
+}
+
+.pageLink, .previousLink, .nextLink {
+  color: #696969;
+  cursor: default;
+}
+
+.previousLink, .nextLink {
+  font-size: 1.8em;
+}
+
+.active {
+  background-color: #696969;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+  a {
+    color: white;
+  }
+}

client/coral-ui/components/Paginate.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactPaginate from 'react-paginate';
+import styles from './Paginate.css';
+import Icon from './Icon';
+
+const Paginate = ({pageCount, onPageChange}) => (
+  <ReactPaginate
+    initialPage={0}
+    pageCount={pageCount}
+    pageRangeDisplayed={5}
+    marginPagesDisplayed={2}
+    onPageChange={onPageChange}
+    breakLabel={<a href="">...</a>}
+    breakClassName={styles.break}
+    containerClassName={styles.container}
+    pageClassName={styles.page}
+    pageLinkClassName={styles.pageLink}
+    activeClassName={styles.active}
+    previousLabel={<Icon name="chevron_left"/>}
+    previousClassName={styles.previous}
+    previousLinkClassName={styles.previousLink}
+    nextLabel={<Icon name="chevron_right"/>}
+    nextClassName={styles.next}
+    nextLinkClassName={styles.nextLink}
+  />
+);
+
+Paginate.propTypes = {
+  pageCount: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func.isRequired,
+};
+
+export default Paginate;

client/coral-ui/index.js

@@ -18,7 +18,7 @@ export {default as Item} from './components/Item';
 export {default as Card} from './components/Card';
 export {default as TextField} from './components/TextField';
 export {default as Success} from './components/Success';
-export {default as Pager} from './components/Pager';
+export {default as Paginate} from './components/Paginate';
 export {default as Wizard} from './components/Wizard';
 export {default as WizardNav} from './components/WizardNav';
 export {default as SnackBar} from './components/SnackBar';