Added v1.2.1 to changelog

Merge pull request #86 from acelaya/feature/code-coverage
Feature/code coverage
2026-02-25 19:26:36 +00:00 · 2018-12-21 11:03:51 +01:00 · 2018-12-21 11:03:12 +01:00 · 2018-12-21 10:58:51 +01:00 · 2018-12-21 10:38:40 +01:00 · 2018-12-21 10:34:12 +01:00
135 changed files with 3999 additions and 1403 deletions
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,6 +2,7 @@
  "extends": [
    "adidas-env/browser",
    "adidas-env/module",
+    "adidas-env/node",
    "adidas-es6",
    "adidas-babel",
    "adidas-react"
@@ -35,6 +36,7 @@
    "react/jsx-first-prop-new-line": ["error", "multiline-multiprop"],
    "react/jsx-closing-bracket-location": ["error", "tag-aligned"],
    "react/no-array-index-key": "off",
-    "react/no-did-update-set-state": "off"
+    "react/no-did-update-set-state": "off",
+    "react/display-name": "off"
  }
 }
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,5 +1,7 @@
 language: node_js

+sudo: false
+
 node_js:
  - "stable"

@@ -14,9 +16,20 @@ install:
 script:
  - yarn lint
  - yarn test:ci
-  - yarn build # Make sure the app can be built without errors
+  - if [[ -z $TRAVIS_TAG ]]; then yarn build ; fi

-after_script:
+after_success:
  - yarn ocular coverage/clover.xml

