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 b9dbe44b..1193066c 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/utils'; +import { ELLIPSIS, progressivePagination } from '../utils/helpers/pagination'; import './SimplePaginator.scss'; const propTypes = { 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 1d597e14..9a8a7476 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/utils'; +import { ELLIPSIS, progressivePagination } from '../utils/helpers/pagination'; const propTypes = { serverId: PropTypes.string.isRequired, 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..a8b49b65 --- /dev/null +++ b/src/utils/helpers/pagination.js @@ -0,0 +1,23 @@ +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; +}; 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 48ed8f2f..0abda883 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -2,8 +2,7 @@ import L from 'leaflet'; 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 { max, min, range } from 'ramda'; -import { useState } from 'react'; +import { range } from 'ramda'; 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,34 +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; - -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; -}; 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 c3e5be68..ac91dd01 100644 --- a/test/common/SimplePaginator.test.js +++ b/test/common/SimplePaginator.test.js @@ -3,7 +3,7 @@ import { shallow } from 'enzyme'; import { identity } from 'ramda'; import { PaginationItem } from 'reactstrap'; import SimplePaginator from '../../src/common/SimplePaginator'; -import { ELLIPSIS } from '../../src/utils/utils'; +import { ELLIPSIS } from '../../src/utils/helpers/pagination'; describe('', () => { let wrapper;