Merge pull request #236 from acelaya-forks/feature/progressive-paginator

Feature/progressive paginator

CHANGELOG.md

@@ -17,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * [#205](https://github.com/shlinkio/shlink-web-client/issues/205) Replaced `jest-each` package by jet's native `test.each` function.
 * [#209](https://github.com/shlinkio/shlink-web-client/issues/209) Replaced `Unknown` by `Direct` for visits from undetermined referrers.
 * [#212](https://github.com/shlinkio/shlink-web-client/issues/212) Moved copy-to-clipboard next to short URL.
+* [#208](https://github.com/shlinkio/shlink-web-client/issues/208) Short URLs list paginator is now progressive.
 
 #### Deprecated
 

src/common/ShlinkVersions.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { pipe } from 'ramda';
 import { serverType } from '../servers/prop-types';
-import { versionToPrintable, versionToSemVer } from '../utils/versionHelpers';
+import { versionToPrintable, versionToSemVer } from '../utils/helpers/version';
 
 const SHLINK_WEB_CLIENT_VERSION = '%_VERSION_%';
 

src/common/SimplePaginator.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-import { range, max, min } from 'ramda';
+import { isPageDisabled, keyForPage, progressivePagination } from '../utils/helpers/pagination';
 import './SimplePaginator.scss';
 
 const propTypes = {
@@ -10,28 +10,6 @@ const propTypes = {
   setCurrentPage: PropTypes.func.isRequired,
 };
 
-export const ellipsis = '...';
-
-const pagination = (currentPage, pageCount) => {
-  const delta = 2;
-  const pages = range(
-    max(delta, currentPage - delta),
-    min(pageCount - 1, currentPage + delta) + 1
-  );
-
-  if (currentPage - delta > delta) {
-    pages.unshift(ellipsis);
-  }
-  if (currentPage + delta < pageCount - 1) {
-    pages.push(ellipsis);
-  }
-
-  pages.unshift(1);
-  pages.push(pageCount);
-
-  return pages;
-};
-
 const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage }) => {
   if (pagesCount < 2) {
     return null;
@@ -44,13 +22,13 @@ 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((pageNumber, index) => (
         <PaginationItem
-          key={page !== ellipsis ? page : `${page}_${index}`}
+          key={keyForPage(pageNumber, index)}
-          active={page === currentPage}
+          disabled={isPageDisabled(pageNumber)}
-          disabled={page === ellipsis}
+          active={currentPage === pageNumber}
         >
-          <PaginationLink tag="span" onClick={onClick(page)}>{page}</PaginationLink>
+          <PaginationLink tag="span" onClick={onClick(pageNumber)}>{pageNumber}</PaginationLink>
         </PaginationItem>
       ))}
       <PaginationItem disabled={currentPage >= pagesCount}>

src/servers/helpers/ForServerVersion.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { serverType } from '../prop-types';
-import { compareVersions } from '../../utils/versionHelpers';
+import { compareVersions } from '../../utils/helpers/version';
 
 const propTypes = {
   minVersion: PropTypes.string,

src/servers/reducers/selectedServer.js

@@ -1,7 +1,7 @@
 import { createAction, handleActions } from 'redux-actions';
 import { identity, memoizeWith, pipe } from 'ramda';
 import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListParams';
-import { versionToPrintable, versionToSemVer as toSemVer } from '../../utils/versionHelpers';
+import { versionToPrintable, versionToSemVer as toSemVer } from '../../utils/helpers/version';
 
 /* eslint-disable padding-line-between-statements */
 export const SELECT_SERVER = 'shlink/selectedServer/SELECT_SERVER';

src/short-urls/CreateShortUrl.js

@@ -7,7 +7,7 @@ import * as PropTypes from 'prop-types';
 import DateInput from '../utils/DateInput';
 import Checkbox from '../utils/Checkbox';
 import { serverType } from '../servers/prop-types';
-import { compareVersions } from '../utils/versionHelpers';
+import { compareVersions } from '../utils/helpers/version';
 import { createShortUrlResultType } from './reducers/shortUrlCreation';
 import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon';
 

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 { isPageDisabled, keyForPage, progressivePagination } from '../utils/helpers/pagination';
 
 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) => (
+    progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
-      <PaginationItem key={pageNumber} active={currentPage === pageNumber}>
+      <PaginationItem
+        key={keyForPage(pageNumber, index)}
+        disabled={isPageDisabled(pageNumber)}
+        active={currentPage === pageNumber}
+      >
         <PaginationLink
           tag={Link}
           to={`/server/${serverId}/list-short-urls/${pageNumber}`}
@@ -32,7 +36,7 @@ export default function Paginator({ paginator = {}, serverId }) {
     ));
 
   return (
-    <Pagination listClassName="flex-wrap">
+    <Pagination listClassName="flex-wrap justify-content-center">
       <PaginationItem disabled={currentPage === 1}>
         <PaginationLink
           previous
@@ -50,6 +54,8 @@ export default function Paginator({ paginator = {}, serverId }) {
       </PaginationItem>
     </Pagination>
   );
-}
+};
 
 Paginator.propTypes = propTypes;
+
+export default Paginator;

src/short-urls/SearchBar.js

@@ -7,7 +7,7 @@ import moment from 'moment';
 import SearchField from '../utils/SearchField';
 import Tag from '../tags/helpers/Tag';
 import DateRangeRow from '../utils/DateRangeRow';
-import { formatDate } from '../utils/utils';
+import { formatDate } from '../utils/helpers/date';
 import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
 import './SearchBar.scss';
 

src/short-urls/UseExistingIfFoundInfoIcon.js

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
 import './UseExistingIfFoundInfoIcon.scss';
-import { useToggle } from '../utils/utils';
+import { useToggle } from '../utils/helpers/hooks';
 
 const renderInfoModal = (isOpen, toggle) => (
   <Modal isOpen={isOpen} toggle={toggle} centered size="lg">

src/short-urls/helpers/EditMetaModal.js

@@ -9,7 +9,7 @@ import { isEmpty, pipe } from 'ramda';
 import { shortUrlType } from '../reducers/shortUrlsList';
 import { shortUrlEditMetaType } from '../reducers/shortUrlMeta';
 import DateInput from '../../utils/DateInput';
-import { formatIsoDate } from '../../utils/utils';
+import { formatIsoDate } from '../../utils/helpers/date';
 
 const propTypes = {
   isOpen: PropTypes.bool.isRequired,

src/utils/helpers/date.js

@@ -0,0 +1,3 @@
+export const formatDate = (format = 'YYYY-MM-DD') => (date) => date && date.format ? date.format(format) : date;
+
+export const formatIsoDate = (date) => date && date.format ? date.format() : date;

src/utils/helpers/hooks.js

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+const DEFAULT_TIMEOUT_DELAY = 2000;
+
+export const useStateFlagTimeout = (setTimeout) => (initialValue = true, delay = DEFAULT_TIMEOUT_DELAY) => {
+  const [ flag, setFlag ] = useState(initialValue);
+  const callback = () => {
+    setFlag(!initialValue);
+    setTimeout(() => setFlag(initialValue), delay);
+  };
+
+  return [ flag, callback ];
+};
+
+export const useToggle = (initialValue = false) => {
+  const [ flag, setFlag ] = useState(initialValue);
+
+  return [ flag, () => setFlag(!flag) ];
+};

src/utils/helpers/pagination.js

@@ -0,0 +1,27 @@
+import { max, min, range } from 'ramda';
+
+export const ELLIPSIS = '...';
+
+export const progressivePagination = (currentPage, pageCount) => {
+  const delta = 2;
+  const pages = range(
+    max(delta, currentPage - delta),
+    min(pageCount - 1, currentPage + delta) + 1,
+  );
+
+  if (currentPage - delta > delta) {
+    pages.unshift(ELLIPSIS);
+  }
+  if (currentPage + delta < pageCount - 1) {
+    pages.push(ELLIPSIS);
+  }
+
+  pages.unshift(1);
+  pages.push(pageCount);
+
+  return pages;
+};
+
+export const keyForPage = (pageNumber, index) => pageNumber !== ELLIPSIS ? pageNumber : `${pageNumber}_${index}`;
+
+export const isPageDisabled = (pageNumber) => pageNumber === ELLIPSIS;

src/utils/services/provideServices.js

@@ -1,5 +1,6 @@
 import axios from 'axios';
-import { stateFlagTimeout, useStateFlagTimeout } from '../utils';
+import { stateFlagTimeout } from '../utils';
+import { useStateFlagTimeout } from '../helpers/hooks';
 import Storage from './Storage';
 import ColorGenerator from './ColorGenerator';
 import buildShlinkApiClient from './ShlinkApiClientBuilder';

src/utils/utils.js

@@ -3,7 +3,6 @@ import marker2x from 'leaflet/dist/images/marker-icon-2x.png';
 import marker from 'leaflet/dist/images/marker-icon.png';
 import markerShadow from 'leaflet/dist/images/marker-shadow.png';
 import { range } from 'ramda';
-import { useState } from 'react';
 
 const TEN_ROUNDING_NUMBER = 10;
 const DEFAULT_TIMEOUT_DELAY = 2000;
@@ -19,16 +18,6 @@ export const stateFlagTimeout = (setTimeout) => (
   setTimeout(() => setState({ [flagName]: !initialValue }), delay);
 };
 
-export const useStateFlagTimeout = (setTimeout) => (initialValue = true, delay = DEFAULT_TIMEOUT_DELAY) => {
-  const [ flag, setFlag ] = useState(initialValue);
-  const callback = () => {
-    setFlag(!initialValue);
-    setTimeout(() => setFlag(initialValue), delay);
-  };
-
-  return [ flag, callback ];
-};
-
 export const determineOrderDir = (clickedField, currentOrderField, currentOrderDir) => {
   if (currentOrderField !== clickedField) {
     return 'ASC';
@@ -56,12 +45,3 @@ export const rangeOf = (size, mappingFn, startAt = 1) => range(startAt, size + 1
 
 export const roundTen = (number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER;
 
-export const useToggle = (initialValue = false) => {
-  const [ flag, setFlag ] = useState(initialValue);
-
-  return [ flag, () => setFlag(!flag) ];
-};
-
-export const formatDate = (format = 'YYYY-MM-DD') => (date) => date && date.format ? date.format(format) : date;
-
-export const formatIsoDate = (date) => date && date.format ? date.format() : date;

src/visits/ShortUrlVisits.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import qs from 'qs';
 import DateRangeRow from '../utils/DateRangeRow';
 import Message from '../utils/Message';
-import { formatDate } from '../utils/utils';
+import { formatDate } from '../utils/helpers/date';
 import SortableBarGraph from './SortableBarGraph';
 import { shortUrlVisitsType } from './reducers/shortUrlVisits';
 import VisitsHeader from './VisitsHeader';

test/common/SimplePaginator.test.js

@@ -2,7 +2,8 @@ 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 from '../../src/common/SimplePaginator';
+import { ELLIPSIS } from '../../src/utils/helpers/pagination';
 
 describe('<SimplePaginator />', () => {
   let wrapper;
@@ -18,34 +19,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(2).html()).toContain(ELLIPSIS);
-      expect(items.at(items.length - 3).html()).toContain(ellipsis);
+      expect(items.at(items.length - 3).html()).toContain(ELLIPSIS);
       expect(itemsWithEllipsis).toHaveLength(2);
     });
   });