From 3fea8b55053cfa297096a2abf3d422905fd80fce Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 13 Sep 2020 10:03:02 +0200
Subject: [PATCH] Ensured page numbers in paginators are prettified

---
 src/common/SimplePaginator.tsx  | 10 ++++++++--
 src/short-urls/Paginator.tsx    |  4 ++--
 src/utils/helpers/pagination.ts |  4 ++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/common/SimplePaginator.tsx b/src/common/SimplePaginator.tsx
index 2b648962..478d19ce 100644
--- a/src/common/SimplePaginator.tsx
+++ b/src/common/SimplePaginator.tsx
@@ -1,7 +1,13 @@
 import React, { FC } from 'react';
 import classNames from 'classnames';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-import { pageIsEllipsis, keyForPage, NumberOrEllipsis, progressivePagination } from '../utils/helpers/pagination';
+import {
+  pageIsEllipsis,
+  keyForPage,
+  NumberOrEllipsis,
+  progressivePagination,
+  prettifyPageNumber,
+} from '../utils/helpers/pagination';
 import './SimplePaginator.scss';
 
 interface SimplePaginatorProps {
@@ -29,7 +35,7 @@ const SimplePaginator: FC<SimplePaginatorProps> = ({ pagesCount, currentPage, se
           disabled={pageIsEllipsis(pageNumber)}
           active={currentPage === pageNumber}
         >
-          <PaginationLink tag="span" onClick={onClick(pageNumber)}>{pageNumber}</PaginationLink>
+          <PaginationLink tag="span" onClick={onClick(pageNumber)}>{prettifyPageNumber(pageNumber)}</PaginationLink>
         </PaginationItem>
       ))}
       <PaginationItem disabled={currentPage >= pagesCount}>
diff --git a/src/short-urls/Paginator.tsx b/src/short-urls/Paginator.tsx
index eeccb727..bf6c24e1 100644
--- a/src/short-urls/Paginator.tsx
+++ b/src/short-urls/Paginator.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-import { pageIsEllipsis, keyForPage, progressivePagination } from '../utils/helpers/pagination';
+import { pageIsEllipsis, keyForPage, progressivePagination, prettifyPageNumber } from '../utils/helpers/pagination';
 import { ShlinkPaginator } from '../utils/services/types';
 import './Paginator.scss';
 
@@ -28,7 +28,7 @@ const Paginator = ({ paginator, serverId }: PaginatorProps) => {
           tag={Link}
           to={`/server/${serverId}/list-short-urls/${pageNumber}`}
         >
-          {pageNumber}
+          {prettifyPageNumber(pageNumber)}
         </PaginationLink>
       </PaginationItem>
     ));
diff --git a/src/utils/helpers/pagination.ts b/src/utils/helpers/pagination.ts
index eca76cb7..0fa2b87b 100644
--- a/src/utils/helpers/pagination.ts
+++ b/src/utils/helpers/pagination.ts
@@ -1,4 +1,5 @@
 import { max, min, range } from 'ramda';
+import { prettify } from './numbers';
 
 const DELTA = 2;
 
@@ -29,4 +30,7 @@ export const progressivePagination = (currentPage: number, pageCount: number): N
 
 export const pageIsEllipsis = (pageNumber: NumberOrEllipsis): pageNumber is Ellipsis => pageNumber === ELLIPSIS;
 
+export const prettifyPageNumber = (pageNumber: NumberOrEllipsis): string =>
+  pageIsEllipsis(pageNumber) ? pageNumber : prettify(pageNumber);
+
 export const keyForPage = (pageNumber: NumberOrEllipsis, index: number) => !pageIsEllipsis(pageNumber) ? `${pageNumber}` : `${pageNumber}_${index}`;