From ac62410926519f941c6f214c182698cb50ad4a06 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 17 Jun 2018 18:13:55 +0200
Subject: [PATCH] Added pagination component

---
 public/index.html           |  2 +-
 src/short-urls/Paginator.js | 61 +++++++++++++++++++++++++++++++++++++
 src/short-urls/ShortUrls.js |  3 +-
 3 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 src/short-urls/Paginator.js
diff --git a/public/index.html b/public/index.html
index 4140157d..dc9b5274 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <meta name="theme-color" content="#000000">
+        <meta name="theme-color" content="#4696e5">
         <!--
           manifest.json provides metadata used when your web app is added to the
           homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
diff --git a/src/short-urls/Paginator.js b/src/short-urls/Paginator.js
new file mode 100644
index 00000000..24c1a5cb
--- /dev/null
+++ b/src/short-urls/Paginator.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+import { connect } from 'react-redux';
+import { updateShortUrlsList } from './reducers/shortUrlsList';
+
+export class Paginator extends React.Component {
+  render() {
+    const { paginator = {}, serverId } = this.props;
+    const { currentPage, pagesCount = 0 } = paginator;
+    if (pagesCount <= 1) {
+      return null;
+    }
+
+    const renderPages = () => {
+      const pages = [];
+
+      for (let i = 1; i <= pagesCount; i++) {
+        pages.push(
+          <PaginationItem key={i} active={currentPage === i}>
+            <PaginationLink
+              tag={Link}
+              to={`/server/${serverId}/list-short-urls/${i}`}
+              onClick={() => this.updatePage(i)}
+            >
+              {i}
+            </PaginationLink>
+          </PaginationItem>
+        );
+      }
+
+      return pages;
+    };
+
+    return (
+      <Pagination>
+        <PaginationItem disabled={currentPage === 1}>
+          <PaginationLink previous
+                          tag={Link}
+                          to={`/server/${serverId}/list-short-urls/${currentPage - 1}`}
+                          onClick={() => this.updatePage(currentPage - 1)} />
+        </PaginationItem>
+        {renderPages()}
+        <PaginationItem disabled={currentPage >= pagesCount}>
+          <PaginationLink next
+                          tag={Link}
+                          to={`/server/${serverId}/list-short-urls/${currentPage + 1}`}
+                          onClick={() => this.updatePage(currentPage + 1)} />
+        </PaginationItem>
+      </Pagination>
+    );
+  }
+
+  updatePage(page) {
+    this.props.updateShortUrlsList({ ...this.props.shortUrlsListParams, page })
+  }
+}
+
+export default connect(state => ({
+  shortUrlsListParams: state.shortUrlsListParams,
+}), { updateShortUrlsList })(Paginator);
diff --git a/src/short-urls/ShortUrls.js b/src/short-urls/ShortUrls.js
index f6e16523..847e4f2d 100644
--- a/src/short-urls/ShortUrls.js
+++ b/src/short-urls/ShortUrls.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import Paginator from './Paginator';
 import SearchBar from './SearchBar';
 import './ShortUrls.scss';
 import ShortUrlsList from './ShortUrlsList';
@@ -9,7 +10,7 @@ export function ShortUrls(props) {
     <div className="short-urls-container">
       <div className="form-group"><SearchBar /></div>
       <ShortUrlsList {...props} shortUrlsList={props.shortUrlsList.data || []} />
-      {/* Pagination */}
+      <Paginator paginator={props.shortUrlsList.pagination} serverId={props.match.params.serverId} />
     </div>
   );
 }
