From d7da8521ce3b39e7d76d74c13eda7d435a71d80e Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 28 Mar 2020 17:43:09 +0100
Subject: [PATCH] Created helper functions to determine the key and if a page
 is disabled on a progressive paginator

---
 src/common/SimplePaginator.js   | 12 ++++++------
 src/short-urls/Paginator.js     |  6 +++---
 src/utils/helpers/pagination.js |  4 ++++
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/common/SimplePaginator.js b/src/common/SimplePaginator.js
index 1193066c..f87b35f9 100644
--- a/src/common/SimplePaginator.js
+++ b/src/common/SimplePaginator.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-import { ELLIPSIS, progressivePagination } from '../utils/helpers/pagination';
+import { isPageDisabled, keyForPage, progressivePagination } from '../utils/helpers/pagination';
 import './SimplePaginator.scss';
 
 const propTypes = {
@@ -22,13 +22,13 @@ const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage }) => {
       <PaginationItem disabled={currentPage <= 1}>
         <PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} />
       </PaginationItem>
-      {progressivePagination(currentPage, pagesCount).map((page, index) => (
+      {progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
         <PaginationItem
-          key={page !== ELLIPSIS ? page : `${page}_${index}`}
-          active={page === currentPage}
-          disabled={page === ELLIPSIS}
+          key={keyForPage(pageNumber, index)}
+          disabled={isPageDisabled(pageNumber)}
+          active={currentPage === pageNumber}
         >
-          <PaginationLink tag="span" onClick={onClick(page)}>{page}</PaginationLink>
+          <PaginationLink tag="span" onClick={onClick(pageNumber)}>{pageNumber}</PaginationLink>
         </PaginationItem>
       ))}
       <PaginationItem disabled={currentPage >= pagesCount}>
diff --git a/src/short-urls/Paginator.js b/src/short-urls/Paginator.js
index 9a8a7476..46783dc7 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 { ELLIPSIS, progressivePagination } from '../utils/helpers/pagination';
+import { isPageDisabled, keyForPage, progressivePagination } from '../utils/helpers/pagination';
 
 const propTypes = {
   serverId: PropTypes.string.isRequired,
@@ -22,9 +22,9 @@ const Paginator = ({ paginator = {}, serverId }) => {
   const renderPages = () =>
     progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
       <PaginationItem
-        key={pageNumber !== ELLIPSIS ? pageNumber : `${pageNumber}_${index}`}
+        key={keyForPage(pageNumber, index)}
+        disabled={isPageDisabled(pageNumber)}
         active={currentPage === pageNumber}
-        disabled={pageNumber === ELLIPSIS}
       >
         <PaginationLink
           tag={Link}
diff --git a/src/utils/helpers/pagination.js b/src/utils/helpers/pagination.js
index a8b49b65..be66f750 100644
--- a/src/utils/helpers/pagination.js
+++ b/src/utils/helpers/pagination.js
@@ -21,3 +21,7 @@ export const progressivePagination = (currentPage, pageCount) => {
 
   return pages;
 };
+
+export const keyForPage = (pageNumber, index) => pageNumber !== ELLIPSIS ? pageNumber : `${pageNumber}_${index}`;
+
+export const isPageDisabled = (pageNumber) => pageNumber === ELLIPSIS;