diff --git a/CHANGELOG.md b/CHANGELOG.md index 0de9d24d..c29c2cf7 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/common/ShlinkVersions.js b/src/common/ShlinkVersions.js index 31cf5b02..44afc1c4 100644 --- a/src/common/ShlinkVersions.js +++ b/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_%'; diff --git a/src/common/SimplePaginator.js b/src/common/SimplePaginator.js index abc59c6c..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 { 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 }) => { - {pagination(currentPage, pagesCount).map((page, index) => ( + {progressivePagination(currentPage, pagesCount).map((pageNumber, index) => ( - {page} + {pageNumber} ))} = pagesCount}> diff --git a/src/servers/helpers/ForServerVersion.js b/src/servers/helpers/ForServerVersion.js index 0d753f30..0c51b22a 100644 --- a/src/servers/helpers/ForServerVersion.js +++ b/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, diff --git a/src/servers/reducers/selectedServer.js b/src/servers/reducers/selectedServer.js index 2779ea23..bd62181b 100644 --- a/src/servers/reducers/selectedServer.js +++ b/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'; diff --git a/src/short-urls/CreateShortUrl.js b/src/short-urls/CreateShortUrl.js index 39d02506..e1719fe3 100644 --- a/src/short-urls/CreateShortUrl.js +++ b/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'; diff --git a/src/short-urls/Paginator.js b/src/short-urls/Paginator.js index c1458c02..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 { 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) => ( + + ); -} +}; Paginator.propTypes = propTypes; + +export default Paginator; diff --git a/src/short-urls/SearchBar.js b/src/short-urls/SearchBar.js index ea1c698e..efa574c2 100644 --- a/src/short-urls/SearchBar.js +++ b/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'; diff --git a/src/short-urls/UseExistingIfFoundInfoIcon.js b/src/short-urls/UseExistingIfFoundInfoIcon.js index 851f04a5..cfbd2c54 100644 --- a/src/short-urls/UseExistingIfFoundInfoIcon.js +++ b/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) => ( diff --git a/src/short-urls/helpers/EditMetaModal.js b/src/short-urls/helpers/EditMetaModal.js index d1bcb020..f7adeb86 100644 --- a/src/short-urls/helpers/EditMetaModal.js +++ b/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, diff --git a/src/utils/helpers/date.js b/src/utils/helpers/date.js new file mode 100644 index 00000000..db4f5fda --- /dev/null +++ b/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; diff --git a/src/utils/helpers/hooks.js b/src/utils/helpers/hooks.js new file mode 100644 index 00000000..3eef15b5 --- /dev/null +++ b/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) ]; +}; diff --git a/src/utils/helpers/pagination.js b/src/utils/helpers/pagination.js new file mode 100644 index 00000000..be66f750 --- /dev/null +++ b/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; diff --git a/src/utils/versionHelpers.js b/src/utils/helpers/version.js similarity index 100% rename from src/utils/versionHelpers.js rename to src/utils/helpers/version.js diff --git a/src/utils/services/provideServices.js b/src/utils/services/provideServices.js index 0efe06cd..1760c88c 100644 --- a/src/utils/services/provideServices.js +++ b/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'; diff --git a/src/utils/utils.js b/src/utils/utils.js index 78d50daa..0abda883 100644 --- a/src/utils/utils.js +++ b/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; diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js index 7330cc12..a38b03c8 100644 --- a/src/visits/ShortUrlVisits.js +++ b/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'; diff --git a/test/common/SimplePaginator.test.js b/test/common/SimplePaginator.test.js index 97a083fc..ac91dd01 100644 --- a/test/common/SimplePaginator.test.js +++ b/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('', () => { let wrapper; @@ -18,34 +19,34 @@ describe('', () => { 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); }); });