Updated changelog

Created tags list reducer test

.dockerignore

@@ -1,3 +1,4 @@
+./.github
 ./build
 ./coverage
 ./dist

.eslintrc

@@ -26,6 +26,7 @@
     "no-console": "warn",
     "template-curly-spacing": ["error", "never"],
     "no-warning-comments": "off",
+    "no-magic-numbers": "off",
     "no-undefined": "off",
     "indent": ["error", 2, {
       "SwitchCase": 1

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,6 @@
+<!--
+Before opening an issue, just take into account that this is a completely free of charge open source project.
+I'm always happy to help and provide support, but some understanding will be required.
+I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
+Try to be polite, and understand it is impossible for a project to cover all use cases.
+-->

.gitignore

@@ -3,18 +3,14 @@
 
 # testing
 /coverage
+/.stryker-tmp
+/reports
 
 # production
 /build
 
-# misc
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 docker-compose.override.yml
+home
+public/servers.json*

.scrutinizer.yml

@@ -1,5 +1,6 @@
 build:
   environment:
-    node: v10.4.1
+    node: v10.15.3
 tools:
-  external_code_coverage: true
+  external_code_coverage:
+    timeout: 1200

.travis.yml

@@ -1,10 +1,9 @@
 language: node_js
 
 node_js:
-  - "stable"
+  - "10.15.3"
 
 cache:
-  yarn: true
   directories:
     - node_modules
 
@@ -12,19 +11,24 @@ services:
   - docker
 
 install:
-  - yarn install
+  - npm ci
+
+before_script:
+  - echo "Building commit range ${TRAVIS_COMMIT_RANGE}"
+  - export MUTATION_FILES=$(git diff ${TRAVIS_COMMIT_RANGE:-origin/master} --name-only | grep src/ | paste -sd ",")
 
 script:
-  - yarn lint
-  - yarn test:ci
-  - if [[ -z $TRAVIS_TAG ]]; then docker build -t shlink-web-client:test . ; fi # Test docker image build only when no tag is present
+  - npm run lint
+  - npm run test:ci
+  - if [[ -z $TRAVIS_TAG ]]; then docker build -t shlink-web-client:test . ; fi
+  - if [[ -z $TRAVIS_TAG ]]; then npm run mutate:ci ; fi
 
 after_success:
-  - yarn ocular coverage/clover.xml
+  - node_modules/.bin/ocular coverage/clover.xml
 
 # Before deploying, build dist file for current travis tag
 before_deploy:
-  - yarn build ${TRAVIS_TAG#?}
+  - npm run build ${TRAVIS_TAG#?}
 
 deploy:
   provider: releases

CHANGELOG.md

@@ -4,6 +4,82 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## 2.1.0 - 2019-05-19
+
+#### Added
+
+* [#101](https://github.com/shlinkio/shlink-web-client/issues/101) Added checkbox to short URL creation form that allows to determine the value of the `findIfExists` flag introduced in Shlink v1.16.0.
+* [#105](https://github.com/shlinkio/shlink-web-client/issues/105) Added support to pre-configure servers. See [how to pre-configure servers](README.md#pre-configuring-servers) to get more details on how to do it.
+
+#### Changed
+
+* [#125](https://github.com/shlinkio/shlink-web-client/issues/125) Refactored reducers to replace `switch` statements by `handleActions` from [redux-actions](https://github.com/redux-utilities/redux-actions).
+* [#116](https://github.com/shlinkio/shlink-web-client/issues/116) Removed sinon in favor of jest mocks.
+* [#72](https://github.com/shlinkio/shlink-web-client/issues/72) Increased code coverage up to 80%.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* *Nothing*
+
+
+## 2.0.3 - 2019-03-16
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* *Nothing*
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#120](https://github.com/shlinkio/shlink-web-client/issues/120) Fixed crash when visits page is loaded and there are no visits with known cities.
+* [#113](https://github.com/shlinkio/shlink-web-client/issues/113) Ensured visits loading is cancelled when the visits page is unmounted. Requests on flight will still finish.
+* [#118](https://github.com/shlinkio/shlink-web-client/issues/118) Fixed chart crashing when trying to render lots of bars by adding pagination.
+
+
+## 2.0.2 - 2019-03-04
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* *Nothing*
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#103](https://github.com/shlinkio/shlink-web-client/issues/103) Fixed visits page getting freezed when loading large amounts of visits.
+* [#111](https://github.com/shlinkio/shlink-web-client/issues/111) Fixed crash when trying to load a map modal with only one location.
+* [#115](https://github.com/shlinkio/shlink-web-client/issues/115) Created `ErrorHandler` component which will prevent crashes in app to make it unusable.
+
+
 ## 2.0.1 - 2019-03-03
 
 #### Added

Dockerfile

@@ -1,6 +1,6 @@
-FROM node:10.15.2 as node
+FROM node:10.15.3-alpine as node
 COPY . /shlink-web-client
-RUN cd /shlink-web-client && yarn install && yarn build
+RUN cd /shlink-web-client && npm install && npm run build
 
 FROM nginx:1.15.9-alpine
 LABEL maintainer="Alejandro Celaya <alejandro@alejandrocelaya.com>"

README.md

@@ -1,7 +1,7 @@
 # shlink-web-client
 
 [![Build Status](https://img.shields.io/travis/shlinkio/shlink-web-client.svg?style=flat-square)](https://travis-ci.org/shlinkio/shlink-web-client)
-[![Docker build status](https://img.shields.io/docker/build/shlinkio/shlink-web-client.svg?style=flat-square)](https://hub.docker.com/r/shlinkio/shlink-web-client/)
+[![Docker build status](https://img.shields.io/docker/cloud/build/shlinkio/shlink-web-client.svg?style=flat-square)](https://hub.docker.com/r/shlinkio/shlink-web-client/)
 [![Code Coverage](https://img.shields.io/scrutinizer/coverage/g/shlinkio/shlink-web-client.svg?style=flat-square)](https://scrutinizer-ci.com/g/shlinkio/shlink-web-client/?branch=master)
 [![Scrutinizer Code Quality](https://img.shields.io/scrutinizer/g/shlinkio/shlink-web-client.svg?style=flat-square)](https://scrutinizer-ci.com/g/shlinkio/shlink-web-client/?branch=master)
 [![GitHub release](https://img.shields.io/github/release/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/releases/latest)
@@ -14,9 +14,9 @@ A ReactJS-based progressive web application for [Shlink](https://shlink.io).
 
 There are three ways in which you can use this application.
 
-* The easiest way to use shlink-web-client is by just going to https://app.shlink.io.
+* The easiest way to use shlink-web-client is by just going to <https://app.shlink.io>.
 
-    The application runs 100% in the browser, so you can use that instance and access any shlink instance from it.
+    The application runs 100% in the browser, so you can safely access any shlink instance from there.
 
 * Self hosting the application yourself.
 
@@ -24,28 +24,60 @@ There are three ways in which you can use this application.
 
     The package contains static files only, so just put it in a folder and serve it with the web server of your choice.
 
-    Provided dist files are configured to be served from the root of your domain. If you need to serve shlink-web-client from a subpath, you will have to build it yourself following [these simple steps](#serve-shlink-in-subpath).
+    Provided dist files are configured to be served from the root of your domain. If you need to serve shlink-web-client from a subpath, you will have to build it yourself following [these steps](#serve-shlink-in-subpath).
 
-* Use the official [docker image](https://hub.docker.com/r/shlinkio/shlink-web-client/)
+* Using the official [docker image](https://hub.docker.com/r/shlinkio/shlink-web-client/)
 
-    If you want to deploy shlink-web-client in a container-based cluster (kubernetes, docker swarm, etc), just pick the image and do it.
+    If you want to deploy shlink-web-client in a container-based cluster (kubernetes, docker swarm, etc), just pick the `shlinkio/shlink-web-client` image and do it.
 
-    It's a lightweight [nginx:alpine](https://hub.docker.com/r/library/nginx/) image serving the assets on port 80.
+    It's a lightweight [nginx:alpine](https://hub.docker.com/r/library/nginx/) image serving the static app on port 80.
+
+## Pre-configuring servers
+
+The first time you access shlink-web-client from a browser, you will have to configure the list of shlink servers you want to manage, and they will be saved in the local storage.
+
+Those servers can be exported and imported in other browsers, but if for some reason you need some servers to be there from the beginning, starting with shlink-web-client 2.1.0, you can provide a `servers.json` file in the project root folder (the same containing the `index.html`, `favicon.ico`, etc) with a structure like this:
+
+```json
+[
+  {
+    "name": "Main server",
+    "url": "https://doma.in",
+    "apiKey": "09c972b7-506b-49f1-a19a-d729e22e599c"
+  },
+  {
+    "name": "Local",
+    "url": "http://localhost:8080",
+    "apiKey": "580d0b42-4dea-419a-96bf-6c876b901451"
+  }
+]
+```
+
+> The list can contain as many servers as you need.
+
+If you are using the shlink-web-client docker image, you can mount the `servers.json` file in a volume inside `/usr/share/nginx/html`, which is the app's document root inside the container.
+
+    docker run --name shlink-web-client -p 8000:80 -v ${PWD}/servers.json:/usr/share/nginx/html/servers.json shlinkio/shlink-web-client
 
 ## Serve project in subpath
 
-Official distributable files have been build so that they are served from the root of a domain.
+Official distributable files have been built so that they are served from the root of a domain.
 
 If you need to host shlink-web-client yourself and serve it from a subpath, follow these steps:
 
-* Download [node](https://nodejs.org/en/download/package-manager/) 10.4 or later (if you don't have it yet).
-* Download [yarn](https://yarnpkg.com/en/docs/install) package manager.
-* Download shlink-web-client source files for the version you want to build.
+* Download shlink-web-client source code for the version you want to build.
     * For example, if you want to build `v1.0.1`, use this link https://github.com/shlinkio/shlink-web-client/archive/v1.0.1.zip
     * Replace the `v1.0.1` part in the link with the one of the version you want to build.
 * Decompress the file and `cd` into the resulting folder.
-* Install project dependencies by running `yarn install`.
 * Open the `package.json` file in the root of the project, locate the `homepage` property and replace the value (which should be an empty string) by the path from which you want to serve shlink-web-client.
     * For example: `"homepage": "/my-projects/shlink-web-client",`.
-* Build the distributable contents by running `yarn build`.
-* Once the command finishes, you will have a `build` folder with all the static assets you need to run shlink-web-client. Just place them wherever you want them to be served from.
+* Build the project:
+    * For classic hosting:
+        * Download [node](https://nodejs.org/en/download/package-manager/) 10.15 or later.
+        * Install project dependencies by running `npm install`.
+        * Build the project by running `npm run build`.
+        * Once the command finishes, you will have a `build` folder with all the static assets you need to run shlink-web-client. Just place them wherever you want them to be served from.
+    * For docker image:
+        * Download [docker](https://docs.docker.com/install/).
+        * Build the docker image by running `docker build . -t shlink-web-client`.
+        * Once the command finishes, you will have an image with the name `shlink-web-client`.

docker-compose.override.yml.dist

@@ -6,3 +6,4 @@ services:
     volumes:
       - /etc/passwd:/etc/passwd:ro
       - /etc/group:/etc/group:ro
+      - ./home:/home/alejandro

docker-compose.yml

@@ -3,8 +3,8 @@ version: '3'
 services:
   shlink_web_client_node:
     container_name: shlink_web_client_node
-    image: node:10.15.0-alpine
-    command: /bin/sh -c "cd /home/shlink/www && yarn install && yarn start"
+    image: node:10.15.3-alpine
+    command: /bin/sh -c "cd /home/shlink/www && npm install && npm run start"
     volumes:
       - ./:/home/shlink/www
     ports:

package.json

@@ -5,17 +5,19 @@
   "private": false,
   "homepage": "",
   "scripts": {
-    "lint": "yarn lint:js && yarn lint:css",
+    "lint": "npm run lint:js && npm run lint:css",
     "lint:js": "eslint src test scripts config",
-    "lint:js:fix": "yarn lint:js --fix",
+    "lint:js:fix": "npm run lint:js -- --fix",
     "lint:css": "stylelint src/*.scss src/**/*.scss",
-    "lint:css:fix": "yarn lint:css --fix",
+    "lint:css:fix": "npm run lint:css -- --fix",
     "start": "node scripts/start.js",
-    "serve:build": "yarn serve ./build",
+    "serve:build": "serve ./build",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom --colors",
-    "test:ci": "yarn test --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=clover",
-    "test:pretty": "yarn test --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=html"
+    "test:ci": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=clover",
+    "test:pretty": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=html",
+    "mutate": "./node_modules/.bin/stryker run",
+    "mutate:ci": "npm run mutate -- --mutate=$MUTATION_FILES"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.6.3",
@@ -27,7 +29,7 @@
     "array-map": "^0.0.0",
     "array-reduce": "^0.0.0",
     "axios": "^0.18.0",
-    "bootstrap": "~4.1.1",
+    "bootstrap": "^4.3.1",
     "bottlejs": "^1.7.1",
     "chart.js": "^2.7.2",
     "classnames": "^2.2.6",
@@ -37,27 +39,32 @@
     "promise": "^8.0.1",
     "prop-types": "^15.6.2",
     "qs": "^6.5.2",
-    "ramda": "^0.25.0",
-    "react": "^16.7.0",
+    "ramda": "^0.26.1",
+    "react": "^16.8.0",
     "react-autosuggest": "^9.4.0",
     "react-chartjs-2": "^2.7.4",
     "react-color": "^2.14.1",
     "react-copy-to-clipboard": "^5.0.1",
     "react-datepicker": "~1.5.0",
-    "react-dom": "^16.7.0",
-    "react-leaflet": "^2.1.4",
+    "react-dom": "^16.8.0",
+    "react-leaflet": "^2.2.1",
     "react-moment": "^0.7.6",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.2.2",
     "react-swipeable": "^4.3.0",
     "react-tagsinput": "^3.19.0",
-    "reactstrap": "^6.0.1",
+    "reactstrap": "^7.1.0",
     "redux": "^4.0.0",
+    "redux-actions": "^2.6.5",
     "redux-thunk": "^2.3.0",
     "uuid": "^3.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.1.6",
+    "@stryker-mutator/core": "^1.2.0",
+    "@stryker-mutator/html-reporter": "^1.2.0",
+    "@stryker-mutator/javascript-mutator": "^1.2.0",
+    "@stryker-mutator/jest-runner": "^1.2.0",
     "@svgr/webpack": "^2.4.1",
     "adm-zip": "0.4.11",
     "autoprefixer": "^7.1.6",
@@ -112,7 +119,7 @@
     "resolve": "^1.8.1",
     "sass-loader": "^7.1.0",
     "serve": "^10.0.0",
-    "sinon": "^6.1.5",
+    "stryker-cli": "^1.0.0",
     "style-loader": "^0.23.0",
     "stylelint": "^9.9.0",
     "stylelint-config-adidas": "^1.2.1",

src/common/ErrorHandler.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import * as PropTypes from 'prop-types';
+import './ErrorHandler.scss';
+import { Button } from 'reactstrap';
+
+const ErrorHandler = ({ location }, { error }) => class ErrorHandler extends React.Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(e) {
+    if (process.env.NODE_ENV !== 'development') {
+      error(e);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="error-handler">
+          <h1>Oops! This is awkward :S</h1>
+          <p>It seems that something went wrong. Try refreshing the page or just click this button.</p>
+          <br />
+          <Button outline color="primary" onClick={() => location.reload()}>Take me back</Button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+};
+
+export default ErrorHandler;

src/common/ErrorHandler.scss

@@ -0,0 +1,9 @@
+@import '../utils/mixins/vertical-align.scss';
+
+.error-handler {
+  @include vertical-align();
+
+  padding: 20px;
+  text-align: center;
+  width: 100%;
+}

src/common/Home.js

@@ -18,18 +18,20 @@ export default class Home extends React.Component {
   }
 
   render() {
-    const servers = values(this.props.servers);
+    const { servers: { list, loading } } = this.props;
+    const servers = values(list);
     const hasServers = !isEmpty(servers);
 
     return (
       <div className="home">
         <h1 className="home__title">Welcome to Shlink</h1>
         <h5 className="home__intro">
-          {hasServers && <span>Please, select a server.</span>}
-          {!hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
+          {!loading && hasServers && <span>Please, select a server.</span>}
+          {!loading && !hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
+          {loading && <span>Trying to load servers...</span>}
         </h5>
 
-        {hasServers && (
+        {!loading && hasServers && (
           <ListGroup className="home__servers-list">
             {servers.map(({ name, id }) => (
               <ListGroupItem

src/common/MenuLayout.js

@@ -20,9 +20,7 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
 
     state = { showSideBar: false };
 
-    // FIXME Shouldn't use componentWillMount, but this code has to be run before children components are rendered
-    /* eslint react/no-deprecated: "off" */
-    componentWillMount() {
+    componentDidMount() {
       const { match, selectServer } = this.props;
       const { params: { serverId } } = match;
 

src/common/services/provideServices.js

@@ -3,9 +3,11 @@ import MainHeader from '../MainHeader';
 import Home from '../Home';
 import MenuLayout from '../MenuLayout';
 import AsideMenu from '../AsideMenu';
+import ErrorHandler from '../ErrorHandler';
 
 const provideServices = (bottle, connect, withRouter) => {
   bottle.constant('window', global.window);
+  bottle.constant('console', global.console);
 
   bottle.serviceFactory('ScrollToTop', ScrollToTop, 'window');
   bottle.decorator('ScrollToTop', withRouter);
@@ -29,6 +31,8 @@ const provideServices = (bottle, connect, withRouter) => {
   bottle.decorator('MenuLayout', withRouter);
 
   bottle.serviceFactory('AsideMenu', AsideMenu, 'DeleteServerButton');
+
+  bottle.serviceFactory('ErrorHandler', ErrorHandler, 'window', 'console');
 };
 
 export default provideServices;

src/index.js

@@ -16,14 +16,16 @@ import './index.scss';
 // This overwrites icons used for leaflet maps, fixing some issues caused by webpack while processing the CSS
 fixLeafletIcons();
 
-const { App, ScrollToTop } = container;
+const { App, ScrollToTop, ErrorHandler } = container;
 
 render(
   <Provider store={store}>
     <BrowserRouter basename={homepage}>
-      <ScrollToTop>
-        <App />
-      </ScrollToTop>
+      <ErrorHandler>
+        <ScrollToTop>
+          <App />
+        </ScrollToTop>
+      </ErrorHandler>
     </BrowserRouter>
   </Provider>,
   document.getElementById('root')

src/index.scss

@@ -51,3 +51,11 @@ body,
     margin: 0 auto !important;
   }
 }
+
+.pagination .page-link {
+  cursor: pointer;
+}
+
+.paddingless {
+  padding: 0;
+}

src/servers/ServersDropdown.js

@@ -14,7 +14,12 @@ const ServersDropdown = (serversExporter) => class ServersDropdown extends React
   };
 
   renderServers = () => {
-    const { servers, selectedServer, selectServer } = this.props;
+    const { servers: { list, loading }, selectedServer, selectServer } = this.props;
+    const servers = values(list);
+
+    if (loading) {
+      return <DropdownItem disabled><i>Trying to load servers...</i></DropdownItem>;
+    }
 
     if (isEmpty(servers)) {
       return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>;
@@ -22,7 +27,7 @@ const ServersDropdown = (serversExporter) => class ServersDropdown extends React
 
     return (
       <React.Fragment>
-        {values(servers).map(({ name, id }) => (
+        {servers.map(({ name, id }) => (
           <DropdownItem
             key={id}
             tag={Link}
@@ -46,18 +51,14 @@ const ServersDropdown = (serversExporter) => class ServersDropdown extends React
     );
   };
 
-  componentDidMount() {
-    this.props.listServers();
-  }
+  componentDidMount = this.props.listServers;
 
-  render() {
-    return (
-      <UncontrolledDropdown nav inNavbar>
-        <DropdownToggle nav caret>Servers</DropdownToggle>
-        <DropdownMenu right>{this.renderServers()}</DropdownMenu>
-      </UncontrolledDropdown>
-    );
-  }
+  render = () => (
+    <UncontrolledDropdown nav inNavbar>
+      <DropdownToggle nav caret>Servers</DropdownToggle>
+      <DropdownMenu right>{this.renderServers()}</DropdownMenu>
+    </UncontrolledDropdown>
+  );
 };
 
 export default ServersDropdown;

src/servers/helpers/ImportServersBtn.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
-import { assoc, map } from 'ramda';
-import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
 
 const ImportServersBtn = (serversImporter) => class ImportServersBtn extends React.Component {
@@ -22,10 +20,8 @@ const ImportServersBtn = (serversImporter) => class ImportServersBtn extends Rea
   render() {
     const { importServersFromFile } = serversImporter;
     const { onImport, createServers } = this.props;
-    const assocId = (server) => assoc('id', uuid(), server);
     const onChange = ({ target }) =>
       importServersFromFile(target.files[0])
-        .then(map(assocId))
         .then(createServers)
         .then(onImport)
         .then(() => {

src/servers/reducers/selectedServer.js

@@ -1,32 +1,27 @@
+import { createAction, handleActions } from 'redux-actions';
 import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListParams';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const SELECT_SERVER = 'shlink/selectedServer/SELECT_SERVER';
 export const RESET_SELECTED_SERVER = 'shlink/selectedServer/RESET_SELECTED_SERVER';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
-const defaultState = null;
+const initialState = null;
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case SELECT_SERVER:
-      return action.selectedServer;
-    case RESET_SELECTED_SERVER:
-      return defaultState;
-    default:
-      return state;
-  }
-}
+export const resetSelectedServer = createAction(RESET_SELECTED_SERVER);
 
-export const resetSelectedServer = () => ({ type: RESET_SELECTED_SERVER });
-
-export const selectServer = (serversService) => (serverId) => (dispatch) => {
+export const selectServer = ({ findServerById }) => (serverId) => (dispatch) => {
   dispatch(resetShortUrlParams());
 
-  const selectedServer = serversService.findServerById(serverId);
+  const selectedServer = findServerById(serverId);
 
   dispatch({
     type: SELECT_SERVER,
     selectedServer,
   });
 };
+
+export default handleActions({
+  [RESET_SELECTED_SERVER]: () => initialState,
+  [SELECT_SERVER]: (state, { selectedServer }) => selectedServer,
+}, initialState);

src/servers/reducers/server.js

@@ -1,33 +1,51 @@
+import { handleActions } from 'redux-actions';
+import { pipe, isEmpty, assoc, map, prop } from 'ramda';
+import { v4 as uuid } from 'uuid';
+import { homepage } from '../../../package.json';
+
+/* eslint-disable padding-line-between-statements */
+export const FETCH_SERVERS_START = 'shlink/servers/FETCH_SERVERS_START';
 export const FETCH_SERVERS = 'shlink/servers/FETCH_SERVERS';
+/* eslint-enable padding-line-between-statements */
 
-export default function reducer(state = {}, action) {
-  switch (action.type) {
-    case FETCH_SERVERS:
-      return action.servers;
-    default:
-      return state;
+const initialState = {
+  list: {},
+  loading: false,
+};
+
+const assocId = (server) => assoc('id', server.id || uuid(), server);
+
+export default handleActions({
+  [FETCH_SERVERS_START]: (state) => ({ ...state, loading: true }),
+  [FETCH_SERVERS]: (state, { list }) => ({ list, loading: false }),
+}, initialState);
+
+export const listServers = ({ listServers, createServers }, { get }) => () => async (dispatch) => {
+  dispatch({ type: FETCH_SERVERS_START });
+  const localList = listServers();
+
+  if (!isEmpty(localList)) {
+    dispatch({ type: FETCH_SERVERS, list: localList });
+
+    return;
   }
-}
 
-export const listServers = (serversService) => () => ({
-  type: FETCH_SERVERS,
-  servers: serversService.listServers(),
-});
+  // If local list is empty, try to fetch it remotely and calculate IDs for every server
+  const remoteList = await get(`${homepage}/servers.json`)
+    .then(prop('data'))
+    .then(map(assocId))
+    .catch(() => []);
 
-export const createServer = (serversService, listServers) => (server) => {
-  serversService.createServer(server);
-
-  return listServers();
+  createServers(remoteList);
+  dispatch({ type: FETCH_SERVERS, list: remoteList.reduce((map, server) => ({ ...map, [server.id]: server }), {}) });
 };
 
-export const deleteServer = (serversService, listServers) => (server) => {
-  serversService.deleteServer(server);
+export const createServer = ({ createServer }, listServersAction) => pipe(createServer, listServersAction);
 
-  return listServers();
-};
+export const deleteServer = ({ deleteServer }, listServersAction) => pipe(deleteServer, listServersAction);
 
-export const createServers = (serversService, listServers) => (servers) => {
-  serversService.createServers(servers);
-
-  return listServers();
-};
+export const createServers = ({ createServers }, listServersAction) => pipe(
+  map(assocId),
+  createServers,
+  listServersAction
+);

src/servers/services/ServersImporter.js

@@ -1,9 +1,3 @@
-import PropTypes from 'prop-types';
-
-export const serversImporterType = PropTypes.shape({
-  importServersFromFile: PropTypes.func,
-});
-
 export default class ServersImporter {
   constructor(csvjson) {
     this.csvjson = csvjson;

src/servers/services/ServersService.js

@@ -23,9 +23,6 @@ export default class ServersService {
     this.storage.set(SERVERS_STORAGE_KEY, allServers);
   };
 
-  deleteServer = (server) =>
-    this.storage.set(
-      SERVERS_STORAGE_KEY,
-      dissoc(server.id, this.listServers())
-    );
+  deleteServer = ({ id }) =>
+    this.storage.set(SERVERS_STORAGE_KEY, dissoc(id, this.listServers()));
 }

src/servers/services/provideServices.js

@@ -38,7 +38,7 @@ const provideServices = (bottle, connect, withRouter) => {
   bottle.serviceFactory('createServer', createServer, 'ServersService', 'listServers');
   bottle.serviceFactory('createServers', createServers, 'ServersService', 'listServers');
   bottle.serviceFactory('deleteServer', deleteServer, 'ServersService', 'listServers');
-  bottle.serviceFactory('listServers', listServers, 'ServersService');
+  bottle.serviceFactory('listServers', listServers, 'ServersService', 'axios');
 
   bottle.serviceFactory('resetSelectedServer', () => resetSelectedServer);
 };

src/short-urls/CreateShortUrl.js

@@ -5,7 +5,9 @@ import React from 'react';
 import { Collapse } from 'reactstrap';
 import * as PropTypes from 'prop-types';
 import DateInput from '../utils/DateInput';
+import Checkbox from '../utils/Checkbox';
 import { createShortUrlResultType } from './reducers/shortUrlCreation';
+import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon';
 
 const normalizeTag = pipe(trim, replace(/ /g, '-'));
 const formatDate = (date) => isNil(date) ? date : date.format();
@@ -24,6 +26,7 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
     validSince: undefined,
     validUntil: undefined,
     maxVisits: undefined,
+    findIfExists: false,
     moreOptionsVisible: false,
   };
 
@@ -93,22 +96,30 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
                 {renderDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })}
               </div>
             </div>
+
+            <div className="mb-3 text-right">
+              <Checkbox
+                className="mr-2"
+                checked={this.state.findIfExists}
+                onChange={(findIfExists) => this.setState({ findIfExists })}
+              >
+                Use existing URL if found
+              </Checkbox>
+              <UseExistingIfFoundInfoIcon />
+            </div>
           </Collapse>
 
           <div>
             <button
               type="button"
-              className="btn btn-outline-secondary create-short-url__btn"
+              className="btn btn-outline-secondary"
               onClick={() => this.setState(({ moreOptionsVisible }) => ({ moreOptionsVisible: !moreOptionsVisible }))}
             >
               <FontAwesomeIcon icon={this.state.moreOptionsVisible ? upIcon : downIcon} />
               &nbsp;
               {this.state.moreOptionsVisible ? 'Less' : 'More'} options
             </button>
-            <button
-              className="btn btn-outline-primary create-short-url__btn float-right"
-              disabled={shortUrlCreationResult.loading}
-            >
+            <button className="btn btn-outline-primary float-right" disabled={shortUrlCreationResult.loading}>
               {shortUrlCreationResult.loading ? 'Creating...' : 'Create'}
             </button>
           </div>

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 { range } from 'ramda';
+import { rangeOf } from '../utils/utils';
 
 const propTypes = {
   serverId: PropTypes.string.isRequired,
@@ -20,7 +20,7 @@ export default function Paginator({ paginator = {}, serverId }) {
   }
 
   const renderPages = () =>
-    range(1, pagesCount + 1).map((pageNumber) => (
+    rangeOf(pagesCount, (pageNumber) => (
       <PaginationItem key={pageNumber} active={currentPage === pageNumber}>
         <PaginationLink
           tag={Link}

src/short-urls/UseExistingIfFoundInfoIcon.js

@@ -0,0 +1,56 @@
+import React from 'react';
+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';
+
+const renderInfoModal = (isOpen, toggle) => (
+  <Modal isOpen={isOpen} toggle={toggle} centered size="lg">
+    <ModalHeader toggle={toggle}>Info</ModalHeader>
+    <ModalBody>
+      <p>
+        When the&nbsp;
+        <b><i>&quot;Use existing URL if found&quot;</i></b>
+        &nbsp;checkbox is checked, the server will return an existing short URL if it matches provided params.
+      </p>
+      <p>
+        These are the checks performed by Shlink in order to determine if an existing short URL should be returned:
+      </p>
+      <ul>
+        <li>
+          When only the long URL is provided: The most recent match will be returned, or a new short URL will be created
+          if none is found
+        </li>
+        <li>
+          When long URL and custom slug are provided: Same as in previous case, but it will try to match the short URL
+          using both the long URL and the slug.
+          <br />
+          If the slug is being used by another long URL, an error will be returned.
+        </li>
+        <li>
+          When other params are provided: Same as in previous cases, but it will try to match existing short URLs with
+          all provided data. If any of them does not match, a new short URL will be created
+        </li>
+      </ul>
+      <blockquote className="use-existing-if-found-info-icon__modal-quote">
+        <b>Important:</b> This feature will be ignored while using a Shlink version older than v1.16.0.
+      </blockquote>
+    </ModalBody>
+  </Modal>
+);
+
+const UseExistingIfFoundInfoIcon = () => {
+  const [ isModalOpen, toggleModal ] = useToggle(false);
+
+  return (
+    <React.Fragment>
+      <span title="What does this mean?">
+        <FontAwesomeIcon icon={infoIcon} style={{ cursor: 'pointer' }} onClick={toggleModal} />
+      </span>
+      {renderInfoModal(isModalOpen, toggleModal)}
+    </React.Fragment>
+  );
+};
+
+export default UseExistingIfFoundInfoIcon;

src/short-urls/UseExistingIfFoundInfoIcon.scss

@@ -0,0 +1,7 @@
+.use-existing-if-found-info-icon__modal-quote {
+  margin-bottom: 0;
+  padding: 10px 15px;
+  font-size: 17.5px;
+  border-left: 5px solid #eee;
+  background-color: #f9f9f9;
+}

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -35,7 +35,7 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
   toggle = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
 
   render() {
-    const { onCopyToClipboard, shortUrl, selectedServer: { id } } = this.props;
+    const { onCopyToClipboard, shortUrl, selectedServer } = this.props;
     const completeShortUrl = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
     const toggleModal = (prop) => () => this.setState((prevState) => ({ [prop]: !prevState[prop] }));
     const toggleQrCode = toggleModal('isQrModalOpen');
@@ -45,11 +45,11 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
 
     return (
       <ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen}>
-        <DropdownToggle size="sm" caret className="short-urls-row-menu__dropdown-toggle btn-outline-secondary">
+        <DropdownToggle size="sm" caret outline className="short-urls-row-menu__dropdown-toggle">
           &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
         </DropdownToggle>
         <DropdownMenu right>
-          <DropdownItem tag={Link} to={`/server/${id}/short-code/${shortUrl.shortCode}/visits`}>
+          <DropdownItem tag={Link} to={`/server/${selectedServer ? selectedServer.id : ''}/short-code/${shortUrl.shortCode}/visits`}>
             <FontAwesomeIcon icon={pieChartIcon} /> &nbsp;Visit stats
           </DropdownItem>
 

src/short-urls/reducers/shortUrlCreation.js

@@ -1,11 +1,12 @@
 import PropTypes from 'prop-types';
+import { createAction, handleActions } from 'redux-actions';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const CREATE_SHORT_URL_START = 'shlink/createShortUrl/CREATE_SHORT_URL_START';
 export const CREATE_SHORT_URL_ERROR = 'shlink/createShortUrl/CREATE_SHORT_URL_ERROR';
 export const CREATE_SHORT_URL = 'shlink/createShortUrl/CREATE_SHORT_URL';
 export const RESET_CREATE_SHORT_URL = 'shlink/createShortUrl/RESET_CREATE_SHORT_URL';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
 export const createShortUrlResultType = PropTypes.shape({
   result: PropTypes.shape({
@@ -15,47 +16,26 @@ export const createShortUrlResultType = PropTypes.shape({
   error: PropTypes.bool,
 });
 
-const defaultState = {
+const initialState = {
   result: null,
   saving: false,
   error: false,
 };
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case CREATE_SHORT_URL_START:
-      return {
-        ...state,
-        saving: true,
-        error: false,
-      };
-    case CREATE_SHORT_URL_ERROR:
-      return {
-        ...state,
-        saving: false,
-        error: true,
-      };
-    case CREATE_SHORT_URL:
-      return {
-        result: action.result,
-        saving: false,
-        error: false,
-      };
-    case RESET_CREATE_SHORT_URL:
-      return defaultState;
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [CREATE_SHORT_URL_START]: (state) => ({ ...state, saving: true, error: false }),
+  [CREATE_SHORT_URL_ERROR]: (state) => ({ ...state, saving: false, error: true }),
+  [CREATE_SHORT_URL]: (state, { result }) => ({ result, saving: false, error: false }),
+  [RESET_CREATE_SHORT_URL]: () => initialState,
+}, initialState);
 
 export const createShortUrl = (buildShlinkApiClient) => (data) => async (dispatch, getState) => {
   dispatch({ type: CREATE_SHORT_URL_START });
 
-  const { selectedServer } = getState();
-  const shlinkApiClient = buildShlinkApiClient(selectedServer);
+  const { createShortUrl } = await buildShlinkApiClient(getState);
 
   try {
-    const result = await shlinkApiClient.createShortUrl(data);
+    const result = await createShortUrl(data);
 
     dispatch({ type: CREATE_SHORT_URL, result });
   } catch (e) {
@@ -63,4 +43,4 @@ export const createShortUrl = (buildShlinkApiClient) => (data) => async (dispatc
   }
 };
 
-export const resetCreateShortUrl = () => ({ type: RESET_CREATE_SHORT_URL });
+export const resetCreateShortUrl = createAction(RESET_CREATE_SHORT_URL);

src/short-urls/reducers/shortUrlDeletion.js

@@ -1,12 +1,13 @@
+import { createAction, handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const DELETE_SHORT_URL_START = 'shlink/deleteShortUrl/DELETE_SHORT_URL_START';
 export const DELETE_SHORT_URL_ERROR = 'shlink/deleteShortUrl/DELETE_SHORT_URL_ERROR';
 export const DELETE_SHORT_URL = 'shlink/deleteShortUrl/DELETE_SHORT_URL';
 export const RESET_DELETE_SHORT_URL = 'shlink/deleteShortUrl/RESET_DELETE_SHORT_URL';
 export const SHORT_URL_DELETED = 'shlink/deleteShortUrl/SHORT_URL_DELETED';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
 export const shortUrlDeletionType = PropTypes.shape({
   shortCode: PropTypes.string.isRequired,
@@ -18,47 +19,24 @@ export const shortUrlDeletionType = PropTypes.shape({
   }).isRequired,
 });
 
-const defaultState = {
+const initialState = {
   shortCode: '',
   loading: false,
   error: false,
   errorData: {},
 };
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case DELETE_SHORT_URL_START:
-      return {
-        ...state,
-        loading: true,
-        error: false,
-      };
-    case DELETE_SHORT_URL_ERROR:
-      return {
-        ...state,
-        loading: false,
-        error: true,
-        errorData: action.errorData,
-      };
-    case DELETE_SHORT_URL:
-      return {
-        ...state,
-        shortCode: action.shortCode,
-        loading: false,
-        error: false,
-      };
-    case RESET_DELETE_SHORT_URL:
-      return defaultState;
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [DELETE_SHORT_URL_START]: (state) => ({ ...state, loading: true, error: false }),
+  [DELETE_SHORT_URL_ERROR]: (state, { errorData }) => ({ ...state, errorData, loading: false, error: true }),
+  [DELETE_SHORT_URL]: (state, { shortCode }) => ({ ...state, shortCode, loading: false, error: false }),
+  [RESET_DELETE_SHORT_URL]: () => initialState,
+}, initialState);
 
 export const deleteShortUrl = (buildShlinkApiClient) => (shortCode) => async (dispatch, getState) => {
   dispatch({ type: DELETE_SHORT_URL_START });
 
-  const { selectedServer } = getState();
-  const { deleteShortUrl } = buildShlinkApiClient(selectedServer);
+  const { deleteShortUrl } = await buildShlinkApiClient(getState);
 
   try {
     await deleteShortUrl(shortCode);
@@ -70,6 +48,6 @@ export const deleteShortUrl = (buildShlinkApiClient) => (shortCode) => async (di
   }
 };
 
-export const resetDeleteShortUrl = () => ({ type: RESET_DELETE_SHORT_URL });
+export const resetDeleteShortUrl = createAction(RESET_DELETE_SHORT_URL);
 
 export const shortUrlDeleted = (shortCode) => ({ type: SHORT_URL_DELETED, shortCode });

src/short-urls/reducers/shortUrlTags.js

@@ -1,13 +1,13 @@
+import { createAction, handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
-import { pick } from 'ramda';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const EDIT_SHORT_URL_TAGS_START = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_START';
 export const EDIT_SHORT_URL_TAGS_ERROR = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_ERROR';
 export const EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS';
 export const RESET_EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/RESET_EDIT_SHORT_URL_TAGS';
 export const SHORT_URL_TAGS_EDITED = 'shlink/shortUrlTags/SHORT_URL_TAGS_EDITED';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
 export const shortUrlTagsType = PropTypes.shape({
   shortCode: PropTypes.string,
@@ -16,47 +16,26 @@ export const shortUrlTagsType = PropTypes.shape({
   error: PropTypes.bool.isRequired,
 });
 
-const defaultState = {
+const initialState = {
   shortCode: null,
   tags: [],
   saving: false,
   error: false,
 };
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case EDIT_SHORT_URL_TAGS_START:
-      return {
-        ...state,
-        saving: true,
-        error: false,
-      };
-    case EDIT_SHORT_URL_TAGS_ERROR:
-      return {
-        ...state,
-        saving: false,
-        error: true,
-      };
-    case EDIT_SHORT_URL_TAGS:
-      return {
-        ...pick([ 'shortCode', 'tags' ], action),
-        saving: false,
-        error: false,
-      };
-    case RESET_EDIT_SHORT_URL_TAGS:
-      return defaultState;
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [EDIT_SHORT_URL_TAGS_START]: (state) => ({ ...state, saving: true, error: false }),
+  [EDIT_SHORT_URL_TAGS_ERROR]: (state) => ({ ...state, saving: false, error: true }),
+  [EDIT_SHORT_URL_TAGS]: (state, { shortCode, tags }) => ({ shortCode, tags, saving: false, error: false }),
+  [RESET_EDIT_SHORT_URL_TAGS]: () => initialState,
+}, initialState);
 
 export const editShortUrlTags = (buildShlinkApiClient) => (shortCode, tags) => async (dispatch, getState) => {
   dispatch({ type: EDIT_SHORT_URL_TAGS_START });
-  const { selectedServer } = getState();
-  const shlinkApiClient = buildShlinkApiClient(selectedServer);
+  const { updateShortUrlTags } = await buildShlinkApiClient(getState);
 
   try {
-    const normalizedTags = await shlinkApiClient.updateShortUrlTags(shortCode, tags);
+    const normalizedTags = await updateShortUrlTags(shortCode, tags);
 
     dispatch({ tags: normalizedTags, shortCode, type: EDIT_SHORT_URL_TAGS });
   } catch (e) {
@@ -66,7 +45,7 @@ export const editShortUrlTags = (buildShlinkApiClient) => (shortCode, tags) => a
   }
 };
 
-export const resetShortUrlsTags = () => ({ type: RESET_EDIT_SHORT_URL_TAGS });
+export const resetShortUrlsTags = createAction(RESET_EDIT_SHORT_URL_TAGS);
 
 export const shortUrlTagsEdited = (shortCode, tags) => ({
   tags,

src/short-urls/reducers/shortUrlsList.js

@@ -1,13 +1,14 @@
+import { handleActions } from 'redux-actions';
 import { assoc, assocPath, propEq, reject } from 'ramda';
 import PropTypes from 'prop-types';
 import { SHORT_URL_TAGS_EDITED } from './shortUrlTags';
 import { SHORT_URL_DELETED } from './shortUrlDeletion';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
 export const LIST_SHORT_URLS_ERROR = 'shlink/shortUrlsList/LIST_SHORT_URLS_ERROR';
 export const LIST_SHORT_URLS = 'shlink/shortUrlsList/LIST_SHORT_URLS';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
 export const shortUrlType = PropTypes.shape({
   shortCode: PropTypes.string,
@@ -22,45 +23,29 @@ const initialState = {
   error: false,
 };
 
-export default function reducer(state = initialState, action) {
-  switch (action.type) {
-    case LIST_SHORT_URLS_START:
-      return { ...state, loading: true, error: false };
-    case LIST_SHORT_URLS:
-      return {
-        loading: false,
-        error: false,
-        shortUrls: action.shortUrls,
-      };
-    case LIST_SHORT_URLS_ERROR:
-      return {
-        loading: false,
-        error: true,
-        shortUrls: {},
-      };
-    case SHORT_URL_TAGS_EDITED:
-      const { data } = state.shortUrls;
+export default handleActions({
+  [LIST_SHORT_URLS_START]: (state) => ({ ...state, loading: true, error: false }),
+  [LIST_SHORT_URLS]: (state, { shortUrls }) => ({ loading: false, error: false, shortUrls }),
+  [LIST_SHORT_URLS_ERROR]: () => ({ loading: false, error: true, shortUrls: {} }),
+  [SHORT_URL_TAGS_EDITED]: (state, action) => { // eslint-disable-line object-shorthand
+    const { data } = state.shortUrls;
 
-      return assocPath([ 'shortUrls', 'data' ], data.map((shortUrl) =>
-        shortUrl.shortCode === action.shortCode
-          ? assoc('tags', action.tags, shortUrl)
-          : shortUrl), state);
-    case SHORT_URL_DELETED:
-      return assocPath(
-        [ 'shortUrls', 'data' ],
-        reject(propEq('shortCode', action.shortCode), state.shortUrls.data),
-        state,
-      );
-    default:
-      return state;
-  }
-}
+    return assocPath([ 'shortUrls', 'data' ], data.map((shortUrl) =>
+      shortUrl.shortCode === action.shortCode
+        ? assoc('tags', action.tags, shortUrl)
+        : shortUrl), state);
+  },
+  [SHORT_URL_DELETED]: (state, action) => assocPath(
+    [ 'shortUrls', 'data' ],
+    reject(propEq('shortCode', action.shortCode), state.shortUrls.data),
+    state,
+  ),
+}, initialState);
 
 export const listShortUrls = (buildShlinkApiClient) => (params = {}) => async (dispatch, getState) => {
   dispatch({ type: LIST_SHORT_URLS_START });
 
-  const { selectedServer = {} } = getState();
-  const { listShortUrls } = buildShlinkApiClient(selectedServer);
+  const { listShortUrls } = await buildShlinkApiClient(getState);
 
   try {
     const shortUrls = await listShortUrls(params);

src/short-urls/reducers/shortUrlsListParams.js

@@ -1,3 +1,4 @@
+import { createAction, handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
 import { LIST_SHORT_URLS } from './shortUrlsList';
 
@@ -9,17 +10,11 @@ export const shortUrlsListParamsType = PropTypes.shape({
   searchTerm: PropTypes.string,
 });
 
-const defaultState = { page: '1' };
+const initialState = { page: '1' };
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case LIST_SHORT_URLS:
-      return { ...state, ...action.params };
-    case RESET_SHORT_URL_PARAMS:
-      return defaultState;
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [LIST_SHORT_URLS]: (state, { params }) => ({ ...state, ...params }),
+  [RESET_SHORT_URL_PARAMS]: () => initialState,
+}, initialState);
 
-export const resetShortUrlParams = () => ({ type: RESET_SHORT_URL_PARAMS });
+export const resetShortUrlParams = createAction(RESET_SHORT_URL_PARAMS);

src/tags/reducers/tagDelete.js

@@ -1,52 +1,36 @@
+import { handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const DELETE_TAG_START = 'shlink/deleteTag/DELETE_TAG_START';
 export const DELETE_TAG_ERROR = 'shlink/deleteTag/DELETE_TAG_ERROR';
 export const DELETE_TAG = 'shlink/deleteTag/DELETE_TAG';
 export const TAG_DELETED = 'shlink/deleteTag/TAG_DELETED';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
 export const tagDeleteType = PropTypes.shape({
   deleting: PropTypes.bool,
   error: PropTypes.bool,
 });
 
-const defaultState = {
+const initialState = {
   deleting: false,
   error: false,
 };
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case DELETE_TAG_START:
-      return {
-        deleting: true,
-        error: false,
-      };
-    case DELETE_TAG_ERROR:
-      return {
-        deleting: false,
-        error: true,
-      };
-    case DELETE_TAG:
-      return {
-        deleting: false,
-        error: false,
-      };
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [DELETE_TAG_START]: () => ({ deleting: true, error: false }),
+  [DELETE_TAG_ERROR]: () => ({ deleting: false, error: true }),
+  [DELETE_TAG]: () => ({ deleting: false, error: false }),
+}, initialState);
 
 export const deleteTag = (buildShlinkApiClient) => (tag) => async (dispatch, getState) => {
   dispatch({ type: DELETE_TAG_START });
 
-  const { selectedServer } = getState();
-  const shlinkApiClient = buildShlinkApiClient(selectedServer);
+  const { deleteTags } = await buildShlinkApiClient(getState);
 
   try {
-    await shlinkApiClient.deleteTags([ tag ]);
+    await deleteTags([ tag ]);
     dispatch({ type: DELETE_TAG });
   } catch (e) {
     dispatch({ type: DELETE_TAG_ERROR });

src/tags/reducers/tagEdit.js

@@ -1,44 +1,30 @@
 import { pick } from 'ramda';
+import { handleActions } from 'redux-actions';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const EDIT_TAG_START = 'shlink/editTag/EDIT_TAG_START';
 export const EDIT_TAG_ERROR = 'shlink/editTag/EDIT_TAG_ERROR';
 export const EDIT_TAG = 'shlink/editTag/EDIT_TAG';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
 export const TAG_EDITED = 'shlink/editTag/TAG_EDITED';
 
-const defaultState = {
+const initialState = {
   oldName: '',
   newName: '',
   editing: false,
   error: false,
 };
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case EDIT_TAG_START:
-      return {
-        ...state,
-        editing: true,
-        error: false,
-      };
-    case EDIT_TAG_ERROR:
-      return {
-        ...state,
-        editing: false,
-        error: true,
-      };
-    case EDIT_TAG:
-      return {
-        ...pick([ 'oldName', 'newName' ], action),
-        editing: false,
-        error: false,
-      };
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [EDIT_TAG_START]: (state) => ({ ...state, editing: true, error: false }),
+  [EDIT_TAG_ERROR]: (state) => ({ ...state, editing: false, error: true }),
+  [EDIT_TAG]: (state, action) => ({
+    ...pick([ 'oldName', 'newName' ], action),
+    editing: false,
+    error: false,
+  }),
+}, initialState);
 
 export const editTag = (buildShlinkApiClient, colorGenerator) => (oldName, newName, color) => async (
   dispatch,
@@ -46,11 +32,10 @@ export const editTag = (buildShlinkApiClient, colorGenerator) => (oldName, newNa
 ) => {
   dispatch({ type: EDIT_TAG_START });
 
-  const { selectedServer } = getState();
-  const shlinkApiClient = buildShlinkApiClient(selectedServer);
+  const { editTag } = await buildShlinkApiClient(getState);
 
   try {
-    await shlinkApiClient.editTag(oldName, newName);
+    await editTag(oldName, newName);
     colorGenerator.setColorForKey(newName, color);
     dispatch({ type: EDIT_TAG, oldName, newName });
   } catch (e) {

src/tags/reducers/tagsList.js

@@ -1,73 +1,47 @@
+import { handleActions } from 'redux-actions';
 import { isEmpty, reject } from 'ramda';
-import { buildShlinkApiClientWithAxios as buildShlinkApiClient } from '../../utils/services/ShlinkApiClientBuilder';
 import { TAG_DELETED } from './tagDelete';
 import { TAG_EDITED } from './tagEdit';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
-const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
-const LIST_TAGS_ERROR = 'shlink/tagsList/LIST_TAGS_ERROR';
-const LIST_TAGS = 'shlink/tagsList/LIST_TAGS';
-const FILTER_TAGS = 'shlink/tagsList/FILTER_TAGS';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
+export const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
+export const LIST_TAGS_ERROR = 'shlink/tagsList/LIST_TAGS_ERROR';
+export const LIST_TAGS = 'shlink/tagsList/LIST_TAGS';
+export const FILTER_TAGS = 'shlink/tagsList/FILTER_TAGS';
+/* eslint-enable padding-line-between-statements */
 
-const defaultState = {
+const initialState = {
   tags: [],
   filteredTags: [],
   loading: false,
   error: false,
 };
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case LIST_TAGS_START:
-      return {
-        ...state,
-        loading: true,
-        error: false,
-      };
-    case LIST_TAGS_ERROR:
-      return {
-        ...state,
-        loading: false,
-        error: true,
-      };
-    case LIST_TAGS:
-      return {
-        tags: action.tags,
-        filteredTags: action.tags,
-        loading: false,
-        error: false,
-      };
-    case TAG_DELETED:
-      return {
-        ...state,
+const renameTag = (oldName, newName) => (tag) => tag === oldName ? newName : tag;
+const rejectTag = (tags, tagToReject) => reject((tag) => tag === tagToReject, tags);
 
-        // FIXME This should be optimized somehow...
-        tags: reject((tag) => tag === action.tag, state.tags),
-        filteredTags: reject((tag) => tag === action.tag, state.filteredTags),
-      };
-    case TAG_EDITED:
-      const renameTag = (tag) => tag === action.oldName ? action.newName : tag;
+export default handleActions({
+  [LIST_TAGS_START]: (state) => ({ ...state, loading: true, error: false }),
+  [LIST_TAGS_ERROR]: (state) => ({ ...state, loading: false, error: true }),
+  [LIST_TAGS]: (state, { tags }) => ({ tags, filteredTags: tags, loading: false, error: false }),
+  [TAG_DELETED]: (state, { tag }) => ({
+    ...state,
+    tags: rejectTag(state.tags, tag),
+    filteredTags: rejectTag(state.filteredTags, tag),
+  }),
+  [TAG_EDITED]: (state, { oldName, newName }) => ({
+    ...state,
+    tags: state.tags.map(renameTag(oldName, newName)).sort(),
+    filteredTags: state.filteredTags.map(renameTag(oldName, newName)).sort(),
+  }),
+  [FILTER_TAGS]: (state, { searchTerm }) => ({
+    ...state,
+    filteredTags: state.tags.filter((tag) => tag.toLowerCase().match(searchTerm)),
+  }),
+}, initialState);
 
-      return {
-        ...state,
-
-        // FIXME This should be optimized somehow...
-        tags: state.tags.map(renameTag).sort(),
-        filteredTags: state.filteredTags.map(renameTag).sort(),
-      };
-    case FILTER_TAGS:
-      return {
-        ...state,
-        filteredTags: state.tags.filter((tag) => tag.toLowerCase().match(action.searchTerm)),
-      };
-    default:
-      return state;
-  }
-}
-
-export const _listTags = (buildShlinkApiClient, force = false) => async (dispatch, getState) => {
-  const { tagsList, selectedServer } = getState();
+export const listTags = (buildShlinkApiClient, force = true) => () => async (dispatch, getState) => {
+  const { tagsList } = getState();
 
   if (!force && (tagsList.loading || !isEmpty(tagsList.tags))) {
     return;
@@ -76,8 +50,8 @@ export const _listTags = (buildShlinkApiClient, force = false) => async (dispatc
   dispatch({ type: LIST_TAGS_START });
 
   try {
-    const shlinkApiClient = buildShlinkApiClient(selectedServer);
-    const tags = await shlinkApiClient.listTags();
+    const { listTags } = await buildShlinkApiClient(getState);
+    const tags = await listTags();
 
     dispatch({ tags, type: LIST_TAGS });
   } catch (e) {
@@ -85,10 +59,6 @@ export const _listTags = (buildShlinkApiClient, force = false) => async (dispatc
   }
 };
 
-export const listTags = () => _listTags(buildShlinkApiClient);
-
-export const forceListTags = () => _listTags(buildShlinkApiClient, true);
-
 export const filterTags = (searchTerm) => ({
   type: FILTER_TAGS,
   searchTerm,

src/tags/services/provideServices.js

@@ -3,7 +3,7 @@ import TagCard from '../TagCard';
 import DeleteTagConfirmModal from '../helpers/DeleteTagConfirmModal';
 import EditTagModal from '../helpers/EditTagModal';
 import TagsList from '../TagsList';
-import { filterTags, forceListTags, listTags } from '../reducers/tagsList';
+import { filterTags, listTags } from '../reducers/tagsList';
 import { deleteTag, tagDeleted } from '../reducers/tagDelete';
 import { editTag, tagEdited } from '../reducers/tagEdit';
 
@@ -24,9 +24,11 @@ const provideServices = (bottle, connect) => {
   bottle.decorator('TagsList', connect([ 'tagsList' ], [ 'forceListTags', 'filterTags' ]));
 
   // Actions
+  const listTagsActionFactory = (force) => ({ buildShlinkApiClient }) => listTags(buildShlinkApiClient, force);
+
+  bottle.factory('listTags', listTagsActionFactory(false));
+  bottle.factory('forceListTags', listTagsActionFactory(true));
   bottle.serviceFactory('filterTags', () => filterTags);
-  bottle.serviceFactory('forceListTags', () => forceListTags);
-  bottle.serviceFactory('listTags', () => listTags);
   bottle.serviceFactory('tagDeleted', () => tagDeleted);
   bottle.serviceFactory('tagEdited', () => tagEdited);
 

src/utils/Checkbox.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { v4 as uuid } from 'uuid';
+
+const propTypes = {
+  checked: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([ PropTypes.string, PropTypes.node ]),
+  className: PropTypes.string,
+};
+
+const Checkbox = ({ checked, onChange, className, children }) => {
+  const id = uuid();
+  const onChecked = (e) => onChange(e.target.checked, e);
+
+  return (
+    <span className={classNames('custom-control custom-checkbox', className)} style={{ display: 'inline' }}>
+      <input type="checkbox" className="custom-control-input" id={id} checked={checked} onChange={onChecked} />
+      <label className="custom-control-label" htmlFor={id}>{children}</label>
+    </span>
+  );
+};
+
+Checkbox.propTypes = propTypes;
+
+export default Checkbox;

src/utils/PaginationDropdown.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
+import * as PropTypes from 'prop-types';
+
+const propTypes = {
+  toggleClassName: PropTypes.string,
+  ranges: PropTypes.arrayOf(PropTypes.number).isRequired,
+  value: PropTypes.number.isRequired,
+  setValue: PropTypes.func.isRequired,
+};
+
+const PaginationDropdown = ({ toggleClassName, ranges, value, setValue }) => (
+  <UncontrolledDropdown>
+    <DropdownToggle caret color="link" className={toggleClassName}>
+      Paginate
+    </DropdownToggle>
+    <DropdownMenu right>
+      {ranges.map((itemsPerPage) => (
+        <DropdownItem key={itemsPerPage} active={itemsPerPage === value} onClick={() => setValue(itemsPerPage)}>
+          <b>{itemsPerPage}</b> items per page
+        </DropdownItem>
+      ))}
+      <DropdownItem divider />
+      <DropdownItem disabled={value === Infinity} onClick={() => setValue(Infinity)}>
+        <i>Clear pagination</i>
+      </DropdownItem>
+    </DropdownMenu>
+  </UncontrolledDropdown>
+);
+
+PaginationDropdown.propTypes = propTypes;
+
+export default PaginationDropdown;

src/utils/SearchField.scss

@@ -20,4 +20,5 @@
   @include vertical-align();
 
   right: 15px;
+  cursor: pointer;
 }

src/utils/SortingDropdown.js

@@ -33,7 +33,7 @@ const SortingDropdown = ({ items, orderField, orderDir, onChange, isButton, righ
       <DropdownToggle
         caret
         color={isButton ? 'secondary' : 'link'}
-        className={classNames({ 'btn-block': isButton, 'btn-sm sorting-dropdown__paddingless': !isButton })}
+        className={classNames({ 'btn-block': isButton, 'btn-sm paddingless': !isButton })}
       >
         Order by
       </DropdownToggle>

src/utils/SortingDropdown.scss

@@ -10,7 +10,3 @@
   margin: 3.5px 0 0;
   float: right;
 }
-
-.sorting-dropdown__paddingless.sorting-dropdown__paddingless {
-  padding: 0;
-}

src/utils/services/ColorGenerator.js

@@ -1,15 +1,11 @@
-import { range } from 'ramda';
 import PropTypes from 'prop-types';
+import { rangeOf } from '../utils';
 
 const HEX_COLOR_LENGTH = 6;
 const { floor, random } = Math;
 const letters = '0123456789ABCDEF';
 const buildRandomColor = () =>
-  `#${
-    range(0, HEX_COLOR_LENGTH)
-      .map(() => letters[floor(random() * letters.length)])
-      .join('')
-  }`;
+  `#${rangeOf(HEX_COLOR_LENGTH, () => letters[floor(random() * letters.length)]).join('')}`;
 const normalizeKey = (key) => key.toLowerCase().trim();
 
 export default class ColorGenerator {

src/utils/services/ShlinkApiClientBuilder.js

@@ -1,9 +1,20 @@
-import * as axios from 'axios';
+import { wait } from '../utils';
 import ShlinkApiClient from './ShlinkApiClient';
 
 const apiClients = {};
 
-const buildShlinkApiClient = (axios) => ({ url, apiKey }) => {
+const getSelectedServerFromState = async (getState) => {
+  const { selectedServer } = getState();
+
+  if (!selectedServer) {
+    return wait(250).then(() => getSelectedServerFromState(getState));
+  }
+
+  return selectedServer;
+};
+
+const buildShlinkApiClient = (axios) => async (getState) => {
+  const { url, apiKey } = await getSelectedServerFromState(getState);
   const clientKey = `${url}_${apiKey}`;
 
   if (!apiClients[clientKey]) {
@@ -14,5 +25,3 @@ const buildShlinkApiClient = (axios) => ({ url, apiKey }) => {
 };
 
 export default buildShlinkApiClient;
-
-export const buildShlinkApiClientWithAxios = buildShlinkApiClient(axios);

src/utils/utils.js

@@ -2,8 +2,12 @@ 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 { range } from 'ramda';
+import { useState } from 'react';
 
+const TEN_ROUNDING_NUMBER = 10;
 const DEFAULT_TIMEOUT_DELAY = 2000;
+const { ceil } = Math;
 
 export const stateFlagTimeout = (setTimeout) => (
   setState,
@@ -37,3 +41,15 @@ export const fixLeafletIcons = () => {
     shadowUrl: markerShadow,
   });
 };
+
+export const rangeOf = (size, mappingFn, startAt = 1) => range(startAt, size + 1).map(mappingFn);
+
+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 wait = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

src/visits/GraphCard.js

@@ -1,18 +1,16 @@
-import { Card, CardHeader, CardBody } from 'reactstrap';
+import { Card, CardHeader, CardBody, CardFooter } from 'reactstrap';
 import { Doughnut, HorizontalBar } from 'react-chartjs-2';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { keys, values } from 'ramda';
+import './GraphCard.scss';
 
 const propTypes = {
-  title: PropTypes.string,
-  children: PropTypes.node,
+  title: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
+  footer: PropTypes.oneOfType([ PropTypes.string, PropTypes.node ]),
   isBarChart: PropTypes.bool,
   stats: PropTypes.object,
-  matchMedia: PropTypes.func,
-};
-const defaultProps = {
-  matchMedia: global.window ? global.window.matchMedia : () => {},
+  max: PropTypes.number,
 };
 
 const generateGraphData = (title, isBarChart, labels, data) => ({
@@ -36,62 +34,43 @@ const generateGraphData = (title, isBarChart, labels, data) => ({
   ],
 });
 
-const determineGraphAspectRatio = (barsCount, isBarChart, matchMedia) => {
-  const determineAspectRationModifier = () => {
-    switch (true) {
-      case matchMedia('(max-width: 1200px)').matches:
-        return 1.5; // eslint-disable-line no-magic-numbers
-      case matchMedia('(max-width: 992px)').matches:
-        return 1.75; // eslint-disable-line no-magic-numbers
-      case matchMedia('(max-width: 768px)').matches:
-        return 2; // eslint-disable-line no-magic-numbers
-      case matchMedia('(max-width: 576px)').matches:
-        return 2.25; // eslint-disable-line no-magic-numbers
-      default:
-        return 1;
-    }
-  };
+const dropLabelIfHidden = (label) => label.startsWith('hidden') ? '' : label;
 
-  const MAX_BARS_WITHOUT_HEIGHT = 20;
-  const DEFAULT_ASPECT_RATION = 2;
-  const shouldCalculateAspectRatio = isBarChart && barsCount > MAX_BARS_WITHOUT_HEIGHT;
-
-  return shouldCalculateAspectRatio
-    ? MAX_BARS_WITHOUT_HEIGHT / determineAspectRationModifier() * DEFAULT_ASPECT_RATION / barsCount
-    : DEFAULT_ASPECT_RATION;
-};
-
-const renderGraph = (title, isBarChart, stats, matchMedia) => {
+const renderGraph = (title, isBarChart, stats, max) => {
   const Component = isBarChart ? HorizontalBar : Doughnut;
-  const labels = keys(stats);
+  const labels = keys(stats).map(dropLabelIfHidden);
   const data = values(stats);
-  const aspectRatio = determineGraphAspectRatio(labels.length, isBarChart, matchMedia);
   const options = {
-    aspectRatio,
     legend: isBarChart ? { display: false } : { position: 'right' },
-    scales: isBarChart ? {
+    scales: isBarChart && {
       xAxes: [
         {
-          ticks: { beginAtZero: true },
+          ticks: { beginAtZero: true, max },
         },
       ],
-    } : null,
+    },
     tooltips: {
       intersect: !isBarChart,
+
+      // Do not show tooltip on items with empty label when in a bar chart
+      filter: ({ yLabel }) => !isBarChart || yLabel !== '',
     },
   };
+  const graphData = generateGraphData(title, isBarChart, labels, data);
+  const height = isBarChart && labels.length > 20 ? labels.length * 8 : null;
 
-  return <Component data={generateGraphData(title, isBarChart, labels, data)} options={options} height={null} />;
+  // Provide a key based on the height, so that every time the dataset changes, a new graph is rendered
+  return <Component key={height} data={graphData} options={options} height={height} />;
 };
 
-const GraphCard = ({ title, children, isBarChart, stats, matchMedia }) => (
+const GraphCard = ({ title, footer, isBarChart, stats, max }) => (
   <Card className="mt-4">
-    <CardHeader className="graph-card__header">{children || title}</CardHeader>
-    <CardBody>{renderGraph(title, isBarChart, stats, matchMedia)}</CardBody>
+    <CardHeader className="graph-card__header">{typeof title === 'function' ? title() : title}</CardHeader>
+    <CardBody>{renderGraph(title, isBarChart, stats, max)}</CardBody>
+    {footer && <CardFooter className="graph-card__footer--sticky">{footer}</CardFooter>}
   </Card>
 );
 
 GraphCard.propTypes = propTypes;
-GraphCard.defaultProps = defaultProps;
 
 export default GraphCard;

src/visits/GraphCard.scss

@@ -0,0 +1,4 @@
+.graph-card__footer--sticky {
+  position: sticky;
+  bottom: 0;
+}

src/visits/ShortUrlVisits.js

@@ -8,20 +8,15 @@ import DateInput from '../utils/DateInput';
 import MutedMessage from '../utils/MuttedMessage';
 import SortableBarGraph from './SortableBarGraph';
 import { shortUrlVisitsType } from './reducers/shortUrlVisits';
-import { VisitsHeader } from './VisitsHeader';
+import VisitsHeader from './VisitsHeader';
 import GraphCard from './GraphCard';
 import { shortUrlDetailType } from './reducers/shortUrlDetail';
 import './ShortUrlVisits.scss';
-import OpenMapModalBtn from './helpers/OpenMapModalBtn';
 
-const ShortUrlVisits = ({
-  processOsStats,
-  processBrowserStats,
-  processCountriesStats,
-  processCitiesStats,
-  processReferrersStats,
-  processCitiesStatsForMap,
-}) => class ShortUrlVisits extends React.Component {
+const ShortUrlVisits = (
+  { processStatsFromVisits },
+  OpenMapModalBtn
+) => class ShortUrlVisits extends React.PureComponent {
   static propTypes = {
     match: PropTypes.shape({
       params: PropTypes.object,
@@ -30,33 +25,47 @@ const ShortUrlVisits = ({
     shortUrlVisits: shortUrlVisitsType,
     getShortUrlDetail: PropTypes.func,
     shortUrlDetail: shortUrlDetailType,
+    cancelGetShortUrlVisits: PropTypes.func,
   };
 
   state = { startDate: undefined, endDate: undefined };
   loadVisits = () => {
     const { match: { params }, getShortUrlVisits } = this.props;
-
-    getShortUrlVisits(params.shortCode, mapObjIndexed(
+    const { shortCode } = params;
+    const dates = mapObjIndexed(
       (value) => value && value.format ? value.format('YYYY-MM-DD') : value,
       this.state
-    ));
+    );
+    const { startDate, endDate } = dates;
+
+    // While the "page" is loaded, use the timestamp + filtering dates as memoization IDs for stats calcs
+    this.memoizationId = `${this.timeWhenMounted}_${shortCode}_${startDate}_${endDate}`;
+    getShortUrlVisits(shortCode, dates);
   };
 
   componentDidMount() {
     const { match: { params }, getShortUrlDetail } = this.props;
+    const { shortCode } = params;
 
+    this.timeWhenMounted = new Date().getTime();
     this.loadVisits();
-    getShortUrlDetail(params.shortCode);
+    getShortUrlDetail(shortCode);
+  }
+
+  componentWillUnmount() {
+    this.props.cancelGetShortUrlVisits();
   }
 
   render() {
     const { shortUrlVisits, shortUrlDetail } = this.props;
 
     const renderVisitsContent = () => {
-      const { visits, loading, error } = shortUrlVisits;
+      const { visits, loading, loadingLarge, error } = shortUrlVisits;
 
       if (loading) {
-        return <MutedMessage><FontAwesomeIcon icon={preloader} spin /> Loading...</MutedMessage>;
+        const message = loadingLarge ? 'This is going to take a while... :S' : 'Loading...';
+
+        return <MutedMessage><FontAwesomeIcon icon={preloader} spin /> {message}</MutedMessage>;
       }
 
       if (error) {
@@ -71,17 +80,23 @@ const ShortUrlVisits = ({
         return <MutedMessage>There are no visits matching current filter  :(</MutedMessage>;
       }
 
+      const { os, browsers, referrers, countries, cities, citiesForMap } = processStatsFromVisits(
+        { id: this.memoizationId, visits }
+      );
+      const mapLocations = values(citiesForMap);
+
       return (
         <div className="row">
           <div className="col-xl-4 col-lg-6">
-            <GraphCard title="Operating systems" stats={processOsStats(visits)} />
+            <GraphCard title="Operating systems" stats={os} />
           </div>
           <div className="col-xl-4 col-lg-6">
-            <GraphCard title="Browsers" stats={processBrowserStats(visits)} />
+            <GraphCard title="Browsers" stats={browsers} />
           </div>
           <div className="col-xl-4">
             <SortableBarGraph
-              stats={processReferrersStats(visits)}
+              stats={referrers}
+              withPagination={false}
               title="Referrers"
               sortingItems={{
                 name: 'Referrer name',
@@ -91,7 +106,7 @@ const ShortUrlVisits = ({
           </div>
           <div className="col-lg-6">
             <SortableBarGraph
-              stats={processCountriesStats(visits)}
+              stats={countries}
               title="Countries"
               sortingItems={{
                 name: 'Country name',
@@ -101,16 +116,12 @@ const ShortUrlVisits = ({
           </div>
           <div className="col-lg-6">
             <SortableBarGraph
-              stats={processCitiesStats(visits)}
+              stats={cities}
               title="Cities"
-              extraHeaderContent={[
-                () => (
-                  <OpenMapModalBtn
-                    modalTitle="Cities"
-                    locations={values(processCitiesStatsForMap(visits))}
-                  />
-                ),
-              ]}
+              extraHeaderContent={(activeCities) =>
+                mapLocations.length > 0 &&
+                  <OpenMapModalBtn modalTitle="Cities" locations={mapLocations} activeCities={activeCities} />
+              }
               sortingItems={{
                 name: 'City name',
                 amount: 'Visits amount',
@@ -133,7 +144,7 @@ const ShortUrlVisits = ({
                 placeholderText="Since"
                 isClearable
                 maxDate={this.state.endDate}
-                onChange={(date) => this.setState({ startDate: date }, () => this.loadVisits())}
+                onChange={(date) => this.setState({ startDate: date }, this.loadVisits)}
               />
             </div>
             <div className="col-xl-3 col-lg-4 col-md-6">
@@ -143,7 +154,7 @@ const ShortUrlVisits = ({
                 placeholderText="Until"
                 isClearable
                 minDate={this.state.startDate}
-                onChange={(date) => this.setState({ endDate: date }, () => this.loadVisits())}
+                onChange={(date) => this.setState({ endDate: date }, this.loadVisits)}
               />
             </div>
           </div>

src/visits/SortableBarGraph.js

@@ -1,61 +1,124 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { fromPairs, head, keys, pipe, prop, reverse, sortBy, toLower, toPairs, type } from 'ramda';
+import { fromPairs, head, keys, pipe, prop, reverse, sortBy, splitEvery, toLower, toPairs, type } from 'ramda';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
 import SortingDropdown from '../utils/SortingDropdown';
+import PaginationDropdown from '../utils/PaginationDropdown';
+import { rangeOf, roundTen } from '../utils/utils';
 import GraphCard from './GraphCard';
 
+const { max } = Math;
 const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : value;
+const pickValueFromPair = ([ , value ]) => value;
 
 export default class SortableBarGraph extends React.Component {
   static propTypes = {
     stats: PropTypes.object.isRequired,
     title: PropTypes.string.isRequired,
     sortingItems: PropTypes.object.isRequired,
-    extraHeaderContent: PropTypes.arrayOf(PropTypes.func),
+    extraHeaderContent: PropTypes.func,
+    withPagination: PropTypes.bool,
   };
 
   state = {
     orderField: undefined,
     orderDir: undefined,
+    currentPage: 1,
+    itemsPerPage: Infinity,
   };
 
-  render() {
-    const { stats, sortingItems, title, extraHeaderContent } = this.props;
-    const sortStats = () => {
-      if (!this.state.orderField) {
-        return stats;
-      }
+  determineStats(stats, sortingItems) {
+    const pairs = toPairs(stats);
+    const sortedPairs = !this.state.orderField ? pairs : sortBy(
+      pipe(
+        prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1),
+        toLowerIfString
+      ),
+      pairs
+    );
+    const directionalPairs = !this.state.orderDir || this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs);
 
-      const sortedPairs = sortBy(
-        pipe(
-          prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1),
-          toLowerIfString
-        ),
-        toPairs(stats)
-      );
+    if (directionalPairs.length <= this.state.itemsPerPage) {
+      return { currentPageStats: fromPairs(directionalPairs) };
+    }
 
-      return fromPairs(this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs));
+    const pages = splitEvery(this.state.itemsPerPage, directionalPairs);
+
+    return {
+      currentPageStats: fromPairs(this.determineCurrentPagePairs(pages)),
+      pagination: this.renderPagination(pages.length),
+      max: roundTen(max(...directionalPairs.map(pickValueFromPair))),
     };
+  }
+
+  determineCurrentPagePairs(pages) {
+    const page = pages[this.state.currentPage - 1];
+
+    if (this.state.currentPage < pages.length) {
+      return page;
+    }
+
+    const firstPageLength = pages[0].length;
+
+    // Using the "hidden" key, the chart will just replace the label by an empty string
+    return [ ...page, ...rangeOf(firstPageLength - page.length, (i) => [ `hidden_${i}`, 0 ]) ];
+  }
+
+  renderPagination(pagesCount) {
+    const { currentPage } = this.state;
 
     return (
-      <GraphCard stats={sortStats()} isBarChart>
+      <Pagination listClassName="flex-wrap mb-0">
+        <PaginationItem disabled={currentPage === 1}>
+          <PaginationLink previous tag="span" onClick={() => this.setState({ currentPage: currentPage - 1 })} />
+        </PaginationItem>
+        {rangeOf(pagesCount, (page) => (
+          <PaginationItem key={page} active={page === currentPage}>
+            <PaginationLink tag="span" onClick={() => this.setState({ currentPage: page })}>{page}</PaginationLink>
+          </PaginationItem>
+        ))}
+        <PaginationItem disabled={currentPage >= pagesCount}>
+          <PaginationLink next tag="span" onClick={() => this.setState({ currentPage: currentPage + 1 })} />
+        </PaginationItem>
+      </Pagination>
+    );
+  }
+
+  render() {
+    const { stats, sortingItems, title, extraHeaderContent, withPagination = true } = this.props;
+    const { currentPageStats, pagination, max } = this.determineStats(stats, sortingItems);
+    const activeCities = keys(currentPageStats);
+    const computeTitle = () => (
+      <React.Fragment>
         {title}
         <div className="float-right">
           <SortingDropdown
             isButton={false}
             right
+            items={sortingItems}
             orderField={this.state.orderField}
             orderDir={this.state.orderDir}
-            items={sortingItems}
-            onChange={(orderField, orderDir) => this.setState({ orderField, orderDir })}
+            onChange={(orderField, orderDir) => this.setState({ orderField, orderDir, currentPage: 1 })}
           />
         </div>
-        {extraHeaderContent && extraHeaderContent.map((content, index) => (
-          <div key={index} className="float-right">
-            {content()}
+        {withPagination && keys(stats).length > 50 && (
+          <div className="float-right">
+            <PaginationDropdown
+              toggleClassName="btn-sm paddingless mr-3"
+              ranges={[ 50, 100, 200, 500 ]}
+              value={this.state.itemsPerPage}
+              setValue={(itemsPerPage) => this.setState({ itemsPerPage, currentPage: 1 })}
+            />
           </div>
-        ))}
-      </GraphCard>
+        )}
+        {extraHeaderContent && (
+          <div className="float-right">
+            {extraHeaderContent(pagination ? activeCities : undefined)}
+          </div>
+        )}
+      </React.Fragment>
     );
+
+    return <GraphCard isBarChart title={computeTitle} stats={currentPageStats} footer={pagination} max={max} />;
   }
 }

src/visits/VisitsHeader.js

@@ -11,7 +11,7 @@ const propTypes = {
   shortUrlVisits: shortUrlVisitsType.isRequired,
 };
 
-export function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
+export default function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
   const { shortUrl, loading } = shortUrlDetail;
   const { visits } = shortUrlVisits;
   const shortLink = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';

src/visits/helpers/MapModal.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Modal, ModalBody } from 'reactstrap';
 import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
-import { map, prop } from 'ramda';
+import { prop } from 'ramda';
 import * as PropTypes from 'prop-types';
 import './MapModal.scss';
 
@@ -26,7 +26,21 @@ const OpenStreetMapTile = () => (
   />
 );
 
-const calculateMapBounds = map(prop('latLong'));
+const calculateMapProps = (locations) => {
+  if (locations.length === 0) {
+    return {};
+  }
+
+  if (locations.length > 1) {
+    return { bounds: locations.map(prop('latLong')) };
+  }
+
+  // When there's only one location, an error is thrown if trying to calculate the bounds.
+  // When that happens, we use zoom and center as a workaround
+  const [{ latLong: center }] = locations;
+
+  return { zoom: '10', center };
+};
 
 const MapModal = ({ toggle, isOpen, title, locations }) => (
   <Modal toggle={toggle} isOpen={isOpen} className="map-modal__modal" contentClassName="map-modal__modal-content">
@@ -35,7 +49,7 @@ const MapModal = ({ toggle, isOpen, title, locations }) => (
         {title}
         <button type="button" className="close" onClick={toggle}>&times;</button>
       </h3>
-      <Map bounds={calculateMapBounds(locations)}>
+      <Map {...calculateMapProps(locations)}>
         <OpenStreetMapTile />
         {locations.map(({ cityName, latLong, count }, index) => (
           <Marker key={index} position={latLong}>

src/visits/helpers/OpenMapModalBtn.js

@@ -1,32 +1,60 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
-import { UncontrolledTooltip } from 'reactstrap';
+import { Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap';
 import * as PropTypes from 'prop-types';
-import MapModal from './MapModal';
 import './OpenMapModalBtn.scss';
 
-export default class OpenMapModalBtn extends React.Component {
-  static propTypes = {
-    modalTitle: PropTypes.string.isRequired,
-    locations: PropTypes.arrayOf(PropTypes.object),
-  };
+const propTypes = {
+  modalTitle: PropTypes.string.isRequired,
+  locations: PropTypes.arrayOf(PropTypes.object),
+  activeCities: PropTypes.arrayOf(PropTypes.string),
+};
 
-  state = { mapIsOpened: false };
+const OpenMapModalBtn = (MapModal) => {
+  const OpenMapModalBtn = ({ modalTitle, locations = [], activeCities }) => {
+    const [ mapIsOpened, setMapIsOpened ] = useState(false);
+    const [ dropdownIsOpened, setDropdownIsOpened ] = useState(false);
+    const [ locationsToShow, setLocationsToShow ] = useState([]);
 
-  render() {
-    const { modalTitle, locations = [] } = this.props;
-    const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened }));
     const buttonRef = React.createRef();
+    const filterLocations = (locations) => locations.filter(({ cityName }) => activeCities.includes(cityName));
+    const toggleMap = () => setMapIsOpened(!mapIsOpened);
+    const onClick = () => {
+      if (!activeCities) {
+        setLocationsToShow(locations);
+        setMapIsOpened(true);
+
+        return;
+      }
+
+      setDropdownIsOpened(true);
+    };
+    const openMapWithLocations = (filtered) => () => {
+      setLocationsToShow(filtered ? filterLocations(locations) : locations);
+      setMapIsOpened(true);
+    };
 
     return (
       <React.Fragment>
-        <button className="btn btn-link open-map-modal-btn__btn" ref={buttonRef} onClick={toggleMap}>
+        <button className="btn btn-link open-map-modal-btn__btn" ref={buttonRef} onClick={onClick}>
           <FontAwesomeIcon icon={mapIcon} />
         </button>
-        <UncontrolledTooltip placement="bottom" target={() => buttonRef.current}>Show in map</UncontrolledTooltip>
-        <MapModal toggle={toggleMap} isOpen={this.state.mapIsOpened} title={modalTitle} locations={locations} />
+        <UncontrolledTooltip placement="left" target={() => buttonRef.current}>Show in map</UncontrolledTooltip>
+        <Dropdown isOpen={dropdownIsOpened} toggle={() => setDropdownIsOpened(!dropdownIsOpened)} inNavbar>
+          <DropdownMenu right>
+            <DropdownItem onClick={openMapWithLocations(false)}>Show all locations</DropdownItem>
+            <DropdownItem onClick={openMapWithLocations(true)}>Show locations in current page</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+        <MapModal toggle={toggleMap} isOpen={mapIsOpened} title={modalTitle} locations={locationsToShow} />
       </React.Fragment>
     );
-  }
-}
+  };
+
+  OpenMapModalBtn.propTypes = propTypes;
+
+  return OpenMapModalBtn;
+};
+
+export default OpenMapModalBtn;

src/visits/reducers/shortUrlDetail.js

@@ -1,11 +1,12 @@
+import { handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
 import { shortUrlType } from '../../short-urls/reducers/shortUrlsList';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const GET_SHORT_URL_DETAIL_START = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_START';
 export const GET_SHORT_URL_DETAIL_ERROR = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_ERROR';
 export const GET_SHORT_URL_DETAIL = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
 export const shortUrlDetailType = PropTypes.shape({
   shortUrl: shortUrlType,
@@ -19,38 +20,19 @@ const initialState = {
   error: false,
 };
 
-export default function reducer(state = initialState, action) {
-  switch (action.type) {
-    case GET_SHORT_URL_DETAIL_START:
-      return {
-        ...state,
-        loading: true,
-      };
-    case GET_SHORT_URL_DETAIL_ERROR:
-      return {
-        ...state,
-        loading: false,
-        error: true,
-      };
-    case GET_SHORT_URL_DETAIL:
-      return {
-        shortUrl: action.shortUrl,
-        loading: false,
-        error: false,
-      };
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [GET_SHORT_URL_DETAIL_START]: (state) => ({ ...state, loading: true }),
+  [GET_SHORT_URL_DETAIL_ERROR]: (state) => ({ ...state, loading: false, error: true }),
+  [GET_SHORT_URL_DETAIL]: (state, { shortUrl }) => ({ shortUrl, loading: false, error: false }),
+}, initialState);
 
 export const getShortUrlDetail = (buildShlinkApiClient) => (shortCode) => async (dispatch, getState) => {
   dispatch({ type: GET_SHORT_URL_DETAIL_START });
 
-  const { selectedServer } = getState();
-  const shlinkApiClient = buildShlinkApiClient(selectedServer);
+  const { getShortUrl } = await buildShlinkApiClient(getState);
 
   try {
-    const shortUrl = await shlinkApiClient.getShortUrl(shortCode);
+    const shortUrl = await getShortUrl(shortCode);
 
     dispatch({ shortUrl, type: GET_SHORT_URL_DETAIL });
   } catch (e) {

src/visits/reducers/shortUrlVisits.js

@@ -1,10 +1,14 @@
+import { createAction, handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
+import { flatten, prop, range, splitEvery } from 'ramda';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const GET_SHORT_URL_VISITS_START = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_START';
 export const GET_SHORT_URL_VISITS_ERROR = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_ERROR';
 export const GET_SHORT_URL_VISITS = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+export const GET_SHORT_URL_VISITS_LARGE = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_LARGE';
+export const GET_SHORT_URL_VISITS_CANCEL = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_CANCEL';
+/* eslint-enable padding-line-between-statements */
 
 export const shortUrlVisitsType = PropTypes.shape({
   visits: PropTypes.array,
@@ -15,38 +19,40 @@ export const shortUrlVisitsType = PropTypes.shape({
 const initialState = {
   visits: [],
   loading: false,
+  loadingLarge: false,
   error: false,
+  cancelLoad: false,
 };
 
-export default function reducer(state = initialState, action) {
-  switch (action.type) {
-    case GET_SHORT_URL_VISITS_START:
-      return {
-        ...state,
-        loading: true,
-      };
-    case GET_SHORT_URL_VISITS_ERROR:
-      return {
-        ...state,
-        loading: false,
-        error: true,
-      };
-    case GET_SHORT_URL_VISITS:
-      return {
-        visits: action.visits,
-        loading: false,
-        error: false,
-      };
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [GET_SHORT_URL_VISITS_START]: (state) => ({
+    ...state,
+    loading: true,
+    loadingLarge: false,
+    cancelLoad: false,
+  }),
+  [GET_SHORT_URL_VISITS_ERROR]: (state) => ({
+    ...state,
+    loading: false,
+    loadingLarge: false,
+    error: true,
+    cancelLoad: false,
+  }),
+  [GET_SHORT_URL_VISITS]: (state, { visits }) => ({
+    visits,
+    loading: false,
+    loadingLarge: false,
+    error: false,
+    cancelLoad: false,
+  }),
+  [GET_SHORT_URL_VISITS_LARGE]: (state) => ({ ...state, loadingLarge: true }),
+  [GET_SHORT_URL_VISITS_CANCEL]: (state) => ({ ...state, cancelLoad: true }),
+}, initialState);
 
 export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, dates) => async (dispatch, getState) => {
   dispatch({ type: GET_SHORT_URL_VISITS_START });
 
-  const { selectedServer } = getState();
-  const { getShortUrlVisits } = buildShlinkApiClient(selectedServer);
+  const { getShortUrlVisits } = await buildShlinkApiClient(getState);
   const itemsPerPage = 5000;
   const isLastPage = ({ currentPage, pagesCount }) => currentPage >= pagesCount;
 
@@ -58,9 +64,42 @@ export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, dates) =>
       return data;
     }
 
-    return data.concat(await loadVisits(page + 1));
+    // If there are more pages, make requests in blocks of 4
+    const parallelRequestsCount = 4;
+    const parallelStartingPage = 2;
+    const pagesRange = range(parallelStartingPage, pagination.pagesCount + 1);
+    const pagesBlocks = splitEvery(parallelRequestsCount, pagesRange);
+
+    if (pagination.pagesCount - 1 > parallelRequestsCount) {
+      dispatch({ type: GET_SHORT_URL_VISITS_LARGE });
+    }
+
+    return data.concat(await loadPagesBlocks(pagesBlocks));
   };
 
+  const loadPagesBlocks = async (pagesBlocks, index = 0) => {
+    const { shortUrlVisits: { cancelLoad } } = getState();
+
+    if (cancelLoad) {
+      return [];
+    }
+
+    const data = await loadVisitsInParallel(pagesBlocks[index]);
+
+    if (index < pagesBlocks.length - 1) {
+      return data.concat(await loadPagesBlocks(pagesBlocks, index + 1));
+    }
+
+    return data;
+  };
+
+  const loadVisitsInParallel = (pages) =>
+    Promise.all(pages.map(
+      (page) =>
+        getShortUrlVisits(shortCode, { ...dates, page, itemsPerPage })
+          .then(prop('data'))
+    )).then(flatten);
+
   try {
     const visits = await loadVisits();
 
@@ -69,3 +108,5 @@ export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, dates) =>
     dispatch({ type: GET_SHORT_URL_VISITS_ERROR });
   }
 };
+
+export const cancelGetShortUrlVisits = createAction(GET_SHORT_URL_VISITS_CANCEL);

src/visits/services/VisitsParser.js

@@ -1,4 +1,4 @@
-import { assoc, isNil, isEmpty, reduce } from 'ramda';
+import { isNil, isEmpty, memoizeWith, prop } from 'ramda';
 
 const osFromUserAgent = (userAgent) => {
   const lowerUserAgent = userAgent.toLowerCase();
@@ -42,79 +42,69 @@ const extractDomain = (url) => {
   return domain.split(':')[0];
 };
 
-export const processOsStats = (visits) =>
-  reduce(
-    (stats, { userAgent }) => {
-      const os = isNil(userAgent) ? 'Others' : osFromUserAgent(userAgent);
-
-      return assoc(os, (stats[os] || 0) + 1, stats);
-    },
-    {},
-    visits,
-  );
-
-export const processBrowserStats = (visits) =>
-  reduce(
-    (stats, { userAgent }) => {
-      const browser = isNil(userAgent) ? 'Others' : browserFromUserAgent(userAgent);
-
-      return assoc(browser, (stats[browser] || 0) + 1, stats);
-    },
-    {},
-    visits,
-  );
-
-export const processReferrersStats = (visits) =>
-  reduce(
-    (stats, visit) => {
-      const notHasDomain = isNil(visit.referer) || isEmpty(visit.referer);
-      const domain = notHasDomain ? 'Unknown' : extractDomain(visit.referer);
-
-      return assoc(domain, (stats[domain] || 0) + 1, stats);
-    },
-    {},
-    visits,
-  );
-
 const visitLocationHasProperty = (visitLocation, propertyName) =>
   !isNil(visitLocation)
   && !isNil(visitLocation[propertyName])
   && !isEmpty(visitLocation[propertyName]);
 
-const buildLocationStatsProcessorByProperty = (propertyName) => (visits) =>
-  reduce(
-    (stats, { visitLocation }) => {
-      const hasLocationProperty = visitLocationHasProperty(visitLocation, propertyName);
-      const value = hasLocationProperty ? visitLocation[propertyName] : 'Unknown';
+const updateOsStatsForVisit = (osStats, { userAgent }) => {
+  const os = isNil(userAgent) ? 'Others' : osFromUserAgent(userAgent);
 
-      return assoc(value, (stats[value] || 0) + 1, stats);
+  osStats[os] = (osStats[os] || 0) + 1;
+};
+
+const updateBrowsersStatsForVisit = (browsersStats, { userAgent }) => {
+  const browser = isNil(userAgent) ? 'Others' : browserFromUserAgent(userAgent);
+
+  browsersStats[browser] = (browsersStats[browser] || 0) + 1;
+};
+
+const updateReferrersStatsForVisit = (referrersStats, { referer }) => {
+  const notHasDomain = isNil(referer) || isEmpty(referer);
+  const domain = notHasDomain ? 'Unknown' : extractDomain(referer);
+
+  referrersStats[domain] = (referrersStats[domain] || 0) + 1;
+};
+
+const updateLocationsStatsForVisit = (propertyName) => (stats, { visitLocation }) => {
+  const hasLocationProperty = visitLocationHasProperty(visitLocation, propertyName);
+  const value = hasLocationProperty ? visitLocation[propertyName] : 'Unknown';
+
+  stats[value] = (stats[value] || 0) + 1;
+};
+
+const updateCountriesStatsForVisit = updateLocationsStatsForVisit('countryName');
+const updateCitiesStatsForVisit = updateLocationsStatsForVisit('cityName');
+
+const updateCitiesForMapForVisit = (citiesForMapStats, { visitLocation }) => {
+  if (!visitLocationHasProperty(visitLocation, 'cityName')) {
+    return;
+  }
+
+  const { cityName, latitude, longitude } = visitLocation;
+  const currentCity = citiesForMapStats[cityName] || {
+    cityName,
+    count: 0,
+    latLong: [ parseFloat(latitude), parseFloat(longitude) ],
+  };
+
+  currentCity.count++;
+
+  citiesForMapStats[cityName] = currentCity;
+};
+
+export const processStatsFromVisits = memoizeWith(prop('id'), ({ visits }) =>
+  visits.reduce(
+    (stats, visit) => {
+      // We mutate the original object because it has a big side effect when large data sets are processed
+      updateOsStatsForVisit(stats.os, visit);
+      updateBrowsersStatsForVisit(stats.browsers, visit);
+      updateReferrersStatsForVisit(stats.referrers, visit);
+      updateCountriesStatsForVisit(stats.countries, visit);
+      updateCitiesStatsForVisit(stats.cities, visit);
+      updateCitiesForMapForVisit(stats.citiesForMap, visit);
+
+      return stats;
     },
-    {},
-    visits,
-  );
-
-export const processCountriesStats = buildLocationStatsProcessorByProperty('countryName');
-
-export const processCitiesStats = buildLocationStatsProcessorByProperty('cityName');
-
-export const processCitiesStatsForMap = (visits) =>
-  reduce(
-    (stats, { visitLocation }) => {
-      if (!visitLocationHasProperty(visitLocation, 'cityName')) {
-        return stats;
-      }
-
-      const { cityName, latitude, longitude } = visitLocation;
-      const currentCity = stats[cityName] || {
-        cityName,
-        count: 0,
-        latLong: [ parseFloat(latitude), parseFloat(longitude) ],
-      };
-
-      currentCity.count++;
-
-      return assoc(cityName, currentCity, stats);
-    },
-    {},
-    visits,
-  );
+    { os: {}, browsers: {}, referrers: {}, countries: {}, cities: {}, citiesForMap: {} }
+  ));

src/visits/services/provideServices.js

@@ -1,14 +1,18 @@
 import ShortUrlVisits from '../ShortUrlVisits';
-import { getShortUrlVisits } from '../reducers/shortUrlVisits';
+import { cancelGetShortUrlVisits, getShortUrlVisits } from '../reducers/shortUrlVisits';
 import { getShortUrlDetail } from '../reducers/shortUrlDetail';
+import OpenMapModalBtn from '../helpers/OpenMapModalBtn';
+import MapModal from '../helpers/MapModal';
 import * as visitsParser from './VisitsParser';
 
 const provideServices = (bottle, connect) => {
   // Components
-  bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'VisitsParser');
+  bottle.serviceFactory('OpenMapModalBtn', OpenMapModalBtn, 'MapModal');
+  bottle.serviceFactory('MapModal', () => MapModal);
+  bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'VisitsParser', 'OpenMapModalBtn');
   bottle.decorator('ShortUrlVisits', connect(
     [ 'shortUrlVisits', 'shortUrlDetail' ],
-    [ 'getShortUrlVisits', 'getShortUrlDetail' ]
+    [ 'getShortUrlVisits', 'getShortUrlDetail', 'cancelGetShortUrlVisits' ]
   ));
 
   // Services
@@ -17,6 +21,7 @@ const provideServices = (bottle, connect) => {
   // Actions
   bottle.serviceFactory('getShortUrlVisits', getShortUrlVisits, 'buildShlinkApiClient');
   bottle.serviceFactory('getShortUrlDetail', getShortUrlDetail, 'buildShlinkApiClient');
+  bottle.serviceFactory('cancelGetShortUrlVisits', () => cancelGetShortUrlVisits);
 };
 
 export default provideServices;

stryker.conf.js

@@ -0,0 +1,22 @@
+const jestConfig = require(`${__dirname}/jest.config.js`);
+
+module.exports = (config) => config.set({
+  mutate: jestConfig.collectCoverageFrom,
+  mutator: 'javascript',
+  testRunner: 'jest',
+  reporters: [ 'progress', 'clear-text' ],
+  coverageAnalysis: 'off',
+  jest: {
+    projectType: 'custom',
+    config: jestConfig,
+    enableFindRelatedTests: true,
+  },
+  thresholds: {
+    high: 80,
+    low: 60,
+    break: null,
+  },
+  clearTextReporter: {
+    logTests: false,
+  },
+});

test/App.test.js

@@ -19,7 +19,6 @@ describe('<App />', () => {
 
   it('renders app main routes', () => {
     const routes = wrapper.find(Route);
-    const expectedRoutesCount = 4;
     const expectedPaths = [
       '/server/create',
       '/',
@@ -27,7 +26,7 @@ describe('<App />', () => {
     ];
 
     expect.assertions(expectedPaths.length + 1);
-    expect(routes).toHaveLength(expectedRoutesCount);
+    expect(routes).toHaveLength(4);
     expectedPaths.forEach((path, index) => {
       expect(routes.at(index).prop('path')).toEqual(path);
     });

test/common/AsideMenu.test.js

@@ -16,9 +16,8 @@ describe('<AsideMenu />', () => {
 
   it('contains links to different sections', () => {
     const links = wrapped.find(NavLink);
-    const expectedLength = 3;
 
-    expect(links).toHaveLength(expectedLength);
+    expect(links).toHaveLength(3);
     links.forEach((link) => expect(link.prop('to')).toContain('abc123'));
   });
 

test/common/ErrorHandler.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Button } from 'reactstrap';
+import createErrorHandler from '../../src/common/ErrorHandler';
+
+describe('<ErrorHandler />', () => {
+  const window = {
+    location: {
+      reload: jest.fn(),
+    },
+  };
+  const console = { error: jest.fn() };
+  let wrapper;
+
+  beforeEach(() => {
+    const ErrorHandler = createErrorHandler(window, console);
+
+    wrapper = shallow(<ErrorHandler children={<span>Foo</span>} />);
+  });
+
+  afterEach(() => wrapper.unmount());
+
+  it('renders children when no error has occurred', () => {
+    expect(wrapper.text()).toEqual('Foo');
+    expect(wrapper.find(Button)).toHaveLength(0);
+  });
+
+  it('renders error page when error has occurred', () => {
+    wrapper.setState({ hasError: true });
+
+    expect(wrapper.text()).toContain('Oops! This is awkward :S');
+    expect(wrapper.text()).toContain(
+      'It seems that something went wrong. Try refreshing the page or just click this button.'
+    );
+    expect(wrapper.find(Button)).toHaveLength(1);
+  });
+});

test/common/Home.test.js

@@ -1,16 +1,13 @@
 import { shallow } from 'enzyme';
 import { values } from 'ramda';
 import React from 'react';
-import * as sinon from 'sinon';
 import Home from '../../src/common/Home';
 
 describe('<Home />', () => {
   let wrapped;
   const defaultProps = {
-    resetSelectedServer() {
-      return '';
-    },
-    servers: {},
+    resetSelectedServer: () => '',
+    servers: { loading: false, list: {} },
   };
   const createComponent = (props) => {
     const actualProps = { ...defaultProps, ...props };
@@ -28,11 +25,11 @@ describe('<Home />', () => {
   });
 
   it('resets selected server when mounted', () => {
-    const resetSelectedServer = sinon.spy();
+    const resetSelectedServer = jest.fn();
 
-    expect(resetSelectedServer.called).toEqual(false);
+    expect(resetSelectedServer).not.toHaveBeenCalled();
     createComponent({ resetSelectedServer });
-    expect(resetSelectedServer.called).toEqual(true);
+    expect(resetSelectedServer).toHaveBeenCalled();
   });
 
   it('shows link to create server when no servers exist', () => {
@@ -42,10 +39,22 @@ describe('<Home />', () => {
     expect(wrapped.find('ListGroup')).toHaveLength(0);
   });
 
+  it('shows message when loading servers', () => {
+    const wrapped = createComponent({ servers: { loading: true } });
+    const span = wrapped.find('span');
+
+    expect(span).toHaveLength(1);
+    expect(span.text()).toContain('Trying to load servers...');
+    expect(wrapped.find('ListGroup')).toHaveLength(0);
+  });
+
   it('shows servers list when list of servers is not empty', () => {
     const servers = {
-      1: { name: 'foo', id: '123' },
-      2: { name: 'bar', id: '456' },
+      loading: false,
+      list: {
+        1: { name: 'foo', id: '123' },
+        2: { name: 'bar', id: '456' },
+      },
     };
     const wrapped = createComponent({ servers });
 

test/common/ScrollToTop.test.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import * as sinon from 'sinon';
 import createScrollToTop from '../../src/common/ScrollToTop';
 
 describe('<ScrollToTop />', () => {
   let wrapper;
   const window = {
-    scrollTo: sinon.spy(),
+    scrollTo: jest.fn(),
   };
 
   beforeEach(() => {
@@ -17,13 +16,13 @@ describe('<ScrollToTop />', () => {
 
   afterEach(() => {
     wrapper.unmount();
-    window.scrollTo.resetHistory();
+    window.scrollTo.mockReset();
   });
 
   it('just renders children', () => expect(wrapper.text()).toEqual('Foobar'));
 
   it('scrolls to top when location changes', () => {
     wrapper.instance().componentDidUpdate({ location: { href: 'bar' } });
-    expect(window.scrollTo.calledOnce).toEqual(true);
+    expect(window.scrollTo).toHaveBeenCalledTimes(1);
   });
 });

test/servers/CreateServer.test.js

@@ -1,20 +1,18 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { identity } from 'ramda';
-import sinon from 'sinon';
 import createServerConstruct from '../../src/servers/CreateServer';
 
 describe('<CreateServer />', () => {
   let wrapper;
   const ImportServersBtn = () => '';
-  const createServerMock = sinon.fake();
+  const createServerMock = jest.fn();
   const historyMock = {
-    push: sinon.fake(),
+    push: jest.fn(),
   };
 
   beforeEach(() => {
-    createServerMock.resetHistory();
-    historyMock.push.resetHistory();
+    createServerMock.mockReset();
 
     const CreateServer = createServerConstruct(ImportServersBtn);
 
@@ -44,8 +42,8 @@ describe('<CreateServer />', () => {
       return '';
     } });
 
-    expect(createServerMock.callCount).toEqual(1);
-    expect(historyMock.push.callCount).toEqual(1);
+    expect(createServerMock).toHaveBeenCalledTimes(1);
+    expect(historyMock.push).toHaveBeenCalledTimes(1);
   });
 
   it('updates state when inputs are changed', () => {

test/servers/DeleteServerModal.test.js

@@ -1,20 +1,19 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import sinon from 'sinon';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import DeleteServerModal from '../../src/servers/DeleteServerModal';
 
 describe('<DeleteServerModal />', () => {
   let wrapper;
-  const deleteServerMock = sinon.fake();
-  const historyMock = { push: sinon.fake() };
-  const toggleMock = sinon.fake();
+  const deleteServerMock = jest.fn();
+  const historyMock = { push: jest.fn() };
+  const toggleMock = jest.fn();
   const serverName = 'the_server_name';
 
   beforeEach(() => {
-    toggleMock.resetHistory();
-    deleteServerMock.resetHistory();
-    historyMock.push.resetHistory();
+    deleteServerMock.mockReset();
+    toggleMock.mockReset();
+    historyMock.push.mockReset();
 
     wrapper = shallow(
       <DeleteServerModal
@@ -48,9 +47,9 @@ describe('<DeleteServerModal />', () => {
 
     cancelBtn.simulate('click');
 
-    expect(toggleMock.callCount).toEqual(1);
-    expect(deleteServerMock.callCount).toEqual(0);
-    expect(historyMock.push.callCount).toEqual(0);
+    expect(toggleMock).toHaveBeenCalledTimes(1);
+    expect(deleteServerMock).not.toHaveBeenCalled();
+    expect(historyMock.push).not.toHaveBeenCalled();
   });
 
   it('deletes server when clicking accept button', () => {
@@ -58,8 +57,8 @@ describe('<DeleteServerModal />', () => {
 
     acceptBtn.simulate('click');
 
-    expect(toggleMock.callCount).toEqual(1);
-    expect(deleteServerMock.callCount).toEqual(1);
-    expect(historyMock.push.callCount).toEqual(1);
+    expect(toggleMock).toHaveBeenCalledTimes(1);
+    expect(deleteServerMock).toHaveBeenCalledTimes(1);
+    expect(historyMock.push).toHaveBeenCalledTimes(1);
   });
 });

test/servers/ServersDropdown.test.js

@@ -8,9 +8,12 @@ describe('<ServersDropdown />', () => {
   let wrapped;
   let ServersDropdown;
   const servers = {
-    '1a': { name: 'foo', id: 1 },
-    '2b': { name: 'bar', id: 2 },
-    '3c': { name: 'baz', id: 3 },
+    list: {
+      '1a': { name: 'foo', id: 1 },
+      '2b': { name: 'bar', id: 2 },
+      '3c': { name: 'baz', id: 3 },
+    },
+    loading: false,
   };
 
   beforeEach(() => {
@@ -20,7 +23,7 @@ describe('<ServersDropdown />', () => {
   afterEach(() => wrapped.unmount());
 
   it('contains the list of servers', () =>
-    expect(wrapped.find(DropdownItem).filter('[to]')).toHaveLength(values(servers).length));
+    expect(wrapped.find(DropdownItem).filter('[to]')).toHaveLength(values(servers.list).length));
 
   it('contains a toggle with proper title', () =>
     expect(wrapped.find(DropdownToggle)).toHaveLength(1));
@@ -32,12 +35,21 @@ describe('<ServersDropdown />', () => {
     expect(items.filter('.servers-dropdown__export-item')).toHaveLength(1);
   });
 
-  it('contains a message when no servers exist yet', () => {
-    wrapped = shallow(<ServersDropdown servers={{}} listServers={identity} />);
+  it('shows a message when no servers exist yet', () => {
+    wrapped = shallow(<ServersDropdown servers={{ loading: false, list: {} }} listServers={identity} />);
     const item = wrapped.find(DropdownItem);
 
     expect(item).toHaveLength(1);
     expect(item.prop('disabled')).toEqual(true);
     expect(item.find('i').text()).toEqual('Add a server first...');
   });
+
+  it('shows a message when loading', () => {
+    wrapped = shallow(<ServersDropdown servers={{ loading: true, list: {} }} listServers={identity} />);
+    const item = wrapped.find(DropdownItem);
+
+    expect(item).toHaveLength(1);
+    expect(item.prop('disabled')).toEqual(true);
+    expect(item.find('i').text()).toEqual('Trying to load servers...');
+  });
 });

test/servers/helpers/ImportServersBtn.test.js

@@ -1,25 +1,24 @@
 import React from 'react';
-import sinon from 'sinon';
 import { shallow } from 'enzyme';
 import { UncontrolledTooltip } from 'reactstrap';
 import importServersBtnConstruct from '../../../src/servers/helpers/ImportServersBtn';
 
 describe('<ImportServersBtn />', () => {
   let wrapper;
-  const onImportMock = sinon.fake();
-  const createServersMock = sinon.fake();
+  const onImportMock = jest.fn();
+  const createServersMock = jest.fn();
   const serversImporterMock = {
-    importServersFromFile: sinon.fake.returns(Promise.resolve([])),
+    importServersFromFile: jest.fn().mockResolvedValue([]),
   };
   const fileRef = {
-    current: { click: sinon.fake() },
+    current: { click: jest.fn() },
   };
 
   beforeEach(() => {
-    onImportMock.resetHistory();
-    createServersMock.resetHistory();
-    serversImporterMock.importServersFromFile.resetHistory();
-    fileRef.current.click.resetHistory();
+    onImportMock.mockReset();
+    createServersMock.mockReset();
+    serversImporterMock.importServersFromFile.mockClear();
+    fileRef.current.click.mockReset();
 
     const ImportServersBtn = importServersBtnConstruct(serversImporterMock);
 
@@ -40,7 +39,7 @@ describe('<ImportServersBtn />', () => {
 
     btn.simulate('click');
 
-    expect(fileRef.current.click.callCount).toEqual(1);
+    expect(fileRef.current.click).toHaveBeenCalledTimes(1);
   });
 
   it('imports servers when file input changes', (done) => {
@@ -49,9 +48,9 @@ describe('<ImportServersBtn />', () => {
     file.simulate('change', { target: { files: [ '' ] } });
 
     setImmediate(() => {
-      expect(serversImporterMock.importServersFromFile.callCount).toEqual(1);
-      expect(createServersMock.callCount).toEqual(1);
-      expect(onImportMock.callCount).toEqual(1);
+      expect(serversImporterMock.importServersFromFile).toHaveBeenCalledTimes(1);
+      expect(createServersMock).toHaveBeenCalledTimes(1);
+      expect(onImportMock).toHaveBeenCalledTimes(1);
       done();
     });
   });

test/servers/reducers/selectedServer.test.js

@@ -1,4 +1,3 @@
-import * as sinon from 'sinon';
 import reducer, {
   selectServer,
   resetSelectedServer,
@@ -9,9 +8,6 @@ import { RESET_SHORT_URL_PARAMS } from '../../../src/short-urls/reducers/shortUr
 
 describe('selectedServerReducer', () => {
   describe('reducer', () => {
-    it('returns default when action is not handled', () =>
-      expect(reducer(null, { type: 'unknown' })).toEqual(null));
-
     it('returns default when action is RESET_SELECTED_SERVER', () =>
       expect(reducer(null, { type: RESET_SELECTED_SERVER })).toEqual(null));
 
@@ -34,31 +30,27 @@ describe('selectedServerReducer', () => {
       id: serverId,
     };
     const ServersServiceMock = {
-      findServerById: sinon.fake.returns(selectedServer),
+      findServerById: jest.fn(() => selectedServer),
     };
 
     afterEach(() => {
-      ServersServiceMock.findServerById.resetHistory();
+      ServersServiceMock.findServerById.mockClear();
     });
 
     it('dispatches proper actions', () => {
-      const dispatch = sinon.spy();
-      const expectedDispatchCalls = 2;
+      const dispatch = jest.fn();
 
       selectServer(ServersServiceMock)(serverId)(dispatch);
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.firstCall.calledWith({ type: RESET_SHORT_URL_PARAMS })).toEqual(true);
-      expect(dispatch.secondCall.calledWith({
-        type: SELECT_SERVER,
-        selectedServer,
-      })).toEqual(true);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: RESET_SHORT_URL_PARAMS });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: SELECT_SERVER, selectedServer });
     });
 
     it('invokes dependencies', () => {
       selectServer(ServersServiceMock)(serverId)(() => {});
 
-      expect(ServersServiceMock.findServerById.callCount).toEqual(1);
+      expect(ServersServiceMock.findServerById).toHaveBeenCalledTimes(1);
     });
   });
 });

test/servers/reducers/server.test.js

@@ -1,51 +1,73 @@
-import * as sinon from 'sinon';
 import { values } from 'ramda';
 import reducer, {
   createServer,
   deleteServer,
   listServers,
   createServers,
-  FETCH_SERVERS,
+  FETCH_SERVERS, FETCH_SERVERS_START,
 } from '../../../src/servers/reducers/server';
 
 describe('serverReducer', () => {
-  const servers = {
+  const list = {
     abc123: { id: 'abc123' },
     def456: { id: 'def456' },
   };
-  const expectedFetchServersResult = { type: FETCH_SERVERS, servers };
+  const expectedFetchServersResult = { type: FETCH_SERVERS, list };
   const ServersServiceMock = {
-    listServers: sinon.fake.returns(servers),
-    createServer: sinon.fake(),
-    deleteServer: sinon.fake(),
-    createServers: sinon.fake(),
+    listServers: jest.fn(() => list),
+    createServer: jest.fn(),
+    deleteServer: jest.fn(),
+    createServers: jest.fn(),
   };
 
   describe('reducer', () => {
     it('returns servers when action is FETCH_SERVERS', () =>
-      expect(reducer({}, { type: FETCH_SERVERS, servers })).toEqual(servers));
-
-    it('returns default when action is unknown', () =>
-      expect(reducer({}, { type: 'unknown' })).toEqual({}));
+      expect(reducer({}, { type: FETCH_SERVERS, list })).toEqual({ loading: false, list }));
   });
 
   describe('action creators', () => {
     beforeEach(() => {
-      ServersServiceMock.listServers.resetHistory();
-      ServersServiceMock.createServer.resetHistory();
-      ServersServiceMock.deleteServer.resetHistory();
-      ServersServiceMock.createServers.resetHistory();
+      ServersServiceMock.listServers.mockClear();
+      ServersServiceMock.createServer.mockReset();
+      ServersServiceMock.deleteServer.mockReset();
+      ServersServiceMock.createServers.mockReset();
     });
 
     describe('listServers', () => {
-      it('fetches servers and returns them as part of the action', () => {
-        const result = listServers(ServersServiceMock)();
+      const axios = { get: jest.fn().mockResolvedValue({ data: [] }) };
+      const dispatch = jest.fn();
 
-        expect(result).toEqual(expectedFetchServersResult);
-        expect(ServersServiceMock.listServers.calledOnce).toEqual(true);
-        expect(ServersServiceMock.createServer.called).toEqual(false);
-        expect(ServersServiceMock.deleteServer.called).toEqual(false);
-        expect(ServersServiceMock.createServers.called).toEqual(false);
+      beforeEach(() => {
+        axios.get.mockClear();
+        dispatch.mockReset();
+      });
+
+      it('fetches servers from local storage when found', async () => {
+        await listServers(ServersServiceMock, axios)()(dispatch);
+
+        expect(dispatch).toHaveBeenCalledTimes(2);
+        expect(dispatch).toHaveBeenNthCalledWith(1, { type: FETCH_SERVERS_START });
+        expect(dispatch).toHaveBeenNthCalledWith(2, expectedFetchServersResult);
+        expect(ServersServiceMock.listServers).toHaveBeenCalledTimes(1);
+        expect(ServersServiceMock.createServer).not.toHaveBeenCalled();
+        expect(ServersServiceMock.deleteServer).not.toHaveBeenCalled();
+        expect(ServersServiceMock.createServers).not.toHaveBeenCalled();
+        expect(axios.get).not.toHaveBeenCalled();
+      });
+
+      it('tries to fetch servers from remote when not found locally', async () => {
+        const NoListServersServiceMock = { ...ServersServiceMock, listServers: jest.fn(() => ({})) };
+
+        await listServers(NoListServersServiceMock, axios)()(dispatch);
+
+        expect(dispatch).toHaveBeenCalledTimes(2);
+        expect(dispatch).toHaveBeenNthCalledWith(1, { type: FETCH_SERVERS_START });
+        expect(dispatch).toHaveBeenNthCalledWith(2, { type: FETCH_SERVERS, list: {} });
+        expect(NoListServersServiceMock.listServers).toHaveBeenCalledTimes(1);
+        expect(NoListServersServiceMock.createServer).not.toHaveBeenCalled();
+        expect(NoListServersServiceMock.deleteServer).not.toHaveBeenCalled();
+        expect(NoListServersServiceMock.createServers).toHaveBeenCalledTimes(1);
+        expect(axios.get).toHaveBeenCalledTimes(1);
       });
     });
 
@@ -55,11 +77,11 @@ describe('serverReducer', () => {
         const result = createServer(ServersServiceMock, () => expectedFetchServersResult)(serverToCreate);
 
         expect(result).toEqual(expectedFetchServersResult);
-        expect(ServersServiceMock.createServer.calledOnce).toEqual(true);
-        expect(ServersServiceMock.createServer.firstCall.calledWith(serverToCreate)).toEqual(true);
-        expect(ServersServiceMock.listServers.called).toEqual(false);
-        expect(ServersServiceMock.deleteServer.called).toEqual(false);
-        expect(ServersServiceMock.createServers.called).toEqual(false);
+        expect(ServersServiceMock.createServer).toHaveBeenCalledTimes(1);
+        expect(ServersServiceMock.createServer).toHaveBeenCalledWith(serverToCreate);
+        expect(ServersServiceMock.listServers).not.toHaveBeenCalled();
+        expect(ServersServiceMock.deleteServer).not.toHaveBeenCalled();
+        expect(ServersServiceMock.createServers).not.toHaveBeenCalled();
       });
     });
 
@@ -69,25 +91,25 @@ describe('serverReducer', () => {
         const result = deleteServer(ServersServiceMock, () => expectedFetchServersResult)(serverToDelete);
 
         expect(result).toEqual(expectedFetchServersResult);
-        expect(ServersServiceMock.listServers.called).toEqual(false);
-        expect(ServersServiceMock.createServer.called).toEqual(false);
-        expect(ServersServiceMock.createServers.called).toEqual(false);
-        expect(ServersServiceMock.deleteServer.calledOnce).toEqual(true);
-        expect(ServersServiceMock.deleteServer.firstCall.calledWith(serverToDelete)).toEqual(true);
+        expect(ServersServiceMock.listServers).not.toHaveBeenCalled();
+        expect(ServersServiceMock.createServer).not.toHaveBeenCalled();
+        expect(ServersServiceMock.createServers).not.toHaveBeenCalled();
+        expect(ServersServiceMock.deleteServer).toHaveBeenCalledTimes(1);
+        expect(ServersServiceMock.deleteServer).toHaveBeenCalledWith(serverToDelete);
       });
     });
 
     describe('createServer', () => {
       it('creates multiple servers and then fetches servers again', () => {
-        const serversToCreate = values(servers);
+        const serversToCreate = values(list);
         const result = createServers(ServersServiceMock, () => expectedFetchServersResult)(serversToCreate);
 
         expect(result).toEqual(expectedFetchServersResult);
-        expect(ServersServiceMock.listServers.called).toEqual(false);
-        expect(ServersServiceMock.createServer.called).toEqual(false);
-        expect(ServersServiceMock.createServers.calledOnce).toEqual(true);
-        expect(ServersServiceMock.createServers.firstCall.calledWith(serversToCreate)).toEqual(true);
-        expect(ServersServiceMock.deleteServer.called).toEqual(false);
+        expect(ServersServiceMock.listServers).not.toHaveBeenCalled();
+        expect(ServersServiceMock.createServer).not.toHaveBeenCalled();
+        expect(ServersServiceMock.createServers).toHaveBeenCalledTimes(1);
+        expect(ServersServiceMock.createServers).toHaveBeenCalledWith(serversToCreate);
+        expect(ServersServiceMock.deleteServer).not.toHaveBeenCalled();
       });
     });
   });

test/servers/services/ServersExporter.test.js

@@ -1,26 +1,25 @@
-import sinon from 'sinon';
 import ServersExporter from '../../../src/servers/services/ServersExporter';
 
 describe('ServersExporter', () => {
   const createLinkMock = () => ({
-    setAttribute: sinon.fake(),
-    click: sinon.fake(),
+    setAttribute: jest.fn(),
+    click: jest.fn(),
     style: {},
   });
   const createWindowMock = (isIe10 = true) => ({
     navigator: {
-      msSaveBlob: isIe10 ? sinon.fake() : undefined,
+      msSaveBlob: isIe10 ? jest.fn() : undefined,
     },
     document: {
-      createElement: sinon.fake.returns(createLinkMock()),
+      createElement: jest.fn(() => createLinkMock()),
       body: {
-        appendChild: sinon.fake(),
-        removeChild: sinon.fake(),
+        appendChild: jest.fn(),
+        removeChild: jest.fn(),
       },
     },
   });
   const serversServiceMock = {
-    listServers: sinon.fake.returns({
+    listServers: jest.fn(() => ({
       abc123: {
         id: 'abc123',
         name: 'foo',
@@ -29,10 +28,16 @@ describe('ServersExporter', () => {
         id: 'def456',
         name: 'bar',
       },
-    }),
+    })),
   };
   const createCsvjsonMock = (throwError = false) => ({
-    toCSV: throwError ? sinon.fake.throws('') : sinon.fake.returns(''),
+    toCSV: jest.fn(() => {
+      if (throwError) {
+        throw new Error('');
+      }
+
+      return '';
+    }),
   });
 
   describe('exportServers', () => {
@@ -40,10 +45,10 @@ describe('ServersExporter', () => {
 
     beforeEach(() => {
       originalConsole = global.console;
-      global.console = { error: sinon.fake() };
+      global.console = { error: jest.fn() };
       global.Blob = class Blob {};
       global.URL = { createObjectURL: () => '' };
-      serversServiceMock.listServers.resetHistory();
+      serversServiceMock.listServers.mockReset();
     });
     afterEach(() => {
       global.console = originalConsole;
@@ -59,8 +64,8 @@ describe('ServersExporter', () => {
 
       exporter.exportServers();
 
-      expect(global.console.error.callCount).toEqual(1);
-      expect(csvjsonMock.toCSV.callCount).toEqual(1);
+      expect(global.console.error).toHaveBeenCalledTimes(1);
+      expect(csvjsonMock.toCSV).toHaveBeenCalledTimes(1);
     });
 
     it('makes use of msSaveBlob API when available', () => {
@@ -73,9 +78,9 @@ describe('ServersExporter', () => {
 
       exporter.exportServers();
 
-      expect(serversServiceMock.listServers.callCount).toEqual(1);
-      expect(windowMock.navigator.msSaveBlob.callCount).toEqual(1);
-      expect(windowMock.document.createElement.callCount).toEqual(0);
+      expect(serversServiceMock.listServers).toHaveBeenCalledTimes(1);
+      expect(windowMock.navigator.msSaveBlob).toHaveBeenCalledTimes(1);
+      expect(windowMock.document.createElement).not.toHaveBeenCalled();
     });
 
     it('makes use of download link API when available', () => {
@@ -88,10 +93,10 @@ describe('ServersExporter', () => {
 
       exporter.exportServers();
 
-      expect(serversServiceMock.listServers.callCount).toEqual(1);
-      expect(windowMock.document.createElement.callCount).toEqual(1);
-      expect(windowMock.document.body.appendChild.callCount).toEqual(1);
-      expect(windowMock.document.body.removeChild.callCount).toEqual(1);
+      expect(serversServiceMock.listServers).toHaveBeenCalledTimes(1);
+      expect(windowMock.document.createElement).toHaveBeenCalledTimes(1);
+      expect(windowMock.document.body.appendChild).toHaveBeenCalledTimes(1);
+      expect(windowMock.document.body.removeChild).toHaveBeenCalledTimes(1);
     });
   });
 });

test/servers/services/ServersImporter.test.js

@@ -1,14 +1,13 @@
-import sinon from 'sinon';
 import ServersImporter from '../../../src/servers/services/ServersImporter';
 
 describe('ServersImporter', () => {
   const servers = [{ name: 'foo' }, { name: 'bar' }];
   const csvjsonMock = {
-    toObject: sinon.fake.returns(servers),
+    toObject: jest.fn(() => servers),
   };
   const importer = new ServersImporter(csvjsonMock);
 
-  beforeEach(() => csvjsonMock.toObject.resetHistory());
+  beforeEach(() => csvjsonMock.toObject.mockClear());
 
   describe('importServersFromFile', () => {
     it('rejects with error if no file was provided', async () => {
@@ -28,7 +27,7 @@ describe('ServersImporter', () => {
     });
 
     it('reads file when a CSV is provided', async () => {
-      const readAsText = sinon.fake.returns('');
+      const readAsText = jest.fn(() => '');
 
       global.FileReader = class FileReader {
         constructor() {
@@ -40,8 +39,8 @@ describe('ServersImporter', () => {
 
       await importer.importServersFromFile({ type: 'text/csv' });
 
-      expect(readAsText.callCount).toEqual(1);
-      expect(csvjsonMock.toObject.callCount).toEqual(1);
+      expect(readAsText).toHaveBeenCalledTimes(1);
+      expect(csvjsonMock.toObject).toHaveBeenCalledTimes(1);
     });
   });
 });

test/servers/services/ServersService.test.js

@@ -1,5 +1,3 @@
-import sinon from 'sinon';
-import { last } from 'ramda';
 import ServersService from '../../../src/servers/services/ServersService';
 
 describe('ServersService', () => {
@@ -8,8 +6,8 @@ describe('ServersService', () => {
     def456: { id: 'def456' },
   };
   const createStorageMock = (returnValue) => ({
-    set: sinon.fake(),
-    get: sinon.fake.returns(returnValue),
+    set: jest.fn(),
+    get: jest.fn(() => returnValue),
   });
 
   describe('listServers', () => {
@@ -20,8 +18,8 @@ describe('ServersService', () => {
       const result = service.listServers();
 
       expect(result).toEqual({});
-      expect(storageMock.get.callCount).toEqual(1);
-      expect(storageMock.set.callCount).toEqual(0);
+      expect(storageMock.get).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).not.toHaveBeenCalled();
     });
 
     it('returns value from storage when found', () => {
@@ -31,8 +29,8 @@ describe('ServersService', () => {
       const result = service.listServers();
 
       expect(result).toEqual(servers);
-      expect(storageMock.get.callCount).toEqual(1);
-      expect(storageMock.set.callCount).toEqual(0);
+      expect(storageMock.get).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).not.toHaveBeenCalled();
     });
   });
 
@@ -44,8 +42,8 @@ describe('ServersService', () => {
       const result = service.findServerById('ghi789');
 
       expect(result).toBeUndefined();
-      expect(storageMock.get.callCount).toEqual(1);
-      expect(storageMock.set.callCount).toEqual(0);
+      expect(storageMock.get).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).not.toHaveBeenCalled();
     });
 
     it('returns server from list when found', () => {
@@ -55,8 +53,8 @@ describe('ServersService', () => {
       const result = service.findServerById('abc123');
 
       expect(result).toEqual({ id: 'abc123' });
-      expect(storageMock.get.callCount).toEqual(1);
-      expect(storageMock.set.callCount).toEqual(0);
+      expect(storageMock.get).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).not.toHaveBeenCalled();
     });
   });
 
@@ -67,9 +65,9 @@ describe('ServersService', () => {
 
       service.createServer({ id: 'ghi789' });
 
-      expect(storageMock.get.callCount).toEqual(1);
-      expect(storageMock.set.callCount).toEqual(1);
-      expect(last(storageMock.set.lastCall.args)).toEqual({
+      expect(storageMock.get).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).toHaveBeenCalledWith(expect.anything(), {
         abc123: { id: 'abc123' },
         def456: { id: 'def456' },
         ghi789: { id: 'ghi789' },
@@ -84,9 +82,9 @@ describe('ServersService', () => {
 
       service.createServers([{ id: 'ghi789' }, { id: 'jkl123' }]);
 
-      expect(storageMock.get.callCount).toEqual(1);
-      expect(storageMock.set.callCount).toEqual(1);
-      expect(last(storageMock.set.lastCall.args)).toEqual({
+      expect(storageMock.get).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).toHaveBeenCalledWith(expect.anything(), {
         abc123: { id: 'abc123' },
         def456: { id: 'def456' },
         ghi789: { id: 'ghi789' },
@@ -102,9 +100,9 @@ describe('ServersService', () => {
 
       service.deleteServer({ id: 'abc123' });
 
-      expect(storageMock.get.callCount).toEqual(1);
-      expect(storageMock.set.callCount).toEqual(1);
-      expect(last(storageMock.set.lastCall.args)).toEqual({
+      expect(storageMock.get).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).toHaveBeenCalledWith(expect.anything(), {
         def456: { id: 'def456' },
       });
     });

test/short-urls/CreateShortUrl.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import moment from 'moment';
-import * as sinon from 'sinon';
 import { identity } from 'ramda';
 import createShortUrlsCreator from '../../src/short-urls/CreateShortUrl';
 import DateInput from '../../src/utils/DateInput';
@@ -12,7 +11,7 @@ describe('<CreateShortUrl />', () => {
   const shortUrlCreationResult = {
     loading: false,
   };
-  const createShortUrl = sinon.spy();
+  const createShortUrl = jest.fn();
 
   beforeEach(() => {
     const CreateShortUrl = createShortUrlsCreator(TagsSelector, () => '');
@@ -23,7 +22,7 @@ describe('<CreateShortUrl />', () => {
   });
   afterEach(() => {
     wrapper.unmount();
-    createShortUrl.resetHistory();
+    createShortUrl.mockReset();
   });
 
   it('saves short URL with data set in form controls', (done) => {
@@ -49,19 +48,16 @@ describe('<CreateShortUrl />', () => {
       const form = wrapper.find('form');
 
       form.simulate('submit', { preventDefault: identity });
-      expect(createShortUrl.callCount).toEqual(1);
-      expect(createShortUrl.getCall(0).args).toEqual(
-        [
-          {
-            longUrl: 'https://long-domain.com/foo/bar',
-            tags: [ 'tag_foo', 'tag_bar' ],
-            customSlug: 'my-slug',
-            validSince: validSince.format(),
-            validUntil: validUntil.format(),
-            maxVisits: '20',
-          },
-        ]
-      );
+      expect(createShortUrl).toHaveBeenCalledTimes(1);
+      expect(createShortUrl).toHaveBeenCalledWith({
+        longUrl: 'https://long-domain.com/foo/bar',
+        tags: [ 'tag_foo', 'tag_bar' ],
+        customSlug: 'my-slug',
+        validSince: validSince.format(),
+        validUntil: validUntil.format(),
+        maxVisits: '20',
+        findIfExists: false,
+      });
       done();
     });
   });

test/short-urls/SearchBar.test.js

@@ -1,21 +1,17 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import sinon from 'sinon';
 import searchBarCreator from '../../src/short-urls/SearchBar';
 import SearchField from '../../src/utils/SearchField';
 import Tag from '../../src/tags/helpers/Tag';
 
 describe('<SearchBar />', () => {
   let wrapper;
-  const listShortUrlsMock = sinon.spy();
+  const listShortUrlsMock = jest.fn();
   const SearchBar = searchBarCreator({});
 
   afterEach(() => {
-    listShortUrlsMock.resetHistory();
-
-    if (wrapper) {
-      wrapper.unmount();
-    }
+    listShortUrlsMock.mockReset();
+    wrapper && wrapper.unmount();
   });
 
   it('renders a SearchField', () => {
@@ -42,9 +38,9 @@ describe('<SearchBar />', () => {
     wrapper = shallow(<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
     const searchField = wrapper.find(SearchField);
 
-    expect(listShortUrlsMock.callCount).toEqual(0);
+    expect(listShortUrlsMock).not.toHaveBeenCalled();
     searchField.simulate('change');
-    expect(listShortUrlsMock.callCount).toEqual(1);
+    expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
   });
 
   it('updates short URLs list when a tag is removed', () => {
@@ -53,8 +49,8 @@ describe('<SearchBar />', () => {
     );
     const tag = wrapper.find(Tag).first();
 
-    expect(listShortUrlsMock.callCount).toEqual(0);
+    expect(listShortUrlsMock).not.toHaveBeenCalled();
     tag.simulate('close');
-    expect(listShortUrlsMock.callCount).toEqual(1);
+    expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
   });
 });

test/short-urls/UseExistingIfFoundInfoIcon.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Modal } from 'reactstrap';
+import UseExistingIfFoundInfoIcon from '../../src/short-urls/UseExistingIfFoundInfoIcon';
+
+describe('<UseExistingIfFoundInfoIcon />', () => {
+  let wrapped;
+
+  beforeEach(() => {
+    wrapped = mount(<UseExistingIfFoundInfoIcon />);
+  });
+
+  afterEach(() => wrapped.unmount());
+
+  it('shows modal when icon is clicked', () => {
+    const icon = wrapped.find(FontAwesomeIcon);
+
+    expect(wrapped.find(Modal).prop('isOpen')).toEqual(false);
+    icon.simulate('click');
+    expect(wrapped.find(Modal).prop('isOpen')).toEqual(true);
+  });
+});

test/short-urls/helpers/CreateShortUrlResult.test.js

@@ -3,12 +3,11 @@ import { shallow } from 'enzyme';
 import { identity } from 'ramda';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { Tooltip } from 'reactstrap';
-import * as sinon from 'sinon';
 import createCreateShortUrlResult from '../../../src/short-urls/helpers/CreateShortUrlResult';
 
 describe('<CreateShortUrlResult />', () => {
   let wrapper;
-  const stateFlagTimeout = sinon.spy();
+  const stateFlagTimeout = jest.fn();
   const createWrapper = (result, error = false) => {
     const CreateShortUrlResult = createCreateShortUrlResult(stateFlagTimeout);
 
@@ -18,7 +17,7 @@ describe('<CreateShortUrlResult />', () => {
   };
 
   afterEach(() => {
-    stateFlagTimeout.resetHistory();
+    stateFlagTimeout.mockReset();
     wrapper && wrapper.unmount();
   });
 
@@ -48,8 +47,8 @@ describe('<CreateShortUrlResult />', () => {
     const wrapper = createWrapper({ shortUrl: 'https://doma.in/abc123' });
     const copyBtn = wrapper.find(CopyToClipboard);
 
-    expect(stateFlagTimeout.callCount).toEqual(0);
+    expect(stateFlagTimeout).not.toHaveBeenCalled();
     copyBtn.simulate('copy');
-    expect(stateFlagTimeout.callCount).toEqual(1);
+    expect(stateFlagTimeout).toHaveBeenCalledTimes(1);
   });
 });

test/short-urls/helpers/DeleteShortUrlModal.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { identity } from 'ramda';
-import * as sinon from 'sinon';
 import DeleteShortUrlModal from '../../../src/short-urls/helpers/DeleteShortUrlModal';
 
 describe('<DeleteShortUrlModal />', () => {
@@ -11,7 +10,7 @@ describe('<DeleteShortUrlModal />', () => {
     shortCode: 'abc123',
     originalUrl: 'https://long-domain.com/foo/bar',
   };
-  const deleteShortUrl = sinon.fake.returns(Promise.resolve());
+  const deleteShortUrl = jest.fn(() => Promise.resolve());
   const createWrapper = (shortUrlDeletion) => {
     wrapper = shallow(
       <DeleteShortUrlModal
@@ -30,7 +29,7 @@ describe('<DeleteShortUrlModal />', () => {
 
   afterEach(() => {
     wrapper && wrapper.unmount();
-    deleteShortUrl.resetHistory();
+    deleteShortUrl.mockClear();
   });
 
   it('shows threshold error message when threshold error occurs', () => {
@@ -106,9 +105,9 @@ describe('<DeleteShortUrlModal />', () => {
     setImmediate(() => {
       const form = wrapper.find('form');
 
-      expect(deleteShortUrl.callCount).toEqual(0);
+      expect(deleteShortUrl).not.toHaveBeenCalled();
       form.simulate('submit', { preventDefault: identity });
-      expect(deleteShortUrl.callCount).toEqual(1);
+      expect(deleteShortUrl).toHaveBeenCalledTimes(1);
       done();
     });
   });

test/short-urls/helpers/EditTagsModal.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import * as sinon from 'sinon';
 import { Modal } from 'reactstrap';
 import createEditTagsModal from '../../../src/short-urls/helpers/EditTagsModal';
 
@@ -8,10 +7,10 @@ describe('<EditTagsModal />', () => {
   let wrapper;
   const shortCode = 'abc123';
   const TagsSelector = () => '';
-  const editShortUrlTags = sinon.fake.resolves();
-  const shortUrlTagsEdited = sinon.fake();
-  const resetShortUrlsTags = sinon.fake();
-  const toggle = sinon.fake();
+  const editShortUrlTags = jest.fn(() => Promise.resolve());
+  const shortUrlTagsEdited = jest.fn();
+  const resetShortUrlsTags = jest.fn();
+  const toggle = jest.fn();
   const createWrapper = (shortUrlTags) => {
     const EditTagsModal = createEditTagsModal(TagsSelector);
 
@@ -37,10 +36,10 @@ describe('<EditTagsModal />', () => {
 
   afterEach(() => {
     wrapper && wrapper.unmount();
-    editShortUrlTags.resetHistory();
-    shortUrlTagsEdited.resetHistory();
-    resetShortUrlsTags.resetHistory();
-    toggle.resetHistory();
+    editShortUrlTags.mockClear();
+    shortUrlTagsEdited.mockReset();
+    resetShortUrlsTags.mockReset();
+    toggle.mockReset();
   });
 
   it('resets tags when component is mounted', () => {
@@ -51,7 +50,7 @@ describe('<EditTagsModal />', () => {
       error: false,
     });
 
-    expect(resetShortUrlsTags.callCount).toEqual(1);
+    expect(resetShortUrlsTags).toHaveBeenCalledTimes(1);
   });
 
   it('renders tags selector and save button when loaded', () => {
@@ -92,12 +91,12 @@ describe('<EditTagsModal />', () => {
 
     saveBtn.simulate('click');
 
-    expect(editShortUrlTags.callCount).toEqual(1);
-    expect(editShortUrlTags.getCall(0).args).toEqual([ shortCode, []]);
+    expect(editShortUrlTags).toHaveBeenCalledTimes(1);
+    expect(editShortUrlTags).toHaveBeenCalledWith(shortCode, []);
 
     // Wrap this expect in a setImmediate since it is called as a result of an inner promise
     setImmediate(() => {
-      expect(toggle.callCount).toEqual(1);
+      expect(toggle).toHaveBeenCalledTimes(1);
       done();
     });
   });
@@ -112,7 +111,7 @@ describe('<EditTagsModal />', () => {
     const modal = wrapper.find(Modal);
 
     modal.simulate('closed');
-    expect(shortUrlTagsEdited.callCount).toEqual(0);
+    expect(shortUrlTagsEdited).not.toHaveBeenCalled();
   });
 
   it('notifies tags have been edited when window is closed after saving', (done) => {
@@ -130,8 +129,8 @@ describe('<EditTagsModal />', () => {
     // Wrap this expect in a setImmediate since it is called as a result of an inner promise
     setImmediate(() => {
       modal.simulate('closed');
-      expect(shortUrlTagsEdited.callCount).toEqual(1);
-      expect(shortUrlTagsEdited.getCall(0).args).toEqual([ shortCode, []]);
+      expect(shortUrlTagsEdited).toHaveBeenCalledTimes(1);
+      expect(shortUrlTagsEdited).toHaveBeenCalledWith(shortCode, []);
       done();
     });
   });
@@ -146,6 +145,6 @@ describe('<EditTagsModal />', () => {
     const cancelBtn = wrapper.find('.btn-link');
 
     cancelBtn.simulate('click');
-    expect(toggle.callCount).toEqual(1);
+    expect(toggle).toHaveBeenCalledTimes(1);
   });
 });

test/short-urls/helpers/ShortUrlsRow.test.js

@@ -3,7 +3,6 @@ import { shallow } from 'enzyme';
 import moment from 'moment';
 import Moment from 'react-moment';
 import { assoc, toString } from 'ramda';
-import * as sinon from 'sinon';
 import createShortUrlsRow from '../../../src/short-urls/helpers/ShortUrlsRow';
 import ExternalLink from '../../../src/utils/ExternalLink';
 import Tag from '../../../src/tags/helpers/Tag';
@@ -12,7 +11,7 @@ describe('<ShortUrlsRow />', () => {
   let wrapper;
   const mockFunction = () => '';
   const ShortUrlsRowMenu = mockFunction;
-  const stateFlagTimeout = sinon.spy();
+  const stateFlagTimeout = jest.fn();
   const colorGenerator = {
     getColorForKey: mockFunction,
     setColorForKey: mockFunction,
@@ -53,7 +52,7 @@ describe('<ShortUrlsRow />', () => {
   });
 
   it('renders long URL in third row', () => {
-    const col = wrapper.find('td').at(2); // eslint-disable-line no-magic-numbers
+    const col = wrapper.find('td').at(2);
     const link = col.find(ExternalLink);
 
     expect(link.prop('href')).toEqual(shortUrl.longUrl);
@@ -61,7 +60,7 @@ describe('<ShortUrlsRow />', () => {
 
   describe('renders list of tags in fourth row', () => {
     it('with tags', () => {
-      const col = wrapper.find('td').at(3); // eslint-disable-line no-magic-numbers
+      const col = wrapper.find('td').at(3);
       const tags = col.find(Tag);
 
       expect(tags).toHaveLength(shortUrl.tags.length);
@@ -75,30 +74,29 @@ describe('<ShortUrlsRow />', () => {
     it('without tags', () => {
       wrapper.setProps({ shortUrl: assoc('tags', [], shortUrl) });
 
-      const col = wrapper.find('td').at(3); // eslint-disable-line no-magic-numbers
+      const col = wrapper.find('td').at(3);
 
       expect(col.text()).toContain('No tags');
     });
   });
 
   it('renders visits count in fifth row', () => {
-    const col = wrapper.find('td').at(4); // eslint-disable-line no-magic-numbers
+    const col = wrapper.find('td').at(4);
 
     expect(col.text()).toEqual(toString(shortUrl.visitsCount));
   });
 
   it('updates state when copied to clipboard', () => {
-    const col = wrapper.find('td').at(5); // eslint-disable-line no-magic-numbers
+    const col = wrapper.find('td').at(5);
     const menu = col.find(ShortUrlsRowMenu);
 
     expect(menu).toHaveLength(1);
-    expect(stateFlagTimeout.called).toEqual(false);
+    expect(stateFlagTimeout).not.toHaveBeenCalled();
     menu.simulate('copyToClipboard');
-    expect(stateFlagTimeout.calledOnce).toEqual(true);
+    expect(stateFlagTimeout).toHaveBeenCalledTimes(1);
   });
 
   it('shows copy hint when state prop is true', () => {
-    // eslint-disable-next-line no-magic-numbers
     const isHidden = () => wrapper.find('td').at(5).find('.short-urls-row__copy-hint').prop('hidden');
 
     expect(isHidden()).toEqual(true);

test/short-urls/helpers/ShortUrlsRowMenu.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import * as sinon from 'sinon';
 import { ButtonDropdown, DropdownItem } from 'reactstrap';
 import createShortUrlsRowMenu from '../../../src/short-urls/helpers/ShortUrlsRowMenu';
 import PreviewModal from '../../../src/short-urls/helpers/PreviewModal';
@@ -10,7 +9,7 @@ describe('<ShortUrlsRowMenu />', () => {
   let wrapper;
   const DeleteShortUrlModal = () => '';
   const EditTagsModal = () => '';
-  const onCopyToClipboard = sinon.spy();
+  const onCopyToClipboard = jest.fn();
   const selectedServer = { id: 'abc123' };
   const shortUrl = {
     shortCode: 'abc123',

test/short-urls/reducers/shortUrlCreation.test.js

@@ -1,4 +1,3 @@
-import * as sinon from 'sinon';
 import reducer, {
   CREATE_SHORT_URL_START,
   CREATE_SHORT_URL_ERROR,
@@ -39,9 +38,6 @@ describe('shortUrlCreationReducer', () => {
         error: false,
       });
     });
-
-    it('returns provided state on unknown action', () =>
-      expect(reducer({}, { type: 'unknown' })).toEqual({}));
   });
 
   describe('resetCreateShortUrl', () => {
@@ -51,30 +47,27 @@ describe('shortUrlCreationReducer', () => {
 
   describe('createShortUrl', () => {
     const createApiClientMock = (result) => ({
-      createShortUrl: sinon.fake.returns(result),
+      createShortUrl: jest.fn(() => result),
     });
-    const dispatch = sinon.spy();
+    const dispatch = jest.fn();
     const getState = () => ({});
 
-    afterEach(() => dispatch.resetHistory());
+    afterEach(() => dispatch.mockReset());
 
     it('calls API on success', async () => {
-      const expectedDispatchCalls = 2;
       const result = 'foo';
       const apiClientMock = createApiClientMock(Promise.resolve(result));
       const dispatchable = createShortUrl(() => apiClientMock)({});
 
       await dispatchable(dispatch, getState);
 
-      expect(apiClientMock.createShortUrl.callCount).toEqual(1);
-
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: CREATE_SHORT_URL_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: CREATE_SHORT_URL, result }]);
+      expect(apiClientMock.createShortUrl).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: CREATE_SHORT_URL_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: CREATE_SHORT_URL, result });
     });
 
     it('throws on error', async () => {
-      const expectedDispatchCalls = 2;
       const error = 'Error';
       const apiClientMock = createApiClientMock(Promise.reject(error));
       const dispatchable = createShortUrl(() => apiClientMock)({});
@@ -85,11 +78,10 @@ describe('shortUrlCreationReducer', () => {
         expect(e).toEqual(error);
       }
 
-      expect(apiClientMock.createShortUrl.callCount).toEqual(1);
-
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: CREATE_SHORT_URL_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: CREATE_SHORT_URL_ERROR }]);
+      expect(apiClientMock.createShortUrl).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: CREATE_SHORT_URL_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: CREATE_SHORT_URL_ERROR });
     });
   });
 });

test/short-urls/reducers/shortUrlDeletion.test.js

@@ -1,4 +1,3 @@
-import * as sinon from 'sinon';
 import reducer, {
   DELETE_SHORT_URL, DELETE_SHORT_URL_ERROR,
   DELETE_SHORT_URL_START,
@@ -45,12 +44,6 @@ describe('shortUrlDeletionReducer', () => {
         errorData,
       });
     });
-
-    it('returns provided state as is on unknown action', () => {
-      const state = { foo: 'bar' };
-
-      expect(reducer(state, { type: 'unknown' })).toEqual(state);
-    });
   });
 
   describe('resetDeleteShortUrl', () => {
@@ -64,39 +57,37 @@ describe('shortUrlDeletionReducer', () => {
   });
 
   describe('deleteShortUrl', () => {
-    const dispatch = sinon.spy();
-    const getState = sinon.fake.returns({ selectedServer: {} });
+    const dispatch = jest.fn();
+    const getState = jest.fn().mockReturnValue({ selectedServer: {} });
 
     afterEach(() => {
-      dispatch.resetHistory();
-      getState.resetHistory();
+      dispatch.mockReset();
+      getState.mockClear();
     });
 
     it('dispatches proper actions if API client request succeeds', async () => {
       const apiClientMock = {
-        deleteShortUrl: sinon.fake.resolves(''),
+        deleteShortUrl: jest.fn(() => ''),
       };
       const shortCode = 'abc123';
-      const expectedDispatchCalls = 2;
 
       await deleteShortUrl(() => apiClientMock)(shortCode)(dispatch, getState);
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: DELETE_SHORT_URL_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: DELETE_SHORT_URL, shortCode }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: DELETE_SHORT_URL_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: DELETE_SHORT_URL, shortCode });
 
-      expect(apiClientMock.deleteShortUrl.callCount).toEqual(1);
-      expect(apiClientMock.deleteShortUrl.getCall(0).args).toEqual([ shortCode ]);
+      expect(apiClientMock.deleteShortUrl).toHaveBeenCalledTimes(1);
+      expect(apiClientMock.deleteShortUrl).toHaveBeenCalledWith(shortCode);
     });
 
     it('dispatches proper actions if API client request fails', async () => {
       const data = { foo: 'bar' };
       const error = { response: { data } };
       const apiClientMock = {
-        deleteShortUrl: sinon.fake.returns(Promise.reject(error)),
+        deleteShortUrl: jest.fn(() => Promise.reject(error)),
       };
       const shortCode = 'abc123';
-      const expectedDispatchCalls = 2;
 
       try {
         await deleteShortUrl(() => apiClientMock)(shortCode)(dispatch, getState);
@@ -104,12 +95,12 @@ describe('shortUrlDeletionReducer', () => {
         expect(e).toEqual(error);
       }
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: DELETE_SHORT_URL_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: DELETE_SHORT_URL_ERROR, errorData: data }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: DELETE_SHORT_URL_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: DELETE_SHORT_URL_ERROR, errorData: data });
 
-      expect(apiClientMock.deleteShortUrl.callCount).toEqual(1);
-      expect(apiClientMock.deleteShortUrl.getCall(0).args).toEqual([ shortCode ]);
+      expect(apiClientMock.deleteShortUrl).toHaveBeenCalledTimes(1);
+      expect(apiClientMock.deleteShortUrl).toHaveBeenCalledWith(shortCode);
     });
   });
 });

test/short-urls/reducers/shortUrlTags.test.js

@@ -0,0 +1,104 @@
+import reducer, {
+  EDIT_SHORT_URL_TAGS,
+  EDIT_SHORT_URL_TAGS_ERROR,
+  EDIT_SHORT_URL_TAGS_START, editShortUrlTags,
+  RESET_EDIT_SHORT_URL_TAGS,
+  resetShortUrlsTags,
+  SHORT_URL_TAGS_EDITED,
+  shortUrlTagsEdited,
+} from '../../../src/short-urls/reducers/shortUrlTags';
+
+describe('shortUrlTagsReducer', () => {
+  const tags = [ 'foo', 'bar', 'baz' ];
+  const shortCode = 'abc123';
+
+  describe('reducer', () => {
+    it('returns loading on EDIT_SHORT_URL_TAGS_START', () => {
+      expect(reducer({}, { type: EDIT_SHORT_URL_TAGS_START })).toEqual({
+        saving: true,
+        error: false,
+      });
+    });
+
+    it('returns error on EDIT_SHORT_URL_TAGS_ERROR', () => {
+      expect(reducer({}, { type: EDIT_SHORT_URL_TAGS_ERROR })).toEqual({
+        saving: false,
+        error: true,
+      });
+    });
+
+    it('returns provided tags and shortCode on EDIT_SHORT_URL_TAGS', () => {
+      expect(reducer({}, { type: EDIT_SHORT_URL_TAGS, tags, shortCode })).toEqual({
+        tags,
+        shortCode,
+        saving: false,
+        error: false,
+      });
+    });
+
+    it('goes back to initial state on RESET_EDIT_SHORT_URL_TAGS', () => {
+      expect(reducer({}, { type: RESET_EDIT_SHORT_URL_TAGS })).toEqual({
+        tags: [],
+        shortCode: null,
+        saving: false,
+        error: false,
+      });
+    });
+  });
+
+  describe('resetShortUrlsTags', () =>
+    it('creates expected action', () => expect(resetShortUrlsTags()).toEqual({ type: RESET_EDIT_SHORT_URL_TAGS })));
+
+  describe('shortUrlTagsEdited', () =>
+    it('creates expected action', () => expect(shortUrlTagsEdited(shortCode, tags)).toEqual({
+      tags,
+      shortCode,
+      type: SHORT_URL_TAGS_EDITED,
+    })));
+
+  describe('editShortUrlTags', () => {
+    const updateShortUrlTags = jest.fn();
+    const buildShlinkApiClient = jest.fn().mockResolvedValue({ updateShortUrlTags });
+    const dispatch = jest.fn();
+
+    afterEach(() => {
+      updateShortUrlTags.mockReset();
+      buildShlinkApiClient.mockClear();
+      dispatch.mockReset();
+    });
+
+    it('dispatches normalized tags on success', async () => {
+      const normalizedTags = [ 'bar', 'foo' ];
+
+      updateShortUrlTags.mockResolvedValue(normalizedTags);
+
+      await editShortUrlTags(buildShlinkApiClient)(shortCode, tags)(dispatch);
+
+      expect(buildShlinkApiClient).toHaveBeenCalledTimes(1);
+      expect(updateShortUrlTags).toHaveBeenCalledTimes(1);
+      expect(updateShortUrlTags).toHaveBeenCalledWith(shortCode, tags);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: EDIT_SHORT_URL_TAGS_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: EDIT_SHORT_URL_TAGS, tags: normalizedTags, shortCode });
+    });
+
+    it('dispatches error on failure', async () => {
+      const error = new Error();
+
+      updateShortUrlTags.mockRejectedValue(error);
+
+      try {
+        await editShortUrlTags(buildShlinkApiClient)(shortCode, tags)(dispatch);
+      } catch (e) {
+        expect(e).toBe(error);
+      }
+
+      expect(buildShlinkApiClient).toHaveBeenCalledTimes(1);
+      expect(updateShortUrlTags).toHaveBeenCalledTimes(1);
+      expect(updateShortUrlTags).toHaveBeenCalledWith(shortCode, tags);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: EDIT_SHORT_URL_TAGS_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: EDIT_SHORT_URL_TAGS_ERROR });
+    });
+  });
+});

test/short-urls/reducers/shortUrlsList.test.js

@@ -1,4 +1,3 @@
-import * as sinon from 'sinon';
 import reducer, {
   LIST_SHORT_URLS,
   LIST_SHORT_URLS_ERROR,
@@ -70,51 +69,43 @@ describe('shortUrlsListReducer', () => {
         },
       });
     });
-
-    it('returns provided state as is on unknown action', () => {
-      const state = { foo: 'bar' };
-
-      expect(reducer(state, { type: 'unknown' })).toEqual(state);
-    });
   });
 
   describe('listShortUrls', () => {
-    const dispatch = sinon.spy();
-    const getState = sinon.fake.returns({ selectedServer: {} });
+    const dispatch = jest.fn();
+    const getState = jest.fn().mockReturnValue({ selectedServer: {} });
 
     afterEach(() => {
-      dispatch.resetHistory();
-      getState.resetHistory();
+      dispatch.mockReset();
+      getState.mockClear();
     });
 
     it('dispatches proper actions if API client request succeeds', async () => {
       const apiClientMock = {
-        listShortUrls: sinon.fake.resolves([]),
+        listShortUrls: jest.fn().mockResolvedValue([]),
       };
-      const expectedDispatchCalls = 2;
 
       await listShortUrls(() => apiClientMock)()(dispatch, getState);
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: LIST_SHORT_URLS_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: LIST_SHORT_URLS, shortUrls: [], params: {} }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: LIST_SHORT_URLS_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: LIST_SHORT_URLS, shortUrls: [], params: {} });
 
-      expect(apiClientMock.listShortUrls.callCount).toEqual(1);
+      expect(apiClientMock.listShortUrls).toHaveBeenCalledTimes(1);
     });
 
     it('dispatches proper actions if API client request fails', async () => {
       const apiClientMock = {
-        listShortUrls: sinon.fake.rejects(),
+        listShortUrls: jest.fn().mockRejectedValue(),
       };
-      const expectedDispatchCalls = 2;
 
       await listShortUrls(() => apiClientMock)()(dispatch, getState);
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: LIST_SHORT_URLS_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: LIST_SHORT_URLS_ERROR, params: {} }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: LIST_SHORT_URLS_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: LIST_SHORT_URLS_ERROR, params: {} });
 
-      expect(apiClientMock.listShortUrls.callCount).toEqual(1);
+      expect(apiClientMock.listShortUrls).toHaveBeenCalledTimes(1);
     });
   });
 });

test/short-urls/reducers/shortUrlsListParams.test.js

@@ -8,9 +8,6 @@ describe('shortUrlsListParamsReducer', () => {
   describe('reducer', () => {
     const defaultState = { page: '1' };
 
-    it('returns default value when action is unknown', () =>
-      expect(reducer(defaultState, { type: 'unknown' })).toEqual(defaultState));
-
     it('returns params when action is LIST_SHORT_URLS', () =>
       expect(reducer(defaultState, { type: LIST_SHORT_URLS, params: { searchTerm: 'foo' } })).toEqual({
         ...defaultState,

test/tags/TagsList.test.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { identity, range } from 'ramda';
-import * as sinon from 'sinon';
+import { identity } from 'ramda';
 import createTagsList from '../../src/tags/TagsList';
 import MuttedMessage from '../../src/utils/MuttedMessage';
 import SearchField from '../../src/utils/SearchField';
+import { rangeOf } from '../../src/utils/utils';
 
 describe('<TagsList />', () => {
   let wrapper;
-  const filterTags = sinon.spy();
+  const filterTags = jest.fn();
   const TagCard = () => '';
   const createWrapper = (tagsList) => {
     const params = { serverId: '1' };
@@ -23,7 +23,7 @@ describe('<TagsList />', () => {
 
   afterEach(() => {
     wrapper && wrapper.unmount();
-    filterTags.resetHistory();
+    filterTags.mockReset();
   });
 
   it('shows a loading message when tags are being loaded', () => {
@@ -53,7 +53,7 @@ describe('<TagsList />', () => {
   it('renders the proper amount of groups and cards based on the amount of tags', () => {
     const amountOfTags = 10;
     const amountOfGroups = 4;
-    const wrapper = createWrapper({ filteredTags: range(0, amountOfTags).map((i) => `tag_${i}`) });
+    const wrapper = createWrapper({ filteredTags: rangeOf(amountOfTags, (i) => `tag_${i}`) });
     const cards = wrapper.find(TagCard);
     const groups = wrapper.find('.col-md-6');
 
@@ -66,11 +66,11 @@ describe('<TagsList />', () => {
     const searchField = wrapper.find(SearchField);
 
     expect(searchField).toHaveLength(1);
-    expect(filterTags.callCount).toEqual(0);
+    expect(filterTags).not.toHaveBeenCalled();
     searchField.simulate('change');
 
     setImmediate(() => {
-      expect(filterTags.callCount).toEqual(1);
+      expect(filterTags).toHaveBeenCalledTimes(1);
       done();
     });
   });

test/tags/helpers/DeleteTagConfirmModal.test.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import * as sinon from 'sinon';
 import { Modal, ModalBody, ModalFooter } from 'reactstrap';
 import DeleteTagConfirmModal from '../../../src/tags/helpers/DeleteTagConfirmModal';
 
 describe('<DeleteTagConfirmModal />', () => {
   let wrapper;
   const tag = 'nodejs';
-  const deleteTag = sinon.spy();
-  const tagDeleted = sinon.spy();
+  const deleteTag = jest.fn();
+  const tagDeleted = jest.fn();
   const createWrapper = (tagDelete) => {
     wrapper = shallow(
       <DeleteTagConfirmModal
@@ -26,8 +25,8 @@ describe('<DeleteTagConfirmModal />', () => {
 
   afterEach(() => {
     wrapper && wrapper.unmount();
-    deleteTag.resetHistory();
-    tagDeleted.resetHistory();
+    deleteTag.mockReset();
+    tagDeleted.mockReset();
   });
 
   it('asks confirmation for provided tag to be deleted', () => {
@@ -63,8 +62,8 @@ describe('<DeleteTagConfirmModal />', () => {
     const delBtn = footer.find('.btn-danger');
 
     delBtn.simulate('click');
-    expect(deleteTag.calledOnce).toEqual(true);
-    expect(deleteTag.calledWith(tag)).toEqual(true);
+    expect(deleteTag).toHaveBeenCalledTimes(1);
+    expect(deleteTag).toHaveBeenCalledWith(tag);
   });
 
   it('does no further actions when modal is closed without deleting tag', () => {
@@ -72,7 +71,7 @@ describe('<DeleteTagConfirmModal />', () => {
     const modal = wrapper.find(Modal);
 
     modal.simulate('closed');
-    expect(tagDeleted.called).toEqual(false);
+    expect(tagDeleted).not.toHaveBeenCalled();
   });
 
   it('notifies tag to be deleted when modal is closed after deleting tag', () => {
@@ -81,7 +80,7 @@ describe('<DeleteTagConfirmModal />', () => {
 
     wrapper.instance().tagWasDeleted = true;
     modal.simulate('closed');
-    expect(tagDeleted.calledOnce).toEqual(true);
-    expect(tagDeleted.calledWith(tag)).toEqual(true);
+    expect(tagDeleted).toHaveBeenCalledTimes(1);
+    expect(tagDeleted).toHaveBeenCalledWith(tag);
   });
 });

test/tags/reducers/tagDelete.test.js

@@ -1,4 +1,3 @@
-import * as sinon from 'sinon';
 import reducer, {
   DELETE_TAG_START,
   DELETE_TAG_ERROR,
@@ -30,9 +29,6 @@ describe('tagDeleteReducer', () => {
         error: false,
       });
     });
-
-    it('returns provided state on unknown action', () =>
-      expect(reducer({}, { type: 'unknown' })).toEqual({}));
   });
 
   describe('tagDeleted', () => {
@@ -45,31 +41,29 @@ describe('tagDeleteReducer', () => {
 
   describe('deleteTag', () => {
     const createApiClientMock = (result) => ({
-      deleteTags: sinon.fake.returns(result),
+      deleteTags: jest.fn(() => result),
     });
-    const dispatch = sinon.spy();
+    const dispatch = jest.fn();
     const getState = () => ({});
 
-    afterEach(() => dispatch.resetHistory());
+    afterEach(() => dispatch.mockReset());
 
     it('calls API on success', async () => {
-      const expectedDispatchCalls = 2;
       const tag = 'foo';
       const apiClientMock = createApiClientMock(Promise.resolve());
       const dispatchable = deleteTag(() => apiClientMock)(tag);
 
       await dispatchable(dispatch, getState);
 
-      expect(apiClientMock.deleteTags.callCount).toEqual(1);
-      expect(apiClientMock.deleteTags.getCall(0).args).toEqual([[ tag ]]);
+      expect(apiClientMock.deleteTags).toHaveBeenCalledTimes(1);
+      expect(apiClientMock.deleteTags).toHaveBeenNthCalledWith(1, [ tag ]);
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: DELETE_TAG_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: DELETE_TAG }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: DELETE_TAG_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: DELETE_TAG });
     });
 
     it('throws on error', async () => {
-      const expectedDispatchCalls = 2;
       const error = 'Error';
       const tag = 'foo';
       const apiClientMock = createApiClientMock(Promise.reject(error));
@@ -81,12 +75,12 @@ describe('tagDeleteReducer', () => {
         expect(e).toEqual(error);
       }
 
-      expect(apiClientMock.deleteTags.callCount).toEqual(1);
-      expect(apiClientMock.deleteTags.getCall(0).args).toEqual([[ tag ]]);
+      expect(apiClientMock.deleteTags).toHaveBeenCalledTimes(1);
+      expect(apiClientMock.deleteTags).toHaveBeenNthCalledWith(1, [ tag ]);
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: DELETE_TAG_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: DELETE_TAG_ERROR }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: DELETE_TAG_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: DELETE_TAG_ERROR });
     });
   });
 });

test/tags/reducers/tagEdit.test.js

@@ -1,4 +1,3 @@
-import * as sinon from 'sinon';
 import reducer, {
   EDIT_TAG_START,
   EDIT_TAG_ERROR,
@@ -32,9 +31,6 @@ describe('tagEditReducer', () => {
         newName: 'bar',
       });
     });
-
-    it('returns provided state on unknown action', () =>
-      expect(reducer({}, { type: 'unknown' })).toEqual({}));
   });
 
   describe('tagEdited', () => {
@@ -49,21 +45,20 @@ describe('tagEditReducer', () => {
 
   describe('editTag', () => {
     const createApiClientMock = (result) => ({
-      editTag: sinon.fake.returns(result),
+      editTag: jest.fn(() => result),
     });
     const colorGenerator = {
-      setColorForKey: sinon.spy(),
+      setColorForKey: jest.fn(),
     };
-    const dispatch = sinon.spy();
+    const dispatch = jest.fn();
     const getState = () => ({});
 
     afterEach(() => {
-      colorGenerator.setColorForKey.resetHistory();
-      dispatch.resetHistory();
+      colorGenerator.setColorForKey.mockReset();
+      dispatch.mockReset();
     });
 
     it('calls API on success', async () => {
-      const expectedDispatchCalls = 2;
       const oldName = 'foo';
       const newName = 'bar';
       const color = '#ff0000';
@@ -72,19 +67,18 @@ describe('tagEditReducer', () => {
 
       await dispatchable(dispatch, getState);
 
-      expect(apiClientMock.editTag.callCount).toEqual(1);
-      expect(apiClientMock.editTag.getCall(0).args).toEqual([ oldName, newName ]);
+      expect(apiClientMock.editTag).toHaveBeenCalledTimes(1);
+      expect(apiClientMock.editTag).toHaveBeenCalledWith(oldName, newName);
 
-      expect(colorGenerator.setColorForKey.callCount).toEqual(1);
-      expect(colorGenerator.setColorForKey.getCall(0).args).toEqual([ newName, color ]);
+      expect(colorGenerator.setColorForKey).toHaveBeenCalledTimes(1);
+      expect(colorGenerator.setColorForKey).toHaveBeenCalledWith(newName, color);
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: EDIT_TAG_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: EDIT_TAG, oldName, newName }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: EDIT_TAG_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: EDIT_TAG, oldName, newName });
     });
 
     it('throws on error', async () => {
-      const expectedDispatchCalls = 2;
       const error = 'Error';
       const oldName = 'foo';
       const newName = 'bar';
@@ -98,14 +92,14 @@ describe('tagEditReducer', () => {
         expect(e).toEqual(error);
       }
 
-      expect(apiClientMock.editTag.callCount).toEqual(1);
-      expect(apiClientMock.editTag.getCall(0).args).toEqual([ oldName, newName ]);
+      expect(apiClientMock.editTag).toHaveBeenCalledTimes(1);
+      expect(apiClientMock.editTag).toHaveBeenCalledWith(oldName, newName);
 
-      expect(colorGenerator.setColorForKey.callCount).toEqual(0);
+      expect(colorGenerator.setColorForKey).not.toHaveBeenCalled();
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: EDIT_TAG_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: EDIT_TAG_ERROR }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: EDIT_TAG_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: EDIT_TAG_ERROR });
     });
   });
 });

test/tags/reducers/tagsList.test.js

@@ -0,0 +1,144 @@
+import reducer, {
+  FILTER_TAGS,
+  filterTags,
+  LIST_TAGS,
+  LIST_TAGS_ERROR,
+  LIST_TAGS_START, listTags,
+} from '../../../src/tags/reducers/tagsList';
+import { TAG_DELETED } from '../../../src/tags/reducers/tagDelete';
+import { TAG_EDITED } from '../../../src/tags/reducers/tagEdit';
+
+describe('tagsListReducer', () => {
+  describe('reducer', () => {
+    it('returns loading on LIST_TAGS_START', () => {
+      expect(reducer({}, { type: LIST_TAGS_START })).toEqual({
+        loading: true,
+        error: false,
+      });
+    });
+
+    it('returns error on LIST_TAGS_ERROR', () => {
+      expect(reducer({}, { type: LIST_TAGS_ERROR })).toEqual({
+        loading: false,
+        error: true,
+      });
+    });
+
+    it('returns provided tags as filtered and regular tags on LIST_TAGS', () => {
+      const tags = [ 'foo', 'bar', 'baz' ];
+
+      expect(reducer({}, { type: LIST_TAGS, tags })).toEqual({
+        tags,
+        filteredTags: tags,
+        loading: false,
+        error: false,
+      });
+    });
+
+    it('removes provided tag from filtered and regular tags on TAG_DELETED', () => {
+      const tags = [ 'foo', 'bar', 'baz' ];
+      const tag = 'foo';
+      const expectedTags = [ 'bar', 'baz' ];
+
+      expect(reducer({ tags, filteredTags: tags }, { type: TAG_DELETED, tag })).toEqual({
+        tags: expectedTags,
+        filteredTags: expectedTags,
+      });
+    });
+
+    it('renames provided tag from filtered and regular tags on TAG_EDITED', () => {
+      const tags = [ 'foo', 'bar', 'baz' ];
+      const oldName = 'bar';
+      const newName = 'renamed';
+      const expectedTags = [ 'foo', 'renamed', 'baz' ].sort();
+
+      expect(reducer({ tags, filteredTags: tags }, { type: TAG_EDITED, oldName, newName })).toEqual({
+        tags: expectedTags,
+        filteredTags: expectedTags,
+      });
+    });
+
+    it('filters original list of tags by provided search term on FILTER_TAGS', () => {
+      const tags = [ 'foo', 'bar', 'baz', 'foo2', 'fo' ];
+      const searchTerm = 'fo';
+      const filteredTags = [ 'foo', 'foo2', 'fo' ];
+
+      expect(reducer({ tags }, { type: FILTER_TAGS, searchTerm })).toEqual({
+        tags,
+        filteredTags,
+      });
+    });
+  });
+
+  describe('filterTags', () =>
+    it('creates expected action', () => expect(filterTags('foo')).toEqual({ type: FILTER_TAGS, searchTerm: 'foo' })));
+
+  describe('listTags', () => {
+    const dispatch = jest.fn();
+    const getState = jest.fn(() => ({}));
+    const buildShlinkApiClient = jest.fn();
+    const listTagsMock = jest.fn();
+
+    afterEach(() => {
+      dispatch.mockReset();
+      getState.mockClear();
+      buildShlinkApiClient.mockReset();
+      listTagsMock.mockReset();
+    });
+
+    const assertNoAction = async (tagsList) => {
+      getState.mockReturnValue({ tagsList });
+
+      await listTags(buildShlinkApiClient, false)()(dispatch, getState);
+
+      expect(buildShlinkApiClient).not.toHaveBeenCalled();
+      expect(dispatch).not.toHaveBeenCalled();
+      expect(getState).toHaveBeenCalledTimes(1);
+    };
+
+    it('does nothing when loading', async () => await assertNoAction({ loading: true }));
+    it('does nothing when list is not empty', async () => await assertNoAction({ loading: false, tags: [ 'foo', 'bar' ] }));
+
+    it('dispatches loaded lists when no error occurs', async () => {
+      const tags = [ 'foo', 'bar', 'baz' ];
+
+      listTagsMock.mockResolvedValue(tags);
+      buildShlinkApiClient.mockResolvedValue({ listTags: listTagsMock });
+
+      await listTags(buildShlinkApiClient, true)()(dispatch, getState);
+
+      expect(buildShlinkApiClient).toHaveBeenCalledTimes(1);
+      expect(getState).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: LIST_TAGS_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: LIST_TAGS, tags });
+    });
+
+    const assertErrorResult = async () => {
+      await listTags(buildShlinkApiClient, true)()(dispatch, getState);
+
+      expect(buildShlinkApiClient).toHaveBeenCalledTimes(1);
+      expect(getState).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: LIST_TAGS_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: LIST_TAGS_ERROR });
+    };
+
+    it('dispatches error when error occurs on list call', async () => {
+      listTagsMock.mockRejectedValue(new Error());
+      buildShlinkApiClient.mockResolvedValue({ listTags: listTagsMock });
+
+      await assertErrorResult();
+
+      expect(listTagsMock).toHaveBeenCalledTimes(1);
+    });
+
+    it('dispatches error when error occurs on build call', async () => {
+      buildShlinkApiClient.mockRejectedValue(new Error());
+
+      await assertErrorResult();
+
+      expect(listTagsMock).not.toHaveBeenCalled();
+    });
+  });
+});

test/utils/Checkbox.test.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Checkbox from '../../src/utils/Checkbox';
+
+describe('<Checkbox />', () => {
+  let wrapped;
+
+  const createComponent = (props = {}) => {
+    wrapped = mount(<Checkbox {...props} />);
+
+    return wrapped;
+  };
+
+  afterEach(() => wrapped && wrapped.unmount());
+
+  it('includes extra class names when provided', () => {
+    const classNames = [ 'foo', 'bar', 'baz' ];
+    const checked = false;
+    const onChange = () => {};
+
+    expect.assertions(classNames.length);
+    classNames.forEach((className) => {
+      const wrapped = createComponent({ className, checked, onChange });
+
+      expect(wrapped.prop('className')).toContain(className);
+    });
+  });
+
+  it('marks input as checked if defined', () => {
+    const checkeds = [ true, false ];
+    const onChange = () => {};
+
+    expect.assertions(checkeds.length);
+    checkeds.forEach((checked) => {
+      const wrapped = createComponent({ checked, onChange });
+      const input = wrapped.find('input');
+
+      expect(input.prop('checked')).toEqual(checked);
+    });
+  });
+
+  it('renders provided children inside the label', () => {
+    const labels = [ 'foo', 'bar', 'baz' ];
+    const checked = false;
+    const onChange = () => {};
+
+    expect.assertions(labels.length);
+    labels.forEach((children) => {
+      const wrapped = createComponent({ children, checked, onChange });
+      const label = wrapped.find('label');
+
+      expect(label.text()).toEqual(children);
+    });
+  });
+
+  it('changes checked status on input change', () => {
+    const onChange = jest.fn();
+    const e = { target: { checked: false } };
+    const wrapped = createComponent({ checked: true, onChange });
+    const input = wrapped.find('input');
+
+    input.prop('onChange')(e);
+
+    expect(onChange).toHaveBeenCalledWith(false, e);
+  });
+});

test/utils/SortingDropdown.test.js

@@ -4,7 +4,6 @@ import { DropdownItem } from 'reactstrap';
 import { identity, values } from 'ramda';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSortAmountDown as caretDownIcon } from '@fortawesome/free-solid-svg-icons';
-import * as sinon from 'sinon';
 import SortingDropdown from '../../src/utils/SortingDropdown';
 
 describe('<SortingDropdown />', () => {
@@ -44,35 +43,35 @@ describe('<SortingDropdown />', () => {
   });
 
   it('triggers change function when item is clicked and no order field was provided', () => {
-    const onChange = sinon.spy();
+    const onChange = jest.fn();
     const wrapper = createWrapper({ onChange });
     const firstItem = wrapper.find(DropdownItem).first();
 
     firstItem.simulate('click');
 
-    expect(onChange.callCount).toEqual(1);
-    expect(onChange.calledWith('foo', 'ASC')).toEqual(true);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('foo', 'ASC');
   });
 
   it('triggers change function when item is clicked and an order field was provided', () => {
-    const onChange = sinon.spy();
+    const onChange = jest.fn();
     const wrapper = createWrapper({ onChange, orderField: 'baz', orderDir: 'ASC' });
     const firstItem = wrapper.find(DropdownItem).first();
 
     firstItem.simulate('click');
 
-    expect(onChange.callCount).toEqual(1);
-    expect(onChange.calledWith('foo', 'ASC')).toEqual(true);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('foo', 'ASC');
   });
 
   it('updates order dir when already selected item is clicked', () => {
-    const onChange = sinon.spy();
+    const onChange = jest.fn();
     const wrapper = createWrapper({ onChange, orderField: 'foo', orderDir: 'ASC' });
     const firstItem = wrapper.find(DropdownItem).first();
 
     firstItem.simulate('click');
 
-    expect(onChange.callCount).toEqual(1);
-    expect(onChange.calledWith('foo', 'DESC')).toEqual(true);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('foo', 'DESC');
   });
 });

test/utils/services/ColorGenerator.test.js

@@ -1,16 +1,15 @@
-import * as sinon from 'sinon';
 import ColorGenerator from '../../../src/utils/services/ColorGenerator';
 
 describe('ColorGenerator', () => {
   let colorGenerator;
   const storageMock = {
-    set: sinon.fake(),
-    get: sinon.fake.returns(undefined),
+    set: jest.fn(),
+    get: jest.fn(),
   };
 
   beforeEach(() => {
-    storageMock.set.resetHistory();
-    storageMock.get.resetHistory();
+    storageMock.set.mockReset();
+    storageMock.get.mockReset();
 
     colorGenerator = new ColorGenerator(storageMock);
   });
@@ -21,14 +20,14 @@ describe('ColorGenerator', () => {
     colorGenerator.setColorForKey('foo', color);
 
     expect(colorGenerator.getColorForKey('foo')).toEqual(color);
-    expect(storageMock.set.callCount).toEqual(1);
-    expect(storageMock.get.callCount).toEqual(1);
+    expect(storageMock.set).toHaveBeenCalledTimes(1);
+    expect(storageMock.get).toHaveBeenCalledTimes(1);
   });
 
   it('generates a random color when none is available for requested key', () => {
     expect(colorGenerator.getColorForKey('bar')).toEqual(expect.stringMatching(/^#(?:[0-9a-fA-F]{6})$/));
-    expect(storageMock.set.callCount).toEqual(1);
-    expect(storageMock.get.callCount).toEqual(1);
+    expect(storageMock.set).toHaveBeenCalledTimes(1);
+    expect(storageMock.get).toHaveBeenCalledTimes(1);
   });
 
   it('trims and lower cases keys before trying to match', () => {
@@ -42,7 +41,7 @@ describe('ColorGenerator', () => {
     expect(colorGenerator.getColorForKey('FOO')).toEqual(color);
     expect(colorGenerator.getColorForKey('FOO  ')).toEqual(color);
     expect(colorGenerator.getColorForKey(' FoO  ')).toEqual(color);
-    expect(storageMock.set.callCount).toEqual(1);
-    expect(storageMock.get.callCount).toEqual(1);
+    expect(storageMock.set).toHaveBeenCalledTimes(1);
+    expect(storageMock.get).toHaveBeenCalledTimes(1);
   });
 });

test/utils/services/ShlinkApiClient.test.js

@@ -1,5 +1,3 @@
-import sinon from 'sinon';
-import { head, last } from 'ramda';
 import ShlinkApiClient from '../../../src/utils/services/ShlinkApiClient';
 
 describe('ShlinkApiClient', () => {
@@ -35,23 +33,21 @@ describe('ShlinkApiClient', () => {
     });
 
     it('removes all empty options', async () => {
-      const axiosSpy = sinon.spy(createAxiosMock({ data: shortUrl }));
+      const axiosSpy = jest.fn(createAxiosMock({ data: shortUrl }));
       const { createShortUrl } = new ShlinkApiClient(axiosSpy);
 
       await createShortUrl(
         { foo: 'bar', empty: undefined, anotherEmpty: null }
       );
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
-      expect(axiosArgs.data).toEqual({ foo: 'bar' });
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({ data: { foo: 'bar' } }));
     });
   });
 
   describe('getShortUrlVisits', () => {
     it('properly returns short URL visits', async () => {
       const expectedVisits = [ 'foo', 'bar' ];
-      const axiosSpy = sinon.spy(createAxiosMock({
+      const axiosSpy = jest.fn(createAxiosMock({
         data: {
           visits: {
             data: expectedVisits,
@@ -61,55 +57,55 @@ describe('ShlinkApiClient', () => {
       const { getShortUrlVisits } = new ShlinkApiClient(axiosSpy);
 
       const actualVisits = await getShortUrlVisits('abc123', {});
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
       expect({ data: expectedVisits }).toEqual(actualVisits);
-      expect(axiosArgs.url).toContain('/short-urls/abc123/visits');
-      expect(axiosArgs.method).toEqual('GET');
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+        url: '/short-urls/abc123/visits',
+        method: 'GET',
+      }));
     });
   });
 
   describe('getShortUrl', () => {
     it('properly returns short URL', async () => {
       const expectedShortUrl = { foo: 'bar' };
-      const axiosSpy = sinon.spy(createAxiosMock({
+      const axiosSpy = jest.fn(createAxiosMock({
         data: expectedShortUrl,
       }));
       const { getShortUrl } = new ShlinkApiClient(axiosSpy);
 
       const result = await getShortUrl('abc123');
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
       expect(expectedShortUrl).toEqual(result);
-      expect(axiosArgs.url).toContain('/short-urls/abc123');
-      expect(axiosArgs.method).toEqual('GET');
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+        url: '/short-urls/abc123',
+        method: 'GET',
+      }));
     });
   });
 
   describe('updateShortUrlTags', () => {
     it('properly updates short URL tags', async () => {
       const expectedTags = [ 'foo', 'bar' ];
-      const axiosSpy = sinon.spy(createAxiosMock({
+      const axiosSpy = jest.fn(createAxiosMock({
         data: { tags: expectedTags },
       }));
       const { updateShortUrlTags } = new ShlinkApiClient(axiosSpy);
 
       const result = await updateShortUrlTags('abc123', expectedTags);
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
       expect(expectedTags).toEqual(result);
-      expect(axiosArgs.url).toContain('/short-urls/abc123/tags');
-      expect(axiosArgs.method).toEqual('PUT');
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+        url: '/short-urls/abc123/tags',
+        method: 'PUT',
+      }));
     });
   });
 
   describe('listTags', () => {
     it('properly returns list of tags', async () => {
       const expectedTags = [ 'foo', 'bar' ];
-      const axiosSpy = sinon.spy(createAxiosMock({
+      const axiosSpy = jest.fn(createAxiosMock({
         data: {
           tags: { data: expectedTags },
         },
@@ -117,28 +113,25 @@ describe('ShlinkApiClient', () => {
       const { listTags } = new ShlinkApiClient(axiosSpy);
 
       const result = await listTags();
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
       expect(expectedTags).toEqual(result);
-      expect(axiosArgs.url).toContain('/tags');
-      expect(axiosArgs.method).toEqual('GET');
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({ url: '/tags', method: 'GET' }));
     });
   });
 
   describe('deleteTags', () => {
     it('properly deletes provided tags', async () => {
       const tags = [ 'foo', 'bar' ];
-      const axiosSpy = sinon.spy(createAxiosMock({}));
+      const axiosSpy = jest.fn(createAxiosMock({}));
       const { deleteTags } = new ShlinkApiClient(axiosSpy);
 
       await deleteTags(tags);
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
-      expect(axiosArgs.url).toContain('/tags');
-      expect(axiosArgs.method).toEqual('DELETE');
-      expect(axiosArgs.params).toEqual({ tags });
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+        url: '/tags',
+        method: 'DELETE',
+        params: { tags },
+      }));
     });
   });
 
@@ -146,30 +139,30 @@ describe('ShlinkApiClient', () => {
     it('properly edits provided tag', async () => {
       const oldName = 'foo';
       const newName = 'bar';
-      const axiosSpy = sinon.spy(createAxiosMock({}));
+      const axiosSpy = jest.fn(createAxiosMock({}));
       const { editTag } = new ShlinkApiClient(axiosSpy);
 
       await editTag(oldName, newName);
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
-      expect(axiosArgs.url).toContain('/tags');
-      expect(axiosArgs.method).toEqual('PUT');
-      expect(axiosArgs.data).toEqual({ oldName, newName });
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+        url: '/tags',
+        method: 'PUT',
+        data: { oldName, newName },
+      }));
     });
   });
 
   describe('deleteShortUrl', () => {
     it('properly deletes provided short URL', async () => {
-      const axiosSpy = sinon.spy(createAxiosMock({}));
+      const axiosSpy = jest.fn(createAxiosMock({}));
       const { deleteShortUrl } = new ShlinkApiClient(axiosSpy);
 
       await deleteShortUrl('abc123');
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
-      expect(axiosArgs.url).toContain('/short-urls/abc123');
-      expect(axiosArgs.method).toEqual('DELETE');
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+        url: '/short-urls/abc123',
+        method: 'DELETE',
+      }));
     });
   });
 });

test/utils/services/ShlinkApiClientBuilder.test.js

@@ -1,23 +1,33 @@
 import buildShlinkApiClient from '../../../src/utils/services/ShlinkApiClientBuilder';
 
 describe('ShlinkApiClientBuilder', () => {
-  const builder = buildShlinkApiClient({});
+  const createBuilder = () => {
+    const builder = buildShlinkApiClient({});
 
-  it('creates new instances when provided params are different', () => {
-    const firstApiClient = builder({ url: 'foo', apiKey: 'bar' });
-    const secondApiClient = builder({ url: 'bar', apiKey: 'bar' });
-    const thirdApiClient = builder({ url: 'bar', apiKey: 'foo' });
+    return (selectedServer) => builder(() => ({ selectedServer }));
+  };
+
+  it('creates new instances when provided params are different', async () => {
+    const builder = createBuilder();
+    const [ firstApiClient, secondApiClient, thirdApiClient ] = await Promise.all([
+      builder({ url: 'foo', apiKey: 'bar' }),
+      builder({ url: 'bar', apiKey: 'bar' }),
+      builder({ url: 'bar', apiKey: 'foo' }),
+    ]);
 
     expect(firstApiClient).not.toBe(secondApiClient);
     expect(firstApiClient).not.toBe(thirdApiClient);
     expect(secondApiClient).not.toBe(thirdApiClient);
   });
 
-  it('returns existing instances when provided params are the same', () => {
-    const params = { url: 'foo', apiKey: 'bar' };
-    const firstApiClient = builder(params);
-    const secondApiClient = builder(params);
-    const thirdApiClient = builder(params);
+  it('returns existing instances when provided params are the same', async () => {
+    const builder = createBuilder();
+    const selectedServer = { url: 'foo', apiKey: 'bar' };
+    const [ firstApiClient, secondApiClient, thirdApiClient ] = await Promise.all([
+      builder(selectedServer),
+      builder(selectedServer),
+      builder(selectedServer),
+    ]);
 
     expect(firstApiClient).toBe(secondApiClient);
     expect(firstApiClient).toBe(thirdApiClient);

test/utils/services/Storage.test.js

@@ -1,16 +1,15 @@
-import * as sinon from 'sinon';
 import Storage from '../../../src/utils/services/Storage';
 
 describe('Storage', () => {
   const localStorageMock = {
-    getItem: sinon.fake((key) => key === 'shlink.foo' ? JSON.stringify({ foo: 'bar' }) : null),
-    setItem: sinon.spy(),
+    getItem: jest.fn((key) => key === 'shlink.foo' ? JSON.stringify({ foo: 'bar' }) : null),
+    setItem: jest.fn(),
   };
   let storage;
 
   beforeEach(() => {
-    localStorageMock.getItem.resetHistory();
-    localStorageMock.setItem.resetHistory();
+    localStorageMock.getItem.mockClear();
+    localStorageMock.setItem.mockReset();
 
     storage = new Storage(localStorageMock);
   });
@@ -21,18 +20,15 @@ describe('Storage', () => {
 
       storage.set('foo', value);
 
-      expect(localStorageMock.setItem.callCount).toEqual(1);
-      expect(localStorageMock.setItem.getCall(0).args).toEqual([
-        'shlink.foo',
-        JSON.stringify(value),
-      ]);
+      expect(localStorageMock.setItem).toHaveBeenCalledTimes(1);
+      expect(localStorageMock.setItem).toHaveBeenCalledWith('shlink.foo', JSON.stringify(value));
     });
   });
 
   describe('get', () => {
     it('fetches item from local storage', () => {
       storage.get('foo');
-      expect(localStorageMock.getItem.callCount).toEqual(1);
+      expect(localStorageMock.getItem).toHaveBeenCalledTimes(1);
     });
 
     it('returns parsed value when requested value is found in local storage', () => {

test/utils/utils.test.js

@@ -1,26 +1,30 @@
-import * as sinon from 'sinon';
 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 { stateFlagTimeout as stateFlagTimeoutFactory, determineOrderDir, fixLeafletIcons } from '../../src/utils/utils';
+import {
+  stateFlagTimeout as stateFlagTimeoutFactory,
+  determineOrderDir,
+  fixLeafletIcons,
+  rangeOf,
+  roundTen,
+} from '../../src/utils/utils';
 
 describe('utils', () => {
   describe('stateFlagTimeout', () => {
     it('sets state and initializes timeout with provided delay', () => {
-      const setTimeout = sinon.fake((callback) => callback());
-      const setState = sinon.spy();
+      const setTimeout = jest.fn((callback) => callback());
+      const setState = jest.fn();
       const stateFlagTimeout = stateFlagTimeoutFactory(setTimeout);
       const delay = 5000;
-      const expectedSetStateCalls = 2;
 
       stateFlagTimeout(setState, 'foo', false, delay);
 
-      expect(setState.callCount).toEqual(expectedSetStateCalls);
-      expect(setState.getCall(0).args).toEqual([{ foo: false }]);
-      expect(setState.getCall(1).args).toEqual([{ foo: true }]);
-      expect(setTimeout.callCount).toEqual(1);
-      expect(setTimeout.getCall(0).args[1]).toEqual(delay);
+      expect(setState).toHaveBeenCalledTimes(2);
+      expect(setState).toHaveBeenNthCalledWith(1, { foo: false });
+      expect(setState).toHaveBeenNthCalledWith(2, { foo: true });
+      expect(setTimeout).toHaveBeenCalledTimes(1);
+      expect(setTimeout).toHaveBeenCalledWith(expect.anything(), delay);
     });
   });
 
@@ -57,4 +61,46 @@ describe('utils', () => {
       expect(shadowUrl).toEqual(markerShadow);
     });
   });
+
+  describe('rangeOf', () => {
+    const func = (i) => `result_${i}`;
+    const size = 5;
+
+    it('builds a range of specified size invike provided function', () => {
+      expect(rangeOf(size, func)).toEqual([
+        'result_1',
+        'result_2',
+        'result_3',
+        'result_4',
+        'result_5',
+      ]);
+    });
+
+    it('builds a range starting at provided pos', () => {
+      const startAt = 3;
+
+      expect(rangeOf(size, func, startAt)).toEqual([
+        'result_3',
+        'result_4',
+        'result_5',
+      ]);
+    });
+  });
+
+  describe('roundTen', () => {
+    it('rounds provided number to the next multiple of ten', () => {
+      const expectationsPairs = [
+        [ 10, 10 ],
+        [ 12, 20 ],
+        [ 158, 160 ],
+        [ 5, 10 ],
+        [ -42, -40 ],
+      ];
+
+      expect.assertions(expectationsPairs.length);
+      expectationsPairs.forEach(([ number, expected ]) => {
+        expect(roundTen(number)).toEqual(expected);
+      });
+    });
+  });
 });