Ensured page numbers in paginators are prettified

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}>

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>
     ));

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}`;