Split utils module into several helpers modules

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 { ELLIPSIS, progressivePagination } from '../utils/utils';
+import { ELLIPSIS, progressivePagination } from '../utils/helpers/pagination';
 import './SimplePaginator.scss';
 
 const propTypes = {

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 { ELLIPSIS, progressivePagination } from '../utils/utils';
+import { ELLIPSIS, progressivePagination } from '../utils/helpers/pagination';
 
 const propTypes = {
   serverId: PropTypes.string.isRequired,

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,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;
+};

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

@@ -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 { 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,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;
-};

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

@@ -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('<SimplePaginator />', () => {
   let wrapper;