From f004573ed2f4ffa6e83a4deb4e365e046623a8ff Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 23 Oct 2017 23:47:05 -0300
Subject: [PATCH] Replacing Pagination Component

---
 client/coral-ui/components/Pager.css    | 19 -----------
 client/coral-ui/components/Pager.js     | 43 -------------------------
 client/coral-ui/components/Paginate.css | 31 ++++++++++++++++++
 client/coral-ui/components/Paginate.js  | 34 +++++++++++++++++++
 client/coral-ui/index.js                |  2 +-
 5 files changed, 66 insertions(+), 63 deletions(-)
 delete mode 100644 client/coral-ui/components/Pager.css
 delete mode 100644 client/coral-ui/components/Pager.js
 create mode 100644 client/coral-ui/components/Paginate.css
 create mode 100644 client/coral-ui/components/Paginate.js

diff --git a/client/coral-ui/components/Pager.css b/client/coral-ui/components/Pager.css
deleted file mode 100644
index 42559d11d..000000000
--- a/client/coral-ui/components/Pager.css
+++ /dev/null
@@ -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);
-}
diff --git a/client/coral-ui/components/Pager.js b/client/coral-ui/components/Pager.js
deleted file mode 100644
index 8f560593e..000000000
--- a/client/coral-ui/components/Pager.js
+++ /dev/null
@@ -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;
diff --git a/client/coral-ui/components/Paginate.css b/client/coral-ui/components/Paginate.css
new file mode 100644
index 000000000..dbb25b844
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/client/coral-ui/components/Paginate.js b/client/coral-ui/components/Paginate.js
new file mode 100644
index 000000000..1d7d55398
--- /dev/null
+++ b/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;
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index c688857a1..a2d8049f7 100644
--- a/client/coral-ui/index.js
+++ b/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';