Updated changelog

Created tags list reducer test

.dockerignore

@@ -1,4 +1,6 @@
+./.github
 ./build
+./coverage
 ./dist
 ./node_modules
 ./test

.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

@@ -1,24 +1,16 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
 # dependencies
 /node_modules
-package-lock.json
 
 # testing
 /coverage
+/.stryker-tmp
+/reports
 
 # production
 /build
 
-# misc
-.DS_Store
-.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,29 +1,34 @@
 language: node_js
 
-sudo: false
-
 node_js:
-  - "stable"
+  - "10.15.3"
 
 cache:
-  yarn: true
   directories:
     - node_modules
 
+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 yarn build ; fi
+  - 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,135 @@ 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
+
+* *Nothing*
+
+#### Changed
+
+* [#106](https://github.com/shlinkio/shlink-web-client/issues/106) Reduced size of docker image by using a multi-stage build Dockerfile.
+* [#95](https://github.com/shlinkio/shlink-web-client/issues/95) Tested docker image build during travis executions.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#104](https://github.com/shlinkio/shlink-web-client/issues/104) Fixed blank page being showed when not-found paths are loaded.
+* [#94](https://github.com/shlinkio/shlink-web-client/issues/94) Fixed initial zoom and center on maps.
+* [#93](https://github.com/shlinkio/shlink-web-client/issues/93) Prevented side menu to be swipeable while a modal window is displayed.
+
+
+## 2.0.0 - 2019-01-13
+
+#### Added
+
+* [#54](https://github.com/shlinkio/shlink-web-client/issues/54) Added stats by city graphic in visits page.
+* [#55](https://github.com/shlinkio/shlink-web-client/issues/55) Added map in visits page locating cities from which visits have occurred.
+
+#### Changed
+
+* [#87](https://github.com/shlinkio/shlink-web-client/issues/87) and [#89](https://github.com/shlinkio/shlink-web-client/issues/89) Updated all dependencies to latest major versions.
+* [#96](https://github.com/shlinkio/shlink-web-client/issues/96) Updated visits page to load visits in multiple paginated requests of `5000` visits when used shlink server supports it. This will prevent shlink to hang when trying to load big amounts of visits.
+* [#71](https://github.com/shlinkio/shlink-web-client/issues/71) Improved tests and increased code coverage.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* [#59](https://github.com/shlinkio/shlink-web-client/issues/59) Dropped support for old browsers. Internet explorer and dead browsers are no longer supported.
+* [#97](https://github.com/shlinkio/shlink-web-client/issues/97) Dropped support for authentication via `Authorization` header with Bearer type and JWT, which will make this version no longer work with shlink earlier than v1.13.0.
+
+#### Fixed
+
+* *Nothing*
+
+
 ## 1.2.1 - 2018-12-21
 
 #### Added

Dockerfile

@@ -1,21 +1,8 @@
-FROM nginx:1.15.7-alpine
-MAINTAINER Alejandro Celaya <alejandro@alejandrocelaya.com>
+FROM node:10.15.3-alpine as node
+COPY . /shlink-web-client
+RUN cd /shlink-web-client && npm install && npm run build
 
-# Install node and yarn
-RUN apk add --no-cache --virtual nodejs && apk add --no-cache --virtual yarn
-
-ADD . ./shlink-web-client
-
-# Install dependencies and build project
-RUN cd ./shlink-web-client && \
-    yarn install && \
-    yarn build && \
-
-    # Move build contents to document root
-    cd .. && \
-    rm -r /usr/share/nginx/html/* && \
-    mv ./shlink-web-client/build/* /usr/share/nginx/html && \
-    rm -r ./shlink-web-client && \
-
-    # Delete and uninstall build tools
-    yarn cache clean && apk del yarn && apk del nodejs
+FROM nginx:1.15.9-alpine
+LABEL maintainer="Alejandro Celaya <alejandro@alejandrocelaya.com>"
+RUN rm -r /usr/share/nginx/html
+COPY --from=node /shlink-web-client/build /usr/share/nginx/html

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 shlinkio
+Copyright (c) 2018-2019 shlinkio
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,6 +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/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)
@@ -13,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.
 
@@ -23,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`.

config/env.js

@@ -43,12 +43,12 @@ dotenvFiles.forEach((dotenvFile) => {
 
 // We support resolving modules according to `NODE_PATH`.
 // This lets you use absolute paths in imports inside large monorepos:
-// https://github.com/facebookincubator/create-react-app/issues/253.
+// https://github.com/facebook/create-react-app/issues/253.
 // It works similar to `NODE_PATH` in Node itself:
 // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
 // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
 // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
-// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
 // We also resolve them to make sure all tools using them work consistently.
 const appDirectory = fs.realpathSync(process.cwd());
 

config/jest/fileTransform.js

@@ -6,6 +6,24 @@ const path = require('path');
 
 module.exports = {
   process(src, filename) {
-    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      return `module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: (props) => ({
+          $$typeof: Symbol.for('react.element'),
+          type: 'svg',
+          ref: null,
+          key: null,
+          props: Object.assign({}, props, {
+            children: ${assetFilename}
+          })
+        }),
+      };`;
+    }
+
+    return `module.exports = ${assetFilename};`;
   },
 };

config/paths.js

@@ -4,22 +4,22 @@ const fs = require('fs');
 const url = require('url');
 
 // Make sure any symlinks in the project folder are resolved:
-// https://github.com/facebookincubator/create-react-app/issues/637
+// https://github.com/facebook/create-react-app/issues/637
 const appDirectory = fs.realpathSync(process.cwd());
 const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
 
 const envPublicUrl = process.env.PUBLIC_URL;
 
-function ensureSlash(path, needsSlash) {
-  const hasSlash = path.endsWith('/');
+function ensureSlash(inputPath, needsSlash) {
+  const hasSlash = inputPath.endsWith('/');
 
   if (hasSlash && !needsSlash) {
-    return path.substr(path, path.length - 1);
+    return inputPath.substr(0, inputPath.length - 1);
   } else if (!hasSlash && needsSlash) {
-    return `${path}/`;
+    return `${inputPath}/`;
   }
 
-  return path;
+  return inputPath;
 }
 
 const getPublicUrl = (appPackageJson) =>
@@ -33,23 +33,55 @@ const getPublicUrl = (appPackageJson) =>
 // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
 function getServedPath(appPackageJson) {
   const publicUrl = getPublicUrl(appPackageJson);
-  const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
+  const servedUrl =
+    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
 
   return ensureSlash(servedUrl, true);
 }
 
+const moduleFileExtensions = [
+  'web.mjs',
+  'mjs',
+  'web.js',
+  'js',
+  'web.ts',
+  'ts',
+  'web.tsx',
+  'tsx',
+  'json',
+  'web.jsx',
+  'jsx',
+];
+
+// Resolve file paths in the same order as webpack
+const resolveModule = (resolveFn, filePath) => {
+  const extension = moduleFileExtensions.find((extension) =>
+    fs.existsSync(resolveFn(`${filePath}.${extension}`)));
+
+  if (extension) {
+    return resolveFn(`${filePath}.${extension}`);
+  }
+
+  return resolveFn(`${filePath}.js`);
+};
+
 // config after eject: we're in ./config/
 module.exports = {
   dotenv: resolveApp('.env'),
+  appPath: resolveApp('.'),
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveApp('src/index.js'),
+  appIndexJs: resolveModule(resolveApp, 'src/index'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
+  appTsConfig: resolveApp('tsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),
-  testsSetup: resolveApp('src/setupTests.js'),
+  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
+  proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
   servedPath: getServedPath(resolveApp('package.json')),
 };
+
+module.exports.moduleFileExtensions = moduleFileExtensions;

config/polyfills.js

@@ -1,21 +0,0 @@
-
-if (typeof Promise === 'undefined') {
-  // Rejection tracking prevents a common issue where React gets into an
-  // inconsistent state due to an error, but it gets swallowed by a Promise,
-  // and the user has no idea what causes React's erratic future behavior.
-  require('promise/lib/rejection-tracking').enable();
-  window.Promise = require('promise/lib/es6-extensions.js');
-}
-
-// fetch() polyfill for making API calls.
-require('whatwg-fetch');
-
-// Object.assign() is commonly used with React.
-// It will use the native implementation if it's present and isn't buggy.
-Object.assign = require('object-assign');
-
-// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
-// We don't polyfill it in the browser--this is user's responsibility.
-if (process.env.NODE_ENV === 'test') {
-  require('raf').polyfill(global);
-}

config/webpack.config.dev.js

@@ -1,308 +0,0 @@
-
-const path = require('path');
-const autoprefixer = require('autoprefixer');
-const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
-const eslintFormatter = require('react-dev-utils/eslintFormatter');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const getClientEnvironment = require('./env');
-const paths = require('./paths');
-
-// Webpack uses `publicPath` to determine where the app is being served from.
-// In development, we always serve from the root. This makes config easier.
-const publicPath = '/';
-
-// `publicUrl` is just like `publicPath`, but we will provide it to our app
-// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
-const publicUrl = '';
-
-// Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
-
-const postCssLoader = {
-  loader: require.resolve('postcss-loader'),
-  options: {
-
-    // Necessary for external CSS imports to work
-    // https://github.com/facebookincubator/create-react-app/issues/2677
-    ident: 'postcss',
-    plugins: () => [
-      require('postcss-flexbugs-fixes'),
-      autoprefixer({
-        browsers: [
-          '>1%',
-          'last 4 versions',
-          'Firefox ESR',
-          'not ie < 9',
-        ],
-        flexbox: 'no-2009',
-      }),
-    ],
-  },
-};
-
-// This is the development configuration.
-// It is focused on developer experience and fast rebuilds.
-// The production configuration is different and lives in a separate file.
-module.exports = {
-
-  // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
-  // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
-  devtool: 'cheap-module-source-map',
-
-  // These are the "entry points" to our application.
-  // This means they will be the "root" imports that are included in JS bundle.
-  // The first two entry points enable "hot" CSS and auto-refreshes for JS.
-  entry: [
-
-    // We ship a few polyfills by default:
-    require.resolve('./polyfills'),
-
-    // Include an alternative client for WebpackDevServer. A client's job is to
-    // connect to WebpackDevServer by a socket and get notified about changes.
-    // When you save a file, the client will either apply hot updates (in case
-    // of CSS changes), or refresh the page (in case of JS changes). When you
-    // make a syntax error, this client will display a syntax error overlay.
-    // Note: instead of the default WebpackDevServer client, we use a custom one
-    // to bring better experience for Create React App users. You can replace
-    // the line below with these two lines if you prefer the stock client:
-    // require.resolve('webpack-dev-server/client') + '?/',
-    // require.resolve('webpack/hot/dev-server'),
-    require.resolve('react-dev-utils/webpackHotDevClient'),
-
-    // Finally, this is your app's code:
-    paths.appIndexJs,
-
-    // We include the app code last so that if there is a runtime error during
-    // initialization, it doesn't blow up the WebpackDevServer client, and
-    // changing JS code would still trigger a refresh.
-  ],
-  output: {
-
-    // Add /* filename */ comments to generated require()s in the output.
-    pathinfo: true,
-
-    // This does not produce a real file. It's just the virtual path that is
-    // served by WebpackDevServer in development. This is the JS bundle
-    // containing code from all our entry points, and the Webpack runtime.
-    filename: 'static/js/bundle.js',
-
-    // There are also additional JS chunk files if you use code splitting.
-    chunkFilename: 'static/js/[name].chunk.js',
-
-    // This is the URL that app is served from. We use "/" in development.
-    publicPath,
-
-    // Point sourcemap entries to original disk location (format as URL on Windows)
-    devtoolModuleFilenameTemplate: (info) =>
-      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
-  },
-  resolve: {
-
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We placed these paths second because we want `node_modules` to "win"
-    // if there are any conflicts. This matches Node resolution mechanism.
-    // https://github.com/facebookincubator/create-react-app/issues/253
-    modules: [ 'node_modules', paths.appNodeModules ].concat(
-
-      // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
-
-    // These are the reasonable defaults supported by the Node ecosystem.
-    // We also include JSX as a common component filename extension to support
-    // some tools, although we do not recommend using it, see:
-    // https://github.com/facebookincubator/create-react-app/issues/290
-    // `web` extension prefixes have been added for better support
-    // for React Native Web.
-    extensions: [ '.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx' ],
-    alias: {
-
-      // Support React Native Web
-      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web',
-    },
-    plugins: [
-
-      // Prevents users from importing files from outside of src/ (or node_modules/).
-      // This often causes confusion because we only process files within src/ with babel.
-      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-      // please link the files into your node_modules/ and let module-resolution kick in.
-      // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrc, [ paths.appPackageJson ]),
-    ],
-  },
-  module: {
-    strictExportPresence: true,
-    rules: [
-
-      // TODO: Disable require.ensure as it's not a standard language feature.
-      // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
-      // { parser: { requireEnsure: false } },
-
-      // First, run the linter.
-      // It's important to do this before Babel processes the JS.
-      {
-        test: /\.(js|jsx|mjs)$/,
-        enforce: 'pre',
-        use: [
-          {
-            options: {
-              formatter: eslintFormatter,
-              eslintPath: require.resolve('eslint'),
-
-            },
-            loader: require.resolve('eslint-loader'),
-          },
-        ],
-        include: paths.appSrc,
-      },
-      {
-
-        // "oneOf" will traverse all following loaders until one will
-        // match the requirements. When no loader matches it will fall
-        // back to the "file" loader at the end of the loader list.
-        oneOf: [
-
-          // "url" loader works like "file" loader except that it embeds assets
-          // smaller than specified limit in bytes as data URLs to avoid requests.
-          // A missing `test` is equivalent to a match.
-          {
-            test: [ /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/ ],
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000,
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-
-          // Process JS with Babel.
-          {
-            test: /\.(js|jsx|mjs)$/,
-            include: paths.appSrc,
-            loader: require.resolve('babel-loader'),
-            options: {
-
-              // This is a feature of `babel-loader` for webpack (not Babel itself).
-              // It enables caching results in ./node_modules/.cache/babel-loader/
-              // directory for faster rebuilds.
-              cacheDirectory: true,
-            },
-          },
-
-          // "postcss" loader applies autoprefixer to our CSS.
-          // "css" loader resolves paths in CSS and adds assets as dependencies.
-          // "style" loader turns CSS into JS modules that inject <style> tags.
-          // In production, we use a plugin to extract that CSS to a file, but
-          // in development "style" loader enables hot editing of CSS.
-          {
-            test: /\.css$/,
-            use: [
-              require.resolve('style-loader'),
-              {
-                loader: require.resolve('css-loader'),
-                options: {
-                  importLoaders: 1,
-                },
-              },
-              postCssLoader,
-            ],
-          },
-          {
-            test: /\.scss$/,
-            use: ExtractTextPlugin.extract({
-              fallback: 'style-loader',
-              use: [ 'css-loader', 'sass-loader', postCssLoader ],
-            }),
-          },
-
-          // "file" loader makes sure those assets get served by WebpackDevServer.
-          // When you `import` an asset, you get its (virtual) filename.
-          // In production, they would get copied to the `build` folder.
-          // This loader doesn't use a "test" so it will catch all modules
-          // that fall through the other loaders.
-          {
-
-            // Exclude `js` files to keep "css" loader working as it injects
-            // its runtime that would otherwise processed through "file" loader.
-            // Also exclude `html` and `json` extensions so they get processed
-            // by webpacks internal loaders.
-            exclude: [ /\.(js|jsx|mjs)$/, /\.html$/, /\.json$/ ],
-            loader: require.resolve('file-loader'),
-            options: {
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-        ],
-      },
-
-      // ** STOP ** Are you adding a new loader?
-      // Make sure to add the new loader(s) before the "file" loader.
-    ],
-  },
-  plugins: [
-
-    // Makes some environment variables available in index.html.
-    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In development, this will be an empty string.
-    new InterpolateHtmlPlugin(env.raw),
-
-    // Generates an `index.html` file with the <script> injected.
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: paths.appHtml,
-    }),
-
-    // Add module names to factory functions so they appear in browser profiler.
-    new webpack.NamedModulesPlugin(),
-
-    // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
-    new webpack.DefinePlugin(env.stringified),
-
-    // This is necessary to emit hot updates (currently CSS only):
-    new webpack.HotModuleReplacementPlugin(),
-
-    // Watcher doesn't work well if you mistype casing in a path so we use
-    // a plugin that prints an error when you attempt to do this.
-    // See https://github.com/facebookincubator/create-react-app/issues/240
-    new CaseSensitivePathsPlugin(),
-
-    // If you require a missing module and then `npm install` it, you still have
-    // to restart the development server for Webpack to discover it. This plugin
-    // makes the discovery automatic so you don't have to restart.
-    // See https://github.com/facebookincubator/create-react-app/issues/186
-    new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-
-    // Moment.js is an extremely popular library that bundles large locale files
-    // by default due to how Webpack interprets its code. This is a practical
-    // solution that requires the user to opt into importing specific locales.
-    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-    // You can remove this if you don't use Moment.js:
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-    new ExtractTextPlugin('main.css'),
-  ],
-
-  // Some libraries import Node modules but don't use them in the browser.
-  // Tell Webpack to provide empty mocks for them so importing them works.
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty',
-  },
-
-  // Turn off performance hints during development because we don't do any
-  // splitting or minification in interest of speed. These warnings become
-  // cumbersome.
-  performance: {
-    hints: false,
-  },
-};

config/webpack.config.js

@@ -0,0 +1,678 @@
+
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const resolve = require('resolve');
+const PnpWebpackPlugin = require('pnp-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const safePostCssParser = require('postcss-safe-parser');
+const ManifestPlugin = require('webpack-manifest-plugin');
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
+const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
+const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
+const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
+const getClientEnvironment = require('./env');
+const paths = require('./paths');
+
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+
+// Some apps do not need the benefits of saving a web request, so not inlining the chunk
+// makes for a smoother build process.
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+
+// Check if TypeScript is setup
+const useTypeScript = fs.existsSync(paths.appTsConfig);
+
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+// This is the production and development configuration.
+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
+/* eslint-disable complexity */
+module.exports = (webpackEnv) => {
+  const isEnvDevelopment = webpackEnv === 'development';
+  const isEnvProduction = webpackEnv === 'production';
+
+  // Webpack uses `publicPath` to determine where the app is being served from.
+  // It requires a trailing slash, or the file assets will get an incorrect path.
+  // In development, we always serve from the root. This makes config easier.
+  const publicPath = isEnvProduction
+    ? paths.servedPath
+    : isEnvDevelopment && '/';
+
+  // Some apps do not use client-side routing with pushState.
+  // For these, "homepage" can be set to "." to enable relative asset paths.
+  const shouldUseRelativeAssetPaths = publicPath === './';
+
+  // `publicUrl` is just like `publicPath`, but we will provide it to our app
+  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+  const publicUrl = isEnvProduction
+    ? publicPath.slice(0, -1)
+    : isEnvDevelopment && '';
+
+  // Get environment variables to inject into our app.
+  const env = getClientEnvironment(publicUrl);
+
+  // common function to get style loaders
+  const getStyleLoaders = (cssOptions, preProcessor) => {
+    const loaders = [
+      isEnvDevelopment && require.resolve('style-loader'),
+      isEnvProduction && {
+        loader: MiniCssExtractPlugin.loader,
+        options: Object.assign(
+          {},
+          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
+        ),
+      },
+      {
+        loader: require.resolve('css-loader'),
+        options: cssOptions,
+      },
+      {
+
+        // Options for PostCSS as we reference these options twice
+        // Adds vendor prefixing based on your specified browser support in
+        // package.json
+        loader: require.resolve('postcss-loader'),
+        options: {
+
+          // Necessary for external CSS imports to work
+          // https://github.com/facebook/create-react-app/issues/2677
+          ident: 'postcss',
+          plugins: () => [
+            require('postcss-flexbugs-fixes'),
+            require('postcss-preset-env')({
+              autoprefixer: {
+                flexbox: 'no-2009',
+              },
+              stage: 3,
+            }),
+          ],
+          sourceMap: isEnvProduction && shouldUseSourceMap,
+        },
+      },
+    ].filter(Boolean);
+
+    if (preProcessor) {
+      loaders.push({
+        loader: require.resolve(preProcessor),
+        options: {
+          sourceMap: isEnvProduction && shouldUseSourceMap,
+        },
+      });
+    }
+
+    return loaders;
+  };
+
+  return {
+    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
+
+    // Stop compilation early in production
+    bail: isEnvProduction,
+    devtool: isEnvProduction
+      ? shouldUseSourceMap
+        ? 'source-map'
+        : false
+      : isEnvDevelopment && 'cheap-module-source-map',
+
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    entry: [
+
+      // Include an alternative client for WebpackDevServer. A client's job is to
+      // connect to WebpackDevServer by a socket and get notified about changes.
+      // When you save a file, the client will either apply hot updates (in case
+      // of CSS changes), or refresh the page (in case of JS changes). When you
+      // make a syntax error, this client will display a syntax error overlay.
+      // Note: instead of the default WebpackDevServer client, we use a custom one
+      // to bring better experience for Create React App users. You can replace
+      // the line below with these two lines if you prefer the stock client:
+      // require.resolve('webpack-dev-server/client') + '?/',
+      // require.resolve('webpack/hot/dev-server'),
+      isEnvDevelopment &&
+        require.resolve('react-dev-utils/webpackHotDevClient'),
+
+      // Finally, this is your app's code:
+      paths.appIndexJs,
+
+      // We include the app code last so that if there is a runtime error during
+      // initialization, it doesn't blow up the WebpackDevServer client, and
+      // changing JS code would still trigger a refresh.
+    ].filter(Boolean),
+    output: {
+
+      // The build folder.
+      path: isEnvProduction ? paths.appBuild : undefined,
+
+      // Add /* filename */ comments to generated require()s in the output.
+      pathinfo: isEnvDevelopment,
+
+      // There will be one main bundle, and one file per asynchronous chunk.
+      // In development, it does not produce real files.
+      filename: isEnvProduction
+        ? 'static/js/[name].[chunkhash:8].js'
+        : isEnvDevelopment && 'static/js/bundle.js',
+
+      // There are also additional JS chunk files if you use code splitting.
+      chunkFilename: isEnvProduction
+        ? 'static/js/[name].[chunkhash:8].chunk.js'
+        : isEnvDevelopment && 'static/js/[name].chunk.js',
+
+      // We inferred the "public path" (such as / or /my-project) from homepage.
+      // We use "/" in development.
+      publicPath,
+
+      // Point sourcemap entries to original disk location (format as URL on Windows)
+      devtoolModuleFilenameTemplate: isEnvProduction
+        ? (info) =>
+          path
+            .relative(paths.appSrc, info.absoluteResourcePath)
+            .replace(/\\/g, '/')
+        : isEnvDevelopment &&
+          ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+    },
+    optimization: {
+      minimize: isEnvProduction,
+      minimizer: [
+
+        // This is only used in production mode
+        new TerserPlugin({
+          terserOptions: {
+            parse: {
+
+              // we want terser to parse ecma 8 code. However, we don't want it
+              // to apply any minfication steps that turns valid ecma 5 code
+              // into invalid ecma 5 code. This is why the 'compress' and 'output'
+              // sections only apply transformations that are ecma 5 safe
+              // https://github.com/facebook/create-react-app/pull/4234
+              ecma: 8,
+            },
+            compress: {
+              ecma: 5,
+              warnings: false,
+
+              // Disabled because of an issue with Uglify breaking seemingly valid code:
+              // https://github.com/facebook/create-react-app/issues/2376
+              // Pending further investigation:
+              // https://github.com/mishoo/UglifyJS2/issues/2011
+              comparisons: false,
+
+              // Disabled because of an issue with Terser breaking valid code:
+              // https://github.com/facebook/create-react-app/issues/5250
+              // Pending futher investigation:
+              // https://github.com/terser-js/terser/issues/120
+              inline: 2,
+            },
+            mangle: {
+              safari10: true,
+            },
+            output: {
+              ecma: 5,
+              comments: false,
+
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebook/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+
+          // Use multi-process parallel running to improve the build speed
+          // Default number of concurrent runs: os.cpus().length - 1
+          parallel: true,
+
+          // Enable file caching
+          cache: true,
+          sourceMap: shouldUseSourceMap,
+        }),
+
+        // This is only used in production mode
+        new OptimizeCSSAssetsPlugin({
+          cssProcessorOptions: {
+            parser: safePostCssParser,
+            map: shouldUseSourceMap
+              ? {
+
+                // `inline: false` forces the sourcemap to be output into a
+                // separate file
+                inline: false,
+
+                // `annotation: true` appends the sourceMappingURL to the end of
+                // the css file, helping the browser find the sourcemap
+                annotation: true,
+              }
+              : false,
+          },
+        }),
+      ],
+
+      // Automatically split vendor and commons
+      // https://twitter.com/wSokra/status/969633336732905474
+      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+      splitChunks: {
+        chunks: 'all',
+        name: false,
+      },
+
+      // Keep the runtime chunk separated to enable long term caching
+      // https://twitter.com/wSokra/status/969679223278505985
+      runtimeChunk: true,
+    },
+    resolve: {
+
+      // This allows you to set a fallback for where Webpack should look for modules.
+      // We placed these paths second because we want `node_modules` to "win"
+      // if there are any conflicts. This matches Node resolution mechanism.
+      // https://github.com/facebook/create-react-app/issues/253
+      modules: [ 'node_modules' ].concat(
+
+        // It is guaranteed to exist because we tweak it in `env.js`
+        process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
+      ),
+
+      // These are the reasonable defaults supported by the Node ecosystem.
+      // We also include JSX as a common component filename extension to support
+      // some tools, although we do not recommend using it, see:
+      // https://github.com/facebook/create-react-app/issues/290
+      // `web` extension prefixes have been added for better support
+      // for React Native Web.
+      extensions: paths.moduleFileExtensions
+        .map((ext) => `.${ext}`)
+        .filter((ext) => useTypeScript || !ext.includes('ts')),
+      alias: {
+
+        // Support React Native Web
+        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+        'react-native': 'react-native-web',
+      },
+      plugins: [
+
+        // Adds support for installing with Plug'n'Play, leading to faster installs and adding
+        // guards against forgotten dependencies and such.
+        PnpWebpackPlugin,
+
+        // Prevents users from importing files from outside of src/ (or node_modules/).
+        // This often causes confusion because we only process files within src/ with babel.
+        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+        // please link the files into your node_modules/ and let module-resolution kick in.
+        // Make sure your source files are compiled, as they will not be processed in any way.
+        new ModuleScopePlugin(paths.appSrc, [ paths.appPackageJson ]),
+      ],
+    },
+    resolveLoader: {
+      plugins: [
+
+        // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
+        // from the current package.
+        PnpWebpackPlugin.moduleLoader(module),
+      ],
+    },
+    module: {
+      strictExportPresence: true,
+      rules: [
+
+        // Disable require.ensure as it's not a standard language feature.
+        { parser: { requireEnsure: false } },
+
+        // First, run the linter.
+        // It's important to do this before Babel processes the JS.
+        {
+          test: /\.(js|mjs|jsx)$/,
+          enforce: 'pre',
+          use: [
+            {
+              options: {
+                formatter: require.resolve('react-dev-utils/eslintFormatter'),
+                eslintPath: require.resolve('eslint'),
+
+              },
+              loader: require.resolve('eslint-loader'),
+            },
+          ],
+          include: paths.appSrc,
+        },
+        {
+
+          // "oneOf" will traverse all following loaders until one will
+          // match the requirements. When no loader matches it will fall
+          // back to the "file" loader at the end of the loader list.
+          oneOf: [
+
+            // "url" loader works like "file" loader except that it embeds assets
+            // smaller than specified limit in bytes as data URLs to avoid requests.
+            // A missing `test` is equivalent to a match.
+            {
+              test: [ /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/ ],
+              loader: require.resolve('url-loader'),
+              options: {
+                limit: 10000,
+                name: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
+
+            // Process application JS with Babel.
+            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
+            {
+              test: /\.(js|mjs|jsx|ts|tsx)$/,
+              include: paths.appSrc,
+              loader: require.resolve('babel-loader'),
+              options: {
+                customize: require.resolve(
+                  'babel-preset-react-app/webpack-overrides'
+                ),
+
+                plugins: [
+                  [
+                    require.resolve('babel-plugin-named-asset-import'),
+                    {
+                      loaderMap: {
+                        svg: {
+                          ReactComponent:
+                            '@svgr/webpack?-prettier,-svgo![path]',
+                        },
+                      },
+                    },
+                  ],
+                ],
+
+                // This is a feature of `babel-loader` for webpack (not Babel itself).
+                // It enables caching results in ./node_modules/.cache/babel-loader/
+                // directory for faster rebuilds.
+                cacheDirectory: true,
+                cacheCompression: isEnvProduction,
+                compact: isEnvProduction,
+              },
+            },
+
+            // Process any JS outside of the app with Babel.
+            // Unlike the application JS, we only compile the standard ES features.
+            {
+              test: /\.(js|mjs)$/,
+              exclude: /@babel(?:\/|\\{1,2})runtime/,
+              loader: require.resolve('babel-loader'),
+              options: {
+                babelrc: false,
+                configFile: false,
+                compact: false,
+                presets: [
+                  [
+                    require.resolve('babel-preset-react-app/dependencies'),
+                    { helpers: true },
+                  ],
+                ],
+                cacheDirectory: true,
+                cacheCompression: isEnvProduction,
+
+                // If an error happens in a package, it's possible to be
+                // because it was compiled. Thus, we don't want the browser
+                // debugger to show the original code. Instead, the code
+                // being evaluated would be much more helpful.
+                sourceMaps: false,
+              },
+            },
+
+            // "postcss" loader applies autoprefixer to our CSS.
+            // "css" loader resolves paths in CSS and adds assets as dependencies.
+            // "style" loader turns CSS into JS modules that inject <style> tags.
+            // In production, we use MiniCSSExtractPlugin to extract that CSS
+            // to a file, but in development "style" loader enables hot editing
+            // of CSS.
+            // By default we support CSS Modules with the extension .module.css
+            {
+              test: cssRegex,
+              exclude: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction && shouldUseSourceMap,
+              }),
+
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+
+            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+            // using the extension .module.css
+            {
+              test: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction && shouldUseSourceMap,
+                modules: true,
+                getLocalIdent: getCSSModuleLocalIdent,
+              }),
+            },
+
+            // Opt-in support for SASS (using .scss or .sass extensions).
+            // By default we support SASS Modules with the
+            // extensions .module.scss or .module.sass
+            {
+              test: sassRegex,
+              exclude: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 2,
+                  sourceMap: isEnvProduction && shouldUseSourceMap,
+                },
+                'sass-loader'
+              ),
+
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+
+            // Adds support for CSS Modules, but using SASS
+            // using the extension .module.scss or .module.sass
+            {
+              test: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 2,
+                  sourceMap: isEnvProduction && shouldUseSourceMap,
+                  modules: true,
+                  getLocalIdent: getCSSModuleLocalIdent,
+                },
+                'sass-loader'
+              ),
+            },
+
+            // "file" loader makes sure those assets get served by WebpackDevServer.
+            // When you `import` an asset, you get its (virtual) filename.
+            // In production, they would get copied to the `build` folder.
+            // This loader doesn't use a "test" so it will catch all modules
+            // that fall through the other loaders.
+            {
+              loader: require.resolve('file-loader'),
+
+              // Exclude `js` files to keep "css" loader working as it injects
+              // its runtime that would otherwise be processed through "file" loader.
+              // Also exclude `html` and `json` extensions so they get processed
+              // by webpacks internal loaders.
+              exclude: [ /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/ ],
+              options: {
+                name: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
+
+            // ** STOP ** Are you adding a new loader?
+            // Make sure to add the new loader(s) before the "file" loader.
+          ],
+        },
+      ],
+    },
+    plugins: [
+
+      // Generates an `index.html` file with the <script> injected.
+      new HtmlWebpackPlugin(
+        Object.assign(
+          {},
+          {
+            inject: true,
+            template: paths.appHtml,
+          },
+          isEnvProduction
+            ? {
+              minify: {
+                removeComments: true,
+                collapseWhitespace: true,
+                removeRedundantAttributes: true,
+                useShortDoctype: true,
+                removeEmptyAttributes: true,
+                removeStyleLinkTypeAttributes: true,
+                keepClosingSlash: true,
+                minifyJS: true,
+                minifyCSS: true,
+                minifyURLs: true,
+              },
+            }
+            : undefined
+        )
+      ),
+
+      // Inlines the webpack runtime script. This script is too small to warrant
+      // a network request.
+      isEnvProduction &&
+        shouldInlineRuntimeChunk &&
+        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [ /runtime~.+[.]js/ ]),
+
+      // Makes some environment variables available in index.html.
+      // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+      // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+      // In production, it will be an empty string unless you specify "homepage"
+      // in `package.json`, in which case it will be the pathname of that URL.
+      // In development, this will be an empty string.
+      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
+
+      // This gives some necessary context to module not found errors, such as
+      // the requesting resource.
+      new ModuleNotFoundPlugin(paths.appPath),
+
+      // Makes some environment variables available to the JS code, for example:
+      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+      // It is absolutely essential that NODE_ENV is set to production
+      // during a production build.
+      // Otherwise React will be compiled in the very slow development mode.
+      new webpack.DefinePlugin(env.stringified),
+
+      // This is necessary to emit hot updates (currently CSS only):
+      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+
+      // Watcher doesn't work well if you mistype casing in a path so we use
+      // a plugin that prints an error when you attempt to do this.
+      // See https://github.com/facebook/create-react-app/issues/240
+      isEnvDevelopment && new CaseSensitivePathsPlugin(),
+
+      // If you require a missing module and then `npm install` it, you still have
+      // to restart the development server for Webpack to discover it. This plugin
+      // makes the discovery automatic so you don't have to restart.
+      // See https://github.com/facebook/create-react-app/issues/186
+      isEnvDevelopment &&
+        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+      isEnvProduction &&
+        new MiniCssExtractPlugin({
+
+          // Options similar to the same options in webpackOptions.output
+          // both options are optional
+          filename: 'static/css/[name].[contenthash:8].css',
+          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+        }),
+
+      // Generate a manifest file which contains a mapping of all asset filenames
+      // to their corresponding output file so that tools can pick it up without
+      // having to parse `index.html`.
+      new ManifestPlugin({
+        fileName: 'asset-manifest.json',
+        publicPath,
+      }),
+
+      // Moment.js is an extremely popular library that bundles large locale files
+      // by default due to how Webpack interprets its code. This is a practical
+      // solution that requires the user to opt into importing specific locales.
+      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+      // You can remove this if you don't use Moment.js:
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+
+      // Generate a service worker script that will precache, and keep up to date,
+      // the HTML & assets that are part of the Webpack build.
+      isEnvProduction &&
+        new WorkboxWebpackPlugin.GenerateSW({
+          clientsClaim: true,
+          exclude: [ /\.map$/, /asset-manifest\.json$/ ],
+          importWorkboxFrom: 'cdn',
+          navigateFallback: `${publicUrl}/index.html`,
+          navigateFallbackBlacklist: [
+
+            // Exclude URLs starting with /_, as they're likely an API call
+            new RegExp('^/_'),
+
+            // Exclude URLs containing a dot, as they're likely a resource in
+            // public/ and not a SPA route
+            new RegExp('/[^/]+\\.[^/]+$'),
+          ],
+        }),
+
+      // TypeScript type checking
+      useTypeScript &&
+        new ForkTsCheckerWebpackPlugin({
+          typescript: resolve.sync('typescript', {
+            basedir: paths.appNodeModules,
+          }),
+          async: false,
+          checkSyntacticErrors: true,
+          tsconfig: paths.appTsConfig,
+          compilerOptions: {
+            module: 'esnext',
+            moduleResolution: 'node',
+            resolveJsonModule: true,
+            isolatedModules: true,
+            noEmit: true,
+            jsx: 'preserve',
+          },
+          reportFiles: [
+            '**',
+            '!**/*.json',
+            '!**/__tests__/**',
+            '!**/?(*.)(spec|test).*',
+            '!**/src/setupProxy.*',
+            '!**/src/setupTests.*',
+          ],
+          watch: paths.appSrc,
+          silent: true,
+          formatter: typescriptFormatter,
+        }),
+    ].filter(Boolean),
+
+    // Some libraries import Node modules but don't use them in the browser.
+    // Tell Webpack to provide empty mocks for them so importing them works.
+    node: {
+      dgram: 'empty',
+      fs: 'empty',
+      net: 'empty',
+      tls: 'empty',
+      child_process: 'empty',
+    },
+
+    // Turn off performance processing because we utilize
+    // our own hints via the FileSizeReporter
+    performance: false,
+  };
+};

config/webpack.config.prod.js

@@ -1,385 +0,0 @@
-
-const path = require('path');
-const autoprefixer = require('autoprefixer');
-const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const ManifestPlugin = require('webpack-manifest-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
-const eslintFormatter = require('react-dev-utils/eslintFormatter');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const paths = require('./paths');
-const getClientEnvironment = require('./env');
-
-// Webpack uses `publicPath` to determine where the app is being served from.
-// It requires a trailing slash, or the file assets will get an incorrect path.
-const publicPath = paths.servedPath;
-
-// Some apps do not use client-side routing with pushState.
-// For these, "homepage" can be set to "." to enable relative asset paths.
-const shouldUseRelativeAssetPaths = publicPath === './';
-
-// Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
-
-// `publicUrl` is just like `publicPath`, but we will provide it to our app
-// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-const publicUrl = publicPath.slice(0, -1);
-
-// Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
-
-// Assert this just to be safe.
-// Development builds of React are slow and not intended for production.
-if (env.stringified['process.env'].NODE_ENV !== '"production"') {
-  throw new Error('Production builds must have NODE_ENV=production.');
-}
-
-// Note: defined here because it will be used more than once.
-const cssFilename = 'static/css/[name].[contenthash:8].css';
-
-// ExtractTextPlugin expects the build output to be flat.
-// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
-// However, our output is structured with css, js and media folders.
-// To have this structure working with relative paths, we have to use custom options.
-// Making sure that the publicPath goes back to to build folder.
-const extractTextPluginOptions = shouldUseRelativeAssetPaths
-  ? { publicPath: Array(cssFilename.split('/').length).join('../') }
-  : {};
-
-// This is the production configuration.
-// It compiles slowly and is focused on producing a fast and minimal bundle.
-// The development configuration is different and lives in a separate file.
-module.exports = {
-
-  // Don't attempt to continue if there are any errors.
-  bail: true,
-
-  // We generate sourcemaps in production. This is slow but gives good results.
-  // You can exclude the *.map files from the build during deployment.
-  devtool: shouldUseSourceMap ? 'source-map' : false,
-
-  // In production, we only want to load the polyfills and the app code.
-  entry: [ require.resolve('./polyfills'), paths.appIndexJs ],
-  output: {
-
-    // The build folder.
-    path: paths.appBuild,
-
-    // Generated JS file names (with nested folders).
-    // There will be one main bundle, and one file per asynchronous chunk.
-    // We don't currently advertise code splitting but Webpack supports it.
-    filename: 'static/js/[name].[chunkhash:8].js',
-    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
-
-    // We inferred the "public path" (such as / or /my-project) from homepage.
-    publicPath,
-
-    // Point sourcemap entries to original disk location (format as URL on Windows)
-    devtoolModuleFilenameTemplate: (info) =>
-      path
-        .relative(paths.appSrc, info.absoluteResourcePath)
-        .replace(/\\/g, '/'),
-  },
-  resolve: {
-
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We placed these paths second because we want `node_modules` to "win"
-    // if there are any conflicts. This matches Node resolution mechanism.
-    // https://github.com/facebookincubator/create-react-app/issues/253
-    modules: [ 'node_modules', paths.appNodeModules ].concat(
-
-      // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
-
-    // These are the reasonable defaults supported by the Node ecosystem.
-    // We also include JSX as a common component filename extension to support
-    // some tools, although we do not recommend using it, see:
-    // https://github.com/facebookincubator/create-react-app/issues/290
-    // `web` extension prefixes have been added for better support
-    // for React Native Web.
-    extensions: [ '.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx' ],
-    alias: {
-
-      // Support React Native Web
-      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web',
-    },
-    plugins: [
-
-      // Prevents users from importing files from outside of src/ (or node_modules/).
-      // This often causes confusion because we only process files within src/ with babel.
-      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-      // please link the files into your node_modules/ and let module-resolution kick in.
-      // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrc, [ paths.appPackageJson ]),
-    ],
-  },
-  module: {
-    strictExportPresence: true,
-    rules: [
-
-      // TODO: Disable require.ensure as it's not a standard language feature.
-      // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
-      // { parser: { requireEnsure: false } },
-
-      // First, run the linter.
-      // It's important to do this before Babel processes the JS.
-      {
-        test: /\.(js|jsx|mjs)$/,
-        enforce: 'pre',
-        use: [
-          {
-            options: {
-              formatter: eslintFormatter,
-              eslintPath: require.resolve('eslint'),
-
-            },
-            loader: require.resolve('eslint-loader'),
-          },
-        ],
-        include: paths.appSrc,
-      },
-      {
-
-        // "oneOf" will traverse all following loaders until one will
-        // match the requirements. When no loader matches it will fall
-        // back to the "file" loader at the end of the loader list.
-        oneOf: [
-
-          // "url" loader works just like "file" loader but it also embeds
-          // assets smaller than specified size as data URLs to avoid requests.
-          {
-            test: [ /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/ ],
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000,
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-
-          // Process JS with Babel.
-          {
-            test: /\.(js|jsx|mjs)$/,
-            include: paths.appSrc,
-            loader: require.resolve('babel-loader'),
-            options: {
-
-              compact: true,
-            },
-          },
-
-          // The notation here is somewhat confusing.
-          // "postcss" loader applies autoprefixer to our CSS.
-          // "css" loader resolves paths in CSS and adds assets as dependencies.
-          // "style" loader normally turns CSS into JS modules injecting <style>,
-          // but unlike in development configuration, we do something different.
-          // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
-          // (second argument), then grabs the result CSS and puts it into a
-          // separate file in our build process. This way we actually ship
-          // a single CSS file in production instead of JS code injecting <style>
-          // tags. If you use code splitting, however, any async bundles will still
-          // use the "style" loader inside the async code so CSS from them won't be
-          // in the main CSS file.
-          {
-            test: [ /\.css$/, /\.scss$/ ],
-            loader: ExtractTextPlugin.extract(
-              Object.assign(
-                {
-                  fallback: {
-                    loader: require.resolve('style-loader'),
-                    options: {
-                      hmr: false,
-                    },
-                  },
-                  use: [
-                    {
-                      loader: require.resolve('css-loader'),
-                      options: {
-                        importLoaders: 1,
-                        minimize: true,
-                        sourceMap: shouldUseSourceMap,
-                      },
-                    },
-                    {
-                      loader: require.resolve('sass-loader'),
-                    },
-                    {
-                      loader: require.resolve('postcss-loader'),
-                      options: {
-
-                        // Necessary for external CSS imports to work
-                        // https://github.com/facebookincubator/create-react-app/issues/2677
-                        ident: 'postcss',
-                        plugins: () => [
-                          require('postcss-flexbugs-fixes'),
-                          autoprefixer({
-                            browsers: [
-                              '>1%',
-                              'last 4 versions',
-                              'Firefox ESR',
-                              'not ie < 9',
-                            ],
-                            flexbox: 'no-2009',
-                          }),
-                        ],
-                      },
-                    },
-                  ],
-                },
-                extractTextPluginOptions
-              )
-            ),
-
-            // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
-          },
-
-          // "file" loader makes sure assets end up in the `build` folder.
-          // When you `import` an asset, you get its filename.
-          // This loader doesn't use a "test" so it will catch all modules
-          // that fall through the other loaders.
-          {
-            loader: require.resolve('file-loader'),
-
-            // Exclude `js` files to keep "css" loader working as it injects
-            // it's runtime that would otherwise processed through "file" loader.
-            // Also exclude `html` and `json` extensions so they get processed
-            // by webpacks internal loaders.
-            exclude: [ /\.(js|jsx|mjs)$/, /\.html$/, /\.json$/ ],
-            options: {
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-
-          // ** STOP ** Are you adding a new loader?
-          // Make sure to add the new loader(s) before the "file" loader.
-        ],
-      },
-    ],
-  },
-  plugins: [
-
-    // Makes some environment variables available in index.html.
-    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In production, it will be an empty string unless you specify "homepage"
-    // in `package.json`, in which case it will be the pathname of that URL.
-    new InterpolateHtmlPlugin(env.raw),
-
-    // Generates an `index.html` file with the <script> injected.
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: paths.appHtml,
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeRedundantAttributes: true,
-        useShortDoctype: true,
-        removeEmptyAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        keepClosingSlash: true,
-        minifyJS: true,
-        minifyCSS: true,
-        minifyURLs: true,
-      },
-    }),
-
-    // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
-    // It is absolutely essential that NODE_ENV was set to production here.
-    // Otherwise React will be compiled in the very slow development mode.
-    new webpack.DefinePlugin(env.stringified),
-
-    // Minify the code.
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false,
-
-        // Disabled because of an issue with Uglify breaking seemingly valid code:
-        // https://github.com/facebookincubator/create-react-app/issues/2376
-        // Pending further investigation:
-        // https://github.com/mishoo/UglifyJS2/issues/2011
-        comparisons: false,
-      },
-      mangle: {
-        safari10: true,
-      },
-      output: {
-        comments: false,
-
-        // Turned on because emoji and regex is not minified properly using default
-        // https://github.com/facebookincubator/create-react-app/issues/2488
-        ascii_only: true,
-      },
-      sourceMap: shouldUseSourceMap,
-    }),
-
-    // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
-    new ExtractTextPlugin({
-      filename: cssFilename,
-    }),
-
-    // Generate a manifest file which contains a mapping of all asset filenames
-    // to their corresponding output file so that tools can pick it up without
-    // having to parse `index.html`.
-    new ManifestPlugin({
-      fileName: 'asset-manifest.json',
-    }),
-
-    // Generate a service worker script that will precache, and keep up to date,
-    // the HTML & assets that are part of the Webpack build.
-    new SWPrecacheWebpackPlugin({
-
-      // By default, a cache-busting query parameter is appended to requests
-      // used to populate the caches, to ensure the responses are fresh.
-      // If a URL is already hashed by Webpack, then there is no concern
-      // about it being stale, and the cache-busting can be skipped.
-      dontCacheBustUrlsMatching: /\.\w{8}\./,
-      filename: 'service-worker.js',
-      logger(message) {
-        if (message.indexOf('Total precache size is') === 0) {
-          // This message occurs for every build and is a bit too noisy.
-          return;
-        }
-        if (message.indexOf('Skipping static resource') === 0) {
-          // This message obscures real errors so we ignore it.
-          // https://github.com/facebookincubator/create-react-app/issues/2612
-          return;
-        }
-
-        console.log(message); // eslint-disable-line
-      },
-      minify: true,
-
-      // For unknown URLs, fallback to the index page
-      navigateFallback: `${publicUrl}/index.html`,
-
-      // Ignores URLs starting from /__ (useful for Firebase):
-      // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
-      navigateFallbackWhitelist: [ /^(?!\/__).*/ ],
-
-      // Don't precache sourcemaps (they're large) and build asset manifest:
-      staticFileGlobsIgnorePatterns: [ /\.map$/, /asset-manifest\.json$/ ],
-    }),
-
-    // Moment.js is an extremely popular library that bundles large locale files
-    // by default due to how Webpack interprets its code. This is a practical
-    // solution that requires the user to opt into importing specific locales.
-    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-    // You can remove this if you don't use Moment.js:
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-  ],
-
-  // Some libraries import Node modules but don't use them in the browser.
-  // Tell Webpack to provide empty mocks for them so importing them works.
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty',
-  },
-};

config/webpackDevServer.config.js

@@ -1,8 +1,9 @@
 
+const fs = require('fs');
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
+const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 const ignoredFiles = require('react-dev-utils/ignoredFiles');
-const config = require('./webpack.config.dev');
 const paths = require('./paths');
 
 const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
@@ -17,8 +18,8 @@ module.exports = function(proxy, allowedHost) {
     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
     // However, it made several existing use cases such as development in cloud
     // environment or subdomains in development significantly more complicated:
-    // https://github.com/facebookincubator/create-react-app/issues/2271
-    // https://github.com/facebookincubator/create-react-app/issues/2233
+    // https://github.com/facebook/create-react-app/issues/2271
+    // https://github.com/facebook/create-react-app/issues/2233
     // While we're investigating better solutions, for now we will take a
     // compromise. Since our WDS configuration only serves files in the `public`
     // folder we won't consider accessing them a vulnerability. However, if you
@@ -65,16 +66,16 @@ module.exports = function(proxy, allowedHost) {
 
     // It is important to tell WebpackDevServer to use the same "root" path
     // as we specified in the config. In development, we always serve from /.
-    publicPath: config.output.publicPath,
+    publicPath: '/',
 
     // WebpackDevServer is noisy by default so we emit custom message instead
-    // by listening to the compiler events with `compiler.plugin` calls above.
+    // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
     quiet: true,
 
     // Reportedly, this avoids CPU overload on some systems.
-    // https://github.com/facebookincubator/create-react-app/issues/293
+    // https://github.com/facebook/create-react-app/issues/293
     // src/node_modules is not ignored to support absolute imports
-    // https://github.com/facebookincubator/create-react-app/issues/1065
+    // https://github.com/facebook/create-react-app/issues/1065
     watchOptions: {
       ignored: ignoredFiles(paths.appSrc),
     },
@@ -86,12 +87,20 @@ module.exports = function(proxy, allowedHost) {
     historyApiFallback: {
 
       // Paths with dots should still use the history fallback.
-      // See https://github.com/facebookincubator/create-react-app/issues/387.
+      // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
     },
     public: allowedHost,
     proxy,
-    before(app) {
+    before(app, server) {
+      if (fs.existsSync(paths.proxySetup)) {
+        // This registers user provided middleware for proxy reasons
+        require(paths.proxySetup)(app);
+      }
+
+      // This lets us fetch source contents from webpack for the error overlay
+      app.use(evalSourceMapMiddleware(server));
+
       // This lets us open files from the runtime error overlay.
       app.use(errorOverlayMiddleware());
 
@@ -99,7 +108,7 @@ module.exports = function(proxy, allowedHost) {
       // previous service worker registered for the same host:port combination.
       // We do this in development to avoid hitting the production cache if
       // it used the same host and port.
-      // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
+      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
       app.use(noopServiceWorkerMiddleware());
     },
   };

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.4.1-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:

jest.config.js

@@ -8,29 +8,37 @@ module.exports = {
     '!src/**/provideServices.js',
     '!src/container/*.js',
   ],
+  resolver: 'jest-pnp-resolver',
   setupFiles: [
-    '<rootDir>/config/polyfills.js',
+    'react-app-polyfill/jsdom',
     '<rootDir>/config/setupEnzyme.js',
   ],
-  testMatch: [ '<rootDir>/test/**/*.test.{js,jsx,mjs}' ],
-  testEnvironment: 'node',
+  testMatch: [ '<rootDir>/test/**/*.test.{js,jsx,ts,tsx}' ],
+  testEnvironment: 'jsdom',
   testURL: 'http://localhost',
   transform: {
     '^.+\\.(js|jsx|mjs)$': '<rootDir>/node_modules/babel-jest',
     '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
     '^(?!.*\\.(js|jsx|mjs|css|json)$)': '<rootDir>/config/jest/fileTransform.js',
   },
-  transformIgnorePatterns: [ '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$' ],
+  transformIgnorePatterns: [
+    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
+    '^.+\\.module\\.(css|sass|scss)$',
+  ],
   moduleNameMapper: {
     '^react-native$': 'react-native-web',
+    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
   },
   moduleFileExtensions: [
     'web.js',
     'js',
+    'web.ts',
+    'ts',
+    'web.tsx',
+    'tsx',
     'json',
     'web.jsx',
     'jsx',
     'node',
-    'mjs',
   ],
 };

package.json

@@ -5,109 +5,145 @@
   "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": "^1.1.8",
-    "@fortawesome/fontawesome-free-regular": "^5.0.13",
-    "@fortawesome/fontawesome-free-solid": "^5.0.13",
-    "@fortawesome/react-fontawesome": "0.0.19",
+    "@fortawesome/fontawesome-free": "^5.6.3",
+    "@fortawesome/fontawesome-svg-core": "^1.2.0",
+    "@fortawesome/free-regular-svg-icons": "^5.6.3",
+    "@fortawesome/free-solid-svg-icons": "^5.6.3",
+    "@fortawesome/react-fontawesome": "^0.1.3",
+    "array-filter": "^1.0.0",
+    "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",
     "csvjson": "^5.1.0",
+    "leaflet": "^1.4.0",
     "moment": "^2.22.2",
-    "promise": "8.0.1",
+    "promise": "^8.0.1",
     "prop-types": "^15.6.2",
     "qs": "^6.5.2",
-    "ramda": "^0.25.0",
-    "react": "^16.6",
+    "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.3.2",
+    "react-datepicker": "~1.5.0",
+    "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": {
-    "adm-zip": "^0.4.11",
-    "autoprefixer": "7.1.6",
-    "babel-core": "6.26.0",
-    "babel-eslint": "7.2.3",
-    "babel-jest": "20.0.3",
-    "babel-loader": "^7.1.2",
-    "babel-preset-react-app": "^3.1.1",
-    "babel-runtime": "6.26.0",
-    "case-sensitive-paths-webpack-plugin": "2.1.1",
-    "chalk": "1.1.3",
-    "css-loader": "0.28.7",
-    "dotenv": "4.0.0",
-    "dotenv-expand": "4.2.0",
+    "@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",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-named-asset-import": "^0.3.0",
+    "babel-preset-react-app": "^7.0.0",
+    "babel-runtime": "^6.26.0",
+    "bfj": "^6.1.1",
+    "case-sensitive-paths-webpack-plugin": "^2.1.2",
+    "chalk": "^2.4.1",
+    "css-loader": "^1.0.0",
+    "dotenv": "^6.0.0",
+    "dotenv-expand": "^4.2.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^4.19.0",
-    "eslint-config-adidas-babel": "^1.0.1",
-    "eslint-config-adidas-env": "^1.0.1",
-    "eslint-config-adidas-es6": "^1.0.1",
-    "eslint-config-adidas-react": "^1.0.1",
-    "eslint-loader": "1.9.0",
-    "eslint-plugin-import": "^2.8.0",
+    "eslint": "^5.11.1",
+    "eslint-config-adidas-babel": "^1.1.0",
+    "eslint-config-adidas-env": "^1.1.0",
+    "eslint-config-adidas-es6": "^1.2.0",
+    "eslint-config-adidas-react": "^1.1.1",
+    "eslint-loader": "^2.1.1",
+    "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jest": "^21.22.0",
-    "eslint-plugin-promise": "^3.0.0",
-    "eslint-plugin-react": "^7.4.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "1.1.5",
-    "fs-extra": "3.0.1",
-    "html-webpack-plugin": "2.29.0",
-    "jest": "20.0.4",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-react": "^7.11.1",
+    "file-loader": "^2.0.0",
+    "fork-ts-checker-webpack-plugin-alt": "^0.4.14",
+    "fs-extra": "^7.0.0",
+    "html-webpack-plugin": "^4.0.0-alpha.2",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^23.6.0",
+    "jest-pnp-resolver": "^1.0.1",
+    "jest-resolve": "^23.6.0",
+    "mini-css-extract-plugin": "^0.4.3",
     "node-sass": "^4.9.0",
-    "object-assign": "4.1.1",
+    "object-assign": "^4.1.1",
     "ocular.js": "^0.1.0",
-    "postcss-flexbugs-fixes": "3.2.0",
-    "postcss-loader": "2.0.8",
-    "raf": "3.4.0",
-    "react-dev-utils": "^5.0.1",
-    "resolve": "1.6.0",
-    "sass-loader": "^7.0.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "pnp-webpack-plugin": "^1.1.0",
+    "postcss": "^7.0.7",
+    "postcss-flexbugs-fixes": "^4.1.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.3.1",
+    "postcss-safe-parser": "^4.0.1",
+    "raf": "^3.4.0",
+    "react-app-polyfill": "^0.2.0",
+    "react-dev-utils": "^7.0.1",
+    "resolve": "^1.8.1",
+    "sass-loader": "^7.1.0",
     "serve": "^10.0.0",
-    "sinon": "^6.1.5",
-    "style-loader": "0.19.0",
-    "stylelint": "^9.5.0",
-    "stylelint-config-adidas": "^1.0.1",
-    "stylelint-config-adidas-bem": "^1.0.1",
+    "stryker-cli": "^1.0.0",
+    "style-loader": "^0.23.0",
+    "stylelint": "^9.9.0",
+    "stylelint-config-adidas": "^1.2.1",
+    "stylelint-config-adidas-bem": "^1.2.0",
     "stylelint-config-recommended-scss": "^3.2.0",
     "stylelint-scss": "^3.3.0",
-    "sw-precache-webpack-plugin": "0.11.4",
-    "url-loader": "0.6.2",
-    "webpack": "3.8.1",
-    "webpack-dev-server": "2.9.4",
-    "webpack-manifest-plugin": "1.3.2",
-    "whatwg-fetch": "2.0.3"
+    "sw-precache-webpack-plugin": "^0.11.4",
+    "terser-webpack-plugin": "^1.1.0",
+    "url-loader": "^1.1.1",
+    "webpack": "^4.19.1",
+    "webpack-dev-server": "^3.1.14",
+    "webpack-manifest-plugin": "^2.0.4",
+    "whatwg-fetch": "^2.0.3",
+    "workbox-webpack-plugin": "^3.6.3"
   },
   "babel": {
     "presets": [
       "react-app"
     ]
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

scripts/build.js

@@ -1,4 +1,4 @@
-/* eslint no-console: "off" */
+/* eslint-disable no-console */
 
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'production';
@@ -18,14 +18,16 @@ const path = require('path');
 const chalk = require('chalk');
 const fs = require('fs-extra');
 const webpack = require('webpack');
+const bfj = require('bfj');
+const AdmZip = require('adm-zip');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 const printBuildError = require('react-dev-utils/printBuildError');
-const AdmZip = require('adm-zip');
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 const paths = require('../config/paths');
-const config = require('../config/webpack.config.prod');
+const configFactory = require('../config/webpack.config');
 
 const { measureFileSizesBeforeBuild, printFileSizesAfterBuild } = FileSizeReporter;
 const useYarn = fs.existsSync(paths.yarnLockFile);
@@ -34,14 +36,27 @@ const useYarn = fs.existsSync(paths.yarnLockFile);
 const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024; // eslint-disable-line
 const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024; // eslint-disable-line
 
+const isInteractive = process.stdout.isTTY;
+
 // Warn and crash if required files are missing
 if (!checkRequiredFiles([ paths.appHtml, paths.appIndexJs ])) {
   process.exit(1);
 }
 
-// First, read the current file sizes in build directory.
-// This lets us display how much they changed later.
-measureFileSizesBeforeBuild(paths.appBuild)
+// Process CLI arguments
+const argvSliceStart = 2;
+const argv = process.argv.slice(argvSliceStart);
+const writeStatsJson = argv.indexOf('--stats') !== -1;
+
+// Generate configuration
+const config = configFactory('production');
+
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() =>
+
+    // First, read the current file sizes in build directory.
+    // This lets us display how much they changed later.
+    measureFileSizesBeforeBuild(paths.appBuild))
   .then((previousFileSizes) => {
     // Remove all content but keep the directory so that
     // if you're in it, you don't end up in Trash
@@ -85,7 +100,7 @@ measureFileSizesBeforeBuild(paths.appBuild)
       const appPackage = require(paths.appPackageJson);
 
       const { publicUrl } = paths;
-      const { publicPath } = config.output;
+      const { output: { publicPath } } = config;
       const buildFolder = path.relative(process.cwd(), paths.appBuild);
 
       printHostingInstructions(
@@ -102,7 +117,14 @@ measureFileSizesBeforeBuild(paths.appBuild)
       process.exit(1);
     }
   )
-  .then(zipDist);
+  .then(zipDist)
+  .catch((err) => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+
+    process.exit(1);
+  });
 
 // Create the production build and print the deployment instructions.
 function build(previousFileSizes) {
@@ -112,12 +134,22 @@ function build(previousFileSizes) {
 
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
+      let messages;
+
       if (err) {
-        return reject(err);
+        if (!err.message) {
+          return reject(err);
+        }
+
+        messages = formatWebpackMessages({
+          errors: [ err.message ],
+          warnings: [],
+        });
+      } else {
+        messages = formatWebpackMessages(
+          stats.toJson({ all: false, warnings: true, errors: true })
+        );
       }
-
-      const messages = formatWebpackMessages(stats.toJson({}, true));
-
       if (messages.errors.length) {
         // Only keep the first error. Others are often indicative
         // of the same problem, but confuse the reader with noise.
@@ -143,11 +175,20 @@ function build(previousFileSizes) {
         return reject(new Error(messages.warnings.join('\n\n')));
       }
 
-      return resolve({
+      const resolveArgs = {
         stats,
         previousFileSizes,
         warnings: messages.warnings,
-      });
+      };
+
+      if (writeStatsJson) {
+        return bfj // eslint-disable-line promise/no-promise-in-callback
+          .write(`${paths.appBuild}/bundle-stats.json`, stats.toJson())
+          .then(() => resolve(resolveArgs))
+          .catch((error) => reject(new Error(error)));
+      }
+
+      return resolve(resolveArgs);
     });
   });
 }

scripts/start.js

@@ -1,4 +1,4 @@
-/* eslint no-console: "off" */
+/* eslint-disable no-console */
 
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'development';
@@ -27,8 +27,9 @@ const {
   prepareUrls,
 } = require('react-dev-utils/WebpackDevServerUtils');
 const openBrowser = require('react-dev-utils/openBrowser');
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 const paths = require('../config/paths');
-const config = require('../config/webpack.config.dev');
+const configFactory = require('../config/webpack.config');
 const createDevServerConfig = require('../config/webpackDevServer.config');
 
 const useYarn = fs.existsSync(paths.yarnLockFile);
@@ -40,8 +41,8 @@ if (!checkRequiredFiles([ paths.appHtml, paths.appIndexJs ])) {
 }
 
 // Tools like Cloud9 rely on this.
-const FALLBACK_PORT = 3000;
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || FALLBACK_PORT;
+const DEFAULT_PORT = 3000;
+const PORT = parseInt(process.env.PORT) || DEFAULT_PORT;
 const HOST = process.env.HOST || '0.0.0.0';
 
 if (process.env.HOST) {
@@ -55,19 +56,25 @@ if (process.env.HOST) {
   console.log(
     'If this was unintentional, check that you haven\'t mistakenly set it in your shell.'
   );
-  console.log(`Learn more here: ${chalk.yellow('http://bit.ly/2mwWSwH')}`);
+  console.log(
+    `Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`
+  );
   console.log();
 }
 
-// We attempt to use the default port but if it is busy, we offer the user to
-// run on a different port. `choosePort()` Promise resolves to the next free port.
-choosePort(HOST, DEFAULT_PORT)
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() =>
+
+    // We attempt to use the default port but if it is busy, we offer the user to
+    // run on a different port. `choosePort()` Promise resolves to the next free port.
+    choosePort(HOST, PORT))
   .then((port) => {
     if (port === null) {
       // We have not found a port.
       return;
     }
 
+    const config = configFactory('development');
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     const appName = require(paths.appPackageJson).name;
 
@@ -81,7 +88,7 @@ choosePort(HOST, DEFAULT_PORT)
 
     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
 
-    // Serve webpack assets generated by the compiler over a web sever.
+    // Serve webpack assets generated by the compiler over a web server.
     const serverConfig = createDevServerConfig(
       proxyConfig,
       urls.lanUrlForConfig
@@ -89,19 +96,17 @@ choosePort(HOST, DEFAULT_PORT)
     const devServer = new WebpackDevServer(compiler, serverConfig);
 
     // Launch WebpackDevServer.
-
     devServer.listen(port, HOST, (err) => {
       if (err) {
-        console.log(err);
-
-        return;
+        return console.log(err);
       }
       if (isInteractive) {
         clearConsole();
       }
 
       console.log(chalk.cyan('Starting the development server...\n'));
-      openBrowser(urls.localUrlForBrowser);
+
+      return openBrowser(urls.localUrlForBrowser);
     });
 
     [ 'SIGINT', 'SIGTERM' ].forEach((sig) => {

src/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import './App.scss';
+import NotFound from './common/NotFound';
 
 const App = (MainHeader, Home, MenuLayout, CreateServer) => () => (
   <div className="container-fluid app-container">
@@ -11,6 +12,7 @@ const App = (MainHeader, Home, MenuLayout, CreateServer) => () => (
         <Route exact path="/server/create" component={CreateServer} />
         <Route exact path="/" component={Home} />
         <Route path="/server/:serverId" component={MenuLayout} />
+        <Route component={NotFound} />
       </Switch>
     </div>
   </div>

src/common/AsideMenu.js

@@ -1,7 +1,5 @@
-import listIcon from '@fortawesome/fontawesome-free-solid/faList';
-import createIcon from '@fortawesome/fontawesome-free-solid/faLink';
-import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { faList as listIcon, faLink as createIcon, faTags as tagsIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';

src/common/AsideMenu.scss

@@ -1,5 +1,4 @@
 @import '../utils/base';
-@import '../utils/mixins/box-shadow';
 @import '../utils/mixins/vertical-align';
 
 $asideMenuMobileWidth: 280px;
@@ -26,8 +25,7 @@ $asideMenuMobileWidth: 280px;
     width: $asideMenuMobileWidth !important;
     transition: left 300ms;
     top: $headerHeight - 3px;
-
-    @include box-shadow(-10px 0 50px 11px rgba(0, 0, 0, .55));
+    box-shadow: -10px 0 50px 11px rgba(0, 0, 0, .55);
   }
 }
 

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

@@ -1,5 +1,5 @@
-import chevronIcon from '@fortawesome/fontawesome-free-solid/faChevronRight';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isEmpty, values } from 'ramda';
 import React from 'react';
 import { Link } from 'react-router-dom';
@@ -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/MainHeader.js

@@ -1,6 +1,5 @@
-import plusIcon from '@fortawesome/fontawesome-free-solid/faPlus';
-import arrowIcon from '@fortawesome/fontawesome-free-solid/faChevronDown';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { faPlus as plusIcon, faChevronDown as arrowIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';

src/common/MenuLayout.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import Swipeable from 'react-swipeable';
-import burgerIcon from '@fortawesome/fontawesome-free-solid/faBars';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classnames from 'classnames';
 import * as PropTypes from 'prop-types';
 import { serverType } from '../servers/prop-types';
+import NotFound from './NotFound';
 import './MenuLayout.scss';
 
 const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits) =>
@@ -19,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;
 
@@ -38,10 +37,18 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
     }
 
     render() {
-      const { selectedServer } = this.props;
+      const { selectedServer, match } = this.props;
+      const { params: { serverId } } = match;
       const burgerClasses = classnames('menu-layout__burger-icon', {
         'menu-layout__burger-icon--active': this.state.showSideBar,
       });
+      const swipeMenuIfNoModalExists = (showSideBar) => () => {
+        if (document.querySelector('.modal')) {
+          return;
+        }
+
+        this.setState({ showSideBar });
+      };
 
       return (
         <React.Fragment>
@@ -54,8 +61,8 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
           <Swipeable
             delta={40}
             className="menu-layout__swipeable"
-            onSwipedLeft={() => this.setState({ showSideBar: false })}
-            onSwipedRight={() => this.setState({ showSideBar: true })}
+            onSwipedLeft={swipeMenuIfNoModalExists(false)}
+            onSwipedRight={swipeMenuIfNoModalExists(true)}
           >
             <div className="row menu-layout__swipeable-inner">
               <AsideMenu
@@ -88,6 +95,9 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
                     path="/server/:serverId/manage-tags"
                     component={TagsList}
                   />
+                  <Route
+                    render={() => <NotFound to={`/server/${serverId}/list-short-urls/1`} btnText="List short URLs" />}
+                  />
                 </Switch>
               </div>
             </div>

src/common/NotFound.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import * as PropTypes from 'prop-types';
+
+const propTypes = {
+  to: PropTypes.string,
+  btnText: PropTypes.string,
+};
+
+const NotFound = ({ to = '/', btnText = 'Home' }) => (
+  <div className="home">
+    <h2>Oops! We could not find requested route.</h2>
+    <p>
+      Use your browser{'\''}s back button to navigate to the page you have previously come from, or just press this button.
+    </p>
+    <br />
+    <Link to={to} className="btn btn-outline-primary btn-lg">{btnText}</Link>
+  </div>
+);
+
+NotFound.propTypes = propTypes;
+
+export default NotFound;

src/common/ScrollToTop.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ScrollToTop = (window) => class ScrollToTop extends React.Component {
+const ScrollToTop = ({ scrollTo }) => class ScrollToTop extends React.Component {
   static propTypes = {
     location: PropTypes.object,
     children: PropTypes.node,
   };
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate({ location: prevLocation }) {
     const { location } = this.props;
 
-    if (location !== prevProps.location) {
-      window.scrollTo(0, 0);
+    if (location !== prevLocation) {
+      scrollTo(0, 0);
     }
   }
 

src/common/react-tagsinput.scss

@@ -27,12 +27,12 @@
 
 .react-tagsinput-remove {
   cursor: pointer;
-  font-weight: bold;
+  font-weight: 700;
   margin-left: 8px;
 }
 
 .react-tagsinput-tag span:before {
-  content: "\2715";
+  content: '\2715';
   color: #fff;
 }
 

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/container/index.js

@@ -13,11 +13,12 @@ import provideUtilsServices from '../utils/services/provideServices';
 const bottle = new Bottle();
 const { container } = bottle;
 
+const lazyService = (container, serviceName) => (...args) => container[serviceName](...args);
 const mapActionService = (map, actionName) => ({
   ...map,
 
   // Wrap actual action service in a function so that it is lazily created the first time it is called
-  [actionName]: (...args) => container[actionName](...args),
+  [actionName]: lazyService(container, actionName),
 });
 const connect = (propsFromState, actionServiceNames) =>
   reduxConnect(

src/index.js

@@ -7,18 +7,25 @@ import { homepage } from '../package.json';
 import registerServiceWorker from './registerServiceWorker';
 import container from './container';
 import store from './container/store';
-import '../node_modules/react-datepicker/dist/react-datepicker.css';
+import { fixLeafletIcons } from './utils/utils';
+import 'react-datepicker/dist/react-datepicker.css';
+import 'leaflet/dist/leaflet.css';
 import './common/react-tagsinput.scss';
 import './index.scss';
 
-const { App, ScrollToTop } = container;
+// This overwrites icons used for leaflet maps, fixing some issues caused by webpack while processing the CSS
+fixLeafletIcons();
+
+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/registerServiceWorker.js

@@ -43,22 +43,22 @@ export default function register() {
 
         // Add some additional logging to localhost, pointing developers to the
         // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
+        return navigator.serviceWorker.ready.then(() => {
           console.log(
             'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://goo.gl/SC7cgQ'
+            'worker. To learn more, visit https://goo.gl/SC7cgQ'
           );
         });
-      } else {
-        // Is not local host. Just register service worker
-        registerValidSW(swUrl);
       }
+
+      // Is not local host. Just register service worker
+      return registerValidSW(swUrl);
     });
   }
 }
 
 function registerValidSW(swUrl) {
-  navigator.serviceWorker
+  return navigator.serviceWorker
     .register(swUrl)
     .then((registration) => {
       registration.onupdatefound = () => {
@@ -99,15 +99,14 @@ function checkValidServiceWorker(swUrl) {
         response.headers.get('content-type').indexOf('javascript') === -1
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then((registration) => {
+        return navigator.serviceWorker.ready.then((registration) =>
           registration.unregister().then(() => {
             window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl);
+          }));
       }
+
+      // Service worker found. Proceed as normal.
+      return registerValidSW(swUrl);
     })
     .catch(() => {
       console.log(
@@ -120,6 +119,6 @@ export function unregister() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready.then((registration) => {
       registration.unregister();
-    });
+    }).catch(() => {});
   }
 }

src/servers/CreateServer.js

@@ -2,12 +2,11 @@ import { assoc, dissoc, pipe } from 'ramda';
 import React from 'react';
 import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
-import { stateFlagTimeout } from '../utils/utils';
 import './CreateServer.scss';
 
 const SHOW_IMPORT_MSG_TIME = 4000;
 
-const CreateServer = (ImportServersBtn) => class CreateServer extends React.Component {
+const CreateServer = (ImportServersBtn, stateFlagTimeout) => class CreateServer extends React.Component {
   static propTypes = {
     createServer: PropTypes.func,
     history: PropTypes.shape({

src/servers/CreateServer.scss

@@ -5,7 +5,7 @@
 }
 
 .create-server__label {
-  font-weight: bold;
+  font-weight: 700;
   cursor: pointer;
 
   @media (min-width: $mdMin) {

src/servers/DeleteServerButton.js

@@ -1,5 +1,5 @@
-import deleteIcon from '@fortawesome/fontawesome-free-solid/faMinusCircle';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { serverType } from './prop-types';

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 } from 'ramda';
-import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
 
 const ImportServersBtn = (serversImporter) => class ImportServersBtn extends React.Component {
@@ -22,11 +20,14 @@ const ImportServersBtn = (serversImporter) => class ImportServersBtn extends Rea
   render() {
     const { importServersFromFile } = serversImporter;
     const { onImport, createServers } = this.props;
-    const onChange = (e) =>
-      importServersFromFile(e.target.files[0])
-        .then((servers) => servers.map((server) => assoc('id', uuid(), server)))
+    const onChange = ({ target }) =>
+      importServersFromFile(target.files[0])
         .then(createServers)
-        .then(onImport);
+        .then(onImport)
+        .then(() => {
+          // Reset input after processing file
+          target.value = null;
+        });
 
     return (
       <React.Fragment>

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) => (server) => {
-  serversService.createServer(server);
-
-  return listServers(serversService)();
+  createServers(remoteList);
+  dispatch({ type: FETCH_SERVERS, list: remoteList.reduce((map, server) => ({ ...map, [server.id]: server }), {}) });
 };
 
-export const deleteServer = (serversService) => (server) => {
-  serversService.deleteServer(server);
+export const createServer = ({ createServer }, listServersAction) => pipe(createServer, listServersAction);
 
-  return listServers(serversService)();
-};
+export const deleteServer = ({ deleteServer }, listServersAction) => pipe(deleteServer, listServersAction);
 
-export const createServers = (serversService) => (servers) => {
-  serversService.createServers(servers);
-
-  return listServers(serversService)();
-};
+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

@@ -12,7 +12,7 @@ import ServersExporter from './ServersExporter';
 
 const provideServices = (bottle, connect, withRouter) => {
   // Components
-  bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn');
+  bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'stateFlagTimeout');
   bottle.decorator('CreateServer', connect([ 'selectedServer' ], [ 'createServer', 'resetSelectedServer' ]));
 
   bottle.serviceFactory('ServersDropdown', ServersDropdown, 'ServersExporter');
@@ -35,10 +35,10 @@ const provideServices = (bottle, connect, withRouter) => {
 
   // Actions
   bottle.serviceFactory('selectServer', selectServer, 'ServersService');
-  bottle.serviceFactory('createServer', createServer, 'ServersService');
-  bottle.serviceFactory('createServers', createServers, 'ServersService');
-  bottle.serviceFactory('deleteServer', deleteServer, 'ServersService');
-  bottle.serviceFactory('listServers', listServers, 'ServersService');
+  bottle.serviceFactory('createServer', createServer, 'ServersService', 'listServers');
+  bottle.serviceFactory('createServers', createServers, 'ServersService', 'listServers');
+  bottle.serviceFactory('deleteServer', deleteServer, 'ServersService', 'listServers');
+  bottle.serviceFactory('listServers', listServers, 'ServersService', 'axios');
 
   bottle.serviceFactory('resetSelectedServer', () => resetSelectedServer);
 };

src/short-urls/CreateShortUrl.js

@@ -1,18 +1,18 @@
-import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown';
-import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { faAngleDoubleDown as downIcon, faAngleDoubleUp as upIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { assoc, dissoc, isNil, pipe, replace, trim } from 'ramda';
 import React from 'react';
 import { Collapse } from 'reactstrap';
 import * as PropTypes from 'prop-types';
 import DateInput from '../utils/DateInput';
-import CreateShortUrlResult from './helpers/CreateShortUrlResult';
+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();
 
-const CreateShortUrl = (TagsSelector) => class CreateShortUrl extends React.Component {
+const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShortUrl extends React.Component {
   static propTypes = {
     createShortUrl: PropTypes.func,
     shortUrlCreationResult: createShortUrlResultType,
@@ -26,6 +26,7 @@ const CreateShortUrl = (TagsSelector) => class CreateShortUrl extends React.Comp
     validSince: undefined,
     validUntil: undefined,
     maxVisits: undefined,
+    findIfExists: false,
     moreOptionsVisible: false,
   };
 
@@ -95,22 +96,30 @@ const CreateShortUrl = (TagsSelector) => class CreateShortUrl extends React.Comp
                 {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/SearchBar.js

@@ -1,5 +1,5 @@
-import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { faTags as tagsIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { isEmpty } from 'ramda';
 import PropTypes from 'prop-types';

src/short-urls/ShortUrls.js

@@ -1,21 +1,35 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Paginator from './Paginator';
 
-const ShortUrls = (SearchBar, ShortUrlsList) => (props) => {
-  const { match: { params }, shortUrlsList } = props;
-  const { page, serverId } = params;
-  const { data = [], pagination } = shortUrlsList;
+const ShortUrls = (SearchBar, ShortUrlsList) => {
+  const propTypes = {
+    match: PropTypes.shape({
+      params: PropTypes.object,
+    }),
+    shortUrlsList: PropTypes.object,
+  };
 
-  // Using a key on a component makes react to create a new instance every time the key changes
-  const urlsListKey = `${serverId}_${page}`;
+  const ShortUrlsComponent = (props) => {
+    const { match: { params }, shortUrlsList } = props;
+    const { page, serverId } = params;
+    const { data = [], pagination } = shortUrlsList;
 
-  return (
-    <div className="shlink-container">
-      <div className="form-group"><SearchBar /></div>
-      <ShortUrlsList {...props} shortUrlsList={data} key={urlsListKey} />
-      <Paginator paginator={pagination} serverId={serverId} />
-    </div>
-  );
+    // Using a key on a component makes react to create a new instance every time the key changes
+    const urlsListKey = `${serverId}_${page}`;
+
+    return (
+      <div className="shlink-container">
+        <div className="form-group"><SearchBar /></div>
+        <ShortUrlsList {...props} shortUrlsList={data} key={urlsListKey} />
+        <Paginator paginator={pagination} serverId={serverId} />
+      </div>
+    );
+  };
+
+  ShortUrlsComponent.propTypes = propTypes;
+
+  return ShortUrlsComponent;
 };
 
 export default ShortUrls;

src/short-urls/ShortUrlsList.js

@@ -1,6 +1,5 @@
-import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
-import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { head, isEmpty, keys, values } from 'ramda';
 import React from 'react';
 import qs from 'qs';
@@ -15,7 +14,7 @@ import './ShortUrlsList.scss';
 const SORTABLE_FIELDS = {
   dateCreated: 'Created at',
   shortCode: 'Short URL',
-  originalUrl: 'Long URL',
+  longUrl: 'Long URL',
   visits: 'Visits',
 };
 
@@ -143,9 +142,9 @@ const ShortUrlsList = (ShortUrlsRow) => class ShortUrlsList extends React.Compon
               </th>
               <th
                 className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-                onClick={this.orderByColumn('originalUrl')}
+                onClick={this.orderByColumn('longUrl')}
               >
-                {this.renderOrderIcon('originalUrl')}
+                {this.renderOrderIcon('longUrl')}
                 Long URL
               </th>
               <th className="short-urls-list__header-cell">Tags</th>

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/CreateShortUrlResult.js

@@ -1,15 +1,14 @@
-import copyIcon from '@fortawesome/fontawesome-free-regular/faCopy';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isNil } from 'ramda';
 import React from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { Card, CardBody, Tooltip } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { createShortUrlResultType } from '../reducers/shortUrlCreation';
-import { stateFlagTimeout } from '../../utils/utils';
 import './CreateShortUrlResult.scss';
 
-export default class CreateShortUrlResult extends React.Component {
+const CreateShortUrlResult = (stateFlagTimeout) => class CreateShortUrlResult extends React.Component {
   static propTypes = {
     resetCreateShortUrl: PropTypes.func,
     error: PropTypes.bool,
@@ -61,4 +60,6 @@ export default class CreateShortUrlResult extends React.Component {
       </Card>
     );
   }
-}
+};
+
+export default CreateShortUrlResult;

src/short-urls/helpers/ShortUrlsRow.js

@@ -6,11 +6,14 @@ import { shortUrlsListParamsType } from '../reducers/shortUrlsListParams';
 import { serverType } from '../../servers/prop-types';
 import ExternalLink from '../../utils/ExternalLink';
 import { shortUrlType } from '../reducers/shortUrlsList';
-import { stateFlagTimeout } from '../../utils/utils';
 import Tag from '../../tags/helpers/Tag';
 import './ShortUrlsRow.scss';
 
-const ShortUrlsRow = (ShortUrlsRowMenu, colorGenerator) => class ShortUrlsRow extends React.Component {
+const ShortUrlsRow = (
+  ShortUrlsRowMenu,
+  colorGenerator,
+  stateFlagTimeout
+) => class ShortUrlsRow extends React.Component {
   static propTypes = {
     refreshList: PropTypes.func,
     shortUrlsListParams: shortUrlsListParamsType,
@@ -40,7 +43,6 @@ const ShortUrlsRow = (ShortUrlsRowMenu, colorGenerator) => class ShortUrlsRow ex
 
   render() {
     const { shortUrl, selectedServer } = this.props;
-    const completeShortUrl = !selectedServer ? shortUrl.shortCode : `${selectedServer.url}/${shortUrl.shortCode}`;
 
     return (
       <tr className="short-urls-row">
@@ -48,10 +50,10 @@ const ShortUrlsRow = (ShortUrlsRowMenu, colorGenerator) => class ShortUrlsRow ex
           <Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment>
         </td>
         <td className="short-urls-row__cell" data-th="Short URL: ">
-          <ExternalLink href={completeShortUrl}>{completeShortUrl}</ExternalLink>
+          <ExternalLink href={shortUrl.shortUrl} />
         </td>
         <td className="short-urls-row__cell short-urls-row__cell--break" data-th="Long URL: ">
-          <ExternalLink href={shortUrl.originalUrl}>{shortUrl.originalUrl}</ExternalLink>
+          <ExternalLink href={shortUrl.longUrl} />
         </td>
         <td className="short-urls-row__cell" data-th="Tags: ">{this.renderTags(shortUrl.tags)}</td>
         <td className="short-urls-row__cell text-md-right" data-th="Visits: ">{shortUrl.visitsCount}</td>
@@ -63,7 +65,6 @@ const ShortUrlsRow = (ShortUrlsRowMenu, colorGenerator) => class ShortUrlsRow ex
             Copied short URL!
           </small>
           <ShortUrlsRowMenu
-            completeShortUrl={completeShortUrl}
             selectedServer={selectedServer}
             shortUrl={shortUrl}
             onCopyToClipboard={() => stateFlagTimeout(this.setState.bind(this), 'copiedToClipboard')}

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -1,11 +1,12 @@
-import copyIcon from '@fortawesome/fontawesome-free-regular/faCopy';
-import pictureIcon from '@fortawesome/fontawesome-free-regular/faImage';
-import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags';
-import pieChartIcon from '@fortawesome/fontawesome-free-solid/faChartPie';
-import menuIcon from '@fortawesome/fontawesome-free-solid/faEllipsisV';
-import qrIcon from '@fortawesome/fontawesome-free-solid/faQrcode';
-import deleteIcon from '@fortawesome/fontawesome-free-solid/faMinusCircle';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { faCopy as copyIcon, faImage as pictureIcon } from '@fortawesome/free-regular-svg-icons';
+import {
+  faTags as tagsIcon,
+  faChartPie as pieChartIcon,
+  faEllipsisV as menuIcon,
+  faQrcode as qrIcon,
+  faMinusCircle as deleteIcon,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { Link } from 'react-router-dom';
@@ -19,7 +20,6 @@ import './ShortUrlsRowMenu.scss';
 
 const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrlsRowMenu extends React.Component {
   static propTypes = {
-    completeShortUrl: PropTypes.string,
     onCopyToClipboard: PropTypes.func,
     selectedServer: serverType,
     shortUrl: shortUrlType,
@@ -28,28 +28,28 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
   state = {
     isOpen: false,
     isQrModalOpen: false,
-    isPreviewOpen: false,
+    isPreviewModalOpen: false,
     isTagsModalOpen: false,
     isDeleteModalOpen: false,
   };
   toggle = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
 
   render() {
-    const { completeShortUrl, onCopyToClipboard, selectedServer, shortUrl } = this.props;
-    const serverId = selectedServer ? selectedServer.id : '';
+    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');
-    const togglePreview = toggleModal('isPreviewOpen');
+    const togglePreview = toggleModal('isPreviewModalOpen');
     const toggleTags = toggleModal('isTagsModalOpen');
     const toggleDelete = toggleModal('isDeleteModalOpen');
 
     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/${serverId}/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>
 
@@ -66,31 +66,19 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
           <DropdownItem className="short-urls-row-menu__dropdown-item--danger" onClick={toggleDelete}>
             <FontAwesomeIcon icon={deleteIcon} /> &nbsp;Delete short URL
           </DropdownItem>
-          <DeleteShortUrlModal
-            shortUrl={shortUrl}
-            isOpen={this.state.isDeleteModalOpen}
-            toggle={toggleDelete}
-          />
+          <DeleteShortUrlModal shortUrl={shortUrl} isOpen={this.state.isDeleteModalOpen} toggle={toggleDelete} />
 
           <DropdownItem divider />
 
           <DropdownItem onClick={togglePreview}>
             <FontAwesomeIcon icon={pictureIcon} /> &nbsp;Preview
           </DropdownItem>
-          <PreviewModal
-            url={completeShortUrl}
-            isOpen={this.state.isPreviewOpen}
-            toggle={togglePreview}
-          />
+          <PreviewModal url={completeShortUrl} isOpen={this.state.isPreviewModalOpen} toggle={togglePreview} />
 
           <DropdownItem onClick={toggleQrCode}>
             <FontAwesomeIcon icon={qrIcon} /> &nbsp;QR code
           </DropdownItem>
-          <QrCodeModal
-            url={completeShortUrl}
-            isOpen={this.state.isQrModalOpen}
-            toggle={toggleQrCode}
-          />
+          <QrCodeModal url={completeShortUrl} isOpen={this.state.isQrModalOpen} toggle={toggleQrCode} />
 
           <DropdownItem divider />
 

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,18 +1,20 @@
+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({
-  tags: PropTypes.arrayOf(PropTypes.string),
   shortCode: PropTypes.string,
-  originalUrl: PropTypes.string,
+  shortUrl: PropTypes.string,
+  longUrl: PropTypes.string,
+  tags: PropTypes.arrayOf(PropTypes.string),
 });
 
 const initialState = {
@@ -21,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/short-urls/services/provideServices.js

@@ -8,6 +8,7 @@ import ShortUrlsRowMenu from '../helpers/ShortUrlsRowMenu';
 import CreateShortUrl from '../CreateShortUrl';
 import DeleteShortUrlModal from '../helpers/DeleteShortUrlModal';
 import EditTagsModal from '../helpers/EditTagsModal';
+import CreateShortUrlResult from '../helpers/CreateShortUrlResult';
 import { listShortUrls } from '../reducers/shortUrlsList';
 import { createShortUrl, resetCreateShortUrl } from '../reducers/shortUrlCreation';
 import { deleteShortUrl, resetDeleteShortUrl, shortUrlDeleted } from '../reducers/shortUrlDeletion';
@@ -30,11 +31,12 @@ const provideServices = (bottle, connect) => {
     [ 'listShortUrls', 'resetShortUrlParams' ]
   ));
 
-  bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator');
+  bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator', 'stateFlagTimeout');
 
   bottle.serviceFactory('ShortUrlsRowMenu', ShortUrlsRowMenu, 'DeleteShortUrlModal', 'EditTagsModal');
+  bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'stateFlagTimeout');
 
-  bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'TagsSelector');
+  bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'TagsSelector', 'CreateShortUrlResult');
   bottle.decorator(
     'CreateShortUrl',
     connect([ 'shortUrlCreationResult' ], [ 'createShortUrl', 'resetCreateShortUrl' ])

src/tags/TagCard.js

@@ -1,7 +1,6 @@
 import { Card, CardBody } from 'reactstrap';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import deleteIcon from '@fortawesome/fontawesome-free-solid/faTrash';
-import editIcon from '@fortawesome/fontawesome-free-solid/faPencilAlt';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrash as deleteIcon, faPencilAlt as editIcon } from '@fortawesome/free-solid-svg-icons';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router-dom';

src/tags/helpers/DeleteTagConfirmModal.js

@@ -13,13 +13,12 @@ export default class DeleteTagConfirmModal extends React.Component {
     tagDeleted: PropTypes.func,
   };
 
-  doDelete = () => {
+  doDelete = async () => {
     const { tag, toggle, deleteTag } = this.props;
 
-    deleteTag(tag).then(() => {
-      this.tagWasDeleted = true;
-      toggle();
-    });
+    await deleteTag(tag);
+    this.tagWasDeleted = true;
+    toggle();
   };
   handleOnClosed = () => {
     if (!this.tagWasDeleted) {

src/tags/helpers/EditTagModal.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
 import { ChromePicker } from 'react-color';
-import colorIcon from '@fortawesome/fontawesome-free-solid/faPalette';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import './EditTagModal.scss';
 

src/tags/helpers/TagsSelector.js

@@ -10,6 +10,7 @@ const TagsSelector = (colorGenerator) => class TagsSelector extends React.Compon
   static propTypes = {
     tags: PropTypes.arrayOf(PropTypes.string).isRequired,
     onChange: PropTypes.func.isRequired,
+    listTags: PropTypes.func,
     placeholder: PropTypes.string,
     tagsList: PropTypes.shape({
       tags: PropTypes.arrayOf(PropTypes.string),

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/DateInput.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { isNil } from 'ramda';
 import DatePicker from 'react-datepicker';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons';
 import * as PropTypes from 'prop-types';
 import './DateInput.scss';
 

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.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import searchIcon from '@fortawesome/fontawesome-free-solid/faSearch';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch as searchIcon } from '@fortawesome/free-solid-svg-icons';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import './SearchField.scss';

src/utils/SearchField.scss

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

src/utils/SortingDropdown.js

@@ -2,11 +2,10 @@ import React from 'react';
 import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { toPairs } from 'ramda';
 import PropTypes from 'prop-types';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import sortAscIcon from '@fortawesome/fontawesome-free-solid/faSortAmountUp';
-import sortDescIcon from '@fortawesome/fontawesome-free-solid/faSortAmountDown';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSortAmountUp as sortAscIcon, faSortAmountDown as sortDescIcon } from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';
-import { determineOrderDir } from '../utils/utils';
+import { determineOrderDir } from './utils';
 import './SortingDropdown.scss';
 
 const propTypes = {
@@ -34,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/base.scss

@@ -1,4 +1,3 @@
-
 // Breakpoints
 $xsMax: 575px;
 $smMin: 576px;

src/utils/mixins/border-radius.scss

@@ -1,4 +0,0 @@
-@mixin border-radius($radius) {
-  border-radius: $radius;
-  -webkit-border-radius: $radius;
-}

src/utils/mixins/box-shadow.scss

@@ -1,4 +0,0 @@
-@mixin box-shadow($shadow) {
-  -webkit-box-shadow: $shadow;
-  box-shadow: $shadow;
-}

src/utils/mixins/fit-with-margin.scss

@@ -0,0 +1,8 @@
+@mixin fit-with-margin($margin) {
+  $offset: $margin * 2;
+
+  width: calc(100% - #{$offset});
+  max-width: calc(100% - #{$offset});
+  height: calc(100% - #{$offset});
+  margin: $margin;
+}

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/ShlinkApiClient.js

@@ -2,7 +2,6 @@ import qs from 'qs';
 import { isEmpty, isNil, reject } from 'ramda';
 
 const API_VERSION = '1';
-const STATUS_UNAUTHORIZED = 401;
 const buildRestUrl = (url) => url ? `${url}/rest/v${API_VERSION}` : '';
 
 export default class ShlinkApiClient {
@@ -10,98 +9,54 @@ export default class ShlinkApiClient {
     this.axios = axios;
     this._baseUrl = buildRestUrl(baseUrl);
     this._apiKey = apiKey || '';
-    this._token = '';
   }
 
   listShortUrls = (options = {}) =>
-    this._performRequest('/short-codes', 'GET', options)
-      .then((resp) => resp.data.shortUrls)
-      .catch((e) => this._handleAuthError(e, this.listShortUrls, [ options ]));
+    this._performRequest('/short-urls', 'GET', options)
+      .then((resp) => resp.data.shortUrls);
 
   createShortUrl = (options) => {
     const filteredOptions = reject((value) => isEmpty(value) || isNil(value), options);
 
-    return this._performRequest('/short-codes', 'POST', {}, filteredOptions)
-      .then((resp) => resp.data)
-      .catch((e) => this._handleAuthError(e, this.createShortUrl, [ filteredOptions ]));
+    return this._performRequest('/short-urls', 'POST', {}, filteredOptions)
+      .then((resp) => resp.data);
   };
 
-  getShortUrlVisits = (shortCode, dates) =>
-    this._performRequest(`/short-codes/${shortCode}/visits`, 'GET', dates)
-      .then((resp) => resp.data.visits.data)
-      .catch((e) => this._handleAuthError(e, this.getShortUrlVisits, [ shortCode, dates ]));
+  getShortUrlVisits = (shortCode, query) =>
+    this._performRequest(`/short-urls/${shortCode}/visits`, 'GET', query)
+      .then((resp) => resp.data.visits);
 
   getShortUrl = (shortCode) =>
-    this._performRequest(`/short-codes/${shortCode}`, 'GET')
-      .then((resp) => resp.data)
-      .catch((e) => this._handleAuthError(e, this.getShortUrl, [ shortCode ]));
+    this._performRequest(`/short-urls/${shortCode}`, 'GET')
+      .then((resp) => resp.data);
 
   deleteShortUrl = (shortCode) =>
-    this._performRequest(`/short-codes/${shortCode}`, 'DELETE')
-      .then(() => ({}))
-      .catch((e) => this._handleAuthError(e, this.deleteShortUrl, [ shortCode ]));
+    this._performRequest(`/short-urls/${shortCode}`, 'DELETE')
+      .then(() => ({}));
 
   updateShortUrlTags = (shortCode, tags) =>
-    this._performRequest(`/short-codes/${shortCode}/tags`, 'PUT', {}, { tags })
-      .then((resp) => resp.data.tags)
-      .catch((e) => this._handleAuthError(e, this.updateShortUrlTags, [ shortCode, tags ]));
+    this._performRequest(`/short-urls/${shortCode}/tags`, 'PUT', {}, { tags })
+      .then((resp) => resp.data.tags);
 
   listTags = () =>
     this._performRequest('/tags', 'GET')
-      .then((resp) => resp.data.tags.data)
-      .catch((e) => this._handleAuthError(e, this.listTags, []));
+      .then((resp) => resp.data.tags.data);
 
   deleteTags = (tags) =>
     this._performRequest('/tags', 'DELETE', { tags })
-      .then(() => ({ tags }))
-      .catch((e) => this._handleAuthError(e, this.deleteTags, [ tags ]));
+      .then(() => ({ tags }));
 
   editTag = (oldName, newName) =>
     this._performRequest('/tags', 'PUT', {}, { oldName, newName })
-      .then(() => ({ oldName, newName }))
-      .catch((e) => this._handleAuthError(e, this.editTag, [ oldName, newName ]));
+      .then(() => ({ oldName, newName }));
 
-  _performRequest = async (url, method = 'GET', query = {}, body = {}) => {
-    if (isEmpty(this._token)) {
-      this._token = await this._authenticate();
-    }
-
-    return await this.axios({
+  _performRequest = async (url, method = 'GET', query = {}, body = {}) =>
+    await this.axios({
       method,
       url: `${this._baseUrl}${url}`,
-      headers: { Authorization: `Bearer ${this._token}` },
+      headers: { 'X-Api-Key': this._apiKey },
       params: query,
       data: body,
       paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'brackets' }),
-    }).then((resp) => {
-      // Save new token
-      const { authorization = '' } = resp.headers;
-
-      this._token = authorization.substr('Bearer '.length);
-
-      return resp;
     });
-  };
-
-  _authenticate = async () => {
-    const resp = await this.axios({
-      method: 'POST',
-      url: `${this._baseUrl}/authenticate`,
-      data: { apiKey: this._apiKey },
-    });
-
-    return resp.data.token;
-  };
-
-  _handleAuthError = (e, method, args) => {
-    // If auth failed, reset token to force it to be regenerated, and perform a new request
-    if (e.response.status === STATUS_UNAUTHORIZED) {
-      this._token = '';
-
-      return method(...args);
-    }
-
-    // Otherwise, let caller handle the rejection
-    return Promise.reject(e);
-  };
 }

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/services/provideServices.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { stateFlagTimeout } from '../utils';
 import Storage from './Storage';
 import ColorGenerator from './ColorGenerator';
 import buildShlinkApiClient from './ShlinkApiClientBuilder';
@@ -10,6 +11,9 @@ const provideServices = (bottle) => {
 
   bottle.constant('axios', axios);
   bottle.serviceFactory('buildShlinkApiClient', buildShlinkApiClient, 'axios');
+
+  bottle.constant('setTimeout', global.setTimeout);
+  bottle.serviceFactory('stateFlagTimeout', stateFlagTimeout, 'setTimeout');
 };
 
 export default provideServices;

src/utils/utils.js

@@ -1,6 +1,20 @@
-const DEFAULT_TIMEOUT_DELAY = 2000;
+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';
 
-export const stateFlagTimeout = (setState, flagName, initialValue = true, delay = DEFAULT_TIMEOUT_DELAY) => {
+const TEN_ROUNDING_NUMBER = 10;
+const DEFAULT_TIMEOUT_DELAY = 2000;
+const { ceil } = Math;
+
+export const stateFlagTimeout = (setTimeout) => (
+  setState,
+  flagName,
+  initialValue = true,
+  delay = DEFAULT_TIMEOUT_DELAY
+) => {
   setState({ [flagName]: initialValue });
   setTimeout(() => setState({ [flagName]: !initialValue }), delay);
 };
@@ -17,3 +31,25 @@ export const determineOrderDir = (clickedField, currentOrderField, currentOrderD
 
   return currentOrderDir ? newOrderMap[currentOrderDir] : 'ASC';
 };
+
+export const fixLeafletIcons = () => {
+  delete L.Icon.Default.prototype._getIconUrl;
+
+  L.Icon.Default.mergeOptions({
+    iconRetinaUrl: marker2x,
+    iconUrl: marker,
+    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

@@ -1,6 +1,6 @@
-import preloader from '@fortawesome/fontawesome-free-solid/faCircleNotch';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import { isEmpty, mapObjIndexed } from 'ramda';
+import { faCircleNotch as preloader } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { isEmpty, mapObjIndexed, values } from 'ramda';
 import React from 'react';
 import { Card } from 'reactstrap';
 import PropTypes from 'prop-types';
@@ -8,17 +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';
 
-const ShortUrlVisits = ({
-  processOsStats,
-  processBrowserStats,
-  processCountriesStats,
-  processReferrersStats,
-}) => class ShortUrlVisits extends React.Component {
+const ShortUrlVisits = (
+  { processStatsFromVisits },
+  OpenMapModalBtn
+) => class ShortUrlVisits extends React.PureComponent {
   static propTypes = {
     match: PropTypes.shape({
       params: PropTypes.object,
@@ -27,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) {
@@ -68,17 +80,33 @@ 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-md-6">
-            <GraphCard title="Operating systems" stats={processOsStats(visits)} />
+          <div className="col-xl-4 col-lg-6">
+            <GraphCard title="Operating systems" stats={os} />
           </div>
-          <div className="col-md-6">
-            <GraphCard title="Browsers" stats={processBrowserStats(visits)} />
+          <div className="col-xl-4 col-lg-6">
+            <GraphCard title="Browsers" stats={browsers} />
           </div>
-          <div className="col-md-6">
+          <div className="col-xl-4">
             <SortableBarGraph
-              stats={processCountriesStats(visits)}
+              stats={referrers}
+              withPagination={false}
+              title="Referrers"
+              sortingItems={{
+                name: 'Referrer name',
+                amount: 'Visits amount',
+              }}
+            />
+          </div>
+          <div className="col-lg-6">
+            <SortableBarGraph
+              stats={countries}
               title="Countries"
               sortingItems={{
                 name: 'Country name',
@@ -86,12 +114,16 @@ const ShortUrlVisits = ({
               }}
             />
           </div>
-          <div className="col-md-6">
+          <div className="col-lg-6">
             <SortableBarGraph
-              stats={processReferrersStats(visits)}
-              title="Referrers"
+              stats={cities}
+              title="Cities"
+              extraHeaderContent={(activeCities) =>
+                mapLocations.length > 0 &&
+                  <OpenMapModalBtn modalTitle="Cities" locations={mapLocations} activeCities={activeCities} />
+              }
               sortingItems={{
-                name: 'Referrer name',
+                name: 'City name',
                 amount: 'Visits amount',
               }}
             />
@@ -112,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">
@@ -122,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,54 +1,124 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { fromPairs, head, identity, 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.func,
+    withPagination: PropTypes.bool,
   };
 
   state = {
     orderField: undefined,
     orderDir: undefined,
+    currentPage: 1,
+    itemsPerPage: Infinity,
   };
 
-  render() {
-    const { stats, sortingItems, title } = 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 toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : identity(value);
-      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>
-      </GraphCard>
+        {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>
+        )}
+        {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 : '';
@@ -34,13 +34,7 @@ export function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
           Visit stats for <ExternalLink href={shortLink} />
         </h2>
         <hr />
-        {shortUrl.dateCreated && (
-          <div>
-            Created:
-            &nbsp;
-            {renderDate()}
-          </div>
-        )}
+        <div>Created: {renderDate()}</div>
         <div>
           Long URL:
           &nbsp;

src/visits/helpers/MapModal.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Modal, ModalBody } from 'reactstrap';
+import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
+import { prop } from 'ramda';
+import * as PropTypes from 'prop-types';
+import './MapModal.scss';
+
+const propTypes = {
+  toggle: PropTypes.func,
+  isOpen: PropTypes.bool,
+  title: PropTypes.string,
+  locations: PropTypes.arrayOf(PropTypes.shape({
+    cityName: PropTypes.string.isRequired,
+    latLong: PropTypes.arrayOf(PropTypes.number).isRequired,
+    count: PropTypes.number.isRequired,
+  })),
+};
+const defaultProps = {
+  locations: [],
+};
+
+const OpenStreetMapTile = () => (
+  <TileLayer
+    attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+  />
+);
+
+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">
+    <ModalBody className="map-modal__modal-body">
+      <h3 className="map-modal__modal-title">
+        {title}
+        <button type="button" className="close" onClick={toggle}>&times;</button>
+      </h3>
+      <Map {...calculateMapProps(locations)}>
+        <OpenStreetMapTile />
+        {locations.map(({ cityName, latLong, count }, index) => (
+          <Marker key={index} position={latLong}>
+            <Popup><b>{count}</b> visit{count > 1 ? 's' : ''} from <b>{cityName}</b></Popup>
+          </Marker>
+        ))}
+      </Map>
+    </ModalBody>
+  </Modal>
+);
+
+MapModal.propTypes = propTypes;
+MapModal.defaultProps = defaultProps;
+
+export default MapModal;

src/visits/helpers/MapModal.scss

@@ -0,0 +1,45 @@
+@import '../../utils/base';
+@import '../../utils/mixins/fit-with-margin';
+
+.map-modal__modal {
+  @media (min-width: $mdMin) {
+    $margin: 20px;
+
+    @include fit-with-margin($margin);
+  }
+
+  @media (max-width: $smMax) {
+    $margin: 10px;
+
+    @include fit-with-margin($margin);
+  }
+}
+
+.map-modal__modal-content {
+  height: 100%;
+}
+
+.map-modal__modal-title {
+  position: absolute;
+  width: 100%;
+  z-index: 1001;
+  padding: .5rem 1rem 1rem;
+  margin: 0;
+  color: #fff;
+  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+}
+
+.map-modal__modal-body {
+  padding: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.map-modal__modal .leaflet-container {
+  flex: 1 1 auto;
+  border-radius: .3rem;
+}
+
+.map-modal__modal .leaflet-top .leaflet-control {
+  margin-top: 60px;
+}

src/visits/helpers/OpenMapModalBtn.js

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
+import { Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap';
+import * as PropTypes from 'prop-types';
+import './OpenMapModalBtn.scss';
+
+const propTypes = {
+  modalTitle: PropTypes.string.isRequired,
+  locations: PropTypes.arrayOf(PropTypes.object),
+  activeCities: PropTypes.arrayOf(PropTypes.string),
+};
+
+const OpenMapModalBtn = (MapModal) => {
+  const OpenMapModalBtn = ({ modalTitle, locations = [], activeCities }) => {
+    const [ mapIsOpened, setMapIsOpened ] = useState(false);
+    const [ dropdownIsOpened, setDropdownIsOpened ] = useState(false);
+    const [ locationsToShow, setLocationsToShow ] = useState([]);
+
+    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={onClick}>
+          <FontAwesomeIcon icon={mapIcon} />
+        </button>
+        <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/helpers/OpenMapModalBtn.scss

@@ -0,0 +1,4 @@
+.open-map-modal-btn__btn {
+  padding: 0;
+  margin-right: 1rem;
+}