From 06db4f6556f0fce82ff4ca3657008a47fbccd2f2 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 28 Mar 2020 17:19:33 +0100
Subject: [PATCH] Used progressive pagination for the short URLs list

---
 src/common/SimplePaginator.js       | 14 +++++++-------
 src/short-urls/Paginator.js         | 16 +++++++++++-----
 test/common/SimplePaginator.test.js | 20 ++++++++++----------
 3 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/common/SimplePaginator.js b/src/common/SimplePaginator.js
index abc59c6c..fcb890df 100644
--- a/src/common/SimplePaginator.js
+++ b/src/common/SimplePaginator.js
@@ -10,9 +10,9 @@ const propTypes = {
   setCurrentPage: PropTypes.func.isRequired,
 };
 
-export const ellipsis = '...';
+export const ELLIPSIS = '...';
 
-const pagination = (currentPage, pageCount) => {
+export const progressivePagination = (currentPage, pageCount) => {
   const delta = 2;
   const pages = range(
     max(delta, currentPage - delta),
@@ -20,10 +20,10 @@ const pagination = (currentPage, pageCount) => {
   );
 
   if (currentPage - delta > delta) {
-    pages.unshift(ellipsis);
+    pages.unshift(ELLIPSIS);
   }
   if (currentPage + delta < pageCount - 1) {
-    pages.push(ellipsis);
+    pages.push(ELLIPSIS);
   }
 
   pages.unshift(1);
@@ -44,11 +44,11 @@ const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage }) => {
       <PaginationItem disabled={currentPage <= 1}>
         <PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} />
       </PaginationItem>
-      {pagination(currentPage, pagesCount).map((page, index) => (
+      {progressivePagination(currentPage, pagesCount).map((page, index) => (
         <PaginationItem
-          key={page !== ellipsis ? page : `${page}_${index}`}
+          key={page !== ELLIPSIS ? page : `${page}_${index}`}
           active={page === currentPage}
-          disabled={page === ellipsis}
+          disabled={page === ELLIPSIS}
         >
           <PaginationLink tag="span" onClick={onClick(page)}>{page}</PaginationLink>
         </PaginationItem>
diff --git a/src/short-urls/Paginator.js b/src/short-urls/Paginator.js
index c1458c02..2528770a 100644
--- a/src/short-urls/Paginator.js
+++ b/src/short-urls/Paginator.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
 import PropTypes from 'prop-types';
-import { rangeOf } from '../utils/utils';
+import { ELLIPSIS, progressivePagination } from '../common/SimplePaginator';
 
 const propTypes = {
   serverId: PropTypes.string.isRequired,
@@ -12,7 +12,7 @@ const propTypes = {
   }),
 };
 
-export default function Paginator({ paginator = {}, serverId }) {
+const Paginator = ({ paginator = {}, serverId }) => {
   const { currentPage, pagesCount = 0 } = paginator;
 
   if (pagesCount <= 1) {
@@ -20,8 +20,12 @@ export default function Paginator({ paginator = {}, serverId }) {
   }
 
   const renderPages = () =>
-    rangeOf(pagesCount, (pageNumber) => (
-      <PaginationItem key={pageNumber} active={currentPage === pageNumber}>
+    progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
+      <PaginationItem
+        key={pageNumber !== ELLIPSIS ? pageNumber : `${pageNumber}_${index}`}
+        active={currentPage === pageNumber}
+        disabled={pageNumber === ELLIPSIS}
+      >
         <PaginationLink
           tag={Link}
           to={`/server/${serverId}/list-short-urls/${pageNumber}`}
@@ -50,6 +54,8 @@ export default function Paginator({ paginator = {}, serverId }) {
       </PaginationItem>
     </Pagination>
   );
-}
+};
 
 Paginator.propTypes = propTypes;
+
+export default Paginator;
diff --git a/test/common/SimplePaginator.test.js b/test/common/SimplePaginator.test.js
index 97a083fc..a34aefdc 100644
--- a/test/common/SimplePaginator.test.js
+++ b/test/common/SimplePaginator.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { identity } from 'ramda';
 import { PaginationItem } from 'reactstrap';
-import SimplePaginator, { ellipsis } from '../../src/common/SimplePaginator';
+import SimplePaginator, { ELLIPSIS } from '../../src/common/SimplePaginator';
 
 describe('<SimplePaginator />', () => {
   let wrapper;
@@ -18,34 +18,34 @@ describe('<SimplePaginator />', () => {
     expect(createWrapper(pagesCount).text()).toEqual('');
   });
 
-  describe('ellipsis are rendered where expected', () => {
+  describe('ELLIPSIS are rendered where expected', () => {
     const getItemsForPages = (pagesCount, currentPage) => {
       const paginator = createWrapper(pagesCount, currentPage);
       const items = paginator.find(PaginationItem);
-      const itemsWithEllipsis = items.filterWhere((item) => item.key() && item.key().includes(ellipsis));
+      const itemsWithEllipsis = items.filterWhere((item) => item.key() && item.key().includes(ELLIPSIS));
 
       return { items, itemsWithEllipsis };
     };
 
-    it('renders first ellipsis', () => {
+    it('renders first ELLIPSIS', () => {
       const { items, itemsWithEllipsis } = getItemsForPages(9, 7);
 
-      expect(items.at(2).html()).toContain(ellipsis);
+      expect(items.at(2).html()).toContain(ELLIPSIS);
       expect(itemsWithEllipsis).toHaveLength(1);
     });
 
-    it('renders last ellipsis', () => {
+    it('renders last ELLIPSIS', () => {
       const { items, itemsWithEllipsis } = getItemsForPages(9, 2);
 
-      expect(items.at(items.length - 3).html()).toContain(ellipsis);
+      expect(items.at(items.length - 3).html()).toContain(ELLIPSIS);
       expect(itemsWithEllipsis).toHaveLength(1);
     });
 
-    it('renders both ellipsis', () => {
+    it('renders both ELLIPSIS', () => {
       const { items, itemsWithEllipsis } = getItemsForPages(20, 9);
 
-      expect(items.at(2).html()).toContain(ellipsis);
-      expect(items.at(items.length - 3).html()).toContain(ellipsis);
+      expect(items.at(2).html()).toContain(ELLIPSIS);
+      expect(items.at(items.length - 3).html()).toContain(ELLIPSIS);
       expect(itemsWithEllipsis).toHaveLength(2);
     });
   });