-sudo: false
+# Before deploying, build dist file for current travis tag
+before_deploy:
+  - yarn build ${TRAVIS_TAG#?}
+
+deploy:
+  provider: releases
+  api_key:
+    secure: jBvPwC7EAbViaNR83rwMSt5XQDK0Iu9rgvEMa7GoyShbHcvUCCPd73Tu9quNpKi6NKsDY3INHgtch3vgonjGNGDGJ+yDyIBzXcvsAX2x3UcHpRbgY12uiINVmQxBI1+OVQB016Nm+cKC/i5Z36K4EmDbYfo+MrKndngM6AjcQFTwI8EwniIMaQgg4gNes//K8NhP5u0c3gwG+Q6jEGnq6uH3kcRgh6/epIZYpQyxjqWqKwF77sgcYj+X2Nf6XxtB5neuCi301UKLoLx8G0skh/Lm6KAIO4s9iIhIFa3UpoF21Ka0TxLpd2JxalLryCnFGlWWE6lxC9Htmc0TeRowJQlGdJXCskJ37xT9MljKY0fwNMu06VS/FUgykuCv+jP3zQu51pKu7Ew7+WeNPjautoOTu54VkdGyHcf2ThBNEyJQuiEwAQe4u7yAxY6R5ovEdvHBSIg4w1E5/Mxy5SMTCUlIAv6H7QQ1X9Z/zJm9HH5KeKz5tsHvQ/RIdSpgHXq/tC8o4Yup/LCFucXfrgvy/8pJoO1UpOlmvm62974NFfo0EG5YWwv6brUqz3QXpMjb8sWqgjltYMYJX3J7WZ34rIc+zt4NAmfhqgczaOC4pUGCiJ8jX3rMWIaQRn1AJ+5V337jL9fNDpTHny4phQjHrMJ1e0HZuNp0Xb5Q8wgqDPM=
+  file: "./dist/shlink-web-client_${TRAVIS_TAG#?}_dist.zip"
+  skip_cleanup: true
+  on:
+    tags: true
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,110 @@
 # CHANGELOG

+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).
+
+## 1.2.1 - 2018-12-21
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* [#80](https://github.com/shlinkio/shlink-web-client/issues/80) Deeply refactored app to do true dependency injection with an IoC container.
+* [#79](https://github.com/shlinkio/shlink-web-client/issues/79) Updated to nginx 1.15.7 as the base docker image.
+* [#75](https://github.com/shlinkio/shlink-web-client/issues/75) Prevented duplicated `yarn build` in travis when a tag exists.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#77](https://github.com/shlinkio/shlink-web-client/issues/77) Sortable graphs ordering is now case insensitive.
+
+
+## 1.2.0 - 2018-11-01
+
+#### Added
+
+* [#65](https://github.com/shlinkio/shlink-web-client/issues/65) Added sorting to both countries and referrers stats graphs.
+* [#14](https://github.com/shlinkio/shlink-web-client/issues/14) Documented how to build the project so that it can be served from a subpath.
+
+#### Changed
+
+* [#50](https://github.com/shlinkio/shlink-web-client/issues/50) Improved tests and increased code coverage.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#66](https://github.com/shlinkio/shlink-web-client/issues/66) Fixed tooltips in graphs with too small bars not being displayed.
+
+
+## 1.1.1 - 2018-10-20
+
+#### Added
+
+* [#57](https://github.com/shlinkio/shlink-web-client/issues/57) Automated release generation in travis build.
+
+#### Changed
+
+* *Nothing*
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#63](https://github.com/shlinkio/shlink-web-client/issues/63) Improved how bar charts are rendered in stats page, making them try to calculate a bigger height for big data sets.
+* [#56](https://github.com/shlinkio/shlink-web-client/issues/56) Ensured `ColorGenerator` matches keys in a case insensitive way.
+* [#53](https://github.com/shlinkio/shlink-web-client/issues/53) Fixed missing margin between date fields in visits page for mobile devices.
+
+
+## 1.1.0 - 2018-09-16
+
+#### Added
+
+* [#47](https://github.com/shlinkio/shlink-web-client/issues/47) Added support to delete short URLs (requires [shlink v1.12.0](https://github.com/shlinkio/shlink/releases/tag/v1.12.0) or greater).
+
+#### Changed
+
+* [#35](https://github.com/shlinkio/shlink-web-client/issues/35) Visits component split into two, which makes the header not to be refreshed when filtering by date, and also the visits global counter now reflects the actual number of visits which fulfill current filter.
+* [#36](https://github.com/shlinkio/shlink-web-client/issues/36) Tags selector now autocompletes existing tag names, to prevent typos and ease reusing existing tags.
+* [#39](https://github.com/shlinkio/shlink-web-client/issues/39) Defined `propTypes` as static properties in class components.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#49](https://github.com/shlinkio/shlink-web-client/issues/49) Ensured filtering parameters are reseted when list component is unmounted so that params are not mixed when coming back.
+* [#45](https://github.com/shlinkio/shlink-web-client/issues/45) Ensured graphs x-axis start at `0` and don't use decimals.
+* [#51](https://github.com/shlinkio/shlink-web-client/issues/51) When editing short URL tags, the value returned form server is used when refreshing the list, which is normalized.
+
+
 ## 1.0.1 - 2018-09-02

 #### Added
@@ -33,7 +138,7 @@
    * Export all servers in a CSV file.
    * Import the CSV in a different device.

-* [#4](https://github.com/shlinkio/shlink-web-client/issues/4) Added tags management.
+* [#3](https://github.com/shlinkio/shlink-web-client/issues/3) Added tags management.

    * List existing tags, and filter the list.
    * Change their name and color.
--- a/2
+++ b/2
@@ -1,4 +1,4 @@
-FROM nginx:1.15.2-alpine
+FROM nginx:1.15.7-alpine
 MAINTAINER Alejandro Celaya <alejandro@alejandrocelaya.com>

 # Install node and yarn
--- a/README.md
+++ b/README.md
@@ -1,10 +1,11 @@
 # 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)
-[![Code Coverage](https://img.shields.io/scrutinizer/coverage/g/shlinkio/shlink-web-client.svg?style=flat-square)](https://scrutinizer-ci.com/gshlinkio/shlink-web-client/?branch=master)
+[![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)
 [![GitHub license](https://img.shields.io/github/license/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/blob/master/LICENSE)
+[![Paypal Donate](https://img.shields.io/badge/Donate-paypal-blue.svg?style=flat-square&logo=paypal&colorA=cccccc)](https://acel.me/donate)

 A ReactJS-based progressive web application for [Shlink](https://shlink.io).

@@ -20,10 +21,30 @@ There are three ways in which you can use this application.

    Get the [latest release](https://github.com/shlinkio/shlink-web-client/releases/latest) and download the distributable zip file attached to it (`shlink-web-client_X.X.X_dist.zip`).

-    The package contains static files only, so just put it in a folder and serve it with the web server of your choice (just take into account that all the files are served using absolute paths, so you have to serve it from the root of your domain, not from a subpath).
+    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).

 * Use 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 (docker swarm, kubernetes, 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 image and do it.

-    It's a lightweight [nginx:alpine image](https://hub.docker.com/r/library/nginx/) serving the assets on port 80.
+    It's a lightweight [nginx:alpine](https://hub.docker.com/r/library/nginx/) image serving the assets on port 80.
+
+## Serve project in subpath
+
+Official distributable files have been build 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.
+    * 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.
--- a/6
+++ b/6
@@ -1,2 +1,8 @@
 #!/usr/bin/env bash
+
+# Run docker container if it's not up yet
+if ! [[ $(docker ps | grep shlink_web_client_node) ]]; then
+    docker-compose up -d
+fi
+
 docker exec -it shlink_web_client_node /bin/sh -c "cd /home/shlink/www && $*"
--- a/jest.config.js
+++ b/jest.config.js
@@ -0,0 +1,36 @@
+module.exports = {
+  coverageDirectory: '<rootDir>/coverage',
+  collectCoverageFrom: [
+    'src/**/*.js',
+    '!src/registerServiceWorker.js',
+    '!src/index.js',
+    '!src/reducers/index.js',
+    '!src/**/provideServices.js',
+    '!src/container/*.js',
+  ],
+  setupFiles: [
+    '<rootDir>/config/polyfills.js',
+    '<rootDir>/config/setupEnzyme.js',
+  ],
+  testMatch: [ '<rootDir>/test/**/*.test.{js,jsx,mjs}' ],
+  testEnvironment: 'node',
+  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)$' ],
+  moduleNameMapper: {
+    '^react-native$': 'react-native-web',
+  },
+  moduleFileExtensions: [
+    'web.js',
+    'js',
+    'json',
+    'web.jsx',
+    'jsx',
+    'node',
+    'mjs',
+  ],
+};
--- a/package.json
+++ b/package.json
@@ -3,13 +3,15 @@
  "description": "A React-based progressive web application for shlink",
  "version": "1.0.0",
  "private": false,
+  "homepage": "",
  "scripts": {
    "lint": "yarn lint:js && yarn lint:css",
    "lint:js": "eslint src test scripts config",
    "lint:js:fix": "yarn lint:js --fix",
-    "lint:css": "stylelint src/**/*.scss",
+    "lint:css": "stylelint src/*.scss src/**/*.scss",
    "lint:css:fix": "yarn lint:css --fix",
    "start": "node scripts/start.js",
+    "serve:build": "yarn 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",
@@ -22,6 +24,7 @@
    "@fortawesome/react-fontawesome": "0.0.19",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.1",
+    "bottlejs": "^1.7.1",
    "chart.js": "^2.7.2",
    "classnames": "^2.2.6",
    "csvjson": "^5.1.0",
@@ -30,7 +33,8 @@
    "prop-types": "^15.6.2",
    "qs": "^6.5.2",
    "ramda": "^0.25.0",
-    "react": "^16.3.2",
+    "react": "^16.6",
+    "react-autosuggest": "^9.4.0",
    "react-chartjs-2": "^2.7.4",
    "react-color": "^2.14.1",
    "react-copy-to-clipboard": "^5.0.1",
@@ -101,41 +105,6 @@
    "webpack-manifest-plugin": "1.3.2",
    "whatwg-fetch": "2.0.3"
  },
-  "jest": {
-    "coverageDirectory": "<rootDir>/coverage",
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,mjs}"
-    ],
-    "setupFiles": [
-      "<rootDir>/config/polyfills.js",
-      "<rootDir>/config/setupEnzyme.js"
-    ],
-    "testMatch": [
-      "<rootDir>/test/**/*.test.{js,jsx,mjs}"
-    ],
-    "testEnvironment": "node",
-    "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)$"
-    ],
-    "moduleNameMapper": {
-      "^react-native$": "react-native-web"
-    },
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node",
-      "mjs"
-    ]
-  },
  "babel": {
    "presets": [
      "react-app"
--- a/public/index.html
+++ b/public/index.html
@@ -4,17 +4,19 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#4696e5">
+
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/icons/shlink-128.png">
    <link rel="apple-touch-icon" sizes="64x64" href="%PUBLIC_URL%/icons/shlink-64.png">
    <link rel="apple-touch-icon" sizes="32x32" href="%PUBLIC_URL%/icons/shlink-32.png">
    <link rel="apple-touch-icon" sizes="24x24" href="%PUBLIC_URL%/icons/shlink-24.png">
    <link rel="apple-touch-icon" sizes="16x16" href="%PUBLIC_URL%/icons/shlink-16.png">
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,19 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import './App.scss';
-import Home from './common/Home';
-import MainHeader from './common/MainHeader';
-import MenuLayout from './common/MenuLayout';
-import CreateServer from './servers/CreateServer';

-export default function App() {
-  return (
-    <div className="container-fluid app-container">
-      <MainHeader />
+const App = (MainHeader, Home, MenuLayout, CreateServer) => () => (
+  <div className="container-fluid app-container">
+    <MainHeader />

-      <div className="app">
-        <Switch>
-          <Route exact path="/server/create" component={CreateServer} />
-          <Route exact path="/" component={Home} />
-          <Route path="/server/:serverId" component={MenuLayout} />
-        </Switch>
-      </div>
+    <div className="app">
+      <Switch>
+        <Route exact path="/server/create" component={CreateServer} />
+        <Route exact path="/" component={Home} />
+        <Route path="/server/:serverId" component={MenuLayout} />
+      </Switch>
    </div>
-  );
-}
+  </div>
+);
+
+export default App;
--- a/src/common/AsideMenu.js
+++ b/src/common/AsideMenu.js
@@ -6,9 +6,8 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import DeleteServerButton from '../servers/DeleteServerButton';
-import './AsideMenu.scss';
 import { serverType } from '../servers/prop-types';
+import './AsideMenu.scss';

 const defaultProps = {
  className: '',
@@ -20,51 +19,57 @@ const propTypes = {
  showOnMobile: PropTypes.bool,
 };

-export default function AsideMenu({ selectedServer, className, showOnMobile }) {
-  const serverId = selectedServer ? selectedServer.id : '';
-  const asideClass = classnames('aside-menu', className, {
-    'aside-menu--hidden': !showOnMobile,
-  });
-  const shortUrlsIsActive = (match, location) => location.pathname.match('/list-short-urls');
+const AsideMenu = (DeleteServerButton) => {
+  const AsideMenu = ({ selectedServer, className, showOnMobile }) => {
+    const serverId = selectedServer ? selectedServer.id : '';
+    const asideClass = classnames('aside-menu', className, {
+      'aside-menu--hidden': !showOnMobile,
+    });
+    const shortUrlsIsActive = (match, location) => location.pathname.match('/list-short-urls');

-  return (
-    <aside className={asideClass}>
-      <nav className="nav flex-column aside-menu__nav">
-        <NavLink
-          className="aside-menu__item"
-          activeClassName="aside-menu__item--selected"
-          to={`/server/${serverId}/list-short-urls/1`}
-          isActive={shortUrlsIsActive}
-        >
-          <FontAwesomeIcon icon={listIcon} />
-          <span className="aside-menu__item-text">List short URLs</span>
-        </NavLink>
-        <NavLink
-          className="aside-menu__item"
-          activeClassName="aside-menu__item--selected"
-          to={`/server/${serverId}/create-short-url`}
-        >
-          <FontAwesomeIcon icon={createIcon} flip="horizontal" />
-          <span className="aside-menu__item-text">Create short URL</span>
-        </NavLink>
+    return (
+      <aside className={asideClass}>
+        <nav className="nav flex-column aside-menu__nav">
+          <NavLink
+            className="aside-menu__item"
+            activeClassName="aside-menu__item--selected"
+            to={`/server/${serverId}/list-short-urls/1`}
+            isActive={shortUrlsIsActive}
+          >
+            <FontAwesomeIcon icon={listIcon} />
+            <span className="aside-menu__item-text">List short URLs</span>
+          </NavLink>
+          <NavLink
+            className="aside-menu__item"
+            activeClassName="aside-menu__item--selected"
+            to={`/server/${serverId}/create-short-url`}
+          >
+            <FontAwesomeIcon icon={createIcon} flip="horizontal" />
+            <span className="aside-menu__item-text">Create short URL</span>
+          </NavLink>

-        <NavLink
-          className="aside-menu__item"
-          activeClassName="aside-menu__item--selected"
-          to={`/server/${serverId}/manage-tags`}
-        >
-          <FontAwesomeIcon icon={tagsIcon} />
-          <span className="aside-menu__item-text">Manage tags</span>
-        </NavLink>
+          <NavLink
+            className="aside-menu__item"
+            activeClassName="aside-menu__item--selected"
+            to={`/server/${serverId}/manage-tags`}
+          >
+            <FontAwesomeIcon icon={tagsIcon} />
+            <span className="aside-menu__item-text">Manage tags</span>
+          </NavLink>

-        <DeleteServerButton
-          className="aside-menu__item aside-menu__item--danger"
-          server={selectedServer}
-        />
-      </nav>
-    </aside>
-  );
-}
+          <DeleteServerButton
+            className="aside-menu__item aside-menu__item--danger"
+            server={selectedServer}
+          />
+        </nav>
+      </aside>
+    );
+  };

-AsideMenu.defaultProps = defaultProps;
-AsideMenu.propTypes = propTypes;
+  AsideMenu.defaultProps = defaultProps;
+  AsideMenu.propTypes = propTypes;
+
+  return AsideMenu;
+};
+
+export default AsideMenu;
--- a/src/common/DateInput.js
+++ b/src/common/DateInput.js
@@ -1,37 +0,0 @@
-import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import React from 'react';
-import DatePicker from 'react-datepicker';
-import './DateInput.scss';
-import { isNil } from 'ramda';
-
-export default class DateInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.inputRef = React.createRef();
-  }
-
-  render() {
-    const { isClearable, selected } = this.props;
-    const showCalendarIcon = !isClearable || isNil(selected);
-
-    return (
-      <div className="date-input-container">
-        <DatePicker
-          {...this.props}
-          className={`date-input-container__input form-control ${this.props.className || ''}`}
-          dateFormat="YYYY-MM-DD"
-          readOnly
-          ref={this.inputRef}
-        />
-        {showCalendarIcon && (
-          <FontAwesomeIcon
-            icon={calendarIcon}
-            className="date-input-container__icon"
-            onClick={() => this.inputRef.current.input.focus()}
-          />
-        )}
-      </div>
-    );
-  }
-}
--- a/src/common/Home.js
+++ b/src/common/Home.js
@@ -1,20 +1,18 @@
 import chevronIcon from '@fortawesome/fontawesome-free-solid/faChevronRight';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import { isEmpty, pick, values } from 'ramda';
+import { isEmpty, values } from 'ramda';
 import React from 'react';
-import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { ListGroup, ListGroupItem } from 'reactstrap';
 import PropTypes from 'prop-types';
-import { resetSelectedServer } from '../servers/reducers/selectedServer';
 import './Home.scss';

-const propTypes = {
-  resetSelectedServer: PropTypes.func,
-  servers: PropTypes.object,
-};
+export default class Home extends React.Component {
+  static propTypes = {
+    resetSelectedServer: PropTypes.func,
+    servers: PropTypes.object,
+  };

-export class HomeComponent extends React.Component {
  componentDidMount() {
    this.props.resetSelectedServer();
  }
@@ -50,9 +48,3 @@ export class HomeComponent extends React.Component {
    );
  }
 }
-
-HomeComponent.propTypes = propTypes;
-
-const Home = connect(pick([ 'servers' ]), { resetSelectedServer })(HomeComponent);
-
-export default Home;
--- a/src/common/MainHeader.js
+++ b/src/common/MainHeader.js
@@ -2,19 +2,18 @@ import plusIcon from '@fortawesome/fontawesome-free-solid/faPlus';
 import arrowIcon from '@fortawesome/fontawesome-free-solid/faChevronDown';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
-import { Link, withRouter } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import ServersDropdown from '../servers/ServersDropdown';
-import './MainHeader.scss';
 import shlinkLogo from './shlink-logo-white.png';
+import './MainHeader.scss';

-const propTypes = {
-  location: PropTypes.object,
-};
+const MainHeader = (ServersDropdown) => class MainHeader extends React.Component {
+  static propTypes = {
+    location: PropTypes.object,
+  };

-export class MainHeaderComponent extends React.Component {
  state = { isOpen: false };
  handleToggle = () => {
    this.setState(({ isOpen }) => ({
@@ -62,10 +61,6 @@ export class MainHeaderComponent extends React.Component {
      </Navbar>
    );
  }
-}
-
-MainHeaderComponent.propTypes = propTypes;
-
-const MainHeader = withRouter(MainHeaderComponent);
+};

 export default MainHeader;
--- a/src/common/MenuLayout.js
+++ b/src/common/MenuLayout.js
@@ -1,115 +1,100 @@
 import React from 'react';
-import { Route, Switch, withRouter } from 'react-router-dom';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { pick } from 'ramda';
+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 classnames from 'classnames';
 import * as PropTypes from 'prop-types';
-import ShortUrlsVisits from '../short-urls/ShortUrlVisits';
-import { selectServer } from '../servers/reducers/selectedServer';
-import CreateShortUrl from '../short-urls/CreateShortUrl';
-import ShortUrls from '../short-urls/ShortUrls';
-import './MenuLayout.scss';
-import TagsList from '../tags/TagsList';
 import { serverType } from '../servers/prop-types';
-import AsideMenu from './AsideMenu';
+import './MenuLayout.scss';

-const propTypes = {
-  match: PropTypes.object,
-  selectServer: PropTypes.func,
-  location: PropTypes.object,
-  selectedServer: serverType,
-};
+const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits) =>
+  class MenuLayout extends React.Component {
+    static propTypes = {
+      match: PropTypes.object,
+      selectServer: PropTypes.func,
+      location: PropTypes.object,
+      selectedServer: serverType,
+    };

-export class MenuLayoutComponent extends React.Component {
-  state = { showSideBar: false };
+    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() {
-    const { match, selectServer } = this.props;
-    const { params: { serverId } } = match;
+    // FIXME Shouldn't use componentWillMount, but this code has to be run before children components are rendered
+    /* eslint react/no-deprecated: "off" */
+    componentWillMount() {
+      const { match, selectServer } = this.props;
+      const { params: { serverId } } = match;

-    selectServer(serverId);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { location } = this.props;
-
-    // Hide sidebar when location changes
-    if (location !== prevProps.location) {
-      this.setState({ showSideBar: false });
+      selectServer(serverId);
    }
-  }

-  render() {
-    const { selectedServer } = this.props;
-    const burgerClasses = classnames('menu-layout__burger-icon', {
-      'menu-layout__burger-icon--active': this.state.showSideBar,
-    });
+    componentDidUpdate(prevProps) {
+      const { location } = this.props;

-    return (
-      <React.Fragment>
-        <FontAwesomeIcon
-          icon={burgerIcon}
-          className={burgerClasses}
-          onClick={() => this.setState(({ showSideBar }) => ({ showSideBar: !showSideBar }))}
-        />
+      // Hide sidebar when location changes
+      if (location !== prevProps.location) {
+        this.setState({ showSideBar: false });
+      }
+    }

-        <Swipeable
-          delta={40}
-          className="menu-layout__swipeable"
-          onSwipedLeft={() => this.setState({ showSideBar: false })}
-          onSwipedRight={() => this.setState({ showSideBar: true })}
-        >
-          <div className="row menu-layout__swipeable-inner">
-            <AsideMenu
-              className="col-lg-2 col-md-3"
-              selectedServer={selectedServer}
-              showOnMobile={this.state.showSideBar}
-            />
-            <div
-              className="col-lg-10 offset-lg-2 col-md-9 offset-md-3"
-              onClick={() => this.setState({ showSideBar: false })}
-            >
-              <Switch>
-                <Route
-                  exact
-                  path="/server/:serverId/list-short-urls/:page"
-                  component={ShortUrls}
-                />
-                <Route
-                  exact
-                  path="/server/:serverId/create-short-url"
-                  component={CreateShortUrl}
-                />
-                <Route
-                  exact
-                  path="/server/:serverId/short-code/:shortCode/visits"
-                  component={ShortUrlsVisits}
-                />
-                <Route
-                  exact
-                  path="/server/:serverId/manage-tags"
-                  component={TagsList}
-                />
-              </Switch>
+    render() {
+      const { selectedServer } = this.props;
+      const burgerClasses = classnames('menu-layout__burger-icon', {
+        'menu-layout__burger-icon--active': this.state.showSideBar,
+      });
+
+      return (
+        <React.Fragment>
+          <FontAwesomeIcon
+            icon={burgerIcon}
+            className={burgerClasses}
+            onClick={() => this.setState(({ showSideBar }) => ({ showSideBar: !showSideBar }))}
+          />
+
+          <Swipeable
+            delta={40}
+            className="menu-layout__swipeable"
+            onSwipedLeft={() => this.setState({ showSideBar: false })}
+            onSwipedRight={() => this.setState({ showSideBar: true })}
+          >
+            <div className="row menu-layout__swipeable-inner">
+              <AsideMenu
+                className="col-lg-2 col-md-3"
+                selectedServer={selectedServer}
+                showOnMobile={this.state.showSideBar}
+              />
+              <div
+                className="col-lg-10 offset-lg-2 col-md-9 offset-md-3"
+                onClick={() => this.setState({ showSideBar: false })}
+              >
+                <Switch>
+                  <Route
+                    exact
+                    path="/server/:serverId/list-short-urls/:page"
+                    component={ShortUrls}
+                  />
+                  <Route
+                    exact
+                    path="/server/:serverId/create-short-url"
+                    component={CreateShortUrl}
+                  />
+                  <Route
+                    exact
+                    path="/server/:serverId/short-code/:shortCode/visits"
+                    component={ShortUrlVisits}
+                  />
+                  <Route
+                    exact
+                    path="/server/:serverId/manage-tags"
+                    component={TagsList}
+                  />
+                </Switch>
+              </div>
            </div>
-          </div>
-        </Swipeable>
-      </React.Fragment>
-    );
-  }
-}
-
-MenuLayoutComponent.propTypes = propTypes;
-
-const MenuLayout = compose(
-  connect(pick([ 'selectedServer', 'shortUrlsListParams' ]), { selectServer }),
-  withRouter
-)(MenuLayoutComponent);
+          </Swipeable>
+        </React.Fragment>
+      );
+    }
+  };

 export default MenuLayout;
--- a/src/common/ScrollToTop.js
+++ b/src/common/ScrollToTop.js
@@ -1,21 +1,14 @@
 import React from 'react';
-import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';

-const propTypes = {
-  location: PropTypes.object,
-  window: PropTypes.shape({
-    scrollTo: PropTypes.func,
-  }),
-  children: PropTypes.node,
-};
-const defaultProps = {
-  window,
-};
+const ScrollToTop = (window) => class ScrollToTop extends React.Component {
+  static propTypes = {
+    location: PropTypes.object,
+    children: PropTypes.node,
+  };

-export class ScrollToTopComponent extends React.Component {
  componentDidUpdate(prevProps) {
-    const { location, window } = this.props;
+    const { location } = this.props;

    if (location !== prevProps.location) {
      window.scrollTo(0, 0);
@@ -25,11 +18,6 @@ export class ScrollToTopComponent extends React.Component {
  render() {
    return this.props.children;
  }
-}
-
-ScrollToTopComponent.defaultProps = defaultProps;
-ScrollToTopComponent.propTypes = propTypes;
-
-const ScrollToTop = withRouter(ScrollToTopComponent);
+};

 export default ScrollToTop;
--- a/src/common/react-tagsinput.scss
+++ b/src/common/react-tagsinput.scss
@@ -5,15 +5,12 @@
  overflow: hidden;
  min-height: 2.6rem;
  padding: 6px 0 0 6px;
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 }

 .react-tagsinput--focused {
  border-color: #80bdff;
-  -webkit-box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
-  -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
-  -o-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
 }

 .react-tagsinput-tag {
@@ -44,6 +41,6 @@
  border: 0;
  outline: none;
  padding: 3px 5px;
-  width: 155px;
+  width: 100%;
  margin-bottom: 6px;
 }
--- a/src/common/services/provideServices.js
+++ b/src/common/services/provideServices.js
@@ -0,0 +1,34 @@
+import ScrollToTop from '../ScrollToTop';
+import MainHeader from '../MainHeader';
+import Home from '../Home';
+import MenuLayout from '../MenuLayout';
+import AsideMenu from '../AsideMenu';
+
+const provideServices = (bottle, connect, withRouter) => {
+  bottle.constant('window', global.window);
+
+  bottle.serviceFactory('ScrollToTop', ScrollToTop, 'window');
+  bottle.decorator('ScrollToTop', withRouter);
+
+  bottle.serviceFactory('MainHeader', MainHeader, 'ServersDropdown');
+  bottle.decorator('MainHeader', withRouter);
+
+  bottle.serviceFactory('Home', () => Home);
+  bottle.decorator('Home', connect([ 'servers' ], [ 'resetSelectedServer' ]));
+
+  bottle.serviceFactory(
+    'MenuLayout',
+    MenuLayout,
+    'TagsList',
+    'ShortUrls',
+    'AsideMenu',
+    'CreateShortUrl',
+    'ShortUrlVisits'
+  );
+  bottle.decorator('MenuLayout', connect([ 'selectedServer', 'shortUrlsListParams' ], [ 'selectServer' ]));
+  bottle.decorator('MenuLayout', withRouter);
+
+  bottle.serviceFactory('AsideMenu', AsideMenu, 'DeleteServerButton');
+};
+
+export default provideServices;
--- a/src/container/index.js
+++ b/src/container/index.js
@@ -0,0 +1,37 @@
+import Bottle from 'bottlejs';
+import { withRouter } from 'react-router-dom';
+import { connect as reduxConnect } from 'react-redux';
+import { pick } from 'ramda';
+import App from '../App';
+import provideCommonServices from '../common/services/provideServices';
+import provideShortUrlsServices from '../short-urls/services/provideServices';
+import provideServersServices from '../servers/services/provideServices';
+import provideVisitsServices from '../visits/services/provideServices';
+import provideTagsServices from '../tags/services/provideServices';
+import provideUtilsServices from '../utils/services/provideServices';
+
+const bottle = new Bottle();
+const { container } = bottle;
+
+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),
+});
+const connect = (propsFromState, actionServiceNames) =>
+  reduxConnect(
+    propsFromState ? pick(propsFromState) : null,
+    actionServiceNames.reduce(mapActionService, {})
+  );
+
+bottle.serviceFactory('App', App, 'MainHeader', 'Home', 'MenuLayout', 'CreateServer');
+
+provideCommonServices(bottle, connect, withRouter);
+provideShortUrlsServices(bottle, connect);
+provideServersServices(bottle, connect, withRouter);
+provideTagsServices(bottle, connect);
+provideVisitsServices(bottle, connect);
+provideUtilsServices(bottle);
+
+export default container;
--- a/src/container/store.js
+++ b/src/container/store.js
@@ -0,0 +1,13 @@
+import ReduxThunk from 'redux-thunk';
+import { applyMiddleware, compose, createStore } from 'redux';
+import reducers from '../reducers';
+
+const composeEnhancers = process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+  : compose;
+
+const store = createStore(reducers, composeEnhancers(
+  applyMiddleware(ReduxThunk)
+));
+
+export default store;
--- a/src/index.js
+++ b/src/index.js
@@ -1,28 +1,21 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
-import { applyMiddleware, compose, createStore } from 'redux';
-import ReduxThunk from 'redux-thunk';
-import App from './App';
-import './index.scss';
-import ScrollToTop from './common/ScrollToTop';
-import reducers from './reducers';
+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 './common/react-tagsinput.scss';
+import './index.scss';

-const composeEnhancers = process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-  : compose;
-const store = createStore(reducers, composeEnhancers(
-  applyMiddleware(ReduxThunk)
-));
+const { App, ScrollToTop } = container;

-ReactDOM.render(
+render(
  <Provider store={store}>
-    <BrowserRouter>
+    <BrowserRouter basename={homepage}>
      <ScrollToTop>
        <App />
      </ScrollToTop>
--- a/src/index.scss
+++ b/src/index.scss
@@ -3,7 +3,7 @@
 html,
 body,
 #root {
-  height: 100%
+  height: 100%;
 }

 * {
@@ -18,12 +18,14 @@ body,
  background-color: $mainColor !important;
 }

-.dropdown-item {
+.dropdown-item:not(:disabled) {
  cursor: pointer;
 }
-.dropdown-item.active,
-.dropdown-item:active {
-  @extend .bg-main;
+
+.dropdown-item.active:not(:disabled),
+.dropdown-item:active:not(:disabled) {
+  background-color: $lightGrey !important;
+  color: inherit !important;
 }

 .shlink-container {
@@ -46,7 +48,6 @@ body,

 .navbar-brand {
  @media (max-width: $smMax) {
-    margin-right: auto !important; // This is needed to override a third party style
-    margin: 0 auto;
+    margin: 0 auto !important;
  }
 }
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -3,9 +3,11 @@ import serversReducer from '../servers/reducers/server';
 import selectedServerReducer from '../servers/reducers/selectedServer';
 import shortUrlsListReducer from '../short-urls/reducers/shortUrlsList';
 import shortUrlsListParamsReducer from '../short-urls/reducers/shortUrlsListParams';
-import shortUrlCreationResultReducer from '../short-urls/reducers/shortUrlCreationResult';
-import shortUrlVisitsReducer from '../short-urls/reducers/shortUrlVisits';
+import shortUrlCreationReducer from '../short-urls/reducers/shortUrlCreation';
+import shortUrlDeletionReducer from '../short-urls/reducers/shortUrlDeletion';
 import shortUrlTagsReducer from '../short-urls/reducers/shortUrlTags';
+import shortUrlVisitsReducer from '../visits/reducers/shortUrlVisits';
+import shortUrlDetailReducer from '../visits/reducers/shortUrlDetail';
 import tagsListReducer from '../tags/reducers/tagsList';
 import tagDeleteReducer from '../tags/reducers/tagDelete';
 import tagEditReducer from '../tags/reducers/tagEdit';
@@ -15,9 +17,11 @@ export default combineReducers({
  selectedServer: selectedServerReducer,
  shortUrlsList: shortUrlsListReducer,
  shortUrlsListParams: shortUrlsListParamsReducer,
-  shortUrlCreationResult: shortUrlCreationResultReducer,
-  shortUrlVisits: shortUrlVisitsReducer,
+  shortUrlCreationResult: shortUrlCreationReducer,
+  shortUrlDeletion: shortUrlDeletionReducer,
  shortUrlTags: shortUrlTagsReducer,
+  shortUrlVisits: shortUrlVisitsReducer,
+  shortUrlDetail: shortUrlDetailReducer,
  tagsList: tagsListReducer,
  tagDelete: tagDeleteReducer,
  tagEdit: tagEditReducer,
--- a/src/servers/CreateServer.js
+++ b/src/servers/CreateServer.js
@@ -1,17 +1,13 @@
-import { assoc, dissoc, pick, pipe } from 'ramda';
+import { assoc, dissoc, pipe } from 'ramda';
 import React from 'react';
-import { connect } from 'react-redux';
 import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
 import { stateFlagTimeout } from '../utils/utils';
-import { resetSelectedServer } from './reducers/selectedServer';
-import { createServer } from './reducers/server';
 import './CreateServer.scss';
-import ImportServersBtn from './helpers/ImportServersBtn';

 const SHOW_IMPORT_MSG_TIME = 4000;

-export class CreateServerComponent extends React.Component {
+const CreateServer = (ImportServersBtn) => class CreateServer extends React.Component {
  static propTypes = {
    createServer: PropTypes.func,
    history: PropTypes.shape({
@@ -91,11 +87,6 @@ export class CreateServerComponent extends React.Component {
      </div>
    );
  }
-}
-
-const CreateServer = connect(
-  pick([ 'selectedServer' ]),
-  { createServer, resetSelectedServer }
-)(CreateServerComponent);
+};

 export default CreateServer;
--- a/src/servers/DeleteServerButton.js
+++ b/src/servers/DeleteServerButton.js
@@ -2,15 +2,14 @@ import deleteIcon from '@fortawesome/fontawesome-free-solid/faMinusCircle';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import PropTypes from 'prop-types';
-import DeleteServerModal from './DeleteServerModal';
 import { serverType } from './prop-types';

-const propTypes = {
-  server: serverType,
-  className: PropTypes.string,
-};
+const DeleteServerButton = (DeleteServerModal) => class DeleteServerButton extends React.Component {
+  static propTypes = {
+    server: serverType,
+    className: PropTypes.string,
+  };

-export default class DeleteServerButton extends React.Component {
  state = { isModalOpen: false };

  render() {
@@ -36,6 +35,6 @@ export default class DeleteServerButton extends React.Component {
      </React.Fragment>
    );
  }
-}
+};

-DeleteServerButton.propTypes = propTypes;
+export default DeleteServerButton;
--- a/src/servers/DeleteServerModal.js
+++ b/src/servers/DeleteServerModal.js
@@ -1,10 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import { compose } from 'redux';
-import { deleteServer } from './reducers/server';
 import { serverType } from './prop-types';

 const propTypes = {
@@ -17,7 +13,7 @@ const propTypes = {
  }),
 };

-export const DeleteServerModalComponent = ({ server, toggle, isOpen, deleteServer, history }) => {
+const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }) => {
  const closeModal = () => {
    deleteServer(server);
    toggle();
@@ -42,11 +38,6 @@ export const DeleteServerModalComponent = ({ server, toggle, isOpen, deleteServe
  );
 };

-DeleteServerModalComponent.propTypes = propTypes;
-
-const DeleteServerModal = compose(
-  withRouter,
-  connect(null, { deleteServer })
-)(DeleteServerModalComponent);
+DeleteServerModal.propTypes = propTypes;

 export default DeleteServerModal;
--- a/src/servers/ServersDropdown.js
+++ b/src/servers/ServersDropdown.js
@@ -1,30 +1,20 @@
-import { isEmpty, pick, values } from 'ramda';
+import { isEmpty, values } from 'ramda';
 import React from 'react';
-import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
 import PropTypes from 'prop-types';
-import { selectServer } from '../servers/reducers/selectedServer';
-import serversExporter from '../servers/services/ServersExporter';
-import { listServers } from './reducers/server';
 import { serverType } from './prop-types';

-const defaultProps = {
-  serversExporter,
-};
-const propTypes = {
-  servers: PropTypes.object,
-  serversExporter: PropTypes.shape({
-    exportServers: PropTypes.func,
-  }),
-  selectedServer: serverType,
-  selectServer: PropTypes.func,
-  listServers: PropTypes.func,
-};
+const ServersDropdown = (serversExporter) => class ServersDropdown extends React.Component {
+  static propTypes = {
+    servers: PropTypes.object,
+    selectedServer: serverType,
+    selectServer: PropTypes.func,
+    listServers: PropTypes.func,
+  };

-export class ServersDropdownComponent extends React.Component {
  renderServers = () => {
-    const { servers, selectedServer, selectServer, serversExporter } = this.props;
+    const { servers, selectedServer, selectServer } = this.props;

    if (isEmpty(servers)) {
      return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>;
@@ -68,14 +58,6 @@ export class ServersDropdownComponent extends React.Component {
      </UncontrolledDropdown>
    );
  }
-}
-
-ServersDropdownComponent.defaultProps = defaultProps;
-ServersDropdownComponent.propTypes = propTypes;
-
-const ServersDropdown = connect(
-  pick([ 'servers', 'selectedServer' ]),
-  { listServers, selectServer }
-)(ServersDropdownComponent);
+};

 export default ServersDropdown;
--- a/src/servers/helpers/ImportServersBtn.js
+++ b/src/servers/helpers/ImportServersBtn.js
@@ -1,31 +1,27 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { UncontrolledTooltip } from 'reactstrap';
 import { assoc } from 'ramda';
 import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
-import { createServers } from '../reducers/server';
-import serversImporter, { serversImporterType } from '../services/ServersImporter';

-const defaultProps = {
-  serversImporter,
-  onImport: () => ({}),
-};
-const propTypes = {
-  onImport: PropTypes.func,
-  serversImporter: serversImporterType,
-  createServers: PropTypes.func,
-  fileRef: PropTypes.oneOfType([ PropTypes.object, PropTypes.node ]),
-};
+const ImportServersBtn = (serversImporter) => class ImportServersBtn extends React.Component {
+  static defaultProps = {
+    onImport: () => ({}),
+  };
+  static propTypes = {
+    onImport: PropTypes.func,
+    createServers: PropTypes.func,
+    fileRef: PropTypes.oneOfType([ PropTypes.object, PropTypes.node ]),
+  };

-export class ImportServersBtnComponent extends React.Component {
  constructor(props) {
    super(props);
    this.fileRef = props.fileRef || React.createRef();
  }

  render() {
-    const { serversImporter: { importServersFromFile }, onImport, createServers } = this.props;
+    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)))
@@ -56,11 +52,6 @@ export class ImportServersBtnComponent extends React.Component {
      </React.Fragment>
    );
  }
-}
-
-ImportServersBtnComponent.defaultProps = defaultProps;
-ImportServersBtnComponent.propTypes = propTypes;
-
-const ImportServersBtn = connect(null, { createServers })(ImportServersBtnComponent);
+};

 export default ImportServersBtn;
--- a/src/servers/reducers/selectedServer.js
+++ b/src/servers/reducers/selectedServer.js
@@ -1,6 +1,3 @@
-import { curry } from 'ramda';
-import shlinkApiClient from '../../api/ShlinkApiClient';
-import serversService from '../../servers/services/ServersService';
 import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListParams';

 /* eslint-disable padding-line-between-statements, newline-after-var */
@@ -23,17 +20,13 @@ export default function reducer(state = defaultState, action) {

 export const resetSelectedServer = () => ({ type: RESET_SELECTED_SERVER });

-export const _selectServer = (shlinkApiClient, serversService, serverId) => (dispatch) => {
+export const selectServer = (serversService) => (serverId) => (dispatch) => {
  dispatch(resetShortUrlParams());

  const selectedServer = serversService.findServerById(serverId);

-  shlinkApiClient.setConfig(selectedServer);
-
  dispatch({
    type: SELECT_SERVER,
    selectedServer,
  });
 };
-
-export const selectServer = curry(_selectServer)(shlinkApiClient, serversService);
--- a/src/servers/reducers/server.js
+++ b/src/servers/reducers/server.js
@@ -1,6 +1,3 @@
-import { curry } from 'ramda';
-import serversService from '../services/ServersService';
-
 export const FETCH_SERVERS = 'shlink/servers/FETCH_SERVERS';

 export default function reducer(state = {}, action) {
@@ -12,33 +9,25 @@ export default function reducer(state = {}, action) {
  }
 }

-export const _listServers = (serversService) => ({
+export const listServers = (serversService) => () => ({
  type: FETCH_SERVERS,
  servers: serversService.listServers(),
 });

-export const listServers = () => _listServers(serversService);
-
-export const _createServer = (serversService, server) => {
+export const createServer = (serversService) => (server) => {
  serversService.createServer(server);

-  return _listServers(serversService);
+  return listServers(serversService)();
 };

-export const createServer = curry(_createServer)(serversService);
-
-export const _deleteServer = (serversService, server) => {
+export const deleteServer = (serversService) => (server) => {
  serversService.deleteServer(server);

-  return _listServers(serversService);
+  return listServers(serversService)();
 };

-export const deleteServer = curry(_deleteServer)(serversService);
-
-export const _createServers = (serversService, servers) => {
+export const createServers = (serversService) => (servers) => {
  serversService.createServers(servers);

-  return _listServers(serversService);
+  return listServers(serversService)();
 };
-
-export const createServers = curry(_createServers)(serversService);
--- a/src/servers/services/ServersExporter.js
+++ b/src/servers/services/ServersExporter.js
@@ -1,6 +1,4 @@
 import { dissoc, head, keys, values } from 'ramda';
-import csvjson from 'csvjson';
-import serversService from './ServersService';

 const saveCsv = (window, csv) => {
  const { navigator, document } = window;
@@ -26,7 +24,7 @@ const saveCsv = (window, csv) => {
  document.body.removeChild(link);
 };

-export class ServersExporter {
+export default class ServersExporter {
  constructor(serversService, window, csvjson) {
    this.serversService = serversService;
    this.window = window;
@@ -49,7 +47,3 @@ export class ServersExporter {
    }
  };
 }
-
-const serverExporter = new ServersExporter(serversService, global.window, csvjson);
-
-export default serverExporter;
--- a/src/servers/services/ServersImporter.js
+++ b/src/servers/services/ServersImporter.js
@@ -1,11 +1,10 @@
-import csvjson from 'csvjson';
 import PropTypes from 'prop-types';

 export const serversImporterType = PropTypes.shape({
  importServersFromFile: PropTypes.func,
 });

-export class ServersImporter {
+export default class ServersImporter {
  constructor(csvjson) {
    this.csvjson = csvjson;
  }
@@ -28,7 +27,3 @@ export class ServersImporter {
    });
  };
 }
-
-const serversImporter = new ServersImporter(csvjson);
-
-export default serversImporter;
--- a/src/servers/services/ServersService.js
+++ b/src/servers/services/ServersService.js
@@ -1,9 +1,8 @@
 import { assoc, dissoc, reduce } from 'ramda';
-import storage from '../../utils/Storage';

 const SERVERS_STORAGE_KEY = 'servers';

-export class ServersService {
+export default class ServersService {
  constructor(storage) {
    this.storage = storage;
  }
@@ -30,7 +29,3 @@ export class ServersService {
      dissoc(server.id, this.listServers())
    );
 }
-
-const serversService = new ServersService(storage);
-
-export default serversService;
--- a/src/servers/services/provideServices.js
+++ b/src/servers/services/provideServices.js
@@ -0,0 +1,46 @@
+import csvjson from 'csvjson';
+import CreateServer from '../CreateServer';
+import ServersDropdown from '../ServersDropdown';
+import DeleteServerModal from '../DeleteServerModal';
+import DeleteServerButton from '../DeleteServerButton';
+import ImportServersBtn from '../helpers/ImportServersBtn';
+import { resetSelectedServer, selectServer } from '../reducers/selectedServer';
+import { createServer, createServers, deleteServer, listServers } from '../reducers/server';
+import ServersImporter from './ServersImporter';
+import ServersService from './ServersService';
+import ServersExporter from './ServersExporter';
+
+const provideServices = (bottle, connect, withRouter) => {
+  // Components
+  bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn');
+  bottle.decorator('CreateServer', connect([ 'selectedServer' ], [ 'createServer', 'resetSelectedServer' ]));
+
+  bottle.serviceFactory('ServersDropdown', ServersDropdown, 'ServersExporter');
+  bottle.decorator('ServersDropdown', connect([ 'servers', 'selectedServer' ], [ 'listServers', 'selectServer' ]));
+
+  bottle.serviceFactory('DeleteServerModal', () => DeleteServerModal);
+  bottle.decorator('DeleteServerModal', withRouter);
+  bottle.decorator('DeleteServerModal', connect(null, [ 'deleteServer' ]));
+
+  bottle.serviceFactory('DeleteServerButton', DeleteServerButton, 'DeleteServerModal');
+
+  bottle.serviceFactory('ImportServersBtn', ImportServersBtn, 'ServersImporter');
+  bottle.decorator('ImportServersBtn', connect(null, [ 'createServers' ]));
+
+  // Services
+  bottle.constant('csvjson', csvjson);
+  bottle.service('ServersImporter', ServersImporter, 'csvjson');
+  bottle.service('ServersService', ServersService, 'Storage');
+  bottle.service('ServersExporter', ServersExporter, 'ServersService', 'window', 'csvjson');
+
+  // 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('resetSelectedServer', () => resetSelectedServer);
+};
+
+export default provideServices;
--- a/src/short-urls/CreateShortUrl.js
+++ b/src/short-urls/CreateShortUrl.js
@@ -1,16 +1,24 @@
 import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown';
 import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import { assoc, dissoc, isNil, pick, pipe, replace, trim } from 'ramda';
+import { assoc, dissoc, isNil, pipe, replace, trim } from 'ramda';
 import React from 'react';
-import { connect } from 'react-redux';
 import { Collapse } from 'reactstrap';
-import DateInput from '../common/DateInput';
-import TagsSelector from '../utils/TagsSelector';
+import * as PropTypes from 'prop-types';
+import DateInput from '../utils/DateInput';
 import CreateShortUrlResult from './helpers/CreateShortUrlResult';
-import { createShortUrl, resetCreateShortUrl } from './reducers/shortUrlCreationResult';
+import { createShortUrlResultType } from './reducers/shortUrlCreation';
+
+const normalizeTag = pipe(trim, replace(/ /g, '-'));
+const formatDate = (date) => isNil(date) ? date : date.format();
+
+const CreateShortUrl = (TagsSelector) => class CreateShortUrl extends React.Component {
+  static propTypes = {
+    createShortUrl: PropTypes.func,
+    shortUrlCreationResult: createShortUrlResultType,
+    resetCreateShortUrl: PropTypes.func,
+  };

-export class CreateShortUrlComponent extends React.Component {
  state = {
    longUrl: '',
    tags: [],
@@ -24,27 +32,31 @@ export class CreateShortUrlComponent extends React.Component {
  render() {
    const { createShortUrl, shortUrlCreationResult, resetCreateShortUrl } = this.props;

-    const changeTags = (tags) => this.setState({ tags: tags.map(pipe(trim, replace(/ /g, '-'))) });
+    const changeTags = (tags) => this.setState({ tags: tags.map(normalizeTag) });
    const renderOptionalInput = (id, placeholder, type = 'text', props = {}) => (
-      <input
-        className="form-control"
-        type={type}
-        placeholder={placeholder}
-        value={this.state[id]}
-        onChange={(e) => this.setState({ [id]: e.target.value })}
-        {...props}
-      />
+      <div className="form-group">
+        <input
+          className="form-control"
+          id={id}
+          type={type}
+          placeholder={placeholder}
+          value={this.state[id]}
+          onChange={(e) => this.setState({ [id]: e.target.value })}
+          {...props}
+        />
+      </div>
    );
-    const createDateInput = (id, placeholder, props = {}) => (
-      <DateInput
-        selected={this.state[id]}
-        placeholderText={placeholder}
-        isClearable
-        onChange={(date) => this.setState({ [id]: date })}
-        {...props}
-      />
+    const renderDateInput = (id, placeholder, props = {}) => (
+      <div className="form-group">
+        <DateInput
+          selected={this.state[id]}
+          placeholderText={placeholder}
+          isClearable
+          onChange={(date) => this.setState({ [id]: date })}
+          {...props}
+        />
+      </div>
    );
-    const formatDate = (date) => isNil(date) ? date : date.format();
    const save = (e) => {
      e.preventDefault();
      createShortUrl(pipe(
@@ -75,20 +87,12 @@ export class CreateShortUrlComponent extends React.Component {

            <div className="row">
              <div className="col-sm-6">
-                <div className="form-group">
-                  {renderOptionalInput('customSlug', 'Custom slug')}
-                </div>
-                <div className="form-group">
-                  {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
-                </div>
+                {renderOptionalInput('customSlug', 'Custom slug')}
+                {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
              </div>
              <div className="col-sm-6">
-                <div className="form-group">
-                  {createDateInput('validSince', 'Enabled since...', { maxDate: this.state.validUntil })}
-                </div>
-                <div className="form-group">
-                  {createDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })}
-                </div>
+                {renderDateInput('validSince', 'Enabled since...', { maxDate: this.state.validUntil })}
+                {renderDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })}
              </div>
            </div>
          </Collapse>
@@ -116,11 +120,6 @@ export class CreateShortUrlComponent extends React.Component {
      </div>
    );
  }
-}
-
-const CreateShortUrl = connect(pick([ 'shortUrlCreationResult' ]), {
-  createShortUrl,
-  resetCreateShortUrl,
-})(CreateShortUrlComponent);
+};

 export default CreateShortUrl;
--- a/src/short-urls/Paginator.js
+++ b/src/short-urls/Paginator.js
@@ -20,13 +20,13 @@ export default function Paginator({ paginator = {}, serverId }) {
  }

  const renderPages = () =>
-    range(1, pagesCount + 1).map((i) => (
-      <PaginationItem key={i} active={currentPage === i}>
+    range(1, pagesCount + 1).map((pageNumber) => (
+      <PaginationItem key={pageNumber} active={currentPage === pageNumber}>
        <PaginationLink
          tag={Link}
-          to={`/server/${serverId}/list-short-urls/${i}`}
+          to={`/server/${serverId}/list-short-urls/${pageNumber}`}
        >
-          {i}
+          {pageNumber}
        </PaginationLink>
      </PaginationItem>
    ));
--- a/src/short-urls/SearchBar.js
+++ b/src/short-urls/SearchBar.js
@@ -1,55 +1,56 @@
 import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
-import { connect } from 'react-redux';
-import { isEmpty, pick } from 'ramda';
+import { isEmpty } from 'ramda';
 import PropTypes from 'prop-types';
-import Tag from '../utils/Tag';
 import SearchField from '../utils/SearchField';
-import { listShortUrls } from './reducers/shortUrlsList';
-import './SearchBar.scss';
+import Tag from '../tags/helpers/Tag';
 import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
+import './SearchBar.scss';

 const propTypes = {
  listShortUrls: PropTypes.func,
  shortUrlsListParams: shortUrlsListParamsType,
 };

-export function SearchBarComponent({ listShortUrls, shortUrlsListParams }) {
-  const selectedTags = shortUrlsListParams.tags || [];
+const SearchBar = (colorGenerator) => {
+  const SearchBar = ({ listShortUrls, shortUrlsListParams }) => {
+    const selectedTags = shortUrlsListParams.tags || [];

-  return (
-    <div className="serach-bar-container">
-      <SearchField onChange={
-        (searchTerm) => listShortUrls({ ...shortUrlsListParams, searchTerm })
-      }
-      />
+    return (
+      <div className="serach-bar-container">
+        <SearchField onChange={
+          (searchTerm) => listShortUrls({ ...shortUrlsListParams, searchTerm })
+        }
+        />

-      {!isEmpty(selectedTags) && (
-        <h4 className="search-bar__selected-tag mt-2">
-          <FontAwesomeIcon icon={tagsIcon} className="search-bar__tags-icon" />
-          &nbsp;
-          {selectedTags.map((tag) => (
-            <Tag
-              key={tag}
-              text={tag}
-              clearable
-              onClose={() => listShortUrls(
-                {
-                  ...shortUrlsListParams,
-                  tags: selectedTags.filter((selectedTag) => selectedTag !== tag),
-                }
-              )}
-            />
-          ))}
-        </h4>
-      )}
-    </div>
-  );
-}
+        {!isEmpty(selectedTags) && (
+          <h4 className="search-bar__selected-tag mt-2">
+            <FontAwesomeIcon icon={tagsIcon} className="search-bar__tags-icon" />
+            &nbsp;
+            {selectedTags.map((tag) => (
+              <Tag
+                colorGenerator={colorGenerator}
+                key={tag}
+                text={tag}
+                clearable
+                onClose={() => listShortUrls(
+                  {
+                    ...shortUrlsListParams,
+                    tags: selectedTags.filter((selectedTag) => selectedTag !== tag),
+                  }
+                )}
+              />
+            ))}
+          </h4>
+        )}
+      </div>
+    );
+  };

-SearchBarComponent.propTypes = propTypes;
+  SearchBar.propTypes = propTypes;

-const SearchBar = connect(pick([ 'shortUrlsListParams' ]), { listShortUrls })(SearchBarComponent);
+  return SearchBar;
+};

 export default SearchBar;
--- a/src/short-urls/ShortUrlVisits.js
+++ b/src/short-urls/ShortUrlVisits.js
@@ -1,221 +0,0 @@
-import preloader from '@fortawesome/fontawesome-free-solid/faCircleNotch';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import { isEmpty, mapObjIndexed, pick } from 'ramda';
-import React from 'react';
-import { Doughnut, HorizontalBar } from 'react-chartjs-2';
-import Moment from 'react-moment';
-import { connect } from 'react-redux';
-import { Card, CardBody, CardHeader, UncontrolledTooltip } from 'reactstrap';
-import PropTypes from 'prop-types';
-import DateInput from '../common/DateInput';
-import {
-  processOsStats,
-  processBrowserStats,
-  processCountriesStats,
-  processReferrersStats,
-} from '../visits/services/VisitsParser';
-import MutedMessage from '../utils/MuttedMessage';
-import ExternalLink from '../utils/ExternalLink';
-import { serverType } from '../servers/prop-types';
-import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits';
-import './ShortUrlVisits.scss';
-
-const propTypes = {
-  processOsStats: PropTypes.func,
-  processBrowserStats: PropTypes.func,
-  processCountriesStats: PropTypes.func,
-  processReferrersStats: PropTypes.func,
-  match: PropTypes.object,
-  getShortUrlVisits: PropTypes.func,
-  selectedServer: serverType,
-  shortUrlVisits: shortUrlVisitsType,
-};
-const defaultProps = {
-  processOsStats,
-  processBrowserStats,
-  processCountriesStats,
-  processReferrersStats,
-};
-
-export class ShortUrlsVisitsComponent extends React.Component {
-  state = { startDate: undefined, endDate: undefined };
-  loadVisits = () => {
-    const { match: { params }, getShortUrlVisits } = this.props;
-
-    getShortUrlVisits(params.shortCode, mapObjIndexed(
-      (value) => value && value.format ? value.format('YYYY-MM-DD') : value,
-      this.state
-    ));
-  };
-
-  componentDidMount() {
-    this.loadVisits();
-  }
-
-  render() {
-    const {
-      match: { params },
-      selectedServer,
-      processOsStats,
-      processBrowserStats,
-      processCountriesStats,
-      processReferrersStats,
-      shortUrlVisits: { visits, loading, error, shortUrl },
-    } = this.props;
-    const serverUrl = selectedServer ? selectedServer.url : '';
-    const shortLink = `${serverUrl}/${params.shortCode}`;
-    const generateGraphData = (stats, label, isBarChart) => ({
-      labels: Object.keys(stats),
-      datasets: [
-        {
-          label,
-          data: Object.values(stats),
-          backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
-            '#97BBCD',
-            '#DCDCDC',
-            '#F7464A',
-            '#46BFBD',
-            '#FDB45C',
-            '#949FB1',
-            '#4D5360',
-          ],
-          borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
-          borderWidth: 2,
-        },
-      ],
-    });
-    const renderGraphCard = (title, stats, isBarChart, label) => (
-      <div className="col-md-6">
-        <Card className="mt-4">
-          <CardHeader>{title}</CardHeader>
-          <CardBody>
-            {!isBarChart && (
-              <Doughnut
-                data={generateGraphData(stats, label || title, isBarChart)}
-                options={{
-                  legend: {
-                    position: 'right',
-                  },
-                }}
-              />
-            )}
-            {isBarChart && (
-              <HorizontalBar
-                data={generateGraphData(stats, label || title, isBarChart)}
-                options={{
-                  legend: {
-                    display: false,
-                  },
-                }}
-              />
-            )}
-          </CardBody>
-        </Card>
-      </div>
-    );
-    const renderContent = () => {
-      if (loading) {
-        return <MutedMessage><FontAwesomeIcon icon={preloader} spin /> Loading...</MutedMessage>;
-      }
-
-      if (error) {
-        return (
-          <Card className="mt-4" body inverse color="danger">
-            An error occurred while loading visits :(
-          </Card>
-        );
-      }
-
-      if (isEmpty(visits)) {
-        return <MutedMessage>There have been no visits matching current filter  :(</MutedMessage>;
-      }
-
-      return (
-        <div className="row">
-          {renderGraphCard('Operating systems', processOsStats(visits), false)}
-          {renderGraphCard('Browsers', processBrowserStats(visits), false)}
-          {renderGraphCard('Countries', processCountriesStats(visits), true, 'Visits')}
-          {renderGraphCard('Referrers', processReferrersStats(visits), true, 'Visits')}
-        </div>
-      );
-    };
-
-    const renderCreated = () => (
-      <span>
-        <b id="created"><Moment fromNow>{shortUrl.dateCreated}</Moment></b>
-        <UncontrolledTooltip placement="bottom" target="created">
-          <Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment>
-        </UncontrolledTooltip>
-      </span>
-    );
-
-    return (
-      <div className="shlink-container">
-        <header>
-          <Card className="bg-light">
-            <CardBody>
-              <h2>
-                {
-                  shortUrl.visitsCount &&
-                  <span className="badge badge-main float-right">Visits: {shortUrl.visitsCount}</span>
-                }
-                Visit stats for <ExternalLink href={shortLink}>{shortLink}</ExternalLink>
-              </h2>
-              <hr />
-              {shortUrl.dateCreated && (
-                <div>
-                  Created:
-                  &nbsp;
-                  {loading && <small>Loading...</small>}
-                  {!loading && renderCreated()}
-                </div>
-              )}
-              <div>
-                Long URL:
-                &nbsp;
-                {loading && <small>Loading...</small>}
-                {!loading && <ExternalLink href={shortUrl.longUrl}>{shortUrl.longUrl}</ExternalLink>}
-              </div>
-            </CardBody>
-          </Card>
-        </header>
-
-        <section className="mt-4">
-          <div className="row">
-            <div className="col-xl-3 col-lg-4 col-md-6 offset-xl-6 offset-lg-4">
-              <DateInput
-                selected={this.state.startDate}
-                placeholderText="Since"
-                isClearable
-                onChange={(date) => this.setState({ startDate: date }, () => this.loadVisits())}
-              />
-            </div>
-            <div className="col-xl-3 col-lg-4 col-md-6">
-              <DateInput
-                selected={this.state.endDate}
-                placeholderText="Until"
-                isClearable
-                className="short-url-visits__date-input"
-                onChange={(date) => this.setState({ endDate: date }, () => this.loadVisits())}
-              />
-            </div>
-          </div>
-        </section>
-
-        <section>
-          {renderContent()}
-        </section>
-      </div>
-    );
-  }
-}
-
-ShortUrlsVisitsComponent.propTypes = propTypes;
-ShortUrlsVisitsComponent.defaultProps = defaultProps;
-
-const ShortUrlsVisits = connect(
-  pick([ 'selectedServer', 'shortUrlVisits' ]),
-  { getShortUrlVisits }
-)(ShortUrlsVisitsComponent);
-
-export default ShortUrlsVisits;
--- a/src/short-urls/ShortUrls.js
+++ b/src/short-urls/ShortUrls.js
@@ -1,27 +1,21 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import { assoc } from 'ramda';
 import Paginator from './Paginator';
-import SearchBar from './SearchBar';
-import ShortUrlsList from './ShortUrlsList';

-export function ShortUrlsComponent(props) {
-  const { match: { params } } = props;
+const ShortUrls = (SearchBar, ShortUrlsList) => (props) => {
+  const { match: { params }, shortUrlsList } = props;
+  const { page, serverId } = params;
+  const { data = [], pagination } = shortUrlsList;

  // Using a key on a component makes react to create a new instance every time the key changes
-  const urlsListKey = `${params.serverId}_${params.page}`;
+  const urlsListKey = `${serverId}_${page}`;

  return (
    <div className="shlink-container">
      <div className="form-group"><SearchBar /></div>
-      <ShortUrlsList {...props} shortUrlsList={props.shortUrlsList.data || []} key={urlsListKey} />
-      <Paginator paginator={props.shortUrlsList.pagination} serverId={props.match.params.serverId} />
+      <ShortUrlsList {...props} shortUrlsList={data} key={urlsListKey} />
+      <Paginator paginator={pagination} serverId={serverId} />
    </div>
  );
-}
-
-const ShortUrls = connect(
-  (state) => assoc('shortUrlsList', state.shortUrlsList.shortUrls, state.shortUrlsList)
-)(ShortUrlsComponent);
+};

 export default ShortUrls;
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -1,17 +1,16 @@
 import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
 import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import { head, isEmpty, pick, toPairs, keys, values } from 'ramda';
+import { head, isEmpty, keys, values } from 'ramda';
 import React from 'react';
-import { connect } from 'react-redux';
-import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
 import qs from 'qs';
 import PropTypes from 'prop-types';
 import { serverType } from '../servers/prop-types';
-import { ShortUrlsRow } from './helpers/ShortUrlsRow';
-import { listShortUrls, shortUrlType } from './reducers/shortUrlsList';
-import './ShortUrlsList.scss';
+import SortingDropdown from '../utils/SortingDropdown';
+import { determineOrderDir } from '../utils/utils';
+import { shortUrlType } from './reducers/shortUrlsList';
 import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
+import './ShortUrlsList.scss';

 const SORTABLE_FIELDS = {
  dateCreated: 'Created at',
@@ -20,18 +19,19 @@ const SORTABLE_FIELDS = {
  visits: 'Visits',
 };

-const propTypes = {
-  listShortUrls: PropTypes.func,
-  shortUrlsListParams: shortUrlsListParamsType,
-  match: PropTypes.object,
-  location: PropTypes.object,
-  loading: PropTypes.bool,
-  error: PropTypes.bool,
-  shortUrlsList: PropTypes.arrayOf(shortUrlType),
-  selectedServer: serverType,
-};
+const ShortUrlsList = (ShortUrlsRow) => class ShortUrlsList extends React.Component {
+  static propTypes = {
+    listShortUrls: PropTypes.func,
+    resetShortUrlParams: PropTypes.func,
+    shortUrlsListParams: shortUrlsListParamsType,
+    match: PropTypes.object,
+    location: PropTypes.object,
+    loading: PropTypes.bool,
+    error: PropTypes.bool,
+    shortUrlsList: PropTypes.arrayOf(shortUrlType),
+    selectedServer: serverType,
+  };

-export class ShortUrlsListComponent extends React.Component {
  refreshList = (extraParams) => {
    const { listShortUrls, shortUrlsListParams } = this.props;

@@ -40,25 +40,13 @@ export class ShortUrlsListComponent extends React.Component {
      ...extraParams,
    });
  };
-  determineOrderDir = (field) => {
-    if (this.state.orderField !== field) {
-      return 'ASC';
-    }
-
-    const newOrderMap = {
-      ASC: 'DESC',
-      DESC: undefined,
-    };
-
-    return this.state.orderDir ? newOrderMap[this.state.orderDir] : 'ASC';
+  handleOrderBy = (orderField, orderDir) => {
+    this.setState({ orderField, orderDir });
+    this.refreshList({ orderBy: { [orderField]: orderDir } });
  };
-  orderBy = (field) => {
-    const newOrderDir = this.determineOrderDir(field);
-
-    this.setState({ orderField: newOrderDir !== undefined ? field : undefined, orderDir: newOrderDir });
-    this.refreshList({ orderBy: { [field]: newOrderDir } });
-  };
-  renderOrderIcon = (field, className = 'short-urls-list__header-icon') => {
+  orderByColumn = (columnName) => () =>
+    this.handleOrderBy(columnName, determineOrderDir(columnName, this.state.orderField, this.state.orderDir));
+  renderOrderIcon = (field) => {
    if (this.state.orderField !== field) {
      return null;
    }
@@ -66,7 +54,7 @@ export class ShortUrlsListComponent extends React.Component {
    return (
      <FontAwesomeIcon
        icon={this.state.orderDir === 'ASC' ? caretUpIcon : caretDownIcon}
-        className={className}
+        className="short-urls-list__header-icon"
      />
    );
  };
@@ -89,6 +77,12 @@ export class ShortUrlsListComponent extends React.Component {
    this.refreshList({ page: params.page, tags: query.tag ? [ query.tag ] : shortUrlsListParams.tags });
  }

+  componentWillUnmount() {
+    const { resetShortUrlParams } = this.props;
+
+    resetShortUrlParams();
+  }
+
  renderShortUrls() {
    const { shortUrlsList, selectedServer, loading, error, shortUrlsListParams } = this.props;

@@ -119,50 +113,37 @@ export class ShortUrlsListComponent extends React.Component {
    ));
  }

-  renderMobileOrderingControls() {
-    return (
-      <div className="d-block d-md-none mb-3">
-        <UncontrolledDropdown>
-          <DropdownToggle caret className="btn-block">
-            Order by
-          </DropdownToggle>
-          <DropdownMenu className="short-urls-list__order-dropdown">
-            {toPairs(SORTABLE_FIELDS).map(([ key, value ]) => (
-              <DropdownItem key={key} active={this.state.orderField === key} onClick={() => this.orderBy(key)}>
-                {value}
-                {this.renderOrderIcon(key, 'short-urls-list__header-icon--mobile')}
-              </DropdownItem>
-            ))}
-          </DropdownMenu>
-        </UncontrolledDropdown>
-      </div>
-    );
-  }
-
  render() {
    return (
      <React.Fragment>
-        {this.renderMobileOrderingControls()}
+        <div className="d-block d-md-none mb-3">
+          <SortingDropdown
+            items={SORTABLE_FIELDS}
+            orderField={this.state.orderField}
+            orderDir={this.state.orderDir}
+            onChange={this.handleOrderBy}
+          />
+        </div>
        <table className="table table-striped table-hover">
          <thead className="short-urls-list__header">
            <tr>
              <th
                className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-                onClick={() => this.orderBy('dateCreated')}
+                onClick={this.orderByColumn('dateCreated')}
              >
                {this.renderOrderIcon('dateCreated')}
                Created at
              </th>
              <th
                className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-                onClick={() => this.orderBy('shortCode')}
+                onClick={this.orderByColumn('shortCode')}
              >
                {this.renderOrderIcon('shortCode')}
                Short URL
              </th>
              <th
                className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-                onClick={() => this.orderBy('originalUrl')}
+                onClick={this.orderByColumn('originalUrl')}
              >
                {this.renderOrderIcon('originalUrl')}
                Long URL
@@ -170,7 +151,7 @@ export class ShortUrlsListComponent extends React.Component {
              <th className="short-urls-list__header-cell">Tags</th>
              <th
                className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-                onClick={() => this.orderBy('visits')}
+                onClick={this.orderByColumn('visits')}
              >
                <span className="nowrap">{this.renderOrderIcon('visits')} Visits</span>
              </th>
@@ -184,13 +165,6 @@ export class ShortUrlsListComponent extends React.Component {
      </React.Fragment>
    );
  }
-}
-
-ShortUrlsListComponent.propTypes = propTypes;
-
-const ShortUrlsList = connect(
-  pick([ 'selectedServer', 'shortUrlsListParams' ]),
-  { listShortUrls }
-)(ShortUrlsListComponent);
+};

 export default ShortUrlsList;
--- a/src/short-urls/ShortUrlsList.scss
+++ b/src/short-urls/ShortUrlsList.scss
@@ -14,15 +14,6 @@
  margin-right: 5px;
 }

-.short-urls-list__header-icon--mobile {
-  margin: 3.5px 0 0;
-  float: right;
-}
-
 .short-urls-list__header-cell--with-action {
  cursor: pointer;
 }
-
-.short-urls-list__order-dropdown {
-  width: 100%;
-}
--- a/src/short-urls/helpers/CreateShortUrlResult.js
+++ b/src/short-urls/helpers/CreateShortUrlResult.js
@@ -5,17 +5,17 @@ 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/shortUrlCreationResult';
+import { createShortUrlResultType } from '../reducers/shortUrlCreation';
 import { stateFlagTimeout } from '../../utils/utils';
 import './CreateShortUrlResult.scss';

-const propTypes = {
-  resetCreateShortUrl: PropTypes.func,
-  error: PropTypes.bool,
-  result: createShortUrlResultType,
-};
-
 export default class CreateShortUrlResult extends React.Component {
+  static propTypes = {
+    resetCreateShortUrl: PropTypes.func,
+    error: PropTypes.bool,
+    result: createShortUrlResultType,
+  };
+
  state = { showCopyTooltip: false };

  componentDidMount() {
@@ -62,5 +62,3 @@ export default class CreateShortUrlResult extends React.Component {
    );
  }
 }
-
-CreateShortUrlResult.propTypes = propTypes;
--- a/src/short-urls/helpers/DeleteShortUrlModal.js
+++ b/src/short-urls/helpers/DeleteShortUrlModal.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import PropTypes from 'prop-types';
+import { identity } from 'ramda';
+import { shortUrlType } from '../reducers/shortUrlsList';
+import { shortUrlDeletionType } from '../reducers/shortUrlDeletion';
+
+export default class DeleteShortUrlModal extends React.Component {
+  static propTypes = {
+    shortUrl: shortUrlType,
+    toggle: PropTypes.func,
+    isOpen: PropTypes.bool,
+    shortUrlDeletion: shortUrlDeletionType,
+    deleteShortUrl: PropTypes.func,
+    resetDeleteShortUrl: PropTypes.func,
+    shortUrlDeleted: PropTypes.func,
+  };
+
+  state = { inputValue: '' };
+  handleDeleteUrl = (e) => {
+    e.preventDefault();
+
+    const { deleteShortUrl, shortUrl, toggle, shortUrlDeleted } = this.props;
+    const { shortCode } = shortUrl;
+
+    deleteShortUrl(shortCode)
+      .then(() => {
+        shortUrlDeleted(shortCode);
+        toggle();
+      })
+      .catch(identity);
+  };
+
+  componentWillUnmount() {
+    const { resetDeleteShortUrl } = this.props;
+
+    resetDeleteShortUrl();
+  }
+
+  render() {
+    const { shortUrl, toggle, isOpen, shortUrlDeletion } = this.props;
+    const THRESHOLD_REACHED = 'INVALID_SHORTCODE_DELETION';
+    const hasThresholdError = shortUrlDeletion.error && shortUrlDeletion.errorData.error === THRESHOLD_REACHED;
+    const hasErrorOtherThanThreshold = shortUrlDeletion.error && shortUrlDeletion.errorData.error !== THRESHOLD_REACHED;
+
+    return (
+      <Modal isOpen={isOpen} toggle={toggle} centered>
+        <form onSubmit={this.handleDeleteUrl}>
+          <ModalHeader toggle={toggle}>
+            <span className="text-danger">Delete short URL</span>
+          </ModalHeader>
+          <ModalBody>
+            <p><b className="text-danger">Caution!</b> You are about to delete a short URL.</p>
+            <p>This action cannot be undone. Once you have deleted it, all the visits stats will be lost.</p>
+
+            <input
+              type="text"
+              className="form-control"
+              placeholder="Insert the short code of the URL"
+              value={this.state.inputValue}
+              onChange={(e) => this.setState({ inputValue: e.target.value })}
+            />
+
+            {hasThresholdError && (
+              <div className="p-2 mt-2 bg-warning text-center">
+                This short URL has received too many visits and therefore, it cannot be deleted
+              </div>
+            )}
+            {hasErrorOtherThanThreshold && (
+              <div className="p-2 mt-2 bg-danger text-white text-center">
+                Something went wrong while deleting the URL :(
+              </div>
+            )}
+          </ModalBody>
+          <ModalFooter>
+            <button type="button" className="btn btn-link" onClick={toggle}>Cancel</button>
+            <button
+              type="submit"
+              className="btn btn-danger"
+              disabled={this.state.inputValue !== shortUrl.shortCode || shortUrlDeletion.loading}
+            >
+              {shortUrlDeletion.loading ? 'Deleting...' : 'Delete'}
+            </button>
+          </ModalFooter>
+        </form>
+      </Modal>
+    );
+  }
+}
--- a/src/short-urls/helpers/EditTagsModal.js
+++ b/src/short-urls/helpers/EditTagsModal.js
@@ -1,30 +1,22 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import PropTypes from 'prop-types';
-import { pick } from 'ramda';
-import TagsSelector from '../../utils/TagsSelector';
-import {
-  editShortUrlTags,
-  resetShortUrlsTags,
-  shortUrlTagsType,
-  shortUrlTagsEdited,
-} from '../reducers/shortUrlTags';
 import ExternalLink from '../../utils/ExternalLink';
+import { shortUrlTagsType } from '../reducers/shortUrlTags';
 import { shortUrlType } from '../reducers/shortUrlsList';

-const propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  toggle: PropTypes.func.isRequired,
-  url: PropTypes.string.isRequired,
-  shortUrl: shortUrlType.isRequired,
-  shortUrlTags: shortUrlTagsType,
-  editShortUrlTags: PropTypes.func,
-  shortUrlTagsEdited: PropTypes.func,
-  resetShortUrlsTags: PropTypes.func,
-};
+const EditTagsModal = (TagsSelector) => class EditTagsModal extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    toggle: PropTypes.func.isRequired,
+    url: PropTypes.string.isRequired,
+    shortUrl: shortUrlType.isRequired,
+    shortUrlTags: shortUrlTagsType,
+    editShortUrlTags: PropTypes.func,
+    shortUrlTagsEdited: PropTypes.func,
+    resetShortUrlsTags: PropTypes.func,
+  };

-export class EditTagsModalComponent extends React.Component {
  saveTags = () => {
    const { editShortUrlTags, shortUrl, toggle } = this.props;

@@ -40,8 +32,8 @@ export class EditTagsModalComponent extends React.Component {
      return;
    }

-    const { shortUrlTagsEdited, shortUrl } = this.props;
-    const { tags } = this.state;
+    const { shortUrlTagsEdited, shortUrl, shortUrlTags } = this.props;
+    const { tags } = shortUrlTags;

    shortUrlTagsEdited(shortUrl.shortCode, tags);
  };
@@ -88,13 +80,6 @@ export class EditTagsModalComponent extends React.Component {
      </Modal>
    );
  }
-}
-
-EditTagsModalComponent.propTypes = propTypes;
-
-const EditTagsModal = connect(
-  pick([ 'shortUrlTags' ]),
-  { editShortUrlTags, resetShortUrlsTags, shortUrlTagsEdited }
-)(EditTagsModalComponent);
+};

 export default EditTagsModal;
--- a/src/short-urls/helpers/PreviewModal.js
+++ b/src/short-urls/helpers/PreviewModal.js
@@ -10,20 +10,20 @@ const propTypes = {
  isOpen: PropTypes.bool,
 };

-export default function PreviewModal({ url, toggle, isOpen }) {
-  return (
-    <Modal isOpen={isOpen} toggle={toggle} size="lg">
-      <ModalHeader toggle={toggle}>
-        Preview for <ExternalLink href={url}>{url}</ExternalLink>
-      </ModalHeader>
-      <ModalBody>
-        <div className="text-center">
-          <p className="preview-modal__loader">Loading...</p>
-          <img src={`${url}/preview`} className="preview-modal__img" alt="Preview" />
-        </div>
-      </ModalBody>
-    </Modal>
-  );
-}
+const PreviewModal = ({ url, toggle, isOpen }) => (
+  <Modal isOpen={isOpen} toggle={toggle} size="lg">
+    <ModalHeader toggle={toggle}>
+      Preview for <ExternalLink href={url}>{url}</ExternalLink>
+    </ModalHeader>
+    <ModalBody>
+      <div className="text-center">
+        <p className="preview-modal__loader">Loading...</p>
+        <img src={`${url}/preview`} className="preview-modal__img" alt="Preview" />
+      </div>
+    </ModalBody>
+  </Modal>
+);

 PreviewModal.propTypes = propTypes;
+
+export default PreviewModal;
--- a/src/short-urls/helpers/QrCodeModal.js
+++ b/src/short-urls/helpers/QrCodeModal.js
@@ -10,19 +10,19 @@ const propTypes = {
  isOpen: PropTypes.bool,
 };

-export default function QrCodeModal({ url, toggle, isOpen }) {
-  return (
-    <Modal isOpen={isOpen} toggle={toggle} centered>
-      <ModalHeader toggle={toggle}>
-        QR code for <ExternalLink href={url}>{url}</ExternalLink>
-      </ModalHeader>
-      <ModalBody>
-        <div className="text-center">
-          <img src={`${url}/qr-code`} className="qr-code-modal__img" alt="QR code" />
-        </div>
-      </ModalBody>
-    </Modal>
-  );
-}
+const QrCodeModal = ({ url, toggle, isOpen }) => (
+  <Modal isOpen={isOpen} toggle={toggle} centered>
+    <ModalHeader toggle={toggle}>
+      QR code for <ExternalLink href={url}>{url}</ExternalLink>
+    </ModalHeader>
+    <ModalBody>
+      <div className="text-center">
+        <img src={`${url}/qr-code`} className="qr-code-modal__img" alt="QR code" />
+      </div>
+    </ModalBody>
+  </Modal>
+);

 QrCodeModal.propTypes = propTypes;
+
+export default QrCodeModal;
--- a/src/short-urls/helpers/ShortUrlsRow.js
+++ b/src/short-urls/helpers/ShortUrlsRow.js
@@ -2,23 +2,22 @@ import { isEmpty } from 'ramda';
 import React from 'react';
 import Moment from 'react-moment';
 import PropTypes from 'prop-types';
-import Tag from '../../utils/Tag';
 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 { ShortUrlsRowMenu } from './ShortUrlsRowMenu';
+import Tag from '../../tags/helpers/Tag';
 import './ShortUrlsRow.scss';

-const propTypes = {
-  refreshList: PropTypes.func,
-  shortUrlsListParams: shortUrlsListParamsType,
-  selectedServer: serverType,
-  shortUrl: shortUrlType,
-};
+const ShortUrlsRow = (ShortUrlsRowMenu, colorGenerator) => class ShortUrlsRow extends React.Component {
+  static propTypes = {
+    refreshList: PropTypes.func,
+    shortUrlsListParams: shortUrlsListParamsType,
+    selectedServer: serverType,
+    shortUrl: shortUrlType,
+  };

-export class ShortUrlsRow extends React.Component {
  state = { copiedToClipboard: false };

  renderTags(tags) {
@@ -31,6 +30,7 @@ export class ShortUrlsRow extends React.Component {

    return tags.map((tag) => (
      <Tag
+        colorGenerator={colorGenerator}
        key={tag}
        text={tag}
        onClick={() => refreshList({ tags: [ ...selectedTags, tag ] })}
@@ -72,6 +72,6 @@ export class ShortUrlsRow extends React.Component {
      </tr>
    );
  }
-}
+};

-ShortUrlsRow.propTypes = propTypes;
+export default ShortUrlsRow;
--- a/src/short-urls/helpers/ShortUrlsRowMenu.js
+++ b/src/short-urls/helpers/ShortUrlsRowMenu.js
@@ -4,6 +4,7 @@ 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 React from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
@@ -15,40 +16,43 @@ import { shortUrlType } from '../reducers/shortUrlsList';
 import PreviewModal from './PreviewModal';
 import QrCodeModal from './QrCodeModal';
 import './ShortUrlsRowMenu.scss';
-import EditTagsModal from './EditTagsModal';

-const propTypes = {
-  completeShortUrl: PropTypes.string,
-  onCopyToClipboard: PropTypes.func,
-  selectedServer: serverType,
-  shortUrl: shortUrlType,
-};
+const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrlsRowMenu extends React.Component {
+  static propTypes = {
+    completeShortUrl: PropTypes.string,
+    onCopyToClipboard: PropTypes.func,
+    selectedServer: serverType,
+    shortUrl: shortUrlType,
+  };

-export class ShortUrlsRowMenu extends React.Component {
  state = {
    isOpen: false,
    isQrModalOpen: false,
    isPreviewOpen: 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 toggleQrCode = () => this.setState(({ isQrModalOpen }) => ({ isQrModalOpen: !isQrModalOpen }));
-    const togglePreview = () => this.setState(({ isPreviewOpen }) => ({ isPreviewOpen: !isPreviewOpen }));
-    const toggleTags = () => this.setState(({ isTagsModalOpen }) => ({ isTagsModalOpen: !isTagsModalOpen }));
+    const toggleModal = (prop) => () => this.setState((prevState) => ({ [prop]: !prevState[prop] }));
+    const toggleQrCode = toggleModal('isQrModalOpen');
+    const togglePreview = toggleModal('isPreviewOpen');
+    const toggleTags = toggleModal('isTagsModalOpen');
+    const toggleDelete = toggleModal('isDeleteModalOpen');

    return (
-      <ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
+      <ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen}>
        <DropdownToggle size="sm" caret className="short-urls-row-menu__dropdown-toggle btn-outline-secondary">
          &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
        </DropdownToggle>
-        <DropdownMenu>
+        <DropdownMenu right>
          <DropdownItem tag={Link} to={`/server/${serverId}/short-code/${shortUrl.shortCode}/visits`}>
-            <FontAwesomeIcon icon={pieChartIcon} /> &nbsp;Visit Stats
+            <FontAwesomeIcon icon={pieChartIcon} /> &nbsp;Visit stats
          </DropdownItem>
+
          <DropdownItem onClick={toggleTags}>
            <FontAwesomeIcon icon={tagsIcon} /> &nbsp;Edit tags
          </DropdownItem>
@@ -59,6 +63,15 @@ export class ShortUrlsRowMenu extends React.Component {
            toggle={toggleTags}
          />

+          <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}
+          />
+
          <DropdownItem divider />

          <DropdownItem onClick={togglePreview}>
@@ -90,6 +103,6 @@ export class ShortUrlsRowMenu extends React.Component {
      </ButtonDropdown>
    );
  }
-}
+};

-ShortUrlsRowMenu.propTypes = propTypes;
+export default ShortUrlsRowMenu;
--- a/src/short-urls/helpers/ShortUrlsRowMenu.scss
+++ b/src/short-urls/helpers/ShortUrlsRowMenu.scss
@@ -1,6 +1,19 @@
-.short-urls-row-menu__dropdown-toggle:before {
+@import '../../utils/base';
+
+.short-urls-row-menu__dropdown-toggle:after {
  display: none !important;
 }
+
 .short-urls-row-menu__dropdown-toggle--hidden {
  visibility: hidden;
 }
+
+.short-urls-row-menu__dropdown-item--danger.short-urls-row-menu__dropdown-item--danger {
+  color: $dangerColor;
+
+  &:hover,
+  &:active,
+  &.active {
+    color: $dangerColor !important;
+  }
+}
--- a/src/short-urls/reducers/shortUrlCreationResult.js
+++ b/src/short-urls/reducers/shortUrlCreationResult.js
@@ -1,12 +1,10 @@
-import { curry } from 'ramda';
 import PropTypes from 'prop-types';
-import shlinkApiClient from '../../api/ShlinkApiClient';

 /* eslint-disable padding-line-between-statements, newline-after-var */
-const CREATE_SHORT_URL_START = 'shlink/createShortUrl/CREATE_SHORT_URL_START';
-const CREATE_SHORT_URL_ERROR = 'shlink/createShortUrl/CREATE_SHORT_URL_ERROR';
-const CREATE_SHORT_URL = 'shlink/createShortUrl/CREATE_SHORT_URL';
-const RESET_CREATE_SHORT_URL = 'shlink/createShortUrl/RESET_CREATE_SHORT_URL';
+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 */

 export const createShortUrlResultType = PropTypes.shape({
@@ -29,6 +27,7 @@ export default function reducer(state = defaultState, action) {
      return {
        ...state,
        saving: true,
+        error: false,
      };
    case CREATE_SHORT_URL_ERROR:
      return {
@@ -49,9 +48,12 @@ export default function reducer(state = defaultState, action) {
  }
 }

-export const _createShortUrl = (shlinkApiClient, data) => async (dispatch) => {
+export const createShortUrl = (buildShlinkApiClient) => (data) => async (dispatch, getState) => {
  dispatch({ type: CREATE_SHORT_URL_START });

+  const { selectedServer } = getState();
+  const shlinkApiClient = buildShlinkApiClient(selectedServer);
+
  try {
    const result = await shlinkApiClient.createShortUrl(data);

@@ -61,6 +63,4 @@ export const _createShortUrl = (shlinkApiClient, data) => async (dispatch) => {
  }
 };

-export const createShortUrl = curry(_createShortUrl)(shlinkApiClient);
-
 export const resetCreateShortUrl = () => ({ type: RESET_CREATE_SHORT_URL });
--- a/src/short-urls/reducers/shortUrlDeletion.js
+++ b/src/short-urls/reducers/shortUrlDeletion.js
@@ -0,0 +1,75 @@
+import PropTypes from 'prop-types';
+
+/* eslint-disable padding-line-between-statements, newline-after-var */
+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 */
+
+export const shortUrlDeletionType = PropTypes.shape({
+  shortCode: PropTypes.string.isRequired,
+  loading: PropTypes.bool.isRequired,
+  error: PropTypes.bool.isRequired,
+  errorData: PropTypes.shape({
+    error: PropTypes.string,
+    message: PropTypes.string,
+  }).isRequired,
+});
+
+const defaultState = {
+  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 const deleteShortUrl = (buildShlinkApiClient) => (shortCode) => async (dispatch, getState) => {
+  dispatch({ type: DELETE_SHORT_URL_START });
+
+  const { selectedServer } = getState();
+  const { deleteShortUrl } = buildShlinkApiClient(selectedServer);
+
+  try {
+    await deleteShortUrl(shortCode);
+    dispatch({ type: DELETE_SHORT_URL, shortCode });
+  } catch (e) {
+    dispatch({ type: DELETE_SHORT_URL_ERROR, errorData: e.response.data });
+
+    throw e;
+  }
+};
+
+export const resetDeleteShortUrl = () => ({ type: RESET_DELETE_SHORT_URL });
+
+export const shortUrlDeleted = (shortCode) => ({ type: SHORT_URL_DELETED, shortCode });
--- a/src/short-urls/reducers/shortUrlTags.js
+++ b/src/short-urls/reducers/shortUrlTags.js
@@ -1,6 +1,5 @@
-import { curry } from 'ramda';
 import PropTypes from 'prop-types';
-import shlinkApiClient from '../../api/ShlinkApiClient';
+import { pick } from 'ramda';

 /* eslint-disable padding-line-between-statements, newline-after-var */
 export const EDIT_SHORT_URL_TAGS_START = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_START';
@@ -40,8 +39,7 @@ export default function reducer(state = defaultState, action) {
      };
    case EDIT_SHORT_URL_TAGS:
      return {
-        shortCode: action.shortCode,
-        tags: action.tags,
+        ...pick([ 'shortCode', 'tags' ], action),
        saving: false,
        error: false,
      };
@@ -52,13 +50,15 @@ export default function reducer(state = defaultState, action) {
  }
 }

-export const _editShortUrlTags = (shlinkApiClient, shortCode, tags) => async (dispatch) => {
+export const editShortUrlTags = (buildShlinkApiClient) => (shortCode, tags) => async (dispatch, getState) => {
  dispatch({ type: EDIT_SHORT_URL_TAGS_START });
+  const { selectedServer } = getState();
+  const shlinkApiClient = buildShlinkApiClient(selectedServer);

  try {
-    // Update short URL tags
-    await shlinkApiClient.updateShortUrlTags(shortCode, tags);
-    dispatch({ tags, shortCode, type: EDIT_SHORT_URL_TAGS });
+    const normalizedTags = await shlinkApiClient.updateShortUrlTags(shortCode, tags);
+
+    dispatch({ tags: normalizedTags, shortCode, type: EDIT_SHORT_URL_TAGS });
  } catch (e) {
    dispatch({ type: EDIT_SHORT_URL_TAGS_ERROR });

@@ -66,8 +66,6 @@ export const _editShortUrlTags = (shlinkApiClient, shortCode, tags) => async (di
  }
 };

-export const editShortUrlTags = curry(_editShortUrlTags)(shlinkApiClient);
-
 export const resetShortUrlsTags = () => ({ type: RESET_EDIT_SHORT_URL_TAGS });

 export const shortUrlTagsEdited = (shortCode, tags) => ({
--- a/src/short-urls/reducers/shortUrlVisits.js
+++ b/src/short-urls/reducers/shortUrlVisits.js
@@ -1,62 +0,0 @@
-import { curry } from 'ramda';
-import PropTypes from 'prop-types';
-import shlinkApiClient from '../../api/ShlinkApiClient';
-import { shortUrlType } from './shortUrlsList';
-
-/* eslint-disable padding-line-between-statements, newline-after-var */
-const GET_SHORT_URL_VISITS_START = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_START';
-const GET_SHORT_URL_VISITS_ERROR = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_ERROR';
-const GET_SHORT_URL_VISITS = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS';
-/* eslint-enable padding-line-between-statements, newline-after-var */
-
-export const shortUrlVisitsType = PropTypes.shape({
-  shortUrl: shortUrlType,
-  visits: PropTypes.array,
-  loading: PropTypes.bool,
-  error: PropTypes.bool,
-});
-
-const initialState = {
-  shortUrl: {},
-  visits: [],
-  loading: false,
-  error: false,
-};
-
-export default function dispatch(state = initialState, action) {
-  switch (action.type) {
-    case GET_SHORT_URL_VISITS_START:
-      return {
-        ...state,
-        loading: true,
-      };
-    case GET_SHORT_URL_VISITS_ERROR:
-      return {
-        ...state,
-        loading: false,
-        error: true,
-      };
-    case GET_SHORT_URL_VISITS:
-      return {
-        shortUrl: action.shortUrl,
-        visits: action.visits,
-        loading: false,
-        error: false,
-      };
-    default:
-      return state;
-  }
-}
-
-export const _getShortUrlVisits = (shlinkApiClient, shortCode, dates) => (dispatch) => {
-  dispatch({ type: GET_SHORT_URL_VISITS_START });
-
-  Promise.all([
-    shlinkApiClient.getShortUrlVisits(shortCode, dates),
-    shlinkApiClient.getShortUrl(shortCode),
-  ])
-    .then(([ visits, shortUrl ]) => dispatch({ visits, shortUrl, type: GET_SHORT_URL_VISITS }))
-    .catch(() => dispatch({ type: GET_SHORT_URL_VISITS_ERROR }));
-};
-
-export const getShortUrlVisits = curry(_getShortUrlVisits)(shlinkApiClient);
--- a/src/short-urls/reducers/shortUrlsList.js
+++ b/src/short-urls/reducers/shortUrlsList.js
@@ -1,11 +1,11 @@
-import { assoc, assocPath } from 'ramda';
+import { assoc, assocPath, propEq, reject } from 'ramda';
 import PropTypes from 'prop-types';
-import shlinkApiClient from '../../api/ShlinkApiClient';
 import { SHORT_URL_TAGS_EDITED } from './shortUrlTags';
+import { SHORT_URL_DELETED } from './shortUrlDeletion';

 /* eslint-disable padding-line-between-statements, newline-after-var */
-const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
-const LIST_SHORT_URLS_ERROR = 'shlink/shortUrlsList/LIST_SHORT_URLS_ERROR';
+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 */

@@ -18,6 +18,7 @@ export const shortUrlType = PropTypes.shape({
 const initialState = {
  shortUrls: {},
  loading: true,
+  error: false,
 };

 export default function reducer(state = initialState, action) {
@@ -34,7 +35,7 @@ export default function reducer(state = initialState, action) {
      return {
        loading: false,
        error: true,
-        shortUrls: [],
+        shortUrls: {},
      };
    case SHORT_URL_TAGS_EDITED:
      const { data } = state.shortUrls;
@@ -43,21 +44,28 @@ export default function reducer(state = initialState, action) {
        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;
  }
 }

-export const _listShortUrls = (shlinkApiClient, params = {}) => async (dispatch) => {
+export const listShortUrls = (buildShlinkApiClient) => (params = {}) => async (dispatch, getState) => {
  dispatch({ type: LIST_SHORT_URLS_START });

+  const { selectedServer = {} } = getState();
+  const { listShortUrls } = buildShlinkApiClient(selectedServer);
+
  try {
-    const shortUrls = await shlinkApiClient.listShortUrls(params);
+    const shortUrls = await listShortUrls(params);

    dispatch({ type: LIST_SHORT_URLS, shortUrls, params });
  } catch (e) {
    dispatch({ type: LIST_SHORT_URLS_ERROR, params });
  }
 };
-
-export const listShortUrls = (params = {}) => _listShortUrls(shlinkApiClient, params);
--- a/src/short-urls/services/provideServices.js
+++ b/src/short-urls/services/provideServices.js
@@ -0,0 +1,71 @@
+import { connect as reduxConnect } from 'react-redux';
+import { assoc } from 'ramda';
+import ShortUrls from '../ShortUrls';
+import SearchBar from '../SearchBar';
+import ShortUrlsList from '../ShortUrlsList';
+import ShortUrlsRow from '../helpers/ShortUrlsRow';
+import ShortUrlsRowMenu from '../helpers/ShortUrlsRowMenu';
+import CreateShortUrl from '../CreateShortUrl';
+import DeleteShortUrlModal from '../helpers/DeleteShortUrlModal';
+import EditTagsModal from '../helpers/EditTagsModal';
+import { listShortUrls } from '../reducers/shortUrlsList';
+import { createShortUrl, resetCreateShortUrl } from '../reducers/shortUrlCreation';
+import { deleteShortUrl, resetDeleteShortUrl, shortUrlDeleted } from '../reducers/shortUrlDeletion';
+import { editShortUrlTags, resetShortUrlsTags, shortUrlTagsEdited } from '../reducers/shortUrlTags';
+import { resetShortUrlParams } from '../reducers/shortUrlsListParams';
+
+const provideServices = (bottle, connect) => {
+  // Components
+  bottle.serviceFactory('ShortUrls', ShortUrls, 'SearchBar', 'ShortUrlsList');
+  bottle.decorator('ShortUrls', reduxConnect(
+    (state) => assoc('shortUrlsList', state.shortUrlsList.shortUrls, state.shortUrlsList)
+  ));
+
+  bottle.serviceFactory('SearchBar', SearchBar, 'ColorGenerator');
+  bottle.decorator('SearchBar', connect([ 'shortUrlsListParams' ], [ 'listShortUrls' ]));
+
+  bottle.serviceFactory('ShortUrlsList', ShortUrlsList, 'ShortUrlsRow');
+  bottle.decorator('ShortUrlsList', connect(
+    [ 'selectedServer', 'shortUrlsListParams' ],
+    [ 'listShortUrls', 'resetShortUrlParams' ]
+  ));
+
+  bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator');
+
+  bottle.serviceFactory('ShortUrlsRowMenu', ShortUrlsRowMenu, 'DeleteShortUrlModal', 'EditTagsModal');
+
+  bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'TagsSelector');
+  bottle.decorator(
+    'CreateShortUrl',
+    connect([ 'shortUrlCreationResult' ], [ 'createShortUrl', 'resetCreateShortUrl' ])
+  );
+
+  bottle.serviceFactory('DeleteShortUrlModal', () => DeleteShortUrlModal);
+  bottle.decorator('DeleteShortUrlModal', connect(
+    [ 'shortUrlDeletion' ],
+    [ 'deleteShortUrl', 'resetDeleteShortUrl', 'shortUrlDeleted' ]
+  ));
+
+  bottle.serviceFactory('EditTagsModal', EditTagsModal, 'TagsSelector');
+  bottle.decorator('EditTagsModal', connect(
+    [ 'shortUrlTags' ],
+    [ 'editShortUrlTags', 'resetShortUrlsTags', 'shortUrlTagsEdited' ]
+  ));
+
+  // Actions
+  bottle.serviceFactory('editShortUrlTags', editShortUrlTags, 'buildShlinkApiClient');
+  bottle.serviceFactory('resetShortUrlsTags', () => resetShortUrlsTags);
+  bottle.serviceFactory('shortUrlTagsEdited', () => shortUrlTagsEdited);
+
+  bottle.serviceFactory('listShortUrls', listShortUrls, 'buildShlinkApiClient');
+  bottle.serviceFactory('resetShortUrlParams', () => resetShortUrlParams);
+
+  bottle.serviceFactory('createShortUrl', createShortUrl, 'buildShlinkApiClient');
+  bottle.serviceFactory('resetCreateShortUrl', () => resetCreateShortUrl);
+
+  bottle.serviceFactory('deleteShortUrl', deleteShortUrl, 'buildShlinkApiClient');
+  bottle.serviceFactory('resetDeleteShortUrl', () => resetDeleteShortUrl);
+  bottle.serviceFactory('shortUrlDeleted', () => shortUrlDeleted);
+};
+
+export default provideServices;
--- a/src/tags/TagCard.js
+++ b/src/tags/TagCard.js
@@ -5,25 +5,19 @@ import editIcon from '@fortawesome/fontawesome-free-solid/faPencilAlt';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router-dom';
-import colorGenerator, { colorGeneratorType } from '../utils/ColorGenerator';
+import TagBullet from './helpers/TagBullet';
 import './TagCard.scss';
-import DeleteTagConfirmModal from './helpers/DeleteTagConfirmModal';
-import EditTagModal from './helpers/EditTagModal';

-const propTypes = {
-  tag: PropTypes.string,
-  currentServerId: PropTypes.string,
-  colorGenerator: colorGeneratorType,
-};
-const defaultProps = {
-  colorGenerator,
-};
+const TagCard = (DeleteTagConfirmModal, EditTagModal, colorGenerator) => class TagCard extends React.Component {
+  static propTypes = {
+    tag: PropTypes.string,
+    currentServerId: PropTypes.string,
+  };

-export default class TagCard extends React.Component {
  state = { isDeleteModalOpen: false, isEditModalOpen: false };

  render() {
-    const { tag, colorGenerator, currentServerId } = this.props;
+    const { tag, currentServerId } = this.props;
    const toggleDelete = () =>
      this.setState(({ isDeleteModalOpen }) => ({ isDeleteModalOpen: !isDeleteModalOpen }));
    const toggleEdit = () =>
@@ -32,43 +26,23 @@ export default class TagCard extends React.Component {
    return (
      <Card className="tag-card">
        <CardBody className="tag-card__body">
-          <button
-            className="btn btn-light btn-sm tag-card__btn tag-card__btn--last"
-            onClick={toggleDelete}
-          >
+          <button className="btn btn-light btn-sm tag-card__btn tag-card__btn--last" onClick={toggleDelete}>
            <FontAwesomeIcon icon={deleteIcon} />
          </button>
-          <button
-            className="btn btn-light btn-sm tag-card__btn"
-            onClick={toggleEdit}
-          >
+          <button className="btn btn-light btn-sm tag-card__btn" onClick={toggleEdit}>
            <FontAwesomeIcon icon={editIcon} />
          </button>
          <h5 className="tag-card__tag-title">
-            <div
-              style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
-              className="tag-card__tag-bullet"
-            />
-            <Link to={`/server/${currentServerId}/list-short-urls/1?tag=${tag}`}>
-              {tag}
-            </Link>
+            <TagBullet tag={tag} colorGenerator={colorGenerator} />
+            <Link to={`/server/${currentServerId}/list-short-urls/1?tag=${tag}`}>{tag}</Link>
          </h5>
        </CardBody>

-        <DeleteTagConfirmModal
-          tag={tag}
-          toggle={toggleDelete}
-          isOpen={this.state.isDeleteModalOpen}
-        />
-        <EditTagModal
-          tag={tag}
-          toggle={toggleEdit}
-          isOpen={this.state.isEditModalOpen}
-        />
+        <DeleteTagConfirmModal tag={tag} toggle={toggleDelete} isOpen={this.state.isDeleteModalOpen} />
+        <EditTagModal tag={tag} toggle={toggleEdit} isOpen={this.state.isEditModalOpen} />
      </Card>
    );
  }
-}
+};

-TagCard.propTypes = propTypes;
-TagCard.defaultProps = defaultProps;
+export default TagCard;
--- a/src/tags/TagCard.scss
+++ b/src/tags/TagCard.scss
@@ -16,17 +16,6 @@
  padding-right: 5px;
 }

-.tag-card__tag-bullet {
-  $width: 20px;
-
-  border-radius: 50%;
-  width: $width;
-  height: $width;
-  display: inline-block;
-  vertical-align: -4px;
-  margin-right: 7px;
-}
-
 .tag-card__btn {
  float: right;
 }
--- a/src/tags/TagsList.js
+++ b/src/tags/TagsList.js
@@ -1,28 +1,28 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import { pick, splitEvery } from 'ramda';
+import { splitEvery } from 'ramda';
 import PropTypes from 'prop-types';
 import MuttedMessage from '../utils/MuttedMessage';
 import SearchField from '../utils/SearchField';
-import { filterTags, listTags } from './reducers/tagsList';
-import TagCard from './TagCard';

 const { ceil } = Math;
-const TAGS_GROUP_SIZE = 4;
-const propTypes = {
-  filterTags: PropTypes.func,
-  listTags: PropTypes.func,
-  tagsList: PropTypes.shape({
-    loading: PropTypes.bool,
-  }),
-  match: PropTypes.object,
-};
+const TAGS_GROUPS_AMOUNT = 4;
+
+const TagsList = (TagCard) => class TagsList extends React.Component {
+  static propTypes = {
+    filterTags: PropTypes.func,
+    forceListTags: PropTypes.func,
+    tagsList: PropTypes.shape({
+      loading: PropTypes.bool,
+      error: PropTypes.bool,
+      filteredTags: PropTypes.arrayOf(PropTypes.string),
+    }),
+    match: PropTypes.object,
+  };

-export class TagsListComponent extends React.Component {
  componentDidMount() {
-    const { listTags } = this.props;
+    const { forceListTags } = this.props;

-    listTags();
+    forceListTags();
  }

  renderContent() {
@@ -46,7 +46,7 @@ export class TagsListComponent extends React.Component {
      return <MuttedMessage>No tags found</MuttedMessage>;
    }

-    const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUP_SIZE), tagsList.filteredTags);
+    const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags);

    return (
      <React.Fragment>
@@ -70,23 +70,15 @@ export class TagsListComponent extends React.Component {

    return (
      <div className="shlink-container">
-        {!this.props.tagsList.loading && (
-          <SearchField
-            className="mb-3"
-            placeholder="Search tags..."
-            onChange={filterTags}
-          />
-        )}
+        {!this.props.tagsList.loading &&
+          <SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />
+        }
        <div className="row">
          {this.renderContent()}
        </div>
      </div>
    );
  }
-}
-
-TagsListComponent.propTypes = propTypes;
-
-const TagsList = connect(pick([ 'tagsList' ]), { listTags, filterTags })(TagsListComponent);
+};

 export default TagsList;
--- a/src/tags/helpers/DeleteTagConfirmModal.js
+++ b/src/tags/helpers/DeleteTagConfirmModal.js
@@ -1,20 +1,18 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import PropTypes from 'prop-types';
-import { pick } from 'ramda';
-import { deleteTag, tagDeleted, tagDeleteType } from '../reducers/tagDelete';
+import { tagDeleteType } from '../reducers/tagDelete';

-const propTypes = {
-  tag: PropTypes.string.isRequired,
-  toggle: PropTypes.func.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  deleteTag: PropTypes.func,
-  tagDelete: tagDeleteType,
-  tagDeleted: PropTypes.func,
-};
+export default class DeleteTagConfirmModal extends React.Component {
+  static propTypes = {
+    tag: PropTypes.string.isRequired,
+    toggle: PropTypes.func.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    deleteTag: PropTypes.func,
+    tagDelete: tagDeleteType,
+    tagDeleted: PropTypes.func,
+  };

-export class DeleteTagConfirmModalComponent extends React.Component {
  doDelete = () => {
    const { tag, toggle, deleteTag } = this.props;

@@ -67,12 +65,3 @@ export class DeleteTagConfirmModalComponent extends React.Component {
    );
  }
 }
-
-DeleteTagConfirmModalComponent.propTypes = propTypes;
-
-const DeleteTagConfirmModal = connect(
-  pick([ 'tagDelete' ]),
-  { deleteTag, tagDeleted }
-)(DeleteTagConfirmModalComponent);
-
-export default DeleteTagConfirmModal;
--- a/src/tags/helpers/EditTagModal.js
+++ b/src/tags/helpers/EditTagModal.js
@@ -1,32 +1,24 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
-import { pick } from 'ramda';
 import { ChromePicker } from 'react-color';
 import colorIcon from '@fortawesome/fontawesome-free-solid/faPalette';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
-import colorGenerator, { colorGeneratorType } from '../../utils/ColorGenerator';
-import { editTag, tagEdited } from '../reducers/tagEdit';
 import './EditTagModal.scss';

-const propTypes = {
-  tag: PropTypes.string,
-  editTag: PropTypes.func,
-  toggle: PropTypes.func,
-  tagEdited: PropTypes.func,
-  colorGenerator: colorGeneratorType,
-  isOpen: PropTypes.bool,
-  tagEdit: PropTypes.shape({
-    error: PropTypes.bool,
-    editing: PropTypes.bool,
-  }),
-};
-const defaultProps = {
-  colorGenerator,
-};
+const EditTagModal = ({ getColorForKey }) => class EditTagModal extends React.Component {
+  static propTypes = {
+    tag: PropTypes.string,
+    editTag: PropTypes.func,
+    toggle: PropTypes.func,
+    tagEdited: PropTypes.func,
+    isOpen: PropTypes.bool,
+    tagEdit: PropTypes.shape({
+      error: PropTypes.bool,
+      editing: PropTypes.bool,
+    }),
+  };

-export class EditTagModalComponent extends React.Component {
  saveTag = (e) => {
    e.preventDefault();
    const { tag: oldName, editTag, toggle } = this.props;
@@ -53,12 +45,12 @@ export class EditTagModalComponent extends React.Component {
  constructor(props) {
    super(props);

-    const { colorGenerator, tag } = props;
+    const { tag } = props;

    this.state = {
      showColorPicker: false,
      tag,
-      color: colorGenerator.getColorForKey(tag),
+      color: getColorForKey(tag),
    };
  }

@@ -131,11 +123,6 @@ export class EditTagModalComponent extends React.Component {
      </Modal>
    );
  }
-}
-
-EditTagModalComponent.propTypes = propTypes;
-EditTagModalComponent.defaultProps = defaultProps;
-
-const EditTagModal = connect(pick([ 'tagEdit' ]), { editTag, tagEdited })(EditTagModalComponent);
+};

 export default EditTagModal;
--- a/src/tags/helpers/Tag.js
+++ b/src/tags/helpers/Tag.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Tag.scss';
+import { colorGeneratorType } from '../../utils/services/ColorGenerator';
+
+const propTypes = {
+  text: PropTypes.string,
+  children: PropTypes.node,
+  clearable: PropTypes.bool,
+  colorGenerator: colorGeneratorType,
+  onClick: PropTypes.func,
+  onClose: PropTypes.func,
+};
+
+const Tag = ({
+  text,
+  children,
+  clearable,
+  colorGenerator,
+  onClick = () => {},
+  onClose = () => {},
+}) => (
+  <span
+    className="badge tag"
+    style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable ? 'auto' : 'pointer' }}
+    onClick={onClick}
+  >
+    {children || text}
+    {clearable && <span className="close tag__close-selected-tag" onClick={onClose}>&times;</span>}
+  </span>
+);
+
+Tag.propTypes = propTypes;
+
+export default Tag;
--- a/src/tags/helpers/Tag.scss
+++ b/src/tags/helpers/Tag.scss
--- a/src/tags/helpers/TagBullet.js
+++ b/src/tags/helpers/TagBullet.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import * as PropTypes from 'prop-types';
+import { colorGeneratorType } from '../../utils/services/ColorGenerator';
+import './TagBullet.scss';
+
+const propTypes = {
+  tag: PropTypes.string.isRequired,
+  colorGenerator: colorGeneratorType,
+};
+
+const TagBullet = ({ tag, colorGenerator }) => (
+  <div
+    style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
+    className="tag-bullet"
+  />
+);
+
+TagBullet.propTypes = propTypes;
+
+export default TagBullet;
--- a/src/tags/helpers/TagBullet.scss
+++ b/src/tags/helpers/TagBullet.scss
@@ -0,0 +1,10 @@
+.tag-bullet {
+  $width: 20px;
+
+  border-radius: 50%;
+  width: $width;
+  height: $width;
+  display: inline-block;
+  vertical-align: -4px;
+  margin-right: 7px;
+}
--- a/src/tags/helpers/TagsSelector.js
+++ b/src/tags/helpers/TagsSelector.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import TagsInput from 'react-tagsinput';
+import PropTypes from 'prop-types';
+import Autosuggest from 'react-autosuggest';
+import { identity } from 'ramda';
+import TagBullet from './TagBullet';
+import './TagsSelector.scss';
+
+const TagsSelector = (colorGenerator) => class TagsSelector extends React.Component {
+  static propTypes = {
+    tags: PropTypes.arrayOf(PropTypes.string).isRequired,
+    onChange: PropTypes.func.isRequired,
+    placeholder: PropTypes.string,
+    tagsList: PropTypes.shape({
+      tags: PropTypes.arrayOf(PropTypes.string),
+    }),
+  };
+  static defaultProps = {
+    placeholder: 'Add tags to the URL',
+  };
+
+  componentDidMount() {
+    const { listTags } = this.props;
+
+    listTags();
+  }
+
+  render() {
+    const { tags, onChange, placeholder, tagsList } = this.props;
+    const renderTag = ({ tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other }) => (
+      <span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
+        {getTagDisplayValue(tag)}
+        {!disabled && <span className={classNameRemove} onClick={() => onRemove(key)} />}
+      </span>
+    );
+    const renderAutocompleteInput = (data) => {
+      const { addTag, ...otherProps } = data;
+      const handleOnChange = (e, { method }) => {
+        method === 'enter' ? e.preventDefault() : otherProps.onChange(e);
+      };
+
+      // eslint-disable-next-line no-extra-parens
+      const inputValue = (otherProps.value && otherProps.value.trim().toLowerCase()) || '';
+      const inputLength = inputValue.length;
+      const suggestions = tagsList.tags.filter((state) => state.toLowerCase().slice(0, inputLength) === inputValue);
+
+      return (
+        <Autosuggest
+          ref={otherProps.ref}
+          suggestions={suggestions}
+          inputProps={{ ...otherProps, onChange: handleOnChange }}
+          highlightFirstSuggestion
+          shouldRenderSuggestions={(value) => value && value.trim().length > 0}
+          getSuggestionValue={(suggestion) => suggestion}
+          renderSuggestion={(suggestion) => (
+            <React.Fragment>
+              <TagBullet tag={suggestion} colorGenerator={colorGenerator} />
+              {suggestion}
+            </React.Fragment>
+          )}
+          onSuggestionSelected={(e, { suggestion }) => {
+            addTag(suggestion);
+          }}
+          onSuggestionsClearRequested={identity}
+          onSuggestionsFetchRequested={identity}
+        />
+      );
+    };
+
+    return (
+      <TagsInput
+        value={tags}
+        inputProps={{ placeholder }}
+        onlyUnique
+        renderTag={renderTag}
+        renderInput={renderAutocompleteInput}
+
+        // FIXME Workaround to be able to add tags on Android
+        addOnBlur
+        onChange={onChange}
+      />
+    );
+  }
+};
+
+export default TagsSelector;
--- a/src/tags/helpers/TagsSelector.scss
+++ b/src/tags/helpers/TagsSelector.scss
@@ -0,0 +1,16 @@
+@import '../../utils/base';
+
+.react-autosuggest__suggestions-list {
+  list-style-type: none;
+  padding: 0;
+  margin-bottom: 6px;
+}
+
+.react-autosuggest__suggestion {
+  margin-left: -6px;
+  padding: 5px 8px;
+}
+
+.react-autosuggest__suggestion--highlighted {
+  background-color: $lightGrey;
+}
--- a/src/tags/reducers/tagDelete.js
+++ b/src/tags/reducers/tagDelete.js
@@ -1,11 +1,9 @@
-import { curry } from 'ramda';
 import PropTypes from 'prop-types';
-import shlinkApiClient from '../../api/ShlinkApiClient';

 /* eslint-disable padding-line-between-statements, newline-after-var */
-const DELETE_TAG_START = 'shlink/deleteTag/DELETE_TAG_START';
-const DELETE_TAG_ERROR = 'shlink/deleteTag/DELETE_TAG_ERROR';
-const DELETE_TAG = 'shlink/deleteTag/DELETE_TAG';
+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 */

@@ -41,9 +39,12 @@ export default function reducer(state = defaultState, action) {
  }
 }

-export const _deleteTag = (shlinkApiClient, tag) => async (dispatch) => {
+export const deleteTag = (buildShlinkApiClient) => (tag) => async (dispatch, getState) => {
  dispatch({ type: DELETE_TAG_START });

+  const { selectedServer } = getState();
+  const shlinkApiClient = buildShlinkApiClient(selectedServer);
+
  try {
    await shlinkApiClient.deleteTags([ tag ]);
    dispatch({ type: DELETE_TAG });
@@ -54,6 +55,4 @@ export const _deleteTag = (shlinkApiClient, tag) => async (dispatch) => {
  }
 };

-export const deleteTag = curry(_deleteTag)(shlinkApiClient);
-
 export const tagDeleted = (tag) => ({ type: TAG_DELETED, tag });
--- a/src/tags/reducers/tagEdit.js
+++ b/src/tags/reducers/tagEdit.js
@@ -1,11 +1,9 @@
-import { curry, pick } from 'ramda';
-import shlinkApiClient from '../../api/ShlinkApiClient';
-import colorGenerator from '../../utils/ColorGenerator';
+import { pick } from 'ramda';

 /* eslint-disable padding-line-between-statements, newline-after-var */
-const EDIT_TAG_START = 'shlink/editTag/EDIT_TAG_START';
-const EDIT_TAG_ERROR = 'shlink/editTag/EDIT_TAG_ERROR';
-const EDIT_TAG = 'shlink/editTag/EDIT_TAG';
+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 */

 export const TAG_EDITED = 'shlink/editTag/TAG_EDITED';
@@ -42,22 +40,25 @@ export default function reducer(state = defaultState, action) {
  }
 }

-export const _editTag = (shlinkApiClient, colorGenerator, oldName, newName, color) =>
-  async (dispatch) => {
-    dispatch({ type: EDIT_TAG_START });
+export const editTag = (buildShlinkApiClient, colorGenerator) => (oldName, newName, color) => async (
+  dispatch,
+  getState
+) => {
+  dispatch({ type: EDIT_TAG_START });

-    try {
-      await shlinkApiClient.editTag(oldName, newName);
-      colorGenerator.setColorForKey(newName, color);
-      dispatch({ type: EDIT_TAG, oldName, newName });
-    } catch (e) {
-      dispatch({ type: EDIT_TAG_ERROR });
+  const { selectedServer } = getState();
+  const shlinkApiClient = buildShlinkApiClient(selectedServer);

-      throw e;
-    }
-  };
+  try {
+    await shlinkApiClient.editTag(oldName, newName);
+    colorGenerator.setColorForKey(newName, color);
+    dispatch({ type: EDIT_TAG, oldName, newName });
+  } catch (e) {
+    dispatch({ type: EDIT_TAG_ERROR });

-export const editTag = curry(_editTag)(shlinkApiClient, colorGenerator);
+    throw e;
+  }
+};

 export const tagEdited = (oldName, newName, color) => ({
  type: TAG_EDITED,
--- a/src/tags/reducers/tagsList.js
+++ b/src/tags/reducers/tagsList.js
@@ -1,5 +1,5 @@
-import { reject } from 'ramda';
-import shlinkApiClient from '../../api/ShlinkApiClient';
+import { isEmpty, reject } from 'ramda';
+import { buildShlinkApiClientWithAxios as buildShlinkApiClient } from '../../utils/services/ShlinkApiClientBuilder';
 import { TAG_DELETED } from './tagDelete';
 import { TAG_EDITED } from './tagEdit';

@@ -59,19 +59,24 @@ export default function reducer(state = defaultState, action) {
    case FILTER_TAGS:
      return {
        ...state,
-        filteredTags: state.tags.filter(
-          (tag) => tag.toLowerCase().match(action.searchTerm),
-        ),
+        filteredTags: state.tags.filter((tag) => tag.toLowerCase().match(action.searchTerm)),
      };
    default:
      return state;
  }
 }

-export const _listTags = (shlinkApiClient) => async (dispatch) => {
+export const _listTags = (buildShlinkApiClient, force = false) => async (dispatch, getState) => {
+  const { tagsList, selectedServer } = getState();
+
+  if (!force && (tagsList.loading || !isEmpty(tagsList.tags))) {
+    return;
+  }
+
  dispatch({ type: LIST_TAGS_START });

  try {
+    const shlinkApiClient = buildShlinkApiClient(selectedServer);
    const tags = await shlinkApiClient.listTags();

    dispatch({ tags, type: LIST_TAGS });
@@ -80,7 +85,9 @@ export const _listTags = (shlinkApiClient) => async (dispatch) => {
  }
 };

-export const listTags = () => _listTags(shlinkApiClient);
+export const listTags = () => _listTags(buildShlinkApiClient);
+
+export const forceListTags = () => _listTags(buildShlinkApiClient, true);

 export const filterTags = (searchTerm) => ({
  type: FILTER_TAGS,
--- a/src/tags/services/provideServices.js
+++ b/src/tags/services/provideServices.js
@@ -0,0 +1,37 @@
+import TagsSelector from '../helpers/TagsSelector';
+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 { deleteTag, tagDeleted } from '../reducers/tagDelete';
+import { editTag, tagEdited } from '../reducers/tagEdit';
+
+const provideServices = (bottle, connect) => {
+  // Components
+  bottle.serviceFactory('TagsSelector', TagsSelector, 'ColorGenerator');
+  bottle.decorator('TagsSelector', connect([ 'tagsList' ], [ 'listTags' ]));
+
+  bottle.serviceFactory('TagCard', TagCard, 'DeleteTagConfirmModal', 'EditTagModal', 'ColorGenerator');
+
+  bottle.serviceFactory('DeleteTagConfirmModal', () => DeleteTagConfirmModal);
+  bottle.decorator('DeleteTagConfirmModal', connect([ 'tagDelete' ], [ 'deleteTag', 'tagDeleted' ]));
+
+  bottle.serviceFactory('EditTagModal', EditTagModal, 'ColorGenerator');
+  bottle.decorator('EditTagModal', connect([ 'tagEdit' ], [ 'editTag', 'tagEdited' ]));
+
+  bottle.serviceFactory('TagsList', TagsList, 'TagCard');
+  bottle.decorator('TagsList', connect([ 'tagsList' ], [ 'forceListTags', 'filterTags' ]));
+
+  // Actions
+  bottle.serviceFactory('filterTags', () => filterTags);
+  bottle.serviceFactory('forceListTags', () => forceListTags);
+  bottle.serviceFactory('listTags', () => listTags);
+  bottle.serviceFactory('tagDeleted', () => tagDeleted);
+  bottle.serviceFactory('tagEdited', () => tagEdited);
+
+  bottle.serviceFactory('deleteTag', deleteTag, 'buildShlinkApiClient');
+  bottle.serviceFactory('editTag', editTag, 'buildShlinkApiClient', 'ColorGenerator');
+};
+
+export default provideServices;
--- a/src/utils/DateInput.js
+++ b/src/utils/DateInput.js
@@ -0,0 +1,42 @@
+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 * as PropTypes from 'prop-types';
+import './DateInput.scss';
+
+const propTypes = {
+  className: PropTypes.string,
+  isClearable: PropTypes.bool,
+  selected: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]),
+  ref: PropTypes.object,
+};
+
+const DateInput = (props) => {
+  const { className, isClearable, selected, ref = React.createRef() } = props;
+  const showCalendarIcon = !isClearable || isNil(selected);
+
+  return (
+    <div className="date-input-container">
+      <DatePicker
+        {...props}
+        className={`date-input-container__input form-control ${className || ''}`}
+        dateFormat="YYYY-MM-DD"
+        readOnly
+        ref={ref}
+      />
+      {showCalendarIcon && (
+        <FontAwesomeIcon
+          icon={calendarIcon}
+          className="date-input-container__icon"
+          onClick={() => ref.current.input.focus()}
+        />
+      )}
+    </div>
+  );
+};
+
+DateInput.propTypes = propTypes;
+
+export default DateInput;
--- a/src/common/DateInput.scss
+++ b/src/common/DateInput.scss
@@ -1,5 +1,5 @@
-@import '../utils/mixins/vertical-align';
-@import '../utils/base';
+@import './mixins/vertical-align';
+@import './base';

 .date-input-container {
  position: relative;
--- a/src/utils/ExternalLink.js
+++ b/src/utils/ExternalLink.js
@@ -11,7 +11,7 @@ export default function ExternalLink(props) {

  return (
    <a target="_blank" rel="noopener noreferrer" href={href} {...rest}>
-      {children}
+      {children || href}
    </a>
  );
 }
--- a/src/utils/SearchField.js
+++ b/src/utils/SearchField.js
@@ -6,17 +6,18 @@ import classnames from 'classnames';
 import './SearchField.scss';

 const DEFAULT_SEARCH_INTERVAL = 500;
-const propTypes = {
-  onChange: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  placeholder: PropTypes.string,
-};
-const defaultProps = {
-  className: '',
-  placeholder: 'Search...',
-};

 export default class SearchField extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    className: PropTypes.string,
+    placeholder: PropTypes.string,
+  };
+  static defaultProps = {
+    className: '',
+    placeholder: 'Search...',
+  };
+
  state = { showClearBtn: false, searchTerm: '' };
  timer = null;

@@ -64,6 +65,3 @@ export default class SearchField extends React.Component {
    );
  }
 }
-
-SearchField.propTypes = propTypes;
-SearchField.defaultProps = defaultProps;
--- a/src/utils/SortingDropdown.js
+++ b/src/utils/SortingDropdown.js
@@ -0,0 +1,68 @@
+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 classNames from 'classnames';
+import { determineOrderDir } from '../utils/utils';
+import './SortingDropdown.scss';
+
+const propTypes = {
+  items: PropTypes.object.isRequired,
+  orderField: PropTypes.string,
+  orderDir: PropTypes.oneOf([ 'ASC', 'DESC' ]),
+  onChange: PropTypes.func.isRequired,
+  isButton: PropTypes.bool,
+  right: PropTypes.bool,
+};
+const defaultProps = {
+  isButton: true,
+  right: false,
+};
+
+const SortingDropdown = ({ items, orderField, orderDir, onChange, isButton, right }) => {
+  const handleItemClick = (fieldKey) => () => {
+    const newOrderDir = determineOrderDir(fieldKey, orderField, orderDir);
+
+    onChange(newOrderDir ? fieldKey : undefined, newOrderDir);
+  };
+
+  return (
+    <UncontrolledDropdown>
+      <DropdownToggle
+        caret
+        color={isButton ? 'secondary' : 'link'}
+        className={classNames({ 'btn-block': isButton, 'btn-sm sorting-dropdown__paddingless': !isButton })}
+      >
+        Order by
+      </DropdownToggle>
+      <DropdownMenu
+        right={right}
+        className={classNames('sorting-dropdown__menu', { 'sorting-dropdown__menu--link': !isButton })}
+      >
+        {toPairs(items).map(([ fieldKey, fieldValue ]) => (
+          <DropdownItem key={fieldKey} active={orderField === fieldKey} onClick={handleItemClick(fieldKey)}>
+            {fieldValue}
+            {orderField === fieldKey && (
+              <FontAwesomeIcon
+                icon={orderDir === 'ASC' ? sortAscIcon : sortDescIcon}
+                className="sorting-dropdown__sort-icon"
+              />
+            )}
+          </DropdownItem>
+        ))}
+        <DropdownItem divider />
+        <DropdownItem disabled={!orderField} onClick={() => onChange()}>
+          <i>Clear selection</i>
+        </DropdownItem>
+      </DropdownMenu>
+    </UncontrolledDropdown>
+  );
+};
+
+SortingDropdown.propTypes = propTypes;
+SortingDropdown.defaultProps = defaultProps;
+
+export default SortingDropdown;
--- a/src/utils/SortingDropdown.scss
+++ b/src/utils/SortingDropdown.scss
@@ -0,0 +1,16 @@
+.sorting-dropdown__menu {
+  width: 100%;
+}
+
+.sorting-dropdown__menu--link.sorting-dropdown__menu--link {
+  min-width: 11rem;
+}
+
+.sorting-dropdown__sort-icon {
+  margin: 3.5px 0 0;
+  float: right;
+}
+
+.sorting-dropdown__paddingless.sorting-dropdown__paddingless {
+  padding: 0;
+}
--- a/src/utils/Tag.js
+++ b/src/utils/Tag.js
@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import colorGenerator, { colorGeneratorType } from '../utils/ColorGenerator';
-import './Tag.scss';
-
-const propTypes = {
-  colorGenerator: colorGeneratorType,
-  text: PropTypes.string,
-  children: PropTypes.node,
-  clearable: PropTypes.bool,
-  onClick: PropTypes.func,
-  onClose: PropTypes.func,
-};
-const defaultProps = {
-  colorGenerator,
-};
-
-export default function Tag(
-  {
-    colorGenerator,
-    text,
-    children,
-    clearable,
-    onClick = () => ({}),
-    onClose = () => ({}),
-  }
-) {
-  return (
-    <span
-      className="badge tag"
-      style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable ? 'auto' : 'pointer' }}
-      onClick={onClick}
-    >
-      {children || text}
-      {clearable && <span className="close tag__close-selected-tag" onClick={onClose}>&times;</span>}
-    </span>
-  );
-}
-
-Tag.defaultProps = defaultProps;
-Tag.propTypes = propTypes;
--- a/src/utils/TagsSelector.js
+++ b/src/utils/TagsSelector.js
@@ -1,44 +0,0 @@
-import React from 'react';
-import TagsInput from 'react-tagsinput';
-import PropTypes from 'prop-types';
-import colorGenerator, { colorGeneratorType } from './ColorGenerator';
-
-const defaultProps = {
-  colorGenerator,
-  placeholder: 'Add tags to the URL',
-};
-const propTypes = {
-  tags: PropTypes.arrayOf(PropTypes.string).isRequired,
-  onChange: PropTypes.func.isRequired,
-  placeholder: PropTypes.string,
-  colorGenerator: colorGeneratorType,
-};
-
-export default function TagsSelector({ tags, onChange, placeholder, colorGenerator }) {
-  const renderTag = (props) => {
-    const { tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other } = props;
-
-    return (
-      <span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
-        {getTagDisplayValue(tag)}
-        {!disabled && <span className={classNameRemove} onClick={() => onRemove(key)} />}
-      </span>
-    );
-  };
-
-  return (
-    <TagsInput
-      value={tags}
-      inputProps={{ placeholder }}
-      onlyUnique
-      renderTag={renderTag}
-
-      // FIXME Workaround to be able to add tags on Android
-      addOnBlur
-      onChange={onChange}
-    />
-  );
-}
-
-TagsSelector.defaultProps = defaultProps;
-TagsSelector.propTypes = propTypes;
--- a/src/utils/services/ColorGenerator.js
+++ b/src/utils/services/ColorGenerator.js
@@ -1,6 +1,5 @@
 import { range } from 'ramda';
 import PropTypes from 'prop-types';
-import storage from './Storage';

 const HEX_COLOR_LENGTH = 6;
 const { floor, random } = Math;
@@ -11,29 +10,33 @@ const buildRandomColor = () =>
      .map(() => letters[floor(random() * letters.length)])
      .join('')
  }`;
+const normalizeKey = (key) => key.toLowerCase().trim();

-export class ColorGenerator {
+export default class ColorGenerator {
  constructor(storage) {
    this.storage = storage;
    this.colors = this.storage.get('colors') || {};
  }

  getColorForKey = (key) => {
-    const color = this.colors[key];
+    const normalizedKey = normalizeKey(key);
+    const color = this.colors[normalizedKey];

    // If a color has not been set yet, generate a random one and save it
    if (!color) {
-      this.setColorForKey(key, buildRandomColor());
-
-      return this.getColorForKey(key);
+      return this.setColorForKey(normalizedKey, buildRandomColor());
    }

    return color;
  };

  setColorForKey = (key, color) => {
-    this.colors[key] = color;
+    const normalizedKey = normalizeKey(key);
+
+    this.colors[normalizedKey] = color;
    this.storage.set('colors', this.colors);
+
+    return color;
  }
 }

@@ -41,7 +44,3 @@ export const colorGeneratorType = PropTypes.shape({
  getColorForKey: PropTypes.func,
  setColorForKey: PropTypes.func,
 });
-
-const colorGenerator = new ColorGenerator(storage);
-
-export default colorGenerator;
--- a/src/utils/services/ShlinkApiClient.js
+++ b/src/utils/services/ShlinkApiClient.js
@@ -1,26 +1,18 @@
-import axios from 'axios';
 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 class ShlinkApiClient {
-  constructor(axios) {
+export default class ShlinkApiClient {
+  constructor(axios, baseUrl, apiKey) {
    this.axios = axios;
-    this._baseUrl = '';
-    this._apiKey = '';
+    this._baseUrl = buildRestUrl(baseUrl);
+    this._apiKey = apiKey || '';
    this._token = '';
  }

-  /**
-   * Sets the base URL to be used on any request
-   */
-  setConfig = ({ url, apiKey }) => {
-    this._baseUrl = `${url}/rest/v${API_VERSION}`;
-    this._apiKey = apiKey;
-  };
-
  listShortUrls = (options = {}) =>
    this._performRequest('/short-codes', 'GET', options)
      .then((resp) => resp.data.shortUrls)
@@ -44,6 +36,11 @@ export class ShlinkApiClient {
      .then((resp) => resp.data)
      .catch((e) => this._handleAuthError(e, this.getShortUrl, [ shortCode ]));

+  deleteShortUrl = (shortCode) =>
+    this._performRequest(`/short-codes/${shortCode}`, 'DELETE')
+      .then(() => ({}))
+      .catch((e) => this._handleAuthError(e, this.deleteShortUrl, [ shortCode ]));
+
  updateShortUrlTags = (shortCode, tags) =>
    this._performRequest(`/short-codes/${shortCode}/tags`, 'PUT', {}, { tags })
      .then((resp) => resp.data.tags)
@@ -108,7 +105,3 @@ export class ShlinkApiClient {
    return Promise.reject(e);
  };
 }
-
-const shlinkApiClient = new ShlinkApiClient(axios);
-
-export default shlinkApiClient;
--- a/src/utils/services/ShlinkApiClientBuilder.js
+++ b/src/utils/services/ShlinkApiClientBuilder.js
@@ -0,0 +1,18 @@
+import * as axios from 'axios';
+import ShlinkApiClient from './ShlinkApiClient';
+
+const apiClients = {};
+
+const buildShlinkApiClient = (axios) => ({ url, apiKey }) => {
+  const clientKey = `${url}_${apiKey}`;
+
+  if (!apiClients[clientKey]) {
+    apiClients[clientKey] = new ShlinkApiClient(axios, url, apiKey);
+  }
+
+  return apiClients[clientKey];
+};
+
+export default buildShlinkApiClient;
+
+export const buildShlinkApiClientWithAxios = buildShlinkApiClient(axios);
--- a/src/utils/services/Storage.js
+++ b/src/utils/services/Storage.js
@@ -1,7 +1,7 @@
 const PREFIX = 'shlink';
 const buildPath = (path) => `${PREFIX}.${path}`;

-export class Storage {
+export default class Storage {
  constructor(localStorage) {
    this.localStorage = localStorage;
  }
@@ -14,15 +14,3 @@ export class Storage {

  set = (key, value) => this.localStorage.setItem(buildPath(key), JSON.stringify(value));
 }
-
-const browserStorage = global.localStorage || {
-  getItem() {
-    return '';
-  },
-  setItem() {
-    return '';
-  },
-};
-const storage = new Storage(browserStorage);
-
-export default storage;
--- a/src/utils/services/provideServices.js
+++ b/src/utils/services/provideServices.js
@@ -0,0 +1,15 @@
+import axios from 'axios';
+import Storage from './Storage';
+import ColorGenerator from './ColorGenerator';
+import buildShlinkApiClient from './ShlinkApiClientBuilder';
+
+const provideServices = (bottle) => {
+  bottle.constant('localStorage', global.localStorage);
+  bottle.service('Storage', Storage, 'localStorage');
+  bottle.service('ColorGenerator', ColorGenerator, 'Storage');
+
+  bottle.constant('axios', axios);
+  bottle.serviceFactory('buildShlinkApiClient', buildShlinkApiClient, 'axios');
+};
+
+export default provideServices;
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -4,3 +4,16 @@ export const stateFlagTimeout = (setState, flagName, initialValue = true, delay
  setState({ [flagName]: initialValue });
  setTimeout(() => setState({ [flagName]: !initialValue }), delay);
 };
+
+export const determineOrderDir = (clickedField, currentOrderField, currentOrderDir) => {
+  if (currentOrderField !== clickedField) {
+    return 'ASC';
+  }
+
+  const newOrderMap = {
+    ASC: 'DESC',
+    DESC: undefined,
+  };
+
+  return currentOrderDir ? newOrderMap[currentOrderDir] : 'ASC';
+};
--- a/src/visits/GraphCard.js
+++ b/src/visits/GraphCard.js
@@ -0,0 +1,97 @@
+import { Card, CardHeader, CardBody } from 'reactstrap';
+import { Doughnut, HorizontalBar } from 'react-chartjs-2';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { keys, values } from 'ramda';
+
+const propTypes = {
+  title: PropTypes.string,
+  children: PropTypes.node,
+  isBarChart: PropTypes.bool,
+  stats: PropTypes.object,
+  matchMedia: PropTypes.func,
+};
+const defaultProps = {
+  matchMedia: global.window ? global.window.matchMedia : () => {},
+};
+
+const generateGraphData = (title, isBarChart, labels, data) => ({
+  labels,
+  datasets: [
+    {
+      title,
+      data,
+      backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
+        '#97BBCD',
+        '#DCDCDC',
+        '#F7464A',
+        '#46BFBD',
+        '#FDB45C',
+        '#949FB1',
+        '#4D5360',
+      ],
+      borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
+      borderWidth: 2,
+    },
+  ],
+});
+
+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 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 Component = isBarChart ? HorizontalBar : Doughnut;
+  const labels = keys(stats);
+  const data = values(stats);
+  const aspectRatio = determineGraphAspectRatio(labels.length, isBarChart, matchMedia);
+  const options = {
+    aspectRatio,
+    legend: isBarChart ? { display: false } : { position: 'right' },
+    scales: isBarChart ? {
+      xAxes: [
+        {
+          ticks: { beginAtZero: true },
+        },
+      ],
+    } : null,
+    tooltips: {
+      intersect: !isBarChart,
+    },
+  };
+
+  return <Component data={generateGraphData(title, isBarChart, labels, data)} options={options} height={null} />;
+};
+
+const GraphCard = ({ title, children, isBarChart, stats, matchMedia }) => (
+  <Card className="mt-4">
+    <CardHeader className="graph-card__header">{children || title}</CardHeader>
+    <CardBody>{renderGraph(title, isBarChart, stats, matchMedia)}</CardBody>
+  </Card>
+);
+
+GraphCard.propTypes = propTypes;
+GraphCard.defaultProps = defaultProps;
+
+export default GraphCard;
--- a/src/visits/ShortUrlVisits.js
+++ b/src/visits/ShortUrlVisits.js
@@ -0,0 +1,139 @@
+import preloader from '@fortawesome/fontawesome-free-solid/faCircleNotch';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { isEmpty, mapObjIndexed } from 'ramda';
+import React from 'react';
+import { Card } from 'reactstrap';
+import PropTypes from 'prop-types';
+import DateInput from '../utils/DateInput';
+import MutedMessage from '../utils/MuttedMessage';
+import SortableBarGraph from './SortableBarGraph';
+import { shortUrlVisitsType } from './reducers/shortUrlVisits';
+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 {
+  static propTypes = {
+    match: PropTypes.shape({
+      params: PropTypes.object,
+    }),
+    getShortUrlVisits: PropTypes.func,
+    shortUrlVisits: shortUrlVisitsType,
+    getShortUrlDetail: PropTypes.func,
+    shortUrlDetail: shortUrlDetailType,
+  };
+
+  state = { startDate: undefined, endDate: undefined };
+  loadVisits = () => {
+    const { match: { params }, getShortUrlVisits } = this.props;
+
+    getShortUrlVisits(params.shortCode, mapObjIndexed(
+      (value) => value && value.format ? value.format('YYYY-MM-DD') : value,
+      this.state
+    ));
+  };
+
+  componentDidMount() {
+    const { match: { params }, getShortUrlDetail } = this.props;
+
+    this.loadVisits();
+    getShortUrlDetail(params.shortCode);
+  }
+
+  render() {
+    const { shortUrlVisits, shortUrlDetail } = this.props;
+
+    const renderVisitsContent = () => {
+      const { visits, loading, error } = shortUrlVisits;
+
+      if (loading) {
+        return <MutedMessage><FontAwesomeIcon icon={preloader} spin /> Loading...</MutedMessage>;
+      }
+
+      if (error) {
+        return (
+          <Card className="mt-4" body inverse color="danger">
+            An error occurred while loading visits :(
+          </Card>
+        );
+      }
+
+      if (isEmpty(visits)) {
+        return <MutedMessage>There are no visits matching current filter  :(</MutedMessage>;
+      }
+
+      return (
+        <div className="row">
+          <div className="col-md-6">
+            <GraphCard title="Operating systems" stats={processOsStats(visits)} />
+          </div>
+          <div className="col-md-6">
+            <GraphCard title="Browsers" stats={processBrowserStats(visits)} />
+          </div>
+          <div className="col-md-6">
+            <SortableBarGraph
+              stats={processCountriesStats(visits)}
+              title="Countries"
+              sortingItems={{
+                name: 'Country name',
+                amount: 'Visits amount',
+              }}
+            />
+          </div>
+          <div className="col-md-6">
+            <SortableBarGraph
+              stats={processReferrersStats(visits)}
+              title="Referrers"
+              sortingItems={{
+                name: 'Referrer name',
+                amount: 'Visits amount',
+              }}
+            />
+          </div>
+        </div>
+      );
+    };
+
+    return (
+      <div className="shlink-container">
+        <VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} />
+
+        <section className="mt-4">
+          <div className="row">
+            <div className="col-xl-3 col-lg-4 col-md-6 offset-xl-6 offset-lg-4">
+              <DateInput
+                selected={this.state.startDate}
+                placeholderText="Since"
+                isClearable
+                maxDate={this.state.endDate}
+                onChange={(date) => this.setState({ startDate: date }, () => this.loadVisits())}
+              />
+            </div>
+            <div className="col-xl-3 col-lg-4 col-md-6">
+              <DateInput
+                className="short-url-visits__date-input"
+                selected={this.state.endDate}
+                placeholderText="Until"
+                isClearable
+                minDate={this.state.startDate}
+                onChange={(date) => this.setState({ endDate: date }, () => this.loadVisits())}
+              />
+            </div>
+          </div>
+        </section>
+
+        <section>
+          {renderVisitsContent()}
+        </section>
+      </div>
+    );
+  }
+};
+
+export default ShortUrlVisits;
--- a/src/short-urls/ShortUrlVisits.scss
+++ b/src/short-urls/ShortUrlVisits.scss
--- a/src/visits/SortableBarGraph.js
+++ b/src/visits/SortableBarGraph.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { fromPairs, head, identity, keys, pipe, prop, reverse, sortBy, toLower, toPairs, type } from 'ramda';
+import SortingDropdown from '../utils/SortingDropdown';
+import GraphCard from './GraphCard';
+
+export default class SortableBarGraph extends React.Component {
+  static propTypes = {
+    stats: PropTypes.object.isRequired,
+    title: PropTypes.string.isRequired,
+    sortingItems: PropTypes.object.isRequired,
+  };
+
+  state = {
+    orderField: undefined,
+    orderDir: undefined,
+  };
+
+  render() {
+    const { stats, sortingItems, title } = this.props;
+    const sortStats = () => {
+      if (!this.state.orderField) {
+        return stats;
+      }
+
+      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)
+      );
+
+      return fromPairs(this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs));
+    };
+
+    return (
+      <GraphCard stats={sortStats()} isBarChart>
+        {title}
+        <div className="float-right">
+          <SortingDropdown
+            isButton={false}
+            right
+            orderField={this.state.orderField}
+            orderDir={this.state.orderDir}
+            items={sortingItems}
+            onChange={(orderField, orderDir) => this.setState({ orderField, orderDir })}
+          />
+        </div>
+      </GraphCard>
+    );
+  }
+}
--- a/src/visits/VisitsHeader.js
+++ b/src/visits/VisitsHeader.js
@@ -0,0 +1,55 @@
+import { Card, UncontrolledTooltip } from 'reactstrap';
+import Moment from 'react-moment';
+import React from 'react';
+import ExternalLink from '../utils/ExternalLink';
+import './VisitsHeader.scss';
+import { shortUrlDetailType } from './reducers/shortUrlDetail';
+import { shortUrlVisitsType } from './reducers/shortUrlVisits';
+
+const propTypes = {
+  shortUrlDetail: shortUrlDetailType.isRequired,
+  shortUrlVisits: shortUrlVisitsType.isRequired,
+};
+
+export function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
+  const { shortUrl, loading } = shortUrlDetail;
+  const { visits } = shortUrlVisits;
+  const shortLink = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
+  const longLink = shortUrl && shortUrl.longUrl ? shortUrl.longUrl : '';
+
+  const renderDate = () => (
+    <span>
+      <b id="created" className="visits-header__created-at"><Moment fromNow>{shortUrl.dateCreated}</Moment></b>
+      <UncontrolledTooltip placement="bottom" target="created">
+        <Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment>
+      </UncontrolledTooltip>
+    </span>
+  );
+
+  return (
+    <header>
+      <Card className="bg-light" body>
+        <h2>
+          <span className="badge badge-main float-right">Visits: {visits.length}</span>
+          Visit stats for <ExternalLink href={shortLink} />
+        </h2>
+        <hr />
+        {shortUrl.dateCreated && (
+          <div>
+            Created:
+            &nbsp;
+            {renderDate()}
+          </div>
+        )}
+        <div>
+          Long URL:
+          &nbsp;
+          {loading && <small>Loading...</small>}
+          {!loading && <ExternalLink href={longLink} />}
+        </div>
+      </Card>
+    </header>
+  );
+}
+
+VisitsHeader.propTypes = propTypes;
--- a/src/visits/VisitsHeader.scss
+++ b/src/visits/VisitsHeader.scss
@@ -0,0 +1,3 @@
+.visits-header__created-at {
+  cursor: default;
+}
--- a/src/visits/reducers/shortUrlDetail.js
+++ b/src/visits/reducers/shortUrlDetail.js
@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types';
+import { shortUrlType } from '../../short-urls/reducers/shortUrlsList';
+
+/* eslint-disable padding-line-between-statements, newline-after-var */
+export const GET_SHORT_URL_DETAIL_START = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_START';
+export const GET_SHORT_URL_DETAIL_ERROR = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_ERROR';
+export const GET_SHORT_URL_DETAIL = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL';
+/* eslint-enable padding-line-between-statements, newline-after-var */
+
+export const shortUrlDetailType = PropTypes.shape({
+  shortUrl: shortUrlType,
+  loading: PropTypes.bool,
+  error: PropTypes.bool,
+});
+
+const initialState = {
+  shortUrl: {},
+  loading: false,
+  error: false,
+};
+
+export default function reducer(state = initialState, action) {
+  switch (action.type) {
+    case GET_SHORT_URL_DETAIL_START:
+      return {
+        ...state,
+        loading: true,
+      };
+    case GET_SHORT_URL_DETAIL_ERROR:
+      return {
+        ...state,
+        loading: false,
+        error: true,
+      };
+    case GET_SHORT_URL_DETAIL:
+      return {
+        shortUrl: action.shortUrl,
+        loading: false,
+        error: false,
+      };
+    default:
+      return state;
+  }
+}
+
+export const getShortUrlDetail = (buildShlinkApiClient) => (shortCode) => async (dispatch, getState) => {
+  dispatch({ type: GET_SHORT_URL_DETAIL_START });
+
+  const { selectedServer } = getState();
+  const shlinkApiClient = buildShlinkApiClient(selectedServer);
+
+  try {
+    const shortUrl = await shlinkApiClient.getShortUrl(shortCode);
+
+    dispatch({ shortUrl, type: GET_SHORT_URL_DETAIL });
+  } catch (e) {
+    dispatch({ type: GET_SHORT_URL_DETAIL_ERROR });
+  }
+};
--- a/src/visits/reducers/shortUrlVisits.js
+++ b/src/visits/reducers/shortUrlVisits.js
@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+
+/* eslint-disable padding-line-between-statements, newline-after-var */
+export const GET_SHORT_URL_VISITS_START = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_START';
+export const GET_SHORT_URL_VISITS_ERROR = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_ERROR';
+export const GET_SHORT_URL_VISITS = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS';
+/* eslint-enable padding-line-between-statements, newline-after-var */
+
+export const shortUrlVisitsType = PropTypes.shape({
+  visits: PropTypes.array,
+  loading: PropTypes.bool,
+  error: PropTypes.bool,
+});
+
+const initialState = {
+  visits: [],
+  loading: false,
+  error: false,
+};
+
+export default function reducer(state = initialState, action) {
+  switch (action.type) {
+    case GET_SHORT_URL_VISITS_START:
+      return {
+        ...state,
+        loading: true,
+      };
+    case GET_SHORT_URL_VISITS_ERROR:
+      return {
+        ...state,
+        loading: false,
+        error: true,
+      };
+    case GET_SHORT_URL_VISITS:
+      return {
+        visits: action.visits,
+        loading: false,
+        error: false,
+      };
+    default:
+      return state;
+  }
+}
+
+export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, dates) => async (dispatch, getState) => {
+  dispatch({ type: GET_SHORT_URL_VISITS_START });
+
+  const { selectedServer } = getState();
+  const shlinkApiClient = buildShlinkApiClient(selectedServer);
+
+  try {
+    const visits = await shlinkApiClient.getShortUrlVisits(shortCode, dates);
+
+    dispatch({ visits, type: GET_SHORT_URL_VISITS });
+  } catch (e) {
+    dispatch({ type: GET_SHORT_URL_VISITS_ERROR });
+  }
+};
--- a/src/visits/services/provideServices.js
+++ b/src/visits/services/provideServices.js
@@ -0,0 +1,22 @@
+import ShortUrlVisits from '../ShortUrlVisits';
+import { getShortUrlVisits } from '../reducers/shortUrlVisits';
+import { getShortUrlDetail } from '../reducers/shortUrlDetail';
+import * as visitsParser from './VisitsParser';
+
+const provideServices = (bottle, connect) => {
+  // Components
+  bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'VisitsParser');
+  bottle.decorator('ShortUrlVisits', connect(
+    [ 'shortUrlVisits', 'shortUrlDetail' ],
+    [ 'getShortUrlVisits', 'getShortUrlDetail' ]
+  ));
+
+  // Services
+  bottle.serviceFactory('VisitsParser', () => visitsParser);
+
+  // Actions
+  bottle.serviceFactory('getShortUrlVisits', getShortUrlVisits, 'buildShlinkApiClient');
+  bottle.serviceFactory('getShortUrlDetail', getShortUrlDetail, 'buildShlinkApiClient');
+};
+
+export default provideServices;
--- a/test/App.test.js
+++ b/test/App.test.js
@@ -1,13 +1,16 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Route } from 'react-router-dom';
-import App from '../src/App';
-import MainHeader from '../src/common/MainHeader';
+import { identity } from 'ramda';
+import appFactory from '../src/App';

 describe('<App />', () => {
  let wrapper;
+  const MainHeader = () => '';

  beforeEach(() => {
+    const App = appFactory(MainHeader, identity, identity, identity);
+
    wrapper = shallow(<App />);
  });
  afterEach(() => wrapper.unmount());
--- a/test/common/AsideMenu.test.js
+++ b/test/common/AsideMenu.test.js
@@ -1,17 +1,18 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import AsideMenu from '../../src/common/AsideMenu';
+import asideMenuCreator from '../../src/common/AsideMenu';

 describe('<AsideMenu />', () => {
  let wrapped;
+  const DeleteServerButton = () => '';

  beforeEach(() => {
+    const AsideMenu = asideMenuCreator(DeleteServerButton);
+
    wrapped = shallow(<AsideMenu selectedServer={{ id: 'abc123' }} />);
  });
-  afterEach(() => {
-    wrapped.unmount();
-  });
+  afterEach(() => wrapped.unmount());

  it('contains links to different sections', () => {
    const links = wrapped.find(NavLink);
@@ -22,6 +23,6 @@ describe('<AsideMenu />', () => {
  });

  it('contains a button to delete server', () => {
-    expect(wrapped.find('DeleteServerButton')).toHaveLength(1);
+    expect(wrapped.find(DeleteServerButton)).toHaveLength(1);
  });
 });
--- a/test/common/Home.test.js
+++ b/test/common/Home.test.js
@@ -2,7 +2,7 @@ import { shallow } from 'enzyme';
 import { values } from 'ramda';
 import React from 'react';
 import * as sinon from 'sinon';
-import { HomeComponent } from '../../src/common/Home';
+import Home from '../../src/common/Home';

 describe('<Home />', () => {
  let wrapped;
@@ -15,7 +15,7 @@ describe('<Home />', () => {
  const createComponent = (props) => {
    const actualProps = { ...defaultProps, ...props };

-    wrapped = shallow(<HomeComponent {...actualProps} />);
+    wrapped = shallow(<Home {...actualProps} />);

    return wrapped;
  };
--- a/test/servers/CreateServer.test.js
+++ b/test/servers/CreateServer.test.js
@@ -2,11 +2,11 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { identity } from 'ramda';
 import sinon from 'sinon';
-import { CreateServerComponent } from '../../src/servers/CreateServer';
-import ImportServersBtn from '../../src/servers/helpers/ImportServersBtn';
+import createServerConstruct from '../../src/servers/CreateServer';

 describe('<CreateServer />', () => {
  let wrapper;
+  const ImportServersBtn = () => '';
  const createServerMock = sinon.fake();
  const historyMock = {
    push: sinon.fake(),
@@ -16,12 +16,10 @@ describe('<CreateServer />', () => {
    createServerMock.resetHistory();
    historyMock.push.resetHistory();

+    const CreateServer = createServerConstruct(ImportServersBtn);
+
    wrapper = shallow(
-      <CreateServerComponent
-        createServer={createServerMock}
-        resetSelectedServer={identity}
-        history={historyMock}
-      />
+      <CreateServer createServer={createServerMock} resetSelectedServer={identity} history={historyMock} />
    );
  });
  afterEach(() => wrapper.unmount());
--- a/test/servers/DeleteServerButton.test.js
+++ b/test/servers/DeleteServerButton.test.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import DeleteServerButton from '../../src/servers/DeleteServerButton';
+import deleteServerButtonConstruct from '../../src/servers/DeleteServerButton';
 import DeleteServerModal from '../../src/servers/DeleteServerModal';

 describe('<DeleteServerButton />', () => {
  let wrapper;

  beforeEach(() => {
+    const DeleteServerButton = deleteServerButtonConstruct(DeleteServerModal);
+
    wrapper = shallow(<DeleteServerButton server={{}} className="button" />);
  });
  afterEach(() => wrapper.unmount());
--- a/test/servers/DeleteServerModal.test.js
+++ b/test/servers/DeleteServerModal.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import { DeleteServerModalComponent } from '../../src/servers/DeleteServerModal';
+import DeleteServerModal from '../../src/servers/DeleteServerModal';

 describe('<DeleteServerModal />', () => {
  let wrapper;
@@ -17,7 +17,7 @@ describe('<DeleteServerModal />', () => {
    historyMock.push.resetHistory();

    wrapper = shallow(
-      <DeleteServerModalComponent
+      <DeleteServerModal
        server={{ name: serverName }}
        toggle={toggleMock}
        isOpen={true}
--- a/test/servers/ServersDropdown.test.js
+++ b/test/servers/ServersDropdown.test.js
@@ -2,10 +2,11 @@ import { identity, values } from 'ramda';
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DropdownItem, DropdownToggle } from 'reactstrap';
-import { ServersDropdownComponent } from '../../src/servers/ServersDropdown';
+import serversDropdownCreator from '../../src/servers/ServersDropdown';

 describe('<ServersDropdown />', () => {
  let wrapped;
+  let ServersDropdown;
  const servers = {
    '1a': { name: 'foo', id: 1 },
    '2b': { name: 'bar', id: 2 },
@@ -13,7 +14,8 @@ describe('<ServersDropdown />', () => {
  };

  beforeEach(() => {
-    wrapped = shallow(<ServersDropdownComponent servers={servers} listServers={identity} />);
+    ServersDropdown = serversDropdownCreator({});
+    wrapped = shallow(<ServersDropdown servers={servers} listServers={identity} />);
  });
  afterEach(() => wrapped.unmount());

@@ -31,7 +33,7 @@ describe('<ServersDropdown />', () => {
  });

  it('contains a message when no servers exist yet', () => {
-    wrapped = shallow(<ServersDropdownComponent servers={{}} listServers={identity} />);
+    wrapped = shallow(<ServersDropdown servers={{}} listServers={identity} />);
    const item = wrapped.find(DropdownItem);

    expect(item).toHaveLength(1);
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Alejandro Celaya	019ce2e8ed	Added v1.2.1 to changelog	2018-12-21 11:03:51 +01:00
Alejandro Celaya	e93082a64d	Merge pull request #86 from acelaya/feature/code-coverage Feature/code coverage	2018-12-21 11:03:12 +01:00
Alejandro Celaya	8a9a4f40a7	Created shortUrlsList reducer test	2018-12-21 10:58:51 +01:00
Alejandro Celaya	047d99be6d	Updated ScrollTop component so that it gets the window object injected as a dependency	2018-12-21 10:38:40 +01:00
Alejandro Celaya	16cf30f26f	Created EditTagsModal component test	2018-12-21 10:34:12 +01:00
Alejandro Celaya	9268114fe1	Created shortUrlDeletion reducer test	2018-12-21 10:02:42 +01:00
Alejandro Celaya	fefbb73568	Created Storage service test	2018-12-19 20:43:55 +01:00
Alejandro Celaya	12cddac27a	Merge pull request #83 from acelaya/feature/insensitive-ordering Ensured bar graphs are sorted case insensitive	2018-12-19 11:15:30 +01:00
Alejandro Celaya	77a2f32cfd	Ensured bar graphs are sorted case insensitive	2018-12-19 11:07:47 +01:00
Alejandro Celaya	9d513e9ea0	Merge pull request #82 from acelaya/feature/disable-tag-build Disabled yarn build when a tag exists in travis	2018-12-19 10:44:48 +01:00
Alejandro Celaya	9df2de5b30	Disabled yarn build when a tag exists in travis	2018-12-19 10:38:00 +01:00
Alejandro Celaya	fd2367b005	Updated nginx base image for Docker. Closes #79	2018-12-18 20:33:37 +01:00
Alejandro Celaya	a2b08277dc	Merge pull request #81 from acelaya/feature/dependency-injection Feature/dependency injection	2018-12-18 20:31:25 +01:00
Alejandro Celaya	8bd3a15a1d	Updated changelog	2018-12-18 20:28:21 +01:00
Alejandro Celaya	cd11dd9848	Updated tests config excluding config files form code coverage	2018-12-18 20:24:18 +01:00
Alejandro Celaya	eec79043cc	Moved common and utils services to their own service providers	2018-12-18 20:19:22 +01:00
Alejandro Celaya	4b1f5e9f4c	Extracted short-url related services to its own service provider	2018-12-18 20:00:23 +01:00
Alejandro Celaya	cf1239cf6e	Moved all server-related services to its own service provider	2018-12-18 19:45:09 +01:00
Alejandro Celaya	566322a8c5	Extracted tag related services to its own service provider	2018-12-18 14:55:00 +01:00
Alejandro Celaya	fa3e1eba93	Moved all visits-related services to its own service provide function inside visits	2018-12-18 14:36:32 +01:00
Alejandro Celaya	471322f4db	Implemented dependency injection in all tag related components	2018-12-18 11:28:15 +01:00
Alejandro Celaya	79a0a5e4ea	Fixed tests	2018-12-18 10:23:09 +01:00
Alejandro Celaya	4f54e3315f	Simplified ShlinkApiClient and moved runtime creation logic to external service	2018-12-18 10:14:25 +01:00
Alejandro Celaya	7bd4b39b5a	Added lazy loading to action services	2018-12-18 05:03:38 +01:00
Alejandro Celaya	12ddeebedf	Registered first actions as services	2018-12-18 04:54:32 +01:00
Alejandro Celaya	d6e53918a2	Created function which dynamically resolve action services from the container for connected components	2018-12-18 04:34:37 +01:00
Alejandro Celaya	bab1e57ab1	Registered remaining short URLs components in DI container	2018-12-17 23:11:55 +01:00
Alejandro Celaya	bec755b121	Fixed tests	2018-12-17 22:32:51 +01:00
Alejandro Celaya	5616d045ab	Migrated a lot more components to new DI system	2018-12-17 22:18:47 +01:00
Alejandro Celaya	5e6ad14a85	More components migrated for dependency injection	2018-12-17 20:24:31 +01:00
Alejandro Celaya	79a518b02d	Registered first components as services	2018-12-17 20:03:36 +01:00
Alejandro Celaya	e996a08c02	Added v1.2.0 to changelog	2018-11-01 19:31:53 +01:00
Alejandro Celaya	cc206c2843	Added missing changelog entry	2018-11-01 15:03:26 +01:00
Alejandro Celaya	591c3b76f9	Merge pull request #70 from acelaya/feature/tests Feature/tests	2018-11-01 15:02:09 +01:00
Alejandro Celaya	07b1d5be2e	Created shortUrlCreation reducer test	2018-11-01 14:55:30 +01:00
Alejandro Celaya	f94b5b7c68	Created tagDelete reducer test	2018-11-01 14:44:55 +01:00
Alejandro Celaya	824a2facac	Created tagEdit reducer test	2018-11-01 14:13:49 +01:00
Alejandro Celaya	4445c79540	Created TagsList test	2018-11-01 13:51:03 +01:00
Alejandro Celaya	85cb849ba5	Created TagCard test	2018-11-01 13:34:31 +01:00
Alejandro Celaya	53132fa900	Created CreateShortUrl test	2018-11-01 13:15:09 +01:00
Alejandro Celaya	c774a00610	Created ShortUrls test	2018-11-01 12:44:27 +01:00
Alejandro Celaya	1697ef9306	Created QrCodeModal test	2018-11-01 12:35:51 +01:00
Alejandro Celaya	79a16a2c2c	Created PreviewModal test	2018-11-01 12:34:18 +01:00
Alejandro Celaya	30192cb349	Created DeleteShortUrlModal test	2018-11-01 12:24:16 +01:00
Alejandro Celaya	8d0c0bcc99	Created CreateShortUrlResult test	2018-11-01 09:30:05 +01:00
Alejandro Celaya	70ebb0362a	Converted DateInput into functional component	2018-11-01 09:16:18 +01:00
Alejandro Celaya	cccf57a35a	Moved DateInput from common to utils	2018-11-01 09:05:20 +01:00
Alejandro Celaya	756e0c637e	Merge pull request #69 from acelaya/feature/server-subpatch Feature/server subpatch	2018-11-01 08:58:06 +01:00
Alejandro Celaya	44541d5e97	Fixed typo	2018-11-01 08:49:17 +01:00
Alejandro Celaya	655045c975	Documented how to build the project so that it can be served from a subpath	2018-11-01 08:46:54 +01:00
Alejandro Celaya	6784c30fa0	Ensured react router uses homepage defined in package.jsoin as basename	2018-11-01 08:20:33 +01:00
Alejandro Celaya	a65aadd4b2	Merge pull request #68 from acelaya/feature/chart-labels Feature/chart labels	2018-10-30 20:48:21 +01:00
Alejandro Celaya	3c12bc1434	Updated changelog	2018-10-30 20:43:20 +01:00
Alejandro Celaya	822afa6db7	Ensured tooltips are not intersect for bar charts	2018-10-30 20:41:36 +01:00
Alejandro Celaya	0c1c471714	Fixed test	2018-10-30 07:45:57 +01:00
Alejandro Celaya	b1b215e84a	Updated react dependency	2018-10-30 07:41:31 +01:00
Alejandro Celaya	7a63f737ac	Updated sort icons in SortingDropdown	2018-10-30 07:35:35 +01:00
Alejandro Celaya	4adf618026	Merge pull request #67 from acelaya/feature/order-countries Feature/order countries	2018-10-28 23:13:02 +01:00
Alejandro Celaya	f1c464fd3e	Added unreleased entry in changelog	2018-10-28 23:08:46 +01:00
Alejandro Celaya	99833b51a9	Ensured dropdown item styles are not overriden for disabled items	2018-10-28 23:06:57 +01:00
Alejandro Celaya	05936c52b3	Added sorting to referrers bar graph	2018-10-28 23:04:52 +01:00
Alejandro Celaya	368de2b4c7	Added order control to countries graph	2018-10-28 22:54:08 +01:00
Alejandro Celaya	6634fc41c5	Fixed short urls dropdown menu not properly located	2018-10-28 21:51:54 +01:00
Alejandro Celaya	4ad8e909d4	Extracted sorting dropdown to its own component	2018-10-28 21:26:47 +01:00
Alejandro Celaya	56ad6d9e1b	Added missing changes for v1.1.1 to changelog	2018-10-20 17:23:26 +02:00
Alejandro Celaya	169c69df2c	Merge pull request #64 from acelaya/bugfix/graphs-height Bugfix/graphs height	2018-10-19 21:12:38 +02:00
Alejandro Celaya	0e8631ae9d	Updated GraphCard so that it automatically calculates the proper aspect ration for bar chart graphs	2018-10-19 20:27:25 +02:00
Alejandro Celaya	812e391e34	Moved helper functions in GraphCard outside of component function	2018-10-19 19:04:22 +02:00
Alejandro Celaya	4c1a044fd3	Merge pull request #62 from acelaya/bugfix/date-boxes-margin Recovered missing class	2018-10-07 09:26:59 +02:00
Alejandro Celaya	bb17dbe680	Recovered missing class	2018-10-07 09:22:15 +02:00
Alejandro Celaya	160de66b44	Merge pull request #61 from acelaya/feature/automatic-release Feature/automatic release	2018-10-07 09:15:01 +02:00
Alejandro Celaya	02b38cf84a	Updated changelog including the automation of the release	2018-10-07 09:10:44 +02:00
Alejandro Celaya	2101dadfd7	Added release generation to travis deploy step	2018-10-07 09:09:40 +02:00
Alejandro Celaya	782a5c1d35	Merge pull request #60 from acelaya/bugfix/color-generator Bugfix/color generator	2018-10-07 09:08:12 +02:00
Alejandro Celaya	de9f20b7a6	Added unreleased changes to changelog	2018-10-07 09:01:24 +02:00
Alejandro Celaya	644caf7dfb	Ensured ColorGenerator matches keys in a case insensitive way	2018-10-07 08:59:25 +02:00
Alejandro Celaya	f26deb51eb	Fixed typo in badge	2018-09-16 13:18:41 +02:00
Alejandro Celaya	606397b542	Merge pull request #41 from acelaya/feature/1.1.0 Feature/1.1.0	2018-09-16 13:05:03 +02:00
Alejandro Celaya	bc8eaaaee4	Added v1.1.0 to changelog	2018-09-16 12:52:00 +02:00
Alejandro Celaya	7d665f3933	Ensured tags returned from server are used after editing short URL tags in order to use the normalized values	2018-09-16 12:48:28 +02:00
Alejandro Celaya	fc1af04243	Created tests for Paginator and SearchBar	2018-09-16 12:18:02 +02:00
Alejandro Celaya	f2d03203ae	Implemented short URLs deletion	2018-09-16 10:47:17 +02:00
Alejandro Celaya	2d6dda3576	Created delete short URLs modal	2018-09-16 09:35:39 +02:00
Alejandro Celaya	9b3bfe56bb	Ensured list filtering params are reset when list component unmounts	2018-09-16 09:01:05 +02:00
Alejandro Celaya	5d5a2be498	Ensured bar charts start at 0	2018-09-08 20:42:14 +02:00
Alejandro Celaya	64c1b56973	Created ShortUrlVisits test	2018-09-08 13:28:40 +02:00
Alejandro Celaya	d37e7ca7ce	Created VisitsHeader test	2018-09-08 09:31:44 +02:00
Alejandro Celaya	eb0f219403	Created GraphCard test	2018-09-08 09:06:18 +02:00
Alejandro Celaya	0c1656285b	Created shortUrlVisits reducer test	2018-09-08 08:49:49 +02:00
Alejandro Celaya	bbce53ade6	Created shortUrlDetail reducer test	2018-09-07 20:41:21 +02:00
Alejandro Celaya	3e63734e2b	Improved visits page	2018-09-05 20:17:46 +02:00
Alejandro Celaya	f0b0fdf114	Replaced hardcoded paypal link by short link	2018-09-02 11:10:59 +02:00
Alejandro Celaya	f84e3c5b60	Moved jest config from package.json to external file	2018-09-02 11:10:59 +02:00
Alejandro Celaya	28bd39f974	Fixed stylelint not properly inspecting files in src root	2018-09-02 11:10:59 +02:00
Alejandro Celaya	8b17ff88ed	Split short URL visits reducer into two individual reducers	2018-09-02 11:10:59 +02:00
Alejandro Celaya	0d97c084c2	Extracted components in ShortUrlVisits to simplify maintainability	2018-09-02 11:10:59 +02:00
Alejandro Celaya	b7ca32ff8f	Moved visits-related elements to visits folder	2018-09-02 11:10:59 +02:00
Alejandro Celaya	b454810357	Moved tag helper components from utils to tags/helpers folder	2018-09-02 11:10:59 +02:00
Alejandro Celaya	fd57d70a0b	Fixed tags input autofocus	2018-09-02 11:10:59 +02:00
Alejandro Celaya	b0bce7498a	Added first autocomplete implementation on tags selector	2018-09-02 11:10:59 +02:00
Alejandro Celaya	1519f89318	Created different functions which load tags always or only once	2018-09-02 11:10:59 +02:00
Alejandro Celaya	0b089e24de	Moved propTypes and defaultProps as static properties in class components	2018-09-02 11:10:59 +02:00