From cb9dc9d65e31a5f865416aa928ffaa4f32606fa7 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Tue, 14 Aug 2018 20:28:46 +0200
Subject: [PATCH 01/66] Added swipable menu

---
 package.json                     |  1 +
 src/App.js                       |  2 +-
 src/App.scss                     |  5 +++
 src/common/AsideMenu.js          | 25 ++++++-----
 src/common/AsideMenu.scss        | 32 +++++++++----
 src/common/MenuLayout.js         | 77 ++++++++++++++++++++++----------
 src/common/MenuLayout.scss       | 12 +++++
 src/index.scss                   |  6 +++
 src/servers/DeleteServerModal.js |  8 +---
 src/servers/prop-types/index.js  |  8 ++++
 yarn.lock                        | 11 +++++
 11 files changed, 139 insertions(+), 48 deletions(-)
 create mode 100644 src/common/MenuLayout.scss
 create mode 100644 src/servers/prop-types/index.js

diff --git a/package.json b/package.json
index 661710f9..804f8756 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "react-moment": "^0.7.6",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.2.2",
+    "react-swipeable": "^4.3.0",
     "react-tagsinput": "^3.19.0",
     "reactstrap": "^6.0.1",
     "redux": "^4.0.0",
diff --git a/src/App.js b/src/App.js
index 7741f913..75832867 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,7 +9,7 @@ import CreateServer from './servers/CreateServer';
 export default class App extends React.Component {
   render() {
     return (
-      <div className="container-fluid">
+      <div className="container-fluid app-container">
         <MainHeader/>
 
         <div className="app">
diff --git a/src/App.scss b/src/App.scss
index 4244391b..8ee1b5ff 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,5 +1,10 @@
 @import './utils/base';
 
+.app-container {
+  height: 100%;
+}
+
 .app {
   padding-top: $headerHeight;
+  height: 100%;
 }
diff --git a/src/common/AsideMenu.js b/src/common/AsideMenu.js
index db2e783e..9d1e552b 100644
--- a/src/common/AsideMenu.js
+++ b/src/common/AsideMenu.js
@@ -6,12 +6,23 @@ import { NavLink } from 'react-router-dom';
 import DeleteServerButton from '../servers/DeleteServerButton';
 import './AsideMenu.scss';
 import PropTypes from 'prop-types';
+import { serverType } from '../servers/prop-types';
 
-export default function AsideMenu({ selectedServer }) {
+const defaultProps = {
+  className: '',
+  showOnMobile: false,
+};
+const propTypes = {
+  selectedServer: serverType,
+  className: PropTypes.string,
+  showOnMobile: PropTypes.bool,
+};
+
+export default function AsideMenu({ selectedServer, className, showOnMobile }) {
   const serverId = selectedServer ? selectedServer.id : '';
 
   return (
-    <aside className="aside-menu col-lg-2 col-md-3">
+    <aside className={`aside-menu ${!showOnMobile ? 'aside-menu--hidden' : ''} ${className}`}>
       <nav className="nav flex-column aside-menu__nav">
         <NavLink
           className="aside-menu__item"
@@ -39,11 +50,5 @@ export default function AsideMenu({ selectedServer }) {
   );
 }
 
-AsideMenu.propTypes = {
-  selectedServer: PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-    url: PropTypes.string,
-    apiKey: PropTypes.string,
-  }),
-};
+AsideMenu.defaultProps = defaultProps;
+AsideMenu.propTypes = propTypes;
diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss
index 94664bb7..aca922a2 100644
--- a/src/common/AsideMenu.scss
+++ b/src/common/AsideMenu.scss
@@ -1,22 +1,38 @@
 @import '../utils/base';
+@import '../utils/mixins/box-shadow';
+
+$asideMenuMobileWidth: 280px;
 
 .aside-menu {
   background-color: #f7f7f7;
-  padding-top: 10px;
+  position: fixed !important;
+  padding-top: 13px;
   padding-bottom: 10px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  z-index: 1050;
+  overflow-x: hidden;
+  overflow-y: auto;
 
   @media (min-width: $mdMin) {
-    position: fixed !important;
     top: $headerHeight;
-    bottom: 0;
-    left: 0;
-    z-index: 1000;
-    display: block;
     padding: 30px 15px 15px;
-    overflow-x: hidden;
-    overflow-y: auto;
     border-right: 1px solid #eee;
   }
+
+  @media (max-width: $smMax) {
+    width: $asideMenuMobileWidth !important;
+    @include box-shadow(-10px 0px 50px 11px rgba(0, 0, 0, 0.55));
+    transition: left 300ms;
+  }
+}
+
+.aside-menu--hidden {
+  @media (max-width: $smMax) {
+    left: -($asideMenuMobileWidth + 35px);
+  }
 }
 
 .aside-menu__nav {
diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js
index 4b3a983f..f999483d 100644
--- a/src/common/MenuLayout.js
+++ b/src/common/MenuLayout.js
@@ -1,48 +1,79 @@
 import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Switch, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
+import { compose } from 'redux';
 import { selectServer } from '../servers/reducers/selectedServer';
 import CreateShortUrl from '../short-urls/CreateShortUrl';
 import ShortUrls from '../short-urls/ShortUrls';
 import ShortUrlsVisits from '../short-urls/ShortUrlVisits';
 import AsideMenu from './AsideMenu';
 import { pick } from 'ramda';
+import Swipeable from 'react-swipeable';
+import './MenuLayout.scss';
 
 export class MenuLayout extends React.Component {
+  state = { showSideBar: false };
+
   // FIXME Shouldn't use componentWillMount, but this code has to be run before children components are rendered
   componentWillMount() {
     const { serverId } = this.props.match.params;
     this.props.selectServer(serverId);
   }
 
+  componentDidUpdate(prevProps) {
+    const { location } = this.props;
+
+    // Hide sidebar when location changes
+    if (location !== prevProps.location) {
+      this.setState({ showSideBar: false });
+    }
+  }
+
   render() {
     const { selectedServer } = this.props;
 
     return (
-      <div className="row">
-        <AsideMenu selectedServer={selectedServer} />
-        <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3">
-          <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}
-            />
-          </Switch>
+      <Swipeable
+        delta={40}
+        onSwipedLeft={() => this.setState({ showSideBar: false })}
+        onSwipedRight={() => this.setState({ showSideBar: true })}
+        className="menu-layout__swipeable"
+      >
+        <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}
+              />
+            </Switch>
+          </div>
         </div>
-      </div>
+      </Swipeable>
     );
   }
 }
 
-export default connect(pick(['selectedServer', 'shortUrlsListParams']), { selectServer })(MenuLayout);
+export default compose(
+  connect(pick(['selectedServer', 'shortUrlsListParams']), { selectServer }),
+  withRouter
+)(MenuLayout);
diff --git a/src/common/MenuLayout.scss b/src/common/MenuLayout.scss
new file mode 100644
index 00000000..ad05ef23
--- /dev/null
+++ b/src/common/MenuLayout.scss
@@ -0,0 +1,12 @@
+.menu-layout__swipeable {
+  $offset: 15px;
+  height: 100%;
+  margin-right: -$offset;
+  margin-left: -$offset;
+  padding-left: $offset;
+  padding-right: $offset;
+}
+
+.menu-layout__swipeable-inner {
+  height: 100%;
+}
diff --git a/src/index.scss b/src/index.scss
index 3cc74ea0..2dc3857f 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,5 +1,11 @@
 @import './utils/base';
 
+html,
+body,
+#root {
+  height: 100%
+}
+
 * {
   outline: none !important;
 }
diff --git a/src/servers/DeleteServerModal.js b/src/servers/DeleteServerModal.js
index 95a0b554..ed1c4c65 100644
--- a/src/servers/DeleteServerModal.js
+++ b/src/servers/DeleteServerModal.js
@@ -5,6 +5,7 @@ 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';
 
 export const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }) => {
   const closeModal = () => {
@@ -34,12 +35,7 @@ export const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, histor
 DeleteServerModal.propTypes = {
   toggle: PropTypes.func.isRequired,
   isOpen: PropTypes.bool.isRequired,
-  server: PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-    url: PropTypes.string,
-    apiKey: PropTypes.string,
-  }),
+  server: serverType,
 };
 
 export default compose(
diff --git a/src/servers/prop-types/index.js b/src/servers/prop-types/index.js
new file mode 100644
index 00000000..8beba60f
--- /dev/null
+++ b/src/servers/prop-types/index.js
@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+export const serverType = PropTypes.shape({
+  id: PropTypes.string,
+  name: PropTypes.string,
+  url: PropTypes.string,
+  apiKey: PropTypes.string,
+});
diff --git a/yarn.lock b/yarn.lock
index 7c4c492c..85ebf0a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2160,6 +2160,10 @@ detect-node@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
 
+detect-passive-events@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/detect-passive-events/-/detect-passive-events-1.0.4.tgz#6ed477e6e5bceb79079735dcd357789d37f9a91a"
+
 detect-port-alt@1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/detect-port-alt/-/detect-port-alt-1.1.6.tgz#24707deabe932d4a3cf621302027c2b266568275"
@@ -6228,6 +6232,13 @@ react-router@^4.3.1:
     prop-types "^15.6.1"
     warning "^4.0.1"
 
+react-swipeable@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-4.3.0.tgz#818c0818ac565f5b169348f442153f343abff8bc"
+  dependencies:
+    detect-passive-events "^1.0.4"
+    prop-types "^15.5.8"
+
 react-tagsinput@^3.19.0:
   version "3.19.0"
   resolved "https://registry.yarnpkg.com/react-tagsinput/-/react-tagsinput-3.19.0.tgz#6e3b45595f2d295d4657bf194491988f948caabf"

From 72f96a6d1d87c666b348c74fc12bbf5fe0fe44a2 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Tue, 14 Aug 2018 20:46:01 +0200
Subject: [PATCH 02/66] Ensured sidebar does not overlap header in mobile
 resolutions

---
 src/common/AsideMenu.scss | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss
index aca922a2..aa3ae18f 100644
--- a/src/common/AsideMenu.scss
+++ b/src/common/AsideMenu.scss
@@ -8,16 +8,15 @@ $asideMenuMobileWidth: 280px;
   position: fixed !important;
   padding-top: 13px;
   padding-bottom: 10px;
-  top: 0;
+  top: $headerHeight - 3px;
   bottom: 0;
   left: 0;
   display: block;
-  z-index: 1050;
+  z-index: 1010;
   overflow-x: hidden;
   overflow-y: auto;
 
   @media (min-width: $mdMin) {
-    top: $headerHeight;
     padding: 30px 15px 15px;
     border-right: 1px solid #eee;
   }
@@ -36,9 +35,7 @@ $asideMenuMobileWidth: 280px;
 }
 
 .aside-menu__nav {
-  @media(min-width: $smMin) {
-    height: 100%;
-  }
+  height: 100%;
 }
 
 .aside-menu__item {

From a00f59bab3661b5fc6fd41b29d369f49a5d58aa0 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Tue, 14 Aug 2018 20:51:38 +0200
Subject: [PATCH 03/66] Added 'active' on Add server link

---
 src/common/MainHeader.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/common/MainHeader.js b/src/common/MainHeader.js
index 8f8f222a..d896bd5f 100644
--- a/src/common/MainHeader.js
+++ b/src/common/MainHeader.js
@@ -22,6 +22,9 @@ export class MainHeader extends React.Component {
   }
 
   render() {
+    const { location } = this.props;
+    const createServerPath = '/server/create';
+
     return (
       <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
         <NavbarBrand tag={Link} to="/">
@@ -31,7 +34,11 @@ export class MainHeader extends React.Component {
         <Collapse navbar isOpen={this.state.isOpen}>
           <Nav navbar className="ml-auto">
             <NavItem>
-              <NavLink tag={Link} to="/server/create">
+              <NavLink
+                tag={Link}
+                to={createServerPath}
+                active={location.pathname === createServerPath}
+              >
                 <FontAwesomeIcon icon={plusIcon}/>&nbsp; Add server
               </NavLink>
             </NavItem>

From cb3186395d2f83050cf63f61230e0dc5f5202598 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Wed, 15 Aug 2018 08:51:20 +0200
Subject: [PATCH 04/66] Added burguer icon to show sidebar on mobile devices

---
 package.json               |  1 +
 src/common/MainHeader.js   | 11 ++++-
 src/common/MainHeader.scss |  8 ++++
 src/common/MenuLayout.js   | 84 ++++++++++++++++++++++----------------
 src/common/MenuLayout.scss | 21 ++++++++++
 src/index.scss             |  7 ++++
 yarn.lock                  |  2 +-
 7 files changed, 97 insertions(+), 37 deletions(-)

diff --git a/package.json b/package.json
index 804f8756..53e04ed3 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "axios": "^0.18.0",
     "bootstrap": "^4.1.1",
     "chart.js": "^2.7.2",
+    "classnames": "^2.2.6",
     "moment": "^2.22.2",
     "promise": "8.0.1",
     "prop-types": "^15.6.2",
diff --git a/src/common/MainHeader.js b/src/common/MainHeader.js
index d896bd5f..54261623 100644
--- a/src/common/MainHeader.js
+++ b/src/common/MainHeader.js
@@ -1,4 +1,5 @@
 import plusIcon from '@fortawesome/fontawesome-free-solid/faPlus';
+import arrowIcon from '@fortawesome/fontawesome-free-solid/faChevronDown';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { Link, withRouter } from 'react-router-dom'
@@ -6,6 +7,7 @@ import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } f
 import ServersDropdown from '../servers/ServersDropdown';
 import './MainHeader.scss';
 import shlinkLogo from './shlink-logo-white.png';
+import classnames from 'classnames';
 
 export class MainHeader extends React.Component {
   state = { isOpen: false };
@@ -24,13 +26,20 @@ export class MainHeader extends React.Component {
   render() {
     const { location } = this.props;
     const createServerPath = '/server/create';
+    const toggleClass = classnames('main-header__toggle-icon', {
+      'main-header__toggle-icon--opened': this.state.isOpen,
+    });
 
     return (
       <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
         <NavbarBrand tag={Link} to="/">
           <img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo"/> Shlink
         </NavbarBrand>
-        <NavbarToggler onClick={this.toggle} />
+
+        <NavbarToggler onClick={this.toggle}>
+          <FontAwesomeIcon icon={arrowIcon} className={toggleClass} />
+        </NavbarToggler>
+
         <Collapse navbar isOpen={this.state.isOpen}>
           <Nav navbar className="ml-auto">
             <NavItem>
diff --git a/src/common/MainHeader.scss b/src/common/MainHeader.scss
index 9c2dca92..61ef23bb 100644
--- a/src/common/MainHeader.scss
+++ b/src/common/MainHeader.scss
@@ -13,3 +13,11 @@
   width: 26px;
   margin-right: 5px;
 }
+
+.main-header__toggle-icon {
+  width: 20px;
+  transition: transform 300ms;
+}
+.main-header__toggle-icon--opened {
+  transform: rotate(180deg);
+}
diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js
index f999483d..c6076794 100644
--- a/src/common/MenuLayout.js
+++ b/src/common/MenuLayout.js
@@ -9,6 +9,9 @@ import ShortUrlsVisits from '../short-urls/ShortUrlVisits';
 import AsideMenu from './AsideMenu';
 import { pick } from 'ramda';
 import Swipeable from 'react-swipeable';
+import burgerIcon from '@fortawesome/fontawesome-free-solid/faBars';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import classnames from 'classnames';
 import './MenuLayout.scss';
 
 export class MenuLayout extends React.Component {
@@ -31,44 +34,55 @@ export class MenuLayout extends React.Component {
 
   render() {
     const { selectedServer } = this.props;
+    const burgerClasses = classnames('menu-layout__burger-icon', {
+      'menu-layout__burger-icon--active': this.state.showSideBar,
+    });
 
     return (
-      <Swipeable
-        delta={40}
-        onSwipedLeft={() => this.setState({ showSideBar: false })}
-        onSwipedRight={() => this.setState({ showSideBar: true })}
-        className="menu-layout__swipeable"
-      >
-        <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}
-              />
-            </Switch>
+      <React.Fragment>
+        <FontAwesomeIcon
+          icon={burgerIcon}
+          className={burgerClasses}
+          onClick={() => this.setState({ showSideBar: !this.state.showSideBar })}
+        />
+
+        <Swipeable
+          delta={40}
+          onSwipedLeft={() => this.setState({ showSideBar: false })}
+          onSwipedRight={() => this.setState({ showSideBar: true })}
+          className="menu-layout__swipeable"
+        >
+          <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}
+                />
+              </Switch>
+            </div>
           </div>
-        </div>
-      </Swipeable>
+        </Swipeable>
+      </React.Fragment>
     );
   }
 }
diff --git a/src/common/MenuLayout.scss b/src/common/MenuLayout.scss
index ad05ef23..724291da 100644
--- a/src/common/MenuLayout.scss
+++ b/src/common/MenuLayout.scss
@@ -1,3 +1,5 @@
+@import '../utils/base';
+
 .menu-layout__swipeable {
   $offset: 15px;
   height: 100%;
@@ -10,3 +12,22 @@
 .menu-layout__swipeable-inner {
   height: 100%;
 }
+
+.menu-layout__burger-icon {
+  display: none;
+  transition: color 300ms;
+  position: fixed;
+  top: 18px;
+  z-index: 1035;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: rgba(255,255,255,.5);
+
+  @media (max-width: $smMax) {
+    display: inline-block;
+  }
+}
+
+.menu-layout__burger-icon--active {
+  color: white;
+}
diff --git a/src/index.scss b/src/index.scss
index 2dc3857f..9e7eb41f 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -42,3 +42,10 @@ body,
 .react-datepicker-wrapper {
   display: block !important;
 }
+
+.navbar-brand {
+  @media (max-width: $smMax) {
+    margin-right: auto !important; // This is needed to override a third party style
+    margin: 0 auto;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 85ebf0a4..0991aac1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1555,7 +1555,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.3, classnames@^2.2.5:
+classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
 

From 707c097ed9bcfd12b331bacc54967d4c922c35d3 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Wed, 15 Aug 2018 10:16:53 +0200
Subject: [PATCH 05/66] Fixed title size in mobile devices

---
 src/common/AsideMenu.js | 6 +++++-
 src/common/Home.scss    | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/common/AsideMenu.js b/src/common/AsideMenu.js
index 9d1e552b..e32fbefe 100644
--- a/src/common/AsideMenu.js
+++ b/src/common/AsideMenu.js
@@ -7,6 +7,7 @@ import DeleteServerButton from '../servers/DeleteServerButton';
 import './AsideMenu.scss';
 import PropTypes from 'prop-types';
 import { serverType } from '../servers/prop-types';
+import classnames from 'classnames';
 
 const defaultProps = {
   className: '',
@@ -20,9 +21,12 @@ const propTypes = {
 
 export default function AsideMenu({ selectedServer, className, showOnMobile }) {
   const serverId = selectedServer ? selectedServer.id : '';
+  const asideClass = classnames('aside-menu', className, {
+    'aside-menu--hidden': !showOnMobile,
+  });
 
   return (
-    <aside className={`aside-menu ${!showOnMobile ? 'aside-menu--hidden' : ''} ${className}`}>
+    <aside className={asideClass}>
       <nav className="nav flex-column aside-menu__nav">
         <NavLink
           className="aside-menu__item"
diff --git a/src/common/Home.scss b/src/common/Home.scss
index 0333f63c..05abe512 100644
--- a/src/common/Home.scss
+++ b/src/common/Home.scss
@@ -11,7 +11,11 @@
 }
 
 .home__title {
-  font-size: 36px;
+  font-size: 1.75rem;
+
+  @media (min-width: $mdMin) {
+    font-size: 2.2rem;
+  }
 }
 
 .home__servers-list {

From 854851fefc78a41750fde8e70445db3fe4ee516b Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Wed, 15 Aug 2018 11:14:44 +0200
Subject: [PATCH 06/66] Created common component to handle tags and modal to
 edit tags

---
 src/common/react-tagsinput.scss            | 11 +++---
 src/short-urls/CreateShortUrl.js           | 10 ++----
 src/short-urls/ShortUrlsList.js            | 16 +++++----
 src/short-urls/helpers/EditTagsModal.js    | 27 ++++++++++++++
 src/short-urls/helpers/QrCodeModal.js      |  2 +-
 src/short-urls/helpers/ShortUrlsRow.js     |  4 +--
 src/short-urls/helpers/ShortUrlsRowMenu.js | 29 +++++++++++----
 src/utils/ColorGenerator.js                |  5 +++
 src/utils/TagsSelector.js                  | 41 ++++++++++++++++++++++
 9 files changed, 115 insertions(+), 30 deletions(-)
 create mode 100644 src/short-urls/helpers/EditTagsModal.js
 create mode 100644 src/utils/TagsSelector.js

diff --git a/src/common/react-tagsinput.scss b/src/common/react-tagsinput.scss
index 2bddbf33..ef4cc8f4 100644
--- a/src/common/react-tagsinput.scss
+++ b/src/common/react-tagsinput.scss
@@ -3,7 +3,7 @@
   border: 1px solid #ccc;
   border-radius: .25rem;
   overflow: hidden;
-  min-height: calc(2.6rem + 2px);
+  min-height: 2.6rem;
   padding: 6px 0 0 6px;
 }
 
@@ -21,16 +21,13 @@
 .react-tagsinput-tag {
   font-size: 1rem;
   background-color: #f1f1f1;
-  border-radius: 2px;
-  border: 1px solid #d1d1d1;
+  border-radius: 4px;
   display: inline-block;
   font-weight: 400;
   margin: 0 5px 6px 0;
   padding: 6px 8px;
   line-height: 1;
-}
-.react-tagsinput-tag:hover {
-  border-color: #b1b1b1;
+  color: #fff;
 }
 
 .react-tagsinput-remove {
@@ -41,7 +38,7 @@
 
 .react-tagsinput-tag a::before {
   content: "\2715";
-  color: #aaa;
+  color: #fff;
 }
 
 .react-tagsinput-input {
diff --git a/src/short-urls/CreateShortUrl.js b/src/short-urls/CreateShortUrl.js
index 59655469..2a5abae1 100644
--- a/src/short-urls/CreateShortUrl.js
+++ b/src/short-urls/CreateShortUrl.js
@@ -4,11 +4,11 @@ import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import { assoc, dissoc, isNil, pick, pipe, replace, trim } from 'ramda';
 import React from 'react';
 import { connect } from 'react-redux';
-import TagsInput from 'react-tagsinput'
 import { Collapse } from 'reactstrap';
 import DateInput from '../common/DateInput';
 import CreateShortUrlResult from './helpers/CreateShortUrlResult';
 import { createShortUrl, resetCreateShortUrl } from './reducers/shortUrlCreationResult';
+import TagsSelector from '../utils/TagsSelector';
 
 export class CreateShortUrl extends React.Component {
   state = {
@@ -68,13 +68,7 @@ export class CreateShortUrl extends React.Component {
 
           <Collapse isOpen={this.state.moreOptionsVisible}>
             <div className="form-group">
-              <TagsInput
-                value={this.state.tags}
-                onChange={changeTags}
-                inputProps={{ placeholder: 'Add tags to the URL' }}
-                onlyUnique
-                addOnBlur // FIXME Workaround to be able to add tags on Android
-              />
+              <TagsSelector tags={this.state.tags} onChange={changeTags} />
             </div>
 
             <div className="row">
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index ef997589..2a1a68d5 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -1,7 +1,7 @@
 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 } from 'ramda'
+import { head, isEmpty, pick, toPairs, keys, values } from 'ramda'
 import React from 'react'
 import { connect } from 'react-redux'
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap'
@@ -34,7 +34,7 @@ export class ShortUrlsList extends React.Component {
       'DESC': undefined,
     };
     return this.state.orderDir ? newOrderMap[this.state.orderDir] : 'ASC';
-  }
+  };
   orderBy = field => {
     const newOrderDir = this.determineOrderDir(field);
     this.setState({ orderField: newOrderDir !== undefined ? field : undefined, orderDir: newOrderDir });
@@ -58,8 +58,8 @@ export class ShortUrlsList extends React.Component {
 
     const { orderBy } = props.shortUrlsListParams;
     this.state = {
-      orderField: orderBy ? head(Object.keys(orderBy)) : undefined,
-      orderDir: orderBy ? head(Object.values(orderBy)) : undefined,
+      orderField: orderBy ? head(keys(orderBy)) : undefined,
+      orderDir: orderBy ? head(values(orderBy)) : undefined,
     }
   }
 
@@ -71,7 +71,11 @@ export class ShortUrlsList extends React.Component {
   renderShortUrls() {
     const { shortUrlsList, selectedServer, loading, error, shortUrlsListParams } = this.props;
     if (error) {
-      return <tr><td colSpan="6" className="text-center table-danger">Something went wrong while loading short URLs :(</td></tr>;
+      return (
+        <tr>
+          <td colSpan="6" className="text-center table-danger">Something went wrong while loading short URLs :(</td>
+        </tr>
+      );
     }
 
     if (loading) {
@@ -102,7 +106,7 @@ export class ShortUrlsList extends React.Component {
           </DropdownToggle>
           <DropdownMenu className="short-urls-list__order-dropdown">
             {toPairs(SORTABLE_FIELDS).map(([key, value]) =>
-              <DropdownItem active={this.state.orderField === key} onClick={() => this.orderBy(key)}>
+              <DropdownItem key={key} active={this.state.orderField === key} onClick={() => this.orderBy(key)}>
                 {value}
                 {this.renderOrderIcon(key, 'short-urls-list__header-icon--mobile')}
               </DropdownItem>)}
diff --git a/src/short-urls/helpers/EditTagsModal.js b/src/short-urls/helpers/EditTagsModal.js
new file mode 100644
index 00000000..e85292e8
--- /dev/null
+++ b/src/short-urls/helpers/EditTagsModal.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import TagsSelector from '../../utils/TagsSelector';
+
+export default class EditTagsModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { tags: props.shortUrl.tags };
+  }
+
+  render() {
+    const { isOpen, toggle, url } = this.props;
+    const changeTags = tags => this.setState({ tags });
+
+    return (
+      <Modal isOpen={isOpen} toggle={toggle} centered>
+        <ModalHeader toggle={toggle}>Edit tags for <a target="_blank" href={url}>{url}</a></ModalHeader>
+        <ModalBody>
+          <TagsSelector tags={this.state.tags} onChange={changeTags} />
+        </ModalBody>
+        <ModalFooter>
+          <button className="btn btn-outline-primary" type="button">Save</button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
diff --git a/src/short-urls/helpers/QrCodeModal.js b/src/short-urls/helpers/QrCodeModal.js
index 1cedabba..194443f2 100644
--- a/src/short-urls/helpers/QrCodeModal.js
+++ b/src/short-urls/helpers/QrCodeModal.js
@@ -4,7 +4,7 @@ import './QrCodeModal.scss';
 
 export default function QrCodeModal ({ url, toggle, isOpen }) {
   return (
-    <Modal isOpen={isOpen} toggle={toggle} centered={true}>
+    <Modal isOpen={isOpen} toggle={toggle} centered>
       <ModalHeader toggle={toggle}>QR code for <a target="_blank" href={url}>{url}</a></ModalHeader>
       <ModalBody>
         <div className="text-center">
diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js
index d3534e45..0237bc07 100644
--- a/src/short-urls/helpers/ShortUrlsRow.js
+++ b/src/short-urls/helpers/ShortUrlsRow.js
@@ -45,9 +45,9 @@ export class ShortUrlsRow extends React.Component {
             Copied short URL!
           </small>
           <ShortUrlsRowMenu
-            shortUrl={completeShortUrl}
+            completeShortUrl={completeShortUrl}
             selectedServer={selectedServer}
-            shortCode={shortUrl.shortCode}
+            shortUrl={shortUrl}
             onCopyToClipboard={() => {
               this.setState({ copiedToClipboard: true });
               setTimeout(() => this.setState({ copiedToClipboard: false }), 2000);
diff --git a/src/short-urls/helpers/ShortUrlsRowMenu.js b/src/short-urls/helpers/ShortUrlsRowMenu.js
index 9e05c9a2..916736d2 100644
--- a/src/short-urls/helpers/ShortUrlsRowMenu.js
+++ b/src/short-urls/helpers/ShortUrlsRowMenu.js
@@ -1,5 +1,6 @@
 import copyIcon from '@fortawesome/fontawesome-free-regular/faCopy';
 import pictureIcon from '@fortawesome/fontawesome-free-regular/faImage';
+import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags';
 import pieChartIcon from '@fortawesome/fontawesome-free-solid/faChartPie';
 import menuIcon from '@fortawesome/fontawesome-free-solid/faEllipsisV';
 import qrIcon from '@fortawesome/fontawesome-free-solid/faQrcode';
@@ -11,16 +12,23 @@ import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reac
 import PreviewModal from './PreviewModal';
 import QrCodeModal from './QrCodeModal';
 import './ShortUrlsRowMenu.scss';
+import EditTagsModal from './EditTagsModal';
 
 export class ShortUrlsRowMenu extends React.Component {
-  state = { isOpen: false, isQrModalOpen: false, isPreviewOpen: false };
+  state = {
+    isOpen: false,
+    isQrModalOpen: false,
+    isPreviewOpen: false,
+    isTagsModalOpen: false,
+  };
   toggle = () => this.setState({ isOpen: !this.state.isOpen });
 
   render() {
-    const { shortUrl, onCopyToClipboard, selectedServer, shortCode } = this.props;
+    const { completeShortUrl, onCopyToClipboard, selectedServer, shortUrl } = this.props;
     const serverId = selectedServer ? selectedServer.id : '';
     const toggleQrCode = () => this.setState({isQrModalOpen: !this.state.isQrModalOpen});
     const togglePreview = () => this.setState({isPreviewOpen: !this.state.isPreviewOpen});
+    const toggleTags = () => this.setState({isTagsModalOpen: !this.state.isTagsModalOpen});
 
     return (
       <ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
@@ -28,9 +36,18 @@ export class ShortUrlsRowMenu extends React.Component {
           &nbsp;<FontAwesomeIcon icon={menuIcon}/>&nbsp;
         </DropdownToggle>
         <DropdownMenu>
-          <DropdownItem tag={Link} to={`/server/${serverId}/short-code/${shortCode}/visits`}>
+          <DropdownItem tag={Link} to={`/server/${serverId}/short-code/${shortUrl.shortCode}/visits`}>
             <FontAwesomeIcon icon={pieChartIcon}/> &nbsp;Visit Stats
           </DropdownItem>
+          <DropdownItem onClick={toggleTags}>
+            <FontAwesomeIcon icon={tagsIcon}/> &nbsp;Edit tags
+          </DropdownItem>
+          <EditTagsModal
+            url={completeShortUrl}
+            shortUrl={shortUrl}
+            isOpen={this.state.isTagsModalOpen}
+            toggle={toggleTags}
+          />
 
           <DropdownItem divider/>
 
@@ -38,7 +55,7 @@ export class ShortUrlsRowMenu extends React.Component {
             <FontAwesomeIcon icon={pictureIcon}/> &nbsp;Preview
           </DropdownItem>
           <PreviewModal
-            url={shortUrl}
+            url={completeShortUrl}
             isOpen={this.state.isPreviewOpen}
             toggle={togglePreview}
           />
@@ -47,14 +64,14 @@ export class ShortUrlsRowMenu extends React.Component {
             <FontAwesomeIcon icon={qrIcon}/> &nbsp;QR code
           </DropdownItem>
           <QrCodeModal
-            url={shortUrl}
+            url={completeShortUrl}
             isOpen={this.state.isQrModalOpen}
             toggle={toggleQrCode}
           />
 
           <DropdownItem divider/>
 
-          <CopyToClipboard text={shortUrl} onCopy={onCopyToClipboard}>
+          <CopyToClipboard text={completeShortUrl} onCopy={onCopyToClipboard}>
             <DropdownItem>
               <FontAwesomeIcon icon={copyIcon}/> &nbsp;Copy to clipboard
             </DropdownItem>
diff --git a/src/utils/ColorGenerator.js b/src/utils/ColorGenerator.js
index 30e041a8..840b485b 100644
--- a/src/utils/ColorGenerator.js
+++ b/src/utils/ColorGenerator.js
@@ -1,4 +1,5 @@
 import Storage from './Storage';
+import PropTypes from 'prop-types';
 
 const buildRandomColor = () => {
   const letters = '0123456789ABCDEF';
@@ -29,4 +30,8 @@ export class ColorGenerator {
   };
 }
 
+export const colorGeneratorType = PropTypes.shape({
+  getColorForKey: PropTypes.func,
+});
+
 export default new ColorGenerator(Storage);
diff --git a/src/utils/TagsSelector.js b/src/utils/TagsSelector.js
new file mode 100644
index 00000000..865f6d78
--- /dev/null
+++ b/src/utils/TagsSelector.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import TagsInput from 'react-tagsinput';
+import ColorGenerator, { colorGeneratorType } from './ColorGenerator';
+import PropTypes from 'prop-types';
+
+const defaultProps = {
+  colorGenerator: 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 && <a className={classNameRemove} onClick={() => onRemove(key)} />}
+      </span>
+    )
+  };
+
+  return (
+    <TagsInput
+      value={tags}
+      onChange={onChange}
+      inputProps={{ placeholder }}
+      onlyUnique
+      addOnBlur // FIXME Workaround to be able to add tags on Android
+      renderTag={renderTag}
+    />
+  );
+}
+
+TagsSelector.defaultProps = defaultProps;
+TagsSelector.propTypes = propTypes;

From a1eadf767eb889a23d664e158ee71035749037d6 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Wed, 15 Aug 2018 18:44:54 +0200
Subject: [PATCH 07/66] Updated short URL tags adding real behavior

---
 src/api/ShlinkApiClient.js              |  5 ++
 src/reducers/index.js                   |  4 +-
 src/short-urls/helpers/EditTagsModal.js | 40 ++++++++++++++--
 src/short-urls/reducers/shortUrlTags.js | 63 +++++++++++++++++++++++++
 4 files changed, 106 insertions(+), 6 deletions(-)
 create mode 100644 src/short-urls/reducers/shortUrlTags.js

diff --git a/src/api/ShlinkApiClient.js b/src/api/ShlinkApiClient.js
index f5227652..7714dd3b 100644
--- a/src/api/ShlinkApiClient.js
+++ b/src/api/ShlinkApiClient.js
@@ -44,6 +44,11 @@ export class ShlinkApiClient {
       .then(resp => resp.data)
       .catch(e => this._handleAuthError(e, this.getShortUrl, [shortCode]));
 
+  updateShortUrlTags = (shortCode, tags) =>
+    this._performRequest(`/short-codes/${shortCode}/tags`, 'PUT', {}, { tags })
+      .then(resp => resp.data.tags)
+      .catch(e => this._handleAuthError(e, this.updateShortUrlTags, [shortCode, tags]));
+
   _performRequest = async (url, method = 'GET', params = {}, data = {}) => {
     if (isEmpty(this._token)) {
       this._token = await this._authenticate();
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 6aae91c8..20c0c481 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -6,6 +6,7 @@ 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 shortUrlTagsReducer from '../short-urls/reducers/shortUrlTags';
 
 export default combineReducers({
   servers: serversReducer,
@@ -13,5 +14,6 @@ export default combineReducers({
   shortUrlsList: shortUrlsListReducer,
   shortUrlsListParams: shortUrlsListParamsReducer,
   shortUrlCreationResult: shortUrlCreationResultReducer,
-  shortUrlVisits: shortUrlVisitsReducer
+  shortUrlVisits: shortUrlVisitsReducer,
+  shortUrlTags: shortUrlTagsReducer,
 });
diff --git a/src/short-urls/helpers/EditTagsModal.js b/src/short-urls/helpers/EditTagsModal.js
index e85292e8..2f413fa1 100644
--- a/src/short-urls/helpers/EditTagsModal.js
+++ b/src/short-urls/helpers/EditTagsModal.js
@@ -1,27 +1,57 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import TagsSelector from '../../utils/TagsSelector';
+import PropTypes from 'prop-types';
+import { editShortUrlTags, shortUrlTagsType } from '../reducers/shortUrlTags';
+import { pick } from 'ramda';
+
+const propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+  url: PropTypes.string.isRequired,
+  shortUrl: PropTypes.shape({
+    tags: PropTypes.arrayOf(PropTypes.string),
+  }).isRequired,
+  shortUrlTags: shortUrlTagsType,
+};
+
+export class EditTagsModal extends React.Component {
+  saveTags = () => {
+    const { editShortUrlTags, shortUrl, toggle } = this.props;
+    editShortUrlTags(shortUrl.shortCode, this.state.tags).then(toggle);
+  };
 
-export default class EditTagsModal extends React.Component {
   constructor(props) {
     super(props);
     this.state = { tags: props.shortUrl.tags };
   }
 
   render() {
-    const { isOpen, toggle, url } = this.props;
-    const changeTags = tags => this.setState({ tags });
+    const { isOpen, toggle, url, shortUrlTags } = this.props;
 
     return (
       <Modal isOpen={isOpen} toggle={toggle} centered>
         <ModalHeader toggle={toggle}>Edit tags for <a target="_blank" href={url}>{url}</a></ModalHeader>
         <ModalBody>
-          <TagsSelector tags={this.state.tags} onChange={changeTags} />
+          <TagsSelector tags={this.state.tags} onChange={tags => this.setState({ tags })} />
         </ModalBody>
         <ModalFooter>
-          <button className="btn btn-outline-primary" type="button">Save</button>
+          <button className="btn btn-link" onClick={toggle}>Cancel</button>
+          <button
+            className="btn btn-primary"
+            type="button"
+            onClick={this.saveTags}
+            disabled={shortUrlTags.saving}
+          >
+            {shortUrlTags.saving ? 'Saving tags...' : 'Save tags'}
+          </button>
         </ModalFooter>
       </Modal>
     );
   }
 }
+
+EditTagsModal.propTypes = propTypes;
+
+export default connect(pick(['shortUrlTags']), { editShortUrlTags })(EditTagsModal);
diff --git a/src/short-urls/reducers/shortUrlTags.js b/src/short-urls/reducers/shortUrlTags.js
new file mode 100644
index 00000000..c12d87af
--- /dev/null
+++ b/src/short-urls/reducers/shortUrlTags.js
@@ -0,0 +1,63 @@
+import ShlinkApiClient from '../../api/ShlinkApiClient';
+import { curry } from 'ramda';
+import PropTypes from 'prop-types';
+import { _listShortUrls } from './shortUrlsList';
+
+export const EDIT_SHORT_URL_TAGS_START = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_START';
+export const EDIT_SHORT_URL_TAGS_ERROR = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_ERROR';
+export const EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS';
+
+export const shortUrlTagsType = PropTypes.shape({
+  shortCode: PropTypes.string,
+  tags: PropTypes.arrayOf(PropTypes.string).isRequired,
+  saving: PropTypes.bool.isRequired,
+  error: PropTypes.bool.isRequired,
+});
+
+const defaultState = {
+  shortCode: null,
+  tags: [],
+  saving: false,
+  error: false,
+};
+
+export default function reducer(state = defaultState, action) {
+  switch (action.type) {
+    case EDIT_SHORT_URL_TAGS_START:
+      return {
+        ...state,
+        saving: true,
+        error: false,
+      };
+    case EDIT_SHORT_URL_TAGS_ERROR:
+      return {
+        ...state,
+        saving: false,
+        error: true,
+      };
+    case EDIT_SHORT_URL_TAGS:
+      return {
+        shortCode: action.shortCode,
+        tags: action.tags,
+        saving: false,
+        error: false,
+      };
+    default:
+      return state;
+  }
+}
+
+export const _editShortUrlTags = (ShlinkApiClient, shortCode, tags) => async (dispatch, getState) => {
+  dispatch({ type: EDIT_SHORT_URL_TAGS_START });
+
+  try {
+    await ShlinkApiClient.updateShortUrlTags(shortCode, tags);
+    dispatch({ tags, shortCode, type: EDIT_SHORT_URL_TAGS });
+
+    const { shortUrlsListParams } = getState();
+    await _listShortUrls(ShlinkApiClient, shortUrlsListParams)(dispatch);
+  } catch (e) {
+    dispatch({ type: EDIT_SHORT_URL_TAGS_ERROR });
+  }
+};
+export const editShortUrlTags = curry(_editShortUrlTags)(ShlinkApiClient);

From 03113583f098aefdfdb860d809cf1c8928f2f0ea Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Wed, 15 Aug 2018 19:10:35 +0200
Subject: [PATCH 08/66] Updated behavior on tags modal so that the component
 handles all actions

---
 src/short-urls/helpers/EditTagsModal.js  | 35 +++++++++++++++++++++---
 src/short-urls/reducers/shortUrlTags.js  | 11 +++++---
 src/short-urls/reducers/shortUrlsList.js |  6 ++++
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/short-urls/helpers/EditTagsModal.js b/src/short-urls/helpers/EditTagsModal.js
index 2f413fa1..ea4a0c15 100644
--- a/src/short-urls/helpers/EditTagsModal.js
+++ b/src/short-urls/helpers/EditTagsModal.js
@@ -3,8 +3,9 @@ import { connect } from 'react-redux';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import TagsSelector from '../../utils/TagsSelector';
 import PropTypes from 'prop-types';
-import { editShortUrlTags, shortUrlTagsType } from '../reducers/shortUrlTags';
+import { editShortUrlTags, resetShortUrlsTags, shortUrlTagsType } from '../reducers/shortUrlTags';
 import { pick } from 'ramda';
+import { refreshShortUrls } from '../reducers/shortUrlsList';
 
 const propTypes = {
   isOpen: PropTypes.bool.isRequired,
@@ -19,8 +20,26 @@ const propTypes = {
 export class EditTagsModal extends React.Component {
   saveTags = () => {
     const { editShortUrlTags, shortUrl, toggle } = this.props;
-    editShortUrlTags(shortUrl.shortCode, this.state.tags).then(toggle);
+    editShortUrlTags(shortUrl.shortCode, this.state.tags)
+      .then(() => {
+        this.tagsSaved = true;
+        toggle();
+      })
+      .catch(() => {});
   };
+  refreshShortUrls = () => {
+    if (!this.tagsSaved) {
+      return;
+    }
+
+    this.props.refreshShortUrls();
+  };
+
+  componentDidMount() {
+    const { resetShortUrlsTags } = this.props;
+    resetShortUrlsTags();
+    this.tagsSaved = false;
+  }
 
   constructor(props) {
     super(props);
@@ -31,10 +50,15 @@ export class EditTagsModal extends React.Component {
     const { isOpen, toggle, url, shortUrlTags } = this.props;
 
     return (
-      <Modal isOpen={isOpen} toggle={toggle} centered>
+      <Modal isOpen={isOpen} toggle={toggle} centered onClosed={this.refreshShortUrls}>
         <ModalHeader toggle={toggle}>Edit tags for <a target="_blank" href={url}>{url}</a></ModalHeader>
         <ModalBody>
           <TagsSelector tags={this.state.tags} onChange={tags => this.setState({ tags })} />
+          {shortUrlTags.error && (
+            <div className="p-2 mt-2 bg-danger text-white text-center">
+              Something went wrong while saving the tags :(
+            </div>
+          )}
         </ModalBody>
         <ModalFooter>
           <button className="btn btn-link" onClick={toggle}>Cancel</button>
@@ -54,4 +78,7 @@ export class EditTagsModal extends React.Component {
 
 EditTagsModal.propTypes = propTypes;
 
-export default connect(pick(['shortUrlTags']), { editShortUrlTags })(EditTagsModal);
+export default connect(
+  pick(['shortUrlTags']),
+  { editShortUrlTags, resetShortUrlsTags, refreshShortUrls }
+)(EditTagsModal);
diff --git a/src/short-urls/reducers/shortUrlTags.js b/src/short-urls/reducers/shortUrlTags.js
index c12d87af..d01eda25 100644
--- a/src/short-urls/reducers/shortUrlTags.js
+++ b/src/short-urls/reducers/shortUrlTags.js
@@ -1,11 +1,11 @@
 import ShlinkApiClient from '../../api/ShlinkApiClient';
 import { curry } from 'ramda';
 import PropTypes from 'prop-types';
-import { _listShortUrls } from './shortUrlsList';
 
 export const EDIT_SHORT_URL_TAGS_START = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_START';
 export const EDIT_SHORT_URL_TAGS_ERROR = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_ERROR';
 export const EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS';
+export const RESET_EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/RESET_EDIT_SHORT_URL_TAGS';
 
 export const shortUrlTagsType = PropTypes.shape({
   shortCode: PropTypes.string,
@@ -42,6 +42,8 @@ export default function reducer(state = defaultState, action) {
         saving: false,
         error: false,
       };
+    case RESET_EDIT_SHORT_URL_TAGS:
+      return defaultState;
     default:
       return state;
   }
@@ -51,13 +53,14 @@ export const _editShortUrlTags = (ShlinkApiClient, shortCode, tags) => async (di
   dispatch({ type: EDIT_SHORT_URL_TAGS_START });
 
   try {
+    // Update short URL tags
     await ShlinkApiClient.updateShortUrlTags(shortCode, tags);
     dispatch({ tags, shortCode, type: EDIT_SHORT_URL_TAGS });
-
-    const { shortUrlsListParams } = getState();
-    await _listShortUrls(ShlinkApiClient, shortUrlsListParams)(dispatch);
   } catch (e) {
     dispatch({ type: EDIT_SHORT_URL_TAGS_ERROR });
+    throw e;
   }
 };
 export const editShortUrlTags = curry(_editShortUrlTags)(ShlinkApiClient);
+
+export const resetShortUrlsTags = () => ({ type: RESET_EDIT_SHORT_URL_TAGS });
diff --git a/src/short-urls/reducers/shortUrlsList.js b/src/short-urls/reducers/shortUrlsList.js
index 9d76e44c..29eb99da 100644
--- a/src/short-urls/reducers/shortUrlsList.js
+++ b/src/short-urls/reducers/shortUrlsList.js
@@ -41,3 +41,9 @@ export const _listShortUrls = (ShlinkApiClient, params = {}) => async dispatch =
   }
 };
 export const listShortUrls = (params = {}) => _listShortUrls(ShlinkApiClient, params);
+
+export const _refreshShortUrls = ShlinkApiClient => async (dispatch, getState) => {
+  const { shortUrlsListParams } = getState();
+  await _listShortUrls(ShlinkApiClient, shortUrlsListParams)(dispatch);
+};
+export const refreshShortUrls = () => _refreshShortUrls(ShlinkApiClient);

From 49290b56ee9debef2065a73b72f36fdebb737da5 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Thu, 16 Aug 2018 18:59:00 +0200
Subject: [PATCH 09/66] Created tags list page

---
 src/api/ShlinkApiClient.js       |  5 ++++
 src/common/AsideMenu.js          | 15 ++++++++--
 src/common/MenuLayout.js         |  6 ++++
 src/index.scss                   |  2 +-
 src/reducers/index.js            |  2 ++
 src/short-urls/CreateShortUrl.js |  2 +-
 src/short-urls/ShortUrlVisits.js |  3 +-
 src/short-urls/ShortUrls.js      |  2 +-
 src/tags/TagsList.js             | 51 ++++++++++++++++++++++++++++++++
 src/tags/TagsList.scss           | 18 +++++++++++
 src/tags/reducers/tagsList.js    | 49 ++++++++++++++++++++++++++++++
 src/utils/Tag.js                 |  3 +-
 12 files changed, 150 insertions(+), 8 deletions(-)
 create mode 100644 src/tags/TagsList.js
 create mode 100644 src/tags/TagsList.scss
 create mode 100644 src/tags/reducers/tagsList.js

diff --git a/src/api/ShlinkApiClient.js b/src/api/ShlinkApiClient.js
index 7714dd3b..7dac876e 100644
--- a/src/api/ShlinkApiClient.js
+++ b/src/api/ShlinkApiClient.js
@@ -49,6 +49,11 @@ export class ShlinkApiClient {
       .then(resp => resp.data.tags)
       .catch(e => this._handleAuthError(e, this.updateShortUrlTags, [shortCode, tags]));
 
+  listTags = () =>
+    this._performRequest('/tags', 'GET')
+      .then(resp => resp.data.tags.data)
+      .catch(e => this._handleAuthError(e, this.listTags, []));
+
   _performRequest = async (url, method = 'GET', params = {}, data = {}) => {
     if (isEmpty(this._token)) {
       this._token = await this._authenticate();
diff --git a/src/common/AsideMenu.js b/src/common/AsideMenu.js
index e32fbefe..df22f91d 100644
--- a/src/common/AsideMenu.js
+++ b/src/common/AsideMenu.js
@@ -1,5 +1,6 @@
-import listIcon from '@fortawesome/fontawesome-free-solid/faBars';
-import createIcon from '@fortawesome/fontawesome-free-solid/faPlus';
+import listIcon from '@fortawesome/fontawesome-free-solid/faList';
+import createIcon from '@fortawesome/fontawesome-free-solid/faLink';
+import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
@@ -41,9 +42,17 @@ export default function AsideMenu({ selectedServer, className, showOnMobile }) {
           activeClassName="aside-menu__item--selected"
           to={`/server/${serverId}/create-short-url`}
         >
-          <FontAwesomeIcon icon={createIcon} />
+          <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}/tags`}
+        >
+          <FontAwesomeIcon icon={tagsIcon} />
+          <span className="aside-menu__item-text">List tags</span>
+        </NavLink>
 
         <DeleteServerButton
           className="aside-menu__item aside-menu__item--danger"
diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js
index c6076794..9348438e 100644
--- a/src/common/MenuLayout.js
+++ b/src/common/MenuLayout.js
@@ -13,6 +13,7 @@ import burgerIcon from '@fortawesome/fontawesome-free-solid/faBars';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import classnames from 'classnames';
 import './MenuLayout.scss';
+import TagsList from '../tags/TagsList';
 
 export class MenuLayout extends React.Component {
   state = { showSideBar: false };
@@ -78,6 +79,11 @@ export class MenuLayout extends React.Component {
                   path="/server/:serverId/short-code/:shortCode/visits"
                   component={ShortUrlsVisits}
                 />
+                <Route
+                  exact
+                  path="/server/:serverId/tags"
+                  component={TagsList}
+                />
               </Switch>
             </div>
           </div>
diff --git a/src/index.scss b/src/index.scss
index 9e7eb41f..2e52c766 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -25,7 +25,7 @@ body,
   @extend .bg-main;
 }
 
-.short-urls-container {
+.shlink-container {
   padding: 20px 0;
 
   @media (min-width: $mdMin) {
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 20c0c481..96c904b1 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -7,6 +7,7 @@ import shortUrlsListParamsReducer from '../short-urls/reducers/shortUrlsListPara
 import shortUrlCreationResultReducer from '../short-urls/reducers/shortUrlCreationResult';
 import shortUrlVisitsReducer from '../short-urls/reducers/shortUrlVisits';
 import shortUrlTagsReducer from '../short-urls/reducers/shortUrlTags';
+import tagsListReducer from '../tags/reducers/tagsList';
 
 export default combineReducers({
   servers: serversReducer,
@@ -16,4 +17,5 @@ export default combineReducers({
   shortUrlCreationResult: shortUrlCreationResultReducer,
   shortUrlVisits: shortUrlVisitsReducer,
   shortUrlTags: shortUrlTagsReducer,
+  tagsList: tagsListReducer,
 });
diff --git a/src/short-urls/CreateShortUrl.js b/src/short-urls/CreateShortUrl.js
index 2a5abae1..ca82e29a 100644
--- a/src/short-urls/CreateShortUrl.js
+++ b/src/short-urls/CreateShortUrl.js
@@ -53,7 +53,7 @@ export class CreateShortUrl extends React.Component {
     };
 
     return (
-      <div className="short-urls-container">
+      <div className="shlink-container">
         <form onSubmit={save}>
           <div className="form-group">
             <input
diff --git a/src/short-urls/ShortUrlVisits.js b/src/short-urls/ShortUrlVisits.js
index 99e241d8..29b7ac3e 100644
--- a/src/short-urls/ShortUrlVisits.js
+++ b/src/short-urls/ShortUrlVisits.js
@@ -115,8 +115,9 @@ export class ShortUrlsVisits extends React.Component {
           <Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment>
         </UncontrolledTooltip>
       </span>;
+
     return (
-      <div className="short-urls-container">
+      <div className="shlink-container">
         <header>
           <Card className="bg-light">
             <CardBody>
diff --git a/src/short-urls/ShortUrls.js b/src/short-urls/ShortUrls.js
index 36f9537d..4d421dd8 100644
--- a/src/short-urls/ShortUrls.js
+++ b/src/short-urls/ShortUrls.js
@@ -11,7 +11,7 @@ export function ShortUrls(props) {
   const urlsListKey = `${params.serverId}_${params.page}`;
 
   return (
-    <div className="short-urls-container">
+    <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} />
diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js
new file mode 100644
index 00000000..f93f5361
--- /dev/null
+++ b/src/tags/TagsList.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { pick, splitEvery } from 'ramda';
+import { listTags } from './reducers/tagsList';
+import './TagsList.scss';
+import { Card } from 'reactstrap';
+import ColorGenerator from '../utils/ColorGenerator';
+
+export class TagsList extends React.Component {
+  componentDidMount() {
+    const { listTags } = this.props;
+    listTags();
+  }
+
+  render() {
+    const { tagsList, colorGenerator } = this.props;
+    const tagsCount = Math.round(tagsList.tags.length);
+    if (tagsCount < 1) {
+      return <div>No tags</div>;
+    }
+
+    const tagsGroups = splitEvery(Math.round(tagsCount / 4), tagsList.tags);
+
+    return (
+      <div className="shlink-container">
+        <div className="row">
+          {tagsGroups.map((group, index) => (
+            <div key={index} className="col-md-6 col-xl-3">
+              {group.map(tag => (
+                <div
+                  style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
+                  className="tags-list__tag-container"
+                >
+                  <Card body className="tags-list__tag-card">
+                    <h5 className="tags-list__tag-title">{tag}</h5>
+                  </Card>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+TagsList.defaultProps = {
+  colorGenerator: ColorGenerator
+};
+
+export default connect(pick(['tagsList']), { listTags })(TagsList);
diff --git a/src/tags/TagsList.scss b/src/tags/TagsList.scss
new file mode 100644
index 00000000..7765c0d7
--- /dev/null
+++ b/src/tags/TagsList.scss
@@ -0,0 +1,18 @@
+.tags-list__tag-container {
+  border-radius: .26rem;
+}
+
+.tags-list__tag-card.tags-list__tag-card {
+  padding: .75rem 2.5rem 0.75rem 1rem;
+  background-color: #eeeeee;
+  margin-bottom: .5rem;
+  transition: background-color 200ms, color 200ms;
+}
+.tags-list__tag-card.tags-list__tag-card:hover {
+  background-color: transparent;
+  color: #fff;
+}
+
+.tags-list__tag-title {
+  margin: 0;
+}
diff --git a/src/tags/reducers/tagsList.js b/src/tags/reducers/tagsList.js
new file mode 100644
index 00000000..c5fe5ab0
--- /dev/null
+++ b/src/tags/reducers/tagsList.js
@@ -0,0 +1,49 @@
+import ShlinkApiClient from '../../api/ShlinkApiClient';
+
+const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
+const LIST_TAGS_ERROR = 'shlink/tagsList/LIST_TAGS_ERROR';
+const LIST_TAGS = 'shlink/tagsList/LIST_TAGS';
+
+const defaultState = {
+  tags: [],
+  loading: false,
+  error: false,
+};
+
+export default function reducer(state = defaultState, action) {
+  switch(action.type) {
+    case LIST_TAGS_START:
+      return {
+        ...state,
+        loading: true,
+        error: false,
+      };
+    case LIST_TAGS_ERROR:
+      return {
+        ...state,
+        loading: false,
+        error: true,
+      };
+    case LIST_TAGS:
+      return {
+        tags: action.tags,
+        loading: false,
+        error: false,
+      };
+    default:
+      return state;
+  }
+}
+
+export const _listTags = ShlinkApiClient => async dispatch => {
+  dispatch({ type: LIST_TAGS_START });
+
+  try {
+    const tags = await ShlinkApiClient.listTags();
+    dispatch({ tags, type: LIST_TAGS });
+  } catch (e) {
+    dispatch({ type: LIST_TAGS_ERROR });
+    throw e;
+  }
+};
+export const listTags = () => _listTags(ShlinkApiClient);
diff --git a/src/utils/Tag.js b/src/utils/Tag.js
index f6a49c44..eeadfbcb 100644
--- a/src/utils/Tag.js
+++ b/src/utils/Tag.js
@@ -6,6 +6,7 @@ export default function Tag (
   {
     colorGenerator,
     text,
+    children,
     clearable,
     onClick = () => ({}),
     onClose = () => ({})
@@ -17,7 +18,7 @@ export default function Tag (
       style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable ? 'auto' : 'pointer' }}
       onClick={onClick}
     >
-      {text}
+      {children || text}
       {clearable && <span className="close tag__close-selected-tag" onClick={onClose}>&times;</span>}
     </span>
   );

From f7f0d8c7c16f65298489bf6be1980dc0e5cb397e Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Thu, 16 Aug 2018 19:19:57 +0200
Subject: [PATCH 10/66] Improved tags list section

---
 src/common/AsideMenu.js          |  3 ++
 src/common/AsideMenu.scss        | 20 +++++++++++
 src/short-urls/ShortUrlVisits.js | 10 +-----
 src/tags/TagsList.js             | 57 +++++++++++++++++++++-----------
 src/utils/MuttedMessage.js       | 17 ++++++++++
 5 files changed, 79 insertions(+), 28 deletions(-)
 create mode 100644 src/utils/MuttedMessage.js

diff --git a/src/common/AsideMenu.js b/src/common/AsideMenu.js
index df22f91d..9a57310c 100644
--- a/src/common/AsideMenu.js
+++ b/src/common/AsideMenu.js
@@ -29,6 +29,7 @@ export default function AsideMenu({ selectedServer, className, showOnMobile }) {
   return (
     <aside className={asideClass}>
       <nav className="nav flex-column aside-menu__nav">
+        <h4 className="aside-menu__nav-group-title">Short URLs</h4>
         <NavLink
           className="aside-menu__item"
           activeClassName="aside-menu__item--selected"
@@ -45,6 +46,8 @@ export default function AsideMenu({ selectedServer, className, showOnMobile }) {
           <FontAwesomeIcon icon={createIcon} flip="horizontal" />
           <span className="aside-menu__item-text">Create short URL</span>
         </NavLink>
+
+        <h4 className="aside-menu__nav-group-title">Tags</h4>
         <NavLink
           className="aside-menu__item"
           activeClassName="aside-menu__item--selected"
diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss
index aa3ae18f..9235c264 100644
--- a/src/common/AsideMenu.scss
+++ b/src/common/AsideMenu.scss
@@ -1,5 +1,6 @@
 @import '../utils/base';
 @import '../utils/mixins/box-shadow';
+@import '../utils/mixins/vertical-align';
 
 $asideMenuMobileWidth: 280px;
 
@@ -74,3 +75,22 @@ $asideMenuMobileWidth: 280px;
 .aside-menu__item-text {
   margin-left: 8px;
 }
+
+.aside-menu__nav-group-title {
+  font-size: .9rem;
+  text-align: center;
+  color: #bbb;
+  text-shadow: 1px 1px #ddd;
+  position: relative;
+
+  &:before {
+    @include vertical-align();
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: red;
+  }
+}
+.aside-menu__nav-group-title:not(:first-child) {
+  margin-top: 1rem;
+}
diff --git a/src/short-urls/ShortUrlVisits.js b/src/short-urls/ShortUrlVisits.js
index 29b7ac3e..2f8f15dc 100644
--- a/src/short-urls/ShortUrlVisits.js
+++ b/src/short-urls/ShortUrlVisits.js
@@ -10,15 +10,7 @@ import DateInput from '../common/DateInput'
 import VisitsParser from '../visits/services/VisitsParser'
 import { getShortUrlVisits } from './reducers/shortUrlVisits'
 import './ShortUrlVisits.scss'
-
-const MutedMessage = ({ children }) =>
-  <div className="col-md-10 offset-md-1">
-    <Card className="bg-light mt-4" body>
-      <h3 className="text-center text-muted mb-0">
-        {children}
-      </h3>
-    </Card>
-  </div>;
+import MutedMessage from '../utils/MuttedMessage';
 
 export class ShortUrlsVisits extends React.Component {
   state = { startDate: undefined, endDate: undefined };
diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js
index f93f5361..b441337e 100644
--- a/src/tags/TagsList.js
+++ b/src/tags/TagsList.js
@@ -5,6 +5,9 @@ import { listTags } from './reducers/tagsList';
 import './TagsList.scss';
 import { Card } from 'reactstrap';
 import ColorGenerator from '../utils/ColorGenerator';
+import MuttedMessage from '../utils/MuttedMessage';
+
+const { round } = Math;
 
 export class TagsList extends React.Component {
   componentDidMount() {
@@ -12,32 +15,48 @@ export class TagsList extends React.Component {
     listTags();
   }
 
-  render() {
+  renderContent() {
     const { tagsList, colorGenerator } = this.props;
-    const tagsCount = Math.round(tagsList.tags.length);
-    if (tagsCount < 1) {
-      return <div>No tags</div>;
+    if (tagsList.loading) {
+      return <MuttedMessage>Loading...</MuttedMessage>
     }
 
-    const tagsGroups = splitEvery(Math.round(tagsCount / 4), tagsList.tags);
+    if (tagsList.error) {
+      return <div className="bg-danger p-2 text-white text-center">Error loading tags :(</div>;
+    }
 
+    const tagsCount = tagsList.tags.length;
+    if (tagsCount < 1) {
+      return <MuttedMessage>No tags found</MuttedMessage>;
+    }
+
+    const tagsGroups = splitEvery(round(tagsCount / 4), tagsList.tags);
+    return (
+      <React.Fragment>
+        {tagsGroups.map((group, index) => (
+          <div key={index} className="col-md-6 col-xl-3">
+            {group.map(tag => (
+              <div
+                style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
+                className="tags-list__tag-container"
+                key={tag}
+              >
+                <Card body className="tags-list__tag-card">
+                  <h5 className="tags-list__tag-title">{tag}</h5>
+                </Card>
+              </div>
+            ))}
+          </div>
+        ))}
+      </React.Fragment>
+    );
+  }
+
+  render() {
     return (
       <div className="shlink-container">
         <div className="row">
-          {tagsGroups.map((group, index) => (
-            <div key={index} className="col-md-6 col-xl-3">
-              {group.map(tag => (
-                <div
-                  style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
-                  className="tags-list__tag-container"
-                >
-                  <Card body className="tags-list__tag-card">
-                    <h5 className="tags-list__tag-title">{tag}</h5>
-                  </Card>
-                </div>
-              ))}
-            </div>
-          ))}
+          {this.renderContent()}
         </div>
       </div>
     );
diff --git a/src/utils/MuttedMessage.js b/src/utils/MuttedMessage.js
new file mode 100644
index 00000000..e4eb1fd9
--- /dev/null
+++ b/src/utils/MuttedMessage.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Card } from 'reactstrap';
+import classnames from 'classnames';
+
+export default function MutedMessage({ children, marginSize = 4 }) {
+  const cardClasses = classnames('bg-light', `mt-${marginSize}`);
+
+  return (
+    <div className="col-md-10 offset-md-1">
+      <Card className={cardClasses} body>
+        <h3 className="text-center text-muted mb-0">
+          {children}
+        </h3>
+      </Card>
+    </div>
+  );
+}

From ec7b47fb32dc952adf9c85252889d0ff325a2feb Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Thu, 16 Aug 2018 19:22:54 +0200
Subject: [PATCH 11/66] Allowed MuttedMessage to define a margin 0

---
 src/tags/TagsList.js       | 2 +-
 src/utils/MuttedMessage.js | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js
index b441337e..f34c0c79 100644
--- a/src/tags/TagsList.js
+++ b/src/tags/TagsList.js
@@ -18,7 +18,7 @@ export class TagsList extends React.Component {
   renderContent() {
     const { tagsList, colorGenerator } = this.props;
     if (tagsList.loading) {
-      return <MuttedMessage>Loading...</MuttedMessage>
+      return <MuttedMessage marginSize={0}>Loading...</MuttedMessage>
     }
 
     if (tagsList.error) {
diff --git a/src/utils/MuttedMessage.js b/src/utils/MuttedMessage.js
index e4eb1fd9..e5619d0d 100644
--- a/src/utils/MuttedMessage.js
+++ b/src/utils/MuttedMessage.js
@@ -3,7 +3,9 @@ import { Card } from 'reactstrap';
 import classnames from 'classnames';
 
 export default function MutedMessage({ children, marginSize = 4 }) {
-  const cardClasses = classnames('bg-light', `mt-${marginSize}`);
+  const cardClasses = classnames('bg-light', {
+    [`mt-${marginSize}`]: marginSize > 0,
+  });
 
   return (
     <div className="col-md-10 offset-md-1">

From 63ddef2d81f70516de0d7d390a332901793b8529 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 18 Aug 2018 10:47:45 +0200
Subject: [PATCH 12/66] Removed titles from side menu

---
 src/common/AsideMenu.js   |  2 --
 src/common/AsideMenu.scss | 22 ++--------------------
 src/index.scss            |  2 +-
 3 files changed, 3 insertions(+), 23 deletions(-)

diff --git a/src/common/AsideMenu.js b/src/common/AsideMenu.js
index 9a57310c..6283277a 100644
--- a/src/common/AsideMenu.js
+++ b/src/common/AsideMenu.js
@@ -29,7 +29,6 @@ export default function AsideMenu({ selectedServer, className, showOnMobile }) {
   return (
     <aside className={asideClass}>
       <nav className="nav flex-column aside-menu__nav">
-        <h4 className="aside-menu__nav-group-title">Short URLs</h4>
         <NavLink
           className="aside-menu__item"
           activeClassName="aside-menu__item--selected"
@@ -47,7 +46,6 @@ export default function AsideMenu({ selectedServer, className, showOnMobile }) {
           <span className="aside-menu__item-text">Create short URL</span>
         </NavLink>
 
-        <h4 className="aside-menu__nav-group-title">Tags</h4>
         <NavLink
           className="aside-menu__item"
           activeClassName="aside-menu__item--selected"
diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss
index 9235c264..80f28016 100644
--- a/src/common/AsideMenu.scss
+++ b/src/common/AsideMenu.scss
@@ -9,7 +9,7 @@ $asideMenuMobileWidth: 280px;
   position: fixed !important;
   padding-top: 13px;
   padding-bottom: 10px;
-  top: $headerHeight - 3px;
+  top: $headerHeight;
   bottom: 0;
   left: 0;
   display: block;
@@ -26,6 +26,7 @@ $asideMenuMobileWidth: 280px;
     width: $asideMenuMobileWidth !important;
     @include box-shadow(-10px 0px 50px 11px rgba(0, 0, 0, 0.55));
     transition: left 300ms;
+    top: $headerHeight - 3px;
   }
 }
 
@@ -75,22 +76,3 @@ $asideMenuMobileWidth: 280px;
 .aside-menu__item-text {
   margin-left: 8px;
 }
-
-.aside-menu__nav-group-title {
-  font-size: .9rem;
-  text-align: center;
-  color: #bbb;
-  text-shadow: 1px 1px #ddd;
-  position: relative;
-
-  &:before {
-    @include vertical-align();
-    left: 0;
-    width: 100%;
-    height: 1px;
-    background: red;
-  }
-}
-.aside-menu__nav-group-title:not(:first-child) {
-  margin-top: 1rem;
-}
diff --git a/src/index.scss b/src/index.scss
index 2e52c766..fc7cd163 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -29,7 +29,7 @@ body,
   padding: 20px 0;
 
   @media (min-width: $mdMin) {
-    padding: 30px 30px 30px 20px;
+    padding: 30px 15px;
   }
 }
 

From f1ee467af4e348e3eebb4c9b22eb8420714ab76f Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 18 Aug 2018 11:15:00 +0200
Subject: [PATCH 13/66] Finished design on tags list page

---
 src/tags/TagsList.js   | 33 ++++++++++++++++++++++-----------
 src/tags/TagsList.scss | 33 ++++++++++++++++++++++++---------
 2 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js
index f34c0c79..df5accf7 100644
--- a/src/tags/TagsList.js
+++ b/src/tags/TagsList.js
@@ -2,10 +2,13 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { pick, splitEvery } from 'ramda';
 import { listTags } from './reducers/tagsList';
-import './TagsList.scss';
-import { Card } from 'reactstrap';
+import { Card, CardBody } from 'reactstrap';
 import ColorGenerator from '../utils/ColorGenerator';
 import MuttedMessage from '../utils/MuttedMessage';
+import editIcon from '@fortawesome/fontawesome-free-solid/faPencilAlt';
+import deleteIcon from '@fortawesome/fontawesome-free-solid/faTrash';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import './TagsList.scss';
 
 const { round } = Math;
 
@@ -36,15 +39,23 @@ export class TagsList extends React.Component {
         {tagsGroups.map((group, index) => (
           <div key={index} className="col-md-6 col-xl-3">
             {group.map(tag => (
-              <div
-                style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
-                className="tags-list__tag-container"
-                key={tag}
-              >
-                <Card body className="tags-list__tag-card">
-                  <h5 className="tags-list__tag-title">{tag}</h5>
-                </Card>
-              </div>
+              <Card className="tags-list__tag-card" key={tag}>
+                <CardBody className="tags-list__tag-card-body">
+                  <button className="btn btn-light btn-sm tags-list__btn">
+                    <FontAwesomeIcon icon={deleteIcon} />
+                  </button>
+                  <button className="btn btn-light btn-sm tags-list__btn">
+                    <FontAwesomeIcon icon={editIcon} />
+                  </button>
+                  <h5 className="tags-list__tag-title">
+                    <div
+                      style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
+                      className="tags-list__tag-bullet"
+                    />
+                    {tag}
+                  </h5>
+                </CardBody>
+              </Card>
             ))}
           </div>
         ))}
diff --git a/src/tags/TagsList.scss b/src/tags/TagsList.scss
index 7765c0d7..f06e5a61 100644
--- a/src/tags/TagsList.scss
+++ b/src/tags/TagsList.scss
@@ -1,18 +1,33 @@
-.tags-list__tag-container {
-  border-radius: .26rem;
-}
-
 .tags-list__tag-card.tags-list__tag-card {
-  padding: .75rem 2.5rem 0.75rem 1rem;
   background-color: #eeeeee;
   margin-bottom: .5rem;
-  transition: background-color 200ms, color 200ms;
 }
-.tags-list__tag-card.tags-list__tag-card:hover {
-  background-color: transparent;
-  color: #fff;
+.tags-list__tag-card-body.tags-list__tag-card-body {
+  padding: .75rem;
 }
 
 .tags-list__tag-title {
   margin: 0;
+  line-height: 31px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-right: 5px;
+}
+
+.tags-list__tag-bullet {
+  $width: 20px;
+  border-radius: 50%;
+  width: $width;
+  height: $width;
+  display: inline-block;
+  vertical-align: -4px;
+  margin-right: 7px;
+}
+
+.tags-list__btn {
+  float: right;
+}
+.tags-list__btn:not(:last-child) {
+  margin-left: 2px;
 }

From f480e34f679522ef165d0aafc5ce5588a71cd593 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 18 Aug 2018 14:38:36 +0200
Subject: [PATCH 14/66] Created TagCard and DeleteTagConfirmModal components

---
 src/servers/DeleteServerModal.js          |  2 +-
 src/tags/TagCard.js                       | 59 +++++++++++++++++++++++
 src/tags/{TagsList.scss => TagCard.scss}  | 12 ++---
 src/tags/TagsList.js                      | 36 +++-----------
 src/tags/helpers/DeleteTagConfirmModal.js | 28 +++++++++++
 5 files changed, 100 insertions(+), 37 deletions(-)
 create mode 100644 src/tags/TagCard.js
 rename src/tags/{TagsList.scss => TagCard.scss} (66%)
 create mode 100644 src/tags/helpers/DeleteTagConfirmModal.js

diff --git a/src/servers/DeleteServerModal.js b/src/servers/DeleteServerModal.js
index ed1c4c65..419e6a33 100644
--- a/src/servers/DeleteServerModal.js
+++ b/src/servers/DeleteServerModal.js
@@ -15,7 +15,7 @@ export const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, histor
   };
 
   return (
-    <Modal isOpen={isOpen} toggle={toggle} centered={true}>
+    <Modal isOpen={isOpen} toggle={toggle} centered>
       <ModalHeader toggle={toggle}><span className="text-danger">Delete server</span></ModalHeader>
       <ModalBody>
         <p>Are you sure you want to delete server <b>{server ? server.name : ''}</b>?</p>
diff --git a/src/tags/TagCard.js b/src/tags/TagCard.js
new file mode 100644
index 00000000..5f5a79a0
--- /dev/null
+++ b/src/tags/TagCard.js
@@ -0,0 +1,59 @@
+import { Card, CardBody } from 'reactstrap';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import deleteIcon from '@fortawesome/fontawesome-free-solid/faTrash';
+import editIcon from '@fortawesome/fontawesome-free-solid/faPencilAlt';
+import DeleteTagConfirmModal from './helpers/DeleteTagConfirmModal';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ColorGenerator, { colorGeneratorType } from '../utils/ColorGenerator';
+import './TagCard.scss';
+
+const propTypes = {
+  tag: PropTypes.string,
+  colorGenerator: colorGeneratorType,
+};
+const defaultProps = {
+  colorGenerator: ColorGenerator,
+};
+
+export default class TagCard extends React.Component {
+  state = { isDeleteModalOpen: false, isEditModalOpen: false };
+
+  render() {
+    const { tag, colorGenerator } = this.props;
+    const toggleDelete = () =>
+      this.setState({ isDeleteModalOpen: !this.state.isDeleteModalOpen });
+
+    return (
+      <Card className="tag-card">
+        <CardBody className="tag-card__body">
+          <button
+            className="btn btn-light btn-sm tag-card__btn"
+            onClick={toggleDelete}
+          >
+            <FontAwesomeIcon icon={deleteIcon}/>
+          </button>
+          <button className="btn btn-light btn-sm tag-card__btn">
+            <FontAwesomeIcon icon={editIcon}/>
+          </button>
+          <h5 className="tag-card__tag-title">
+            <div
+              style={{backgroundColor: colorGenerator.getColorForKey(tag)}}
+              className="tag-card__tag-bullet"
+            />
+            {tag}
+          </h5>
+        </CardBody>
+
+        <DeleteTagConfirmModal
+          tag={tag}
+          toggle={toggleDelete}
+          isOpen={this.state.isDeleteModalOpen}
+        />
+      </Card>
+    );
+  }
+}
+
+TagCard.propTypes = propTypes;
+TagCard.defaultProps = defaultProps;
diff --git a/src/tags/TagsList.scss b/src/tags/TagCard.scss
similarity index 66%
rename from src/tags/TagsList.scss
rename to src/tags/TagCard.scss
index f06e5a61..a2861ff6 100644
--- a/src/tags/TagsList.scss
+++ b/src/tags/TagCard.scss
@@ -1,12 +1,12 @@
-.tags-list__tag-card.tags-list__tag-card {
+.tag-card.tag-card {
   background-color: #eeeeee;
   margin-bottom: .5rem;
 }
-.tags-list__tag-card-body.tags-list__tag-card-body {
+.tag-card__body.tag-card__body {
   padding: .75rem;
 }
 
-.tags-list__tag-title {
+.tag-card__tag-title {
   margin: 0;
   line-height: 31px;
   text-overflow: ellipsis;
@@ -15,7 +15,7 @@
   padding-right: 5px;
 }
 
-.tags-list__tag-bullet {
+.tag-card__tag-bullet {
   $width: 20px;
   border-radius: 50%;
   width: $width;
@@ -25,9 +25,9 @@
   margin-right: 7px;
 }
 
-.tags-list__btn {
+.tag-card__btn {
   float: right;
 }
-.tags-list__btn:not(:last-child) {
+.tag-card__btn:not(:last-child) {
   margin-left: 2px;
 }
diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js
index df5accf7..b6b5e3b3 100644
--- a/src/tags/TagsList.js
+++ b/src/tags/TagsList.js
@@ -2,24 +2,21 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { pick, splitEvery } from 'ramda';
 import { listTags } from './reducers/tagsList';
-import { Card, CardBody } from 'reactstrap';
-import ColorGenerator from '../utils/ColorGenerator';
 import MuttedMessage from '../utils/MuttedMessage';
-import editIcon from '@fortawesome/fontawesome-free-solid/faPencilAlt';
-import deleteIcon from '@fortawesome/fontawesome-free-solid/faTrash';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import './TagsList.scss';
+import TagCard from './TagCard';
 
 const { round } = Math;
 
 export class TagsList extends React.Component {
+  state = { isDeleteModalOpen: false };
+
   componentDidMount() {
     const { listTags } = this.props;
     listTags();
   }
 
   renderContent() {
-    const { tagsList, colorGenerator } = this.props;
+    const { tagsList } = this.props;
     if (tagsList.loading) {
       return <MuttedMessage marginSize={0}>Loading...</MuttedMessage>
     }
@@ -34,29 +31,12 @@ export class TagsList extends React.Component {
     }
 
     const tagsGroups = splitEvery(round(tagsCount / 4), tagsList.tags);
+
     return (
       <React.Fragment>
         {tagsGroups.map((group, index) => (
           <div key={index} className="col-md-6 col-xl-3">
-            {group.map(tag => (
-              <Card className="tags-list__tag-card" key={tag}>
-                <CardBody className="tags-list__tag-card-body">
-                  <button className="btn btn-light btn-sm tags-list__btn">
-                    <FontAwesomeIcon icon={deleteIcon} />
-                  </button>
-                  <button className="btn btn-light btn-sm tags-list__btn">
-                    <FontAwesomeIcon icon={editIcon} />
-                  </button>
-                  <h5 className="tags-list__tag-title">
-                    <div
-                      style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
-                      className="tags-list__tag-bullet"
-                    />
-                    {tag}
-                  </h5>
-                </CardBody>
-              </Card>
-            ))}
+            {group.map(tag => <TagCard tag={tag} key={tag}/>)}
           </div>
         ))}
       </React.Fragment>
@@ -74,8 +54,4 @@ export class TagsList extends React.Component {
   }
 }
 
-TagsList.defaultProps = {
-  colorGenerator: ColorGenerator
-};
-
 export default connect(pick(['tagsList']), { listTags })(TagsList);
diff --git a/src/tags/helpers/DeleteTagConfirmModal.js b/src/tags/helpers/DeleteTagConfirmModal.js
new file mode 100644
index 00000000..b4df93ad
--- /dev/null
+++ b/src/tags/helpers/DeleteTagConfirmModal.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  tag: PropTypes.string.isRequired,
+  toggle: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+};
+
+export default function DeleteTagConfirmModal({ tag, toggle, isOpen }) {
+  return (
+    <Modal toggle={toggle} isOpen={isOpen} centered>
+      <ModalHeader toggle={toggle}>
+        <span className="text-danger">Delete tag</span>
+      </ModalHeader>
+      <ModalBody>
+        Are you sure you want to delete tag <b>{tag}</b>?
+      </ModalBody>
+      <ModalFooter>
+        <button className="btn btn-link" onClick={toggle}>Cancel</button>
+        <button className="btn btn-danger">Delete tag</button>
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+DeleteTagConfirmModal.propTypes = propTypes;

From 1dee4782345189d2d37c5d7b0d9a89685f6cc98b Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 18 Aug 2018 16:39:47 +0200
Subject: [PATCH 15/66] Implemented delete tag behavior

---
 src/api/ShlinkApiClient.js                | 11 +++-
 src/reducers/index.js                     |  2 +
 src/tags/TagsList.js                      |  6 +-
 src/tags/helpers/DeleteTagConfirmModal.js | 78 ++++++++++++++++++-----
 src/tags/reducers/tagDelete.js            | 52 +++++++++++++++
 src/tags/reducers/tagsList.js             |  1 -
 6 files changed, 129 insertions(+), 21 deletions(-)
 create mode 100644 src/tags/reducers/tagDelete.js

diff --git a/src/api/ShlinkApiClient.js b/src/api/ShlinkApiClient.js
index 7dac876e..767fc742 100644
--- a/src/api/ShlinkApiClient.js
+++ b/src/api/ShlinkApiClient.js
@@ -54,7 +54,12 @@ export class ShlinkApiClient {
       .then(resp => resp.data.tags.data)
       .catch(e => this._handleAuthError(e, this.listTags, []));
 
-  _performRequest = async (url, method = 'GET', params = {}, data = {}) => {
+  deleteTags = tags =>
+    this._performRequest('/tags', 'DELETE', { tags })
+      .then(() => ({ tags }))
+      .catch(e => this._handleAuthError(e, this.deleteTag, []));
+
+  _performRequest = async (url, method = 'GET', query = {}, body = {}) => {
     if (isEmpty(this._token)) {
       this._token = await this._authenticate();
     }
@@ -63,8 +68,8 @@ export class ShlinkApiClient {
       method,
       url: `${this._baseUrl}${url}`,
       headers: { 'Authorization': `Bearer ${this._token}` },
-      params,
-      data,
+      params: query,
+      data: body,
       paramsSerializer: params => qs.stringify(params, { arrayFormat: 'brackets' })
     }).then(resp => {
       // Save new token
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 96c904b1..84587ae5 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -8,6 +8,7 @@ import shortUrlCreationResultReducer from '../short-urls/reducers/shortUrlCreati
 import shortUrlVisitsReducer from '../short-urls/reducers/shortUrlVisits';
 import shortUrlTagsReducer from '../short-urls/reducers/shortUrlTags';
 import tagsListReducer from '../tags/reducers/tagsList';
+import tagDeleteReducer from '../tags/reducers/tagDelete';
 
 export default combineReducers({
   servers: serversReducer,
@@ -18,4 +19,5 @@ export default combineReducers({
   shortUrlVisits: shortUrlVisitsReducer,
   shortUrlTags: shortUrlTagsReducer,
   tagsList: tagsListReducer,
+  tagDelete: tagDeleteReducer,
 });
diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js
index b6b5e3b3..1ce60416 100644
--- a/src/tags/TagsList.js
+++ b/src/tags/TagsList.js
@@ -22,7 +22,11 @@ export class TagsList extends React.Component {
     }
 
     if (tagsList.error) {
-      return <div className="bg-danger p-2 text-white text-center">Error loading tags :(</div>;
+      return (
+        <div className="col-12">
+          <div className="bg-danger p-2 text-white text-center">Error loading tags :(</div>
+        </div>
+      );
     }
 
     const tagsCount = tagsList.tags.length;
diff --git a/src/tags/helpers/DeleteTagConfirmModal.js b/src/tags/helpers/DeleteTagConfirmModal.js
index b4df93ad..e4138df3 100644
--- a/src/tags/helpers/DeleteTagConfirmModal.js
+++ b/src/tags/helpers/DeleteTagConfirmModal.js
@@ -1,28 +1,74 @@
-import React from 'react';
+import React, { Component } 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, tagDeleteType } from '../reducers/tagDelete';
+import { listTags } from '../reducers/tagsList';
 
 const propTypes = {
   tag: PropTypes.string.isRequired,
   toggle: PropTypes.func.isRequired,
   isOpen: PropTypes.bool.isRequired,
+  deleteTag: PropTypes.func,
+  listTags: PropTypes.func,
+  tagDelete: tagDeleteType,
 };
 
-export default function DeleteTagConfirmModal({ tag, toggle, isOpen }) {
-  return (
-    <Modal toggle={toggle} isOpen={isOpen} centered>
-      <ModalHeader toggle={toggle}>
-        <span className="text-danger">Delete tag</span>
-      </ModalHeader>
-      <ModalBody>
-        Are you sure you want to delete tag <b>{tag}</b>?
-      </ModalBody>
-      <ModalFooter>
-        <button className="btn btn-link" onClick={toggle}>Cancel</button>
-        <button className="btn btn-danger">Delete tag</button>
-      </ModalFooter>
-    </Modal>
-  );
+export class DeleteTagConfirmModal extends Component {
+  doDelete = () => {
+    const { tag, toggle, deleteTag } = this.props;
+    deleteTag(tag).then(() => {
+      this.tagDeleted = true;
+      toggle();
+    }).catch(() => {});
+  };
+  onClosed = () => {
+    if (!this.tagDeleted) {
+      return;
+    }
+
+    this.props.listTags();
+  };
+
+  componentDidMount() {
+    this.tagDeleted = false;
+  }
+
+  render() {
+    const { tag, toggle, isOpen, tagDelete } = this.props;
+
+    return (
+      <Modal toggle={toggle} isOpen={isOpen} centered onClosed={this.onClosed}>
+        <ModalHeader toggle={toggle}>
+          <span className="text-danger">Delete tag</span>
+        </ModalHeader>
+        <ModalBody>
+          Are you sure you want to delete tag <b>{tag}</b>?
+          {tagDelete.error && (
+            <div className="p-2 mt-2 bg-danger text-white text-center">
+              Something went wrong while deleting the tag :(
+            </div>
+          )}
+        </ModalBody>
+        <ModalFooter>
+          <button className="btn btn-link" onClick={toggle}>Cancel</button>
+          <button
+            className="btn btn-danger"
+            onClick={this.doDelete}
+            disabled={tagDelete.deleting}
+          >
+            {tagDelete.deleting ? 'Deleting tag...' : 'Delete tag'}
+          </button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
 }
 
 DeleteTagConfirmModal.propTypes = propTypes;
+
+export default connect(
+  pick(['tagDelete']),
+  { deleteTag, listTags }
+)(DeleteTagConfirmModal);
diff --git a/src/tags/reducers/tagDelete.js b/src/tags/reducers/tagDelete.js
new file mode 100644
index 00000000..373c1b2d
--- /dev/null
+++ b/src/tags/reducers/tagDelete.js
@@ -0,0 +1,52 @@
+import ShlinkApiClient from '../../api/ShlinkApiClient';
+import { curry } from 'ramda';
+import PropTypes from 'prop-types';
+
+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 tagDeleteType = PropTypes.shape({
+  deleting: PropTypes.bool,
+  error: PropTypes.bool,
+});
+
+const defaultState = {
+  deleting: false,
+  error: false,
+};
+
+export default function reduce(state = defaultState, action) {
+  switch (action.type) {
+    case DELETE_TAG_START:
+      return {
+        deleting: true,
+        error: false,
+      };
+    case DELETE_TAG_ERROR:
+      return {
+        deleting: false,
+        error: true,
+      };
+    case DELETE_TAG:
+      return {
+        deleting: false,
+        error: false,
+      };
+    default:
+      return state;
+  }
+}
+
+export const _deleteTag = (ShlinkApiClient, tag) => async dispatch => {
+  dispatch({ type: DELETE_TAG_START });
+
+  try {
+    await ShlinkApiClient.deleteTags([tag]);
+    dispatch({ type: DELETE_TAG });
+  } catch (e) {
+    dispatch({ type: DELETE_TAG_ERROR });
+    throw e;
+  }
+};
+export const deleteTag = curry(_deleteTag)(ShlinkApiClient);
diff --git a/src/tags/reducers/tagsList.js b/src/tags/reducers/tagsList.js
index c5fe5ab0..d0229ec2 100644
--- a/src/tags/reducers/tagsList.js
+++ b/src/tags/reducers/tagsList.js
@@ -43,7 +43,6 @@ export const _listTags = ShlinkApiClient => async dispatch => {
     dispatch({ tags, type: LIST_TAGS });
   } catch (e) {
     dispatch({ type: LIST_TAGS_ERROR });
-    throw e;
   }
 };
 export const listTags = () => _listTags(ShlinkApiClient);

From b5de9bf523dad4af946c6fa120d4a4e785cdcf4a Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 18 Aug 2018 16:47:19 +0200
Subject: [PATCH 16/66] Fixed wrong reducer being called

---
 src/tags/helpers/DeleteTagConfirmModal.js | 17 ++++++++---------
 src/tags/reducers/tagDelete.js            |  3 +++
 src/tags/reducers/tagsList.js             |  7 +++++++
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/tags/helpers/DeleteTagConfirmModal.js b/src/tags/helpers/DeleteTagConfirmModal.js
index e4138df3..59a4cb33 100644
--- a/src/tags/helpers/DeleteTagConfirmModal.js
+++ b/src/tags/helpers/DeleteTagConfirmModal.js
@@ -3,15 +3,13 @@ import { connect } from 'react-redux';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { pick } from 'ramda';
-import { deleteTag, tagDeleteType } from '../reducers/tagDelete';
-import { listTags } from '../reducers/tagsList';
+import { deleteTag, tagDeleted, tagDeleteType } from '../reducers/tagDelete';
 
 const propTypes = {
   tag: PropTypes.string.isRequired,
   toggle: PropTypes.func.isRequired,
   isOpen: PropTypes.bool.isRequired,
   deleteTag: PropTypes.func,
-  listTags: PropTypes.func,
   tagDelete: tagDeleteType,
 };
 
@@ -19,20 +17,21 @@ export class DeleteTagConfirmModal extends Component {
   doDelete = () => {
     const { tag, toggle, deleteTag } = this.props;
     deleteTag(tag).then(() => {
-      this.tagDeleted = true;
+      this.tagWasDeleted = true;
       toggle();
-    }).catch(() => {});
+    });
   };
   onClosed = () => {
-    if (!this.tagDeleted) {
+    if (!this.tagWasDeleted) {
       return;
     }
 
-    this.props.listTags();
+    const { tagDeleted, tag } = this.props;
+    tagDeleted(tag);
   };
 
   componentDidMount() {
-    this.tagDeleted = false;
+    this.tagWasDeleted = false;
   }
 
   render() {
@@ -70,5 +69,5 @@ DeleteTagConfirmModal.propTypes = propTypes;
 
 export default connect(
   pick(['tagDelete']),
-  { deleteTag, listTags }
+  { deleteTag, tagDeleted }
 )(DeleteTagConfirmModal);
diff --git a/src/tags/reducers/tagDelete.js b/src/tags/reducers/tagDelete.js
index 373c1b2d..c80d43f7 100644
--- a/src/tags/reducers/tagDelete.js
+++ b/src/tags/reducers/tagDelete.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 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 TAG_DELETED = 'shlink/deleteTag/TAG_DELETED';
 
 export const tagDeleteType = PropTypes.shape({
   deleting: PropTypes.bool,
@@ -50,3 +51,5 @@ export const _deleteTag = (ShlinkApiClient, tag) => async dispatch => {
   }
 };
 export const deleteTag = curry(_deleteTag)(ShlinkApiClient);
+
+export const tagDeleted = tag => ({ type: TAG_DELETED, tag });
diff --git a/src/tags/reducers/tagsList.js b/src/tags/reducers/tagsList.js
index d0229ec2..80b9e448 100644
--- a/src/tags/reducers/tagsList.js
+++ b/src/tags/reducers/tagsList.js
@@ -1,4 +1,6 @@
 import ShlinkApiClient from '../../api/ShlinkApiClient';
+import { TAG_DELETED } from './tagDelete';
+import { reject } from 'ramda';
 
 const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
 const LIST_TAGS_ERROR = 'shlink/tagsList/LIST_TAGS_ERROR';
@@ -30,6 +32,11 @@ export default function reducer(state = defaultState, action) {
         loading: false,
         error: false,
       };
+    case TAG_DELETED:
+      return {
+        ...state,
+        tags: reject(tag => tag === action.tag, state.tags),
+      };
     default:
       return state;
   }

From 680d80d7536f93c85a62d2b8889a141d73e3ed70 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 18 Aug 2018 17:14:33 +0200
Subject: [PATCH 17/66] Prevented short URLs list to be reloaded when tags are
 edited

---
 src/short-urls/helpers/EditTagsModal.js  | 19 ++++++++++++++-----
 src/short-urls/reducers/shortUrlTags.js  |  7 +++++++
 src/short-urls/reducers/shortUrlsList.js | 15 +++++++++------
 test/common/AsideMenu.test.js            |  7 ++++---
 4 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/short-urls/helpers/EditTagsModal.js b/src/short-urls/helpers/EditTagsModal.js
index ea4a0c15..8bef6daf 100644
--- a/src/short-urls/helpers/EditTagsModal.js
+++ b/src/short-urls/helpers/EditTagsModal.js
@@ -3,9 +3,13 @@ import { connect } from 'react-redux';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import TagsSelector from '../../utils/TagsSelector';
 import PropTypes from 'prop-types';
-import { editShortUrlTags, resetShortUrlsTags, shortUrlTagsType } from '../reducers/shortUrlTags';
+import {
+  editShortUrlTags,
+  resetShortUrlsTags,
+  shortUrlTagsType,
+  shortUrlTagsEdited
+} from '../reducers/shortUrlTags';
 import { pick } from 'ramda';
-import { refreshShortUrls } from '../reducers/shortUrlsList';
 
 const propTypes = {
   isOpen: PropTypes.bool.isRequired,
@@ -13,6 +17,7 @@ const propTypes = {
   url: PropTypes.string.isRequired,
   shortUrl: PropTypes.shape({
     tags: PropTypes.arrayOf(PropTypes.string),
+    shortCode: PropTypes.string,
   }).isRequired,
   shortUrlTags: shortUrlTagsType,
 };
@@ -32,7 +37,9 @@ export class EditTagsModal extends React.Component {
       return;
     }
 
-    this.props.refreshShortUrls();
+    const { shortUrlTagsEdited, shortUrl } = this.props;
+    const { tags } = this.state;
+    shortUrlTagsEdited(shortUrl.shortCode, tags);
   };
 
   componentDidMount() {
@@ -51,7 +58,9 @@ export class EditTagsModal extends React.Component {
 
     return (
       <Modal isOpen={isOpen} toggle={toggle} centered onClosed={this.refreshShortUrls}>
-        <ModalHeader toggle={toggle}>Edit tags for <a target="_blank" href={url}>{url}</a></ModalHeader>
+        <ModalHeader toggle={toggle}>
+          Edit tags for <a target="_blank" href={url}>{url}</a>
+        </ModalHeader>
         <ModalBody>
           <TagsSelector tags={this.state.tags} onChange={tags => this.setState({ tags })} />
           {shortUrlTags.error && (
@@ -80,5 +89,5 @@ EditTagsModal.propTypes = propTypes;
 
 export default connect(
   pick(['shortUrlTags']),
-  { editShortUrlTags, resetShortUrlsTags, refreshShortUrls }
+  { editShortUrlTags, resetShortUrlsTags, shortUrlTagsEdited }
 )(EditTagsModal);
diff --git a/src/short-urls/reducers/shortUrlTags.js b/src/short-urls/reducers/shortUrlTags.js
index d01eda25..e2244a92 100644
--- a/src/short-urls/reducers/shortUrlTags.js
+++ b/src/short-urls/reducers/shortUrlTags.js
@@ -6,6 +6,7 @@ export const EDIT_SHORT_URL_TAGS_START = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAG
 export const EDIT_SHORT_URL_TAGS_ERROR = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_ERROR';
 export const EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS';
 export const RESET_EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/RESET_EDIT_SHORT_URL_TAGS';
+export const SHORT_URL_TAGS_EDITED = 'shlink/shortUrlTags/SHORT_URL_TAGS_EDITED';
 
 export const shortUrlTagsType = PropTypes.shape({
   shortCode: PropTypes.string,
@@ -64,3 +65,9 @@ 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) => ({
+  tags,
+  shortCode,
+  type: SHORT_URL_TAGS_EDITED,
+});
diff --git a/src/short-urls/reducers/shortUrlsList.js b/src/short-urls/reducers/shortUrlsList.js
index 29eb99da..93c1f453 100644
--- a/src/short-urls/reducers/shortUrlsList.js
+++ b/src/short-urls/reducers/shortUrlsList.js
@@ -1,4 +1,6 @@
 import ShlinkApiClient from '../../api/ShlinkApiClient';
+import { SHORT_URL_TAGS_EDITED } from './shortUrlTags';
+import { assoc, assocPath } from 'ramda';
 
 const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
 const LIST_SHORT_URLS_ERROR = 'shlink/shortUrlsList/LIST_SHORT_URLS_ERROR';
@@ -25,6 +27,13 @@ export default function reducer(state = initialState, action) {
         error: true,
         shortUrls: []
       };
+    case SHORT_URL_TAGS_EDITED:
+      const { data } = state.shortUrls;
+      return assocPath(['shortUrls', 'data'], data.map(shortUrl =>
+        shortUrl.shortCode === action.shortCode
+          ? assoc('tags', action.tags, shortUrl)
+          : shortUrl
+      ), state);
     default:
       return state;
   }
@@ -41,9 +50,3 @@ export const _listShortUrls = (ShlinkApiClient, params = {}) => async dispatch =
   }
 };
 export const listShortUrls = (params = {}) => _listShortUrls(ShlinkApiClient, params);
-
-export const _refreshShortUrls = ShlinkApiClient => async (dispatch, getState) => {
-  const { shortUrlsListParams } = getState();
-  await _listShortUrls(ShlinkApiClient, shortUrlsListParams)(dispatch);
-};
-export const refreshShortUrls = () => _refreshShortUrls(ShlinkApiClient);
diff --git a/test/common/AsideMenu.test.js b/test/common/AsideMenu.test.js
index db5e8f71..141f20a9 100644
--- a/test/common/AsideMenu.test.js
+++ b/test/common/AsideMenu.test.js
@@ -1,6 +1,7 @@
 import { shallow } from 'enzyme'
 import React from 'react'
 import AsideMenu from '../../src/common/AsideMenu'
+import { NavLink } from 'react-router-dom';
 
 describe('<AsideMenu />', () => {
   let wrapped;
@@ -12,10 +13,10 @@ describe('<AsideMenu />', () => {
     wrapped.unmount();
   });
 
-  it('contains links to selected server', () => {
-    const links = wrapped.find('NavLink');
+  it('contains links to different sections', () => {
+    const links = wrapped.find(NavLink);
 
-    expect(links).toHaveLength(2);
+    expect(links).toHaveLength(3);
     links.forEach(link => expect(link.prop('to')).toContain('abc123'));
   });
 

From 2650027c40455bb7812e3a50934ea2eea1ad7fbb Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 18 Aug 2018 17:34:49 +0200
Subject: [PATCH 18/66] Updated tags list, allowing to click on a tag to show
 the list filtered by that tag

---
 src/short-urls/SearchBar.js            | 23 +++++++++++++----------
 src/short-urls/ShortUrlsList.js        |  7 +++++--
 src/short-urls/helpers/ShortUrlsRow.js | 10 +++++++---
 src/tags/TagCard.js                    |  7 +++++--
 src/tags/TagsList.js                   | 10 ++++++++--
 5 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/short-urls/SearchBar.js b/src/short-urls/SearchBar.js
index d82ae9f2..9e5e75f7 100644
--- a/src/short-urls/SearchBar.js
+++ b/src/short-urls/SearchBar.js
@@ -44,16 +44,19 @@ export class SearchBar extends React.Component {
           <h4 className="search-bar__selected-tag mt-2">
             <FontAwesomeIcon icon={tagsIcon} className="search-bar__tags-icon" />
             &nbsp;
-            {selectedTags.map(tag => <Tag
-              text={tag}
-              clearable
-              onClose={() => listShortUrls(
-                {
-                  ...shortUrlsListParams,
-                  tags: selectedTags.filter(selectedTag => selectedTag !== tag)
-                }
-              )}
-            />)}
+            {selectedTags.map(tag => (
+              <Tag
+                key={tag}
+                text={tag}
+                clearable
+                onClose={() => listShortUrls(
+                  {
+                    ...shortUrlsListParams,
+                    tags: selectedTags.filter(selectedTag => selectedTag !== tag)
+                  }
+                )}
+              />
+            ))}
           </h4>
         )}
       </div>
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 2a1a68d5..af94ea93 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -8,6 +8,7 @@ import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from
 import { ShortUrlsRow } from './helpers/ShortUrlsRow'
 import { listShortUrls } from './reducers/shortUrlsList'
 import './ShortUrlsList.scss'
+import qs from 'qs';
 
 const SORTABLE_FIELDS = {
   dateCreated: 'Created at',
@@ -64,8 +65,10 @@ export class ShortUrlsList extends React.Component {
   }
 
   componentDidMount() {
-    const { match: { params } } = this.props;
-    this.refreshList({ page: params.page });
+    const { match: { params }, location } = this.props;
+    const query = qs.parse(location.search, { ignoreQueryPrefix: true });
+
+    this.refreshList({ page: params.page, tags: query.tag ? [query.tag] : [] });
   }
 
   renderShortUrls() {
diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js
index 0237bc07..3190e327 100644
--- a/src/short-urls/helpers/ShortUrlsRow.js
+++ b/src/short-urls/helpers/ShortUrlsRow.js
@@ -15,9 +15,13 @@ export class ShortUrlsRow extends React.Component {
 
     const { refreshList, shortUrlsListParams } = this.props;
     const selectedTags = shortUrlsListParams.tags || [];
-    return tags.map(
-      tag => <Tag key={tag} text={tag} onClick={() => refreshList({tags: [ ...selectedTags, tag ] })} />
-    );
+    return tags.map(tag => (
+      <Tag
+        key={tag}
+        text={tag}
+        onClick={() => refreshList({ tags: [ ...selectedTags, tag ] })}
+      />
+    ));
   }
 
   render() {
diff --git a/src/tags/TagCard.js b/src/tags/TagCard.js
index 5f5a79a0..7c8a421e 100644
--- a/src/tags/TagCard.js
+++ b/src/tags/TagCard.js
@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ColorGenerator, { colorGeneratorType } from '../utils/ColorGenerator';
 import './TagCard.scss';
+import { Link } from 'react-router-dom';
 
 const propTypes = {
   tag: PropTypes.string,
@@ -20,7 +21,7 @@ export default class TagCard extends React.Component {
   state = { isDeleteModalOpen: false, isEditModalOpen: false };
 
   render() {
-    const { tag, colorGenerator } = this.props;
+    const { tag, colorGenerator, currentServerId } = this.props;
     const toggleDelete = () =>
       this.setState({ isDeleteModalOpen: !this.state.isDeleteModalOpen });
 
@@ -41,7 +42,9 @@ export default class TagCard extends React.Component {
               style={{backgroundColor: colorGenerator.getColorForKey(tag)}}
               className="tag-card__tag-bullet"
             />
-            {tag}
+            <Link to={`/server/${currentServerId}/list-short-urls/1?tag=${tag}`}>
+              {tag}
+            </Link>
           </h5>
         </CardBody>
 
diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js
index 1ce60416..a8e641fd 100644
--- a/src/tags/TagsList.js
+++ b/src/tags/TagsList.js
@@ -16,7 +16,7 @@ export class TagsList extends React.Component {
   }
 
   renderContent() {
-    const { tagsList } = this.props;
+    const { tagsList, match } = this.props;
     if (tagsList.loading) {
       return <MuttedMessage marginSize={0}>Loading...</MuttedMessage>
     }
@@ -40,7 +40,13 @@ export class TagsList extends React.Component {
       <React.Fragment>
         {tagsGroups.map((group, index) => (
           <div key={index} className="col-md-6 col-xl-3">
-            {group.map(tag => <TagCard tag={tag} key={tag}/>)}
+            {group.map(tag => (
+              <TagCard
+                key={tag}
+                tag={tag}
+                currentServerId={match.params.serverId}
+              />
+            ))}
           </div>
         ))}
       </React.Fragment>

From 878e336ba1e9e302c6066c50a0e7c8742931547a Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 18 Aug 2018 17:51:44 +0200
Subject: [PATCH 19/66] Simplified ColorGenerator and exposed method to set
 colors for a key

---
 src/utils/ColorGenerator.js | 39 +++++++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/utils/ColorGenerator.js b/src/utils/ColorGenerator.js
index 840b485b..d7a4f9e2 100644
--- a/src/utils/ColorGenerator.js
+++ b/src/utils/ColorGenerator.js
@@ -1,37 +1,46 @@
 import Storage from './Storage';
 import PropTypes from 'prop-types';
+import { range } from 'ramda';
 
-const buildRandomColor = () => {
-  const letters = '0123456789ABCDEF';
-  let color = '#';
-  for (let i = 0; i < 6; i++ ) {
-    color += letters[Math.floor(Math.random() * 16)];
-  }
-  return color;
-};
+const { floor, random } = Math;
+const letters = '0123456789ABCDEF';
+const buildRandomColor = () =>
+  `#${
+    range(0, 6)
+      .map(() => letters[floor(random() * 16)])
+      .join('')
+  }`;
 
 export class ColorGenerator {
   constructor(storage) {
     this.storage = storage;
     this.colors = this.storage.get('colors') || {};
+
+    this.getColorForKey = this.getColorForKey.bind(this);
+    this.setColorForKey = this.setColorForKey.bind(this);
   }
 
   getColorForKey = key => {
-    let color = this.colors[key];
-    if (color) {
-      return color;
-    }
+    const color = this.colors[key];
 
     // If a color has not been set yet, generate a random one and save it
-    color = buildRandomColor();
-    this.colors[key] = color;
-    this.storage.set('colors', this.colors);
+    if (!color) {
+      this.setColorForKey(key, buildRandomColor());
+      return this.getColorForKey(key);
+    }
+
     return color;
   };
+
+  setColorForKey = (key, color) => {
+    this.colors[key] = color;
+    this.storage.set('colors', this.colors);
+  }
 }
 
 export const colorGeneratorType = PropTypes.shape({
   getColorForKey: PropTypes.func,
+  setColorForKey: PropTypes.func,
 });
 
 export default new ColorGenerator(Storage);

From d541543ab347c755c255ac1a883be6684ea04156 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 18 Aug 2018 22:59:53 +0200
Subject: [PATCH 20/66] Implemented edition of tags

---
 package.json                     |  1 +
 src/api/ShlinkApiClient.js       |  5 +++
 src/common/AsideMenu.js          |  2 +-
 src/reducers/index.js            |  2 +
 src/tags/TagCard.js              | 15 ++++++-
 src/tags/TagCard.scss            |  4 +-
 src/tags/helpers/EditTagModal.js | 75 ++++++++++++++++++++++++++++++++
 src/tags/reducers/tagEdit.js     | 65 +++++++++++++++++++++++++++
 src/tags/reducers/tagsList.js    |  8 ++++
 yarn.lock                        | 26 ++++++++++-
 10 files changed, 197 insertions(+), 6 deletions(-)
 create mode 100644 src/tags/helpers/EditTagModal.js
 create mode 100644 src/tags/reducers/tagEdit.js

diff --git a/package.json b/package.json
index 53e04ed3..2e7b35c0 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "ramda": "^0.25.0",
     "react": "^16.3.2",
     "react-chartjs-2": "^2.7.4",
+    "react-color": "^2.14.1",
     "react-copy-to-clipboard": "^5.0.1",
     "react-datepicker": "^1.5.0",
     "react-dom": "^16.3.2",
diff --git a/src/api/ShlinkApiClient.js b/src/api/ShlinkApiClient.js
index 767fc742..ee12e094 100644
--- a/src/api/ShlinkApiClient.js
+++ b/src/api/ShlinkApiClient.js
@@ -59,6 +59,11 @@ export class ShlinkApiClient {
       .then(() => ({ tags }))
       .catch(e => this._handleAuthError(e, this.deleteTag, []));
 
+  editTag = (oldName, newName) =>
+    this._performRequest('/tags', 'PUT', {}, { oldName, newName })
+      .then(() => ({ oldName, newName }))
+      .catch(e => this._handleAuthError(e, this.editTag, [oldName, newName]));
+
   _performRequest = async (url, method = 'GET', query = {}, body = {}) => {
     if (isEmpty(this._token)) {
       this._token = await this._authenticate();
diff --git a/src/common/AsideMenu.js b/src/common/AsideMenu.js
index 6283277a..92db9013 100644
--- a/src/common/AsideMenu.js
+++ b/src/common/AsideMenu.js
@@ -52,7 +52,7 @@ export default function AsideMenu({ selectedServer, className, showOnMobile }) {
           to={`/server/${serverId}/tags`}
         >
           <FontAwesomeIcon icon={tagsIcon} />
-          <span className="aside-menu__item-text">List tags</span>
+          <span className="aside-menu__item-text">Manage tags</span>
         </NavLink>
 
         <DeleteServerButton
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 84587ae5..2ae6490d 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -9,6 +9,7 @@ import shortUrlVisitsReducer from '../short-urls/reducers/shortUrlVisits';
 import shortUrlTagsReducer from '../short-urls/reducers/shortUrlTags';
 import tagsListReducer from '../tags/reducers/tagsList';
 import tagDeleteReducer from '../tags/reducers/tagDelete';
+import tagEditReducer from '../tags/reducers/tagEdit';
 
 export default combineReducers({
   servers: serversReducer,
@@ -20,4 +21,5 @@ export default combineReducers({
   shortUrlTags: shortUrlTagsReducer,
   tagsList: tagsListReducer,
   tagDelete: tagDeleteReducer,
+  tagEdit: tagEditReducer,
 });
diff --git a/src/tags/TagCard.js b/src/tags/TagCard.js
index 7c8a421e..f28b25e9 100644
--- a/src/tags/TagCard.js
+++ b/src/tags/TagCard.js
@@ -8,6 +8,7 @@ import React from 'react';
 import ColorGenerator, { colorGeneratorType } from '../utils/ColorGenerator';
 import './TagCard.scss';
 import { Link } from 'react-router-dom';
+import EditTagModal from './helpers/EditTagModal';
 
 const propTypes = {
   tag: PropTypes.string,
@@ -24,17 +25,22 @@ export default class TagCard extends React.Component {
     const { tag, colorGenerator, currentServerId } = this.props;
     const toggleDelete = () =>
       this.setState({ isDeleteModalOpen: !this.state.isDeleteModalOpen });
+    const toggleEdit = () =>
+      this.setState({ isEditModalOpen: !this.state.isEditModalOpen });
 
     return (
       <Card className="tag-card">
         <CardBody className="tag-card__body">
           <button
-            className="btn btn-light btn-sm tag-card__btn"
+            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">
+          <button
+            className="btn btn-light btn-sm tag-card__btn"
+            onClick={toggleEdit}
+          >
             <FontAwesomeIcon icon={editIcon}/>
           </button>
           <h5 className="tag-card__tag-title">
@@ -53,6 +59,11 @@ export default class TagCard extends React.Component {
           toggle={toggleDelete}
           isOpen={this.state.isDeleteModalOpen}
         />
+        <EditTagModal
+          tag={tag}
+          toggle={toggleEdit}
+          isOpen={this.state.isEditModalOpen}
+        />
       </Card>
     );
   }
diff --git a/src/tags/TagCard.scss b/src/tags/TagCard.scss
index a2861ff6..3a369dda 100644
--- a/src/tags/TagCard.scss
+++ b/src/tags/TagCard.scss
@@ -28,6 +28,6 @@
 .tag-card__btn {
   float: right;
 }
-.tag-card__btn:not(:last-child) {
-  margin-left: 2px;
+.tag-card__btn--last {
+  margin-left: 3px;
 }
diff --git a/src/tags/helpers/EditTagModal.js b/src/tags/helpers/EditTagModal.js
new file mode 100644
index 00000000..b7b03f6d
--- /dev/null
+++ b/src/tags/helpers/EditTagModal.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { pick } from 'ramda';
+import { editTag, tagEdited } from '../reducers/tagEdit';
+
+export class EditTagModal extends React.Component {
+  saveTag = e => {
+    e.preventDefault();
+    const { tag: oldName, editTag, toggle } = this.props;
+    const { tag: newName } = this.state;
+
+    editTag(oldName, newName)
+      .then(() => {
+        this.tagWasEdited = true;
+        toggle();
+      })
+      .catch(() => {});
+  };
+  onClosed = () => {
+    if (!this.tagWasEdited) {
+      return;
+    }
+
+    const { tag: oldName, tagEdited } = this.props;
+    const { tag: newName } = this.state;
+    tagEdited(oldName, newName);
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      tag: props.tag,
+    }
+  }
+
+  componentDidMount() {
+    this.tagWasEdited = false;
+  }
+
+  render() {
+    const { isOpen, toggle, tagEdit } = this.props;
+
+    return (
+      <Modal isOpen={isOpen} toggle={toggle} centered onClosed={this.onClosed}>
+        <form onSubmit={this.saveTag}>
+          <ModalHeader toggle={toggle}>Edit tag</ModalHeader>
+          <ModalBody>
+            <input
+              type="text"
+              value={this.state.tag}
+              onChange={e => this.setState({ tag: e.target.value })}
+              placeholder="Tag"
+              required
+              className="form-control"
+            />
+            {tagEdit.error && (
+              <div className="p-2 mt-2 bg-danger text-white text-center">
+                Something went wrong while editing the tag :(
+              </div>
+            )}
+          </ModalBody>
+          <ModalFooter>
+            <button type="button" className="btn btn-link" onClick={toggle}>Cancel</button>
+            <button type="submit" className="btn btn-primary" disabled={tagEdit.editing}>
+              {tagEdit.editing ? 'Saving...' : 'Save'}
+            </button>
+          </ModalFooter>
+        </form>
+      </Modal>
+    );
+  }
+}
+
+export default connect(pick(['tagEdit']), { editTag, tagEdited })(EditTagModal);
diff --git a/src/tags/reducers/tagEdit.js b/src/tags/reducers/tagEdit.js
new file mode 100644
index 00000000..bfb940f5
--- /dev/null
+++ b/src/tags/reducers/tagEdit.js
@@ -0,0 +1,65 @@
+import ShlinkApiClient from '../../api/ShlinkApiClient';
+import ColorGenerator from '../../utils/ColorGenerator';
+import { curry } from 'ramda';
+
+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 TAG_EDITED = 'shlink/editTag/TAG_EDITED';
+
+const defaultState = {
+  oldName: '',
+  newName: '',
+  editing: false,
+  error: false,
+};
+
+export default function reducer(state = defaultState, action) {
+  switch (action.type) {
+    case EDIT_TAG_START:
+      return {
+        ...state,
+        editing: true,
+        error: false,
+      };
+    case EDIT_TAG_ERROR:
+      return {
+        ...state,
+        editing: false,
+        error: true,
+      };
+    case EDIT_TAG:
+      return {
+        oldName: action.oldName,
+        newName: action.newName,
+        editing: false,
+        error: false,
+      };
+    default:
+      return state;
+  }
+}
+
+export const _editTag = (ShlinkApiClient, ColorGenerator, oldName, newName) => async dispatch => {
+  dispatch({ type: EDIT_TAG_START });
+
+  try {
+    await ShlinkApiClient.editTag(oldName, newName);
+
+    // Make new tag name use the same color as the old one
+    const color = ColorGenerator.getColorForKey(oldName);
+    ColorGenerator.setColorForKey(newName, color);
+
+    dispatch({ type: EDIT_TAG, oldName, newName });
+  } catch (e) {
+    dispatch({ type: EDIT_TAG_ERROR });
+    throw e;
+  }
+};
+export const editTag = curry(_editTag)(ShlinkApiClient, ColorGenerator);
+
+export const tagEdited = (oldName, newName) => ({
+  type: TAG_EDITED,
+  oldName,
+  newName,
+});
diff --git a/src/tags/reducers/tagsList.js b/src/tags/reducers/tagsList.js
index 80b9e448..e75b3bd1 100644
--- a/src/tags/reducers/tagsList.js
+++ b/src/tags/reducers/tagsList.js
@@ -1,6 +1,7 @@
 import ShlinkApiClient from '../../api/ShlinkApiClient';
 import { TAG_DELETED } from './tagDelete';
 import { reject } from 'ramda';
+import { TAG_EDITED } from './tagEdit';
 
 const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
 const LIST_TAGS_ERROR = 'shlink/tagsList/LIST_TAGS_ERROR';
@@ -37,6 +38,13 @@ export default function reducer(state = defaultState, action) {
         ...state,
         tags: reject(tag => tag === action.tag, state.tags),
       };
+    case TAG_EDITED:
+      return {
+        ...state,
+        tags: state.tags.map(
+          tag => tag === action.oldName ? action.newName : tag
+        ),
+      };
     default:
       return state;
   }
diff --git a/yarn.lock b/yarn.lock
index 0991aac1..eb2340f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4667,7 +4667,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@~4.17.10:
+"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@~4.17.10:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
 
@@ -4737,6 +4737,10 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
@@ -6107,6 +6111,16 @@ react-chartjs-2@^2.7.4:
     lodash "^4.17.4"
     prop-types "^15.5.8"
 
+react-color@^2.14.1:
+  version "2.14.1"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.14.1.tgz#db8ad4f45d81e74896fc2e1c99508927c6d084e0"
+  dependencies:
+    lodash "^4.0.1"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
 react-copy-to-clipboard@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz#8eae107bb400be73132ed3b6a7b4fb156090208e"
@@ -6270,6 +6284,12 @@ react@^16.3.2:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  dependencies:
+    lodash "^4.0.1"
+
 reactstrap@^6.0.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-6.3.1.tgz#263924e4c73ee239f446180d40d9f09cc40607e9"
@@ -7338,6 +7358,10 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tinycolor2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"

From 71ead150a206bfeb07fffdebc3454b5cd344bc1b Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 18 Aug 2018 23:24:03 +0200
Subject: [PATCH 21/66] Added color picker to edit tag modal

---
 src/tags/helpers/EditTagModal.js   | 62 +++++++++++++++++++++++++-----
 src/tags/helpers/EditTagModal.scss |  3 ++
 2 files changed, 55 insertions(+), 10 deletions(-)
 create mode 100644 src/tags/helpers/EditTagModal.scss

diff --git a/src/tags/helpers/EditTagModal.js b/src/tags/helpers/EditTagModal.js
index b7b03f6d..e1c6ca91 100644
--- a/src/tags/helpers/EditTagModal.js
+++ b/src/tags/helpers/EditTagModal.js
@@ -1,10 +1,20 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
 import { pick } from 'ramda';
 import { editTag, tagEdited } from '../reducers/tagEdit';
+import { ChromePicker } from 'react-color';
+import ColorGenerator from '../../utils/ColorGenerator';
+import './EditTagModal.scss';
+
+const defaultProps = {
+  colorGenerator: ColorGenerator,
+};
+
 
 export class EditTagModal extends React.Component {
+  state = { showColorPicker: false };
+
   saveTag = e => {
     e.preventDefault();
     const { tag: oldName, editTag, toggle } = this.props;
@@ -29,8 +39,11 @@ export class EditTagModal extends React.Component {
 
   constructor(props) {
     super(props);
+
+    const { colorGenerator, tag } = props;
     this.state = {
-      tag: props.tag,
+      tag,
+      color: colorGenerator.getColorForKey(tag)
     }
   }
 
@@ -40,20 +53,47 @@ export class EditTagModal extends React.Component {
 
   render() {
     const { isOpen, toggle, tagEdit } = this.props;
+    const { tag, color } = this.state;
+    const toggleColorPicker = () =>
+      this.setState({ showColorPicker: !this.state.showColorPicker });
 
     return (
       <Modal isOpen={isOpen} toggle={toggle} centered onClosed={this.onClosed}>
         <form onSubmit={this.saveTag}>
           <ModalHeader toggle={toggle}>Edit tag</ModalHeader>
           <ModalBody>
-            <input
-              type="text"
-              value={this.state.tag}
-              onChange={e => this.setState({ tag: e.target.value })}
-              placeholder="Tag"
-              required
-              className="form-control"
-            />
+            <Popover
+              isOpen={this.state.showColorPicker}
+              toggle={toggleColorPicker}
+              target="colorPickerBtn"
+              placement="right"
+            >
+              <ChromePicker color={color} />
+            </Popover>
+
+            <div className="input-group">
+              <div
+                className="input-group-prepend"
+                id="colorPickerBtn"
+                onClick={toggleColorPicker}
+              >
+                <div
+                  className="input-group-text edit-tag-modal__color-picker-toggle"
+                  style={{backgroundColor: color}}
+                >
+                  &nbsp;&nbsp;
+                </div>
+              </div>
+              <input
+                type="text"
+                value={tag}
+                onChange={e => this.setState({ tag: e.target.value })}
+                placeholder="Tag"
+                required
+                className="form-control"
+              />
+            </div>
+
             {tagEdit.error && (
               <div className="p-2 mt-2 bg-danger text-white text-center">
                 Something went wrong while editing the tag :(
@@ -72,4 +112,6 @@ export class EditTagModal extends React.Component {
   }
 }
 
+EditTagModal.defaultProps = defaultProps;
+
 export default connect(pick(['tagEdit']), { editTag, tagEdited })(EditTagModal);
diff --git a/src/tags/helpers/EditTagModal.scss b/src/tags/helpers/EditTagModal.scss
new file mode 100644
index 00000000..6c774ca0
--- /dev/null
+++ b/src/tags/helpers/EditTagModal.scss
@@ -0,0 +1,3 @@
+.edit-tag-modal__color-picker-toggle {
+  cursor: pointer;
+}

From 5d2de11615bb26fbc1912903ed773f48a4c87461 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 19 Aug 2018 20:08:02 +0200
Subject: [PATCH 22/66] Allowed tags color to be changed

---
 src/common/AsideMenu.js            |  2 +-
 src/common/MenuLayout.js           |  2 +-
 src/tags/helpers/EditTagModal.js   | 41 +++++++++++++++++-------------
 src/tags/helpers/EditTagModal.scss |  4 +++
 src/tags/reducers/tagEdit.js       | 35 ++++++++++++-------------
 5 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/src/common/AsideMenu.js b/src/common/AsideMenu.js
index 92db9013..bf2f0a32 100644
--- a/src/common/AsideMenu.js
+++ b/src/common/AsideMenu.js
@@ -49,7 +49,7 @@ export default function AsideMenu({ selectedServer, className, showOnMobile }) {
         <NavLink
           className="aside-menu__item"
           activeClassName="aside-menu__item--selected"
-          to={`/server/${serverId}/tags`}
+          to={`/server/${serverId}/manage-tags`}
         >
           <FontAwesomeIcon icon={tagsIcon} />
           <span className="aside-menu__item-text">Manage tags</span>
diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js
index 9348438e..99ad9e7b 100644
--- a/src/common/MenuLayout.js
+++ b/src/common/MenuLayout.js
@@ -81,7 +81,7 @@ export class MenuLayout extends React.Component {
                 />
                 <Route
                   exact
-                  path="/server/:serverId/tags"
+                  path="/server/:serverId/manage-tags"
                   component={TagsList}
                 />
               </Switch>
diff --git a/src/tags/helpers/EditTagModal.js b/src/tags/helpers/EditTagModal.js
index e1c6ca91..ce038998 100644
--- a/src/tags/helpers/EditTagModal.js
+++ b/src/tags/helpers/EditTagModal.js
@@ -5,6 +5,8 @@ import { pick } from 'ramda';
 import { editTag, tagEdited } from '../reducers/tagEdit';
 import { ChromePicker } from 'react-color';
 import ColorGenerator from '../../utils/ColorGenerator';
+import colorIcon from '@fortawesome/fontawesome-free-solid/faPalette'
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
 import './EditTagModal.scss';
 
 const defaultProps = {
@@ -13,14 +15,12 @@ const defaultProps = {
 
 
 export class EditTagModal extends React.Component {
-  state = { showColorPicker: false };
-
   saveTag = e => {
     e.preventDefault();
     const { tag: oldName, editTag, toggle } = this.props;
-    const { tag: newName } = this.state;
+    const { tag: newName, color } = this.state;
 
-    editTag(oldName, newName)
+    editTag(oldName, newName, color)
       .then(() => {
         this.tagWasEdited = true;
         toggle();
@@ -33,8 +33,8 @@ export class EditTagModal extends React.Component {
     }
 
     const { tag: oldName, tagEdited } = this.props;
-    const { tag: newName } = this.state;
-    tagEdited(oldName, newName);
+    const { tag: newName, color } = this.state;
+    tagEdited(oldName, newName, color);
   };
 
   constructor(props) {
@@ -42,6 +42,7 @@ export class EditTagModal extends React.Component {
 
     const { colorGenerator, tag } = props;
     this.state = {
+      showColorPicker: false,
       tag,
       color: colorGenerator.getColorForKey(tag)
     }
@@ -62,15 +63,6 @@ export class EditTagModal extends React.Component {
         <form onSubmit={this.saveTag}>
           <ModalHeader toggle={toggle}>Edit tag</ModalHeader>
           <ModalBody>
-            <Popover
-              isOpen={this.state.showColorPicker}
-              toggle={toggleColorPicker}
-              target="colorPickerBtn"
-              placement="right"
-            >
-              <ChromePicker color={color} />
-            </Popover>
-
             <div className="input-group">
               <div
                 className="input-group-prepend"
@@ -79,11 +71,26 @@ export class EditTagModal extends React.Component {
               >
                 <div
                   className="input-group-text edit-tag-modal__color-picker-toggle"
-                  style={{backgroundColor: color}}
+                  style={{
+                    backgroundColor: color,
+                    borderColor: color,
+                  }}
                 >
-                  &nbsp;&nbsp;
+                  <FontAwesomeIcon icon={colorIcon} className="edit-tag-modal__color-icon" />
                 </div>
               </div>
+              <Popover
+                isOpen={this.state.showColorPicker}
+                toggle={toggleColorPicker}
+                target="colorPickerBtn"
+                placement="right"
+              >
+                <ChromePicker
+                  color={color}
+                  onChange={color => this.setState({ color: color.hex })}
+                  disableAlpha
+                />
+              </Popover>
               <input
                 type="text"
                 value={tag}
diff --git a/src/tags/helpers/EditTagModal.scss b/src/tags/helpers/EditTagModal.scss
index 6c774ca0..29bc4308 100644
--- a/src/tags/helpers/EditTagModal.scss
+++ b/src/tags/helpers/EditTagModal.scss
@@ -1,3 +1,7 @@
 .edit-tag-modal__color-picker-toggle {
   cursor: pointer;
 }
+
+.edit-tag-modal__color-icon {
+  color: #fff;
+}
diff --git a/src/tags/reducers/tagEdit.js b/src/tags/reducers/tagEdit.js
index bfb940f5..f8d6aae0 100644
--- a/src/tags/reducers/tagEdit.js
+++ b/src/tags/reducers/tagEdit.js
@@ -1,6 +1,6 @@
 import ShlinkApiClient from '../../api/ShlinkApiClient';
 import ColorGenerator from '../../utils/ColorGenerator';
-import { curry } from 'ramda';
+import { curry, pick } from 'ramda';
 
 const EDIT_TAG_START = 'shlink/editTag/EDIT_TAG_START';
 const EDIT_TAG_ERROR = 'shlink/editTag/EDIT_TAG_ERROR';
@@ -30,8 +30,7 @@ export default function reducer(state = defaultState, action) {
       };
     case EDIT_TAG:
       return {
-        oldName: action.oldName,
-        newName: action.newName,
+        ...pick(['oldName', 'newName'], action),
         editing: false,
         error: false,
       };
@@ -40,26 +39,24 @@ export default function reducer(state = defaultState, action) {
   }
 }
 
-export const _editTag = (ShlinkApiClient, ColorGenerator, oldName, newName) => async dispatch => {
-  dispatch({ type: EDIT_TAG_START });
+export const _editTag = (ShlinkApiClient, ColorGenerator, oldName, newName, color) =>
+  async dispatch => {
+    dispatch({ type: EDIT_TAG_START });
 
-  try {
-    await ShlinkApiClient.editTag(oldName, newName);
-
-    // Make new tag name use the same color as the old one
-    const color = ColorGenerator.getColorForKey(oldName);
-    ColorGenerator.setColorForKey(newName, color);
-
-    dispatch({ type: EDIT_TAG, oldName, newName });
-  } catch (e) {
-    dispatch({ type: EDIT_TAG_ERROR });
-    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 });
+      throw e;
+    }
+  };
 export const editTag = curry(_editTag)(ShlinkApiClient, ColorGenerator);
 
-export const tagEdited = (oldName, newName) => ({
+export const tagEdited = (oldName, newName, color) => ({
   type: TAG_EDITED,
   oldName,
   newName,
+  color,
 });

From 03870c0c6fecc9f450d0cca316ec8be1d29c74e8 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 19 Aug 2018 20:11:43 +0200
Subject: [PATCH 23/66] Ensured tags list keeps sorted after editing a tag

---
 src/tags/reducers/tagsList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tags/reducers/tagsList.js b/src/tags/reducers/tagsList.js
index e75b3bd1..e48aa7ee 100644
--- a/src/tags/reducers/tagsList.js
+++ b/src/tags/reducers/tagsList.js
@@ -43,7 +43,7 @@ export default function reducer(state = defaultState, action) {
         ...state,
         tags: state.tags.map(
           tag => tag === action.oldName ? action.newName : tag
-        ),
+        ).sort(),
       };
     default:
       return state;

From 843c12128542909292a4219527546fad20b4c900 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 19 Aug 2018 20:29:23 +0200
Subject: [PATCH 24/66] Extracted SearchField from SearchBar component to its
 own component

---
 src/short-urls/SearchBar.js   | 102 ++++++++++------------------------
 src/short-urls/SearchBar.scss |  22 --------
 src/utils/SearchField.js      |  57 +++++++++++++++++++
 src/utils/SearchField.scss    |  21 +++++++
 4 files changed, 108 insertions(+), 94 deletions(-)
 create mode 100644 src/utils/SearchField.js
 create mode 100644 src/utils/SearchField.scss

diff --git a/src/short-urls/SearchBar.js b/src/short-urls/SearchBar.js
index 9e5e75f7..ed7eb3f2 100644
--- a/src/short-urls/SearchBar.js
+++ b/src/short-urls/SearchBar.js
@@ -1,85 +1,43 @@
-import searchIcon from '@fortawesome/fontawesome-free-solid/faSearch';
 import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { connect } from 'react-redux';
 import Tag from '../utils/Tag';
 import { listShortUrls } from './reducers/shortUrlsList';
+import { isEmpty, pick } from 'ramda';
+import SearchField from '../utils/SearchField';
 import './SearchBar.scss';
-import { pick, isEmpty } from 'ramda';
 
-export class SearchBar extends React.Component {
-  state = {
-    showClearBtn: false,
-    searchTerm: '',
-  };
-  timer = null;
+export function SearchBar({ listShortUrls, shortUrlsListParams }) {
+  const selectedTags = shortUrlsListParams.tags || [];
 
-  render() {
-    const { listShortUrls, shortUrlsListParams } = this.props;
-    const selectedTags = shortUrlsListParams.tags || [];
+  return (
+    <div className="serach-bar-container">
+      <SearchField onChange={
+        searchTerm => listShortUrls({ ...shortUrlsListParams, searchTerm })
+      }/>
 
-    return (
-      <div className="serach-bar-container">
-        <div className="search-bar">
-          <input
-            type="text"
-            className="form-control form-control-lg search-bar__input"
-            placeholder="Search..."
-            onChange={e => this.searchTermChanged(e.target.value)}
-            value={this.state.searchTerm}
-          />
-          <FontAwesomeIcon icon={searchIcon} className="search-bar__icon" />
-          <div
-            className="close search-bar__close"
-            hidden={! this.state.showClearBtn}
-            onClick={() => this.searchTermChanged('')}
-            id="search-bar__close"
-          >
-            &times;
-          </div>
-        </div>
-
-        {!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>
-    );
-  }
-
-  searchTermChanged(searchTerm) {
-    this.setState({
-      showClearBtn: searchTerm !== '',
-      searchTerm: searchTerm,
-    });
-
-    const resetTimer = () => {
-      clearTimeout(this.timer);
-      this.timer = null;
-    };
-    resetTimer();
-
-    this.timer = setTimeout(() => {
-      this.props.listShortUrls({ ...this.props.shortUrlsListParams, searchTerm });
-      resetTimer();
-    }, 500);
-  }
+      {!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>
+  );
 }
 
 export default connect(pick(['shortUrlsListParams']), { listShortUrls })(SearchBar);
diff --git a/src/short-urls/SearchBar.scss b/src/short-urls/SearchBar.scss
index eb4f37f9..3a3c64c1 100644
--- a/src/short-urls/SearchBar.scss
+++ b/src/short-urls/SearchBar.scss
@@ -1,25 +1,3 @@
-@import '../utils/mixins/vertical-align';
-
-.search-bar {
-  position: relative;
-}
-
-.search-bar__input.search-bar__input {
-  padding-left: 40px;
-  padding-right: 40px;
-}
-
-.search-bar__icon {
-  @include vertical-align();
-  left: 15px;
-  color: #707581;
-}
-
-.search-bar__close {
-  @include vertical-align();
-  right: 15px;
-}
-
 .search-bar__tags-icon {
   vertical-align: bottom;
 }
diff --git a/src/utils/SearchField.js b/src/utils/SearchField.js
new file mode 100644
index 00000000..77a569b9
--- /dev/null
+++ b/src/utils/SearchField.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import searchIcon from '@fortawesome/fontawesome-free-solid/faSearch';
+import PropTypes from 'prop-types';
+import './SearchField.scss';
+
+const propTypes = {
+  onChange: PropTypes.func.isRequired,
+};
+
+export default class SearchField extends React.Component {
+  state = { showClearBtn: false, searchTerm: '' };
+  timer = null;
+
+  searchTermChanged(searchTerm, timeout = 500) {
+    this.setState({
+      showClearBtn: searchTerm !== '',
+      searchTerm,
+    });
+
+    const resetTimer = () => {
+      clearTimeout(this.timer);
+      this.timer = null;
+    };
+    resetTimer();
+
+    this.timer = setTimeout(() => {
+      this.props.onChange(searchTerm);
+      resetTimer();
+    }, timeout);
+  }
+
+  render() {
+    return (
+      <div className="search-field">
+        <input
+          type="text"
+          className="form-control form-control-lg search-field__input"
+          placeholder="Search..."
+          onChange={e => this.searchTermChanged(e.target.value)}
+          value={this.state.searchTerm}
+        />
+        <FontAwesomeIcon icon={searchIcon} className="search-field__icon" />
+        <div
+          className="close search-field__close"
+          hidden={! this.state.showClearBtn}
+          onClick={() => this.searchTermChanged('', 0)}
+          id="search-field__close"
+        >
+          &times;
+        </div>
+      </div>
+    );
+  }
+}
+
+SearchField.propTypes = propTypes;
diff --git a/src/utils/SearchField.scss b/src/utils/SearchField.scss
new file mode 100644
index 00000000..74107ebf
--- /dev/null
+++ b/src/utils/SearchField.scss
@@ -0,0 +1,21 @@
+@import '../utils/mixins/vertical-align';
+
+.search-field {
+  position: relative;
+}
+
+.search-field__input.search-field__input {
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
+.search-field__icon {
+  @include vertical-align();
+  left: 15px;
+  color: #707581;
+}
+
+.search-field__close {
+  @include vertical-align();
+  right: 15px;
+}

From 96adb227d98f6f8d2264071b493157e6e97d17a7 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 19 Aug 2018 20:52:33 +0200
Subject: [PATCH 25/66] Added search bar to tags list

---
 src/tags/TagsList.js          | 20 +++++++++++++++-----
 src/tags/reducers/tagsList.js | 24 +++++++++++++++++++++---
 src/utils/SearchField.js      | 14 ++++++++++++--
 3 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js
index a8e641fd..5288a02b 100644
--- a/src/tags/TagsList.js
+++ b/src/tags/TagsList.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { pick, splitEvery } from 'ramda';
-import { listTags } from './reducers/tagsList';
+import { filterTags, listTags } from './reducers/tagsList';
 import MuttedMessage from '../utils/MuttedMessage';
 import TagCard from './TagCard';
+import SearchField from '../utils/SearchField';
 
-const { round } = Math;
+const { ceil } = Math;
 
 export class TagsList extends React.Component {
   state = { isDeleteModalOpen: false };
@@ -29,12 +30,12 @@ export class TagsList extends React.Component {
       );
     }
 
-    const tagsCount = tagsList.tags.length;
+    const tagsCount = tagsList.filteredTags.length;
     if (tagsCount < 1) {
       return <MuttedMessage>No tags found</MuttedMessage>;
     }
 
-    const tagsGroups = splitEvery(round(tagsCount / 4), tagsList.tags);
+    const tagsGroups = splitEvery(ceil(tagsCount / 4), tagsList.filteredTags);
 
     return (
       <React.Fragment>
@@ -54,8 +55,17 @@ export class TagsList extends React.Component {
   }
 
   render() {
+    const { filterTags } = this.props;
+
     return (
       <div className="shlink-container">
+        {!this.props.tagsList.loading && (
+          <SearchField
+            onChange={filterTags}
+            className="mb-3"
+            placeholder="Search tags..."
+          />
+        )}
         <div className="row">
           {this.renderContent()}
         </div>
@@ -64,4 +74,4 @@ export class TagsList extends React.Component {
   }
 }
 
-export default connect(pick(['tagsList']), { listTags })(TagsList);
+export default connect(pick(['tagsList']), { listTags, filterTags })(TagsList);
diff --git a/src/tags/reducers/tagsList.js b/src/tags/reducers/tagsList.js
index e48aa7ee..d2d7c819 100644
--- a/src/tags/reducers/tagsList.js
+++ b/src/tags/reducers/tagsList.js
@@ -6,9 +6,11 @@ import { TAG_EDITED } from './tagEdit';
 const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
 const LIST_TAGS_ERROR = 'shlink/tagsList/LIST_TAGS_ERROR';
 const LIST_TAGS = 'shlink/tagsList/LIST_TAGS';
+const FILTER_TAGS = 'shlink/tagsList/FILTER_TAGS';
 
 const defaultState = {
   tags: [],
+  filteredTags: [],
   loading: false,
   error: false,
 };
@@ -30,20 +32,31 @@ export default function reducer(state = defaultState, action) {
     case LIST_TAGS:
       return {
         tags: action.tags,
+        filteredTags: action.tags,
         loading: false,
         error: false,
       };
     case TAG_DELETED:
       return {
         ...state,
+        // FIXME This should be optimized somehow...
         tags: reject(tag => tag === action.tag, state.tags),
+        filteredTags: reject(tag => tag === action.tag, state.filteredTags),
       };
     case TAG_EDITED:
+      const renameTag = tag => tag === action.oldName ? action.newName : tag;
       return {
         ...state,
-        tags: state.tags.map(
-          tag => tag === action.oldName ? action.newName : tag
-        ).sort(),
+        // FIXME This should be optimized somehow...
+        tags: state.tags.map(renameTag).sort(),
+        filteredTags: state.filteredTags.map(renameTag).sort(),
+      };
+    case FILTER_TAGS:
+      return {
+        ...state,
+        filteredTags: state.tags.filter(
+          tag => tag.toLowerCase().match(action.searchTerm),
+        ),
       };
     default:
       return state;
@@ -61,3 +74,8 @@ export const _listTags = ShlinkApiClient => async dispatch => {
   }
 };
 export const listTags = () => _listTags(ShlinkApiClient);
+
+export const filterTags = searchTerm => ({
+  type: FILTER_TAGS,
+  searchTerm,
+});
diff --git a/src/utils/SearchField.js b/src/utils/SearchField.js
index 77a569b9..b2474647 100644
--- a/src/utils/SearchField.js
+++ b/src/utils/SearchField.js
@@ -2,10 +2,17 @@ import React from 'react';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import searchIcon from '@fortawesome/fontawesome-free-solid/faSearch';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import './SearchField.scss';
 
 const propTypes = {
   onChange: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  placeholder: PropTypes.string,
+};
+const defaultProps = {
+  className: '',
+  placeholder: 'Search...',
 };
 
 export default class SearchField extends React.Component {
@@ -31,12 +38,14 @@ export default class SearchField extends React.Component {
   }
 
   render() {
+    const { className, placeholder } = this.props;
+
     return (
-      <div className="search-field">
+      <div className={classnames('search-field', className)}>
         <input
           type="text"
           className="form-control form-control-lg search-field__input"
-          placeholder="Search..."
+          placeholder={placeholder}
           onChange={e => this.searchTermChanged(e.target.value)}
           value={this.state.searchTerm}
         />
@@ -55,3 +64,4 @@ export default class SearchField extends React.Component {
 }
 
 SearchField.propTypes = propTypes;
+SearchField.defaultProps = defaultProps;

From 84d012d7af484ca77f67ee0c684a40c53de9d947 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 19 Aug 2018 20:56:55 +0200
Subject: [PATCH 26/66] Fixed accessibility issue

---
 src/utils/TagsSelector.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/TagsSelector.js b/src/utils/TagsSelector.js
index 865f6d78..d0bab64f 100644
--- a/src/utils/TagsSelector.js
+++ b/src/utils/TagsSelector.js
@@ -20,7 +20,7 @@ export default function TagsSelector({ tags, onChange, placeholder, colorGenerat
     return (
       <span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
         {getTagDisplayValue(tag)}
-        {!disabled && <a className={classNameRemove} onClick={() => onRemove(key)} />}
+        {!disabled && <a className={classNameRemove} onClick={() => onRemove(key)}> </a>}
       </span>
     )
   };

From d84bf0193768bc5fc42068b07d27ca17de9b0750 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 20 Aug 2018 10:04:17 +0200
Subject: [PATCH 27/66] Replaced anchor by span to prevent accessibility error

---
 src/common/react-tagsinput.scss | 2 +-
 src/utils/TagsSelector.js       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/react-tagsinput.scss b/src/common/react-tagsinput.scss
index ef4cc8f4..29006fb3 100644
--- a/src/common/react-tagsinput.scss
+++ b/src/common/react-tagsinput.scss
@@ -36,7 +36,7 @@
   margin-left: 8px;
 }
 
-.react-tagsinput-tag a::before {
+.react-tagsinput-tag span::before {
   content: "\2715";
   color: #fff;
 }
diff --git a/src/utils/TagsSelector.js b/src/utils/TagsSelector.js
index d0bab64f..9bf36af6 100644
--- a/src/utils/TagsSelector.js
+++ b/src/utils/TagsSelector.js
@@ -20,7 +20,7 @@ export default function TagsSelector({ tags, onChange, placeholder, colorGenerat
     return (
       <span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
         {getTagDisplayValue(tag)}
-        {!disabled && <a className={classNameRemove} onClick={() => onRemove(key)}> </a>}
+        {!disabled && <span className={classNameRemove} onClick={() => onRemove(key)} />}
       </span>
     )
   };

From 2b373cc4af8463882a1a7fc4eb74024d39403f8a Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 20 Aug 2018 16:40:33 +0200
Subject: [PATCH 28/66] Added feature to export servers list

---
 package.json                            |  1 +
 src/index.scss                          |  3 +-
 src/servers/ServersDropdown.js          | 49 ++++++++++++++--------
 src/servers/services/ServersExporter.js | 54 +++++++++++++++++++++++++
 yarn.lock                               |  4 ++
 5 files changed, 94 insertions(+), 17 deletions(-)
 create mode 100644 src/servers/services/ServersExporter.js

diff --git a/package.json b/package.json
index 2e7b35c0..f3aec65b 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "bootstrap": "^4.1.1",
     "chart.js": "^2.7.2",
     "classnames": "^2.2.6",
+    "jsonexport": "^2.2.1",
     "moment": "^2.22.2",
     "promise": "8.0.1",
     "prop-types": "^15.6.2",
diff --git a/src/index.scss b/src/index.scss
index fc7cd163..dfeabf0a 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -21,7 +21,8 @@ body,
 .dropdown-item {
   cursor: pointer;
 }
-.dropdown-item.active {
+.dropdown-item.active,
+.dropdown-item:active {
   @extend .bg-main;
 }
 
diff --git a/src/servers/ServersDropdown.js b/src/servers/ServersDropdown.js
index 5f59d204..cd345cc7 100644
--- a/src/servers/ServersDropdown.js
+++ b/src/servers/ServersDropdown.js
@@ -1,4 +1,4 @@
-import { isEmpty, pick } from 'ramda';
+import { isEmpty, pick, values } from 'ramda';
 import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -6,27 +6,39 @@ import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from
 
 import { listServers } from './reducers/server';
 import { selectServer } from '../servers/reducers/selectedServer';
+import serversExporter from '../servers/services/ServersExporter';
+
+const defaultProps = {
+  serversExporter,
+};
 
 export class ServersDropdown extends React.Component {
   renderServers = () => {
-    const { servers, selectedServer, selectServer } = this.props;
+    const { servers, selectedServer, selectServer, serversExporter } = this.props;
 
     if (isEmpty(servers)) {
       return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>
     }
 
-    return Object.values(servers).map(({ name, id }) => (
-      <span key={id}>
-        <DropdownItem
-          tag={Link}
-          to={`/server/${id}/list-short-urls/1`}
-          active={selectedServer && selectedServer.id === id}
-          onClick={() => selectServer(id)} // FIXME This should be implicit
-        >
-          {name}
+    return (
+      <React.Fragment>
+        {values(servers).map(({ name, id }) => (
+          <DropdownItem
+            key={id}
+            tag={Link}
+            to={`/server/${id}/list-short-urls/1`}
+            active={selectedServer && selectedServer.id === id}
+            onClick={() => selectServer(id)} // FIXME This should be implicit
+          >
+            {name}
+          </DropdownItem>
+        ))}
+        <DropdownItem divider />
+        <DropdownItem onClick={serversExporter.exportServers}>
+          Export servers
         </DropdownItem>
-      </span>
-    ));
+      </React.Fragment>
+    );
   };
 
   componentDidMount() {
@@ -35,12 +47,17 @@ export class ServersDropdown extends React.Component {
 
   render() {
     return (
-      <UncontrolledDropdown nav>
+      <UncontrolledDropdown nav inNavbar>
         <DropdownToggle nav caret>Servers</DropdownToggle>
-        <DropdownMenu>{this.renderServers()}</DropdownMenu>
+        <DropdownMenu right>{this.renderServers()}</DropdownMenu>
       </UncontrolledDropdown>
     );
   }
 }
 
-export default connect(pick(['servers', 'selectedServer']), { listServers, selectServer })(ServersDropdown);
+ServersDropdown.defaultProps = defaultProps;
+
+export default connect(
+  pick(['servers', 'selectedServer']),
+  { listServers, selectServer }
+)(ServersDropdown);
diff --git a/src/servers/services/ServersExporter.js b/src/servers/services/ServersExporter.js
new file mode 100644
index 00000000..ce04f8c5
--- /dev/null
+++ b/src/servers/services/ServersExporter.js
@@ -0,0 +1,54 @@
+import Storage from '../../utils/Storage';
+import jsonexport from 'jsonexport/dist';
+import { dissoc, values } from 'ramda';
+
+const SERVERS_STORAGE_KEY = 'servers';
+
+const saveCsv = (window, csv) => {
+  const { navigator, document } = window;
+  const filename = 'shlink-servers.csv';
+  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+
+  // IE10 and IE11
+  if (navigator.msSaveBlob) {
+    navigator.msSaveBlob(blob, filename);
+    return;
+  }
+
+  // Modern browsers
+  const link = document.createElement('a');
+  const url = URL.createObjectURL(blob);
+  link.setAttribute('href', url);
+  link.setAttribute('download', filename);
+  link.style.visibility = 'hidden';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+export class ServersExporter {
+  constructor(storage, window, jsonexport) {
+    this.storage = storage;
+    this.window = window;
+    this.jsonexport = jsonexport;
+  }
+
+  exportServers = async () => {
+    const servers = values(this.storage.get(SERVERS_STORAGE_KEY) || {}).map(
+      dissoc('id')
+    );
+
+    try {
+      const csv = await new Promise((resolve, reject) => {
+        this.jsonexport(servers, (err, csv) => err ? reject(err) : resolve(csv));
+      });
+
+      saveCsv(this.window, csv);
+    } catch (e) {
+      // FIXME Handle error
+      console.error(e);
+    }
+  };
+}
+
+export default new ServersExporter(Storage, global.window, jsonexport);
diff --git a/yarn.lock b/yarn.lock
index eb2340f8..f9afa9c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4436,6 +4436,10 @@ json5@^0.5.0, json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
 
+jsonexport@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/jsonexport/-/jsonexport-2.2.1.tgz#b25a8a6e805e7179ef20460715ba2b92ebc32753"
+
 jsonfile@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"

From e0c1e13d1e9c75d537110882f4c7e88a9918e9e5 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 20 Aug 2018 16:44:46 +0200
Subject: [PATCH 29/66] Fixed tests

---
 test/servers/ServersDropdown.test.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/test/servers/ServersDropdown.test.js b/test/servers/ServersDropdown.test.js
index 3f8013f0..dde12a82 100644
--- a/test/servers/ServersDropdown.test.js
+++ b/test/servers/ServersDropdown.test.js
@@ -2,6 +2,7 @@ import { identity } from 'ramda';
 import React from 'react';
 import { ServersDropdown } from '../../src/servers/ServersDropdown';
 import { shallow } from 'enzyme';
+import { DropdownItem, DropdownToggle } from 'reactstrap';
 
 describe('<ServersDropdown />', () => {
   let wrapped;
@@ -13,10 +14,10 @@ describe('<ServersDropdown />', () => {
   afterEach(() => wrapped.unmount());
 
   it('contains the list of servers', () => {
-    expect(wrapped.find('DropdownItem').length).toEqual(servers.length);
+    expect(wrapped.find(DropdownItem).length).toEqual(servers.length + 2);
   });
 
   it('contains a toggle with proper title', () => {
-    expect(wrapped.find('DropdownToggle').length).toEqual(1);
+    expect(wrapped.find(DropdownToggle).length).toEqual(1);
   });
 });

From b72a5d0a66bddffb7c4b6a8c9a8ed60b1a15bbde Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 20 Aug 2018 16:53:48 +0200
Subject: [PATCH 30/66] Improved ServerDropdown.text.js

---
 src/servers/ServersDropdown.js       |  5 ++++-
 test/servers/ServersDropdown.test.js | 23 +++++++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/servers/ServersDropdown.js b/src/servers/ServersDropdown.js
index cd345cc7..68ecf85e 100644
--- a/src/servers/ServersDropdown.js
+++ b/src/servers/ServersDropdown.js
@@ -34,7 +34,10 @@ export class ServersDropdown extends React.Component {
           </DropdownItem>
         ))}
         <DropdownItem divider />
-        <DropdownItem onClick={serversExporter.exportServers}>
+        <DropdownItem
+          onClick={serversExporter.exportServers}
+          className="servers-dropdown__export-item"
+        >
           Export servers
         </DropdownItem>
       </React.Fragment>
diff --git a/test/servers/ServersDropdown.test.js b/test/servers/ServersDropdown.test.js
index dde12a82..6c8a90eb 100644
--- a/test/servers/ServersDropdown.test.js
+++ b/test/servers/ServersDropdown.test.js
@@ -13,11 +13,26 @@ describe('<ServersDropdown />', () => {
   });
   afterEach(() => wrapped.unmount());
 
-  it('contains the list of servers', () => {
-    expect(wrapped.find(DropdownItem).length).toEqual(servers.length + 2);
+  it('contains the list of servers', () =>
+    expect(wrapped.find(DropdownItem).filter('[to]')).toHaveLength(servers.length)
+  );
+
+  it('contains a toggle with proper title', () =>
+    expect(wrapped.find(DropdownToggle)).toHaveLength(1)
+  );
+
+  it('contains a button to export servers', () => {
+    const items = wrapped.find(DropdownItem);
+    expect(items.filter('[divider]')).toHaveLength(1);
+    expect(items.filter('.servers-dropdown__export-item')).toHaveLength(1);
   });
 
-  it('contains a toggle with proper title', () => {
-    expect(wrapped.find(DropdownToggle).length).toEqual(1);
+  it('contains a message when no servers exist yet', () => {
+    wrapped = shallow(<ServersDropdown servers={[]} listServers={identity} />);
+    const item = wrapped.find(DropdownItem);
+
+    expect(item).toHaveLength(1);
+    expect(item.prop('disabled')).toEqual(true);
+    expect(item.find('i').text()).toEqual('Add a server first...');
   });
 });

From 617a3b767bb7ff0e086b2e9f173013d0211f70b5 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 20 Aug 2018 17:08:15 +0200
Subject: [PATCH 31/66] Replace json-csv parsing library

---
 package.json                            |  2 +-
 src/servers/services/ServersExporter.js | 15 +++++++--------
 yarn.lock                               |  8 ++++----
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index f3aec65b..0cac2465 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "bootstrap": "^4.1.1",
     "chart.js": "^2.7.2",
     "classnames": "^2.2.6",
-    "jsonexport": "^2.2.1",
+    "csvjson": "^5.1.0",
     "moment": "^2.22.2",
     "promise": "8.0.1",
     "prop-types": "^15.6.2",
diff --git a/src/servers/services/ServersExporter.js b/src/servers/services/ServersExporter.js
index ce04f8c5..85235e5a 100644
--- a/src/servers/services/ServersExporter.js
+++ b/src/servers/services/ServersExporter.js
@@ -1,6 +1,6 @@
 import Storage from '../../utils/Storage';
-import jsonexport from 'jsonexport/dist';
-import { dissoc, values } from 'ramda';
+import { dissoc, head, keys, values } from 'ramda';
+import csvjson from 'csvjson';
 
 const SERVERS_STORAGE_KEY = 'servers';
 
@@ -27,10 +27,10 @@ const saveCsv = (window, csv) => {
 };
 
 export class ServersExporter {
-  constructor(storage, window, jsonexport) {
+  constructor(storage, window, csvjson) {
     this.storage = storage;
     this.window = window;
-    this.jsonexport = jsonexport;
+    this.csvjson = csvjson;
   }
 
   exportServers = async () => {
@@ -39,10 +39,9 @@ export class ServersExporter {
     );
 
     try {
-      const csv = await new Promise((resolve, reject) => {
-        this.jsonexport(servers, (err, csv) => err ? reject(err) : resolve(csv));
+      const csv = this.csvjson.toCSV(servers, {
+        headers: keys(head(servers)).join(',')
       });
-
       saveCsv(this.window, csv);
     } catch (e) {
       // FIXME Handle error
@@ -51,4 +50,4 @@ export class ServersExporter {
   };
 }
 
-export default new ServersExporter(Storage, global.window, jsonexport);
+export default new ServersExporter(Storage, global.window, csvjson);
diff --git a/yarn.lock b/yarn.lock
index f9afa9c7..83c8e9b1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2002,6 +2002,10 @@ cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
   dependencies:
     cssom "0.3.x"
 
+csvjson@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/csvjson/-/csvjson-5.1.0.tgz#f055660824ebfb44dc089d901267fdc5d9e8414a"
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -4436,10 +4440,6 @@ json5@^0.5.0, json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
 
-jsonexport@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/jsonexport/-/jsonexport-2.2.1.tgz#b25a8a6e805e7179ef20460715ba2b92ebc32753"
-
 jsonfile@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"

From ac52f55c5e81701995903781a6a66a9d41c26214 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 20 Aug 2018 17:31:45 +0200
Subject: [PATCH 32/66] Added button to import servers from CSV file

---
 src/servers/CreateServer.js   | 49 ++++++++++++++++++++++++++++-------
 src/servers/CreateServer.scss |  6 +++++
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/servers/CreateServer.js b/src/servers/CreateServer.js
index 4f3331c5..6cda5046 100644
--- a/src/servers/CreateServer.js
+++ b/src/servers/CreateServer.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { createServer } from './reducers/server';
 import { resetSelectedServer } from './reducers/selectedServer';
 import { v4 as uuid } from 'uuid';
-
+import { UncontrolledTooltip } from 'reactstrap';
 import './CreateServer.scss';
 
 export class CreateServer extends React.Component {
@@ -14,20 +14,31 @@ export class CreateServer extends React.Component {
     apiKey: '',
   };
 
+  submit = e => {
+    e.preventDefault();
+
+    const { createServer, history: { push } } = this.props;
+    const server = assoc('id', uuid(), this.state);
+
+    createServer(server);
+    push(`/server/${server.id}/list-short-urls/1`)
+  };
+
+  constructor(props) {
+    super(props);
+    this.fileRef = React.createRef();
+  }
+
   componentDidMount() {
     this.props.resetSelectedServer();
   }
 
   render() {
-    const submit = e => {
-      e.preventDefault();
-      const server = assoc('id', uuid(), this.state);
-      this.props.createServer(server);
-      this.props.history.push(`/server/${server.id}/list-short-urls/1`)
-    };
     const renderInputGroup = (id, placeholder, type = 'text') =>
       <div className="form-group row">
-        <label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">{placeholder}:</label>
+        <label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">
+          {placeholder}:
+        </label>
         <div className="col-lg-11 col-md-10">
           <input
             type={type}
@@ -43,13 +54,31 @@ export class CreateServer extends React.Component {
 
     return (
       <div className="create-server">
-        <form onSubmit={submit}>
+        <form onSubmit={this.submit}>
           {renderInputGroup('name', 'Name')}
           {renderInputGroup('url', 'URL', 'url')}
           {renderInputGroup('apiKey', 'API key')}
 
           <div className="text-right">
-            <button className="btn btn-primary btn-outline-primary">Create server</button>
+            <button
+              type="button"
+              className="btn btn-outline-secondary mr-2"
+              onClick={() => this.fileRef.current.click()}
+              id="importBtn"
+            >
+              Import from file
+            </button>
+            <UncontrolledTooltip placement="top" target="importBtn">
+              You can create servers by importing a CSV file with columns "name", "apiKey" and "url"
+            </UncontrolledTooltip>
+            <input
+              type="file"
+              onChange={file => console.log(file)}
+              accept="text/csv"
+              className="create-server__csv-select"
+              ref={this.fileRef}
+            />
+            <button className="btn btn-outline-primary">Create server</button>
           </div>
         </form>
       </div>
diff --git a/src/servers/CreateServer.scss b/src/servers/CreateServer.scss
index f4ade34f..40335df8 100644
--- a/src/servers/CreateServer.scss
+++ b/src/servers/CreateServer.scss
@@ -12,3 +12,9 @@
     text-align: right;
   }
 }
+
+.create-server__csv-select {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+}

From 9b063a4616d4d39a6b0d009402f7ce47f561dcf6 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Tue, 21 Aug 2018 20:33:12 +0200
Subject: [PATCH 33/66] Implemented importing servers from CSV file

---
 src/servers/CreateServer.js             | 52 ++++++++++----------
 src/servers/helpers/ImportServersBtn.js | 63 +++++++++++++++++++++++++
 src/servers/reducers/server.js          | 12 ++---
 src/servers/services/ServersImporter.js | 27 +++++++++++
 src/servers/services/ServersService.js  | 37 ++++++++-------
 src/utils/ColorGenerator.js             |  3 --
 test/servers/reducers/server.test.js    | 13 -----
 7 files changed, 140 insertions(+), 67 deletions(-)
 create mode 100644 src/servers/helpers/ImportServersBtn.js
 create mode 100644 src/servers/services/ServersImporter.js

diff --git a/src/servers/CreateServer.js b/src/servers/CreateServer.js
index 6cda5046..5e8e7fe7 100644
--- a/src/servers/CreateServer.js
+++ b/src/servers/CreateServer.js
@@ -1,34 +1,33 @@
-import { assoc, pick } from 'ramda';
+import { assoc, dissoc, pick, pipe } from 'ramda';
 import React from 'react';
 import { connect } from 'react-redux';
 import { createServer } from './reducers/server';
 import { resetSelectedServer } from './reducers/selectedServer';
 import { v4 as uuid } from 'uuid';
-import { UncontrolledTooltip } from 'reactstrap';
 import './CreateServer.scss';
+import ImportServersBtn from './helpers/ImportServersBtn';
 
 export class CreateServer extends React.Component {
   state = {
     name: '',
     url: '',
     apiKey: '',
+    serversImported: false,
   };
 
   submit = e => {
     e.preventDefault();
 
     const { createServer, history: { push } } = this.props;
-    const server = assoc('id', uuid(), this.state);
+    const server = pipe(
+      assoc('id', uuid()),
+      dissoc('serversImported')
+    )(this.state);
 
     createServer(server);
     push(`/server/${server.id}/list-short-urls/1`)
   };
 
-  constructor(props) {
-    super(props);
-    this.fileRef = React.createRef();
-  }
-
   componentDidMount() {
     this.props.resetSelectedServer();
   }
@@ -60,30 +59,29 @@ export class CreateServer extends React.Component {
           {renderInputGroup('apiKey', 'API key')}
 
           <div className="text-right">
-            <button
-              type="button"
-              className="btn btn-outline-secondary mr-2"
-              onClick={() => this.fileRef.current.click()}
-              id="importBtn"
-            >
-              Import from file
-            </button>
-            <UncontrolledTooltip placement="top" target="importBtn">
-              You can create servers by importing a CSV file with columns "name", "apiKey" and "url"
-            </UncontrolledTooltip>
-            <input
-              type="file"
-              onChange={file => console.log(file)}
-              accept="text/csv"
-              className="create-server__csv-select"
-              ref={this.fileRef}
-            />
+            <ImportServersBtn onImport={() => {
+              this.setState({ serversImported: true });
+              setTimeout(() => this.setState({ serversImported: false }), 4000);
+            }} />
             <button className="btn btn-outline-primary">Create server</button>
           </div>
+
+          {this.state.serversImported && (
+            <div className="row">
+              <div className="col-md-10 offset-md-1">
+                <div className="p-2 mt-3 bg-main text-white text-center">
+                  Servers properly imported. You can now select one from the list :)
+                </div>
+              </div>
+            </div>
+          )}
         </form>
       </div>
     );
   }
 }
 
-export default connect(pick(['selectedServer']), {createServer, resetSelectedServer })(CreateServer);
+export default connect(
+  pick(['selectedServer']),
+  {createServer, resetSelectedServer }
+)(CreateServer);
diff --git a/src/servers/helpers/ImportServersBtn.js b/src/servers/helpers/ImportServersBtn.js
new file mode 100644
index 00000000..9d43041f
--- /dev/null
+++ b/src/servers/helpers/ImportServersBtn.js
@@ -0,0 +1,63 @@
+import React  from 'react';
+import { connect } from 'react-redux';
+import { UncontrolledTooltip } from 'reactstrap';
+import serversImporter from '../services/ServersImporter';
+import { createServers } from '../reducers/server';
+import { assoc } from 'ramda';
+import { v4 as uuid } from 'uuid';
+import PropTypes from 'prop-types';
+
+const defaultProps = {
+  serversImporter,
+};
+const propTypes = {
+  onChange: PropTypes.func,
+};
+
+export class ImportServersBtn extends React.Component {
+  constructor(props) {
+    super(props);
+    this.fileRef = React.createRef();
+  }
+
+  render() {
+    const { serversImporter, onImport } = this.props;
+    const onChange = e => serversImporter.importServersFromFile(e.target.files[0]).then(
+      servers => {
+        const { createServers } = this.props;
+        const serversWithIds = servers.map(server => assoc('id', uuid(), server));
+        createServers(serversWithIds);
+        onImport(serversWithIds);
+      }
+    );
+
+    return (
+      <React.Fragment>
+        <button
+          type="button"
+          className="btn btn-outline-secondary mr-2"
+          onClick={() => this.fileRef.current.click()}
+          id="importBtn"
+        >
+          Import from file
+        </button>
+
+        <UncontrolledTooltip placement="top" target="importBtn">
+          You can create servers by importing a CSV file with columns "name", "apiKey" and "url"
+        </UncontrolledTooltip>
+        <input
+          type="file"
+          onChange={onChange}
+          accept="text/csv"
+          className="create-server__csv-select"
+          ref={this.fileRef}
+        />
+      </React.Fragment>
+    );
+  }
+}
+
+ImportServersBtn.defaultProps = defaultProps;
+ImportServersBtn.propTypes = propTypes;
+
+export default connect(null, { createServers })(ImportServersBtn);
diff --git a/src/servers/reducers/server.js b/src/servers/reducers/server.js
index 08c86c2e..adc6e895 100644
--- a/src/servers/reducers/server.js
+++ b/src/servers/reducers/server.js
@@ -2,17 +2,11 @@ import ServersService from '../services/ServersService';
 import { curry } from 'ramda';
 
 export const FETCH_SERVERS = 'shlink/servers/FETCH_SERVERS';
-export const CREATE_SERVER = 'shlink/servers/CREATE_SERVER';
-export const DELETE_SERVER = 'shlink/servers/DELETE_SERVER';
 
 export default function reducer(state = {}, action) {
   switch (action.type) {
     case FETCH_SERVERS:
-    case DELETE_SERVER:
       return action.servers;
-    case CREATE_SERVER:
-      const server = action.server;
-      return { ...state, [server.id]: server };
     default:
       return state;
   }
@@ -35,3 +29,9 @@ export const _deleteServer = (ServersService, server) => {
   return _listServers(ServersService);
 };
 export const deleteServer = curry(_deleteServer)(ServersService);
+
+export const _createServers = (ServersService, servers) => {
+  ServersService.createServers(servers);
+  return _listServers(ServersService);
+};
+export const createServers = curry(_createServers)(ServersService);
diff --git a/src/servers/services/ServersImporter.js b/src/servers/services/ServersImporter.js
new file mode 100644
index 00000000..8e2c364e
--- /dev/null
+++ b/src/servers/services/ServersImporter.js
@@ -0,0 +1,27 @@
+import csvjson from 'csvjson';
+
+export class ServersImporter {
+  constructor(csvjson) {
+    this.csvjson = csvjson;
+  }
+
+  importServersFromFile = (file) => {
+    if (!file || file.type !== 'text/csv') {
+      return Promise.reject('No file provided or file is not a CSV');
+    }
+
+    const reader = new FileReader();
+    return new Promise(resolve => {
+      reader.onloadend = e => {
+        const content = e.target.result;
+        const servers = this.csvjson.toObject(content);
+
+        resolve(servers);
+      };
+      reader.readAsText(file);
+    });
+  };
+}
+
+const serversImporter = new ServersImporter(csvjson);
+export default serversImporter;
diff --git a/src/servers/services/ServersService.js b/src/servers/services/ServersService.js
index 6fda7987..35f7f9b5 100644
--- a/src/servers/services/ServersService.js
+++ b/src/servers/services/ServersService.js
@@ -1,5 +1,5 @@
 import Storage from '../../utils/Storage';
-import { dissoc } from 'ramda';
+import { assoc, dissoc, reduce } from 'ramda';
 
 const SERVERS_STORAGE_KEY = 'servers';
 
@@ -8,25 +8,26 @@ export class ServersService {
     this.storage = storage;
   }
 
-  listServers = () => {
-    return this.storage.get(SERVERS_STORAGE_KEY) || {};
+  listServers = () => this.storage.get(SERVERS_STORAGE_KEY) || {};
+
+  findServerById = serverId => this.listServers()[serverId];
+
+  createServer = server => this.createServers([server]);
+
+  createServers = servers => {
+    const allServers = reduce(
+      (serversObj, server) => assoc(server.id, server, serversObj),
+      this.listServers(),
+      servers
+    );
+    this.storage.set(SERVERS_STORAGE_KEY, allServers);
   };
 
-  findServerById = serverId => {
-    const servers = this.listServers();
-    return servers[serverId];
-  };
-
-  createServer = server => {
-    const servers = this.listServers();
-    servers[server.id] = server;
-    this.storage.set(SERVERS_STORAGE_KEY, servers);
-  };
-
-  deleteServer = server => {
-    const servers = dissoc(server.id, this.listServers());
-    this.storage.set(SERVERS_STORAGE_KEY, servers);
-  };
+  deleteServer = server =>
+    this.storage.set(
+      SERVERS_STORAGE_KEY,
+      dissoc(server.id, this.listServers())
+    );
 }
 
 export default new ServersService(Storage);
diff --git a/src/utils/ColorGenerator.js b/src/utils/ColorGenerator.js
index d7a4f9e2..126df448 100644
--- a/src/utils/ColorGenerator.js
+++ b/src/utils/ColorGenerator.js
@@ -15,9 +15,6 @@ export class ColorGenerator {
   constructor(storage) {
     this.storage = storage;
     this.colors = this.storage.get('colors') || {};
-
-    this.getColorForKey = this.getColorForKey.bind(this);
-    this.setColorForKey = this.setColorForKey.bind(this);
   }
 
   getColorForKey = key => {
diff --git a/test/servers/reducers/server.test.js b/test/servers/reducers/server.test.js
index cd3f24b1..7fa70143 100644
--- a/test/servers/reducers/server.test.js
+++ b/test/servers/reducers/server.test.js
@@ -2,8 +2,6 @@ import reduce, {
   _createServer,
   _deleteServer,
   _listServers,
-  CREATE_SERVER,
-  DELETE_SERVER,
   FETCH_SERVERS,
 } from '../../../src/servers/reducers/server';
 import * as sinon from 'sinon';
@@ -24,17 +22,6 @@ describe('serverReducer', () => {
       expect(reduce({}, { type: FETCH_SERVERS, servers })).toEqual(servers)
     );
 
-    it('returns servers when action is DELETE_SERVER', () =>
-      expect(reduce({}, { type: DELETE_SERVER, servers })).toEqual(servers)
-    );
-
-    it('adds server to list when action is CREATE_SERVER', () => {
-      const server = { id: 'abc123' };
-      expect(reduce({}, { type: CREATE_SERVER, server })).toEqual({
-        [server.id]: server
-      })
-    });
-
     it('returns default when action is unknown', () =>
       expect(reduce({}, { type: 'unknown' })).toEqual({})
     );

From c092f290ecb3b2d0674f614ef465a8df0f7b91a9 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Wed, 22 Aug 2018 10:44:24 +0200
Subject: [PATCH 34/66] Added integration with scrutinizer

---
 .scrutinizer.yml |  2 ++
 .travis.yml      |  5 ++++-
 README.md        |  6 +++++-
 package.json     |  8 ++++++++
 yarn.lock        | 10 ++++++++++
 5 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 .scrutinizer.yml

diff --git a/.scrutinizer.yml b/.scrutinizer.yml
new file mode 100644
index 00000000..87fda201
--- /dev/null
+++ b/.scrutinizer.yml
@@ -0,0 +1,2 @@
+tools:
+  external_code_coverage: true
diff --git a/.travis.yml b/.travis.yml
index e5689640..5fb72bc5 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -13,7 +13,10 @@ install:
 
 script:
   # - yarn inspect
-  - yarn test
+  - yarn test --coverage
   - yarn build # Make sure the app can be built without errors
 
+after_script:
+  - yarn ocular coverage/clover.xml
+
 sudo: false
diff --git a/README.md b/README.md
index 50ec89ef..88727204 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,10 @@
 # shlink-web-client
 
-[![Build Status](https://travis-ci.org/shlinkio/shlink-web-client.svg?branch=master)](https://travis-ci.org/shlinkio/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)
+[![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)
 
 A ReactJS-based progressive web application for [Shlink](https://shlink.io).
 
diff --git a/package.json b/package.json
index 0cac2465..a36e97c1 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "jest": "20.0.4",
     "node-sass": "^4.9.0",
     "object-assign": "4.1.1",
+    "ocular.js": "^0.1.0",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.8",
     "raf": "3.4.0",
@@ -85,6 +86,13 @@
     "whatwg-fetch": "2.0.3"
   },
   "jest": {
+    "coverageReporters": [
+      "text",
+      "text-summary",
+      "clover",
+      "html"
+    ],
+    "coverageDirectory": "<rootDir>/coverage",
     "collectCoverageFrom": [
       "src/**/*.{js,jsx,mjs}"
     ],
diff --git a/yarn.lock b/yarn.lock
index 83c8e9b1..262894d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1691,6 +1691,10 @@ commander@^2.11.0:
   version "2.17.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.0.tgz#9d07b25e2a6f198b76d8b756a0e8a9604a6a1a60"
 
+commander@^2.9.0:
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -5313,6 +5317,12 @@ obuf@^1.0.0, obuf@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
 
+ocular.js@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/ocular.js/-/ocular.js-0.1.0.tgz#3a146ab59864e97ffb12f83e1d8f03b9abf9a866"
+  dependencies:
+    commander "^2.9.0"
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"

From a5865e6cec9752c8a69c537037884400570559c1 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Wed, 22 Aug 2018 22:38:05 +0200
Subject: [PATCH 35/66] Improved ShlinkApiClient test

---
 src/api/ShlinkApiClient.js       |   2 +-
 test/api/ShlinkApiClient.test.js | 159 +++++++++++++++++++++++++++++--
 2 files changed, 150 insertions(+), 11 deletions(-)

diff --git a/src/api/ShlinkApiClient.js b/src/api/ShlinkApiClient.js
index ee12e094..fea32406 100644
--- a/src/api/ShlinkApiClient.js
+++ b/src/api/ShlinkApiClient.js
@@ -57,7 +57,7 @@ export class ShlinkApiClient {
   deleteTags = tags =>
     this._performRequest('/tags', 'DELETE', { tags })
       .then(() => ({ tags }))
-      .catch(e => this._handleAuthError(e, this.deleteTag, []));
+      .catch(e => this._handleAuthError(e, this.deleteTags, [tags]));
 
   editTag = (oldName, newName) =>
     this._performRequest('/tags', 'PUT', {}, { oldName, newName })
diff --git a/test/api/ShlinkApiClient.test.js b/test/api/ShlinkApiClient.test.js
index 320136f6..fe524726 100644
--- a/test/api/ShlinkApiClient.test.js
+++ b/test/api/ShlinkApiClient.test.js
@@ -1,26 +1,165 @@
 import { ShlinkApiClient } from '../../src/api/ShlinkApiClient'
+import sinon from 'sinon';
+import { head, last } from 'ramda';
 
 describe('ShlinkApiClient', () => {
-  const createApiClient = extraData => {
-    const axiosMock = () =>
-      Promise.resolve({
-        data: { token: 'foo', ...extraData },
-        headers: { authorization: 'Bearer abc123' }
-      });
-
-    return new ShlinkApiClient(axiosMock);
-  };
+  const createAxiosMock = extraData => () =>
+    Promise.resolve({
+     headers: { authorization: 'Bearer abc123' },
+      data: { token: 'abc123' },
+      ...extraData,
+    });
+  const createApiClient = extraData =>
+    new ShlinkApiClient(createAxiosMock(extraData));
 
   describe('listShortUrls', () => {
     it('properly returns short URLs list', async () => {
       const expectedList = ['foo', 'bar'];
 
       const apiClient = createApiClient({
-        shortUrls: expectedList
+        data: {
+          shortUrls: expectedList,
+        },
       });
 
       const actualList = await apiClient.listShortUrls();
       expect(expectedList).toEqual(actualList);
     });
   });
+
+  describe('createShortUrl', () => {
+    const shortUrl = {
+      bar: 'foo',
+    };
+
+    it('returns create short URL', async () => {
+      const apiClient = createApiClient({ data: shortUrl });
+      const result = await apiClient.createShortUrl({});
+      expect(result).toEqual(shortUrl);
+    });
+
+    it('removes all empty options', async () => {
+      const axiosSpy = sinon.spy(createAxiosMock({ data: shortUrl }));
+      const apiClient = new ShlinkApiClient(axiosSpy);
+
+      await apiClient.createShortUrl(
+        { foo: 'bar', empty: undefined, anotherEmpty: null }
+      );
+      const lastAxiosCall = last(axiosSpy.getCalls());
+      const axiosArgs = head(lastAxiosCall.args);
+
+      expect(axiosArgs.data).toEqual({ foo: 'bar' });
+    });
+  });
+
+  describe('getShortUrlVisits', () => {
+    it('properly returns short URL visits', async () => {
+      const expectedVisits = ['foo', 'bar'];
+      const axiosSpy = sinon.spy(createAxiosMock({
+        data: {
+          visits: {
+            data: expectedVisits,
+          },
+        },
+      }));
+      const apiClient = new ShlinkApiClient(axiosSpy);
+
+      const actualVisits = await apiClient.getShortUrlVisits('abc123', {});
+      const lastAxiosCall = last(axiosSpy.getCalls());
+      const axiosArgs = head(lastAxiosCall.args);
+
+      expect(expectedVisits).toEqual(actualVisits);
+      expect(axiosArgs.url).toContain('/short-codes/abc123/visits');
+      expect(axiosArgs.method).toEqual('GET');
+    });
+  });
+
+  describe('getShortUrl', () => {
+    it('properly returns short URL', async () => {
+      const expectedShortUrl = { foo: 'bar' };
+      const axiosSpy = sinon.spy(createAxiosMock({
+        data: expectedShortUrl,
+      }));
+      const apiClient = new ShlinkApiClient(axiosSpy);
+
+      const result = await apiClient.getShortUrl('abc123');
+      const lastAxiosCall = last(axiosSpy.getCalls());
+      const axiosArgs = head(lastAxiosCall.args);
+
+      expect(expectedShortUrl).toEqual(result);
+      expect(axiosArgs.url).toContain('/short-codes/abc123');
+      expect(axiosArgs.method).toEqual('GET');
+    });
+  });
+
+  describe('updateShortUrlTags', () => {
+    it('properly updates short URL tags', async () => {
+      const expectedTags = ['foo', 'bar'];
+      const axiosSpy = sinon.spy(createAxiosMock({
+        data: { tags: expectedTags },
+      }));
+      const apiClient = new ShlinkApiClient(axiosSpy);
+
+      const result = await apiClient.updateShortUrlTags('abc123', expectedTags);
+      const lastAxiosCall = last(axiosSpy.getCalls());
+      const axiosArgs = head(lastAxiosCall.args);
+
+      expect(expectedTags).toEqual(result);
+      expect(axiosArgs.url).toContain('/short-codes/abc123/tags');
+      expect(axiosArgs.method).toEqual('PUT');
+    });
+  });
+
+  describe('listTags', () => {
+    it('properly returns list of tags', async () => {
+      const expectedTags = ['foo', 'bar'];
+      const axiosSpy = sinon.spy(createAxiosMock({
+        data: {
+          tags: { data: expectedTags }
+        },
+      }));
+      const apiClient = new ShlinkApiClient(axiosSpy);
+
+      const result = await apiClient.listTags();
+      const lastAxiosCall = last(axiosSpy.getCalls());
+      const axiosArgs = head(lastAxiosCall.args);
+
+      expect(expectedTags).toEqual(result);
+      expect(axiosArgs.url).toContain('/tags');
+      expect(axiosArgs.method).toEqual('GET');
+    });
+  });
+
+  describe('deleteTags', () => {
+    it('properly deletes provided tags', async () => {
+      const tags = ['foo', 'bar'];
+      const axiosSpy = sinon.spy(createAxiosMock({}));
+      const apiClient = new ShlinkApiClient(axiosSpy);
+
+      await apiClient.deleteTags(tags);
+      const lastAxiosCall = last(axiosSpy.getCalls());
+      const axiosArgs = head(lastAxiosCall.args);
+
+      expect(axiosArgs.url).toContain('/tags');
+      expect(axiosArgs.method).toEqual('DELETE');
+      expect(axiosArgs.params).toEqual({ tags });
+    });
+  });
+
+  describe('editTag', () => {
+    it('properly deletes provided tags', async () => {
+      const oldName = 'foo';
+      const newName = 'bar';
+      const axiosSpy = sinon.spy(createAxiosMock({}));
+      const apiClient = new ShlinkApiClient(axiosSpy);
+
+      await apiClient.editTag(oldName, newName);
+      const lastAxiosCall = last(axiosSpy.getCalls());
+      const axiosArgs = head(lastAxiosCall.args);
+
+      expect(axiosArgs.url).toContain('/tags');
+      expect(axiosArgs.method).toEqual('PUT');
+      expect(axiosArgs.data).toEqual({ oldName, newName });
+    });
+  });
 });

From 5fcb5735d63d84f30eb59df11100a93c57887ebe Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Thu, 23 Aug 2018 09:34:26 +0200
Subject: [PATCH 36/66] Manually defined coverage reporters on commands, to nto
 break integration with webstorm

---
 .travis.yml  |  2 +-
 package.json | 10 +++-------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 5fb72bc5..e67f3fd7 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -13,7 +13,7 @@ install:
 
 script:
   # - yarn inspect
-  - yarn test --coverage
+  - yarn test:ci
   - yarn build # Make sure the app can be built without errors
 
 after_script:
diff --git a/package.json b/package.json
index a36e97c1..e2f3d2bb 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,9 @@
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
-    "test": "node scripts/test.js --env=jsdom --colors"
+    "test": "node scripts/test.js --env=jsdom --colors",
+    "test:ci": "yarn test --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=clover",
+    "test:pretty": "yarn test --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=html"
   },
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8",
@@ -86,12 +88,6 @@
     "whatwg-fetch": "2.0.3"
   },
   "jest": {
-    "coverageReporters": [
-      "text",
-      "text-summary",
-      "clover",
-      "html"
-    ],
     "coverageDirectory": "<rootDir>/coverage",
     "collectCoverageFrom": [
       "src/**/*.{js,jsx,mjs}"

From 3df5fd12d34e630dd91410c38f70c7a8794c26e7 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Thu, 23 Aug 2018 09:49:13 +0200
Subject: [PATCH 37/66] Added serve as dev dependency

---
 docker-compose.yml |   1 +
 package.json       |   1 +
 yarn.lock          | 116 +++++++++++++++++++++++++++++++++++++++++----
 3 files changed, 109 insertions(+), 9 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index c3cca438..8074ebd0 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -10,3 +10,4 @@ services:
     ports:
       - "3000:3000"
       - "56745:56745"
+      - "5000:5000"
diff --git a/package.json b/package.json
index e2f3d2bb..b57dd202 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "react-dev-utils": "^5.0.1",
     "resolve": "1.6.0",
     "sass-loader": "^7.0.1",
+    "serve": "^10.0.0",
     "sinon": "^6.1.5",
     "style-loader": "0.19.0",
     "sw-precache-webpack-plugin": "0.11.4",
diff --git a/yarn.lock b/yarn.lock
index 262894d5..29189cc7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -51,6 +51,10 @@
   version "10.5.6"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.5.6.tgz#1640f021dd0eaf12e731e54198c12ad2e020dc8e"
 
+"@zeit/schemas@2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@zeit/schemas/-/schemas-2.1.1.tgz#bca9d84df177c85f2d2a7dad37512f384761b23d"
+
 abab@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
@@ -112,6 +116,15 @@ ajv-keywords@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"
 
+ajv@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.5.3.tgz#71a569d189ecf4f4f321224fecb166f071dd90f9"
+  dependencies:
+    fast-deep-equal "^2.0.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
 ajv@^4.9.1:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
@@ -213,6 +226,10 @@ aproba@^1.0.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
 
+arch@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.1.tgz#8f5c2731aa35a30929221bb0640eed65175ec84e"
+
 are-we-there-yet@~1.1.2:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
@@ -220,6 +237,10 @@ are-we-there-yet@~1.1.2:
     delegates "^1.0.0"
     readable-stream "^2.0.6"
 
+arg@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-2.0.0.tgz#c06e7ff69ab05b3a4a03ebe0407fac4cba657545"
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -1177,7 +1198,7 @@ bootstrap@^4.1.1:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.3.tgz#0eb371af2c8448e8c210411d0cb824a6409a12be"
 
-boxen@^1.2.1:
+boxen@1.3.0, boxen@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
   dependencies:
@@ -1444,7 +1465,7 @@ chalk@1.1.3, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1:
+chalk@2.4.1, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
   dependencies:
@@ -1579,6 +1600,13 @@ cli-width@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
 
+clipboardy@1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-1.2.3.tgz#0526361bf78724c1f20be248d428e365433c07ef"
+  dependencies:
+    arch "^2.1.0"
+    execa "^0.8.0"
+
 cliui@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@@ -2735,6 +2763,18 @@ execa@^0.7.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execa@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.8.0.tgz#d8d76bbc1b55217ed190fd6dd49d3c774ecfc8da"
+  dependencies:
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
@@ -2877,6 +2917,12 @@ fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
+fast-url-parser@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/fast-url-parser/-/fast-url-parser-1.1.3.tgz#f4af3ea9f34d8a271cf58ad2b3759f431f0b318d"
+  dependencies:
+    punycode "^1.3.2"
+
 fastparse@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
@@ -3210,6 +3256,10 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
+glob-slash@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/glob-slash/-/glob-slash-1.0.0.tgz#fe52efa433233f74a2fe64c7abb9bc848202ab95"
+
 glob@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
@@ -4855,6 +4905,16 @@ miller-rabin@^4.0.0:
   version "1.35.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.35.0.tgz#0569d657466491283709663ad379a99b90d9ab47"
 
+mime-db@~1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.33.0.tgz#a3492050a5cb9b63450541e39d9788d2272783db"
+
+mime-types@2.1.18:
+  version "2.1.18"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.18.tgz#6f323f60a83d11146f831ff11fd66e2fe5503bb8"
+  dependencies:
+    mime-db "~1.33.0"
+
 mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.7:
   version "2.1.19"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.19.tgz#71e464537a7ef81c15f2db9d97e913fc0ff606f0"
@@ -4881,7 +4941,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
 
-"minimatch@2 || 3", minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
+"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   dependencies:
@@ -5526,7 +5586,7 @@ path-is-absolute@^1.0.0, path-is-absolute@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
 
-path-is-inside@^1.0.1, path-is-inside@^1.0.2:
+path-is-inside@1.0.2, path-is-inside@^1.0.1, path-is-inside@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
 
@@ -5542,6 +5602,10 @@ path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
 
+path-to-regexp@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.2.1.tgz#90b617025a16381a879bc82a38d4e8bdeb2bcf45"
+
 path-to-regexp@^1.0.1, path-to-regexp@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
@@ -6011,7 +6075,7 @@ punycode@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
 
-punycode@^1.2.4, punycode@^1.4.1:
+punycode@^1.2.4, punycode@^1.3.2, punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
@@ -6096,7 +6160,7 @@ randomfill@^1.0.3:
     randombytes "^2.0.5"
     safe-buffer "^5.1.0"
 
-range-parser@^1.0.3, range-parser@~1.2.0:
+range-parser@1.2.0, range-parser@^1.0.3, range-parser@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
 
@@ -6460,14 +6524,14 @@ regexpu-core@^2.0.0:
     regjsgen "^0.2.0"
     regjsparser "^0.1.4"
 
-registry-auth-token@^3.0.1:
+registry-auth-token@3.3.2, registry-auth-token@^3.0.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.2.tgz#851fd49038eecb586911115af845260eec983f20"
   dependencies:
     rc "^1.1.6"
     safe-buffer "^5.0.1"
 
-registry-url@^3.0.3:
+registry-url@3.1.0, registry-url@^3.0.3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-3.1.0.tgz#3d4ef870f73dde1d77f0cf9a381432444e174942"
   dependencies:
@@ -6801,6 +6865,20 @@ send@0.16.2:
     range-parser "~1.2.0"
     statuses "~1.4.0"
 
+serve-handler@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/serve-handler/-/serve-handler-5.0.0.tgz#96d6cb86b5be52ada878287696b23174c7902e95"
+  dependencies:
+    bytes "3.0.0"
+    content-disposition "0.5.2"
+    fast-url-parser "1.1.3"
+    glob-slash "1.0.0"
+    mime-types "2.1.18"
+    minimatch "3.0.4"
+    path-is-inside "1.0.2"
+    path-to-regexp "2.2.1"
+    range-parser "1.2.0"
+
 serve-index@^1.7.2:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
@@ -6822,6 +6900,19 @@ serve-static@1.13.2:
     parseurl "~1.3.2"
     send "0.16.2"
 
+serve@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/serve/-/serve-10.0.0.tgz#4d640167c88f07f1f730a52bb992e94d2e4a174c"
+  dependencies:
+    "@zeit/schemas" "2.1.1"
+    ajv "6.5.3"
+    arg "2.0.0"
+    boxen "1.3.0"
+    chalk "2.4.1"
+    clipboardy "1.2.3"
+    serve-handler "5.0.0"
+    update-check "1.5.2"
+
 serviceworker-cache-polyfill@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/serviceworker-cache-polyfill/-/serviceworker-cache-polyfill-4.0.0.tgz#de19ee73bef21ab3c0740a37b33db62464babdeb"
@@ -7572,6 +7663,13 @@ upath@^1.0.5:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd"
 
+update-check@1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/update-check/-/update-check-1.5.2.tgz#2fe09f725c543440b3d7dabe8971f2d5caaedc28"
+  dependencies:
+    registry-auth-token "3.3.2"
+    registry-url "3.1.0"
+
 update-notifier@^2.3.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.5.0.tgz#d0744593e13f161e406acb1d9408b72cad08aff6"
@@ -7591,7 +7689,7 @@ upper-case@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
 
-uri-js@^4.2.1:
+uri-js@^4.2.1, uri-js@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
   dependencies:

From da1616542d9e72c18eaa16cb36e51116321db2f3 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Thu, 23 Aug 2018 15:33:05 +0200
Subject: [PATCH 38/66] Minor refactoring on ImportServersBtn

---
 src/servers/helpers/ImportServersBtn.js | 23 +++++++++++------------
 src/servers/services/ServersImporter.js |  5 +++++
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/servers/helpers/ImportServersBtn.js b/src/servers/helpers/ImportServersBtn.js
index 9d43041f..6187f03d 100644
--- a/src/servers/helpers/ImportServersBtn.js
+++ b/src/servers/helpers/ImportServersBtn.js
@@ -1,7 +1,7 @@
 import React  from 'react';
 import { connect } from 'react-redux';
 import { UncontrolledTooltip } from 'reactstrap';
-import serversImporter from '../services/ServersImporter';
+import serversImporter, { serversImporterType } from '../services/ServersImporter';
 import { createServers } from '../reducers/server';
 import { assoc } from 'ramda';
 import { v4 as uuid } from 'uuid';
@@ -11,7 +11,9 @@ const defaultProps = {
   serversImporter,
 };
 const propTypes = {
-  onChange: PropTypes.func,
+  onImport: PropTypes.func,
+  serversImporter: serversImporterType,
+  createServers: PropTypes.func,
 };
 
 export class ImportServersBtn extends React.Component {
@@ -21,15 +23,12 @@ export class ImportServersBtn extends React.Component {
   }
 
   render() {
-    const { serversImporter, onImport } = this.props;
-    const onChange = e => serversImporter.importServersFromFile(e.target.files[0]).then(
-      servers => {
-        const { createServers } = this.props;
-        const serversWithIds = servers.map(server => assoc('id', uuid(), server));
-        createServers(serversWithIds);
-        onImport(serversWithIds);
-      }
-    );
+    const { serversImporter: { importServersFromFile }, onImport, createServers } = this.props;
+    const onChange = e =>
+      importServersFromFile(e.target.files[0])
+        .then(servers => servers.map(server => assoc('id', uuid(), server)))
+        .then(createServers)
+        .then(onImport);
 
     return (
       <React.Fragment>
@@ -41,10 +40,10 @@ export class ImportServersBtn extends React.Component {
         >
           Import from file
         </button>
-
         <UncontrolledTooltip placement="top" target="importBtn">
           You can create servers by importing a CSV file with columns "name", "apiKey" and "url"
         </UncontrolledTooltip>
+
         <input
           type="file"
           onChange={onChange}
diff --git a/src/servers/services/ServersImporter.js b/src/servers/services/ServersImporter.js
index 8e2c364e..47ed4811 100644
--- a/src/servers/services/ServersImporter.js
+++ b/src/servers/services/ServersImporter.js
@@ -1,4 +1,9 @@
 import csvjson from 'csvjson';
+import PropTypes from 'prop-types';
+
+export const serversImporterType = PropTypes.shape({
+  importServersFromFile: PropTypes.func,
+});
 
 export class ServersImporter {
   constructor(csvjson) {

From ff28169c74a79ff5f1bad2f1d361aca0da9166ed Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Thu, 23 Aug 2018 16:26:42 +0200
Subject: [PATCH 39/66] Created ImportServersBtn test

---
 src/servers/helpers/ImportServersBtn.js       |  4 +-
 test/servers/helpers/ImportServersBtn.test.js | 59 +++++++++++++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 test/servers/helpers/ImportServersBtn.test.js

diff --git a/src/servers/helpers/ImportServersBtn.js b/src/servers/helpers/ImportServersBtn.js
index 6187f03d..7d6e277c 100644
--- a/src/servers/helpers/ImportServersBtn.js
+++ b/src/servers/helpers/ImportServersBtn.js
@@ -9,17 +9,19 @@ import PropTypes from 'prop-types';
 
 const defaultProps = {
   serversImporter,
+  onImport: () => {},
 };
 const propTypes = {
   onImport: PropTypes.func,
   serversImporter: serversImporterType,
   createServers: PropTypes.func,
+  fileRef: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),
 };
 
 export class ImportServersBtn extends React.Component {
   constructor(props) {
     super(props);
-    this.fileRef = React.createRef();
+    this.fileRef = props.fileRef || React.createRef();
   }
 
   render() {
diff --git a/test/servers/helpers/ImportServersBtn.test.js b/test/servers/helpers/ImportServersBtn.test.js
new file mode 100644
index 00000000..e57e8548
--- /dev/null
+++ b/test/servers/helpers/ImportServersBtn.test.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import { ImportServersBtn } from '../../../src/servers/helpers/ImportServersBtn';
+import sinon from 'sinon';
+import { shallow } from 'enzyme';
+import { UncontrolledTooltip } from 'reactstrap';
+
+describe('<ImportServersBtn />', () => {
+  let wrapper;
+  const onImportMock = sinon.fake();
+  const createServersMock = sinon.fake();
+  const serversImporterMock = {
+    importServersFromFile: sinon.fake.returns(Promise.resolve([])),
+  };
+  const fileRef = {
+    current: { click: sinon.fake() }
+  };
+
+  beforeEach(() => {
+    onImportMock.resetHistory();
+    createServersMock.resetHistory();
+    serversImporterMock.importServersFromFile.resetHistory();
+    fileRef.current.click.resetHistory();
+
+    wrapper = shallow(
+      <ImportServersBtn
+        onImport={onImportMock}
+        createServers={createServersMock}
+        serversImporter={serversImporterMock}
+        fileRef={fileRef}
+      />
+    );
+  });
+  afterEach(() => wrapper.unmount());
+
+  it('renders a button, a tooltip and a file input', () => {
+    expect(wrapper.find('#importBtn')).toHaveLength(1);
+    expect(wrapper.find(UncontrolledTooltip)).toHaveLength(1);
+    expect(wrapper.find('.create-server__csv-select')).toHaveLength(1);
+  });
+
+  it('triggers click on file ref when button is clicked', () => {
+    const btn = wrapper.find('#importBtn');
+    btn.simulate('click');
+
+    expect(fileRef.current.click.callCount).toEqual(1);
+  });
+
+  it('imports servers when file input changes', done => {
+    const file = wrapper.find('.create-server__csv-select');
+    file.simulate('change', { target: { files: [''] } });
+
+    setImmediate(() => {
+      expect(serversImporterMock.importServersFromFile.callCount).toEqual(1);
+      expect(createServersMock.callCount).toEqual(1);
+      expect(onImportMock.callCount).toEqual(1);
+      done();
+    });
+  });
+});

From 53650938f7c3bfd3ec47f210cde1b32ad9324c8d Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Thu, 23 Aug 2018 16:35:27 +0200
Subject: [PATCH 40/66] Improved server reducer test

---
 test/servers/reducers/server.test.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/test/servers/reducers/server.test.js b/test/servers/reducers/server.test.js
index 7fa70143..e0227081 100644
--- a/test/servers/reducers/server.test.js
+++ b/test/servers/reducers/server.test.js
@@ -2,9 +2,11 @@ import reduce, {
   _createServer,
   _deleteServer,
   _listServers,
+  _createServers,
   FETCH_SERVERS,
 } from '../../../src/servers/reducers/server';
 import * as sinon from 'sinon';
+import { values } from 'ramda';
 
 describe('serverReducer', () => {
   const servers = {
@@ -15,6 +17,7 @@ describe('serverReducer', () => {
     listServers: sinon.fake.returns(servers),
     createServer: sinon.fake(),
     deleteServer: sinon.fake(),
+    createServers: sinon.fake(),
   };
 
   describe('reduce', () => {
@@ -32,6 +35,7 @@ describe('serverReducer', () => {
       ServersServiceMock.listServers.resetHistory();
       ServersServiceMock.createServer.resetHistory();
       ServersServiceMock.deleteServer.resetHistory();
+      ServersServiceMock.createServers.resetHistory();
     });
 
     describe('listServers', () => {
@@ -42,6 +46,7 @@ describe('serverReducer', () => {
         expect(ServersServiceMock.listServers.callCount).toEqual(1);
         expect(ServersServiceMock.createServer.callCount).toEqual(0);
         expect(ServersServiceMock.deleteServer.callCount).toEqual(0);
+        expect(ServersServiceMock.createServers.callCount).toEqual(0);
       });
     });
 
@@ -55,6 +60,7 @@ describe('serverReducer', () => {
         expect(ServersServiceMock.createServer.callCount).toEqual(1);
         expect(ServersServiceMock.createServer.firstCall.calledWith(serverToCreate)).toEqual(true);
         expect(ServersServiceMock.deleteServer.callCount).toEqual(0);
+        expect(ServersServiceMock.createServers.callCount).toEqual(0);
       });
     });
 
@@ -66,9 +72,24 @@ describe('serverReducer', () => {
         expect(result).toEqual({ type: FETCH_SERVERS, servers });
         expect(ServersServiceMock.listServers.callCount).toEqual(1);
         expect(ServersServiceMock.createServer.callCount).toEqual(0);
+        expect(ServersServiceMock.createServers.callCount).toEqual(0);
         expect(ServersServiceMock.deleteServer.callCount).toEqual(1);
         expect(ServersServiceMock.deleteServer.firstCall.calledWith(serverToDelete)).toEqual(true);
       });
     });
+
+    describe('createServer', () => {
+      it('creates multiple servers and then fetches servers again', () => {
+        const serversToCreate = values(servers);
+        const result = _createServers(ServersServiceMock, serversToCreate);
+
+        expect(result).toEqual({ type: FETCH_SERVERS, servers });
+        expect(ServersServiceMock.listServers.callCount).toEqual(1);
+        expect(ServersServiceMock.createServer.callCount).toEqual(0);
+        expect(ServersServiceMock.createServers.callCount).toEqual(1);
+        expect(ServersServiceMock.createServers.firstCall.calledWith(serversToCreate)).toEqual(true);
+        expect(ServersServiceMock.deleteServer.callCount).toEqual(0);
+      });
+    });
   });
 });

From 12ac877e2d9d7576e8506e8519d29b1972af49f1 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Fri, 24 Aug 2018 10:13:55 +0200
Subject: [PATCH 41/66] Created ServersExporter test

---
 src/servers/services/ServersExporter.js       | 15 ++-
 test/servers/services/ServersExporter.test.js | 95 +++++++++++++++++++
 2 files changed, 101 insertions(+), 9 deletions(-)
 create mode 100644 test/servers/services/ServersExporter.test.js

diff --git a/src/servers/services/ServersExporter.js b/src/servers/services/ServersExporter.js
index 85235e5a..37005b1e 100644
--- a/src/servers/services/ServersExporter.js
+++ b/src/servers/services/ServersExporter.js
@@ -1,9 +1,7 @@
-import Storage from '../../utils/Storage';
+import serversService from './ServersService';
 import { dissoc, head, keys, values } from 'ramda';
 import csvjson from 'csvjson';
 
-const SERVERS_STORAGE_KEY = 'servers';
-
 const saveCsv = (window, csv) => {
   const { navigator, document } = window;
   const filename = 'shlink-servers.csv';
@@ -27,16 +25,14 @@ const saveCsv = (window, csv) => {
 };
 
 export class ServersExporter {
-  constructor(storage, window, csvjson) {
-    this.storage = storage;
+  constructor(serversService, window, csvjson) {
+    this.serversService = serversService;
     this.window = window;
     this.csvjson = csvjson;
   }
 
   exportServers = async () => {
-    const servers = values(this.storage.get(SERVERS_STORAGE_KEY) || {}).map(
-      dissoc('id')
-    );
+    const servers = values(this.serversService.listServers()).map(dissoc('id'));
 
     try {
       const csv = this.csvjson.toCSV(servers, {
@@ -50,4 +46,5 @@ export class ServersExporter {
   };
 }
 
-export default new ServersExporter(Storage, global.window, csvjson);
+const serverExporter = new ServersExporter(serversService, global.window, csvjson);
+export default serverExporter;
diff --git a/test/servers/services/ServersExporter.test.js b/test/servers/services/ServersExporter.test.js
new file mode 100644
index 00000000..04125bb1
--- /dev/null
+++ b/test/servers/services/ServersExporter.test.js
@@ -0,0 +1,95 @@
+import { ServersExporter } from '../../../src/servers/services/ServersExporter';
+import sinon from 'sinon';
+
+describe('ServersExporter', () => {
+  const createLinkMock = () => ({
+    setAttribute: sinon.fake(),
+    click: sinon.fake(),
+    style: {},
+  });
+  const createWindowMock = (isIe10 = true) => ({
+    navigator: {
+      msSaveBlob: isIe10 ? sinon.fake() : undefined,
+    },
+    document: {
+      createElement: sinon.fake.returns(createLinkMock()),
+      body: {
+        appendChild: sinon.fake(),
+        removeChild: sinon.fake(),
+      },
+    }
+  });
+  const serversServiceMock = {
+    listServers: sinon.fake.returns({
+      abc123: {
+        id: 'abc123',
+        name: 'foo',
+      },
+      def456: {
+        id: 'def456',
+        name: 'bar',
+      },
+    }),
+  };
+  const createCsvjsonMock = (throwError = false) => ({
+    toCSV: throwError ? sinon.fake.throws('') : sinon.fake.returns(''),
+  });
+
+  describe('exportServers', () => {
+    let originalConsole;
+
+    beforeEach(() => {
+      originalConsole = global.console;
+      global.console = { error: sinon.fake() };
+      global.Blob = function Blob() {};
+      global.URL = { createObjectURL: () => '' };
+      serversServiceMock.listServers.resetHistory();
+    });
+    afterEach(() => global.console = originalConsole);
+
+    it('logs an error if something fails', () => {
+      const csvjsonMock = createCsvjsonMock(true);
+      const exporter = new ServersExporter(
+        serversServiceMock,
+        createWindowMock(),
+        csvjsonMock,
+      );
+
+      exporter.exportServers();
+
+      expect(global.console.error.callCount).toEqual(1);
+      expect(csvjsonMock.toCSV.callCount).toEqual(1);
+    });
+
+    it('makes use of msSaveBlob API when available', () => {
+      const windowMock = createWindowMock();
+      const exporter = new ServersExporter(
+        serversServiceMock,
+        windowMock,
+        createCsvjsonMock(),
+      );
+
+      exporter.exportServers();
+
+      expect(serversServiceMock.listServers.callCount).toEqual(1);
+      expect(windowMock.navigator.msSaveBlob.callCount).toEqual(1);
+      expect(windowMock.document.createElement.callCount).toEqual(0);
+    });
+
+    it('makes use of download link API when available', () => {
+      const windowMock = createWindowMock(false);
+      const exporter = new ServersExporter(
+        serversServiceMock,
+        windowMock,
+        createCsvjsonMock(),
+      );
+
+      exporter.exportServers();
+
+      expect(serversServiceMock.listServers.callCount).toEqual(1);
+      expect(windowMock.document.createElement.callCount).toEqual(1);
+      expect(windowMock.document.body.appendChild.callCount).toEqual(1);
+      expect(windowMock.document.body.removeChild.callCount).toEqual(1);
+    });
+  });
+});

From 53a4240219f007b71367a69b97ef2caf5935b045 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Fri, 24 Aug 2018 10:34:32 +0200
Subject: [PATCH 42/66] Created ServersImporter test

---
 src/servers/services/ServersImporter.js       |  4 +-
 test/servers/services/ServersImporter.test.js | 44 +++++++++++++++++++
 2 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 test/servers/services/ServersImporter.test.js

diff --git a/src/servers/services/ServersImporter.js b/src/servers/services/ServersImporter.js
index 47ed4811..c60770a1 100644
--- a/src/servers/services/ServersImporter.js
+++ b/src/servers/services/ServersImporter.js
@@ -17,12 +17,12 @@ export class ServersImporter {
 
     const reader = new FileReader();
     return new Promise(resolve => {
-      reader.onloadend = e => {
+      reader.addEventListener('loadend', e => {
         const content = e.target.result;
         const servers = this.csvjson.toObject(content);
 
         resolve(servers);
-      };
+      });
       reader.readAsText(file);
     });
   };
diff --git a/test/servers/services/ServersImporter.test.js b/test/servers/services/ServersImporter.test.js
new file mode 100644
index 00000000..0d10df19
--- /dev/null
+++ b/test/servers/services/ServersImporter.test.js
@@ -0,0 +1,44 @@
+import { ServersImporter } from '../../../src/servers/services/ServersImporter';
+import sinon from 'sinon';
+
+describe('ServersImporter', () => {
+  const servers = [{ name: 'foo' }, { name: 'bar' }];
+  const csvjsonMock = {
+    toObject: sinon.fake.returns(servers),
+  };
+  const importer = new ServersImporter(csvjsonMock);
+
+  beforeEach(() => csvjsonMock.toObject.resetHistory());
+
+  describe('importServersFromFile', () => {
+    it('rejects with error if no file was provided', async () => {
+      try {
+        await importer.importServersFromFile();
+      } catch (e) {
+        expect(e).toEqual('No file provided or file is not a CSV');
+      }
+    });
+
+    it('rejects with error if provided file is not a CSV', async () => {
+      try {
+        await importer.importServersFromFile({ type: 'text/html' });
+      } catch (e) {
+        expect(e).toEqual('No file provided or file is not a CSV');
+      }
+    });
+
+    it('reads file when a CSV is provided', async () => {
+      const readAsText = sinon.fake.returns('');
+      global.FileReader = function FileReader() {
+        this.readAsText = readAsText;
+        this.addEventListener = (eventName, listener) =>
+          listener({ target: { result: '' } });
+      };
+
+      await importer.importServersFromFile({ type: 'text/csv' });
+
+      expect(readAsText.callCount).toEqual(1);
+      expect(csvjsonMock.toObject.callCount).toEqual(1);
+    });
+  });
+});

From 76ae27707bacee6a27c6fb8dd5da921c2155a951 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Fri, 24 Aug 2018 10:58:37 +0200
Subject: [PATCH 43/66] Created ServersService test

---
 src/servers/reducers/selectedServer.js       |   8 +-
 src/servers/reducers/server.js               |  32 +++---
 src/servers/services/ServersService.js       |   3 +-
 test/servers/services/ServersService.test.js | 112 +++++++++++++++++++
 4 files changed, 134 insertions(+), 21 deletions(-)
 create mode 100644 test/servers/services/ServersService.test.js

diff --git a/src/servers/reducers/selectedServer.js b/src/servers/reducers/selectedServer.js
index 3ed83fa6..1fc9b2e5 100644
--- a/src/servers/reducers/selectedServer.js
+++ b/src/servers/reducers/selectedServer.js
@@ -1,5 +1,5 @@
 import ShlinkApiClient from '../../api/ShlinkApiClient';
-import ServersService from '../../servers/services/ServersService';
+import serversService from '../../servers/services/ServersService';
 import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListParams'
 import { curry } from 'ramda';
 
@@ -21,10 +21,10 @@ export default function reducer(state = defaultState, action) {
 
 export const resetSelectedServer = () => ({ type: RESET_SELECTED_SERVER });
 
-export const _selectServer = (ShlinkApiClient, ServersService, serverId) => dispatch => {
+export const _selectServer = (ShlinkApiClient, serversService, serverId) => dispatch => {
   dispatch(resetShortUrlParams());
 
-  const selectedServer = ServersService.findServerById(serverId);
+  const selectedServer = serversService.findServerById(serverId);
   ShlinkApiClient.setConfig(selectedServer);
 
   dispatch({
@@ -32,4 +32,4 @@ export const _selectServer = (ShlinkApiClient, ServersService, serverId) => disp
     selectedServer
   })
 };
-export const selectServer = curry(_selectServer)(ShlinkApiClient, ServersService);
+export const selectServer = curry(_selectServer)(ShlinkApiClient, serversService);
diff --git a/src/servers/reducers/server.js b/src/servers/reducers/server.js
index adc6e895..978c82fd 100644
--- a/src/servers/reducers/server.js
+++ b/src/servers/reducers/server.js
@@ -1,4 +1,4 @@
-import ServersService from '../services/ServersService';
+import serversService from '../services/ServersService';
 import { curry } from 'ramda';
 
 export const FETCH_SERVERS = 'shlink/servers/FETCH_SERVERS';
@@ -12,26 +12,26 @@ export default function reducer(state = {}, action) {
   }
 }
 
-export const _listServers = ServersService => ({
+export const _listServers = serversService => ({
   type: FETCH_SERVERS,
-  servers: ServersService.listServers(),
+  servers: serversService.listServers(),
 });
-export const listServers = () => _listServers(ServersService);
+export const listServers = () => _listServers(serversService);
 
-export const _createServer = (ServersService, server) => {
-  ServersService.createServer(server);
-  return _listServers(ServersService);
+export const _createServer = (serversService, server) => {
+  serversService.createServer(server);
+  return _listServers(serversService);
 };
-export const createServer = curry(_createServer)(ServersService);
+export const createServer = curry(_createServer)(serversService);
 
-export const _deleteServer = (ServersService, server) => {
-  ServersService.deleteServer(server);
-  return _listServers(ServersService);
+export const _deleteServer = (serversService, server) => {
+  serversService.deleteServer(server);
+  return _listServers(serversService);
 };
-export const deleteServer = curry(_deleteServer)(ServersService);
+export const deleteServer = curry(_deleteServer)(serversService);
 
-export const _createServers = (ServersService, servers) => {
-  ServersService.createServers(servers);
-  return _listServers(ServersService);
+export const _createServers = (serversService, servers) => {
+  serversService.createServers(servers);
+  return _listServers(serversService);
 };
-export const createServers = curry(_createServers)(ServersService);
+export const createServers = curry(_createServers)(serversService);
diff --git a/src/servers/services/ServersService.js b/src/servers/services/ServersService.js
index 35f7f9b5..a8b96b8f 100644
--- a/src/servers/services/ServersService.js
+++ b/src/servers/services/ServersService.js
@@ -30,4 +30,5 @@ export class ServersService {
     );
 }
 
-export default new ServersService(Storage);
+const serversService = new ServersService(Storage);
+export default serversService;
diff --git a/test/servers/services/ServersService.test.js b/test/servers/services/ServersService.test.js
new file mode 100644
index 00000000..b07db206
--- /dev/null
+++ b/test/servers/services/ServersService.test.js
@@ -0,0 +1,112 @@
+import { ServersService } from '../../../src/servers/services/ServersService';
+import sinon from 'sinon';
+import { last } from 'ramda';
+
+describe('ServersService', () => {
+  const servers = {
+    abc123: { id: 'abc123' },
+    def456: { id: 'def456' },
+  };
+  const createStorageMock = returnValue => ({
+    set: sinon.fake(),
+    get: sinon.fake.returns(returnValue),
+  });
+
+  describe('listServers', () => {
+    it('returns an empty object when servers are not found in storage', () => {
+      const storageMock = createStorageMock();
+      const service = new ServersService(storageMock);
+
+      const result = service.listServers();
+
+      expect(result).toEqual({});
+      expect(storageMock.get.callCount).toEqual(1);
+      expect(storageMock.set.callCount).toEqual(0);
+    });
+
+    it('returns value from storage when found', () => {
+      const storageMock = createStorageMock(servers);
+      const service = new ServersService(storageMock);
+
+      const result = service.listServers();
+
+      expect(result).toEqual(servers);
+      expect(storageMock.get.callCount).toEqual(1);
+      expect(storageMock.set.callCount).toEqual(0);
+    });
+  });
+
+  describe('findServerById', () => {
+    it('returns undefined when requested server is not found', () => {
+      const storageMock = createStorageMock(servers);
+      const service = new ServersService(storageMock);
+
+      const result = service.findServerById('ghi789');
+
+      expect(result).toBeUndefined();
+      expect(storageMock.get.callCount).toEqual(1);
+      expect(storageMock.set.callCount).toEqual(0);
+    });
+
+    it('returns server from list when found', () => {
+      const storageMock = createStorageMock(servers);
+      const service = new ServersService(storageMock);
+
+      const result = service.findServerById('abc123');
+
+      expect(result).toEqual({ id: 'abc123' });
+      expect(storageMock.get.callCount).toEqual(1);
+      expect(storageMock.set.callCount).toEqual(0);
+    });
+  });
+
+  describe('createServer', () => {
+    it('adds one server to the list', () => {
+      const storageMock = createStorageMock(servers);
+      const service = new ServersService(storageMock);
+
+      service.createServer({ id: 'ghi789' });
+
+      expect(storageMock.get.callCount).toEqual(1);
+      expect(storageMock.set.callCount).toEqual(1);
+      expect(last(storageMock.set.lastCall.args)).toEqual({
+        abc123: { id: 'abc123' },
+        def456: { id: 'def456' },
+        ghi789: { id: 'ghi789' },
+      });
+    });
+  });
+
+  describe('createServers', () => {
+    it('adds multiple servers to the list', () => {
+      const storageMock = createStorageMock(servers);
+      const service = new ServersService(storageMock);
+
+      service.createServers([{ id: 'ghi789' }, { id: 'jkl123' }]);
+
+      expect(storageMock.get.callCount).toEqual(1);
+      expect(storageMock.set.callCount).toEqual(1);
+      expect(last(storageMock.set.lastCall.args)).toEqual({
+        abc123: { id: 'abc123' },
+        def456: { id: 'def456' },
+        ghi789: { id: 'ghi789' },
+        jkl123: { id: 'jkl123' },
+      });
+    });
+  });
+
+  describe('deleteServer', () => {
+    it('removes one server from the list', () => {
+      const storageMock = createStorageMock(servers);
+      const service = new ServersService(storageMock);
+
+      service.deleteServer({ id: 'abc123' });
+
+      expect(storageMock.get.callCount).toEqual(1);
+      expect(storageMock.set.callCount).toEqual(1);
+      expect(last(storageMock.set.lastCall.args)).toEqual({
+        def456: { id: 'def456' },
+      });
+    });
+  });
+});

From ffc596b4944988b01b3c388e70f566fbf75f717e Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Fri, 24 Aug 2018 12:02:28 +0200
Subject: [PATCH 44/66] Enabled linting on CI

---
 .travis.yml  | 2 +-
 package.json | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index e67f3fd7..f90670eb 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,7 +12,7 @@ install:
   - yarn install
 
 script:
-  # - yarn inspect
+  - yarn lint
   - yarn test:ci
   - yarn build # Make sure the app can be built without errors
 
diff --git a/package.json b/package.json
index b57dd202..c408461c 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,9 @@
   "version": "0.1.0",
   "private": false,
   "scripts": {
+    "lint": "yarn lint:js && yarn lint:css",
+    "lint:js": "eslint src test scripts config",
+    "lint:css": "echo \"no css linting\"",
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom --colors",

From 7cd9caee77f8d4841eec2b38b628278b55fd71c1 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Fri, 24 Aug 2018 12:23:35 +0200
Subject: [PATCH 45/66] Created DeleteServerButton test

---
 src/servers/DeleteServerButton.js       | 24 ++++++++++++------
 test/servers/DeleteServerButton.test.js | 33 +++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 8 deletions(-)
 create mode 100644 test/servers/DeleteServerButton.test.js

diff --git a/src/servers/DeleteServerButton.js b/src/servers/DeleteServerButton.js
index 9ed7b146..4b2b0dd1 100644
--- a/src/servers/DeleteServerButton.js
+++ b/src/servers/DeleteServerButton.js
@@ -2,32 +2,40 @@ import deleteIcon from '@fortawesome/fontawesome-free-solid/faMinusCircle';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import DeleteServerModal from './DeleteServerModal';
+import { serverType } from './prop-types';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  server: serverType,
+  className: PropTypes.string,
+};
 
 export default class DeleteServerButton extends React.Component {
   state = { isModalOpen: false };
 
   render() {
-    const { server } = this.props;
+    const { server, className } = this.props;
 
-    return [
-      (
+    return (
+      <React.Fragment>
         <span
-          className={this.props.className}
+          className={className}
           onClick={() => this.setState({ isModalOpen: true })}
           key="deleteServerBtn"
         >
           <FontAwesomeIcon icon={deleteIcon} />
           <span className="aside-menu__item-text">Delete this server</span>
         </span>
-      ),
-      (
+
         <DeleteServerModal
           isOpen={this.state.isModalOpen}
           toggle={() => this.setState({ isModalOpen: !this.state.isModalOpen })}
           server={server}
           key="deleteServerModal"
         />
-      )
-    ];
+      </React.Fragment>
+    );
   }
 }
+
+DeleteServerButton.propTypes = propTypes;
diff --git a/test/servers/DeleteServerButton.test.js b/test/servers/DeleteServerButton.test.js
new file mode 100644
index 00000000..d6fb142e
--- /dev/null
+++ b/test/servers/DeleteServerButton.test.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import DeleteServerButton from '../../src/servers/DeleteServerButton';
+import { shallow } from 'enzyme';
+import DeleteServerModal from '../../src/servers/DeleteServerModal';
+
+describe('<DeleteServerButton />', () => {
+  let wrapper;
+
+  beforeEach(() =>
+      wrapper = shallow(<DeleteServerButton server={{}} className="button" />));
+  afterEach(() => wrapper.unmount());
+
+  it('renders a button and a modal', () => {
+    expect(wrapper.find('.button')).toHaveLength(1);
+    expect(wrapper.find(DeleteServerModal)).toHaveLength(1);
+  });
+
+  it('displays modal when button is clicked', () => {
+    const btn = wrapper.find('.button');
+
+    expect(wrapper.state('isModalOpen')).toEqual(false);
+    btn.simulate('click');
+    expect(wrapper.state('isModalOpen')).toEqual(true);
+  });
+
+  it('changes modal open state when toggled', () => {
+    const modal = wrapper.find(DeleteServerModal);
+
+    expect(wrapper.state('isModalOpen')).toEqual(false);
+    modal.prop('toggle')();
+    expect(wrapper.state('isModalOpen')).toEqual(true);
+  });
+});

From badc8a73242b34f61c7b89acee93ce40b27bb34e Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Fri, 24 Aug 2018 12:36:14 +0200
Subject: [PATCH 46/66] Created DeleteServerModal test

---
 src/servers/DeleteServerModal.js       | 12 ++---
 test/servers/DeleteServerModal.test.js | 62 ++++++++++++++++++++++++++
 2 files changed, 69 insertions(+), 5 deletions(-)
 create mode 100644 test/servers/DeleteServerModal.test.js

diff --git a/src/servers/DeleteServerModal.js b/src/servers/DeleteServerModal.js
index 419e6a33..0d69bd52 100644
--- a/src/servers/DeleteServerModal.js
+++ b/src/servers/DeleteServerModal.js
@@ -7,6 +7,12 @@ import { compose } from 'redux';
 import { deleteServer } from './reducers/server';
 import { serverType } from './prop-types';
 
+const propTypes = {
+  toggle: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  server: serverType,
+};
+
 export const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }) => {
   const closeModal = () => {
     deleteServer(server);
@@ -32,11 +38,7 @@ export const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, histor
   );
 };
 
-DeleteServerModal.propTypes = {
-  toggle: PropTypes.func.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  server: serverType,
-};
+DeleteServerModal.propTypes = propTypes;
 
 export default compose(
   withRouter,
diff --git a/test/servers/DeleteServerModal.test.js b/test/servers/DeleteServerModal.test.js
new file mode 100644
index 00000000..23866f64
--- /dev/null
+++ b/test/servers/DeleteServerModal.test.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
+import sinon from 'sinon';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+
+describe('<DeleteServerModal />', () => {
+  let wrapper;
+  const deleteServerMock = sinon.fake();
+  const historyMock = { push: sinon.fake() };
+  const toggleMock = sinon.fake();
+  const serverName = 'the_server_name';
+
+  beforeEach(() => {
+    toggleMock.resetHistory();
+    deleteServerMock.resetHistory();
+    historyMock.push.resetHistory();
+
+    wrapper = shallow(
+      <DeleteServerModal
+        server={{ name: serverName }}
+        toggle={toggleMock}
+        isOpen={true}
+        deleteServer={deleteServerMock}
+        history={historyMock}
+      />
+    );
+  });
+  afterEach(() => wrapper.unmount());
+
+  it('renders a modal window', () => {
+    expect(wrapper.find(Modal)).toHaveLength(1);
+    expect(wrapper.find(ModalHeader)).toHaveLength(1);
+    expect(wrapper.find(ModalBody)).toHaveLength(1);
+    expect(wrapper.find(ModalFooter)).toHaveLength(1);
+  });
+
+  it('displays the name of the server as part of the content', () => {
+    const modalBody = wrapper.find(ModalBody);
+    expect(modalBody.find('p').first().text()).toEqual(
+      `Are you sure you want to delete server ${serverName}?`
+    );
+  });
+
+  it('toggles when clicking cancel button', () => {
+    const cancelBtn = wrapper.find('button').first();
+    cancelBtn.simulate('click');
+
+    expect(toggleMock.callCount).toEqual(1);
+    expect(deleteServerMock.callCount).toEqual(0);
+    expect(historyMock.push.callCount).toEqual(0);
+  });
+
+  it('deletes server when clicking accept button', () => {
+    const acceptBtn = wrapper.find('button').last();
+    acceptBtn.simulate('click');
+
+    expect(toggleMock.callCount).toEqual(1);
+    expect(deleteServerMock.callCount).toEqual(1);
+    expect(historyMock.push.callCount).toEqual(1);
+  });
+});

From a83be0b45c6c7bc9f713ee4023a1c4e6c6d9ecda Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Fri, 24 Aug 2018 23:19:49 +0200
Subject: [PATCH 47/66] Created CreateServer test

---
 src/servers/CreateServer.js       | 13 ++++++-
 test/servers/CreateServer.test.js | 63 +++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 test/servers/CreateServer.test.js

diff --git a/src/servers/CreateServer.js b/src/servers/CreateServer.js
index 5e8e7fe7..4efbbe30 100644
--- a/src/servers/CreateServer.js
+++ b/src/servers/CreateServer.js
@@ -6,6 +6,15 @@ import { resetSelectedServer } from './reducers/selectedServer';
 import { v4 as uuid } from 'uuid';
 import './CreateServer.scss';
 import ImportServersBtn from './helpers/ImportServersBtn';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  createServer: PropTypes.func,
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }),
+  resetSelectedServer: PropTypes.func,
+};
 
 export class CreateServer extends React.Component {
   state = {
@@ -67,7 +76,7 @@ export class CreateServer extends React.Component {
           </div>
 
           {this.state.serversImported && (
-            <div className="row">
+            <div className="row create-server__import-success-msg">
               <div className="col-md-10 offset-md-1">
                 <div className="p-2 mt-3 bg-main text-white text-center">
                   Servers properly imported. You can now select one from the list :)
@@ -81,6 +90,8 @@ export class CreateServer extends React.Component {
   }
 }
 
+CreateServer.propTypes = propTypes;
+
 export default connect(
   pick(['selectedServer']),
   {createServer, resetSelectedServer }
diff --git a/test/servers/CreateServer.test.js b/test/servers/CreateServer.test.js
new file mode 100644
index 00000000..f1b13c81
--- /dev/null
+++ b/test/servers/CreateServer.test.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { CreateServer } from '../../src/servers/CreateServer';
+import { identity } from 'ramda';
+import sinon from 'sinon';
+import ImportServersBtn from '../../src/servers/helpers/ImportServersBtn';
+
+describe('<CreateServer />', () => {
+  let wrapper;
+  const createServerMock = sinon.fake();
+  const historyMock = {
+    push: sinon.fake(),
+  };
+
+  beforeEach(() => {
+    createServerMock.resetHistory();
+    historyMock.push.resetHistory();
+
+    wrapper = shallow(
+      <CreateServer
+        createServer={createServerMock}
+        resetSelectedServer={identity}
+        history={historyMock}
+      />
+    );
+  });
+  afterEach(() => wrapper.unmount());
+
+  it('renders components', () => {
+    expect(wrapper.find('#name')).toHaveLength(1);
+    expect(wrapper.find('#url')).toHaveLength(1);
+    expect(wrapper.find('#apiKey')).toHaveLength(1);
+    expect(wrapper.find(ImportServersBtn)).toHaveLength(1);
+    expect(wrapper.find('.create-server__import-success-msg')).toHaveLength(0);
+  });
+
+  it('shows success message when imported is true', () => {
+    wrapper.setState({ serversImported: true });
+    expect(wrapper.find('.create-server__import-success-msg')).toHaveLength(1);
+  });
+
+  it('creates server and redirects to it when form is submitted', () => {
+    const form = wrapper.find('form');
+    form.simulate('submit', { preventDefault: () => {} });
+
+    expect(createServerMock.callCount).toEqual(1);
+    expect(historyMock.push.callCount).toEqual(1);
+  });
+
+  it('updates state when inputs are changed', () => {
+    const nameInput = wrapper.find('#name');
+    const urlInput = wrapper.find('#url');
+    const apiKeyInput = wrapper.find('#apiKey');
+
+    nameInput.simulate('change', { target: { value: 'the_name' } });
+    urlInput.simulate('change', { target: { value: 'the_url' } });
+    apiKeyInput.simulate('change', { target: { value: 'the_api_key' } });
+
+    expect(wrapper.state('name')).toEqual('the_name');
+    expect(wrapper.state('url')).toEqual('the_url');
+    expect(wrapper.state('apiKey')).toEqual('the_api_key');
+  });
+});

From 26a3fdfd3dee9f57a33572f8e927c55bd393490c Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Fri, 24 Aug 2018 23:38:37 +0200
Subject: [PATCH 48/66] Created VisitsParser test

---
 src/short-urls/ShortUrlVisits.js              | 10 ++-
 src/visits/services/VisitsParser.js           |  7 +-
 .../reducers/shortUrlsListParams.test.js      |  4 +-
 test/visits/services/VisitsParser.test.js     | 76 +++++++++++++++++++
 4 files changed, 88 insertions(+), 9 deletions(-)
 rename test/{shortUrls => short-urls}/reducers/shortUrlsListParams.test.js (91%)
 create mode 100644 test/visits/services/VisitsParser.test.js

diff --git a/src/short-urls/ShortUrlVisits.js b/src/short-urls/ShortUrlVisits.js
index 2f8f15dc..3ec188bf 100644
--- a/src/short-urls/ShortUrlVisits.js
+++ b/src/short-urls/ShortUrlVisits.js
@@ -7,11 +7,15 @@ import Moment from 'react-moment'
 import { connect } from 'react-redux'
 import { Card, CardBody, CardHeader, UncontrolledTooltip } from 'reactstrap'
 import DateInput from '../common/DateInput'
-import VisitsParser from '../visits/services/VisitsParser'
+import visitsParser from '../visits/services/VisitsParser'
 import { getShortUrlVisits } from './reducers/shortUrlVisits'
 import './ShortUrlVisits.scss'
 import MutedMessage from '../utils/MuttedMessage';
 
+const defaultProps = {
+  visitsParser,
+};
+
 export class ShortUrlsVisits extends React.Component {
   state = { startDate: undefined, endDate: undefined };
   loadVisits = () => {
@@ -167,8 +171,6 @@ export class ShortUrlsVisits extends React.Component {
   }
 }
 
-ShortUrlsVisits.defaultProps = {
-  visitsParser: VisitsParser
-};
+ShortUrlsVisits.defaultProps = defaultProps;
 
 export default connect(pick(['selectedServer', 'shortUrlVisits']), { getShortUrlVisits })(ShortUrlsVisits);
diff --git a/src/visits/services/VisitsParser.js b/src/visits/services/VisitsParser.js
index 2d35a760..a17691b7 100644
--- a/src/visits/services/VisitsParser.js
+++ b/src/visits/services/VisitsParser.js
@@ -21,14 +21,14 @@ const browserFromUserAgent = userAgent => {
   const lowerUserAgent = userAgent.toLowerCase();
 
   switch (true) {
+    case (lowerUserAgent.indexOf('opera') >= 0 || lowerUserAgent.indexOf('opr') >= 0):
+      return 'Opera';
     case (lowerUserAgent.indexOf('firefox') >= 0):
       return 'Firefox';
     case (lowerUserAgent.indexOf('chrome') >= 0):
       return 'Chrome';
     case (lowerUserAgent.indexOf('safari') >= 0):
       return 'Safari';
-    case (lowerUserAgent.indexOf('opera') >= 0):
-      return 'Opera';
     case (lowerUserAgent.indexOf('msie') >= 0):
       return 'Internet Explorer';
     default:
@@ -98,4 +98,5 @@ export class VisitsParser {
   };
 }
 
-export default new VisitsParser();
+const visitsParser = new VisitsParser();
+export default visitsParser;
diff --git a/test/shortUrls/reducers/shortUrlsListParams.test.js b/test/short-urls/reducers/shortUrlsListParams.test.js
similarity index 91%
rename from test/shortUrls/reducers/shortUrlsListParams.test.js
rename to test/short-urls/reducers/shortUrlsListParams.test.js
index f22507d3..7540f673 100644
--- a/test/shortUrls/reducers/shortUrlsListParams.test.js
+++ b/test/short-urls/reducers/shortUrlsListParams.test.js
@@ -5,10 +5,10 @@ import reduce, {
 import { LIST_SHORT_URLS } from '../../../src/short-urls/reducers/shortUrlsList';
 
 describe('shortUrlsListParamsReducer', () => {
-  describe('reduce', () => {
+  describe('reducer', () => {
     const defaultState = { page: '1' };
 
-    it('returns default value when action is anknown', () =>
+    it('returns default value when action is unknown', () =>
       expect(reduce(defaultState, { type: 'unknown' })).toEqual(defaultState)
     );
 
diff --git a/test/visits/services/VisitsParser.test.js b/test/visits/services/VisitsParser.test.js
new file mode 100644
index 00000000..e2141c73
--- /dev/null
+++ b/test/visits/services/VisitsParser.test.js
@@ -0,0 +1,76 @@
+import visitsParser from '../../../src/visits/services/VisitsParser';
+
+describe('VisitsParser', () => {
+  const visits = [
+    {
+      userAgent: 'Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0',
+      referer: 'https://google.com',
+      visitLocation: {
+        countryName: 'Spain',
+      },
+    },
+    {
+      userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X x.y; rv:42.0) Gecko/20100101 Firefox/42.0',
+      referer: 'https://google.com',
+      visitLocation: {
+        countryName: 'United States',
+      },
+    },
+    {
+      userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36',
+      visitLocation: {
+        countryName: 'Spain',
+      },
+    },
+    {
+      userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36',
+      referer: 'https://m.facebook.com',
+      visitLocation: {
+        countryName: 'Spain',
+      },
+    },
+    {
+      userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 OPR/38.0.2220.41',
+    },
+  ];
+
+  describe('processOsStats', () => {
+    it('properly parses OS stats', () => {
+      expect(visitsParser.processOsStats(visits)).toEqual({
+        'Linux': 3,
+        'Windows': 1,
+        'MacOS': 1,
+      });
+    });
+  });
+
+  describe('processBrowserStats', () => {
+    it('properly parses browser stats', () => {
+      expect(visitsParser.processBrowserStats(visits)).toEqual({
+        'Firefox': 2,
+        'Chrome': 2,
+        'Opera': 1,
+      });
+    });
+  });
+
+  describe('processReferrersStats', () => {
+    it('properly parses referrer stats', () => {
+      expect(visitsParser.processReferrersStats(visits)).toEqual({
+        'Unknown': 2,
+        'google.com': 2,
+        'm.facebook.com': 1,
+      });
+    });
+  });
+
+  describe('processCountriesStats', () => {
+    it('properly parses countries stats', () => {
+      expect(visitsParser.processCountriesStats(visits)).toEqual({
+        'Spain': 3,
+        'United States': 1,
+        'Unknown': 1,
+      });
+    });
+  });
+});

From 4924f24e1a39d047b2821a05ea0bf19ff3f686d7 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Fri, 24 Aug 2018 23:51:33 +0200
Subject: [PATCH 49/66] Refactored VisitsParser taking advantage of reduce
 function

---
 src/visits/services/VisitsParser.js | 95 +++++++++++++----------------
 1 file changed, 43 insertions(+), 52 deletions(-)

diff --git a/src/visits/services/VisitsParser.js b/src/visits/services/VisitsParser.js
index a17691b7..679363cd 100644
--- a/src/visits/services/VisitsParser.js
+++ b/src/visits/services/VisitsParser.js
@@ -1,4 +1,4 @@
-import { forEach, isNil, isEmpty } from 'ramda';
+import { assoc, isNil, isEmpty, reduce } from 'ramda';
 
 const osFromUserAgent = userAgent => {
   const lowerUserAgent = userAgent.toLowerCase();
@@ -41,61 +41,52 @@ const extractDomain = url => {
   return domain.split(':')[0];
 };
 
-// FIXME Refactor these foreach statements which mutate a stats object
 export class VisitsParser {
-  processOsStats = visits => {
-    const stats = {};
+  processOsStats = visits =>
+    reduce(
+      (stats, visit) => {
+        const userAgent = visit.userAgent;
+        const os = isNil(userAgent) ? 'Others' : osFromUserAgent(userAgent);
+        return assoc(os, (stats[os] || 0) + 1, stats);
+      },
+      {},
+      visits,
+    );
 
-    forEach(visit => {
-      const userAgent = visit.userAgent;
-      const os = isNil(userAgent) ? 'Others' : osFromUserAgent(userAgent);
+  processBrowserStats = visits =>
+    reduce(
+      (stats, visit) => {
+        const userAgent = visit.userAgent;
+        const browser = isNil(userAgent) ? 'Others' : browserFromUserAgent(userAgent);
+        return assoc(browser, (stats[browser] || 0) + 1, stats);
+      },
+      {},
+      visits,
+    );
 
-      stats[os] = typeof stats[os] === 'undefined' ? 1 : stats[os] + 1;
-    }, visits);
+  processReferrersStats = visits =>
+    reduce(
+      (stats, visit) => {
+        const notHasDomain = isNil(visit.referer) || isEmpty(visit.referer);
+        const domain = notHasDomain ? 'Unknown' : extractDomain(visit.referer);
+        return assoc(domain, (stats[domain]|| 0) + 1, stats);
+      },
+      {},
+      visits,
+    );
 
-    return stats;
-  };
-
-  processBrowserStats = visits => {
-    const stats = {};
-
-    forEach(visit => {
-      const userAgent = visit.userAgent;
-      const browser = isNil(userAgent) ? 'Others' : browserFromUserAgent(userAgent);
-
-      stats[browser] = typeof stats[browser] === 'undefined' ? 1 : stats[browser] + 1;
-    }, visits);
-
-    return stats;
-  };
-
-  processReferrersStats = visits => {
-    const stats = {};
-
-    forEach(visit => {
-      const notHasDomain = isNil(visit.referer) || isEmpty(visit.referer);
-      const domain = notHasDomain ? 'Unknown' : extractDomain(visit.referer);
-
-      stats[domain] = typeof stats[domain] === 'undefined' ? 1 : stats[domain] + 1;
-    }, visits);
-
-    return stats;
-  };
-
-  processCountriesStats = visits => {
-    const stats = {};
-
-    forEach(({ visitLocation }) => {
-      const notHasCountry = isNil(visitLocation)
-        || isNil(visitLocation.countryName)
-        || isEmpty(visitLocation.countryName);
-      const country = notHasCountry ? 'Unknown' : visitLocation.countryName;
-
-      stats[country] = typeof stats[country] === 'undefined' ? 1 : stats[country] + 1;
-    }, visits);
-
-    return stats;
-  };
+  processCountriesStats = visits =>
+    reduce(
+      (stats, { visitLocation }) => {
+        const notHasCountry = isNil(visitLocation)
+          || isNil(visitLocation.countryName)
+          || isEmpty(visitLocation.countryName);
+        const country = notHasCountry ? 'Unknown' : visitLocation.countryName;
+        return assoc(country, (stats[country]|| 0) + 1, stats);
+      },
+      {},
+      visits,
+    );
 }
 
 const visitsParser = new VisitsParser();

From 6d0753481d90be472e20bb1c65a1d3fbb072a49c Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Fri, 24 Aug 2018 23:55:53 +0200
Subject: [PATCH 50/66] Refactored visits parser to be functional

---
 src/short-urls/ShortUrlVisits.js          | 30 ++++++--
 src/visits/services/VisitsParser.js       | 89 +++++++++++------------
 test/visits/services/VisitsParser.test.js | 15 ++--
 3 files changed, 74 insertions(+), 60 deletions(-)

diff --git a/src/short-urls/ShortUrlVisits.js b/src/short-urls/ShortUrlVisits.js
index 3ec188bf..f2778be2 100644
--- a/src/short-urls/ShortUrlVisits.js
+++ b/src/short-urls/ShortUrlVisits.js
@@ -7,13 +7,21 @@ import Moment from 'react-moment'
 import { connect } from 'react-redux'
 import { Card, CardBody, CardHeader, UncontrolledTooltip } from 'reactstrap'
 import DateInput from '../common/DateInput'
-import visitsParser from '../visits/services/VisitsParser'
+import {
+  processOsStats,
+  processBrowserStats,
+  processCountriesStats,
+  processReferrersStats,
+} from '../visits/services/VisitsParser'
 import { getShortUrlVisits } from './reducers/shortUrlVisits'
 import './ShortUrlVisits.scss'
 import MutedMessage from '../utils/MuttedMessage';
 
 const defaultProps = {
-  visitsParser,
+  processOsStats,
+  processBrowserStats,
+  processCountriesStats,
+  processReferrersStats,
 };
 
 export class ShortUrlsVisits extends React.Component {
@@ -34,7 +42,10 @@ export class ShortUrlsVisits extends React.Component {
     const {
       match: { params },
       selectedServer,
-      visitsParser,
+      processOsStats,
+      processBrowserStats,
+      processCountriesStats,
+      processReferrersStats,
       shortUrlVisits: { visits, loading, error, shortUrl }
     } = this.props;
     const serverUrl = selectedServer ? selectedServer.url : '';
@@ -96,10 +107,10 @@ export class ShortUrlsVisits extends React.Component {
 
       return (
         <div className="row">
-          {renderGraphCard('Operating systems', visitsParser.processOsStats(visits), false)}
-          {renderGraphCard('Browsers', visitsParser.processBrowserStats(visits), false)}
-          {renderGraphCard('Countries', visitsParser.processCountriesStats(visits), true, 'Visits')}
-          {renderGraphCard('Referrers', visitsParser.processReferrersStats(visits), true, 'Visits')}
+          {renderGraphCard('Operating systems', processOsStats(visits), false)}
+          {renderGraphCard('Browsers', processBrowserStats(visits), false)}
+          {renderGraphCard('Countries', processCountriesStats(visits), true, 'Visits')}
+          {renderGraphCard('Referrers', processReferrersStats(visits), true, 'Visits')}
         </div>
       );
     };
@@ -173,4 +184,7 @@ export class ShortUrlsVisits extends React.Component {
 
 ShortUrlsVisits.defaultProps = defaultProps;
 
-export default connect(pick(['selectedServer', 'shortUrlVisits']), { getShortUrlVisits })(ShortUrlsVisits);
+export default connect(
+  pick(['selectedServer', 'shortUrlVisits']),
+  { getShortUrlVisits }
+)(ShortUrlsVisits);
diff --git a/src/visits/services/VisitsParser.js b/src/visits/services/VisitsParser.js
index 679363cd..f74088ba 100644
--- a/src/visits/services/VisitsParser.js
+++ b/src/visits/services/VisitsParser.js
@@ -41,53 +41,48 @@ const extractDomain = url => {
   return domain.split(':')[0];
 };
 
-export class VisitsParser {
-  processOsStats = visits =>
-    reduce(
-      (stats, visit) => {
-        const userAgent = visit.userAgent;
-        const os = isNil(userAgent) ? 'Others' : osFromUserAgent(userAgent);
-        return assoc(os, (stats[os] || 0) + 1, stats);
-      },
-      {},
-      visits,
-    );
+export const processOsStats = visits =>
+  reduce(
+    (stats, visit) => {
+      const userAgent = visit.userAgent;
+      const os = isNil(userAgent) ? 'Others' : osFromUserAgent(userAgent);
+      return assoc(os, (stats[os] || 0) + 1, stats);
+    },
+    {},
+    visits,
+  );
 
-  processBrowserStats = visits =>
-    reduce(
-      (stats, visit) => {
-        const userAgent = visit.userAgent;
-        const browser = isNil(userAgent) ? 'Others' : browserFromUserAgent(userAgent);
-        return assoc(browser, (stats[browser] || 0) + 1, stats);
-      },
-      {},
-      visits,
-    );
+export const processBrowserStats = visits =>
+  reduce(
+    (stats, visit) => {
+      const userAgent = visit.userAgent;
+      const browser = isNil(userAgent) ? 'Others' : browserFromUserAgent(userAgent);
+      return assoc(browser, (stats[browser] || 0) + 1, stats);
+    },
+    {},
+    visits,
+  );
 
-  processReferrersStats = visits =>
-    reduce(
-      (stats, visit) => {
-        const notHasDomain = isNil(visit.referer) || isEmpty(visit.referer);
-        const domain = notHasDomain ? 'Unknown' : extractDomain(visit.referer);
-        return assoc(domain, (stats[domain]|| 0) + 1, stats);
-      },
-      {},
-      visits,
-    );
+export const processReferrersStats = visits =>
+  reduce(
+    (stats, visit) => {
+      const notHasDomain = isNil(visit.referer) || isEmpty(visit.referer);
+      const domain = notHasDomain ? 'Unknown' : extractDomain(visit.referer);
+      return assoc(domain, (stats[domain]|| 0) + 1, stats);
+    },
+    {},
+    visits,
+  );
 
-  processCountriesStats = visits =>
-    reduce(
-      (stats, { visitLocation }) => {
-        const notHasCountry = isNil(visitLocation)
-          || isNil(visitLocation.countryName)
-          || isEmpty(visitLocation.countryName);
-        const country = notHasCountry ? 'Unknown' : visitLocation.countryName;
-        return assoc(country, (stats[country]|| 0) + 1, stats);
-      },
-      {},
-      visits,
-    );
-}
-
-const visitsParser = new VisitsParser();
-export default visitsParser;
+export const processCountriesStats = visits =>
+  reduce(
+    (stats, { visitLocation }) => {
+      const notHasCountry = isNil(visitLocation)
+        || isNil(visitLocation.countryName)
+        || isEmpty(visitLocation.countryName);
+      const country = notHasCountry ? 'Unknown' : visitLocation.countryName;
+      return assoc(country, (stats[country]|| 0) + 1, stats);
+    },
+    {},
+    visits,
+  );
diff --git a/test/visits/services/VisitsParser.test.js b/test/visits/services/VisitsParser.test.js
index e2141c73..568ebb71 100644
--- a/test/visits/services/VisitsParser.test.js
+++ b/test/visits/services/VisitsParser.test.js
@@ -1,4 +1,9 @@
-import visitsParser from '../../../src/visits/services/VisitsParser';
+import {
+  processOsStats,
+  processBrowserStats,
+  processReferrersStats,
+  processCountriesStats,
+} from '../../../src/visits/services/VisitsParser';
 
 describe('VisitsParser', () => {
   const visits = [
@@ -36,7 +41,7 @@ describe('VisitsParser', () => {
 
   describe('processOsStats', () => {
     it('properly parses OS stats', () => {
-      expect(visitsParser.processOsStats(visits)).toEqual({
+      expect(processOsStats(visits)).toEqual({
         'Linux': 3,
         'Windows': 1,
         'MacOS': 1,
@@ -46,7 +51,7 @@ describe('VisitsParser', () => {
 
   describe('processBrowserStats', () => {
     it('properly parses browser stats', () => {
-      expect(visitsParser.processBrowserStats(visits)).toEqual({
+      expect(processBrowserStats(visits)).toEqual({
         'Firefox': 2,
         'Chrome': 2,
         'Opera': 1,
@@ -56,7 +61,7 @@ describe('VisitsParser', () => {
 
   describe('processReferrersStats', () => {
     it('properly parses referrer stats', () => {
-      expect(visitsParser.processReferrersStats(visits)).toEqual({
+      expect(processReferrersStats(visits)).toEqual({
         'Unknown': 2,
         'google.com': 2,
         'm.facebook.com': 1,
@@ -66,7 +71,7 @@ describe('VisitsParser', () => {
 
   describe('processCountriesStats', () => {
     it('properly parses countries stats', () => {
-      expect(visitsParser.processCountriesStats(visits)).toEqual({
+      expect(processCountriesStats(visits)).toEqual({
         'Spain': 3,
         'United States': 1,
         'Unknown': 1,

From 43f4b938ae07e45090baad81034e6d950eeee1ac Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 25 Aug 2018 10:22:25 +0200
Subject: [PATCH 51/66] Added stylelint config

---
 .stylelintrc |  11 +
 package.json |   5 +
 yarn.lock    | 907 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 905 insertions(+), 18 deletions(-)
 create mode 100644 .stylelintrc

diff --git a/.stylelintrc b/.stylelintrc
new file mode 100644
index 00000000..c8ae1880
--- /dev/null
+++ b/.stylelintrc
@@ -0,0 +1,11 @@
+{
+  "extends": [
+    "stylelint-config-adidas",
+    "stylelint-config-adidas-bem",
+    "stylelint-config-recommended-scss"
+  ],
+  "syntax": "scss",
+  "plugins": [
+    "stylelint-scss"
+  ]
+}
diff --git a/package.json b/package.json
index c408461c..91ce6d22 100644
--- a/package.json
+++ b/package.json
@@ -84,6 +84,11 @@
     "serve": "^10.0.0",
     "sinon": "^6.1.5",
     "style-loader": "0.19.0",
+    "stylelint": "^9.5.0",
+    "stylelint-config-adidas": "^1.0.1",
+    "stylelint-config-adidas-bem": "^1.0.1",
+    "stylelint-config-recommended-scss": "^3.2.0",
+    "stylelint-scss": "^3.3.0",
     "sw-precache-webpack-plugin": "0.11.4",
     "url-loader": "0.6.2",
     "webpack": "3.8.1",
diff --git a/yarn.lock b/yarn.lock
index 29189cc7..99096d01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,111 @@
 # yarn lockfile v1
 
 
+"@babel/code-frame@7.0.0-rc.3":
+  version "7.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-rc.3.tgz#d77a587401f818a3168700f596e41cd6905947b2"
+  dependencies:
+    "@babel/highlight" "7.0.0-rc.3"
+
+"@babel/core@^7.0.0-rc.1":
+  version "7.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.0.0-rc.3.tgz#0c3b5c4fcc65ea3fc7c019202aca6cd0b17705e7"
+  dependencies:
+    "@babel/code-frame" "7.0.0-rc.3"
+    "@babel/generator" "7.0.0-rc.3"
+    "@babel/helpers" "7.0.0-rc.3"
+    "@babel/parser" "7.0.0-rc.3"
+    "@babel/template" "7.0.0-rc.3"
+    "@babel/traverse" "7.0.0-rc.3"
+    "@babel/types" "7.0.0-rc.3"
+    convert-source-map "^1.1.0"
+    debug "^3.1.0"
+    json5 "^0.5.0"
+    lodash "^4.17.10"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/generator@7.0.0-rc.3":
+  version "7.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-rc.3.tgz#3267085de2d9b8779bde79052ee5f7070d99a5ab"
+  dependencies:
+    "@babel/types" "7.0.0-rc.3"
+    jsesc "^2.5.1"
+    lodash "^4.17.10"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
+"@babel/helper-function-name@7.0.0-rc.3":
+  version "7.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-rc.3.tgz#ddfb3793fe6ca13be7161afa045971b8e82f96e8"
+  dependencies:
+    "@babel/helper-get-function-arity" "7.0.0-rc.3"
+    "@babel/template" "7.0.0-rc.3"
+    "@babel/types" "7.0.0-rc.3"
+
+"@babel/helper-get-function-arity@7.0.0-rc.3":
+  version "7.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-rc.3.tgz#b9fb083977e1639aac6c9c06b2de7b849aa6fea5"
+  dependencies:
+    "@babel/types" "7.0.0-rc.3"
+
+"@babel/helper-split-export-declaration@7.0.0-rc.3":
+  version "7.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-rc.3.tgz#42ca01340ddb68ab471f81e6ff2c6270dbdbd113"
+  dependencies:
+    "@babel/types" "7.0.0-rc.3"
+
+"@babel/helpers@7.0.0-rc.3":
+  version "7.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.0.0-rc.3.tgz#321c6b575d4d2c0e7b9f33ea085b8ecaa1965b24"
+  dependencies:
+    "@babel/template" "7.0.0-rc.3"
+    "@babel/traverse" "7.0.0-rc.3"
+    "@babel/types" "7.0.0-rc.3"
+
+"@babel/highlight@7.0.0-rc.3":
+  version "7.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-rc.3.tgz#c2ee83f8e5c0c387279a8c48e06fef2e32027004"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^4.0.0"
+
+"@babel/parser@7.0.0-rc.3":
+  version "7.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.0.0-rc.3.tgz#859d7b60ef6b939aab5f6d4f4bffbb7bafdc418b"
+
+"@babel/template@7.0.0-rc.3":
+  version "7.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-rc.3.tgz#2ba7d00f86744762632d06a0ffb0494f8443581f"
+  dependencies:
+    "@babel/code-frame" "7.0.0-rc.3"
+    "@babel/parser" "7.0.0-rc.3"
+    "@babel/types" "7.0.0-rc.3"
+
+"@babel/traverse@7.0.0-rc.3":
+  version "7.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-rc.3.tgz#bcf659e46d24244ab51379c849093f8c4e54d239"
+  dependencies:
+    "@babel/code-frame" "7.0.0-rc.3"
+    "@babel/generator" "7.0.0-rc.3"
+    "@babel/helper-function-name" "7.0.0-rc.3"
+    "@babel/helper-split-export-declaration" "7.0.0-rc.3"
+    "@babel/parser" "7.0.0-rc.3"
+    "@babel/types" "7.0.0-rc.3"
+    debug "^3.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.10"
+
+"@babel/types@7.0.0-rc.3":
+  version "7.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-rc.3.tgz#877ebc543b139f4a1e4c9bd8849c25ab9aea8f41"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.10"
+    to-fast-properties "^2.0.0"
+
 "@fortawesome/fontawesome-common-types@^0.1.7":
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz#4336c4b06d0b5608ff1215464b66fcf9f4795284"
@@ -31,6 +136,17 @@
     humps "^2.0.1"
     prop-types "^15.5.7"
 
+"@mrmlnc/readdir-enhanced@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
+  dependencies:
+    call-me-maybe "^1.0.1"
+    glob-to-regexp "^0.3.0"
+
+"@nodelib/fs.stat@^1.0.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.1.tgz#53f349bb986ab273d601175aa1b25a655ab90ee3"
+
 "@sinonjs/commons@^1.0.1":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.0.2.tgz#3e0ac737781627b8844257fadc3d803997d0526e"
@@ -417,6 +533,17 @@ autoprefixer@^6.3.1:
     postcss "^5.2.16"
     postcss-value-parser "^3.2.3"
 
+autoprefixer@^9.0.0:
+  version "9.1.3"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.1.3.tgz#bd5940ccb9d1bfa3508308659915f0a14394c8d5"
+  dependencies:
+    browserslist "^4.0.2"
+    caniuse-lite "^1.0.30000878"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^7.0.2"
+    postcss-value-parser "^3.2.3"
+
 aws-sign2@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
@@ -1102,6 +1229,10 @@ babylon@^6.17.0, babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
 
+bail@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.3.tgz#63cfb9ddbac829b02a3128cd53224be78e6c21a3"
+
 balanced-match@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
@@ -1317,6 +1448,14 @@ browserslist@^2.1.2, browserslist@^2.5.1:
     caniuse-lite "^1.0.30000792"
     electron-to-chromium "^1.3.30"
 
+browserslist@^4.0.2:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.1.0.tgz#81cbb8e52dfa09918f93c6e051d779cb7360785d"
+  dependencies:
+    caniuse-lite "^1.0.30000878"
+    electron-to-chromium "^1.3.61"
+    node-releases "^1.0.0-alpha.11"
+
 bser@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/bser/-/bser-1.0.2.tgz#381116970b2a6deea5646dd15dd7278444b56169"
@@ -1375,6 +1514,10 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
+call-me-maybe@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
+
 caller-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
@@ -1403,6 +1546,14 @@ camelcase-keys@^2.0.0:
     camelcase "^2.0.0"
     map-obj "^1.0.0"
 
+camelcase-keys@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-4.2.0.tgz#a2aa5fb1af688758259c32c141426d78923b9b77"
+  dependencies:
+    camelcase "^4.1.0"
+    map-obj "^2.0.0"
+    quick-lru "^1.0.0"
+
 camelcase@^1.0.2:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
@@ -1436,6 +1587,10 @@ caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000792:
   version "1.0.30000874"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000874.tgz#a641b1f1c420d58d9b132920ef6ba87bbdcd2223"
 
+caniuse-lite@^1.0.30000878:
+  version "1.0.30000878"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000878.tgz#c644c39588dd42d3498e952234c372e5a40a4123"
+
 capture-stack-trace@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
@@ -1448,6 +1603,10 @@ caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
 
+ccount@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.3.tgz#f1cec43f332e2ea5a569fd46f9f5bde4e6102aff"
+
 center-align@^0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
@@ -1473,6 +1632,22 @@ chalk@2.4.1, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+character-entities-html4@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-1.1.2.tgz#c44fdde3ce66b52e8d321d6c1bf46101f0150610"
+
+character-entities-legacy@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.2.tgz#7c6defb81648498222c9855309953d05f4d63a9c"
+
+character-entities@^1.0.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.2.tgz#58c8f371c0774ef0ba9b2aca5f00d8f100e6e363"
+
+character-reference-invalid@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.2.tgz#21e421ad3d84055952dab4a43a04e73cd425d3ed"
+
 chardet@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
@@ -1632,6 +1807,13 @@ clone-deep@^2.0.1:
     kind-of "^6.0.0"
     shallow-clone "^1.0.0"
 
+clone-regexp@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/clone-regexp/-/clone-regexp-1.0.1.tgz#051805cd33173375d82118fc0918606da39fd60f"
+  dependencies:
+    is-regexp "^1.0.0"
+    is-supported-regexp-flag "^1.0.0"
+
 clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
@@ -1650,6 +1832,10 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
+collapse-white-space@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.4.tgz#ce05cf49e54c3277ae573036a26851ba430a0091"
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -1811,7 +1997,7 @@ content-type@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
 
-convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
+convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
 
@@ -1857,6 +2043,14 @@ cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
     parse-json "^2.2.0"
     require-from-string "^1.1.0"
 
+cosmiconfig@^5.0.0:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.0.6.tgz#dca6cf680a0bd03589aff684700858c81abeeb39"
+  dependencies:
+    is-directory "^0.3.1"
+    js-yaml "^3.9.0"
+    parse-json "^4.0.0"
+
 create-ecdh@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
@@ -1980,6 +2174,10 @@ cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
 
+cssesc@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-1.0.1.tgz#ef7bd8d0229ed6a3a7051ff7771265fe7330e0a8"
+
 "cssnano@>=2.6.1 <4":
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
@@ -2070,13 +2268,20 @@ debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.
   dependencies:
     ms "2.0.0"
 
-debug@^3.0.1, debug@^3.1.0:
+debug@^3.0.0, debug@^3.0.1, debug@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
   dependencies:
     ms "2.0.0"
 
-decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
+decamelize-keys@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
+  dependencies:
+    decamelize "^1.1.0"
+    map-obj "^1.0.0"
+
+decamelize@^1.0.0, decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
@@ -2219,6 +2424,13 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
+dir-glob@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
+  dependencies:
+    arrify "^1.0.1"
+    path-type "^3.0.0"
+
 discontinuous-range@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
@@ -2320,7 +2532,7 @@ domutils@^1.5.1:
     dom-serializer "0"
     domelementtype "1"
 
-dot-prop@^4.1.0:
+dot-prop@^4.1.0, dot-prop@^4.1.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
   dependencies:
@@ -2357,6 +2569,10 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30:
   version "1.3.55"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.55.tgz#f150e10b20b77d9d41afcca312efe0c3b1a7fdce"
 
+electron-to-chromium@^1.3.61:
+  version "1.3.61"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.61.tgz#a8ac295b28d0f03d85e37326fd16b6b6b17a1795"
+
 elliptic@^6.0.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@@ -2446,7 +2662,7 @@ errno@^0.1.3, errno@~0.1.7:
   dependencies:
     prr "~1.0.1"
 
-error-ex@^1.2.0:
+error-ex@^1.2.0, error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
   dependencies:
@@ -2775,6 +2991,12 @@ execa@^0.8.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execall@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/execall/-/execall-1.0.0.tgz#73d0904e395b3cab0658b08d09ec25307f29bb73"
+  dependencies:
+    clone-regexp "^1.0.0"
+
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
@@ -2853,7 +3075,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@~3.0.0, extend@~3.0.1:
+extend@^3.0.0, extend@~3.0.0, extend@~3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
 
@@ -2909,6 +3131,17 @@ fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
 
+fast-glob@^2.0.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.2.tgz#71723338ac9b4e0e2fff1d6748a2a13d5ed352bf"
+  dependencies:
+    "@mrmlnc/readdir-enhanced" "^2.2.1"
+    "@nodelib/fs.stat" "^1.0.1"
+    glob-parent "^3.1.0"
+    is-glob "^4.0.0"
+    merge2 "^1.2.1"
+    micromatch "^3.1.10"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
@@ -3222,6 +3455,10 @@ get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
 
+get-stdin@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
+
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -3260,6 +3497,10 @@ glob-slash@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/glob-slash/-/glob-slash-1.0.0.tgz#fe52efa433233f74a2fe64c7abb9bc848202ab95"
 
+glob-to-regexp@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
+
 glob@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
@@ -3305,6 +3546,10 @@ global-prefix@^1.0.1:
     is-windows "^1.0.1"
     which "^1.2.14"
 
+globals@^11.1.0:
+  version "11.7.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.7.0.tgz#a583faa43055b1aca771914bf68258e2fc125673"
+
 globals@^9.17.0, globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
@@ -3330,6 +3575,22 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+globby@^8.0.0:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-8.0.1.tgz#b5ad48b8aa80b35b814fc1281ecc851f1d2b5b50"
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "^2.0.0"
+    fast-glob "^2.0.2"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
+globjoin@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
+
 globule@^1.0.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.1.tgz#5dffb1b191f22d20797a9369b49eab4e9839696d"
@@ -3338,6 +3599,12 @@ globule@^1.0.0:
     lodash "~4.17.10"
     minimatch "~3.0.2"
 
+gonzales-pe@4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/gonzales-pe/-/gonzales-pe-4.2.3.tgz#41091703625433285e0aee3aa47829fc1fbeb6f2"
+  dependencies:
+    minimist "1.1.x"
+
 got@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
@@ -3568,6 +3835,10 @@ html-minifier@^3.2.3:
     relateurl "0.2.x"
     uglify-js "3.4.x"
 
+html-tags@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
+
 html-webpack-plugin@2.29.0:
   version "2.29.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.29.0.tgz#e987f421853d3b6938c8c4c8171842e5fd17af23"
@@ -3579,7 +3850,7 @@ html-webpack-plugin@2.29.0:
     pretty-error "^2.0.2"
     toposort "^1.0.0"
 
-htmlparser2@^3.9.1:
+htmlparser2@^3.9.1, htmlparser2@^3.9.2:
   version "3.9.2"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
   dependencies:
@@ -3696,14 +3967,22 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
-ignore@^3.3.3:
+ignore@^3.3.3, ignore@^3.3.5:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
 
+ignore@^4.0.0:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+
 import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
 
+import-lazy@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-3.1.0.tgz#891279202c8a2280fdbd6674dbd8da1a1dfc67cc"
+
 import-local@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-0.1.1.tgz#b1179572aacdc11c6a91009fb430dbcab5f668a8"
@@ -3725,6 +4004,10 @@ indent-string@^2.1.0:
   dependencies:
     repeating "^2.0.0"
 
+indent-string@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
+
 indexes-of@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
@@ -3815,6 +4098,21 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-alphabetical@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.2.tgz#1fa6e49213cb7885b75d15862fb3f3d96c884f41"
+
+is-alphanumeric@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz#4a9cef71daf4c001c1d81d63d140cf53fd6889f4"
+
+is-alphanumerical@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.2.tgz#1138e9ae5040158dc6ff76b820acd6b7a181fd40"
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -3829,7 +4127,7 @@ is-boolean-object@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.0.tgz#98f8b28030684219a95f375cfbd88ce3405dff93"
 
-is-buffer@^1.1.5:
+is-buffer@^1.1.4, is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
 
@@ -3865,6 +4163,10 @@ is-date-object@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
 
+is-decimal@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.2.tgz#894662d6a8709d307f3a276ca4339c8fa5dff0ff"
+
 is-descriptor@^0.1.0:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
@@ -3947,6 +4249,10 @@ is-glob@^4.0.0:
   dependencies:
     is-extglob "^2.1.1"
 
+is-hexadecimal@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.2.tgz#b6e710d7d07bb66b98cb8cece5c9b4921deeb835"
+
 is-installed-globally@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
@@ -3998,7 +4304,7 @@ is-path-inside@^1.0.0:
   dependencies:
     path-is-inside "^1.0.1"
 
-is-plain-obj@^1.0.0:
+is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
 
@@ -4030,6 +4336,10 @@ is-regex@^1.0.4:
   dependencies:
     has "^1.0.1"
 
+is-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
+
 is-resolvable@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
@@ -4054,6 +4364,10 @@ is-subset@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
 
+is-supported-regexp-flag@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-supported-regexp-flag/-/is-supported-regexp-flag-1.0.1.tgz#21ee16518d2c1dd3edd3e9a0d57e50207ac364ca"
+
 is-svg@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
@@ -4072,10 +4386,18 @@ is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
 
+is-whitespace-character@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz#ede53b4c6f6fb3874533751ec9280d01928d03ed"
+
 is-windows@^1.0.1, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
 
+is-word-character@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.2.tgz#46a5dac3f2a1840898b91e576cd40d493f3ae553"
+
 is-wsl@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
@@ -4402,7 +4724,7 @@ js-base64@^2.1.8, js-base64@^2.1.9:
   version "2.4.8"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.8.tgz#57a9b130888f956834aa40c5b165ba59c758f033"
 
-"js-tokens@^3.0.0 || ^4.0.0":
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
 
@@ -4410,7 +4732,7 @@ js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.1:
+js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.0, js-yaml@^3.9.1:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
   dependencies:
@@ -4456,6 +4778,10 @@ jsesc@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
 
+jsesc@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.1.tgz#e421a2a8e20d6b0819df28908f782526b96dd1fe"
+
 jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
@@ -4464,6 +4790,10 @@ json-loader@^0.5.4:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
 
+json-parse-better-errors@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+
 json-schema-traverse@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
@@ -4563,6 +4893,10 @@ klaw@^1.0.0:
   optionalDependencies:
     graceful-fs "^4.1.9"
 
+known-css-properties@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.6.1.tgz#31b5123ad03d8d1a3f36bd4155459c981173478b"
+
 latest-version@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
@@ -4609,6 +4943,15 @@ load-json-file@^2.0.0:
     pify "^2.0.0"
     strip-bom "^3.0.0"
 
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+    strip-bom "^3.0.0"
+
 loader-fs-cache@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.1.tgz#56e0bf08bd9708b26a765b68509840c8dec9fdbc"
@@ -4725,10 +5068,16 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@~4.17.10:
+lodash@>=3.10.0, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@~4.17.10:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
 
+log-symbols@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
+  dependencies:
+    chalk "^2.0.1"
+
 loglevel@^1.4.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
@@ -4737,6 +5086,10 @@ lolex@^2.3.2, lolex@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/lolex/-/lolex-2.7.1.tgz#e40a8c4d1f14b536aa03e42a537c7adbaf0c20be"
 
+longest-streak@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.2.tgz#2421b6ba939a443bb9ffebf596585a50b4c38e2e"
+
 longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
@@ -4789,12 +5142,24 @@ map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
 
+map-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9"
+
 map-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
   dependencies:
     object-visit "^1.0.0"
 
+markdown-escapes@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.2.tgz#e639cbde7b99c841c0bacc8a07982873b46d2122"
+
+markdown-table@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.2.tgz#c78db948fa879903a41bce522e3b96f801c63786"
+
 material-colors@^1.2.1:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
@@ -4807,6 +5172,10 @@ math-random@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"
 
+mathml-tag-names@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.0.tgz#490b70e062ee24636536e3d9481e333733d00f2c"
+
 md5.js@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
@@ -4814,6 +5183,12 @@ md5.js@^1.3.4:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+mdast-util-compact@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-1.0.2.tgz#c12ebe16fffc84573d3e19767726de226e95f649"
+  dependencies:
+    unist-util-visit "^1.1.0"
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -4846,10 +5221,28 @@ meow@^3.3.0, meow@^3.7.0:
     redent "^1.0.0"
     trim-newlines "^1.0.0"
 
+meow@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-5.0.0.tgz#dfc73d63a9afc714a5e371760eb5c88b91078aa4"
+  dependencies:
+    camelcase-keys "^4.0.0"
+    decamelize-keys "^1.0.0"
+    loud-rejection "^1.0.0"
+    minimist-options "^3.0.1"
+    normalize-package-data "^2.3.4"
+    read-pkg-up "^3.0.0"
+    redent "^2.0.0"
+    trim-newlines "^2.0.0"
+    yargs-parser "^10.0.0"
+
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
 
+merge2@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.2.2.tgz#03212e3da8d86c4d8523cebd6318193414f94e34"
+
 merge@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
@@ -4876,7 +5269,7 @@ micromatch@^2.1.5, micromatch@^2.3.11:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
-micromatch@^3.1.4, micromatch@^3.1.8:
+micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
   dependencies:
@@ -4953,10 +5346,21 @@ minimatch@3.0.3:
   dependencies:
     brace-expansion "^1.0.0"
 
+minimist-options@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-3.0.2.tgz#fba4c8191339e13ecf4d61beb03f070103f3d954"
+  dependencies:
+    arrify "^1.0.1"
+    is-plain-obj "^1.1.0"
+
 minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
+minimist@1.1.x:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.1.3.tgz#3bedfd91a92d39016fcfaa1c681e8faa1a1efda8"
+
 minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
@@ -5179,6 +5583,12 @@ node-pre-gyp@^0.10.0:
     semver "^5.3.0"
     tar "^4"
 
+node-releases@^1.0.0-alpha.11:
+  version "1.0.0-alpha.11"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.0.0-alpha.11.tgz#73c810acc2e5b741a17ddfbb39dfca9ab9359d8a"
+  dependencies:
+    semver "^5.3.0"
+
 node-sass@^4.9.0:
   version "4.9.2"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.9.2.tgz#5e63fe6bd0f2ae3ac9d6c14ede8620e2b8bdb437"
@@ -5242,6 +5652,10 @@ normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
 
+normalize-selector@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03"
+
 normalize-url@^1.4.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
@@ -5527,6 +5941,17 @@ parse-asn1@^5.0.0:
     evp_bytestokey "^1.0.0"
     pbkdf2 "^3.0.3"
 
+parse-entities@^1.0.2, parse-entities@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.1.2.tgz#9eaf719b29dc3bd62246b4332009072e01527777"
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-glob@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
@@ -5542,6 +5967,13 @@ parse-json@^2.2.0:
   dependencies:
     error-ex "^1.2.0"
 
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
 parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
@@ -5626,6 +6058,12 @@ path-type@^2.0.0:
   dependencies:
     pify "^2.0.0"
 
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  dependencies:
+    pify "^3.0.0"
+
 pbkdf2@^3.0.3:
   version "3.0.16"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.16.tgz#7404208ec6b01b62d85bf83853a8064f8d9c2a5c"
@@ -5652,6 +6090,10 @@ pify@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
 
+pify@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.0.tgz#db04c982b632fd0df9090d14aaf1c8413cadb695"
+
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
@@ -5694,6 +6136,14 @@ posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
 
+postcss-bem-linter@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-bem-linter/-/postcss-bem-linter-3.1.0.tgz#55352412fb481aad0d05148185a990734e1ca030"
+  dependencies:
+    minimatch "^3.0.3"
+    postcss "^6.0.6"
+    postcss-resolve-nested-selector "^0.1.1"
+
 postcss-calc@^5.2.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
@@ -5760,6 +6210,26 @@ postcss-flexbugs-fixes@3.2.0:
   dependencies:
     postcss "^6.0.1"
 
+postcss-html@^0.33.0:
+  version "0.33.0"
+  resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.33.0.tgz#8ab6067d7a8a234e1937920b38760e3be1dca070"
+  dependencies:
+    htmlparser2 "^3.9.2"
+
+postcss-jsx@^0.33.0:
+  version "0.33.0"
+  resolved "https://registry.yarnpkg.com/postcss-jsx/-/postcss-jsx-0.33.0.tgz#433f8aadd6f3b0ee403a62b441bca8db9c87471c"
+  dependencies:
+    "@babel/core" "^7.0.0-rc.1"
+  optionalDependencies:
+    postcss-styled ">=0.33.0"
+
+postcss-less@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-2.0.0.tgz#5d190b8e057ca446d60fe2e2587ad791c9029fb8"
+  dependencies:
+    postcss "^5.2.16"
+
 postcss-load-config@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
@@ -5792,6 +6262,17 @@ postcss-loader@2.0.8:
     postcss-load-config "^1.2.0"
     schema-utils "^0.3.0"
 
+postcss-markdown@^0.33.0:
+  version "0.33.0"
+  resolved "https://registry.yarnpkg.com/postcss-markdown/-/postcss-markdown-0.33.0.tgz#2d0462742ee108c9d6020780184b499630b8b33a"
+  dependencies:
+    remark "^9.0.0"
+    unist-util-find-all-after "^1.0.2"
+
+postcss-media-query-parser@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
+
 postcss-merge-idents@^2.1.5:
   version "2.1.7"
   resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
@@ -5923,6 +6404,38 @@ postcss-reduce-transforms@^1.0.3:
     postcss "^5.0.8"
     postcss-value-parser "^3.0.1"
 
+postcss-reporter@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-reporter/-/postcss-reporter-5.0.0.tgz#a14177fd1342829d291653f2786efd67110332c3"
+  dependencies:
+    chalk "^2.0.1"
+    lodash "^4.17.4"
+    log-symbols "^2.0.0"
+    postcss "^6.0.8"
+
+postcss-resolve-nested-selector@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
+
+postcss-safe-parser@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-4.0.1.tgz#8756d9e4c36fdce2c72b091bbc8ca176ab1fcdea"
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-sass@^0.3.0:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/postcss-sass/-/postcss-sass-0.3.2.tgz#17f3074cecb28128b156f1a4407c6ad075d7e00c"
+  dependencies:
+    gonzales-pe "4.2.3"
+    postcss "6.0.22"
+
+postcss-scss@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-2.0.0.tgz#248b0a28af77ea7b32b1011aba0f738bda27dea1"
+  dependencies:
+    postcss "^7.0.0"
+
 postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
@@ -5931,6 +6444,26 @@ postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss-selector-parser@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
+  dependencies:
+    dot-prop "^4.1.1"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-selector-parser@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz#50c6570f40579036d8e63f23e6c0626fe5743527"
+  dependencies:
+    cssesc "^1.0.1"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-styled@>=0.33.0, postcss-styled@^0.33.0:
+  version "0.33.0"
+  resolved "https://registry.yarnpkg.com/postcss-styled/-/postcss-styled-0.33.0.tgz#69be377584105a582fda7e4f76888e5b97eed737"
+
 postcss-svgo@^2.1.1:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
@@ -5940,6 +6473,14 @@ postcss-svgo@^2.1.1:
     postcss-value-parser "^3.2.3"
     svgo "^0.7.0"
 
+postcss-syntax@0.32.0:
+  version "0.32.0"
+  resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.32.0.tgz#038a9a5a11d488709e8d5402a12007bc3fd0a77b"
+
+postcss-syntax@^0.33.0:
+  version "0.33.0"
+  resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.33.0.tgz#59c0c678d2f9ecefa84c6ce9ef46fc805c54ab3a"
+
 postcss-unique-selectors@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
@@ -5960,6 +6501,22 @@ postcss-zindex@^2.0.1:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
+postcss@6.0.22:
+  version "6.0.22"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.22.tgz#e23b78314905c3b90cbd61702121e7a78848f2a3"
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
+postcss@>=5.0.19, postcss@^7.0.0, postcss@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.2.tgz#7b5a109de356804e27f95a960bef0e4d5bc9bb18"
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
 postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16:
   version "5.2.18"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
@@ -5969,7 +6526,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13:
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13, postcss@^6.0.6, postcss@^6.0.8:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
   dependencies:
@@ -6118,6 +6675,10 @@ querystringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.0.0.tgz#fa3ed6e68eb15159457c89b37bc6472833195755"
 
+quick-lru@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
+
 raf@3.4.0, raf@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
@@ -6395,6 +6956,13 @@ read-pkg-up@^2.0.0:
     find-up "^2.0.0"
     read-pkg "^2.0.0"
 
+read-pkg-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^3.0.0"
+
 read-pkg@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
@@ -6411,6 +6979,14 @@ read-pkg@^2.0.0:
     normalize-package-data "^2.3.2"
     path-type "^2.0.0"
 
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  dependencies:
+    load-json-file "^4.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^3.0.0"
+
 readable-stream@1.0:
   version "1.0.34"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
@@ -6454,6 +7030,13 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
+redent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
+  dependencies:
+    indent-string "^3.0.0"
+    strip-indent "^2.0.0"
+
 reduce-css-calc@^1.2.6:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
@@ -6551,6 +7134,53 @@ relateurl@0.2.x:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
 
+remark-parse@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-5.0.0.tgz#4c077f9e499044d1d5c13f80d7a98cf7b9285d95"
+  dependencies:
+    collapse-white-space "^1.0.2"
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-whitespace-character "^1.0.0"
+    is-word-character "^1.0.0"
+    markdown-escapes "^1.0.0"
+    parse-entities "^1.1.0"
+    repeat-string "^1.5.4"
+    state-toggle "^1.0.0"
+    trim "0.0.1"
+    trim-trailing-lines "^1.0.0"
+    unherit "^1.0.4"
+    unist-util-remove-position "^1.0.0"
+    vfile-location "^2.0.0"
+    xtend "^4.0.1"
+
+remark-stringify@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-5.0.0.tgz#336d3a4d4a6a3390d933eeba62e8de4bd280afba"
+  dependencies:
+    ccount "^1.0.0"
+    is-alphanumeric "^1.0.0"
+    is-decimal "^1.0.0"
+    is-whitespace-character "^1.0.0"
+    longest-streak "^2.0.1"
+    markdown-escapes "^1.0.0"
+    markdown-table "^1.1.0"
+    mdast-util-compact "^1.0.0"
+    parse-entities "^1.0.2"
+    repeat-string "^1.5.4"
+    state-toggle "^1.0.0"
+    stringify-entities "^1.0.1"
+    unherit "^1.0.4"
+    xtend "^4.0.1"
+
+remark@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/remark/-/remark-9.0.0.tgz#c5cfa8ec535c73a67c4b0f12bfdbd3a67d8b2f60"
+  dependencies:
+    remark-parse "^5.0.0"
+    remark-stringify "^5.0.0"
+    unified "^6.0.0"
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -6569,7 +7199,7 @@ repeat-element@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
 
-repeat-string@^1.5.2, repeat-string@^1.6.1:
+repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
 
@@ -6579,6 +7209,10 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
+replace-ext@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
+
 request@2.87.0, request@^2.79.0:
   version "2.87.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
@@ -6675,6 +7309,10 @@ resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
 
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+
 resolve-pathname@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"
@@ -7102,7 +7740,7 @@ source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
 
-source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
+source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
@@ -7161,6 +7799,10 @@ spdy@^3.4.1:
     select-hose "^2.0.0"
     spdy-transport "^2.0.18"
 
+specificity@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.4.0.tgz#301b1ab5455987c37d6d94f8c956ef9d9fb48c1d"
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -7186,6 +7828,10 @@ sshpk@^1.7.0:
     jsbn "~0.1.0"
     tweetnacl "~0.14.0"
 
+state-toggle@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.1.tgz#c3cb0974f40a6a0f8e905b96789eb41afa1cde3a"
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -7259,6 +7905,15 @@ string_decoder@~0.10.x:
   version "0.10.31"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
 
+stringify-entities@^1.0.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-1.3.2.tgz#a98417e5471fd227b3e45d3db1861c11caf668f7"
+  dependencies:
+    character-entities-html4 "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 stringstream@~0.0.4:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.6.tgz#7880225b0d4ad10e30927d167a1d6f2fd3b33a72"
@@ -7295,6 +7950,10 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
+strip-indent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
+
 strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
@@ -7306,6 +7965,115 @@ style-loader@0.19.0:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
 
+style-search@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
+
+stylelint-config-adidas-bem@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stylelint-config-adidas-bem/-/stylelint-config-adidas-bem-1.0.1.tgz#3deca21f1c22bfe8f7a03d5748c99200afc1c077"
+  dependencies:
+    postcss-syntax "0.32.0"
+    stylelint-selector-bem-pattern "2.0.0"
+
+stylelint-config-adidas@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stylelint-config-adidas/-/stylelint-config-adidas-1.0.1.tgz#1016f278e55838d949ad8515d0378b099b6b53fd"
+  dependencies:
+    stylelint-config-standard "18.2.0"
+    stylelint-selector-bem-pattern "2.0.0"
+
+stylelint-config-recommended-scss@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-3.2.0.tgz#5761be65e28b58fa6a4a628b71291e83e921d10f"
+  dependencies:
+    stylelint-config-recommended "^2.0.0"
+
+stylelint-config-recommended@^2.0.0, stylelint-config-recommended@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-2.1.0.tgz#f526d5c771c6811186d9eaedbed02195fee30858"
+
+stylelint-config-standard@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-18.2.0.tgz#6283149aba7f64f18731aef8f0abfb35cf619e06"
+  dependencies:
+    stylelint-config-recommended "^2.1.0"
+
+stylelint-scss@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.3.0.tgz#0de0ef241d347e32ed28a2cffb8397c37ae2738c"
+  dependencies:
+    lodash "^4.17.10"
+    postcss-media-query-parser "^0.2.3"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-selector-parser "^4.0.0"
+    postcss-value-parser "^3.3.0"
+
+stylelint-selector-bem-pattern@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-selector-bem-pattern/-/stylelint-selector-bem-pattern-2.0.0.tgz#9a6130c9c90963b30e925c917079d6c8fed73f45"
+  dependencies:
+    lodash ">=3.10.0"
+    postcss ">=5.0.19"
+    postcss-bem-linter "^3.0.0"
+    stylelint ">=3.0.2"
+
+stylelint@>=3.0.2, stylelint@^9.5.0:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.5.0.tgz#f7afb45342abc4acf28a8da8a48373e9f79c1fb4"
+  dependencies:
+    autoprefixer "^9.0.0"
+    balanced-match "^1.0.0"
+    chalk "^2.4.1"
+    cosmiconfig "^5.0.0"
+    debug "^3.0.0"
+    execall "^1.0.0"
+    file-entry-cache "^2.0.0"
+    get-stdin "^6.0.0"
+    globby "^8.0.0"
+    globjoin "^0.1.4"
+    html-tags "^2.0.0"
+    ignore "^4.0.0"
+    import-lazy "^3.1.0"
+    imurmurhash "^0.1.4"
+    known-css-properties "^0.6.0"
+    lodash "^4.17.4"
+    log-symbols "^2.0.0"
+    mathml-tag-names "^2.0.1"
+    meow "^5.0.0"
+    micromatch "^2.3.11"
+    normalize-selector "^0.2.0"
+    pify "^4.0.0"
+    postcss "^7.0.0"
+    postcss-html "^0.33.0"
+    postcss-jsx "^0.33.0"
+    postcss-less "^2.0.0"
+    postcss-markdown "^0.33.0"
+    postcss-media-query-parser "^0.2.3"
+    postcss-reporter "^5.0.0"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-safe-parser "^4.0.0"
+    postcss-sass "^0.3.0"
+    postcss-scss "^2.0.0"
+    postcss-selector-parser "^3.1.0"
+    postcss-styled "^0.33.0"
+    postcss-syntax "^0.33.0"
+    postcss-value-parser "^3.3.0"
+    resolve-from "^4.0.0"
+    signal-exit "^3.0.2"
+    specificity "^0.4.0"
+    string-width "^2.1.0"
+    style-search "^0.1.0"
+    sugarss "^2.0.0"
+    svg-tags "^1.0.0"
+    table "^4.0.1"
+
+sugarss@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d"
+  dependencies:
+    postcss "^7.0.2"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -7328,6 +8096,10 @@ supports-color@^5.3.0, supports-color@^5.4.0:
   dependencies:
     has-flag "^3.0.0"
 
+svg-tags@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
+
 svgo@^0.7.0:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
@@ -7485,6 +8257,10 @@ to-fast-properties@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
 
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+
 to-object-path@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
@@ -7536,10 +8312,26 @@ trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
 
+trim-newlines@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20"
+
 trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
 
+trim-trailing-lines@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.1.tgz#e0ec0810fd3c3f1730516b45f49083caaf2774d9"
+
+trim@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
+
+trough@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.3.tgz#e29bd1614c6458d44869fc28b255ab7857ef7c24"
+
 "true-case-path@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.2.tgz#7ec91130924766c7f573be3020c34f8fdfd00d62"
@@ -7617,6 +8409,24 @@ underscore@~1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.4.4.tgz#61a6a32010622afa07963bf325203cf12239d604"
 
+unherit@^1.0.4:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.1.tgz#132748da3e88eab767e08fabfbb89c5e9d28628c"
+  dependencies:
+    inherits "^2.0.1"
+    xtend "^4.0.1"
+
+unified@^6.0.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-6.2.0.tgz#7fbd630f719126d67d40c644b7e3f617035f6dba"
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    is-plain-obj "^1.1.0"
+    trough "^1.0.0"
+    vfile "^2.0.0"
+    x-is-string "^0.1.0"
+
 union-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
@@ -7640,6 +8450,38 @@ unique-string@^1.0.0:
   dependencies:
     crypto-random-string "^1.0.0"
 
+unist-util-find-all-after@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-find-all-after/-/unist-util-find-all-after-1.0.2.tgz#9be49cfbae5ca1566b27536670a92836bf2f8d6d"
+  dependencies:
+    unist-util-is "^2.0.0"
+
+unist-util-is@^2.0.0, unist-util-is@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.2.tgz#1193fa8f2bfbbb82150633f3a8d2eb9a1c1d55db"
+
+unist-util-remove-position@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-1.1.2.tgz#86b5dad104d0bbfbeb1db5f5c92f3570575c12cb"
+  dependencies:
+    unist-util-visit "^1.1.0"
+
+unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
+
+unist-util-visit-parents@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-2.0.1.tgz#63fffc8929027bee04bfef7d2cce474f71cb6217"
+  dependencies:
+    unist-util-is "^2.1.2"
+
+unist-util-visit@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.0.tgz#1cb763647186dc26f5e1df5db6bd1e48b3cc2fb1"
+  dependencies:
+    unist-util-visit-parents "^2.0.0"
+
 universalify@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
@@ -7798,6 +8640,25 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vfile-location@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.3.tgz#083ba80e50968e8d420be49dd1ea9a992131df77"
+
+vfile-message@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-1.0.1.tgz#51a2ccd8a6b97a7980bb34efb9ebde9632e93677"
+  dependencies:
+    unist-util-stringify-position "^1.1.1"
+
+vfile@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-2.3.0.tgz#e62d8e72b20e83c324bc6c67278ee272488bf84a"
+  dependencies:
+    is-buffer "^1.1.4"
+    replace-ext "1.0.0"
+    unist-util-stringify-position "^1.0.0"
+    vfile-message "^1.0.0"
+
 vm-browserify@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
@@ -8040,6 +8901,10 @@ write@^0.2.1:
   dependencies:
     mkdirp "^0.5.1"
 
+x-is-string@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
+
 xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
@@ -8048,7 +8913,7 @@ xml-name-validator@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635"
 
-xtend@^4.0.0:
+xtend@^4.0.0, xtend@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
 
@@ -8064,6 +8929,12 @@ yallist@^3.0.0, yallist@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
 
+yargs-parser@^10.0.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"
+  dependencies:
+    camelcase "^4.1.0"
+
 yargs-parser@^4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"

From ed0aa6845280802867000598d54c171976d5b3f7 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 25 Aug 2018 15:59:51 +0200
Subject: [PATCH 52/66] Fixed linting issues in stylesheets

---
 package.json                       |  3 ++-
 src/common/AsideMenu.scss          |  6 +++++-
 src/common/DateInput.scss          |  4 +++-
 src/common/Home.scss               |  3 ++-
 src/common/MainHeader.scss         |  1 +
 src/common/MenuLayout.scss         |  3 ++-
 src/common/react-tagsinput.scss    | 14 ++++++--------
 src/short-urls/ShortUrlVisits.scss |  4 ++--
 src/tags/TagCard.scss              |  5 ++++-
 src/utils/SearchField.scss         |  2 ++
 10 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 91ce6d22..c7c253ed 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "lint": "yarn lint:js && yarn lint:css",
     "lint:js": "eslint src test scripts config",
-    "lint:css": "echo \"no css linting\"",
+    "lint:css": "stylelint src/**/*.scss",
+    "lint:css:fix": "yarn lint:css --fix",
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom --colors",
diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss
index 80f28016..0319f1fb 100644
--- a/src/common/AsideMenu.scss
+++ b/src/common/AsideMenu.scss
@@ -24,9 +24,10 @@ $asideMenuMobileWidth: 280px;
 
   @media (max-width: $smMax) {
     width: $asideMenuMobileWidth !important;
-    @include box-shadow(-10px 0px 50px 11px rgba(0, 0, 0, 0.55));
     transition: left 300ms;
     top: $headerHeight - 3px;
+
+    @include box-shadow(-10px 0 50px 11px rgba(0, 0, 0, .55));
   }
 }
 
@@ -46,6 +47,7 @@ $asideMenuMobileWidth: 280px;
   text-decoration: none !important;
   cursor: pointer;
 }
+
 .aside-menu__item:hover {
   background-color: $lightHoverColor;
 }
@@ -54,6 +56,7 @@ $asideMenuMobileWidth: 280px;
   color: #fff;
   background-color: $mainColor;
 }
+
 .aside-menu__item--selected:hover {
   color: #fff;
   background-color: $mainColor;
@@ -68,6 +71,7 @@ $asideMenuMobileWidth: 280px;
   color: $dangerColor;
   margin-top: auto;
 }
+
 .aside-menu__item--danger:hover {
   color: #fff;
   background-color: $dangerColor;
diff --git a/src/common/DateInput.scss b/src/common/DateInput.scss
index ba4563d5..3c759665 100644
--- a/src/common/DateInput.scss
+++ b/src/common/DateInput.scss
@@ -12,16 +12,18 @@
 
 .date-input-container__icon {
   @include vertical-align();
+
   right: .75rem;
   cursor: pointer;
 }
 
 .react-datepicker__close-icon.react-datepicker__close-icon {
   @include vertical-align();
+
   right: 0;
 }
 
-.react-datepicker__close-icon.react-datepicker__close-icon::after {
+.react-datepicker__close-icon.react-datepicker__close-icon:after {
   right: .75rem;
   line-height: 11px;
   background-color: #333;
diff --git a/src/common/Home.scss b/src/common/Home.scss
index 05abe512..a57f033b 100644
--- a/src/common/Home.scss
+++ b/src/common/Home.scss
@@ -27,10 +27,11 @@
 .home__servers-item.home__servers-item {
   text-align: left;
   position: relative;
-  padding: .75rem 2.5rem 0.75rem 1rem;
+  padding: .75rem 2.5rem .75rem 1rem;
 }
 
 .home__servers-item-icon {
   @include vertical-align();
+
   right: 1rem;
 }
diff --git a/src/common/MainHeader.scss b/src/common/MainHeader.scss
index 61ef23bb..89279c68 100644
--- a/src/common/MainHeader.scss
+++ b/src/common/MainHeader.scss
@@ -18,6 +18,7 @@
   width: 20px;
   transition: transform 300ms;
 }
+
 .main-header__toggle-icon--opened {
   transform: rotate(180deg);
 }
diff --git a/src/common/MenuLayout.scss b/src/common/MenuLayout.scss
index 724291da..78276ea9 100644
--- a/src/common/MenuLayout.scss
+++ b/src/common/MenuLayout.scss
@@ -2,6 +2,7 @@
 
 .menu-layout__swipeable {
   $offset: 15px;
+
   height: 100%;
   margin-right: -$offset;
   margin-left: -$offset;
@@ -21,7 +22,7 @@
   z-index: 1035;
   font-size: 1.5rem;
   cursor: pointer;
-  color: rgba(255,255,255,.5);
+  color: rgba(255, 255, 255, .5);
 
   @media (max-width: $smMax) {
     display: inline-block;
diff --git a/src/common/react-tagsinput.scss b/src/common/react-tagsinput.scss
index 29006fb3..cd029d09 100644
--- a/src/common/react-tagsinput.scss
+++ b/src/common/react-tagsinput.scss
@@ -9,13 +9,11 @@
 
 .react-tagsinput--focused {
   border-color: #80bdff;
-  -webkit-box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
-  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
-  -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
-  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;
-  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+  -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 {
@@ -36,7 +34,7 @@
   margin-left: 8px;
 }
 
-.react-tagsinput-tag span::before {
+.react-tagsinput-tag span:before {
   content: "\2715";
   color: #fff;
 }
diff --git a/src/short-urls/ShortUrlVisits.scss b/src/short-urls/ShortUrlVisits.scss
index 75aadecc..c75b3b78 100644
--- a/src/short-urls/ShortUrlVisits.scss
+++ b/src/short-urls/ShortUrlVisits.scss
@@ -1,7 +1,7 @@
 @import '../utils/base';
 
 .short-url-visits__date-input {
-  @media(max-width: $smMax) {
-    margin-top: 0.5rem;
+  @media (max-width: $smMax) {
+    margin-top: .5rem;
   }
 }
diff --git a/src/tags/TagCard.scss b/src/tags/TagCard.scss
index 3a369dda..6e2b56d7 100644
--- a/src/tags/TagCard.scss
+++ b/src/tags/TagCard.scss
@@ -1,7 +1,8 @@
 .tag-card.tag-card {
-  background-color: #eeeeee;
+  background-color: #eee;
   margin-bottom: .5rem;
 }
+
 .tag-card__body.tag-card__body {
   padding: .75rem;
 }
@@ -17,6 +18,7 @@
 
 .tag-card__tag-bullet {
   $width: 20px;
+
   border-radius: 50%;
   width: $width;
   height: $width;
@@ -28,6 +30,7 @@
 .tag-card__btn {
   float: right;
 }
+
 .tag-card__btn--last {
   margin-left: 3px;
 }
diff --git a/src/utils/SearchField.scss b/src/utils/SearchField.scss
index 74107ebf..6dd93bed 100644
--- a/src/utils/SearchField.scss
+++ b/src/utils/SearchField.scss
@@ -11,11 +11,13 @@
 
 .search-field__icon {
   @include vertical-align();
+
   left: 15px;
   color: #707581;
 }
 
 .search-field__close {
   @include vertical-align();
+
   right: 15px;
 }

From 6a016d8e6f8c613273dde71aad986470c13a93af Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 25 Aug 2018 23:39:27 +0200
Subject: [PATCH 53/66] Updated styles in javascript to fulfill adidas rules

---
 package.json                                  |  53 ++-
 src/App.js                                    |  26 +-
 src/api/ShlinkApiClient.js                    |  58 +--
 src/common/AsideMenu.js                       |   4 +-
 src/common/Home.js                            |  32 +-
 src/common/MainHeader.js                      |  27 +-
 src/common/MenuLayout.js                      |  42 ++-
 src/common/ScrollToTop.js                     |  27 +-
 src/index.js                                  |   8 +-
 src/reducers/index.js                         |   1 -
 src/registerServiceWorker.js                  |  20 +-
 src/servers/CreateServer.js                   |  44 ++-
 src/servers/DeleteServerButton.js             |   6 +-
 src/servers/DeleteServerModal.js              |  14 +-
 src/servers/ServersDropdown.js                |  35 +-
 src/servers/helpers/ImportServersBtn.js       |  30 +-
 src/servers/reducers/selectedServer.js        |  25 +-
 src/servers/reducers/server.js                |  11 +-
 src/servers/services/ServersExporter.js       |  11 +-
 src/servers/services/ServersImporter.js       |   6 +-
 src/servers/services/ServersService.js        |  14 +-
 src/short-urls/CreateShortUrl.js              |  40 ++-
 src/short-urls/Paginator.js                   |  97 ++---
 src/short-urls/SearchBar.js                   |  30 +-
 src/short-urls/ShortUrlVisits.js              | 131 ++++---
 src/short-urls/ShortUrls.js                   |  11 +-
 src/short-urls/ShortUrlsList.js               |  77 ++--
 .../helpers/CreateShortUrlResult.js           |  26 +-
 src/short-urls/helpers/EditTagsModal.js       |  39 +-
 src/short-urls/helpers/PreviewModal.js        |  18 +-
 src/short-urls/helpers/QrCodeModal.js         |  18 +-
 src/short-urls/helpers/ShortUrlsRow.js        |  27 +-
 src/short-urls/helpers/ShortUrlsRowMenu.js    |  36 +-
 .../reducers/shortUrlCreationResult.js        |  19 +-
 src/short-urls/reducers/shortUrlTags.js       |  14 +-
 src/short-urls/reducers/shortUrlVisits.js     |  32 +-
 src/short-urls/reducers/shortUrlsList.js      |  30 +-
 .../reducers/shortUrlsListParams.js           |   7 +
 src/tags/TagCard.js                           |  19 +-
 src/tags/TagsList.js                          |  35 +-
 src/tags/helpers/DeleteTagConfirmModal.js     |  23 +-
 src/tags/helpers/EditTagModal.js              |  53 ++-
 src/tags/reducers/tagDelete.js                |  13 +-
 src/tags/reducers/tagEdit.js                  |  19 +-
 src/tags/reducers/tagsList.js                 |  27 +-
 src/utils/ColorGenerator.js                   |  16 +-
 src/utils/ExternalLink.js                     |  19 +
 src/utils/MuttedMessage.js                    |  11 +-
 src/utils/SearchField.js                      |  10 +-
 src/utils/Storage.js                          |   6 +-
 src/utils/Tag.js                              |  24 +-
 src/utils/TagsSelector.js                     |  15 +-
 src/visits/services/VisitsParser.js           |  47 +--
 test/api/ShlinkApiClient.test.js              |  22 +-
 test/common/AsideMenu.test.js                 |  11 +-
 test/common/DateInput.test.js                 |   4 +-
 test/common/Home.test.js                      |  14 +-
 test/servers/CreateServer.test.js             |   9 +-
 test/servers/DeleteServerButton.test.js       |   7 +-
 test/servers/DeleteServerModal.test.js        |   7 +-
 test/servers/ServersDropdown.test.js          |  21 +-
 test/servers/helpers/ImportServersBtn.test.js |  14 +-
 test/servers/reducers/selectedServer.test.js  |  20 +-
 test/servers/reducers/server.test.js          |  12 +-
 test/servers/services/ServersExporter.test.js |  10 +-
 test/servers/services/ServersImporter.test.js |  13 +-
 test/servers/services/ServersService.test.js  |   4 +-
 .../reducers/shortUrlsListParams.test.js      |  14 +-
 test/visits/services/VisitsParser.test.js     |  12 +-
 yarn.lock                                     | 332 ++++++++++--------
 70 files changed, 1250 insertions(+), 759 deletions(-)
 create mode 100644 src/utils/ExternalLink.js

diff --git a/package.json b/package.json
index c7c253ed..b059bcf0 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
   "private": false,
   "scripts": {
     "lint": "yarn lint:js && yarn lint:css",
-    "lint:js": "eslint src test scripts config",
+    "lint:js": "eslint src test",
+    "lint:js:fix": "yarn lint:js --fix",
     "lint:css": "stylelint src/**/*.scss",
     "lint:css:fix": "yarn lint:css --fix",
     "start": "node scripts/start.js",
@@ -51,7 +52,7 @@
     "babel-core": "6.26.0",
     "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",
-    "babel-loader": "7.1.2",
+    "babel-loader": "^7.1.2",
     "babel-preset-react-app": "^3.1.1",
     "babel-runtime": "6.26.0",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
@@ -61,13 +62,16 @@
     "dotenv-expand": "4.2.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "4.10.0",
-    "eslint-config-react-app": "^2.1.0",
+    "eslint": "^5.4.0",
+    "eslint-config-adidas-babel": "^1.0.1",
+    "eslint-config-adidas-env": "^1.0.1",
+    "eslint-config-adidas-es6": "^1.0.1",
+    "eslint-config-adidas-react": "^1.0.1",
     "eslint-loader": "1.9.0",
-    "eslint-plugin-flowtype": "2.39.1",
-    "eslint-plugin-import": "2.8.0",
-    "eslint-plugin-jsx-a11y": "5.1.1",
-    "eslint-plugin-react": "7.4.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jest": "^21.22.0",
+    "eslint-plugin-promise": "^3.0.0",
+    "eslint-plugin-react": "^7.4.0",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "1.1.5",
     "fs-extra": "3.0.1",
@@ -138,6 +142,37 @@
     ]
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "adidas-env/browser",
+      "adidas-env/module",
+      "adidas-es6",
+      "adidas-babel",
+      "adidas-react"
+    ],
+    "plugins": ["jest"],
+    "env": {
+      "jest/globals": true
+    },
+    "globals": {
+      "process": true,
+      "setImmediate": true
+    },
+    "rules": {
+      "comma-dangle": ["error", "always-multiline"],
+      "no-invalid-this": "off",
+      "template-curly-spacing": ["error", "never"],
+      "no-warning-comments": "off",
+      "no-undefined": "off",
+      "indent": ["error", 2, {
+        "SwitchCase": 1
+      }
+      ],
+      "react/jsx-curly-spacing": ["error", "never"],
+      "react/jsx-indent-props": ["error", 2],
+      "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"
+    }
   }
 }
diff --git a/src/App.js b/src/App.js
index 75832867..f7203923 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,20 +6,18 @@ import MainHeader from './common/MainHeader';
 import MenuLayout from './common/MenuLayout';
 import CreateServer from './servers/CreateServer';
 
-export default class App extends React.Component {
-  render() {
-    return (
-      <div className="container-fluid app-container">
-        <MainHeader/>
+export default function App() {
+  return (
+    <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>
+  );
 }
diff --git a/src/api/ShlinkApiClient.js b/src/api/ShlinkApiClient.js
index fea32406..9355ac81 100644
--- a/src/api/ShlinkApiClient.js
+++ b/src/api/ShlinkApiClient.js
@@ -3,6 +3,7 @@ import qs from 'qs';
 import { isEmpty, isNil, reject } from 'ramda';
 
 const API_VERSION = '1';
+const STATUS_UNAUTHORIZED = 401;
 
 export class ShlinkApiClient {
   constructor(axios) {
@@ -14,8 +15,6 @@ export class ShlinkApiClient {
 
   /**
    * Sets the base URL to be used on any request
-   * @param {String} baseUrl
-   * @param {String} apiKey
    */
   setConfig = ({ url, apiKey }) => {
     this._baseUrl = `${url}/rest/v${API_VERSION}`;
@@ -24,45 +23,46 @@ export class ShlinkApiClient {
 
   listShortUrls = (options = {}) =>
     this._performRequest('/short-codes', 'GET', options)
-      .then(resp => resp.data.shortUrls)
-      .catch(e => this._handleAuthError(e, this.listShortUrls, [options]));
+      .then((resp) => resp.data.shortUrls)
+      .catch((e) => this._handleAuthError(e, this.listShortUrls, [ options ]));
+
+  createShortUrl = (options) => {
+    const filteredOptions = reject((value) => isEmpty(value) || isNil(value), options);
 
-  createShortUrl = options => {
-    const filteredOptions = reject(value => isEmpty(value) || isNil(value), options);
     return this._performRequest('/short-codes', 'POST', {}, filteredOptions)
-      .then(resp => resp.data)
-      .catch(e => this._handleAuthError(e, this.createShortUrl, [filteredOptions]));
+      .then((resp) => resp.data)
+      .catch((e) => this._handleAuthError(e, this.createShortUrl, [ filteredOptions ]));
   };
 
   getShortUrlVisits = (shortCode, dates) =>
     this._performRequest(`/short-codes/${shortCode}/visits`, 'GET', dates)
-      .then(resp => resp.data.visits.data)
-      .catch(e => this._handleAuthError(e, this.getShortUrlVisits, [shortCode, dates]));
+      .then((resp) => resp.data.visits.data)
+      .catch((e) => this._handleAuthError(e, this.getShortUrlVisits, [ shortCode, dates ]));
 
-  getShortUrl = shortCode =>
+  getShortUrl = (shortCode) =>
     this._performRequest(`/short-codes/${shortCode}`, 'GET')
-      .then(resp => resp.data)
-      .catch(e => this._handleAuthError(e, this.getShortUrl, [shortCode]));
+      .then((resp) => resp.data)
+      .catch((e) => this._handleAuthError(e, this.getShortUrl, [ shortCode ]));
 
   updateShortUrlTags = (shortCode, tags) =>
     this._performRequest(`/short-codes/${shortCode}/tags`, 'PUT', {}, { tags })
-      .then(resp => resp.data.tags)
-      .catch(e => this._handleAuthError(e, this.updateShortUrlTags, [shortCode, tags]));
+      .then((resp) => resp.data.tags)
+      .catch((e) => this._handleAuthError(e, this.updateShortUrlTags, [ shortCode, tags ]));
 
   listTags = () =>
     this._performRequest('/tags', 'GET')
-      .then(resp => resp.data.tags.data)
-      .catch(e => this._handleAuthError(e, this.listTags, []));
+      .then((resp) => resp.data.tags.data)
+      .catch((e) => this._handleAuthError(e, this.listTags, []));
 
-  deleteTags = tags =>
+  deleteTags = (tags) =>
     this._performRequest('/tags', 'DELETE', { tags })
       .then(() => ({ tags }))
-      .catch(e => this._handleAuthError(e, this.deleteTags, [tags]));
+      .catch((e) => this._handleAuthError(e, this.deleteTags, [ tags ]));
 
   editTag = (oldName, newName) =>
     this._performRequest('/tags', 'PUT', {}, { oldName, newName })
       .then(() => ({ oldName, newName }))
-      .catch(e => this._handleAuthError(e, this.editTag, [oldName, newName]));
+      .catch((e) => this._handleAuthError(e, this.editTag, [ oldName, newName ]));
 
   _performRequest = async (url, method = 'GET', query = {}, body = {}) => {
     if (isEmpty(this._token)) {
@@ -72,14 +72,16 @@ export class ShlinkApiClient {
     return await this.axios({
       method,
       url: `${this._baseUrl}${url}`,
-      headers: { 'Authorization': `Bearer ${this._token}` },
+      headers: { Authorization: `Bearer ${this._token}` },
       params: query,
       data: body,
-      paramsSerializer: params => qs.stringify(params, { arrayFormat: 'brackets' })
-    }).then(resp => {
+      paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'brackets' }),
+    }).then((resp) => {
       // Save new token
       const { authorization = '' } = resp.headers;
+
       this._token = authorization.substr('Bearer '.length);
+
       return resp;
     });
   };
@@ -88,15 +90,17 @@ export class ShlinkApiClient {
     const resp = await this.axios({
       method: 'POST',
       url: `${this._baseUrl}/authenticate`,
-      data: { apiKey: this._apiKey }
+      data: { apiKey: this._apiKey },
     });
+
     return resp.data.token;
   };
 
   _handleAuthError = (e, method, args) => {
     // If auth failed, reset token to force it to be regenerated, and perform a new request
-    if (e.response.status === 401) {
+    if (e.response.status === STATUS_UNAUTHORIZED) {
       this._token = '';
+
       return method(...args);
     }
 
@@ -105,4 +109,6 @@ export class ShlinkApiClient {
   };
 }
 
-export default new ShlinkApiClient(axios);
+const shlinkApiClient = new ShlinkApiClient(axios);
+
+export default shlinkApiClient;
diff --git a/src/common/AsideMenu.js b/src/common/AsideMenu.js
index bf2f0a32..ace7c5c0 100644
--- a/src/common/AsideMenu.js
+++ b/src/common/AsideMenu.js
@@ -4,11 +4,11 @@ import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 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 PropTypes from 'prop-types';
 import { serverType } from '../servers/prop-types';
-import classnames from 'classnames';
 
 const defaultProps = {
   className: '',
diff --git a/src/common/Home.js b/src/common/Home.js
index 8efcd317..3aa66f89 100644
--- a/src/common/Home.js
+++ b/src/common/Home.js
@@ -1,14 +1,20 @@
-import chevronIcon from '@fortawesome/fontawesome-free-solid/faChevronRight'
-import FontAwesomeIcon from '@fortawesome/react-fontawesome'
-import { isEmpty, pick, values } from 'ramda'
-import React from 'react'
-import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
-import { ListGroup, ListGroupItem } from 'reactstrap'
-import { resetSelectedServer } from '../servers/reducers/selectedServer'
-import './Home.scss'
+import chevronIcon from '@fortawesome/fontawesome-free-solid/faChevronRight';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { isEmpty, pick, 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';
 
-export class Home extends React.Component {
+const propTypes = {
+  resetSelectedServer: PropTypes.func,
+  servers: PropTypes.object,
+};
+
+export class HomeComponent extends React.Component {
   componentDidMount() {
     this.props.resetSelectedServer();
   }
@@ -45,4 +51,8 @@ export class Home extends React.Component {
   }
 }
 
-export default connect(pick(['servers']), { resetSelectedServer })(Home);
+HomeComponent.propTypes = propTypes;
+
+const Home = connect(pick([ 'servers' ]), { resetSelectedServer })(HomeComponent);
+
+export default Home;
diff --git a/src/common/MainHeader.js b/src/common/MainHeader.js
index 54261623..87b6d2ef 100644
--- a/src/common/MainHeader.js
+++ b/src/common/MainHeader.js
@@ -2,18 +2,23 @@ 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, withRouter } 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 classnames from 'classnames';
 
-export class MainHeader extends React.Component {
+const propTypes = {
+  location: PropTypes.object,
+};
+
+export class MainHeaderComponent extends React.Component {
   state = { isOpen: false };
-  toggle = () => {
+  handleToggle = () => {
     this.setState(({ isOpen }) => ({
-      isOpen: !isOpen
+      isOpen: !isOpen,
     }));
   };
 
@@ -33,10 +38,10 @@ export class MainHeader extends React.Component {
     return (
       <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
         <NavbarBrand tag={Link} to="/">
-          <img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo"/> Shlink
+          <img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo" /> Shlink
         </NavbarBrand>
 
-        <NavbarToggler onClick={this.toggle}>
+        <NavbarToggler onClick={this.handleToggle}>
           <FontAwesomeIcon icon={arrowIcon} className={toggleClass} />
         </NavbarToggler>
 
@@ -48,7 +53,7 @@ export class MainHeader extends React.Component {
                 to={createServerPath}
                 active={location.pathname === createServerPath}
               >
-                <FontAwesomeIcon icon={plusIcon}/>&nbsp; Add server
+                <FontAwesomeIcon icon={plusIcon} />&nbsp; Add server
               </NavLink>
             </NavItem>
             <ServersDropdown />
@@ -59,4 +64,8 @@ export class MainHeader extends React.Component {
   }
 }
 
-export default withRouter(MainHeader);
+MainHeaderComponent.propTypes = propTypes;
+
+const MainHeader = withRouter(MainHeaderComponent);
+
+export default MainHeader;
diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js
index 99ad9e7b..3f3c7b41 100644
--- a/src/common/MenuLayout.js
+++ b/src/common/MenuLayout.js
@@ -2,26 +2,38 @@ import React from 'react';
 import { Route, Switch, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { selectServer } from '../servers/reducers/selectedServer';
-import CreateShortUrl from '../short-urls/CreateShortUrl';
-import ShortUrls from '../short-urls/ShortUrls';
-import ShortUrlsVisits from '../short-urls/ShortUrlVisits';
-import AsideMenu from './AsideMenu';
 import { pick } from 'ramda';
 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';
 
-export class MenuLayout extends React.Component {
+const propTypes = {
+  match: PropTypes.object,
+  selectServer: PropTypes.func,
+  location: PropTypes.object,
+  selectedServer: serverType,
+};
+
+export class MenuLayoutComponent extends React.Component {
   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 { serverId } = this.props.match.params;
-    this.props.selectServer(serverId);
+    const { match, selectServer } = this.props;
+    const { params: { serverId } } = match;
+
+    selectServer(serverId);
   }
 
   componentDidUpdate(prevProps) {
@@ -44,14 +56,14 @@ export class MenuLayout extends React.Component {
         <FontAwesomeIcon
           icon={burgerIcon}
           className={burgerClasses}
-          onClick={() => this.setState({ showSideBar: !this.state.showSideBar })}
+          onClick={() => this.setState(({ showSideBar }) => ({ showSideBar: !showSideBar }))}
         />
 
         <Swipeable
           delta={40}
+          className="menu-layout__swipeable"
           onSwipedLeft={() => this.setState({ showSideBar: false })}
           onSwipedRight={() => this.setState({ showSideBar: true })}
-          className="menu-layout__swipeable"
         >
           <div className="row menu-layout__swipeable-inner">
             <AsideMenu
@@ -93,7 +105,11 @@ export class MenuLayout extends React.Component {
   }
 }
 
-export default compose(
-  connect(pick(['selectedServer', 'shortUrlsListParams']), { selectServer }),
+MenuLayoutComponent.propTypes = propTypes;
+
+const MenuLayout = compose(
+  connect(pick([ 'selectedServer', 'shortUrlsListParams' ]), { selectServer }),
   withRouter
-)(MenuLayout);
+)(MenuLayoutComponent);
+
+export default MenuLayout;
diff --git a/src/common/ScrollToTop.js b/src/common/ScrollToTop.js
index b5eff867..f14b4c79 100644
--- a/src/common/ScrollToTop.js
+++ b/src/common/ScrollToTop.js
@@ -1,12 +1,24 @@
 import React from 'react';
-import { withRouter } from 'react-router-dom'
+import { withRouter } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
-export class ScrollToTop extends React.Component {
+const propTypes = {
+  location: PropTypes.object,
+  window: PropTypes.shape({
+    scrollTo: PropTypes.func,
+  }),
+  children: PropTypes.node,
+};
+const defaultProps = {
+  window,
+};
+
+export class ScrollToTopComponent extends React.Component {
   componentDidUpdate(prevProps) {
     const { location, window } = this.props;
 
     if (location !== prevProps.location) {
-      window.scrollTo(0, 0)
+      window.scrollTo(0, 0);
     }
   }
 
@@ -15,8 +27,9 @@ export class ScrollToTop extends React.Component {
   }
 }
 
-ScrollToTop.defaultProps = {
-  window
-};
+ScrollToTopComponent.defaultProps = defaultProps;
+ScrollToTopComponent.propTypes = propTypes;
 
-export default withRouter(ScrollToTop);
+const ScrollToTop = withRouter(ScrollToTopComponent);
+
+export default ScrollToTop;
diff --git a/src/index.js b/src/index.js
index 32082499..943bb61e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,15 +5,13 @@ import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import { applyMiddleware, compose, createStore } from 'redux';
 import ReduxThunk from 'redux-thunk';
-
-import '../node_modules/react-datepicker/dist/react-datepicker.css';
-import './common/react-tagsinput.scss';
-
 import App from './App';
 import './index.scss';
-import ScrollToTop from './common/ScrollToTop'
+import ScrollToTop from './common/ScrollToTop';
 import reducers from './reducers';
 import registerServiceWorker from './registerServiceWorker';
+import '../node_modules/react-datepicker/dist/react-datepicker.css';
+import './common/react-tagsinput.scss';
 
 const composeEnhancers = process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
   ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 2ae6490d..33a26e8b 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,5 +1,4 @@
 import { combineReducers } from 'redux';
-
 import serversReducer from '../servers/reducers/server';
 import selectedServerReducer from '../servers/reducers/selectedServer';
 import shortUrlsListReducer from '../short-urls/reducers/shortUrlsList';
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
index a3e6c0cf..02397285 100644
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@@ -8,10 +8,14 @@
 // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
 // This link also includes instructions on opting out of this behavior.
 
+/* eslint no-console: "off" */
+
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||
+
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
+
     // 127.0.0.1/8 is considered localhost for IPv4.
     window.location.hostname.match(
       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
@@ -22,6 +26,7 @@ export default function register() {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
+
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to
@@ -55,9 +60,10 @@ export default function register() {
 function registerValidSW(swUrl) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
+
         installingWorker.onstatechange = () => {
           if (installingWorker.state === 'installed') {
             if (navigator.serviceWorker.controller) {
@@ -76,7 +82,7 @@ function registerValidSW(swUrl) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error('Error during service worker registration:', error);
     });
 }
@@ -84,14 +90,16 @@ function registerValidSW(swUrl) {
 function checkValidServiceWorker(swUrl) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
-    .then(response => {
+    .then((response) => {
+      const NOT_FOUND_STATUS = 404;
+
       // Ensure service worker exists, and that we really are getting a JS file.
       if (
-        response.status === 404 ||
+        response.status === NOT_FOUND_STATUS ||
         response.headers.get('content-type').indexOf('javascript') === -1
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -110,7 +118,7 @@ function checkValidServiceWorker(swUrl) {
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
+    navigator.serviceWorker.ready.then((registration) => {
       registration.unregister();
     });
   }
diff --git a/src/servers/CreateServer.js b/src/servers/CreateServer.js
index 4efbbe30..5cf18de0 100644
--- a/src/servers/CreateServer.js
+++ b/src/servers/CreateServer.js
@@ -1,13 +1,14 @@
 import { assoc, dissoc, pick, pipe } from 'ramda';
 import React from 'react';
 import { connect } from 'react-redux';
-import { createServer } from './reducers/server';
-import { resetSelectedServer } from './reducers/selectedServer';
 import { v4 as uuid } from 'uuid';
+import PropTypes from 'prop-types';
+import { resetSelectedServer } from './reducers/selectedServer';
+import { createServer } from './reducers/server';
 import './CreateServer.scss';
 import ImportServersBtn from './helpers/ImportServersBtn';
-import PropTypes from 'prop-types';
 
+const SHOW_IMPORT_MSG_TIME = 4000;
 const propTypes = {
   createServer: PropTypes.func,
   history: PropTypes.shape({
@@ -16,7 +17,7 @@ const propTypes = {
   resetSelectedServer: PropTypes.func,
 };
 
-export class CreateServer extends React.Component {
+export class CreateServerComponent extends React.Component {
   state = {
     name: '',
     url: '',
@@ -24,7 +25,7 @@ export class CreateServer extends React.Component {
     serversImported: false,
   };
 
-  submit = e => {
+  handleSubmit = (e) => {
     e.preventDefault();
 
     const { createServer, history: { push } } = this.props;
@@ -34,7 +35,7 @@ export class CreateServer extends React.Component {
     )(this.state);
 
     createServer(server);
-    push(`/server/${server.id}/list-short-urls/1`)
+    push(`/server/${server.id}/list-short-urls/1`);
   };
 
   componentDidMount() {
@@ -42,7 +43,7 @@ export class CreateServer extends React.Component {
   }
 
   render() {
-    const renderInputGroup = (id, placeholder, type = 'text') =>
+    const renderInputGroup = (id, placeholder, type = 'text') => (
       <div className="form-group row">
         <label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">
           {placeholder}:
@@ -54,24 +55,27 @@ export class CreateServer extends React.Component {
             id={id}
             placeholder={placeholder}
             value={this.state[id]}
-            onChange={e => this.setState({ [id]: e.target.value })}
             required
+            onChange={(e) => this.setState({ [id]: e.target.value })}
           />
         </div>
-      </div>;
+      </div>
+    );
 
     return (
       <div className="create-server">
-        <form onSubmit={this.submit}>
+        <form onSubmit={this.handleSubmit}>
           {renderInputGroup('name', 'Name')}
           {renderInputGroup('url', 'URL', 'url')}
           {renderInputGroup('apiKey', 'API key')}
 
           <div className="text-right">
-            <ImportServersBtn onImport={() => {
-              this.setState({ serversImported: true });
-              setTimeout(() => this.setState({ serversImported: false }), 4000);
-            }} />
+            <ImportServersBtn
+              onImport={() => {
+                this.setState({ serversImported: true });
+                setTimeout(() => this.setState({ serversImported: false }), SHOW_IMPORT_MSG_TIME);
+              }}
+            />
             <button className="btn btn-outline-primary">Create server</button>
           </div>
 
@@ -90,9 +94,11 @@ export class CreateServer extends React.Component {
   }
 }
 
-CreateServer.propTypes = propTypes;
+CreateServerComponent.propTypes = propTypes;
 
-export default connect(
-  pick(['selectedServer']),
-  {createServer, resetSelectedServer }
-)(CreateServer);
+const CreateServer = connect(
+  pick([ 'selectedServer' ]),
+  { createServer, resetSelectedServer }
+)(CreateServerComponent);
+
+export default CreateServer;
diff --git a/src/servers/DeleteServerButton.js b/src/servers/DeleteServerButton.js
index 4b2b0dd1..5dff7244 100644
--- a/src/servers/DeleteServerButton.js
+++ b/src/servers/DeleteServerButton.js
@@ -1,9 +1,9 @@
 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';
-import PropTypes from 'prop-types';
 
 const propTypes = {
   server: serverType,
@@ -20,8 +20,8 @@ export default class DeleteServerButton extends React.Component {
       <React.Fragment>
         <span
           className={className}
-          onClick={() => this.setState({ isModalOpen: true })}
           key="deleteServerBtn"
+          onClick={() => this.setState({ isModalOpen: true })}
         >
           <FontAwesomeIcon icon={deleteIcon} />
           <span className="aside-menu__item-text">Delete this server</span>
@@ -29,7 +29,7 @@ export default class DeleteServerButton extends React.Component {
 
         <DeleteServerModal
           isOpen={this.state.isModalOpen}
-          toggle={() => this.setState({ isModalOpen: !this.state.isModalOpen })}
+          toggle={() => this.setState(({ isModalOpen }) => ({ isModalOpen: !isModalOpen }))}
           server={server}
           key="deleteServerModal"
         />
diff --git a/src/servers/DeleteServerModal.js b/src/servers/DeleteServerModal.js
index 0d69bd52..ca1b8f72 100644
--- a/src/servers/DeleteServerModal.js
+++ b/src/servers/DeleteServerModal.js
@@ -11,9 +11,13 @@ const propTypes = {
   toggle: PropTypes.func.isRequired,
   isOpen: PropTypes.bool.isRequired,
   server: serverType,
+  deleteServer: PropTypes.func,
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }),
 };
 
-export const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }) => {
+export const DeleteServerModalComponent = ({ server, toggle, isOpen, deleteServer, history }) => {
   const closeModal = () => {
     deleteServer(server);
     toggle();
@@ -38,9 +42,11 @@ export const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, histor
   );
 };
 
-DeleteServerModal.propTypes = propTypes;
+DeleteServerModalComponent.propTypes = propTypes;
 
-export default compose(
+const DeleteServerModal = compose(
   withRouter,
   connect(null, { deleteServer })
-)(DeleteServerModal);
+)(DeleteServerModalComponent);
+
+export default DeleteServerModal;
diff --git a/src/servers/ServersDropdown.js b/src/servers/ServersDropdown.js
index 68ecf85e..a990f302 100644
--- a/src/servers/ServersDropdown.js
+++ b/src/servers/ServersDropdown.js
@@ -3,21 +3,31 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
-
-import { listServers } from './reducers/server';
+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,
+};
 
-export class ServersDropdown extends React.Component {
+export class ServersDropdownComponent extends React.Component {
   renderServers = () => {
     const { servers, selectedServer, selectServer, serversExporter } = this.props;
 
     if (isEmpty(servers)) {
-      return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>
+      return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>;
     }
 
     return (
@@ -28,15 +38,17 @@ export class ServersDropdown extends React.Component {
             tag={Link}
             to={`/server/${id}/list-short-urls/1`}
             active={selectedServer && selectedServer.id === id}
-            onClick={() => selectServer(id)} // FIXME This should be implicit
+
+            // FIXME This should be implicit
+            onClick={() => selectServer(id)}
           >
             {name}
           </DropdownItem>
         ))}
         <DropdownItem divider />
         <DropdownItem
-          onClick={serversExporter.exportServers}
           className="servers-dropdown__export-item"
+          onClick={() => serversExporter.exportServers()}
         >
           Export servers
         </DropdownItem>
@@ -58,9 +70,12 @@ export class ServersDropdown extends React.Component {
   }
 }
 
-ServersDropdown.defaultProps = defaultProps;
+ServersDropdownComponent.defaultProps = defaultProps;
+ServersDropdownComponent.propTypes = propTypes;
 
-export default connect(
-  pick(['servers', 'selectedServer']),
+const ServersDropdown = connect(
+  pick([ 'servers', 'selectedServer' ]),
   { listServers, selectServer }
-)(ServersDropdown);
+)(ServersDropdownComponent);
+
+export default ServersDropdown;
diff --git a/src/servers/helpers/ImportServersBtn.js b/src/servers/helpers/ImportServersBtn.js
index 7d6e277c..431d3d13 100644
--- a/src/servers/helpers/ImportServersBtn.js
+++ b/src/servers/helpers/ImportServersBtn.js
@@ -1,24 +1,24 @@
-import React  from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import { UncontrolledTooltip } from 'reactstrap';
-import serversImporter, { serversImporterType } from '../services/ServersImporter';
-import { createServers } from '../reducers/server';
 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: () => {},
+  onImport: () => ({}),
 };
 const propTypes = {
   onImport: PropTypes.func,
   serversImporter: serversImporterType,
   createServers: PropTypes.func,
-  fileRef: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),
+  fileRef: PropTypes.oneOfType([ PropTypes.object, PropTypes.node ]),
 };
 
-export class ImportServersBtn extends React.Component {
+export class ImportServersBtnComponent extends React.Component {
   constructor(props) {
     super(props);
     this.fileRef = props.fileRef || React.createRef();
@@ -26,9 +26,9 @@ export class ImportServersBtn extends React.Component {
 
   render() {
     const { serversImporter: { importServersFromFile }, onImport, createServers } = this.props;
-    const onChange = e =>
+    const onChange = (e) =>
       importServersFromFile(e.target.files[0])
-        .then(servers => servers.map(server => assoc('id', uuid(), server)))
+        .then((servers) => servers.map((server) => assoc('id', uuid(), server)))
         .then(createServers)
         .then(onImport);
 
@@ -37,28 +37,30 @@ export class ImportServersBtn extends React.Component {
         <button
           type="button"
           className="btn btn-outline-secondary mr-2"
-          onClick={() => this.fileRef.current.click()}
           id="importBtn"
+          onClick={() => this.fileRef.current.click()}
         >
           Import from file
         </button>
         <UncontrolledTooltip placement="top" target="importBtn">
-          You can create servers by importing a CSV file with columns "name", "apiKey" and "url"
+          You can create servers by importing a CSV file with columns <b>name</b>, <b>apiKey</b> and <b>url</b>
         </UncontrolledTooltip>
 
         <input
           type="file"
-          onChange={onChange}
           accept="text/csv"
           className="create-server__csv-select"
           ref={this.fileRef}
+          onChange={onChange}
         />
       </React.Fragment>
     );
   }
 }
 
-ImportServersBtn.defaultProps = defaultProps;
-ImportServersBtn.propTypes = propTypes;
+ImportServersBtnComponent.defaultProps = defaultProps;
+ImportServersBtnComponent.propTypes = propTypes;
 
-export default connect(null, { createServers })(ImportServersBtn);
+const ImportServersBtn = connect(null, { createServers })(ImportServersBtnComponent);
+
+export default ImportServersBtn;
diff --git a/src/servers/reducers/selectedServer.js b/src/servers/reducers/selectedServer.js
index 1fc9b2e5..aec65e58 100644
--- a/src/servers/reducers/selectedServer.js
+++ b/src/servers/reducers/selectedServer.js
@@ -1,13 +1,14 @@
-import ShlinkApiClient from '../../api/ShlinkApiClient';
-import serversService from '../../servers/services/ServersService';
-import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListParams'
 import { curry } from 'ramda';
-
-export const SELECT_SERVER = 'shlink/selectedServer/SELECT_SERVER';
-export const RESET_SELECTED_SERVER = 'shlink/selectedServer/RESET_SELECTED_SERVER';
+import shlinkApiClient from '../../api/ShlinkApiClient';
+import serversService from '../../servers/services/ServersService';
+import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListParams';
 
 const defaultState = null;
 
+export const SELECT_SERVER = 'shlink/selectedServer/SELECT_SERVER';
+
+export const RESET_SELECTED_SERVER = 'shlink/selectedServer/RESET_SELECTED_SERVER';
+
 export default function reducer(state = defaultState, action) {
   switch (action.type) {
     case SELECT_SERVER:
@@ -21,15 +22,17 @@ export default function reducer(state = defaultState, action) {
 
 export const resetSelectedServer = () => ({ type: RESET_SELECTED_SERVER });
 
-export const _selectServer = (ShlinkApiClient, serversService, serverId) => dispatch => {
+export const _selectServer = (shlinkApiClient, serversService, serverId) => (dispatch) => {
   dispatch(resetShortUrlParams());
 
   const selectedServer = serversService.findServerById(serverId);
-  ShlinkApiClient.setConfig(selectedServer);
+
+  shlinkApiClient.setConfig(selectedServer);
 
   dispatch({
     type: SELECT_SERVER,
-    selectedServer
-  })
+    selectedServer,
+  });
 };
-export const selectServer = curry(_selectServer)(ShlinkApiClient, serversService);
+
+export const selectServer = curry(_selectServer)(shlinkApiClient, serversService);
diff --git a/src/servers/reducers/server.js b/src/servers/reducers/server.js
index 978c82fd..cf2db109 100644
--- a/src/servers/reducers/server.js
+++ b/src/servers/reducers/server.js
@@ -1,5 +1,5 @@
-import serversService from '../services/ServersService';
 import { curry } from 'ramda';
+import serversService from '../services/ServersService';
 
 export const FETCH_SERVERS = 'shlink/servers/FETCH_SERVERS';
 
@@ -12,26 +12,33 @@ 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) => {
   serversService.createServer(server);
+
   return _listServers(serversService);
 };
+
 export const createServer = curry(_createServer)(serversService);
 
 export const _deleteServer = (serversService, server) => {
   serversService.deleteServer(server);
+
   return _listServers(serversService);
 };
+
 export const deleteServer = curry(_deleteServer)(serversService);
 
 export const _createServers = (serversService, servers) => {
   serversService.createServers(servers);
+
   return _listServers(serversService);
 };
+
 export const createServers = curry(_createServers)(serversService);
diff --git a/src/servers/services/ServersExporter.js b/src/servers/services/ServersExporter.js
index 37005b1e..7262ac0f 100644
--- a/src/servers/services/ServersExporter.js
+++ b/src/servers/services/ServersExporter.js
@@ -1,21 +1,23 @@
-import serversService from './ServersService';
 import { dissoc, head, keys, values } from 'ramda';
 import csvjson from 'csvjson';
+import serversService from './ServersService';
 
 const saveCsv = (window, csv) => {
   const { navigator, document } = window;
   const filename = 'shlink-servers.csv';
-  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+  const blob = new Blob([ csv ], { type: 'text/csv;charset=utf-8;' });
 
   // IE10 and IE11
   if (navigator.msSaveBlob) {
     navigator.msSaveBlob(blob, filename);
+
     return;
   }
 
   // Modern browsers
   const link = document.createElement('a');
   const url = URL.createObjectURL(blob);
+
   link.setAttribute('href', url);
   link.setAttribute('download', filename);
   link.style.visibility = 'hidden';
@@ -36,15 +38,18 @@ export class ServersExporter {
 
     try {
       const csv = this.csvjson.toCSV(servers, {
-        headers: keys(head(servers)).join(',')
+        headers: keys(head(servers)).join(','),
       });
+
       saveCsv(this.window, csv);
     } catch (e) {
       // FIXME Handle error
+      /* eslint no-console: "off" */
       console.error(e);
     }
   };
 }
 
 const serverExporter = new ServersExporter(serversService, global.window, csvjson);
+
 export default serverExporter;
diff --git a/src/servers/services/ServersImporter.js b/src/servers/services/ServersImporter.js
index c60770a1..0734952c 100644
--- a/src/servers/services/ServersImporter.js
+++ b/src/servers/services/ServersImporter.js
@@ -16,8 +16,9 @@ export class ServersImporter {
     }
 
     const reader = new FileReader();
-    return new Promise(resolve => {
-      reader.addEventListener('loadend', e => {
+
+    return new Promise((resolve) => {
+      reader.addEventListener('loadend', (e) => {
         const content = e.target.result;
         const servers = this.csvjson.toObject(content);
 
@@ -29,4 +30,5 @@ export class ServersImporter {
 }
 
 const serversImporter = new ServersImporter(csvjson);
+
 export default serversImporter;
diff --git a/src/servers/services/ServersService.js b/src/servers/services/ServersService.js
index a8b96b8f..25568526 100644
--- a/src/servers/services/ServersService.js
+++ b/src/servers/services/ServersService.js
@@ -1,5 +1,5 @@
-import Storage from '../../utils/Storage';
 import { assoc, dissoc, reduce } from 'ramda';
+import storage from '../../utils/Storage';
 
 const SERVERS_STORAGE_KEY = 'servers';
 
@@ -10,25 +10,27 @@ export class ServersService {
 
   listServers = () => this.storage.get(SERVERS_STORAGE_KEY) || {};
 
-  findServerById = serverId => this.listServers()[serverId];
+  findServerById = (serverId) => this.listServers()[serverId];
 
-  createServer = server => this.createServers([server]);
+  createServer = (server) => this.createServers([ server ]);
 
-  createServers = servers => {
+  createServers = (servers) => {
     const allServers = reduce(
       (serversObj, server) => assoc(server.id, server, serversObj),
       this.listServers(),
       servers
     );
+
     this.storage.set(SERVERS_STORAGE_KEY, allServers);
   };
 
-  deleteServer = server =>
+  deleteServer = (server) =>
     this.storage.set(
       SERVERS_STORAGE_KEY,
       dissoc(server.id, this.listServers())
     );
 }
 
-const serversService = new ServersService(Storage);
+const serversService = new ServersService(storage);
+
 export default serversService;
diff --git a/src/short-urls/CreateShortUrl.js b/src/short-urls/CreateShortUrl.js
index ca82e29a..3db73243 100644
--- a/src/short-urls/CreateShortUrl.js
+++ b/src/short-urls/CreateShortUrl.js
@@ -6,11 +6,11 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Collapse } from 'reactstrap';
 import DateInput from '../common/DateInput';
+import TagsSelector from '../utils/TagsSelector';
 import CreateShortUrlResult from './helpers/CreateShortUrlResult';
 import { createShortUrl, resetCreateShortUrl } from './reducers/shortUrlCreationResult';
-import TagsSelector from '../utils/TagsSelector';
 
-export class CreateShortUrl extends React.Component {
+export class CreateShortUrlComponent extends React.Component {
   state = {
     longUrl: '',
     tags: [],
@@ -18,35 +18,37 @@ export class CreateShortUrl extends React.Component {
     validSince: undefined,
     validUntil: undefined,
     maxVisits: undefined,
-    moreOptionsVisible: false
+    moreOptionsVisible: false,
   };
 
   render() {
     const { createShortUrl, shortUrlCreationResult, resetCreateShortUrl } = this.props;
 
-    const changeTags = tags => this.setState({ tags: tags.map(pipe(trim, replace(/ /g, '-'))) });
-    const renderOptionalInput = (id, placeholder, type = 'text', props = {}) =>
+    const changeTags = (tags) => this.setState({ tags: tags.map(pipe(trim, replace(/ /g, '-'))) });
+    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 })}
+        onChange={(e) => this.setState({ [id]: e.target.value })}
         {...props}
-      />;
-    const createDateInput = (id, placeholder, props = {}) =>
+      />
+    );
+    const createDateInput = (id, placeholder, props = {}) => (
       <DateInput
         selected={this.state[id]}
         placeholderText={placeholder}
-        onChange={date => this.setState({ [id]: date })}
         isClearable
+        onChange={(date) => this.setState({ [id]: date })}
         {...props}
-      />;
-    const formatDate = date => isNil(date) ? date : date.format();
-    const save = e => {
+      />
+    );
+    const formatDate = (date) => isNil(date) ? date : date.format();
+    const save = (e) => {
       e.preventDefault();
       createShortUrl(pipe(
-        dissoc('moreOptionsVisible'), // Remove moreOptionsVisible property
+        dissoc('moreOptionsVisible'),
         assoc('validSince', formatDate(this.state.validSince)),
         assoc('validUntil', formatDate(this.state.validUntil))
       )(this.state));
@@ -62,7 +64,7 @@ export class CreateShortUrl extends React.Component {
               placeholder="Insert the URL to be shortened"
               required
               value={this.state.longUrl}
-              onChange={e => this.setState({ longUrl: e.target.value })}
+              onChange={(e) => this.setState({ longUrl: e.target.value })}
             />
           </div>
 
@@ -95,7 +97,7 @@ export class CreateShortUrl extends React.Component {
             <button
               type="button"
               className="btn btn-outline-secondary create-short-url__btn"
-              onClick={() => this.setState({ moreOptionsVisible: !this.state.moreOptionsVisible })}
+              onClick={() => this.setState(({ moreOptionsVisible }) => ({ moreOptionsVisible: !moreOptionsVisible }))}
             >
               <FontAwesomeIcon icon={this.state.moreOptionsVisible ? upIcon : downIcon} />
               &nbsp;
@@ -116,7 +118,9 @@ export class CreateShortUrl extends React.Component {
   }
 }
 
-export default connect(pick(['shortUrlCreationResult']), {
+const CreateShortUrl = connect(pick([ 'shortUrlCreationResult' ]), {
   createShortUrl,
-  resetCreateShortUrl
-})(CreateShortUrl);
+  resetCreateShortUrl,
+})(CreateShortUrlComponent);
+
+export default CreateShortUrl;
diff --git a/src/short-urls/Paginator.js b/src/short-urls/Paginator.js
index 98d7e2c3..17223b9a 100644
--- a/src/short-urls/Paginator.js
+++ b/src/short-urls/Paginator.js
@@ -1,52 +1,61 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+import PropTypes from 'prop-types';
 
-export default class Paginator extends React.Component {
-  render() {
-    const { paginator = {}, serverId } = this.props;
-    const { currentPage, pagesCount = 0 } = paginator;
-    if (pagesCount <= 1) {
-      return null;
+const propTypes = {
+  serverId: PropTypes.string.isRequired,
+  paginator: PropTypes.shape({
+    currentPage: PropTypes.number,
+    pagesCount: PropTypes.number,
+  }),
+};
+
+export default function Paginator({ paginator = {}, serverId }) {
+  const { currentPage, pagesCount = 0 } = paginator;
+
+  if (pagesCount <= 1) {
+    return null;
+  }
+
+  const renderPages = () => {
+    const pages = [];
+
+    for (let i = 1; i <= pagesCount; i++) {
+      pages.push(
+        <PaginationItem key={i} active={currentPage === i}>
+          <PaginationLink
+            tag={Link}
+            to={`/server/${serverId}/list-short-urls/${i}`}
+          >
+            {i}
+          </PaginationLink>
+        </PaginationItem>
+      );
     }
 
-    const renderPages = () => {
-      const pages = [];
+    return pages;
+  };
 
-      for (let i = 1; i <= pagesCount; i++) {
-        pages.push(
-          <PaginationItem key={i} active={currentPage === i}>
-            <PaginationLink
-              tag={Link}
-              to={`/server/${serverId}/list-short-urls/${i}`}
-            >
-              {i}
-            </PaginationLink>
-          </PaginationItem>
-        );
-      }
-
-      return pages;
-    };
-
-    return (
-      <Pagination listClassName="flex-wrap">
-        <PaginationItem disabled={currentPage === 1}>
-          <PaginationLink
-            previous
-            tag={Link}
-            to={`/server/${serverId}/list-short-urls/${currentPage - 1}`}
-          />
-        </PaginationItem>
-        {renderPages()}
-        <PaginationItem disabled={currentPage >= pagesCount}>
-          <PaginationLink
-            next
-            tag={Link}
-            to={`/server/${serverId}/list-short-urls/${currentPage + 1}`}
-          />
-        </PaginationItem>
-      </Pagination>
-    );
-  }
+  return (
+    <Pagination listClassName="flex-wrap">
+      <PaginationItem disabled={currentPage === 1}>
+        <PaginationLink
+          previous
+          tag={Link}
+          to={`/server/${serverId}/list-short-urls/${currentPage - 1}`}
+        />
+      </PaginationItem>
+      {renderPages()}
+      <PaginationItem disabled={currentPage >= pagesCount}>
+        <PaginationLink
+          next
+          tag={Link}
+          to={`/server/${serverId}/list-short-urls/${currentPage + 1}`}
+        />
+      </PaginationItem>
+    </Pagination>
+  );
 }
+
+Paginator.propTypes = propTypes;
diff --git a/src/short-urls/SearchBar.js b/src/short-urls/SearchBar.js
index ed7eb3f2..c17dba62 100644
--- a/src/short-urls/SearchBar.js
+++ b/src/short-urls/SearchBar.js
@@ -2,26 +2,34 @@ import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { connect } from 'react-redux';
-import Tag from '../utils/Tag';
-import { listShortUrls } from './reducers/shortUrlsList';
 import { isEmpty, pick } 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 { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
 
-export function SearchBar({ listShortUrls, shortUrlsListParams }) {
+const propTypes = {
+  listShortUrls: PropTypes.func,
+  shortUrlsListParams: shortUrlsListParamsType,
+};
+
+export function SearchBarComponent({ listShortUrls, shortUrlsListParams }) {
   const selectedTags = shortUrlsListParams.tags || [];
 
   return (
     <div className="serach-bar-container">
       <SearchField onChange={
-        searchTerm => listShortUrls({ ...shortUrlsListParams, searchTerm })
-      }/>
+        (searchTerm) => listShortUrls({ ...shortUrlsListParams, searchTerm })
+      }
+      />
 
       {!isEmpty(selectedTags) && (
         <h4 className="search-bar__selected-tag mt-2">
-          <FontAwesomeIcon icon={tagsIcon} className="search-bar__tags-icon"/>
+          <FontAwesomeIcon icon={tagsIcon} className="search-bar__tags-icon" />
           &nbsp;
-          {selectedTags.map(tag => (
+          {selectedTags.map((tag) => (
             <Tag
               key={tag}
               text={tag}
@@ -29,7 +37,7 @@ export function SearchBar({ listShortUrls, shortUrlsListParams }) {
               onClose={() => listShortUrls(
                 {
                   ...shortUrlsListParams,
-                  tags: selectedTags.filter(selectedTag => selectedTag !== tag)
+                  tags: selectedTags.filter((selectedTag) => selectedTag !== tag),
                 }
               )}
             />
@@ -40,4 +48,8 @@ export function SearchBar({ listShortUrls, shortUrlsListParams }) {
   );
 }
 
-export default connect(pick(['shortUrlsListParams']), { listShortUrls })(SearchBar);
+SearchBarComponent.propTypes = propTypes;
+
+const SearchBar = connect(pick([ 'shortUrlsListParams' ]), { listShortUrls })(SearchBarComponent);
+
+export default SearchBar;
diff --git a/src/short-urls/ShortUrlVisits.js b/src/short-urls/ShortUrlVisits.js
index f2778be2..534026b0 100644
--- a/src/short-urls/ShortUrlVisits.js
+++ b/src/short-urls/ShortUrlVisits.js
@@ -1,22 +1,35 @@
-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 DateInput from '../common/DateInput'
+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 { getShortUrlVisits } from './reducers/shortUrlVisits'
-import './ShortUrlVisits.scss'
+} 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,
@@ -24,14 +37,15 @@ const defaultProps = {
   processReferrersStats,
 };
 
-export class ShortUrlsVisits extends React.Component {
+export class ShortUrlsVisitsComponent extends React.Component {
   state = { startDate: undefined, endDate: undefined };
   loadVisits = () => {
-    const { match: { params } } = this.props;
-    this.props.getShortUrlVisits(params.shortCode, mapObjIndexed(
-      value => value && value.format ? value.format('YYYY-MM-DD') : value,
+    const { match: { params }, getShortUrlVisits } = this.props;
+
+    getShortUrlVisits(params.shortCode, mapObjIndexed(
+      (value) => value && value.format ? value.format('YYYY-MM-DD') : value,
       this.state
-    ))
+    ));
   };
 
   componentDidMount() {
@@ -46,7 +60,7 @@ export class ShortUrlsVisits extends React.Component {
       processBrowserStats,
       processCountriesStats,
       processReferrersStats,
-      shortUrlVisits: { visits, loading, error, shortUrl }
+      shortUrlVisits: { visits, loading, error, shortUrl },
     } = this.props;
     const serverUrl = selectedServer ? selectedServer.url : '';
     const shortLink = `${serverUrl}/${params.shortCode}`;
@@ -63,31 +77,42 @@ export class ShortUrlsVisits extends React.Component {
             '#46BFBD',
             '#FDB45C',
             '#949FB1',
-            '#4D5360'
+            '#4D5360',
           ],
           borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
-          borderWidth: 2
-        }
-      ]
+          borderWidth: 2,
+        },
+      ],
     });
-    const renderGraphCard = (title, stats, isBarChart, label) =>
+    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
-              }
-            }} />}
+            {!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>;
+      </div>
+    );
     const renderContent = () => {
       if (loading) {
         return <MutedMessage><FontAwesomeIcon icon={preloader} spin /> Loading...</MutedMessage>;
@@ -115,13 +140,14 @@ export class ShortUrlsVisits extends React.Component {
       );
     };
 
-    const renderCreated = () =>
+    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>;
+      </span>
+    );
 
     return (
       <div className="shlink-container">
@@ -133,20 +159,22 @@ export class ShortUrlsVisits extends React.Component {
                   shortUrl.visitsCount &&
                   <span className="badge badge-main float-right">Visits: {shortUrl.visitsCount}</span>
                 }
-                Visit stats for <a target="_blank" href={shortLink}>{shortLink}</a>
+                Visit stats for <ExternalLink href={shortLink}>{shortLink}</ExternalLink>
               </h2>
               <hr />
-              {shortUrl.dateCreated && <div>
-                Created:
-                &nbsp;
-                {loading && <small>Loading...</small>}
-                {!loading && renderCreated()}
-              </div>}
+              {shortUrl.dateCreated && (
+                <div>
+                  Created:
+                  &nbsp;
+                  {loading && <small>Loading...</small>}
+                  {!loading && renderCreated()}
+                </div>
+              )}
               <div>
                 Long URL:
                 &nbsp;
                 {loading && <small>Loading...</small>}
-                {!loading && <a target="_blank" href={shortUrl.longUrl}>{shortUrl.longUrl}</a>}
+                {!loading && <ExternalLink href={shortUrl.longUrl}>{shortUrl.longUrl}</ExternalLink>}
               </div>
             </CardBody>
           </Card>
@@ -159,7 +187,7 @@ export class ShortUrlsVisits extends React.Component {
                 selected={this.state.startDate}
                 placeholderText="Since"
                 isClearable
-                onChange={date => this.setState({ startDate: date }, () => this.loadVisits())}
+                onChange={(date) => this.setState({ startDate: date }, () => this.loadVisits())}
               />
             </div>
             <div className="col-xl-3 col-lg-4 col-md-6">
@@ -167,8 +195,8 @@ export class ShortUrlsVisits extends React.Component {
                 selected={this.state.endDate}
                 placeholderText="Until"
                 isClearable
-                onChange={date => this.setState({ endDate: date }, () => this.loadVisits())}
                 className="short-url-visits__date-input"
+                onChange={(date) => this.setState({ endDate: date }, () => this.loadVisits())}
               />
             </div>
           </div>
@@ -182,9 +210,12 @@ export class ShortUrlsVisits extends React.Component {
   }
 }
 
-ShortUrlsVisits.defaultProps = defaultProps;
+ShortUrlsVisitsComponent.propTypes = propTypes;
+ShortUrlsVisitsComponent.defaultProps = defaultProps;
 
-export default connect(
-  pick(['selectedServer', 'shortUrlVisits']),
+const ShortUrlsVisits = connect(
+  pick([ 'selectedServer', 'shortUrlVisits' ]),
   { getShortUrlVisits }
-)(ShortUrlsVisits);
+)(ShortUrlsVisitsComponent);
+
+export default ShortUrlsVisits;
diff --git a/src/short-urls/ShortUrls.js b/src/short-urls/ShortUrls.js
index 4d421dd8..eadfc38f 100644
--- a/src/short-urls/ShortUrls.js
+++ b/src/short-urls/ShortUrls.js
@@ -1,12 +1,13 @@
 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';
-import { assoc } from 'ramda';
 
-export function ShortUrls(props) {
+export function ShortUrlsComponent(props) {
   const { match: { params } } = props;
+
   // Using a key on a component makes react to create a new instance every time the key changes
   const urlsListKey = `${params.serverId}_${params.page}`;
 
@@ -19,4 +20,8 @@ export function ShortUrls(props) {
   );
 }
 
-export default connect(state => assoc('shortUrlsList', state.shortUrlsList.shortUrls, state.shortUrlsList))(ShortUrls);
+const ShortUrls = connect(
+  (state) => assoc('shortUrlsList', state.shortUrlsList.shortUrls, state.shortUrlsList)
+)(ShortUrlsComponent);
+
+export default ShortUrls;
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index af94ea93..de3720ea 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -1,14 +1,17 @@
-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 React from 'react'
-import { connect } from 'react-redux'
-import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap'
-import { ShortUrlsRow } from './helpers/ShortUrlsRow'
-import { listShortUrls } from './reducers/shortUrlsList'
-import './ShortUrlsList.scss'
+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 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 { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
 
 const SORTABLE_FIELDS = {
   dateCreated: 'Created at',
@@ -17,29 +20,43 @@ const SORTABLE_FIELDS = {
   visits: 'Visits',
 };
 
-export class ShortUrlsList extends React.Component {
-  refreshList = extraParams => {
+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,
+};
+
+export class ShortUrlsListComponent extends React.Component {
+  refreshList = (extraParams) => {
     const { listShortUrls, shortUrlsListParams } = this.props;
+
     listShortUrls({
       ...shortUrlsListParams,
-      ...extraParams
+      ...extraParams,
     });
   };
-  determineOrderDir = field => {
+  determineOrderDir = (field) => {
     if (this.state.orderField !== field) {
       return 'ASC';
     }
 
     const newOrderMap = {
-      'ASC': 'DESC',
-      'DESC': undefined,
+      ASC: 'DESC',
+      DESC: undefined,
     };
+
     return this.state.orderDir ? newOrderMap[this.state.orderDir] : 'ASC';
   };
-  orderBy = field => {
+  orderBy = (field) => {
     const newOrderDir = this.determineOrderDir(field);
+
     this.setState({ orderField: newOrderDir !== undefined ? field : undefined, orderDir: newOrderDir });
-    this.refreshList({ orderBy: { [field]: newOrderDir } })
+    this.refreshList({ orderBy: { [field]: newOrderDir } });
   };
   renderOrderIcon = (field, className = 'short-urls-list__header-icon') => {
     if (this.state.orderField !== field) {
@@ -58,21 +75,23 @@ export class ShortUrlsList extends React.Component {
     super(props);
 
     const { orderBy } = props.shortUrlsListParams;
+
     this.state = {
       orderField: orderBy ? head(keys(orderBy)) : undefined,
       orderDir: orderBy ? head(values(orderBy)) : undefined,
-    }
+    };
   }
 
   componentDidMount() {
     const { match: { params }, location } = this.props;
     const query = qs.parse(location.search, { ignoreQueryPrefix: true });
 
-    this.refreshList({ page: params.page, tags: query.tag ? [query.tag] : [] });
+    this.refreshList({ page: params.page, tags: query.tag ? [ query.tag ] : [] });
   }
 
   renderShortUrls() {
     const { shortUrlsList, selectedServer, loading, error, shortUrlsListParams } = this.props;
+
     if (error) {
       return (
         <tr>
@@ -85,11 +104,11 @@ export class ShortUrlsList extends React.Component {
       return <tr><td colSpan="6" className="text-center">Loading...</td></tr>;
     }
 
-    if (! loading && isEmpty(shortUrlsList)) {
+    if (!loading && isEmpty(shortUrlsList)) {
       return <tr><td colSpan="6" className="text-center">No results found</td></tr>;
     }
 
-    return shortUrlsList.map(shortUrl => (
+    return shortUrlsList.map((shortUrl) => (
       <ShortUrlsRow
         shortUrl={shortUrl}
         selectedServer={selectedServer}
@@ -108,11 +127,12 @@ export class ShortUrlsList extends React.Component {
             Order by
           </DropdownToggle>
           <DropdownMenu className="short-urls-list__order-dropdown">
-            {toPairs(SORTABLE_FIELDS).map(([key, value]) =>
+            {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>)}
+              </DropdownItem>
+            ))}
           </DropdownMenu>
         </UncontrolledDropdown>
       </div>
@@ -166,4 +186,11 @@ export class ShortUrlsList extends React.Component {
   }
 }
 
-export default connect(pick(['selectedServer', 'shortUrlsListParams']), { listShortUrls })(ShortUrlsList);
+ShortUrlsListComponent.propTypes = propTypes;
+
+const ShortUrlsList = connect(
+  pick([ 'selectedServer', 'shortUrlsListParams' ]),
+  { listShortUrls }
+)(ShortUrlsListComponent);
+
+export default ShortUrlsList;
diff --git a/src/short-urls/helpers/CreateShortUrlResult.js b/src/short-urls/helpers/CreateShortUrlResult.js
index 32eb67fd..2a0d8223 100644
--- a/src/short-urls/helpers/CreateShortUrlResult.js
+++ b/src/short-urls/helpers/CreateShortUrlResult.js
@@ -3,8 +3,18 @@ import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import { isNil } from 'ramda';
 import React from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import './CreateShortUrlResult.scss'
 import { Card, CardBody, Tooltip } from 'reactstrap';
+import PropTypes from 'prop-types';
+import { createShortUrlResultType } from '../reducers/shortUrlCreationResult';
+import './CreateShortUrlResult.scss';
+
+const TIME_TO_SHOW_COPY_TOOLTIP = 2000;
+
+const propTypes = {
+  resetCreateShortUrl: PropTypes.func,
+  error: PropTypes.bool,
+  result: createShortUrlResultType,
+};
 
 export default class CreateShortUrlResult extends React.Component {
   state = { showCopyTooltip: false };
@@ -30,7 +40,7 @@ export default class CreateShortUrlResult extends React.Component {
     const { shortUrl } = result;
     const onCopy = () => {
       this.setState({ showCopyTooltip: true });
-      setTimeout(() => this.setState({ showCopyTooltip: false }), 2000);
+      setTimeout(() => this.setState({ showCopyTooltip: false }), TIME_TO_SHOW_COPY_TOOLTIP);
     };
 
     return (
@@ -39,8 +49,12 @@ export default class CreateShortUrlResult extends React.Component {
           <b>Great!</b> The short URL is <b>{shortUrl}</b>
 
           <CopyToClipboard text={shortUrl} onCopy={onCopy}>
-            <button className="btn btn-light btn-sm create-short-url-result__copy-btn" id="copyBtn" type="button">
-              <FontAwesomeIcon icon={copyIcon}/> Copy
+            <button
+              className="btn btn-light btn-sm create-short-url-result__copy-btn"
+              id="copyBtn"
+              type="button"
+            >
+              <FontAwesomeIcon icon={copyIcon} /> Copy
             </button>
           </CopyToClipboard>
 
@@ -51,4 +65,6 @@ export default class CreateShortUrlResult extends React.Component {
       </Card>
     );
   }
-};
+}
+
+CreateShortUrlResult.propTypes = propTypes;
diff --git a/src/short-urls/helpers/EditTagsModal.js b/src/short-urls/helpers/EditTagsModal.js
index 8bef6daf..8eda0b9c 100644
--- a/src/short-urls/helpers/EditTagsModal.js
+++ b/src/short-urls/helpers/EditTagsModal.js
@@ -1,30 +1,33 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import TagsSelector from '../../utils/TagsSelector';
 import PropTypes from 'prop-types';
+import { pick } from 'ramda';
+import TagsSelector from '../../utils/TagsSelector';
 import {
   editShortUrlTags,
   resetShortUrlsTags,
   shortUrlTagsType,
-  shortUrlTagsEdited
+  shortUrlTagsEdited,
 } from '../reducers/shortUrlTags';
-import { pick } from 'ramda';
+import ExternalLink from '../../utils/ExternalLink';
+import { shortUrlType } from '../reducers/shortUrlsList';
 
 const propTypes = {
   isOpen: PropTypes.bool.isRequired,
   toggle: PropTypes.func.isRequired,
   url: PropTypes.string.isRequired,
-  shortUrl: PropTypes.shape({
-    tags: PropTypes.arrayOf(PropTypes.string),
-    shortCode: PropTypes.string,
-  }).isRequired,
+  shortUrl: shortUrlType.isRequired,
   shortUrlTags: shortUrlTagsType,
+  editShortUrlTags: PropTypes.func,
+  shortUrlTagsEdited: PropTypes.func,
+  resetShortUrlsTags: PropTypes.func,
 };
 
-export class EditTagsModal extends React.Component {
+export class EditTagsModalComponent extends React.Component {
   saveTags = () => {
     const { editShortUrlTags, shortUrl, toggle } = this.props;
+
     editShortUrlTags(shortUrl.shortCode, this.state.tags)
       .then(() => {
         this.tagsSaved = true;
@@ -39,11 +42,13 @@ export class EditTagsModal extends React.Component {
 
     const { shortUrlTagsEdited, shortUrl } = this.props;
     const { tags } = this.state;
+
     shortUrlTagsEdited(shortUrl.shortCode, tags);
   };
 
   componentDidMount() {
     const { resetShortUrlsTags } = this.props;
+
     resetShortUrlsTags();
     this.tagsSaved = false;
   }
@@ -57,12 +62,12 @@ export class EditTagsModal extends React.Component {
     const { isOpen, toggle, url, shortUrlTags } = this.props;
 
     return (
-      <Modal isOpen={isOpen} toggle={toggle} centered onClosed={this.refreshShortUrls}>
+      <Modal isOpen={isOpen} toggle={toggle} centered onClosed={() => this.refreshShortUrls}>
         <ModalHeader toggle={toggle}>
-          Edit tags for <a target="_blank" href={url}>{url}</a>
+          Edit tags for <ExternalLink href={url}>{url}</ExternalLink>
         </ModalHeader>
         <ModalBody>
-          <TagsSelector tags={this.state.tags} onChange={tags => this.setState({ tags })} />
+          <TagsSelector tags={this.state.tags} onChange={(tags) => this.setState({ tags })} />
           {shortUrlTags.error && (
             <div className="p-2 mt-2 bg-danger text-white text-center">
               Something went wrong while saving the tags :(
@@ -74,8 +79,8 @@ export class EditTagsModal extends React.Component {
           <button
             className="btn btn-primary"
             type="button"
-            onClick={this.saveTags}
             disabled={shortUrlTags.saving}
+            onClick={() => this.saveTags}
           >
             {shortUrlTags.saving ? 'Saving tags...' : 'Save tags'}
           </button>
@@ -85,9 +90,11 @@ export class EditTagsModal extends React.Component {
   }
 }
 
-EditTagsModal.propTypes = propTypes;
+EditTagsModalComponent.propTypes = propTypes;
 
-export default connect(
-  pick(['shortUrlTags']),
+const EditTagsModal = connect(
+  pick([ 'shortUrlTags' ]),
   { editShortUrlTags, resetShortUrlsTags, shortUrlTagsEdited }
-)(EditTagsModal);
+)(EditTagsModalComponent);
+
+export default EditTagsModal;
diff --git a/src/short-urls/helpers/PreviewModal.js b/src/short-urls/helpers/PreviewModal.js
index ee5393ca..87e171aa 100644
--- a/src/short-urls/helpers/PreviewModal.js
+++ b/src/short-urls/helpers/PreviewModal.js
@@ -1,11 +1,21 @@
-import React from 'react'
+import React from 'react';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+import PropTypes from 'prop-types';
 import './PreviewModal.scss';
+import ExternalLink from '../../utils/ExternalLink';
 
-export default function PreviewModal ({ url, toggle, isOpen }) {
+const propTypes = {
+  url: PropTypes.string,
+  toggle: PropTypes.func,
+  isOpen: PropTypes.bool,
+};
+
+export default function PreviewModal({ url, toggle, isOpen }) {
   return (
     <Modal isOpen={isOpen} toggle={toggle} size="lg">
-      <ModalHeader toggle={toggle}>Preview for <a target="_blank" href={url}>{url}</a></ModalHeader>
+      <ModalHeader toggle={toggle}>
+        Preview for <ExternalLink href={url}>{url}</ExternalLink>
+      </ModalHeader>
       <ModalBody>
         <div className="text-center">
           <p className="preview-modal__loader">Loading...</p>
@@ -15,3 +25,5 @@ export default function PreviewModal ({ url, toggle, isOpen }) {
     </Modal>
   );
 }
+
+PreviewModal.propTypes = propTypes;
diff --git a/src/short-urls/helpers/QrCodeModal.js b/src/short-urls/helpers/QrCodeModal.js
index 194443f2..ee83b1df 100644
--- a/src/short-urls/helpers/QrCodeModal.js
+++ b/src/short-urls/helpers/QrCodeModal.js
@@ -1,11 +1,21 @@
-import React from 'react'
+import React from 'react';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+import PropTypes from 'prop-types';
 import './QrCodeModal.scss';
+import ExternalLink from '../../utils/ExternalLink';
 
-export default function QrCodeModal ({ url, toggle, isOpen }) {
+const propTypes = {
+  url: PropTypes.string,
+  toggle: PropTypes.func,
+  isOpen: PropTypes.bool,
+};
+
+export default function QrCodeModal({ url, toggle, isOpen }) {
   return (
     <Modal isOpen={isOpen} toggle={toggle} centered>
-      <ModalHeader toggle={toggle}>QR code for <a target="_blank" href={url}>{url}</a></ModalHeader>
+      <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" />
@@ -14,3 +24,5 @@ export default function QrCodeModal ({ url, toggle, isOpen }) {
     </Modal>
   );
 }
+
+QrCodeModal.propTypes = propTypes;
diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js
index 3190e327..ae183cbc 100644
--- a/src/short-urls/helpers/ShortUrlsRow.js
+++ b/src/short-urls/helpers/ShortUrlsRow.js
@@ -1,9 +1,23 @@
 import { isEmpty } from 'ramda';
 import React from 'react';
 import Moment from 'react-moment';
+import PropTypes from 'prop-types';
 import Tag from '../../utils/Tag';
-import './ShortUrlsRow.scss';
+import { shortUrlsListParamsType } from '../reducers/shortUrlsListParams';
+import { serverType } from '../../servers/prop-types';
+import ExternalLink from '../../utils/ExternalLink';
+import { shortUrlType } from '../reducers/shortUrlsList';
 import { ShortUrlsRowMenu } from './ShortUrlsRowMenu';
+import './ShortUrlsRow.scss';
+
+const COPIED_MSG_TIME = 2000;
+
+const propTypes = {
+  refreshList: PropTypes.func,
+  shortUrlsListParams: shortUrlsListParamsType,
+  selectedServer: serverType,
+  shortUrl: shortUrlType,
+};
 
 export class ShortUrlsRow extends React.Component {
   state = { copiedToClipboard: false };
@@ -15,7 +29,8 @@ export class ShortUrlsRow extends React.Component {
 
     const { refreshList, shortUrlsListParams } = this.props;
     const selectedTags = shortUrlsListParams.tags || [];
-    return tags.map(tag => (
+
+    return tags.map((tag) => (
       <Tag
         key={tag}
         text={tag}
@@ -34,10 +49,10 @@ export class ShortUrlsRow extends React.Component {
           <Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment>
         </td>
         <td className="short-urls-row__cell" data-th="Short URL: ">
-          <a href={completeShortUrl} target="_blank">{completeShortUrl}</a>
+          <ExternalLink href={completeShortUrl}>{completeShortUrl}</ExternalLink>
         </td>
         <td className="short-urls-row__cell short-urls-row__cell--break" data-th="Long URL: ">
-          <a href={shortUrl.originalUrl} target="_blank">{shortUrl.originalUrl}</a>
+          <ExternalLink href={shortUrl.originalUrl}>{shortUrl.originalUrl}</ExternalLink>
         </td>
         <td className="short-urls-row__cell" data-th="Tags: ">{this.renderTags(shortUrl.tags)}</td>
         <td className="short-urls-row__cell text-md-right" data-th="Visits: ">{shortUrl.visitsCount}</td>
@@ -54,7 +69,7 @@ export class ShortUrlsRow extends React.Component {
             shortUrl={shortUrl}
             onCopyToClipboard={() => {
               this.setState({ copiedToClipboard: true });
-              setTimeout(() => this.setState({ copiedToClipboard: false }), 2000);
+              setTimeout(() => this.setState({ copiedToClipboard: false }), COPIED_MSG_TIME);
             }}
           />
         </td>
@@ -62,3 +77,5 @@ export class ShortUrlsRow extends React.Component {
     );
   }
 }
+
+ShortUrlsRow.propTypes = propTypes;
diff --git a/src/short-urls/helpers/ShortUrlsRowMenu.js b/src/short-urls/helpers/ShortUrlsRowMenu.js
index 916736d2..436817c3 100644
--- a/src/short-urls/helpers/ShortUrlsRowMenu.js
+++ b/src/short-urls/helpers/ShortUrlsRowMenu.js
@@ -9,11 +9,21 @@ import React from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { Link } from 'react-router-dom';
 import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
+import PropTypes from 'prop-types';
+import { serverType } from '../../servers/prop-types';
+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,
+};
+
 export class ShortUrlsRowMenu extends React.Component {
   state = {
     isOpen: false,
@@ -21,26 +31,26 @@ export class ShortUrlsRowMenu extends React.Component {
     isPreviewOpen: false,
     isTagsModalOpen: false,
   };
-  toggle = () => this.setState({ isOpen: !this.state.isOpen });
+  toggle = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
 
   render() {
     const { completeShortUrl, onCopyToClipboard, selectedServer, shortUrl } = this.props;
     const serverId = selectedServer ? selectedServer.id : '';
-    const toggleQrCode = () => this.setState({isQrModalOpen: !this.state.isQrModalOpen});
-    const togglePreview = () => this.setState({isPreviewOpen: !this.state.isPreviewOpen});
-    const toggleTags = () => this.setState({isTagsModalOpen: !this.state.isTagsModalOpen});
+    const toggleQrCode = () => this.setState(({ isQrModalOpen }) => ({ isQrModalOpen: !isQrModalOpen }));
+    const togglePreview = () => this.setState(({ isPreviewOpen }) => ({ isPreviewOpen: !isPreviewOpen }));
+    const toggleTags = () => this.setState(({ isTagsModalOpen }) => ({ isTagsModalOpen: !isTagsModalOpen }));
 
     return (
       <ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
         <DropdownToggle size="sm" caret className="short-urls-row-menu__dropdown-toggle btn-outline-secondary">
-          &nbsp;<FontAwesomeIcon icon={menuIcon}/>&nbsp;
+          &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
         </DropdownToggle>
         <DropdownMenu>
           <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
+            <FontAwesomeIcon icon={tagsIcon} /> &nbsp;Edit tags
           </DropdownItem>
           <EditTagsModal
             url={completeShortUrl}
@@ -49,10 +59,10 @@ export class ShortUrlsRowMenu extends React.Component {
             toggle={toggleTags}
           />
 
-          <DropdownItem divider/>
+          <DropdownItem divider />
 
           <DropdownItem onClick={togglePreview}>
-            <FontAwesomeIcon icon={pictureIcon}/> &nbsp;Preview
+            <FontAwesomeIcon icon={pictureIcon} /> &nbsp;Preview
           </DropdownItem>
           <PreviewModal
             url={completeShortUrl}
@@ -61,7 +71,7 @@ export class ShortUrlsRowMenu extends React.Component {
           />
 
           <DropdownItem onClick={toggleQrCode}>
-            <FontAwesomeIcon icon={qrIcon}/> &nbsp;QR code
+            <FontAwesomeIcon icon={qrIcon} /> &nbsp;QR code
           </DropdownItem>
           <QrCodeModal
             url={completeShortUrl}
@@ -69,11 +79,11 @@ export class ShortUrlsRowMenu extends React.Component {
             toggle={toggleQrCode}
           />
 
-          <DropdownItem divider/>
+          <DropdownItem divider />
 
           <CopyToClipboard text={completeShortUrl} onCopy={onCopyToClipboard}>
             <DropdownItem>
-              <FontAwesomeIcon icon={copyIcon}/> &nbsp;Copy to clipboard
+              <FontAwesomeIcon icon={copyIcon} /> &nbsp;Copy to clipboard
             </DropdownItem>
           </CopyToClipboard>
         </DropdownMenu>
@@ -81,3 +91,5 @@ export class ShortUrlsRowMenu extends React.Component {
     );
   }
 }
+
+ShortUrlsRowMenu.propTypes = propTypes;
diff --git a/src/short-urls/reducers/shortUrlCreationResult.js b/src/short-urls/reducers/shortUrlCreationResult.js
index c74b97d5..4e974cfc 100644
--- a/src/short-urls/reducers/shortUrlCreationResult.js
+++ b/src/short-urls/reducers/shortUrlCreationResult.js
@@ -1,11 +1,20 @@
-import ShlinkApiClient from '../../api/ShlinkApiClient';
 import { curry } from 'ramda';
+import PropTypes from 'prop-types';
+import shlinkApiClient from '../../api/ShlinkApiClient';
 
 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 createShortUrlResultType = {
+  result: PropTypes.shape({
+    shortUrl: PropTypes.string,
+  }),
+  saving: PropTypes.bool,
+  error: PropTypes.bool,
+};
+
 const defaultState = {
   result: null,
   saving: false,
@@ -38,16 +47,18 @@ export default function reducer(state = defaultState, action) {
   }
 }
 
-export const _createShortUrl = (ShlinkApiClient, data) => async dispatch => {
+export const _createShortUrl = (shlinkApiClient, data) => async (dispatch) => {
   dispatch({ type: CREATE_SHORT_URL_START });
 
   try {
-    const result = await ShlinkApiClient.createShortUrl(data);
+    const result = await shlinkApiClient.createShortUrl(data);
+
     dispatch({ type: CREATE_SHORT_URL, result });
   } catch (e) {
     dispatch({ type: CREATE_SHORT_URL_ERROR });
   }
 };
-export const createShortUrl = curry(_createShortUrl)(ShlinkApiClient);
+
+export const createShortUrl = curry(_createShortUrl)(shlinkApiClient);
 
 export const resetCreateShortUrl = () => ({ type: RESET_CREATE_SHORT_URL });
diff --git a/src/short-urls/reducers/shortUrlTags.js b/src/short-urls/reducers/shortUrlTags.js
index e2244a92..9502edfe 100644
--- a/src/short-urls/reducers/shortUrlTags.js
+++ b/src/short-urls/reducers/shortUrlTags.js
@@ -1,11 +1,15 @@
-import ShlinkApiClient from '../../api/ShlinkApiClient';
 import { curry } from 'ramda';
 import PropTypes from 'prop-types';
+import shlinkApiClient from '../../api/ShlinkApiClient';
 
 export const EDIT_SHORT_URL_TAGS_START = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_START';
+
 export const EDIT_SHORT_URL_TAGS_ERROR = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_ERROR';
+
 export const EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS';
+
 export const RESET_EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/RESET_EDIT_SHORT_URL_TAGS';
+
 export const SHORT_URL_TAGS_EDITED = 'shlink/shortUrlTags/SHORT_URL_TAGS_EDITED';
 
 export const shortUrlTagsType = PropTypes.shape({
@@ -50,19 +54,21 @@ export default function reducer(state = defaultState, action) {
   }
 }
 
-export const _editShortUrlTags = (ShlinkApiClient, shortCode, tags) => async (dispatch, getState) => {
+export const _editShortUrlTags = (shlinkApiClient, shortCode, tags) => async (dispatch) => {
   dispatch({ type: EDIT_SHORT_URL_TAGS_START });
 
   try {
     // Update short URL tags
-    await ShlinkApiClient.updateShortUrlTags(shortCode, tags);
+    await shlinkApiClient.updateShortUrlTags(shortCode, tags);
     dispatch({ tags, shortCode, type: EDIT_SHORT_URL_TAGS });
   } catch (e) {
     dispatch({ type: EDIT_SHORT_URL_TAGS_ERROR });
+
     throw e;
   }
 };
-export const editShortUrlTags = curry(_editShortUrlTags)(ShlinkApiClient);
+
+export const editShortUrlTags = curry(_editShortUrlTags)(shlinkApiClient);
 
 export const resetShortUrlsTags = () => ({ type: RESET_EDIT_SHORT_URL_TAGS });
 
diff --git a/src/short-urls/reducers/shortUrlVisits.js b/src/short-urls/reducers/shortUrlVisits.js
index a247fa2a..38281e38 100644
--- a/src/short-urls/reducers/shortUrlVisits.js
+++ b/src/short-urls/reducers/shortUrlVisits.js
@@ -1,50 +1,60 @@
-import ShlinkApiClient from '../../api/ShlinkApiClient';
 import { curry } from 'ramda';
+import PropTypes from 'prop-types';
+import shlinkApiClient from '../../api/ShlinkApiClient';
+import { shortUrlType } from './shortUrlsList';
 
 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';
 
+export const shortUrlVisitsType = {
+  shortUrl: shortUrlType,
+  visits: PropTypes.array,
+  loading: PropTypes.bool,
+  error: PropTypes.bool,
+};
+
 const initialState = {
   shortUrl: {},
   visits: [],
   loading: false,
-  error: false
+  error: false,
 };
 
-export default function dispatch (state = initialState, action) {
+export default function dispatch(state = initialState, action) {
   switch (action.type) {
     case GET_SHORT_URL_VISITS_START:
       return {
         ...state,
-        loading: true
+        loading: true,
       };
     case GET_SHORT_URL_VISITS_ERROR:
       return {
         ...state,
         loading: false,
-        error: true
+        error: true,
       };
     case GET_SHORT_URL_VISITS:
       return {
         shortUrl: action.shortUrl,
         visits: action.visits,
         loading: false,
-        error: false
+        error: false,
       };
     default:
       return state;
   }
 }
 
-export const _getShortUrlVisits = (ShlinkApiClient, shortCode, dates) => dispatch => {
+export const _getShortUrlVisits = (shlinkApiClient, shortCode, dates) => (dispatch) => {
   dispatch({ type: GET_SHORT_URL_VISITS_START });
 
   Promise.all([
-    ShlinkApiClient.getShortUrlVisits(shortCode, dates),
-    ShlinkApiClient.getShortUrl(shortCode)
+    shlinkApiClient.getShortUrlVisits(shortCode, dates),
+    shlinkApiClient.getShortUrl(shortCode),
   ])
-    .then(([visits, shortUrl]) => dispatch({ visits, shortUrl, type: GET_SHORT_URL_VISITS }))
+    .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);
+
+export const getShortUrlVisits = curry(_getShortUrlVisits)(shlinkApiClient);
diff --git a/src/short-urls/reducers/shortUrlsList.js b/src/short-urls/reducers/shortUrlsList.js
index 93c1f453..9925357a 100644
--- a/src/short-urls/reducers/shortUrlsList.js
+++ b/src/short-urls/reducers/shortUrlsList.js
@@ -1,11 +1,19 @@
-import ShlinkApiClient from '../../api/ShlinkApiClient';
-import { SHORT_URL_TAGS_EDITED } from './shortUrlTags';
 import { assoc, assocPath } from 'ramda';
+import PropTypes from 'prop-types';
+import shlinkApiClient from '../../api/ShlinkApiClient';
+import { SHORT_URL_TAGS_EDITED } from './shortUrlTags';
 
 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 = 'shlink/shortUrlsList/LIST_SHORT_URLS';
 
+export const shortUrlType = PropTypes.shape({
+  tags: PropTypes.arrayOf(PropTypes.string),
+  shortCode: PropTypes.string,
+  originalUrl: PropTypes.string,
+});
+
 const initialState = {
   shortUrls: {},
   loading: true,
@@ -19,34 +27,36 @@ export default function reducer(state = initialState, action) {
       return {
         loading: false,
         error: false,
-        shortUrls: action.shortUrls
+        shortUrls: action.shortUrls,
       };
     case LIST_SHORT_URLS_ERROR:
       return {
         loading: false,
         error: true,
-        shortUrls: []
+        shortUrls: [],
       };
     case SHORT_URL_TAGS_EDITED:
       const { data } = state.shortUrls;
-      return assocPath(['shortUrls', 'data'], data.map(shortUrl =>
+
+      return assocPath([ 'shortUrls', 'data' ], data.map((shortUrl) =>
         shortUrl.shortCode === action.shortCode
           ? assoc('tags', action.tags, shortUrl)
-          : shortUrl
-      ), state);
+          : shortUrl), state);
     default:
       return state;
   }
 }
 
-export const _listShortUrls = (ShlinkApiClient, params = {}) => async dispatch => {
+export const _listShortUrls = (shlinkApiClient, params = {}) => async (dispatch) => {
   dispatch({ type: LIST_SHORT_URLS_START });
 
   try {
-    const shortUrls = await ShlinkApiClient.listShortUrls(params);
+    const shortUrls = await shlinkApiClient.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);
+
+export const listShortUrls = (params = {}) => _listShortUrls(shlinkApiClient, params);
diff --git a/src/short-urls/reducers/shortUrlsListParams.js b/src/short-urls/reducers/shortUrlsListParams.js
index 29464264..7e5cfd6e 100644
--- a/src/short-urls/reducers/shortUrlsListParams.js
+++ b/src/short-urls/reducers/shortUrlsListParams.js
@@ -1,7 +1,14 @@
+import PropTypes from 'prop-types';
 import { LIST_SHORT_URLS } from './shortUrlsList';
 
 export const RESET_SHORT_URL_PARAMS = 'shlink/shortUrlsListParams/RESET_SHORT_URL_PARAMS';
 
+export const shortUrlsListParamsType = {
+  page: PropTypes.string,
+  tags: PropTypes.arrayOf(PropTypes.string),
+  searchTerm: PropTypes.string,
+};
+
 const defaultState = { page: '1' };
 
 export default function reducer(state = defaultState, action) {
diff --git a/src/tags/TagCard.js b/src/tags/TagCard.js
index f28b25e9..2ccfd21c 100644
--- a/src/tags/TagCard.js
+++ b/src/tags/TagCard.js
@@ -2,20 +2,21 @@ import { Card, CardBody } from 'reactstrap';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import deleteIcon from '@fortawesome/fontawesome-free-solid/faTrash';
 import editIcon from '@fortawesome/fontawesome-free-solid/faPencilAlt';
-import DeleteTagConfirmModal from './helpers/DeleteTagConfirmModal';
 import PropTypes from 'prop-types';
 import React from 'react';
-import ColorGenerator, { colorGeneratorType } from '../utils/ColorGenerator';
-import './TagCard.scss';
 import { Link } from 'react-router-dom';
+import colorGenerator, { colorGeneratorType } from '../utils/ColorGenerator';
+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: ColorGenerator,
+  colorGenerator,
 };
 
 export default class TagCard extends React.Component {
@@ -24,9 +25,9 @@ export default class TagCard extends React.Component {
   render() {
     const { tag, colorGenerator, currentServerId } = this.props;
     const toggleDelete = () =>
-      this.setState({ isDeleteModalOpen: !this.state.isDeleteModalOpen });
+      this.setState(({ isDeleteModalOpen }) => ({ isDeleteModalOpen: !isDeleteModalOpen }));
     const toggleEdit = () =>
-      this.setState({ isEditModalOpen: !this.state.isEditModalOpen });
+      this.setState(({ isEditModalOpen }) => ({ isEditModalOpen: !isEditModalOpen }));
 
     return (
       <Card className="tag-card">
@@ -35,17 +36,17 @@ export default class TagCard extends React.Component {
             className="btn btn-light btn-sm tag-card__btn tag-card__btn--last"
             onClick={toggleDelete}
           >
-            <FontAwesomeIcon icon={deleteIcon}/>
+            <FontAwesomeIcon icon={deleteIcon} />
           </button>
           <button
             className="btn btn-light btn-sm tag-card__btn"
             onClick={toggleEdit}
           >
-            <FontAwesomeIcon icon={editIcon}/>
+            <FontAwesomeIcon icon={editIcon} />
           </button>
           <h5 className="tag-card__tag-title">
             <div
-              style={{backgroundColor: colorGenerator.getColorForKey(tag)}}
+              style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
               className="tag-card__tag-bullet"
             />
             <Link to={`/server/${currentServerId}/list-short-urls/1?tag=${tag}`}>
diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js
index 5288a02b..c87ddfbd 100644
--- a/src/tags/TagsList.js
+++ b/src/tags/TagsList.js
@@ -1,25 +1,35 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { pick, splitEvery } from 'ramda';
-import { filterTags, listTags } from './reducers/tagsList';
+import PropTypes from 'prop-types';
 import MuttedMessage from '../utils/MuttedMessage';
-import TagCard from './TagCard';
 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,
+};
 
-export class TagsList extends React.Component {
-  state = { isDeleteModalOpen: false };
-
+export class TagsListComponent extends React.Component {
   componentDidMount() {
     const { listTags } = this.props;
+
     listTags();
   }
 
   renderContent() {
     const { tagsList, match } = this.props;
+
     if (tagsList.loading) {
-      return <MuttedMessage marginSize={0}>Loading...</MuttedMessage>
+      return <MuttedMessage marginSize={0}>Loading...</MuttedMessage>;
     }
 
     if (tagsList.error) {
@@ -31,17 +41,18 @@ export class TagsList extends React.Component {
     }
 
     const tagsCount = tagsList.filteredTags.length;
+
     if (tagsCount < 1) {
       return <MuttedMessage>No tags found</MuttedMessage>;
     }
 
-    const tagsGroups = splitEvery(ceil(tagsCount / 4), tagsList.filteredTags);
+    const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUP_SIZE), tagsList.filteredTags);
 
     return (
       <React.Fragment>
         {tagsGroups.map((group, index) => (
           <div key={index} className="col-md-6 col-xl-3">
-            {group.map(tag => (
+            {group.map((tag) => (
               <TagCard
                 key={tag}
                 tag={tag}
@@ -61,9 +72,9 @@ export class TagsList extends React.Component {
       <div className="shlink-container">
         {!this.props.tagsList.loading && (
           <SearchField
-            onChange={filterTags}
             className="mb-3"
             placeholder="Search tags..."
+            onChange={filterTags}
           />
         )}
         <div className="row">
@@ -74,4 +85,8 @@ export class TagsList extends React.Component {
   }
 }
 
-export default connect(pick(['tagsList']), { listTags, filterTags })(TagsList);
+TagsListComponent.propTypes = propTypes;
+
+const TagsList = connect(pick([ 'tagsList' ]), { listTags, filterTags })(TagsListComponent);
+
+export default TagsList;
diff --git a/src/tags/helpers/DeleteTagConfirmModal.js b/src/tags/helpers/DeleteTagConfirmModal.js
index 59a4cb33..0cb2b1d8 100644
--- a/src/tags/helpers/DeleteTagConfirmModal.js
+++ b/src/tags/helpers/DeleteTagConfirmModal.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import PropTypes from 'prop-types';
@@ -11,22 +11,25 @@ const propTypes = {
   isOpen: PropTypes.bool.isRequired,
   deleteTag: PropTypes.func,
   tagDelete: tagDeleteType,
+  tagDeleted: PropTypes.func,
 };
 
-export class DeleteTagConfirmModal extends Component {
+export class DeleteTagConfirmModalComponent extends React.Component {
   doDelete = () => {
     const { tag, toggle, deleteTag } = this.props;
+
     deleteTag(tag).then(() => {
       this.tagWasDeleted = true;
       toggle();
     });
   };
-  onClosed = () => {
+  handleOnClosed = () => {
     if (!this.tagWasDeleted) {
       return;
     }
 
     const { tagDeleted, tag } = this.props;
+
     tagDeleted(tag);
   };
 
@@ -38,7 +41,7 @@ export class DeleteTagConfirmModal extends Component {
     const { tag, toggle, isOpen, tagDelete } = this.props;
 
     return (
-      <Modal toggle={toggle} isOpen={isOpen} centered onClosed={this.onClosed}>
+      <Modal toggle={toggle} isOpen={isOpen} centered onClosed={this.handleOnClosed}>
         <ModalHeader toggle={toggle}>
           <span className="text-danger">Delete tag</span>
         </ModalHeader>
@@ -54,8 +57,8 @@ export class DeleteTagConfirmModal extends Component {
           <button className="btn btn-link" onClick={toggle}>Cancel</button>
           <button
             className="btn btn-danger"
-            onClick={this.doDelete}
             disabled={tagDelete.deleting}
+            onClick={() => this.doDelete()}
           >
             {tagDelete.deleting ? 'Deleting tag...' : 'Delete tag'}
           </button>
@@ -65,9 +68,11 @@ export class DeleteTagConfirmModal extends Component {
   }
 }
 
-DeleteTagConfirmModal.propTypes = propTypes;
+DeleteTagConfirmModalComponent.propTypes = propTypes;
 
-export default connect(
-  pick(['tagDelete']),
+const DeleteTagConfirmModal = connect(
+  pick([ 'tagDelete' ]),
   { deleteTag, tagDeleted }
-)(DeleteTagConfirmModal);
+)(DeleteTagConfirmModalComponent);
+
+export default DeleteTagConfirmModal;
diff --git a/src/tags/helpers/EditTagModal.js b/src/tags/helpers/EditTagModal.js
index ce038998..5c12d67b 100644
--- a/src/tags/helpers/EditTagModal.js
+++ b/src/tags/helpers/EditTagModal.js
@@ -2,20 +2,32 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
 import { pick } from 'ramda';
-import { editTag, tagEdited } from '../reducers/tagEdit';
 import { ChromePicker } from 'react-color';
-import ColorGenerator from '../../utils/ColorGenerator';
-import colorIcon from '@fortawesome/fontawesome-free-solid/faPalette'
-import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+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: ColorGenerator,
+  colorGenerator,
 };
 
-
-export class EditTagModal extends React.Component {
-  saveTag = e => {
+export class EditTagModalComponent extends React.Component {
+  saveTag = (e) => {
     e.preventDefault();
     const { tag: oldName, editTag, toggle } = this.props;
     const { tag: newName, color } = this.state;
@@ -27,13 +39,14 @@ export class EditTagModal extends React.Component {
       })
       .catch(() => {});
   };
-  onClosed = () => {
+  handleOnClosed = () => {
     if (!this.tagWasEdited) {
       return;
     }
 
     const { tag: oldName, tagEdited } = this.props;
     const { tag: newName, color } = this.state;
+
     tagEdited(oldName, newName, color);
   };
 
@@ -41,11 +54,12 @@ export class EditTagModal extends React.Component {
     super(props);
 
     const { colorGenerator, tag } = props;
+
     this.state = {
       showColorPicker: false,
       tag,
-      color: colorGenerator.getColorForKey(tag)
-    }
+      color: colorGenerator.getColorForKey(tag),
+    };
   }
 
   componentDidMount() {
@@ -56,11 +70,11 @@ export class EditTagModal extends React.Component {
     const { isOpen, toggle, tagEdit } = this.props;
     const { tag, color } = this.state;
     const toggleColorPicker = () =>
-      this.setState({ showColorPicker: !this.state.showColorPicker });
+      this.setState(({ showColorPicker }) => ({ showColorPicker: !showColorPicker }));
 
     return (
-      <Modal isOpen={isOpen} toggle={toggle} centered onClosed={this.onClosed}>
-        <form onSubmit={this.saveTag}>
+      <Modal isOpen={isOpen} toggle={toggle} centered onClosed={this.handleOnClosed}>
+        <form onSubmit={() => this.saveTag()}>
           <ModalHeader toggle={toggle}>Edit tag</ModalHeader>
           <ModalBody>
             <div className="input-group">
@@ -87,17 +101,17 @@ export class EditTagModal extends React.Component {
               >
                 <ChromePicker
                   color={color}
-                  onChange={color => this.setState({ color: color.hex })}
                   disableAlpha
+                  onChange={(color) => this.setState({ color: color.hex })}
                 />
               </Popover>
               <input
                 type="text"
                 value={tag}
-                onChange={e => this.setState({ tag: e.target.value })}
                 placeholder="Tag"
                 required
                 className="form-control"
+                onChange={(e) => this.setState({ tag: e.target.value })}
               />
             </div>
 
@@ -119,6 +133,9 @@ export class EditTagModal extends React.Component {
   }
 }
 
-EditTagModal.defaultProps = defaultProps;
+EditTagModalComponent.propTypes = propTypes;
+EditTagModalComponent.defaultProps = defaultProps;
 
-export default connect(pick(['tagEdit']), { editTag, tagEdited })(EditTagModal);
+const EditTagModal = connect(pick([ 'tagEdit' ]), { editTag, tagEdited })(EditTagModalComponent);
+
+export default EditTagModal;
diff --git a/src/tags/reducers/tagDelete.js b/src/tags/reducers/tagDelete.js
index c80d43f7..379476c8 100644
--- a/src/tags/reducers/tagDelete.js
+++ b/src/tags/reducers/tagDelete.js
@@ -1,10 +1,11 @@
-import ShlinkApiClient from '../../api/ShlinkApiClient';
 import { curry } from 'ramda';
 import PropTypes from 'prop-types';
+import shlinkApiClient from '../../api/ShlinkApiClient';
 
 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 TAG_DELETED = 'shlink/deleteTag/TAG_DELETED';
 
 export const tagDeleteType = PropTypes.shape({
@@ -39,17 +40,19 @@ export default function reduce(state = defaultState, action) {
   }
 }
 
-export const _deleteTag = (ShlinkApiClient, tag) => async dispatch => {
+export const _deleteTag = (shlinkApiClient, tag) => async (dispatch) => {
   dispatch({ type: DELETE_TAG_START });
 
   try {
-    await ShlinkApiClient.deleteTags([tag]);
+    await shlinkApiClient.deleteTags([ tag ]);
     dispatch({ type: DELETE_TAG });
   } catch (e) {
     dispatch({ type: DELETE_TAG_ERROR });
+
     throw e;
   }
 };
-export const deleteTag = curry(_deleteTag)(ShlinkApiClient);
 
-export const tagDeleted = tag => ({ type: TAG_DELETED, tag });
+export const deleteTag = curry(_deleteTag)(shlinkApiClient);
+
+export const tagDeleted = (tag) => ({ type: TAG_DELETED, tag });
diff --git a/src/tags/reducers/tagEdit.js b/src/tags/reducers/tagEdit.js
index f8d6aae0..0c97ea1a 100644
--- a/src/tags/reducers/tagEdit.js
+++ b/src/tags/reducers/tagEdit.js
@@ -1,10 +1,11 @@
-import ShlinkApiClient from '../../api/ShlinkApiClient';
-import ColorGenerator from '../../utils/ColorGenerator';
 import { curry, pick } from 'ramda';
+import shlinkApiClient from '../../api/ShlinkApiClient';
+import colorGenerator from '../../utils/ColorGenerator';
 
 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 TAG_EDITED = 'shlink/editTag/TAG_EDITED';
 
 const defaultState = {
@@ -30,7 +31,7 @@ export default function reducer(state = defaultState, action) {
       };
     case EDIT_TAG:
       return {
-        ...pick(['oldName', 'newName'], action),
+        ...pick([ 'oldName', 'newName' ], action),
         editing: false,
         error: false,
       };
@@ -39,20 +40,22 @@ export default function reducer(state = defaultState, action) {
   }
 }
 
-export const _editTag = (ShlinkApiClient, ColorGenerator, oldName, newName, color) =>
-  async dispatch => {
+export const _editTag = (shlinkApiClient, colorGenerator, oldName, newName, color) =>
+  async (dispatch) => {
     dispatch({ type: EDIT_TAG_START });
 
     try {
-      await ShlinkApiClient.editTag(oldName, newName);
-      ColorGenerator.setColorForKey(newName, color);
+      await shlinkApiClient.editTag(oldName, newName);
+      colorGenerator.setColorForKey(newName, color);
       dispatch({ type: EDIT_TAG, oldName, newName });
     } catch (e) {
       dispatch({ type: EDIT_TAG_ERROR });
+
       throw e;
     }
   };
-export const editTag = curry(_editTag)(ShlinkApiClient, ColorGenerator);
+
+export const editTag = curry(_editTag)(shlinkApiClient, colorGenerator);
 
 export const tagEdited = (oldName, newName, color) => ({
   type: TAG_EDITED,
diff --git a/src/tags/reducers/tagsList.js b/src/tags/reducers/tagsList.js
index d2d7c819..b16ceda4 100644
--- a/src/tags/reducers/tagsList.js
+++ b/src/tags/reducers/tagsList.js
@@ -1,6 +1,6 @@
-import ShlinkApiClient from '../../api/ShlinkApiClient';
-import { TAG_DELETED } from './tagDelete';
 import { reject } from 'ramda';
+import shlinkApiClient from '../../api/ShlinkApiClient';
+import { TAG_DELETED } from './tagDelete';
 import { TAG_EDITED } from './tagEdit';
 
 const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
@@ -16,7 +16,7 @@ const defaultState = {
 };
 
 export default function reducer(state = defaultState, action) {
-  switch(action.type) {
+  switch (action.type) {
     case LIST_TAGS_START:
       return {
         ...state,
@@ -39,14 +39,17 @@ export default function reducer(state = defaultState, action) {
     case TAG_DELETED:
       return {
         ...state,
+
         // FIXME This should be optimized somehow...
-        tags: reject(tag => tag === action.tag, state.tags),
-        filteredTags: reject(tag => tag === action.tag, state.filteredTags),
+        tags: reject((tag) => tag === action.tag, state.tags),
+        filteredTags: reject((tag) => tag === action.tag, state.filteredTags),
       };
     case TAG_EDITED:
-      const renameTag = tag => tag === action.oldName ? action.newName : tag;
+      const renameTag = (tag) => tag === action.oldName ? action.newName : tag;
+
       return {
         ...state,
+
         // FIXME This should be optimized somehow...
         tags: state.tags.map(renameTag).sort(),
         filteredTags: state.filteredTags.map(renameTag).sort(),
@@ -55,7 +58,7 @@ export default function reducer(state = defaultState, action) {
       return {
         ...state,
         filteredTags: state.tags.filter(
-          tag => tag.toLowerCase().match(action.searchTerm),
+          (tag) => tag.toLowerCase().match(action.searchTerm),
         ),
       };
     default:
@@ -63,19 +66,21 @@ export default function reducer(state = defaultState, action) {
   }
 }
 
-export const _listTags = ShlinkApiClient => async dispatch => {
+export const _listTags = (shlinkApiClient) => async (dispatch) => {
   dispatch({ type: LIST_TAGS_START });
 
   try {
-    const tags = await ShlinkApiClient.listTags();
+    const tags = await shlinkApiClient.listTags();
+
     dispatch({ tags, type: LIST_TAGS });
   } catch (e) {
     dispatch({ type: LIST_TAGS_ERROR });
   }
 };
-export const listTags = () => _listTags(ShlinkApiClient);
 
-export const filterTags = searchTerm => ({
+export const listTags = () => _listTags(shlinkApiClient);
+
+export const filterTags = (searchTerm) => ({
   type: FILTER_TAGS,
   searchTerm,
 });
diff --git a/src/utils/ColorGenerator.js b/src/utils/ColorGenerator.js
index 126df448..859608a2 100644
--- a/src/utils/ColorGenerator.js
+++ b/src/utils/ColorGenerator.js
@@ -1,13 +1,14 @@
-import Storage from './Storage';
-import PropTypes from 'prop-types';
 import { range } from 'ramda';
+import PropTypes from 'prop-types';
+import storage from './Storage';
 
+const HEX_COLOR_LENGTH = 6;
 const { floor, random } = Math;
 const letters = '0123456789ABCDEF';
 const buildRandomColor = () =>
   `#${
-    range(0, 6)
-      .map(() => letters[floor(random() * 16)])
+    range(0, HEX_COLOR_LENGTH)
+      .map(() => letters[floor(random() * letters.length)])
       .join('')
   }`;
 
@@ -17,12 +18,13 @@ export class ColorGenerator {
     this.colors = this.storage.get('colors') || {};
   }
 
-  getColorForKey = key => {
+  getColorForKey = (key) => {
     const color = this.colors[key];
 
     // 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);
     }
 
@@ -40,4 +42,6 @@ export const colorGeneratorType = PropTypes.shape({
   setColorForKey: PropTypes.func,
 });
 
-export default new ColorGenerator(Storage);
+const colorGenerator = new ColorGenerator(storage);
+
+export default colorGenerator;
diff --git a/src/utils/ExternalLink.js b/src/utils/ExternalLink.js
new file mode 100644
index 00000000..f926db7e
--- /dev/null
+++ b/src/utils/ExternalLink.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  href: PropTypes.string.isRequired,
+  children: PropTypes.node,
+};
+
+export default function ExternalLink(props) {
+  const { href, children, ...rest } = props;
+
+  return (
+    <a target="_blank" rel="noopener noreferrer" href={href} {...rest}>
+      {children}
+    </a>
+  );
+}
+
+ExternalLink.propTypes = propTypes;
diff --git a/src/utils/MuttedMessage.js b/src/utils/MuttedMessage.js
index e5619d0d..3b2e6cc6 100644
--- a/src/utils/MuttedMessage.js
+++ b/src/utils/MuttedMessage.js
@@ -1,8 +1,15 @@
 import React from 'react';
 import { Card } from 'reactstrap';
 import classnames from 'classnames';
+import PropTypes from 'prop-types';
 
-export default function MutedMessage({ children, marginSize = 4 }) {
+const DEFAULT_MARGIN_SIZE = 4;
+const propTypes = {
+  marginSize: PropTypes.number,
+  children: PropTypes.node,
+};
+
+export default function MutedMessage({ children, marginSize = DEFAULT_MARGIN_SIZE }) {
   const cardClasses = classnames('bg-light', {
     [`mt-${marginSize}`]: marginSize > 0,
   });
@@ -17,3 +24,5 @@ export default function MutedMessage({ children, marginSize = 4 }) {
     </div>
   );
 }
+
+MutedMessage.propTypes = propTypes;
diff --git a/src/utils/SearchField.js b/src/utils/SearchField.js
index b2474647..5ed91632 100644
--- a/src/utils/SearchField.js
+++ b/src/utils/SearchField.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import './SearchField.scss';
 
+const DEFAULT_SEARCH_INTERVAL = 500;
 const propTypes = {
   onChange: PropTypes.func.isRequired,
   className: PropTypes.string,
@@ -19,7 +20,7 @@ export default class SearchField extends React.Component {
   state = { showClearBtn: false, searchTerm: '' };
   timer = null;
 
-  searchTermChanged(searchTerm, timeout = 500) {
+  searchTermChanged(searchTerm, timeout = DEFAULT_SEARCH_INTERVAL) {
     this.setState({
       showClearBtn: searchTerm !== '',
       searchTerm,
@@ -29,6 +30,7 @@ export default class SearchField extends React.Component {
       clearTimeout(this.timer);
       this.timer = null;
     };
+
     resetTimer();
 
     this.timer = setTimeout(() => {
@@ -46,15 +48,15 @@ export default class SearchField extends React.Component {
           type="text"
           className="form-control form-control-lg search-field__input"
           placeholder={placeholder}
-          onChange={e => this.searchTermChanged(e.target.value)}
           value={this.state.searchTerm}
+          onChange={(e) => this.searchTermChanged(e.target.value)}
         />
         <FontAwesomeIcon icon={searchIcon} className="search-field__icon" />
         <div
           className="close search-field__close"
-          hidden={! this.state.showClearBtn}
-          onClick={() => this.searchTermChanged('', 0)}
+          hidden={!this.state.showClearBtn}
           id="search-field__close"
+          onClick={() => this.searchTermChanged('', 0)}
         >
           &times;
         </div>
diff --git a/src/utils/Storage.js b/src/utils/Storage.js
index 0b3efdaa..f7ba7d88 100644
--- a/src/utils/Storage.js
+++ b/src/utils/Storage.js
@@ -1,13 +1,14 @@
 const PREFIX = 'shlink';
-const buildPath = path => `${PREFIX}.${path}`;
+const buildPath = (path) => `${PREFIX}.${path}`;
 
 export class Storage {
   constructor(localStorage) {
     this.localStorage = localStorage;
   }
 
-  get = key => {
+  get = (key) => {
     const item = this.localStorage.getItem(buildPath(key));
+
     return item ? JSON.parse(item) : undefined;
   };
 
@@ -15,4 +16,5 @@ export class Storage {
 }
 
 const storage = typeof localStorage !== 'undefined' ? localStorage : {};
+
 export default new Storage(storage);
diff --git a/src/utils/Tag.js b/src/utils/Tag.js
index eeadfbcb..f22787ce 100644
--- a/src/utils/Tag.js
+++ b/src/utils/Tag.js
@@ -1,15 +1,28 @@
 import React from 'react';
-import ColorGenerator from '../utils/ColorGenerator';
+import PropTypes from 'prop-types';
+import colorGenerator, { colorGeneratorType } from '../utils/ColorGenerator';
 import './Tag.scss';
 
-export default function Tag (
+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 = () => ({})
+    onClose = () => ({}),
   }
 ) {
   return (
@@ -24,6 +37,5 @@ export default function Tag (
   );
 }
 
-Tag.defaultProps = {
-  colorGenerator: ColorGenerator
-};
+Tag.defaultProps = defaultProps;
+Tag.propTypes = propTypes;
diff --git a/src/utils/TagsSelector.js b/src/utils/TagsSelector.js
index 9bf36af6..35b82a37 100644
--- a/src/utils/TagsSelector.js
+++ b/src/utils/TagsSelector.js
@@ -1,38 +1,41 @@
 import React from 'react';
 import TagsInput from 'react-tagsinput';
-import ColorGenerator, { colorGeneratorType } from './ColorGenerator';
 import PropTypes from 'prop-types';
+import colorGenerator, { colorGeneratorType } from './ColorGenerator';
 
 const defaultProps = {
-  colorGenerator: ColorGenerator,
+  colorGenerator,
   placeholder: 'Add tags to the URL',
 };
 const propTypes = {
   tags: PropTypes.arrayOf(PropTypes.string).isRequired,
   onChange: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
-  colorGenerator: colorGeneratorType
+  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}
-      onChange={onChange}
       inputProps={{ placeholder }}
       onlyUnique
-      addOnBlur // FIXME Workaround to be able to add tags on Android
       renderTag={renderTag}
+
+      // FIXME Workaround to be able to add tags on Android
+      addOnBlur
+      onChange={onChange}
     />
   );
 }
diff --git a/src/visits/services/VisitsParser.js b/src/visits/services/VisitsParser.js
index f74088ba..bb801d67 100644
--- a/src/visits/services/VisitsParser.js
+++ b/src/visits/services/VisitsParser.js
@@ -1,87 +1,90 @@
 import { assoc, isNil, isEmpty, reduce } from 'ramda';
 
-const osFromUserAgent = userAgent => {
+const osFromUserAgent = (userAgent) => {
   const lowerUserAgent = userAgent.toLowerCase();
 
   switch (true) {
-    case (lowerUserAgent.indexOf('linux') >= 0):
+    case lowerUserAgent.indexOf('linux') >= 0:
       return 'Linux';
-    case (lowerUserAgent.indexOf('windows') >= 0):
+    case lowerUserAgent.indexOf('windows') >= 0:
       return 'Windows';
-    case (lowerUserAgent.indexOf('mac') >= 0):
+    case lowerUserAgent.indexOf('mac') >= 0:
       return 'MacOS';
-    case (lowerUserAgent.indexOf('mobi') >= 0):
+    case lowerUserAgent.indexOf('mobi') >= 0:
       return 'Mobile';
     default:
       return 'Others';
   }
 };
 
-const browserFromUserAgent = userAgent => {
+const browserFromUserAgent = (userAgent) => {
   const lowerUserAgent = userAgent.toLowerCase();
 
   switch (true) {
-    case (lowerUserAgent.indexOf('opera') >= 0 || lowerUserAgent.indexOf('opr') >= 0):
+    case lowerUserAgent.indexOf('opera') >= 0 || lowerUserAgent.indexOf('opr') >= 0:
       return 'Opera';
-    case (lowerUserAgent.indexOf('firefox') >= 0):
+    case lowerUserAgent.indexOf('firefox') >= 0:
       return 'Firefox';
-    case (lowerUserAgent.indexOf('chrome') >= 0):
+    case lowerUserAgent.indexOf('chrome') >= 0:
       return 'Chrome';
-    case (lowerUserAgent.indexOf('safari') >= 0):
+    case lowerUserAgent.indexOf('safari') >= 0:
       return 'Safari';
-    case (lowerUserAgent.indexOf('msie') >= 0):
+    case lowerUserAgent.indexOf('msie') >= 0:
       return 'Internet Explorer';
     default:
       return 'Others';
   }
 };
 
-const extractDomain = url => {
+const extractDomain = (url) => {
   const domain = url.indexOf('://') > -1 ? url.split('/')[2] : url.split('/')[0];
+
   return domain.split(':')[0];
 };
 
-export const processOsStats = visits =>
+export const processOsStats = (visits) =>
   reduce(
-    (stats, visit) => {
-      const userAgent = visit.userAgent;
+    (stats, { userAgent }) => {
       const os = isNil(userAgent) ? 'Others' : osFromUserAgent(userAgent);
+
       return assoc(os, (stats[os] || 0) + 1, stats);
     },
     {},
     visits,
   );
 
-export const processBrowserStats = visits =>
+export const processBrowserStats = (visits) =>
   reduce(
-    (stats, visit) => {
-      const userAgent = visit.userAgent;
+    (stats, { userAgent }) => {
       const browser = isNil(userAgent) ? 'Others' : browserFromUserAgent(userAgent);
+
       return assoc(browser, (stats[browser] || 0) + 1, stats);
     },
     {},
     visits,
   );
 
-export const processReferrersStats = visits =>
+export const processReferrersStats = (visits) =>
   reduce(
     (stats, visit) => {
       const notHasDomain = isNil(visit.referer) || isEmpty(visit.referer);
       const domain = notHasDomain ? 'Unknown' : extractDomain(visit.referer);
-      return assoc(domain, (stats[domain]|| 0) + 1, stats);
+
+      return assoc(domain, (stats[domain] || 0) + 1, stats);
     },
     {},
     visits,
   );
 
-export const processCountriesStats = visits =>
+export const processCountriesStats = (visits) =>
   reduce(
     (stats, { visitLocation }) => {
       const notHasCountry = isNil(visitLocation)
         || isNil(visitLocation.countryName)
         || isEmpty(visitLocation.countryName);
       const country = notHasCountry ? 'Unknown' : visitLocation.countryName;
-      return assoc(country, (stats[country]|| 0) + 1, stats);
+
+      return assoc(country, (stats[country] || 0) + 1, stats);
     },
     {},
     visits,
diff --git a/test/api/ShlinkApiClient.test.js b/test/api/ShlinkApiClient.test.js
index fe524726..68894fb0 100644
--- a/test/api/ShlinkApiClient.test.js
+++ b/test/api/ShlinkApiClient.test.js
@@ -1,20 +1,20 @@
-import { ShlinkApiClient } from '../../src/api/ShlinkApiClient'
 import sinon from 'sinon';
 import { head, last } from 'ramda';
+import { ShlinkApiClient } from '../../src/api/ShlinkApiClient';
 
 describe('ShlinkApiClient', () => {
-  const createAxiosMock = extraData => () =>
+  const createAxiosMock = (extraData) => () =>
     Promise.resolve({
-     headers: { authorization: 'Bearer abc123' },
+      headers: { authorization: 'Bearer abc123' },
       data: { token: 'abc123' },
       ...extraData,
     });
-  const createApiClient = extraData =>
+  const createApiClient = (extraData) =>
     new ShlinkApiClient(createAxiosMock(extraData));
 
   describe('listShortUrls', () => {
     it('properly returns short URLs list', async () => {
-      const expectedList = ['foo', 'bar'];
+      const expectedList = [ 'foo', 'bar' ];
 
       const apiClient = createApiClient({
         data: {
@@ -23,6 +23,7 @@ describe('ShlinkApiClient', () => {
       });
 
       const actualList = await apiClient.listShortUrls();
+
       expect(expectedList).toEqual(actualList);
     });
   });
@@ -35,6 +36,7 @@ describe('ShlinkApiClient', () => {
     it('returns create short URL', async () => {
       const apiClient = createApiClient({ data: shortUrl });
       const result = await apiClient.createShortUrl({});
+
       expect(result).toEqual(shortUrl);
     });
 
@@ -54,7 +56,7 @@ describe('ShlinkApiClient', () => {
 
   describe('getShortUrlVisits', () => {
     it('properly returns short URL visits', async () => {
-      const expectedVisits = ['foo', 'bar'];
+      const expectedVisits = [ 'foo', 'bar' ];
       const axiosSpy = sinon.spy(createAxiosMock({
         data: {
           visits: {
@@ -94,7 +96,7 @@ describe('ShlinkApiClient', () => {
 
   describe('updateShortUrlTags', () => {
     it('properly updates short URL tags', async () => {
-      const expectedTags = ['foo', 'bar'];
+      const expectedTags = [ 'foo', 'bar' ];
       const axiosSpy = sinon.spy(createAxiosMock({
         data: { tags: expectedTags },
       }));
@@ -112,10 +114,10 @@ describe('ShlinkApiClient', () => {
 
   describe('listTags', () => {
     it('properly returns list of tags', async () => {
-      const expectedTags = ['foo', 'bar'];
+      const expectedTags = [ 'foo', 'bar' ];
       const axiosSpy = sinon.spy(createAxiosMock({
         data: {
-          tags: { data: expectedTags }
+          tags: { data: expectedTags },
         },
       }));
       const apiClient = new ShlinkApiClient(axiosSpy);
@@ -132,7 +134,7 @@ describe('ShlinkApiClient', () => {
 
   describe('deleteTags', () => {
     it('properly deletes provided tags', async () => {
-      const tags = ['foo', 'bar'];
+      const tags = [ 'foo', 'bar' ];
       const axiosSpy = sinon.spy(createAxiosMock({}));
       const apiClient = new ShlinkApiClient(axiosSpy);
 
diff --git a/test/common/AsideMenu.test.js b/test/common/AsideMenu.test.js
index 141f20a9..febc65a8 100644
--- a/test/common/AsideMenu.test.js
+++ b/test/common/AsideMenu.test.js
@@ -1,7 +1,7 @@
-import { shallow } from 'enzyme'
-import React from 'react'
-import AsideMenu from '../../src/common/AsideMenu'
+import { shallow } from 'enzyme';
+import React from 'react';
 import { NavLink } from 'react-router-dom';
+import AsideMenu from '../../src/common/AsideMenu';
 
 describe('<AsideMenu />', () => {
   let wrapped;
@@ -15,9 +15,10 @@ describe('<AsideMenu />', () => {
 
   it('contains links to different sections', () => {
     const links = wrapped.find(NavLink);
+    const expectedLength = 3;
 
-    expect(links).toHaveLength(3);
-    links.forEach(link => expect(link.prop('to')).toContain('abc123'));
+    expect(links).toHaveLength(expectedLength);
+    links.forEach((link) => expect(link.prop('to')).toContain('abc123'));
   });
 
   it('contains a button to delete server', () => {
diff --git a/test/common/DateInput.test.js b/test/common/DateInput.test.js
index a2df216e..6ec0bbbd 100644
--- a/test/common/DateInput.test.js
+++ b/test/common/DateInput.test.js
@@ -1,16 +1,18 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import DateInput from '../../src/common/DateInput';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import moment from 'moment';
+import DateInput from '../../src/common/DateInput';
 
 describe('<DateInput />', () => {
   let wrapped;
 
   const createComponent = (props = {}) => {
     wrapped = shallow(<DateInput {...props} />);
+
     return wrapped;
   };
+
   afterEach(() => {
     if (wrapped !== undefined) {
       wrapped.unmount();
diff --git a/test/common/Home.test.js b/test/common/Home.test.js
index 1495604f..d44d9b0e 100644
--- a/test/common/Home.test.js
+++ b/test/common/Home.test.js
@@ -2,17 +2,21 @@ import { shallow } from 'enzyme';
 import { values } from 'ramda';
 import React from 'react';
 import * as sinon from 'sinon';
-import { Home } from '../../src/common/Home';
+import { HomeComponent } from '../../src/common/Home';
 
 describe('<Home />', () => {
   let wrapped;
   const defaultProps = {
-    resetSelectedServer: () => {},
+    resetSelectedServer() {
+      return '';
+    },
     servers: {},
   };
-  const createComponent = props => {
+  const createComponent = (props) => {
     const actualProps = { ...defaultProps, ...props };
-    wrapped = shallow(<Home {...actualProps} />);
+
+    wrapped = shallow(<HomeComponent {...actualProps} />);
+
     return wrapped;
   };
 
@@ -42,7 +46,7 @@ describe('<Home />', () => {
     const servers = {
       1: { name: 'foo', id: '123' },
       2: { name: 'bar', id: '456' },
-    }
+    };
     const wrapped = createComponent({ servers });
 
     expect(wrapped.find('Link')).toHaveLength(0);
diff --git a/test/servers/CreateServer.test.js b/test/servers/CreateServer.test.js
index f1b13c81..ecfde7ce 100644
--- a/test/servers/CreateServer.test.js
+++ b/test/servers/CreateServer.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { CreateServer } from '../../src/servers/CreateServer';
 import { identity } from 'ramda';
 import sinon from 'sinon';
+import { CreateServerComponent } from '../../src/servers/CreateServer';
 import ImportServersBtn from '../../src/servers/helpers/ImportServersBtn';
 
 describe('<CreateServer />', () => {
@@ -17,7 +17,7 @@ describe('<CreateServer />', () => {
     historyMock.push.resetHistory();
 
     wrapper = shallow(
-      <CreateServer
+      <CreateServerComponent
         createServer={createServerMock}
         resetSelectedServer={identity}
         history={historyMock}
@@ -41,7 +41,10 @@ describe('<CreateServer />', () => {
 
   it('creates server and redirects to it when form is submitted', () => {
     const form = wrapper.find('form');
-    form.simulate('submit', { preventDefault: () => {} });
+
+    form.simulate('submit', { preventDefault() {
+      return '';
+    } });
 
     expect(createServerMock.callCount).toEqual(1);
     expect(historyMock.push.callCount).toEqual(1);
diff --git a/test/servers/DeleteServerButton.test.js b/test/servers/DeleteServerButton.test.js
index d6fb142e..9da480a8 100644
--- a/test/servers/DeleteServerButton.test.js
+++ b/test/servers/DeleteServerButton.test.js
@@ -1,13 +1,14 @@
 import React from 'react';
-import DeleteServerButton from '../../src/servers/DeleteServerButton';
 import { shallow } from 'enzyme';
+import DeleteServerButton from '../../src/servers/DeleteServerButton';
 import DeleteServerModal from '../../src/servers/DeleteServerModal';
 
 describe('<DeleteServerButton />', () => {
   let wrapper;
 
-  beforeEach(() =>
-      wrapper = shallow(<DeleteServerButton server={{}} className="button" />));
+  beforeEach(() => {
+    wrapper = shallow(<DeleteServerButton server={{}} className="button" />);
+  });
   afterEach(() => wrapper.unmount());
 
   it('renders a button and a modal', () => {
diff --git a/test/servers/DeleteServerModal.test.js b/test/servers/DeleteServerModal.test.js
index 23866f64..c5b879c2 100644
--- a/test/servers/DeleteServerModal.test.js
+++ b/test/servers/DeleteServerModal.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
 import sinon from 'sinon';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { DeleteServerModalComponent } from '../../src/servers/DeleteServerModal';
 
 describe('<DeleteServerModal />', () => {
   let wrapper;
@@ -17,7 +17,7 @@ describe('<DeleteServerModal />', () => {
     historyMock.push.resetHistory();
 
     wrapper = shallow(
-      <DeleteServerModal
+      <DeleteServerModalComponent
         server={{ name: serverName }}
         toggle={toggleMock}
         isOpen={true}
@@ -37,6 +37,7 @@ describe('<DeleteServerModal />', () => {
 
   it('displays the name of the server as part of the content', () => {
     const modalBody = wrapper.find(ModalBody);
+
     expect(modalBody.find('p').first().text()).toEqual(
       `Are you sure you want to delete server ${serverName}?`
     );
@@ -44,6 +45,7 @@ describe('<DeleteServerModal />', () => {
 
   it('toggles when clicking cancel button', () => {
     const cancelBtn = wrapper.find('button').first();
+
     cancelBtn.simulate('click');
 
     expect(toggleMock.callCount).toEqual(1);
@@ -53,6 +55,7 @@ describe('<DeleteServerModal />', () => {
 
   it('deletes server when clicking accept button', () => {
     const acceptBtn = wrapper.find('button').last();
+
     acceptBtn.simulate('click');
 
     expect(toggleMock.callCount).toEqual(1);
diff --git a/test/servers/ServersDropdown.test.js b/test/servers/ServersDropdown.test.js
index 6c8a90eb..cbda33e7 100644
--- a/test/servers/ServersDropdown.test.js
+++ b/test/servers/ServersDropdown.test.js
@@ -1,34 +1,37 @@
-import { identity } from 'ramda';
+import { identity, values } from 'ramda';
 import React from 'react';
-import { ServersDropdown } from '../../src/servers/ServersDropdown';
 import { shallow } from 'enzyme';
 import { DropdownItem, DropdownToggle } from 'reactstrap';
+import { ServersDropdownComponent } from '../../src/servers/ServersDropdown';
 
 describe('<ServersDropdown />', () => {
   let wrapped;
-  const servers = [{ name: 'foo', id: 1 }, { name: 'bar', id: 2 }, { name: 'baz', id: 3 }];
+  const servers = {
+    '1a': { name: 'foo', id: 1 },
+    '2b': { name: 'bar', id: 2 },
+    '3c': { name: 'baz', id: 3 },
+  };
 
   beforeEach(() => {
-    wrapped = shallow(<ServersDropdown servers={servers} listServers={identity} />);
+    wrapped = shallow(<ServersDropdownComponent servers={servers} listServers={identity} />);
   });
   afterEach(() => wrapped.unmount());
 
   it('contains the list of servers', () =>
-    expect(wrapped.find(DropdownItem).filter('[to]')).toHaveLength(servers.length)
-  );
+    expect(wrapped.find(DropdownItem).filter('[to]')).toHaveLength(values(servers).length));
 
   it('contains a toggle with proper title', () =>
-    expect(wrapped.find(DropdownToggle)).toHaveLength(1)
-  );
+    expect(wrapped.find(DropdownToggle)).toHaveLength(1));
 
   it('contains a button to export servers', () => {
     const items = wrapped.find(DropdownItem);
+
     expect(items.filter('[divider]')).toHaveLength(1);
     expect(items.filter('.servers-dropdown__export-item')).toHaveLength(1);
   });
 
   it('contains a message when no servers exist yet', () => {
-    wrapped = shallow(<ServersDropdown servers={[]} listServers={identity} />);
+    wrapped = shallow(<ServersDropdownComponent servers={{}} listServers={identity} />);
     const item = wrapped.find(DropdownItem);
 
     expect(item).toHaveLength(1);
diff --git a/test/servers/helpers/ImportServersBtn.test.js b/test/servers/helpers/ImportServersBtn.test.js
index e57e8548..58d6c970 100644
--- a/test/servers/helpers/ImportServersBtn.test.js
+++ b/test/servers/helpers/ImportServersBtn.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import { ImportServersBtn } from '../../../src/servers/helpers/ImportServersBtn';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 import { UncontrolledTooltip } from 'reactstrap';
+import { ImportServersBtnComponent } from '../../../src/servers/helpers/ImportServersBtn';
 
 describe('<ImportServersBtn />', () => {
   let wrapper;
@@ -12,7 +12,7 @@ describe('<ImportServersBtn />', () => {
     importServersFromFile: sinon.fake.returns(Promise.resolve([])),
   };
   const fileRef = {
-    current: { click: sinon.fake() }
+    current: { click: sinon.fake() },
   };
 
   beforeEach(() => {
@@ -22,11 +22,11 @@ describe('<ImportServersBtn />', () => {
     fileRef.current.click.resetHistory();
 
     wrapper = shallow(
-      <ImportServersBtn
-        onImport={onImportMock}
+      <ImportServersBtnComponent
         createServers={createServersMock}
         serversImporter={serversImporterMock}
         fileRef={fileRef}
+        onImport={onImportMock}
       />
     );
   });
@@ -40,14 +40,16 @@ describe('<ImportServersBtn />', () => {
 
   it('triggers click on file ref when button is clicked', () => {
     const btn = wrapper.find('#importBtn');
+
     btn.simulate('click');
 
     expect(fileRef.current.click.callCount).toEqual(1);
   });
 
-  it('imports servers when file input changes', done => {
+  it('imports servers when file input changes', (done) => {
     const file = wrapper.find('.create-server__csv-select');
-    file.simulate('change', { target: { files: [''] } });
+
+    file.simulate('change', { target: { files: [ '' ] } });
 
     setImmediate(() => {
       expect(serversImporterMock.importServersFromFile.callCount).toEqual(1);
diff --git a/test/servers/reducers/selectedServer.test.js b/test/servers/reducers/selectedServer.test.js
index ca73ede4..74ea4b99 100644
--- a/test/servers/reducers/selectedServer.test.js
+++ b/test/servers/reducers/selectedServer.test.js
@@ -1,24 +1,23 @@
+import * as sinon from 'sinon';
 import reduce, {
   _selectServer,
   RESET_SELECTED_SERVER,
   resetSelectedServer,
   SELECT_SERVER,
 } from '../../../src/servers/reducers/selectedServer';
-import * as sinon from 'sinon';
 import { RESET_SHORT_URL_PARAMS } from '../../../src/short-urls/reducers/shortUrlsListParams';
 
 describe('selectedServerReducer', () => {
   describe('reduce', () => {
     it('returns default when action is not handled', () =>
-      expect(reduce(null, { type: 'unknown' })).toEqual(null)
-    );
+      expect(reduce(null, { type: 'unknown' })).toEqual(null));
 
     it('returns default when action is RESET_SELECTED_SERVER', () =>
-      expect(reduce(null, { type: RESET_SELECTED_SERVER })).toEqual(null)
-    );
+      expect(reduce(null, { type: RESET_SELECTED_SERVER })).toEqual(null));
 
     it('returns selected server when action is SELECT_SERVER', () => {
       const selectedServer = { id: 'abc123' };
+
       expect(reduce(null, { type: SELECT_SERVER, selectedServer })).toEqual(selectedServer);
     });
   });
@@ -31,14 +30,14 @@ describe('selectedServerReducer', () => {
 
   describe('selectServer', () => {
     const ShlinkApiClientMock = {
-      setConfig: sinon.spy()
+      setConfig: sinon.spy(),
     };
     const serverId = 'abc123';
     const selectedServer = {
-      id: serverId
+      id: serverId,
     };
     const ServersServiceMock = {
-      findServerById: sinon.fake.returns(selectedServer)
+      findServerById: sinon.fake.returns(selectedServer),
     };
 
     afterEach(() => {
@@ -48,14 +47,15 @@ describe('selectedServerReducer', () => {
 
     it('dispatches proper actions', () => {
       const dispatch = sinon.spy();
+      const expectedDispatchCalls = 2;
 
       _selectServer(ShlinkApiClientMock, ServersServiceMock, serverId)(dispatch);
 
-      expect(dispatch.callCount).toEqual(2);
+      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
       expect(dispatch.firstCall.calledWith({ type: RESET_SHORT_URL_PARAMS })).toEqual(true);
       expect(dispatch.secondCall.calledWith({
         type: SELECT_SERVER,
-        selectedServer
+        selectedServer,
       })).toEqual(true);
     });
 
diff --git a/test/servers/reducers/server.test.js b/test/servers/reducers/server.test.js
index e0227081..b015603e 100644
--- a/test/servers/reducers/server.test.js
+++ b/test/servers/reducers/server.test.js
@@ -1,3 +1,5 @@
+import * as sinon from 'sinon';
+import { values } from 'ramda';
 import reduce, {
   _createServer,
   _deleteServer,
@@ -5,13 +7,11 @@ import reduce, {
   _createServers,
   FETCH_SERVERS,
 } from '../../../src/servers/reducers/server';
-import * as sinon from 'sinon';
-import { values } from 'ramda';
 
 describe('serverReducer', () => {
   const servers = {
     abc123: { id: 'abc123' },
-    def456: { id: 'def456' }
+    def456: { id: 'def456' },
   };
   const ServersServiceMock = {
     listServers: sinon.fake.returns(servers),
@@ -22,12 +22,10 @@ describe('serverReducer', () => {
 
   describe('reduce', () => {
     it('returns servers when action is FETCH_SERVERS', () =>
-      expect(reduce({}, { type: FETCH_SERVERS, servers })).toEqual(servers)
-    );
+      expect(reduce({}, { type: FETCH_SERVERS, servers })).toEqual(servers));
 
     it('returns default when action is unknown', () =>
-      expect(reduce({}, { type: 'unknown' })).toEqual({})
-    );
+      expect(reduce({}, { type: 'unknown' })).toEqual({}));
   });
 
   describe('action creators', () => {
diff --git a/test/servers/services/ServersExporter.test.js b/test/servers/services/ServersExporter.test.js
index 04125bb1..eea6e19a 100644
--- a/test/servers/services/ServersExporter.test.js
+++ b/test/servers/services/ServersExporter.test.js
@@ -1,5 +1,5 @@
-import { ServersExporter } from '../../../src/servers/services/ServersExporter';
 import sinon from 'sinon';
+import { ServersExporter } from '../../../src/servers/services/ServersExporter';
 
 describe('ServersExporter', () => {
   const createLinkMock = () => ({
@@ -17,7 +17,7 @@ describe('ServersExporter', () => {
         appendChild: sinon.fake(),
         removeChild: sinon.fake(),
       },
-    }
+    },
   });
   const serversServiceMock = {
     listServers: sinon.fake.returns({
@@ -41,11 +41,13 @@ describe('ServersExporter', () => {
     beforeEach(() => {
       originalConsole = global.console;
       global.console = { error: sinon.fake() };
-      global.Blob = function Blob() {};
+      global.Blob = class Blob {};
       global.URL = { createObjectURL: () => '' };
       serversServiceMock.listServers.resetHistory();
     });
-    afterEach(() => global.console = originalConsole);
+    afterEach(() => {
+      global.console = originalConsole;
+    });
 
     it('logs an error if something fails', () => {
       const csvjsonMock = createCsvjsonMock(true);
diff --git a/test/servers/services/ServersImporter.test.js b/test/servers/services/ServersImporter.test.js
index 0d10df19..af1b5e8c 100644
--- a/test/servers/services/ServersImporter.test.js
+++ b/test/servers/services/ServersImporter.test.js
@@ -1,5 +1,5 @@
-import { ServersImporter } from '../../../src/servers/services/ServersImporter';
 import sinon from 'sinon';
+import { ServersImporter } from '../../../src/servers/services/ServersImporter';
 
 describe('ServersImporter', () => {
   const servers = [{ name: 'foo' }, { name: 'bar' }];
@@ -29,10 +29,13 @@ describe('ServersImporter', () => {
 
     it('reads file when a CSV is provided', async () => {
       const readAsText = sinon.fake.returns('');
-      global.FileReader = function FileReader() {
-        this.readAsText = readAsText;
-        this.addEventListener = (eventName, listener) =>
-          listener({ target: { result: '' } });
+
+      global.FileReader = class FileReader {
+        constructor() {
+          this.readAsText = readAsText;
+          this.addEventListener = (eventName, listener) =>
+            listener({ target: { result: '' } });
+        }
       };
 
       await importer.importServersFromFile({ type: 'text/csv' });
diff --git a/test/servers/services/ServersService.test.js b/test/servers/services/ServersService.test.js
index b07db206..a8fb4281 100644
--- a/test/servers/services/ServersService.test.js
+++ b/test/servers/services/ServersService.test.js
@@ -1,13 +1,13 @@
-import { ServersService } from '../../../src/servers/services/ServersService';
 import sinon from 'sinon';
 import { last } from 'ramda';
+import { ServersService } from '../../../src/servers/services/ServersService';
 
 describe('ServersService', () => {
   const servers = {
     abc123: { id: 'abc123' },
     def456: { id: 'def456' },
   };
-  const createStorageMock = returnValue => ({
+  const createStorageMock = (returnValue) => ({
     set: sinon.fake(),
     get: sinon.fake.returns(returnValue),
   });
diff --git a/test/short-urls/reducers/shortUrlsListParams.test.js b/test/short-urls/reducers/shortUrlsListParams.test.js
index 7540f673..89b43aec 100644
--- a/test/short-urls/reducers/shortUrlsListParams.test.js
+++ b/test/short-urls/reducers/shortUrlsListParams.test.js
@@ -9,24 +9,20 @@ describe('shortUrlsListParamsReducer', () => {
     const defaultState = { page: '1' };
 
     it('returns default value when action is unknown', () =>
-      expect(reduce(defaultState, { type: 'unknown' })).toEqual(defaultState)
-    );
+      expect(reduce(defaultState, { type: 'unknown' })).toEqual(defaultState));
 
     it('returns params when action is LIST_SHORT_URLS', () =>
       expect(reduce(defaultState, { type: LIST_SHORT_URLS, params: { searchTerm: 'foo' } })).toEqual({
         ...defaultState,
-        searchTerm: 'foo'
-      })
-    );
+        searchTerm: 'foo',
+      }));
 
     it('returns default value when action is RESET_SHORT_URL_PARAMS', () =>
-      expect(reduce(defaultState, { type: RESET_SHORT_URL_PARAMS })).toEqual(defaultState)
-    );
+      expect(reduce(defaultState, { type: RESET_SHORT_URL_PARAMS })).toEqual(defaultState));
   });
 
   describe('resetShortUrlParams', () => {
     it('returns proper action', () =>
-      expect(resetShortUrlParams()).toEqual({ type: RESET_SHORT_URL_PARAMS })
-    );
+      expect(resetShortUrlParams()).toEqual({ type: RESET_SHORT_URL_PARAMS }));
   });
 });
diff --git a/test/visits/services/VisitsParser.test.js b/test/visits/services/VisitsParser.test.js
index 568ebb71..f74a9476 100644
--- a/test/visits/services/VisitsParser.test.js
+++ b/test/visits/services/VisitsParser.test.js
@@ -42,9 +42,9 @@ describe('VisitsParser', () => {
   describe('processOsStats', () => {
     it('properly parses OS stats', () => {
       expect(processOsStats(visits)).toEqual({
-        'Linux': 3,
-        'Windows': 1,
-        'MacOS': 1,
+        Linux: 3,
+        Windows: 1,
+        MacOS: 1,
       });
     });
   });
@@ -52,9 +52,9 @@ describe('VisitsParser', () => {
   describe('processBrowserStats', () => {
     it('properly parses browser stats', () => {
       expect(processBrowserStats(visits)).toEqual({
-        'Firefox': 2,
-        'Chrome': 2,
-        'Opera': 1,
+        Firefox: 2,
+        Chrome: 2,
+        Opera: 1,
       });
     });
   });
diff --git a/yarn.lock b/yarn.lock
index 99096d01..a8084fce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -198,24 +198,24 @@ acorn-globals@^3.1.0:
   dependencies:
     acorn "^4.0.4"
 
-acorn-jsx@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
+acorn-jsx@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-4.1.1.tgz#e8e41e48ea2fe0c896740610ab6a4ffd8add225e"
   dependencies:
-    acorn "^3.0.4"
-
-acorn@^3.0.4:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+    acorn "^5.0.3"
 
 acorn@^4.0.3, acorn@^4.0.4:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-acorn@^5.0.0, acorn@^5.5.0:
+acorn@^5.0.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8"
 
+acorn@^5.0.3, acorn@^5.6.0:
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.2.tgz#91fa871883485d06708800318404e72bfb26dcc5"
+
 address@1.0.3, address@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
@@ -232,7 +232,7 @@ ajv-keywords@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"
 
-ajv@6.5.3:
+ajv@6.5.3, ajv@^6.5.0:
   version "6.5.3"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.5.3.tgz#71a569d189ecf4f4f321224fecb166f071dd90f9"
   dependencies:
@@ -248,7 +248,7 @@ ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0:
+ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
   dependencies:
@@ -363,13 +363,6 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
-aria-query@^0.7.0:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.1.tgz#26cbb5aff64144b0a825be1846e0b16cfa00b11e"
-  dependencies:
-    ast-types-flow "0.0.7"
-    commander "^2.11.0"
-
 arr-diff@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
@@ -481,10 +474,6 @@ assign-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
 
-ast-types-flow@0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
-
 async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
@@ -563,12 +552,6 @@ axios@^0.18.0:
     follow-redirects "^1.3.0"
     is-buffer "^1.1.5"
 
-axobject-query@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-0.1.0.tgz#62f59dbc59c9f9242759ca349960e7a2fe3c36c0"
-  dependencies:
-    ast-types-flow "0.0.7"
-
 babel-code-frame@6.26.0, babel-code-frame@^6.11.0, babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -764,9 +747,9 @@ babel-jest@20.0.3, babel-jest@^20.0.3:
     babel-plugin-istanbul "^4.0.0"
     babel-preset-jest "^20.0.3"
 
-babel-loader@7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.2.tgz#f6cbe122710f1aa2af4d881c6d5b54358ca24126"
+babel-loader@^7.1.2:
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.5.tgz#e3ee0cd7394aa557e013b02d3e492bfd07aa6d68"
   dependencies:
     find-cache-dir "^1.0.0"
     loader-utils "^1.0.2"
@@ -1468,10 +1451,6 @@ bser@^2.0.0:
   dependencies:
     node-int64 "^0.4.0"
 
-buffer-from@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
-
 buffer-indexof@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
@@ -1488,7 +1467,7 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-builtin-modules@^1.0.0, builtin-modules@^1.1.1:
+builtin-modules@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
 
@@ -1901,10 +1880,6 @@ commander@2.16.x, commander@~2.16.0:
   version "2.16.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.16.0.tgz#f16390593996ceb4f3eeb020b31d78528f7f8a50"
 
-commander@^2.11.0:
-  version "2.17.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.0.tgz#9d07b25e2a6f198b76d8b756a0e8a9604a6a1a60"
-
 commander@^2.9.0:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
@@ -1943,15 +1918,6 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
-concat-stream@^1.6.0:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
-  dependencies:
-    buffer-from "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^2.2.2"
-    typedarray "^0.0.6"
-
 configstore@^3.0.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.2.tgz#c6f25defaeef26df12dd33414b001fe81a543f8f"
@@ -2085,7 +2051,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-cross-spawn@5.1.0, cross-spawn@^5.0.1, cross-spawn@^5.1.0:
+cross-spawn@5.1.0, cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
   dependencies:
@@ -2100,6 +2066,16 @@ cross-spawn@^3.0.0:
     lru-cache "^4.0.1"
     which "^1.2.9"
 
+cross-spawn@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  dependencies:
+    nice-try "^1.0.4"
+    path-key "^2.0.1"
+    semver "^5.5.0"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
 cryptiles@2.x.x:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
@@ -2248,10 +2224,6 @@ d@1:
   dependencies:
     es5-ext "^0.10.9"
 
-damerau-levenshtein@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
-
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -2268,7 +2240,7 @@ debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.
   dependencies:
     ms "2.0.0"
 
-debug@^3.0.0, debug@^3.0.1, debug@^3.1.0:
+debug@^3.0.0, debug@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
   dependencies:
@@ -2459,7 +2431,7 @@ doctrine@1.5.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-doctrine@^2.0.0:
+doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
   dependencies:
@@ -2585,10 +2557,6 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
-emoji-regex@^6.1.0:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2"
-
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -2771,9 +2739,33 @@ escope@^3.6.0:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-config-react-app@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-2.1.0.tgz#23c909f71cbaff76b945b831d2d814b8bde169eb"
+eslint-config-adidas-babel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-adidas-babel/-/eslint-config-adidas-babel-1.0.1.tgz#21389403f9bef47d6ad0eaa3e6f9b28c20075f88"
+
+eslint-config-adidas-env@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-adidas-env/-/eslint-config-adidas-env-1.0.1.tgz#75f59460410ad60777f9fd8bdffb066502cee801"
+
+eslint-config-adidas-es5@~1.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-adidas-es5/-/eslint-config-adidas-es5-1.0.1.tgz#2b6b1b0f36dd90a18762d97b1ea44ce9bc65fc5b"
+
+eslint-config-adidas-es6@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-adidas-es6/-/eslint-config-adidas-es6-1.0.1.tgz#3695648792124f3e7de30b33f3c84edcc22c5b79"
+  dependencies:
+    eslint-config-adidas-es5 "~1.0"
+
+eslint-config-adidas-jsx@~1.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-adidas-jsx/-/eslint-config-adidas-jsx-1.0.1.tgz#3fd5ec53b19e4eecf0a1dab10fe209ca4f6b816c"
+
+eslint-config-adidas-react@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-adidas-react/-/eslint-config-adidas-react-1.0.1.tgz#accb5537c98ee0f71ed77480f66abe18c3c0db52"
+  dependencies:
+    eslint-config-adidas-jsx "~1.0"
 
 eslint-import-resolver-node@^0.3.1:
   version "0.3.2"
@@ -2792,110 +2784,110 @@ eslint-loader@1.9.0:
     object-hash "^1.1.4"
     rimraf "^2.6.1"
 
-eslint-module-utils@^2.1.1:
+eslint-module-utils@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.2.0.tgz#b270362cd88b1a48ad308976ce7fa54e98411746"
   dependencies:
     debug "^2.6.8"
     pkg-dir "^1.0.0"
 
-eslint-plugin-flowtype@2.39.1:
-  version "2.39.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.39.1.tgz#b5624622a0388bcd969f4351131232dcb9649cd5"
+eslint-plugin-import@^2.8.0:
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.14.0.tgz#6b17626d2e3e6ad52cfce8807a845d15e22111a8"
   dependencies:
-    lodash "^4.15.0"
-
-eslint-plugin-import@2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.8.0.tgz#fa1b6ef31fcb3c501c09859c1b86f1fc5b986894"
-  dependencies:
-    builtin-modules "^1.1.1"
     contains-path "^0.1.0"
     debug "^2.6.8"
     doctrine "1.5.0"
     eslint-import-resolver-node "^0.3.1"
-    eslint-module-utils "^2.1.1"
+    eslint-module-utils "^2.2.0"
     has "^1.0.1"
-    lodash.cond "^4.3.0"
+    lodash "^4.17.4"
     minimatch "^3.0.3"
     read-pkg-up "^2.0.0"
+    resolve "^1.6.0"
 
-eslint-plugin-jsx-a11y@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-5.1.1.tgz#5c96bb5186ca14e94db1095ff59b3e2bd94069b1"
+eslint-plugin-jest@^21.22.0:
+  version "21.22.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-21.22.0.tgz#1b9e49b3e5ce9a3d0a51af4579991d517f33726e"
+
+eslint-plugin-promise@^3.0.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.8.0.tgz#65ebf27a845e3c1e9d6f6a5622ddd3801694b621"
+
+eslint-plugin-react@^7.4.0:
+  version "7.11.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.11.1.tgz#c01a7af6f17519457d6116aa94fc6d2ccad5443c"
   dependencies:
-    aria-query "^0.7.0"
     array-includes "^3.0.3"
-    ast-types-flow "0.0.7"
-    axobject-query "^0.1.0"
-    damerau-levenshtein "^1.0.0"
-    emoji-regex "^6.1.0"
-    jsx-ast-utils "^1.4.0"
+    doctrine "^2.1.0"
+    has "^1.0.3"
+    jsx-ast-utils "^2.0.1"
+    prop-types "^15.6.2"
 
-eslint-plugin-react@7.4.0:
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.4.0.tgz#300a95861b9729c087d362dd64abcc351a74364a"
-  dependencies:
-    doctrine "^2.0.0"
-    has "^1.0.1"
-    jsx-ast-utils "^2.0.0"
-    prop-types "^15.5.10"
-
-eslint-scope@^3.7.1:
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.3.tgz#bb507200d3d17f60247636160b4826284b108535"
+eslint-scope@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.0.tgz#50bf3071e9338bcdc43331794a0cb533f0136172"
   dependencies:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint@4.10.0:
-  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.10.0.tgz#f25d0d7955c81968c2309aa5c9a229e045176bb7"
+eslint-utils@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.3.1.tgz#9a851ba89ee7c460346f97cf8939c7298827e512"
+
+eslint-visitor-keys@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
+
+eslint@^5.4.0:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.4.0.tgz#d068ec03006bb9e06b429dc85f7e46c1b69fac62"
   dependencies:
-    ajv "^5.2.0"
-    babel-code-frame "^6.22.0"
+    ajv "^6.5.0"
+    babel-code-frame "^6.26.0"
     chalk "^2.1.0"
-    concat-stream "^1.6.0"
-    cross-spawn "^5.1.0"
-    debug "^3.0.1"
-    doctrine "^2.0.0"
-    eslint-scope "^3.7.1"
-    espree "^3.5.1"
-    esquery "^1.0.0"
-    estraverse "^4.2.0"
+    cross-spawn "^6.0.5"
+    debug "^3.1.0"
+    doctrine "^2.1.0"
+    eslint-scope "^4.0.0"
+    eslint-utils "^1.3.1"
+    eslint-visitor-keys "^1.0.0"
+    espree "^4.0.0"
+    esquery "^1.0.1"
     esutils "^2.0.2"
     file-entry-cache "^2.0.0"
     functional-red-black-tree "^1.0.1"
     glob "^7.1.2"
-    globals "^9.17.0"
-    ignore "^3.3.3"
+    globals "^11.7.0"
+    ignore "^4.0.2"
     imurmurhash "^0.1.4"
-    inquirer "^3.0.6"
-    is-resolvable "^1.0.0"
-    js-yaml "^3.9.1"
-    json-stable-stringify "^1.0.1"
+    inquirer "^5.2.0"
+    is-resolvable "^1.1.0"
+    js-yaml "^3.11.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.3.0"
-    lodash "^4.17.4"
-    minimatch "^3.0.2"
+    lodash "^4.17.5"
+    minimatch "^3.0.4"
     mkdirp "^0.5.1"
     natural-compare "^1.4.0"
     optionator "^0.8.2"
     path-is-inside "^1.0.2"
     pluralize "^7.0.0"
     progress "^2.0.0"
+    regexpp "^2.0.0"
     require-uncached "^1.0.3"
-    semver "^5.3.0"
+    semver "^5.5.0"
     strip-ansi "^4.0.0"
-    strip-json-comments "~2.0.1"
-    table "^4.0.1"
-    text-table "~0.2.0"
+    strip-json-comments "^2.0.1"
+    table "^4.0.3"
+    text-table "^0.2.0"
 
-espree@^3.5.1:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
+espree@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-4.0.0.tgz#253998f20a0f82db5d866385799d912a83a36634"
   dependencies:
-    acorn "^5.5.0"
-    acorn-jsx "^3.0.0"
+    acorn "^5.6.0"
+    acorn-jsx "^4.1.1"
 
 esprima@^2.6.0:
   version "2.7.3"
@@ -2909,7 +2901,7 @@ esprima@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
 
-esquery@^1.0.0:
+esquery@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
   dependencies:
@@ -3079,7 +3071,7 @@ extend@^3.0.0, extend@~3.0.0, extend@~3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
 
-external-editor@^2.0.4:
+external-editor@^2.0.4, external-editor@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
   dependencies:
@@ -3546,11 +3538,11 @@ global-prefix@^1.0.1:
     is-windows "^1.0.1"
     which "^1.2.14"
 
-globals@^11.1.0:
+globals@^11.1.0, globals@^11.7.0:
   version "11.7.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.7.0.tgz#a583faa43055b1aca771914bf68258e2fc125673"
 
-globals@^9.17.0, globals@^9.18.0:
+globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
 
@@ -3724,7 +3716,7 @@ has-values@^1.0.0:
     is-number "^3.0.0"
     kind-of "^4.0.0"
 
-has@^1.0.1:
+has@^1.0.1, has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
   dependencies:
@@ -3967,11 +3959,11 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
-ignore@^3.3.3, ignore@^3.3.5:
+ignore@^3.3.5:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
 
-ignore@^4.0.0:
+ignore@^4.0.0, ignore@^4.0.2:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
 
@@ -4035,7 +4027,7 @@ ini@^1.3.4, ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
-inquirer@3.3.0, inquirer@^3.0.6:
+inquirer@3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
   dependencies:
@@ -4054,6 +4046,24 @@ inquirer@3.3.0, inquirer@^3.0.6:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
+inquirer@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-5.2.0.tgz#db350c2b73daca77ff1243962e9f22f099685726"
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^2.1.0"
+    figures "^2.0.0"
+    lodash "^4.3.0"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rxjs "^5.5.2"
+    string-width "^2.1.0"
+    strip-ansi "^4.0.0"
+    through "^2.3.6"
+
 internal-ip@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
@@ -4340,7 +4350,7 @@ is-regexp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
 
-is-resolvable@^1.0.0:
+is-resolvable@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
 
@@ -4732,7 +4742,7 @@ js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.0, js-yaml@^3.9.1:
+js-yaml@^3.11.0, js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
   dependencies:
@@ -4806,6 +4816,10 @@ json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
 
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+
 json-stable-stringify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
@@ -4849,11 +4863,7 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-jsx-ast-utils@^1.4.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
-
-jsx-ast-utils@^2.0.0:
+jsx-ast-utils@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f"
   dependencies:
@@ -5007,10 +5017,6 @@ lodash.clonedeep@^4.3.2:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
 
-lodash.cond@^4.3.0:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
-
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -5483,6 +5489,10 @@ next-tick@1:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
 
+nice-try@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.4.tgz#d93962f6c52f2c1558c0fbda6d512819f1efe1c4"
+
 nise@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/nise/-/nise-1.4.2.tgz#a9a3800e3994994af9e452333d549d60f72b8e8c"
@@ -6022,7 +6032,7 @@ path-is-inside@1.0.2, path-is-inside@^1.0.1, path-is-inside@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
 
-path-key@^2.0.0:
+path-key@^2.0.0, path-key@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
 
@@ -6996,7 +7006,7 @@ readable-stream@1.0:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.2.2, readable-stream@^2.2.9, readable-stream@^2.3.3, readable-stream@^2.3.6:
+readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.2.9, readable-stream@^2.3.3, readable-stream@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
   dependencies:
@@ -7091,6 +7101,10 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexpp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.0.tgz#b2a7534a85ca1b033bcf5ce9ff8e56d4e0755365"
+
 regexpu-core@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
@@ -7331,7 +7345,7 @@ resolve@1.6.0:
   dependencies:
     path-parse "^1.0.5"
 
-resolve@^1.3.2, resolve@^1.5.0:
+resolve@^1.3.2, resolve@^1.5.0, resolve@^1.6.0:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
   dependencies:
@@ -7390,6 +7404,12 @@ rx-lite@*, rx-lite@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
 
+rxjs@^5.5.2:
+  version "5.5.11"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.11.tgz#f733027ca43e3bec6b994473be4ab98ad43ced87"
+  dependencies:
+    symbol-observable "1.0.1"
+
 safe-buffer@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
@@ -7954,7 +7974,7 @@ strip-indent@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
 
-strip-json-comments@~2.0.1:
+strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
@@ -8142,6 +8162,10 @@ sw-toolbox@^3.4.0:
     path-to-regexp "^1.0.1"
     serviceworker-cache-polyfill "^4.0.0"
 
+symbol-observable@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
+
 symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
@@ -8150,7 +8174,7 @@ symbol-tree@^3.2.1:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
 
-table@^4.0.1:
+table@^4.0.1, table@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/table/-/table-4.0.3.tgz#00b5e2b602f1794b9acaf9ca908a76386a7813bc"
   dependencies:
@@ -8205,7 +8229,7 @@ text-encoding@^0.6.4:
   version "0.6.4"
   resolved "https://registry.yarnpkg.com/text-encoding/-/text-encoding-0.6.4.tgz#e399a982257a276dae428bb92845cb71bdc26d19"
 
-text-table@0.2.0, text-table@~0.2.0:
+text-table@0.2.0, text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
 
@@ -8369,10 +8393,6 @@ type-is@~1.6.15, type-is@~1.6.16:
     media-typer "0.3.0"
     mime-types "~2.1.18"
 
-typedarray@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
-
 ua-parser-js@^0.7.18:
   version "0.7.18"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"

From 6c8e13ebdeae8b5d0ddfa787e763d3cee7d30fbd Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 25 Aug 2018 23:41:05 +0200
Subject: [PATCH 54/66] Added react version to eslint settings

---
 package.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/package.json b/package.json
index b059bcf0..4ba15f02 100644
--- a/package.json
+++ b/package.json
@@ -173,6 +173,11 @@
       "react/jsx-closing-bracket-location": ["error", "tag-aligned"],
       "react/no-array-index-key": "off",
       "react/no-did-update-set-state": "off"
+    },
+    "settings": {
+      "react": {
+        "version": "16.3"
+      }
     }
   }
 }

From 9b668f336526c7765910d6761ea0dd3af5a1a855 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 25 Aug 2018 23:45:03 +0200
Subject: [PATCH 55/66] Simplified Paginator component

---
 src/short-urls/Paginator.js | 30 ++++++++++++------------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/short-urls/Paginator.js b/src/short-urls/Paginator.js
index 17223b9a..893e2da8 100644
--- a/src/short-urls/Paginator.js
+++ b/src/short-urls/Paginator.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
 import PropTypes from 'prop-types';
+import { range } from 'ramda';
 
 const propTypes = {
   serverId: PropTypes.string.isRequired,
@@ -18,24 +19,17 @@ export default function Paginator({ paginator = {}, serverId }) {
     return null;
   }
 
-  const renderPages = () => {
-    const pages = [];
-
-    for (let i = 1; i <= pagesCount; i++) {
-      pages.push(
-        <PaginationItem key={i} active={currentPage === i}>
-          <PaginationLink
-            tag={Link}
-            to={`/server/${serverId}/list-short-urls/${i}`}
-          >
-            {i}
-          </PaginationLink>
-        </PaginationItem>
-      );
-    }
-
-    return pages;
-  };
+  const renderPages = () =>
+    range(1, pagesCount + 1).map((i) => (
+      <PaginationItem key={i} active={currentPage === i}>
+        <PaginationLink
+          tag={Link}
+          to={`/server/${serverId}/list-short-urls/${i}`}
+        >
+          {i}
+        </PaginationLink>
+      </PaginationItem>
+    ));
 
   return (
     <Pagination listClassName="flex-wrap">

From 4e67798746b4e27b50911d70037a124610820642 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 25 Aug 2018 23:53:51 +0200
Subject: [PATCH 56/66] Applied coding styles to scripts

---
 package.json     |  2 +-
 scripts/build.js | 59 ++++++++++++++++++++++++++++--------------------
 scripts/start.js | 37 ++++++++++++++++++++----------
 scripts/test.js  |  7 +++---
 4 files changed, 65 insertions(+), 40 deletions(-)

diff --git a/package.json b/package.json
index 4ba15f02..dd044c0b 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "private": false,
   "scripts": {
     "lint": "yarn lint:js && yarn lint:css",
-    "lint:js": "eslint src test",
+    "lint:js": "eslint src test scripts",
     "lint:js:fix": "yarn lint:js --fix",
     "lint:css": "stylelint src/**/*.scss",
     "lint:css:fix": "yarn lint:css --fix",
diff --git a/scripts/build.js b/scripts/build.js
index f9fc02b5..f6db9d86 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -1,4 +1,4 @@
-'use strict';
+/* eslint no-console: "off" */
 
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'production';
@@ -7,7 +7,7 @@ process.env.NODE_ENV = 'production';
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
+process.on('unhandledRejection', (err) => {
   throw err;
 });
 
@@ -18,38 +18,38 @@ const path = require('path');
 const chalk = require('chalk');
 const fs = require('fs-extra');
 const webpack = require('webpack');
-const config = require('../config/webpack.config.prod');
-const paths = require('../config/paths');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 const printBuildError = require('react-dev-utils/printBuildError');
 const AdmZip = require('adm-zip');
+const paths = require('../config/paths');
+const config = require('../config/webpack.config.prod');
 
-const measureFileSizesBeforeBuild =
-  FileSizeReporter.measureFileSizesBeforeBuild;
-const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
+const { measureFileSizesBeforeBuild, printFileSizesAfterBuild } = FileSizeReporter;
 const useYarn = fs.existsSync(paths.yarnLockFile);
 
 // These sizes are pretty large. We'll warn for bundles exceeding them.
-const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
-const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024; // eslint-disable-line
+const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024; // eslint-disable-line
 
 // Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+if (!checkRequiredFiles([ paths.appHtml, paths.appIndexJs ])) {
   process.exit(1);
 }
 
 // First, read the current file sizes in build directory.
 // This lets us display how much they changed later.
 measureFileSizesBeforeBuild(paths.appBuild)
-  .then(previousFileSizes => {
+  .then((previousFileSizes) => {
     // Remove all content but keep the directory so that
     // if you're in it, you don't end up in Trash
     fs.emptyDirSync(paths.appBuild);
+
     // Merge with the public folder
     copyPublicFolder();
+
     // Start the webpack build
     return build(previousFileSizes);
   })
@@ -59,14 +59,14 @@ measureFileSizesBeforeBuild(paths.appBuild)
         console.log(chalk.yellow('Compiled with warnings.\n'));
         console.log(warnings.join('\n\n'));
         console.log(
-          '\nSearch for the ' +
-            chalk.underline(chalk.yellow('keywords')) +
-            ' to learn more about each warning.'
+          `\nSearch for the ${
+            chalk.underline(chalk.yellow('keywords'))
+          } to learn more about each warning.`
         );
         console.log(
-          'To ignore, add ' +
-            chalk.cyan('// eslint-disable-next-line') +
-            ' to the line before.\n'
+          `To ignore, add ${
+            chalk.cyan('// eslint-disable-next-line')
+          } to the line before.\n`
         );
       } else {
         console.log(chalk.green('Compiled successfully.\n'));
@@ -83,9 +83,11 @@ measureFileSizesBeforeBuild(paths.appBuild)
       console.log();
 
       const appPackage = require(paths.appPackageJson);
-      const publicUrl = paths.publicUrl;
-      const publicPath = config.output.publicPath;
+
+      const { publicUrl } = paths;
+      const { publicPath } = config.output;
       const buildFolder = path.relative(process.cwd(), paths.appBuild);
+
       printHostingInstructions(
         appPackage,
         publicUrl,
@@ -94,7 +96,7 @@ measureFileSizesBeforeBuild(paths.appBuild)
         useYarn
       );
     },
-    err => {
+    (err) => {
       console.log(chalk.red('Failed to compile.\n'));
       printBuildError(err);
       process.exit(1);
@@ -106,19 +108,23 @@ measureFileSizesBeforeBuild(paths.appBuild)
 function build(previousFileSizes) {
   console.log('Creating an optimized production build...');
 
-  let compiler = webpack(config);
+  const compiler = webpack(config);
+
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
       if (err) {
         return reject(err);
       }
+
       const messages = formatWebpackMessages(stats.toJson({}, true));
+
       if (messages.errors.length) {
         // Only keep the first error. Others are often indicative
         // of the same problem, but confuse the reader with noise.
         if (messages.errors.length > 1) {
           messages.errors.length = 1;
         }
+
         return reject(new Error(messages.errors.join('\n\n')));
       }
       if (
@@ -133,8 +139,10 @@ function build(previousFileSizes) {
               'Most CI servers set it automatically.\n'
           )
         );
+
         return reject(new Error(messages.warnings.join('\n\n')));
       }
+
       return resolve({
         stats,
         previousFileSizes,
@@ -147,17 +155,19 @@ function build(previousFileSizes) {
 function copyPublicFolder() {
   fs.copySync(paths.appPublic, paths.appBuild, {
     dereference: true,
-    filter: file => file !== paths.appHtml,
+    filter: (file) => file !== paths.appHtml,
   });
 }
 
 function zipDist() {
+  const minArgsToContainVersion = 3;
+
   // If no version was provided, do nothing
-  if (process.argv.length < 3) {
+  if (process.argv.length < minArgsToContainVersion) {
     return;
   }
 
-  const version = process.argv[2];
+  const [ , , version ] = process.argv;
   const versionFileName = `./dist/shlink-web-client_${version}_dist.zip`;
 
   console.log(chalk.cyan(`Generating dist file for version ${chalk.bold(version)}...`));
@@ -167,6 +177,7 @@ function zipDist() {
     if (fs.existsSync(versionFileName)) {
       fs.unlink(versionFileName);
     }
+
     zip.addLocalFolder('./build', `shlink-web-client_${version}_dist`);
     zip.writeZip(versionFileName);
     console.log(chalk.green('Dist file properly generated'));
diff --git a/scripts/start.js b/scripts/start.js
index c5acbe57..9332e4e9 100644
--- a/scripts/start.js
+++ b/scripts/start.js
@@ -1,4 +1,4 @@
-'use strict';
+/* eslint no-console: "off" */
 
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'development';
@@ -7,7 +7,7 @@ process.env.NODE_ENV = 'development';
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
+process.on('unhandledRejection', (err) => {
   throw err;
 });
 
@@ -35,12 +35,13 @@ const useYarn = fs.existsSync(paths.yarnLockFile);
 const isInteractive = process.stdout.isTTY;
 
 // Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+if (!checkRequiredFiles([ paths.appHtml, paths.appIndexJs ])) {
   process.exit(1);
 }
 
 // Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const FALLBACK_PORT = 3000;
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || FALLBACK_PORT;
 const HOST = process.env.HOST || '0.0.0.0';
 
 if (process.env.HOST) {
@@ -52,7 +53,7 @@ if (process.env.HOST) {
     )
   );
   console.log(
-    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
+    'If this was unintentional, check that you haven\'t mistakenly set it in your shell.'
   );
   console.log(`Learn more here: ${chalk.yellow('http://bit.ly/2mwWSwH')}`);
   console.log();
@@ -61,47 +62,59 @@ if (process.env.HOST) {
 // We attempt to use the default port but if it is busy, we offer the user to
 // run on a different port. `choosePort()` Promise resolves to the next free port.
 choosePort(HOST, DEFAULT_PORT)
-  .then(port => {
-    if (port == null) {
+  .then((port) => {
+    if (port === null) {
       // We have not found a port.
       return;
     }
+
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     const appName = require(paths.appPackageJson).name;
+
     const urls = prepareUrls(protocol, HOST, port);
+
     // Create a webpack compiler that is configured with custom messages.
     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
+
     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+
     // Serve webpack assets generated by the compiler over a web sever.
     const serverConfig = createDevServerConfig(
       proxyConfig,
       urls.lanUrlForConfig
     );
     const devServer = new WebpackDevServer(compiler, serverConfig);
+
     // Launch WebpackDevServer.
-    devServer.listen(port, HOST, err => {
+
+    devServer.listen(port, HOST, (err) => {
       if (err) {
-        return console.log(err);
+        console.log(err);
+
+        return;
       }
       if (isInteractive) {
         clearConsole();
       }
+
       console.log(chalk.cyan('Starting the development server...\n'));
       openBrowser(urls.localUrlForBrowser);
     });
 
-    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
-      process.on(sig, function() {
+    [ 'SIGINT', 'SIGTERM' ].forEach((sig) => {
+      process.on(sig, () => {
         devServer.close();
         process.exit();
       });
     });
   })
-  .catch(err => {
+  .catch((err) => {
     if (err && err.message) {
       console.log(err.message);
     }
+
     process.exit(1);
   });
diff --git a/scripts/test.js b/scripts/test.js
index c8a26746..c5f8efe9 100644
--- a/scripts/test.js
+++ b/scripts/test.js
@@ -1,4 +1,3 @@
-'use strict';
 
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'test';
@@ -8,7 +7,7 @@ process.env.PUBLIC_URL = '';
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
+process.on('unhandledRejection', (err) => {
   throw err;
 });
 
@@ -17,6 +16,8 @@ require('../config/env');
 
 // Make tests to be matched inside tests folder
 const jest = require('jest');
-let argv = process.argv.slice(2);
+
+const argumentsToRemove = 2;
+const argv = process.argv.slice(argumentsToRemove);
 
 jest.run(argv);

From fff18202fd108dc13528fdb1cfdc6bb25ba84b46 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 26 Aug 2018 00:00:53 +0200
Subject: [PATCH 57/66] Applied coding styles to config files

---
 config/env.js                     |  21 +-
 config/jest/cssTransform.js       |   1 -
 config/jest/fileTransform.js      |   1 -
 config/paths.js                   |  11 +-
 config/polyfills.js               |   1 -
 config/webpack.config.dev.js      | 505 +++++++++++++-----------
 config/webpack.config.prod.js     | 622 ++++++++++++++++--------------
 config/webpackDevServer.config.js |  15 +-
 package.json                      |   2 +-
 9 files changed, 635 insertions(+), 544 deletions(-)

diff --git a/config/env.js b/config/env.js
index 30a6c7f1..c4178db5 100644
--- a/config/env.js
+++ b/config/env.js
@@ -1,4 +1,3 @@
-'use strict';
 
 const fs = require('fs');
 const path = require('path');
@@ -7,7 +6,8 @@ const paths = require('./paths');
 // Make sure that including paths.js after env.js will read .env variables.
 delete require.cache[require.resolve('./paths')];
 
-const NODE_ENV = process.env.NODE_ENV;
+const { NODE_ENV } = process.env;
+
 if (!NODE_ENV) {
   throw new Error(
     'The NODE_ENV environment variable is required but was not specified.'
@@ -15,9 +15,10 @@ if (!NODE_ENV) {
 }
 
 // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
-var dotenvFiles = [
+const dotenvFiles = [
   `${paths.dotenv}.${NODE_ENV}.local`,
   `${paths.dotenv}.${NODE_ENV}`,
+
   // Don't include `.env.local` for `test` environment
   // since normally you expect tests to produce the same
   // results for everyone
@@ -30,7 +31,7 @@ var dotenvFiles = [
 // that have already been set.  Variable expansion is supported in .env files.
 // https://github.com/motdotla/dotenv
 // https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach(dotenvFile => {
+dotenvFiles.forEach((dotenvFile) => {
   if (fs.existsSync(dotenvFile)) {
     require('dotenv-expand')(
       require('dotenv').config({
@@ -50,10 +51,11 @@ dotenvFiles.forEach(dotenvFile => {
 // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
 // We also resolve them to make sure all tools using them work consistently.
 const appDirectory = fs.realpathSync(process.cwd());
+
 process.env.NODE_PATH = (process.env.NODE_PATH || '')
   .split(path.delimiter)
-  .filter(folder => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, folder))
+  .filter((folder) => folder && !path.isAbsolute(folder))
+  .map((folder) => path.resolve(appDirectory, folder))
   .join(path.delimiter);
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
@@ -62,16 +64,19 @@ const REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
   const raw = Object.keys(process.env)
-    .filter(key => REACT_APP.test(key))
+    .filter((key) => REACT_APP.test(key))
     .reduce(
       (env, key) => {
         env[key] = process.env[key];
+
         return env;
       },
       {
+
         // Useful for determining whether we’re running in production mode.
         // Most importantly, it switches React into the correct mode.
         NODE_ENV: process.env.NODE_ENV || 'development',
+
         // Useful for resolving the correct path to static assets in `public`.
         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
         // This should only be used as an escape hatch. Normally you would put
@@ -79,10 +84,12 @@ function getClientEnvironment(publicUrl) {
         PUBLIC_URL: publicUrl,
       }
     );
+
   // Stringify all values so we can feed into Webpack DefinePlugin
   const stringified = {
     'process.env': Object.keys(raw).reduce((env, key) => {
       env[key] = JSON.stringify(raw[key]);
+
       return env;
     }, {}),
   };
diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js
index 8f651148..4e138d18 100644
--- a/config/jest/cssTransform.js
+++ b/config/jest/cssTransform.js
@@ -1,4 +1,3 @@
-'use strict';
 
 // This is a custom Jest transformer turning style imports into empty objects.
 // http://facebook.github.io/jest/docs/en/webpack.html
diff --git a/config/jest/fileTransform.js b/config/jest/fileTransform.js
index 9e4047d3..1162d1dd 100644
--- a/config/jest/fileTransform.js
+++ b/config/jest/fileTransform.js
@@ -1,4 +1,3 @@
-'use strict';
 
 const path = require('path');
 
diff --git a/config/paths.js b/config/paths.js
index 0ec6667c..875467cd 100644
--- a/config/paths.js
+++ b/config/paths.js
@@ -1,4 +1,3 @@
-'use strict';
 
 const path = require('path');
 const fs = require('fs');
@@ -7,22 +6,23 @@ const url = require('url');
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebookincubator/create-react-app/issues/637
 const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
 
 const envPublicUrl = process.env.PUBLIC_URL;
 
 function ensureSlash(path, needsSlash) {
   const hasSlash = path.endsWith('/');
+
   if (hasSlash && !needsSlash) {
     return path.substr(path, path.length - 1);
   } else if (!hasSlash && needsSlash) {
     return `${path}/`;
-  } else {
-    return path;
   }
+
+  return path;
 }
 
-const getPublicUrl = appPackageJson =>
+const getPublicUrl = (appPackageJson) =>
   envPublicUrl || require(appPackageJson).homepage;
 
 // We use `PUBLIC_URL` environment variable or "homepage" field to infer
@@ -34,6 +34,7 @@ const getPublicUrl = appPackageJson =>
 function getServedPath(appPackageJson) {
   const publicUrl = getPublicUrl(appPackageJson);
   const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
+
   return ensureSlash(servedUrl, true);
 }
 
diff --git a/config/polyfills.js b/config/polyfills.js
index 66dff0a8..1e503e8b 100644
--- a/config/polyfills.js
+++ b/config/polyfills.js
@@ -1,4 +1,3 @@
-'use strict';
 
 if (typeof Promise === 'undefined') {
   // Rejection tracking prevents a common issue where React gets into an
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index 9cccca44..2a09a3c2 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -1,7 +1,6 @@
-'use strict';
 
-const autoprefixer = require('autoprefixer');
 const path = require('path');
+const autoprefixer = require('autoprefixer');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
@@ -9,265 +8,301 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // In development, we always serve from the root. This makes config easier.
 const publicPath = '/';
+
 // `publicUrl` is just like `publicPath`, but we will provide it to our app
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 const publicUrl = '';
+
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl);
 
 const postCssLoader = {
-    loader: require.resolve('postcss-loader'),
-    options: {
-        // Necessary for external CSS imports to work
-        // https://github.com/facebookincubator/create-react-app/issues/2677
-        ident: 'postcss',
-        plugins: () => [
-            require('postcss-flexbugs-fixes'),
-            autoprefixer({
-                browsers: [
-                    '>1%',
-                    'last 4 versions',
-                    'Firefox ESR',
-                    'not ie < 9', // React doesn't support IE8 anyway
-                ],
-                flexbox: 'no-2009',
-            }),
+  loader: require.resolve('postcss-loader'),
+  options: {
+
+    // Necessary for external CSS imports to work
+    // https://github.com/facebookincubator/create-react-app/issues/2677
+    ident: 'postcss',
+    plugins: () => [
+      require('postcss-flexbugs-fixes'),
+      autoprefixer({
+        browsers: [
+          '>1%',
+          'last 4 versions',
+          'Firefox ESR',
+          'not ie < 9',
         ],
-    },
+        flexbox: 'no-2009',
+      }),
+    ],
+  },
 };
 
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
 module.exports = {
-    // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
-    // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
-    devtool: 'cheap-module-source-map',
-    // These are the "entry points" to our application.
-    // This means they will be the "root" imports that are included in JS bundle.
-    // The first two entry points enable "hot" CSS and auto-refreshes for JS.
-    entry: [
-        // We ship a few polyfills by default:
-        require.resolve('./polyfills'),
-        // Include an alternative client for WebpackDevServer. A client's job is to
-        // connect to WebpackDevServer by a socket and get notified about changes.
-        // When you save a file, the client will either apply hot updates (in case
-        // of CSS changes), or refresh the page (in case of JS changes). When you
-        // make a syntax error, this client will display a syntax error overlay.
-        // Note: instead of the default WebpackDevServer client, we use a custom one
-        // to bring better experience for Create React App users. You can replace
-        // the line below with these two lines if you prefer the stock client:
-        // require.resolve('webpack-dev-server/client') + '?/',
-        // require.resolve('webpack/hot/dev-server'),
-        require.resolve('react-dev-utils/webpackHotDevClient'),
-        // Finally, this is your app's code:
-        paths.appIndexJs,
-        // We include the app code last so that if there is a runtime error during
-        // initialization, it doesn't blow up the WebpackDevServer client, and
-        // changing JS code would still trigger a refresh.
-    ],
-    output: {
-        // Add /* filename */ comments to generated require()s in the output.
-        pathinfo: true,
-        // This does not produce a real file. It's just the virtual path that is
-        // served by WebpackDevServer in development. This is the JS bundle
-        // containing code from all our entry points, and the Webpack runtime.
-        filename: 'static/js/bundle.js',
-        // There are also additional JS chunk files if you use code splitting.
-        chunkFilename: 'static/js/[name].chunk.js',
-        // This is the URL that app is served from. We use "/" in development.
-        publicPath: publicPath,
-        // Point sourcemap entries to original disk location (format as URL on Windows)
-        devtoolModuleFilenameTemplate: info =>
-            path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
-    },
-    resolve: {
-        // This allows you to set a fallback for where Webpack should look for modules.
-        // We placed these paths second because we want `node_modules` to "win"
-        // if there are any conflicts. This matches Node resolution mechanism.
-        // https://github.com/facebookincubator/create-react-app/issues/253
-        modules: ['node_modules', paths.appNodeModules].concat(
-            // It is guaranteed to exist because we tweak it in `env.js`
-            process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-        ),
-        // These are the reasonable defaults supported by the Node ecosystem.
-        // We also include JSX as a common component filename extension to support
-        // some tools, although we do not recommend using it, see:
-        // https://github.com/facebookincubator/create-react-app/issues/290
-        // `web` extension prefixes have been added for better support
-        // for React Native Web.
-        extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
-        alias: {
 
-            // Support React Native Web
-            // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-            'react-native': 'react-native-web',
-        },
-        plugins: [
-            // Prevents users from importing files from outside of src/ (or node_modules/).
-            // This often causes confusion because we only process files within src/ with babel.
-            // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-            // please link the files into your node_modules/ and let module-resolution kick in.
-            // Make sure your source files are compiled, as they will not be processed in any way.
-            new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-        ],
-    },
-    module: {
-        strictExportPresence: true,
-        rules: [
-            // TODO: Disable require.ensure as it's not a standard language feature.
-            // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
-            // { parser: { requireEnsure: false } },
+  // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
+  // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
+  devtool: 'cheap-module-source-map',
 
-            // First, run the linter.
-            // It's important to do this before Babel processes the JS.
-            {
-                test: /\.(js|jsx|mjs)$/,
-                enforce: 'pre',
-                use: [
-                    {
-                        options: {
-                            formatter: eslintFormatter,
-                            eslintPath: require.resolve('eslint'),
+  // These are the "entry points" to our application.
+  // This means they will be the "root" imports that are included in JS bundle.
+  // The first two entry points enable "hot" CSS and auto-refreshes for JS.
+  entry: [
 
-                        },
-                        loader: require.resolve('eslint-loader'),
-                    },
-                ],
-                include: paths.appSrc,
-            },
-            {
-                // "oneOf" will traverse all following loaders until one will
-                // match the requirements. When no loader matches it will fall
-                // back to the "file" loader at the end of the loader list.
-                oneOf: [
-                    // "url" loader works like "file" loader except that it embeds assets
-                    // smaller than specified limit in bytes as data URLs to avoid requests.
-                    // A missing `test` is equivalent to a match.
-                    {
-                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-                        loader: require.resolve('url-loader'),
-                        options: {
-                            limit: 10000,
-                            name: 'static/media/[name].[hash:8].[ext]',
-                        },
-                    },
-                    // Process JS with Babel.
-                    {
-                        test: /\.(js|jsx|mjs)$/,
-                        include: paths.appSrc,
-                        loader: require.resolve('babel-loader'),
-                        options: {
+    // We ship a few polyfills by default:
+    require.resolve('./polyfills'),
 
-                            // This is a feature of `babel-loader` for webpack (not Babel itself).
-                            // It enables caching results in ./node_modules/.cache/babel-loader/
-                            // directory for faster rebuilds.
-                            cacheDirectory: true,
-                        },
-                    },
-                    // "postcss" loader applies autoprefixer to our CSS.
-                    // "css" loader resolves paths in CSS and adds assets as dependencies.
-                    // "style" loader turns CSS into JS modules that inject <style> tags.
-                    // In production, we use a plugin to extract that CSS to a file, but
-                    // in development "style" loader enables hot editing of CSS.
-                    {
-                        test: /\.css$/,
-                        use: [
-                            require.resolve('style-loader'),
-                            {
-                                loader: require.resolve('css-loader'),
-                                options: {
-                                    importLoaders: 1,
-                                },
-                            },
-                            postCssLoader,
-                        ],
-                    },
-                    {
-                        test: /\.scss$/,
-                        use: ExtractTextPlugin.extract({
-                            fallback: 'style-loader',
-                            use: ['css-loader', 'sass-loader', postCssLoader]
-                        })
-                    },
-                    // "file" loader makes sure those assets get served by WebpackDevServer.
-                    // When you `import` an asset, you get its (virtual) filename.
-                    // In production, they would get copied to the `build` folder.
-                    // This loader doesn't use a "test" so it will catch all modules
-                    // that fall through the other loaders.
-                    {
-                        // Exclude `js` files to keep "css" loader working as it injects
-                        // its runtime that would otherwise processed through "file" loader.
-                        // Also exclude `html` and `json` extensions so they get processed
-                        // by webpacks internal loaders.
-                        exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
-                        loader: require.resolve('file-loader'),
-                        options: {
-                            name: 'static/media/[name].[hash:8].[ext]',
-                        },
-                    },
-                ],
-            },
-            // ** STOP ** Are you adding a new loader?
-            // Make sure to add the new loader(s) before the "file" loader.
-        ],
+    // Include an alternative client for WebpackDevServer. A client's job is to
+    // connect to WebpackDevServer by a socket and get notified about changes.
+    // When you save a file, the client will either apply hot updates (in case
+    // of CSS changes), or refresh the page (in case of JS changes). When you
+    // make a syntax error, this client will display a syntax error overlay.
+    // Note: instead of the default WebpackDevServer client, we use a custom one
+    // to bring better experience for Create React App users. You can replace
+    // the line below with these two lines if you prefer the stock client:
+    // require.resolve('webpack-dev-server/client') + '?/',
+    // require.resolve('webpack/hot/dev-server'),
+    require.resolve('react-dev-utils/webpackHotDevClient'),
+
+    // Finally, this is your app's code:
+    paths.appIndexJs,
+
+    // We include the app code last so that if there is a runtime error during
+    // initialization, it doesn't blow up the WebpackDevServer client, and
+    // changing JS code would still trigger a refresh.
+  ],
+  output: {
+
+    // Add /* filename */ comments to generated require()s in the output.
+    pathinfo: true,
+
+    // This does not produce a real file. It's just the virtual path that is
+    // served by WebpackDevServer in development. This is the JS bundle
+    // containing code from all our entry points, and the Webpack runtime.
+    filename: 'static/js/bundle.js',
+
+    // There are also additional JS chunk files if you use code splitting.
+    chunkFilename: 'static/js/[name].chunk.js',
+
+    // This is the URL that app is served from. We use "/" in development.
+    publicPath,
+
+    // Point sourcemap entries to original disk location (format as URL on Windows)
+    devtoolModuleFilenameTemplate: (info) =>
+      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
+  },
+  resolve: {
+
+    // This allows you to set a fallback for where Webpack should look for modules.
+    // We placed these paths second because we want `node_modules` to "win"
+    // if there are any conflicts. This matches Node resolution mechanism.
+    // https://github.com/facebookincubator/create-react-app/issues/253
+    modules: [ 'node_modules', paths.appNodeModules ].concat(
+
+      // It is guaranteed to exist because we tweak it in `env.js`
+      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
+    ),
+
+    // These are the reasonable defaults supported by the Node ecosystem.
+    // We also include JSX as a common component filename extension to support
+    // some tools, although we do not recommend using it, see:
+    // https://github.com/facebookincubator/create-react-app/issues/290
+    // `web` extension prefixes have been added for better support
+    // for React Native Web.
+    extensions: [ '.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx' ],
+    alias: {
+
+      // Support React Native Web
+      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+      'react-native': 'react-native-web',
     },
     plugins: [
-        // Makes some environment variables available in index.html.
-        // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-        // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-        // In development, this will be an empty string.
-        new InterpolateHtmlPlugin(env.raw),
-        // Generates an `index.html` file with the <script> injected.
-        new HtmlWebpackPlugin({
-            inject: true,
-            template: paths.appHtml,
-        }),
-        // Add module names to factory functions so they appear in browser profiler.
-        new webpack.NamedModulesPlugin(),
-        // Makes some environment variables available to the JS code, for example:
-        // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
-        new webpack.DefinePlugin(env.stringified),
-        // This is necessary to emit hot updates (currently CSS only):
-        new webpack.HotModuleReplacementPlugin(),
-        // Watcher doesn't work well if you mistype casing in a path so we use
-        // a plugin that prints an error when you attempt to do this.
-        // See https://github.com/facebookincubator/create-react-app/issues/240
-        new CaseSensitivePathsPlugin(),
-        // If you require a missing module and then `npm install` it, you still have
-        // to restart the development server for Webpack to discover it. This plugin
-        // makes the discovery automatic so you don't have to restart.
-        // See https://github.com/facebookincubator/create-react-app/issues/186
-        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-        // Moment.js is an extremely popular library that bundles large locale files
-        // by default due to how Webpack interprets its code. This is a practical
-        // solution that requires the user to opt into importing specific locales.
-        // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-        // You can remove this if you don't use Moment.js:
-        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-        new ExtractTextPlugin('main.css'),
+
+      // Prevents users from importing files from outside of src/ (or node_modules/).
+      // This often causes confusion because we only process files within src/ with babel.
+      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+      // please link the files into your node_modules/ and let module-resolution kick in.
+      // Make sure your source files are compiled, as they will not be processed in any way.
+      new ModuleScopePlugin(paths.appSrc, [ paths.appPackageJson ]),
     ],
-    // Some libraries import Node modules but don't use them in the browser.
-    // Tell Webpack to provide empty mocks for them so importing them works.
-    node: {
-        dgram: 'empty',
-        fs: 'empty',
-        net: 'empty',
-        tls: 'empty',
-        child_process: 'empty',
-    },
-    // Turn off performance hints during development because we don't do any
-    // splitting or minification in interest of speed. These warnings become
-    // cumbersome.
-    performance: {
-        hints: false,
-    },
+  },
+  module: {
+    strictExportPresence: true,
+    rules: [
+
+      // TODO: Disable require.ensure as it's not a standard language feature.
+      // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
+      // { parser: { requireEnsure: false } },
+
+      // First, run the linter.
+      // It's important to do this before Babel processes the JS.
+      {
+        test: /\.(js|jsx|mjs)$/,
+        enforce: 'pre',
+        use: [
+          {
+            options: {
+              formatter: eslintFormatter,
+              eslintPath: require.resolve('eslint'),
+
+            },
+            loader: require.resolve('eslint-loader'),
+          },
+        ],
+        include: paths.appSrc,
+      },
+      {
+
+        // "oneOf" will traverse all following loaders until one will
+        // match the requirements. When no loader matches it will fall
+        // back to the "file" loader at the end of the loader list.
+        oneOf: [
+
+          // "url" loader works like "file" loader except that it embeds assets
+          // smaller than specified limit in bytes as data URLs to avoid requests.
+          // A missing `test` is equivalent to a match.
+          {
+            test: [ /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/ ],
+            loader: require.resolve('url-loader'),
+            options: {
+              limit: 10000,
+              name: 'static/media/[name].[hash:8].[ext]',
+            },
+          },
+
+          // Process JS with Babel.
+          {
+            test: /\.(js|jsx|mjs)$/,
+            include: paths.appSrc,
+            loader: require.resolve('babel-loader'),
+            options: {
+
+              // This is a feature of `babel-loader` for webpack (not Babel itself).
+              // It enables caching results in ./node_modules/.cache/babel-loader/
+              // directory for faster rebuilds.
+              cacheDirectory: true,
+            },
+          },
+
+          // "postcss" loader applies autoprefixer to our CSS.
+          // "css" loader resolves paths in CSS and adds assets as dependencies.
+          // "style" loader turns CSS into JS modules that inject <style> tags.
+          // In production, we use a plugin to extract that CSS to a file, but
+          // in development "style" loader enables hot editing of CSS.
+          {
+            test: /\.css$/,
+            use: [
+              require.resolve('style-loader'),
+              {
+                loader: require.resolve('css-loader'),
+                options: {
+                  importLoaders: 1,
+                },
+              },
+              postCssLoader,
+            ],
+          },
+          {
+            test: /\.scss$/,
+            use: ExtractTextPlugin.extract({
+              fallback: 'style-loader',
+              use: [ 'css-loader', 'sass-loader', postCssLoader ],
+            }),
+          },
+
+          // "file" loader makes sure those assets get served by WebpackDevServer.
+          // When you `import` an asset, you get its (virtual) filename.
+          // In production, they would get copied to the `build` folder.
+          // This loader doesn't use a "test" so it will catch all modules
+          // that fall through the other loaders.
+          {
+
+            // Exclude `js` files to keep "css" loader working as it injects
+            // its runtime that would otherwise processed through "file" loader.
+            // Also exclude `html` and `json` extensions so they get processed
+            // by webpacks internal loaders.
+            exclude: [ /\.(js|jsx|mjs)$/, /\.html$/, /\.json$/ ],
+            loader: require.resolve('file-loader'),
+            options: {
+              name: 'static/media/[name].[hash:8].[ext]',
+            },
+          },
+        ],
+      },
+
+      // ** STOP ** Are you adding a new loader?
+      // Make sure to add the new loader(s) before the "file" loader.
+    ],
+  },
+  plugins: [
+
+    // Makes some environment variables available in index.html.
+    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    // In development, this will be an empty string.
+    new InterpolateHtmlPlugin(env.raw),
+
+    // Generates an `index.html` file with the <script> injected.
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: paths.appHtml,
+    }),
+
+    // Add module names to factory functions so they appear in browser profiler.
+    new webpack.NamedModulesPlugin(),
+
+    // Makes some environment variables available to the JS code, for example:
+    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
+    new webpack.DefinePlugin(env.stringified),
+
+    // This is necessary to emit hot updates (currently CSS only):
+    new webpack.HotModuleReplacementPlugin(),
+
+    // Watcher doesn't work well if you mistype casing in a path so we use
+    // a plugin that prints an error when you attempt to do this.
+    // See https://github.com/facebookincubator/create-react-app/issues/240
+    new CaseSensitivePathsPlugin(),
+
+    // If you require a missing module and then `npm install` it, you still have
+    // to restart the development server for Webpack to discover it. This plugin
+    // makes the discovery automatic so you don't have to restart.
+    // See https://github.com/facebookincubator/create-react-app/issues/186
+    new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+
+    // Moment.js is an extremely popular library that bundles large locale files
+    // by default due to how Webpack interprets its code. This is a practical
+    // solution that requires the user to opt into importing specific locales.
+    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+    // You can remove this if you don't use Moment.js:
+    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new ExtractTextPlugin('main.css'),
+  ],
+
+  // Some libraries import Node modules but don't use them in the browser.
+  // Tell Webpack to provide empty mocks for them so importing them works.
+  node: {
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty',
+  },
+
+  // Turn off performance hints during development because we don't do any
+  // splitting or minification in interest of speed. These warnings become
+  // cumbersome.
+  performance: {
+    hints: false,
+  },
 };
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index c4a6f06b..f2519179 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -1,7 +1,6 @@
-'use strict';
 
-const autoprefixer = require('autoprefixer');
 const path = require('path');
+const autoprefixer = require('autoprefixer');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
@@ -16,22 +15,26 @@ const getClientEnvironment = require('./env');
 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.
 const publicPath = paths.servedPath;
+
 // Some apps do not use client-side routing with pushState.
 // For these, "homepage" can be set to "." to enable relative asset paths.
 const shouldUseRelativeAssetPaths = publicPath === './';
+
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+
 // `publicUrl` is just like `publicPath`, but we will provide it to our app
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 const publicUrl = publicPath.slice(0, -1);
+
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl);
 
 // Assert this just to be safe.
 // Development builds of React are slow and not intended for production.
 if (env.stringified['process.env'].NODE_ENV !== '"production"') {
-    throw new Error('Production builds must have NODE_ENV=production.');
+  throw new Error('Production builds must have NODE_ENV=production.');
 }
 
 // Note: defined here because it will be used more than once.
@@ -41,305 +44,342 @@ const cssFilename = 'static/css/[name].[contenthash:8].css';
 // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 // However, our output is structured with css, js and media folders.
 // To have this structure working with relative paths, we have to use custom options.
+// Making sure that the publicPath goes back to to build folder.
 const extractTextPluginOptions = shouldUseRelativeAssetPaths
-    ? // Making sure that the publicPath goes back to to build folder.
-    {publicPath: Array(cssFilename.split('/').length).join('../')}
-    : {};
+  ? { publicPath: Array(cssFilename.split('/').length).join('../') }
+  : {};
 
 // This is the production configuration.
 // It compiles slowly and is focused on producing a fast and minimal bundle.
 // The development configuration is different and lives in a separate file.
 module.exports = {
-    // Don't attempt to continue if there are any errors.
-    bail: true,
-    // We generate sourcemaps in production. This is slow but gives good results.
-    // You can exclude the *.map files from the build during deployment.
-    devtool: shouldUseSourceMap ? 'source-map' : false,
-    // In production, we only want to load the polyfills and the app code.
-    entry: [require.resolve('./polyfills'), paths.appIndexJs],
-    output: {
-        // The build folder.
-        path: paths.appBuild,
-        // Generated JS file names (with nested folders).
-        // There will be one main bundle, and one file per asynchronous chunk.
-        // We don't currently advertise code splitting but Webpack supports it.
-        filename: 'static/js/[name].[chunkhash:8].js',
-        chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
-        // We inferred the "public path" (such as / or /my-project) from homepage.
-        publicPath: publicPath,
-        // Point sourcemap entries to original disk location (format as URL on Windows)
-        devtoolModuleFilenameTemplate: info =>
-            path
-                .relative(paths.appSrc, info.absoluteResourcePath)
-                .replace(/\\/g, '/'),
-    },
-    resolve: {
-        // This allows you to set a fallback for where Webpack should look for modules.
-        // We placed these paths second because we want `node_modules` to "win"
-        // if there are any conflicts. This matches Node resolution mechanism.
-        // https://github.com/facebookincubator/create-react-app/issues/253
-        modules: ['node_modules', paths.appNodeModules].concat(
-            // It is guaranteed to exist because we tweak it in `env.js`
-            process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-        ),
-        // These are the reasonable defaults supported by the Node ecosystem.
-        // We also include JSX as a common component filename extension to support
-        // some tools, although we do not recommend using it, see:
-        // https://github.com/facebookincubator/create-react-app/issues/290
-        // `web` extension prefixes have been added for better support
-        // for React Native Web.
-        extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
-        alias: {
 
-            // Support React Native Web
-            // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-            'react-native': 'react-native-web',
-        },
-        plugins: [
-            // Prevents users from importing files from outside of src/ (or node_modules/).
-            // This often causes confusion because we only process files within src/ with babel.
-            // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-            // please link the files into your node_modules/ and let module-resolution kick in.
-            // Make sure your source files are compiled, as they will not be processed in any way.
-            new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-        ],
-    },
-    module: {
-        strictExportPresence: true,
-        rules: [
-            // TODO: Disable require.ensure as it's not a standard language feature.
-            // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
-            // { parser: { requireEnsure: false } },
+  // Don't attempt to continue if there are any errors.
+  bail: true,
 
-            // First, run the linter.
-            // It's important to do this before Babel processes the JS.
-            {
-                test: /\.(js|jsx|mjs)$/,
-                enforce: 'pre',
-                use: [
-                    {
-                        options: {
-                            formatter: eslintFormatter,
-                            eslintPath: require.resolve('eslint'),
+  // We generate sourcemaps in production. This is slow but gives good results.
+  // You can exclude the *.map files from the build during deployment.
+  devtool: shouldUseSourceMap ? 'source-map' : false,
 
-                        },
-                        loader: require.resolve('eslint-loader'),
-                    },
-                ],
-                include: paths.appSrc,
-            },
-            {
-                // "oneOf" will traverse all following loaders until one will
-                // match the requirements. When no loader matches it will fall
-                // back to the "file" loader at the end of the loader list.
-                oneOf: [
-                    // "url" loader works just like "file" loader but it also embeds
-                    // assets smaller than specified size as data URLs to avoid requests.
-                    {
-                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-                        loader: require.resolve('url-loader'),
-                        options: {
-                            limit: 10000,
-                            name: 'static/media/[name].[hash:8].[ext]',
-                        },
-                    },
-                    // Process JS with Babel.
-                    {
-                        test: /\.(js|jsx|mjs)$/,
-                        include: paths.appSrc,
-                        loader: require.resolve('babel-loader'),
-                        options: {
+  // In production, we only want to load the polyfills and the app code.
+  entry: [ require.resolve('./polyfills'), paths.appIndexJs ],
+  output: {
 
-                            compact: true,
-                        },
-                    },
-                    // The notation here is somewhat confusing.
-                    // "postcss" loader applies autoprefixer to our CSS.
-                    // "css" loader resolves paths in CSS and adds assets as dependencies.
-                    // "style" loader normally turns CSS into JS modules injecting <style>,
-                    // but unlike in development configuration, we do something different.
-                    // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
-                    // (second argument), then grabs the result CSS and puts it into a
-                    // separate file in our build process. This way we actually ship
-                    // a single CSS file in production instead of JS code injecting <style>
-                    // tags. If you use code splitting, however, any async bundles will still
-                    // use the "style" loader inside the async code so CSS from them won't be
-                    // in the main CSS file.
-                    {
-                        test: [/\.css$/, /\.scss$/],
-                        loader: ExtractTextPlugin.extract(
-                            Object.assign(
-                                {
-                                    fallback: {
-                                        loader: require.resolve('style-loader'),
-                                        options: {
-                                            hmr: false,
-                                        },
-                                    },
-                                    use: [
-                                        {
-                                            loader: require.resolve('css-loader'),
-                                            options: {
-                                                importLoaders: 1,
-                                                minimize: true,
-                                                sourceMap: shouldUseSourceMap,
-                                            },
-                                        },
-                                        {
-                                            loader: require.resolve('sass-loader'),
-                                        },
-                                        {
-                                            loader: require.resolve('postcss-loader'),
-                                            options: {
-                                                // Necessary for external CSS imports to work
-                                                // https://github.com/facebookincubator/create-react-app/issues/2677
-                                                ident: 'postcss',
-                                                plugins: () => [
-                                                    require('postcss-flexbugs-fixes'),
-                                                    autoprefixer({
-                                                        browsers: [
-                                                            '>1%',
-                                                            'last 4 versions',
-                                                            'Firefox ESR',
-                                                            'not ie < 9', // React doesn't support IE8 anyway
-                                                        ],
-                                                        flexbox: 'no-2009',
-                                                    }),
-                                                ],
-                                            },
-                                        },
-                                    ],
-                                },
-                                extractTextPluginOptions
-                            )
-                        ),
-                        // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
-                    },
-                    // "file" loader makes sure assets end up in the `build` folder.
-                    // When you `import` an asset, you get its filename.
-                    // This loader doesn't use a "test" so it will catch all modules
-                    // that fall through the other loaders.
-                    {
-                        loader: require.resolve('file-loader'),
-                        // Exclude `js` files to keep "css" loader working as it injects
-                        // it's runtime that would otherwise processed through "file" loader.
-                        // Also exclude `html` and `json` extensions so they get processed
-                        // by webpacks internal loaders.
-                        exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
-                        options: {
-                            name: 'static/media/[name].[hash:8].[ext]',
-                        },
-                    },
-                    // ** STOP ** Are you adding a new loader?
-                    // Make sure to add the new loader(s) before the "file" loader.
-                ],
-            },
-        ],
+    // The build folder.
+    path: paths.appBuild,
+
+    // Generated JS file names (with nested folders).
+    // There will be one main bundle, and one file per asynchronous chunk.
+    // We don't currently advertise code splitting but Webpack supports it.
+    filename: 'static/js/[name].[chunkhash:8].js',
+    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
+
+    // We inferred the "public path" (such as / or /my-project) from homepage.
+    publicPath,
+
+    // Point sourcemap entries to original disk location (format as URL on Windows)
+    devtoolModuleFilenameTemplate: (info) =>
+      path
+        .relative(paths.appSrc, info.absoluteResourcePath)
+        .replace(/\\/g, '/'),
+  },
+  resolve: {
+
+    // This allows you to set a fallback for where Webpack should look for modules.
+    // We placed these paths second because we want `node_modules` to "win"
+    // if there are any conflicts. This matches Node resolution mechanism.
+    // https://github.com/facebookincubator/create-react-app/issues/253
+    modules: [ 'node_modules', paths.appNodeModules ].concat(
+
+      // It is guaranteed to exist because we tweak it in `env.js`
+      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
+    ),
+
+    // These are the reasonable defaults supported by the Node ecosystem.
+    // We also include JSX as a common component filename extension to support
+    // some tools, although we do not recommend using it, see:
+    // https://github.com/facebookincubator/create-react-app/issues/290
+    // `web` extension prefixes have been added for better support
+    // for React Native Web.
+    extensions: [ '.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx' ],
+    alias: {
+
+      // Support React Native Web
+      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+      'react-native': 'react-native-web',
     },
     plugins: [
-        // Makes some environment variables available in index.html.
-        // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-        // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-        // In production, it will be an empty string unless you specify "homepage"
-        // in `package.json`, in which case it will be the pathname of that URL.
-        new InterpolateHtmlPlugin(env.raw),
-        // Generates an `index.html` file with the <script> injected.
-        new HtmlWebpackPlugin({
-            inject: true,
-            template: paths.appHtml,
-            minify: {
-                removeComments: true,
-                collapseWhitespace: true,
-                removeRedundantAttributes: true,
-                useShortDoctype: true,
-                removeEmptyAttributes: true,
-                removeStyleLinkTypeAttributes: true,
-                keepClosingSlash: true,
-                minifyJS: true,
-                minifyCSS: true,
-                minifyURLs: true,
-            },
-        }),
-        // Makes some environment variables available to the JS code, for example:
-        // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
-        // It is absolutely essential that NODE_ENV was set to production here.
-        // Otherwise React will be compiled in the very slow development mode.
-        new webpack.DefinePlugin(env.stringified),
-        // Minify the code.
-        new webpack.optimize.UglifyJsPlugin({
-            compress: {
-                warnings: false,
-                // Disabled because of an issue with Uglify breaking seemingly valid code:
-                // https://github.com/facebookincubator/create-react-app/issues/2376
-                // Pending further investigation:
-                // https://github.com/mishoo/UglifyJS2/issues/2011
-                comparisons: false,
-            },
-            mangle: {
-                safari10: true,
-            },
-            output: {
-                comments: false,
-                // Turned on because emoji and regex is not minified properly using default
-                // https://github.com/facebookincubator/create-react-app/issues/2488
-                ascii_only: true,
-            },
-            sourceMap: shouldUseSourceMap,
-        }),
-        // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
-        new ExtractTextPlugin({
-            filename: cssFilename,
-        }),
-        // Generate a manifest file which contains a mapping of all asset filenames
-        // to their corresponding output file so that tools can pick it up without
-        // having to parse `index.html`.
-        new ManifestPlugin({
-            fileName: 'asset-manifest.json',
-        }),
-        // Generate a service worker script that will precache, and keep up to date,
-        // the HTML & assets that are part of the Webpack build.
-        new SWPrecacheWebpackPlugin({
-            // By default, a cache-busting query parameter is appended to requests
-            // used to populate the caches, to ensure the responses are fresh.
-            // If a URL is already hashed by Webpack, then there is no concern
-            // about it being stale, and the cache-busting can be skipped.
-            dontCacheBustUrlsMatching: /\.\w{8}\./,
-            filename: 'service-worker.js',
-            logger(message) {
-                if (message.indexOf('Total precache size is') === 0) {
-                    // This message occurs for every build and is a bit too noisy.
-                    return;
-                }
-                if (message.indexOf('Skipping static resource') === 0) {
-                    // This message obscures real errors so we ignore it.
-                    // https://github.com/facebookincubator/create-react-app/issues/2612
-                    return;
-                }
-                console.log(message);
-            },
-            minify: true,
-            // For unknown URLs, fallback to the index page
-            navigateFallback: publicUrl + '/index.html',
-            // Ignores URLs starting from /__ (useful for Firebase):
-            // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
-            navigateFallbackWhitelist: [/^(?!\/__).*/],
-            // Don't precache sourcemaps (they're large) and build asset manifest:
-            staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
-        }),
-        // Moment.js is an extremely popular library that bundles large locale files
-        // by default due to how Webpack interprets its code. This is a practical
-        // solution that requires the user to opt into importing specific locales.
-        // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-        // You can remove this if you don't use Moment.js:
-        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+
+      // Prevents users from importing files from outside of src/ (or node_modules/).
+      // This often causes confusion because we only process files within src/ with babel.
+      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+      // please link the files into your node_modules/ and let module-resolution kick in.
+      // Make sure your source files are compiled, as they will not be processed in any way.
+      new ModuleScopePlugin(paths.appSrc, [ paths.appPackageJson ]),
     ],
-    // Some libraries import Node modules but don't use them in the browser.
-    // Tell Webpack to provide empty mocks for them so importing them works.
-    node: {
-        dgram: 'empty',
-        fs: 'empty',
-        net: 'empty',
-        tls: 'empty',
-        child_process: 'empty',
-    },
+  },
+  module: {
+    strictExportPresence: true,
+    rules: [
+
+      // TODO: Disable require.ensure as it's not a standard language feature.
+      // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
+      // { parser: { requireEnsure: false } },
+
+      // First, run the linter.
+      // It's important to do this before Babel processes the JS.
+      {
+        test: /\.(js|jsx|mjs)$/,
+        enforce: 'pre',
+        use: [
+          {
+            options: {
+              formatter: eslintFormatter,
+              eslintPath: require.resolve('eslint'),
+
+            },
+            loader: require.resolve('eslint-loader'),
+          },
+        ],
+        include: paths.appSrc,
+      },
+      {
+
+        // "oneOf" will traverse all following loaders until one will
+        // match the requirements. When no loader matches it will fall
+        // back to the "file" loader at the end of the loader list.
+        oneOf: [
+
+          // "url" loader works just like "file" loader but it also embeds
+          // assets smaller than specified size as data URLs to avoid requests.
+          {
+            test: [ /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/ ],
+            loader: require.resolve('url-loader'),
+            options: {
+              limit: 10000,
+              name: 'static/media/[name].[hash:8].[ext]',
+            },
+          },
+
+          // Process JS with Babel.
+          {
+            test: /\.(js|jsx|mjs)$/,
+            include: paths.appSrc,
+            loader: require.resolve('babel-loader'),
+            options: {
+
+              compact: true,
+            },
+          },
+
+          // The notation here is somewhat confusing.
+          // "postcss" loader applies autoprefixer to our CSS.
+          // "css" loader resolves paths in CSS and adds assets as dependencies.
+          // "style" loader normally turns CSS into JS modules injecting <style>,
+          // but unlike in development configuration, we do something different.
+          // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
+          // (second argument), then grabs the result CSS and puts it into a
+          // separate file in our build process. This way we actually ship
+          // a single CSS file in production instead of JS code injecting <style>
+          // tags. If you use code splitting, however, any async bundles will still
+          // use the "style" loader inside the async code so CSS from them won't be
+          // in the main CSS file.
+          {
+            test: [ /\.css$/, /\.scss$/ ],
+            loader: ExtractTextPlugin.extract(
+              Object.assign(
+                {
+                  fallback: {
+                    loader: require.resolve('style-loader'),
+                    options: {
+                      hmr: false,
+                    },
+                  },
+                  use: [
+                    {
+                      loader: require.resolve('css-loader'),
+                      options: {
+                        importLoaders: 1,
+                        minimize: true,
+                        sourceMap: shouldUseSourceMap,
+                      },
+                    },
+                    {
+                      loader: require.resolve('sass-loader'),
+                    },
+                    {
+                      loader: require.resolve('postcss-loader'),
+                      options: {
+
+                        // Necessary for external CSS imports to work
+                        // https://github.com/facebookincubator/create-react-app/issues/2677
+                        ident: 'postcss',
+                        plugins: () => [
+                          require('postcss-flexbugs-fixes'),
+                          autoprefixer({
+                            browsers: [
+                              '>1%',
+                              'last 4 versions',
+                              'Firefox ESR',
+                              'not ie < 9',
+                            ],
+                            flexbox: 'no-2009',
+                          }),
+                        ],
+                      },
+                    },
+                  ],
+                },
+                extractTextPluginOptions
+              )
+            ),
+
+            // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
+          },
+
+          // "file" loader makes sure assets end up in the `build` folder.
+          // When you `import` an asset, you get its filename.
+          // This loader doesn't use a "test" so it will catch all modules
+          // that fall through the other loaders.
+          {
+            loader: require.resolve('file-loader'),
+
+            // Exclude `js` files to keep "css" loader working as it injects
+            // it's runtime that would otherwise processed through "file" loader.
+            // Also exclude `html` and `json` extensions so they get processed
+            // by webpacks internal loaders.
+            exclude: [ /\.(js|jsx|mjs)$/, /\.html$/, /\.json$/ ],
+            options: {
+              name: 'static/media/[name].[hash:8].[ext]',
+            },
+          },
+
+          // ** STOP ** Are you adding a new loader?
+          // Make sure to add the new loader(s) before the "file" loader.
+        ],
+      },
+    ],
+  },
+  plugins: [
+
+    // Makes some environment variables available in index.html.
+    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    // In production, it will be an empty string unless you specify "homepage"
+    // in `package.json`, in which case it will be the pathname of that URL.
+    new InterpolateHtmlPlugin(env.raw),
+
+    // Generates an `index.html` file with the <script> injected.
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: paths.appHtml,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeRedundantAttributes: true,
+        useShortDoctype: true,
+        removeEmptyAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        keepClosingSlash: true,
+        minifyJS: true,
+        minifyCSS: true,
+        minifyURLs: true,
+      },
+    }),
+
+    // Makes some environment variables available to the JS code, for example:
+    // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+    // It is absolutely essential that NODE_ENV was set to production here.
+    // Otherwise React will be compiled in the very slow development mode.
+    new webpack.DefinePlugin(env.stringified),
+
+    // Minify the code.
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false,
+
+        // Disabled because of an issue with Uglify breaking seemingly valid code:
+        // https://github.com/facebookincubator/create-react-app/issues/2376
+        // Pending further investigation:
+        // https://github.com/mishoo/UglifyJS2/issues/2011
+        comparisons: false,
+      },
+      mangle: {
+        safari10: true,
+      },
+      output: {
+        comments: false,
+
+        // Turned on because emoji and regex is not minified properly using default
+        // https://github.com/facebookincubator/create-react-app/issues/2488
+        ascii_only: true,
+      },
+      sourceMap: shouldUseSourceMap,
+    }),
+
+    // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
+    new ExtractTextPlugin({
+      filename: cssFilename,
+    }),
+
+    // Generate a manifest file which contains a mapping of all asset filenames
+    // to their corresponding output file so that tools can pick it up without
+    // having to parse `index.html`.
+    new ManifestPlugin({
+      fileName: 'asset-manifest.json',
+    }),
+
+    // Generate a service worker script that will precache, and keep up to date,
+    // the HTML & assets that are part of the Webpack build.
+    new SWPrecacheWebpackPlugin({
+
+      // By default, a cache-busting query parameter is appended to requests
+      // used to populate the caches, to ensure the responses are fresh.
+      // If a URL is already hashed by Webpack, then there is no concern
+      // about it being stale, and the cache-busting can be skipped.
+      dontCacheBustUrlsMatching: /\.\w{8}\./,
+      filename: 'service-worker.js',
+      logger(message) {
+        if (message.indexOf('Total precache size is') === 0) {
+          // This message occurs for every build and is a bit too noisy.
+          return;
+        }
+        if (message.indexOf('Skipping static resource') === 0) {
+          // This message obscures real errors so we ignore it.
+          // https://github.com/facebookincubator/create-react-app/issues/2612
+          return;
+        }
+
+        console.log(message); // eslint-disable-line
+      },
+      minify: true,
+
+      // For unknown URLs, fallback to the index page
+      navigateFallback: `${publicUrl}/index.html`,
+
+      // Ignores URLs starting from /__ (useful for Firebase):
+      // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
+      navigateFallbackWhitelist: [ /^(?!\/__).*/ ],
+
+      // Don't precache sourcemaps (they're large) and build asset manifest:
+      staticFileGlobsIgnorePatterns: [ /\.map$/, /asset-manifest\.json$/ ],
+    }),
+
+    // Moment.js is an extremely popular library that bundles large locale files
+    // by default due to how Webpack interprets its code. This is a practical
+    // solution that requires the user to opt into importing specific locales.
+    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+    // You can remove this if you don't use Moment.js:
+    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+  ],
+
+  // Some libraries import Node modules but don't use them in the browser.
+  // Tell Webpack to provide empty mocks for them so importing them works.
+  node: {
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty',
+  },
 };
diff --git a/config/webpackDevServer.config.js b/config/webpackDevServer.config.js
index f12d3159..f91c7d41 100644
--- a/config/webpackDevServer.config.js
+++ b/config/webpackDevServer.config.js
@@ -1,4 +1,3 @@
-'use strict';
 
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
@@ -11,6 +10,7 @@ const host = process.env.HOST || '0.0.0.0';
 
 module.exports = function(proxy, allowedHost) {
   return {
+
     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
     // websites from potentially accessing local content through DNS rebinding:
     // https://github.com/webpack/webpack-dev-server/issues/887
@@ -29,11 +29,14 @@ module.exports = function(proxy, allowedHost) {
     // really know what you're doing with a special environment variable.
     disableHostCheck:
       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+
     // Enable gzip compression of generated files.
     compress: true,
+
     // Silence WebpackDevServer's own logs since they're generally not useful.
     // It will still show compile warnings and errors with this setting.
     clientLogLevel: 'none',
+
     // By default WebpackDevServer serves physical files from current directory
     // in addition to all the virtual build products that it serves from memory.
     // This is confusing because those files won’t automatically be available in
@@ -49,20 +52,25 @@ module.exports = function(proxy, allowedHost) {
     // for some reason broken when imported through Webpack. If you just want to
     // use an image, put it in `src` and `import` it from JavaScript instead.
     contentBase: paths.appPublic,
+
     // By default files from `contentBase` will not trigger a page reload.
     watchContentBase: true,
+
     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
     // for the WebpackDevServer client so it can learn when the files were
     // updated. The WebpackDevServer client is included as an entry point
     // in the Webpack development configuration. Note that only changes
     // to CSS are currently hot reloaded. JS changes will refresh the browser.
     hot: true,
+
     // It is important to tell WebpackDevServer to use the same "root" path
     // as we specified in the config. In development, we always serve from /.
     publicPath: config.output.publicPath,
+
     // WebpackDevServer is noisy by default so we emit custom message instead
     // by listening to the compiler events with `compiler.plugin` calls above.
     quiet: true,
+
     // Reportedly, this avoids CPU overload on some systems.
     // https://github.com/facebookincubator/create-react-app/issues/293
     // src/node_modules is not ignored to support absolute imports
@@ -70,11 +78,13 @@ module.exports = function(proxy, allowedHost) {
     watchOptions: {
       ignored: ignoredFiles(paths.appSrc),
     },
+
     // Enable HTTPS if the HTTPS environment variable is set to 'true'
     https: protocol === 'https',
-    host: host,
+    host,
     overlay: false,
     historyApiFallback: {
+
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebookincubator/create-react-app/issues/387.
       disableDotRule: true,
@@ -84,6 +94,7 @@ module.exports = function(proxy, allowedHost) {
     before(app) {
       // This lets us open files from the runtime error overlay.
       app.use(errorOverlayMiddleware());
+
       // This service worker file is effectively a 'no-op' that will reset any
       // previous service worker registered for the same host:port combination.
       // We do this in development to avoid hitting the production cache if
diff --git a/package.json b/package.json
index dd044c0b..d1fafd62 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "private": false,
   "scripts": {
     "lint": "yarn lint:js && yarn lint:css",
-    "lint:js": "eslint src test scripts",
+    "lint:js": "eslint src test scripts config",
     "lint:js:fix": "yarn lint:js --fix",
     "lint:css": "stylelint src/**/*.scss",
     "lint:css:fix": "yarn lint:css --fix",

From d6882ff8c566be75b8b155bd0dce708d97e76067 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 26 Aug 2018 10:30:20 +0200
Subject: [PATCH 58/66] Moved eslint config from package.json to .eslintrc

---
 .eslintrc    | 39 +++++++++++++++++++++++++++++++++++++++
 package.json | 43 ++-----------------------------------------
 2 files changed, 41 insertions(+), 41 deletions(-)
 create mode 100644 .eslintrc

diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 00000000..5aa91eab
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,39 @@
+{
+  "extends": [
+    "adidas-env/browser",
+    "adidas-env/module",
+    "adidas-es6",
+    "adidas-babel",
+    "adidas-react"
+  ],
+  "plugins": ["jest"],
+  "env": {
+    "jest/globals": true
+  },
+  "globals": {
+    "process": true,
+    "setImmediate": true
+  },
+  "settings": {
+    "react": {
+      "version": "16.3"
+    }
+  },
+  "rules": {
+    "comma-dangle": ["error", "always-multiline"],
+    "no-invalid-this": "off",
+    "template-curly-spacing": ["error", "never"],
+    "no-warning-comments": "off",
+    "no-undefined": "off",
+    "indent": ["error", 2, {
+      "SwitchCase": 1
+    }
+    ],
+    "react/jsx-curly-spacing": ["error", "never"],
+    "react/jsx-indent-props": ["error", 2],
+    "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"
+  }
+}
diff --git a/package.json b/package.json
index d1fafd62..7d495c1f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "shlink-web-client-react",
-  "description": "A React-based web client for shlink",
-  "version": "0.1.0",
+  "description": "A React-based progressive web application for shlink",
+  "version": "1.0.0",
   "private": false,
   "scripts": {
     "lint": "yarn lint:js && yarn lint:css",
@@ -140,44 +140,5 @@
     "presets": [
       "react-app"
     ]
-  },
-  "eslintConfig": {
-    "extends": [
-      "adidas-env/browser",
-      "adidas-env/module",
-      "adidas-es6",
-      "adidas-babel",
-      "adidas-react"
-    ],
-    "plugins": ["jest"],
-    "env": {
-      "jest/globals": true
-    },
-    "globals": {
-      "process": true,
-      "setImmediate": true
-    },
-    "rules": {
-      "comma-dangle": ["error", "always-multiline"],
-      "no-invalid-this": "off",
-      "template-curly-spacing": ["error", "never"],
-      "no-warning-comments": "off",
-      "no-undefined": "off",
-      "indent": ["error", 2, {
-        "SwitchCase": 1
-      }
-      ],
-      "react/jsx-curly-spacing": ["error", "never"],
-      "react/jsx-indent-props": ["error", 2],
-      "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"
-    },
-    "settings": {
-      "react": {
-        "version": "16.3"
-      }
-    }
   }
 }

From 6568487bca12d5dba842866fe410b6762ac28a2f Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 26 Aug 2018 10:40:03 +0200
Subject: [PATCH 59/66] Specified node version in scrutinizer config

---
 .scrutinizer.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.scrutinizer.yml b/.scrutinizer.yml
index 87fda201..3d6be607 100644
--- a/.scrutinizer.yml
+++ b/.scrutinizer.yml
@@ -1,2 +1,5 @@
+build:
+  environment:
+    node: v10.4.1
 tools:
   external_code_coverage: true

From c0e116b17bc7f6a9006ade9ab53ad5007e2f1369 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 26 Aug 2018 10:49:23 +0200
Subject: [PATCH 60/66] Disabled specific eslint rules in small blocks

---
 src/servers/reducers/selectedServer.js            | 7 ++++---
 src/short-urls/reducers/shortUrlCreationResult.js | 2 ++
 src/short-urls/reducers/shortUrlTags.js           | 6 ++----
 src/short-urls/reducers/shortUrlVisits.js         | 2 ++
 src/short-urls/reducers/shortUrlsList.js          | 3 ++-
 src/tags/reducers/tagDelete.js                    | 3 ++-
 src/tags/reducers/tagEdit.js                      | 2 ++
 src/tags/reducers/tagsList.js                     | 2 ++
 8 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/servers/reducers/selectedServer.js b/src/servers/reducers/selectedServer.js
index aec65e58..891f5ce2 100644
--- a/src/servers/reducers/selectedServer.js
+++ b/src/servers/reducers/selectedServer.js
@@ -3,11 +3,12 @@ import shlinkApiClient from '../../api/ShlinkApiClient';
 import serversService from '../../servers/services/ServersService';
 import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListParams';
 
-const defaultState = null;
-
+/* eslint-disable padding-line-between-statements, newline-after-var */
 export const SELECT_SERVER = 'shlink/selectedServer/SELECT_SERVER';
-
 export const RESET_SELECTED_SERVER = 'shlink/selectedServer/RESET_SELECTED_SERVER';
+/* eslint-enable padding-line-between-statements, newline-after-var */
+
+const defaultState = null;
 
 export default function reducer(state = defaultState, action) {
   switch (action.type) {
diff --git a/src/short-urls/reducers/shortUrlCreationResult.js b/src/short-urls/reducers/shortUrlCreationResult.js
index 4e974cfc..a70f32a4 100644
--- a/src/short-urls/reducers/shortUrlCreationResult.js
+++ b/src/short-urls/reducers/shortUrlCreationResult.js
@@ -2,10 +2,12 @@ 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';
+/* eslint-enable padding-line-between-statements, newline-after-var */
 
 export const createShortUrlResultType = {
   result: PropTypes.shape({
diff --git a/src/short-urls/reducers/shortUrlTags.js b/src/short-urls/reducers/shortUrlTags.js
index 9502edfe..a24fb7ee 100644
--- a/src/short-urls/reducers/shortUrlTags.js
+++ b/src/short-urls/reducers/shortUrlTags.js
@@ -2,15 +2,13 @@ import { curry } from 'ramda';
 import PropTypes from 'prop-types';
 import shlinkApiClient from '../../api/ShlinkApiClient';
 
+/* eslint-disable padding-line-between-statements, newline-after-var */
 export const EDIT_SHORT_URL_TAGS_START = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_START';
-
 export const EDIT_SHORT_URL_TAGS_ERROR = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_ERROR';
-
 export const EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS';
-
 export const RESET_EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/RESET_EDIT_SHORT_URL_TAGS';
-
 export const SHORT_URL_TAGS_EDITED = 'shlink/shortUrlTags/SHORT_URL_TAGS_EDITED';
+/* eslint-enable padding-line-between-statements, newline-after-var */
 
 export const shortUrlTagsType = PropTypes.shape({
   shortCode: PropTypes.string,
diff --git a/src/short-urls/reducers/shortUrlVisits.js b/src/short-urls/reducers/shortUrlVisits.js
index 38281e38..b03ee9f7 100644
--- a/src/short-urls/reducers/shortUrlVisits.js
+++ b/src/short-urls/reducers/shortUrlVisits.js
@@ -3,9 +3,11 @@ 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 = {
   shortUrl: shortUrlType,
diff --git a/src/short-urls/reducers/shortUrlsList.js b/src/short-urls/reducers/shortUrlsList.js
index 9925357a..1a66bd4e 100644
--- a/src/short-urls/reducers/shortUrlsList.js
+++ b/src/short-urls/reducers/shortUrlsList.js
@@ -3,10 +3,11 @@ import PropTypes from 'prop-types';
 import shlinkApiClient from '../../api/ShlinkApiClient';
 import { SHORT_URL_TAGS_EDITED } from './shortUrlTags';
 
+/* 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 = 'shlink/shortUrlsList/LIST_SHORT_URLS';
+/* eslint-enable padding-line-between-statements, newline-after-var */
 
 export const shortUrlType = PropTypes.shape({
   tags: PropTypes.arrayOf(PropTypes.string),
diff --git a/src/tags/reducers/tagDelete.js b/src/tags/reducers/tagDelete.js
index 379476c8..4e2f40b6 100644
--- a/src/tags/reducers/tagDelete.js
+++ b/src/tags/reducers/tagDelete.js
@@ -2,11 +2,12 @@ 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 TAG_DELETED = 'shlink/deleteTag/TAG_DELETED';
+/* eslint-enable padding-line-between-statements, newline-after-var */
 
 export const tagDeleteType = PropTypes.shape({
   deleting: PropTypes.bool,
diff --git a/src/tags/reducers/tagEdit.js b/src/tags/reducers/tagEdit.js
index 0c97ea1a..a69184e0 100644
--- a/src/tags/reducers/tagEdit.js
+++ b/src/tags/reducers/tagEdit.js
@@ -2,9 +2,11 @@ import { curry, pick } from 'ramda';
 import shlinkApiClient from '../../api/ShlinkApiClient';
 import colorGenerator from '../../utils/ColorGenerator';
 
+/* 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';
+/* eslint-enable padding-line-between-statements, newline-after-var */
 
 export const TAG_EDITED = 'shlink/editTag/TAG_EDITED';
 
diff --git a/src/tags/reducers/tagsList.js b/src/tags/reducers/tagsList.js
index b16ceda4..c9309914 100644
--- a/src/tags/reducers/tagsList.js
+++ b/src/tags/reducers/tagsList.js
@@ -3,10 +3,12 @@ import shlinkApiClient from '../../api/ShlinkApiClient';
 import { TAG_DELETED } from './tagDelete';
 import { TAG_EDITED } from './tagEdit';
 
+/* eslint-disable padding-line-between-statements, newline-after-var */
 const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
 const LIST_TAGS_ERROR = 'shlink/tagsList/LIST_TAGS_ERROR';
 const LIST_TAGS = 'shlink/tagsList/LIST_TAGS';
 const FILTER_TAGS = 'shlink/tagsList/FILTER_TAGS';
+/* eslint-enable padding-line-between-statements, newline-after-var */
 
 const defaultState = {
   tags: [],

From 3569202a6284e9d394be217ca62ca06c0ab9cea6 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 26 Aug 2018 10:52:45 +0200
Subject: [PATCH 61/66] Fixed typo

---
 src/tags/reducers/tagDelete.js                       |  2 +-
 test/servers/reducers/selectedServer.test.js         | 10 +++++-----
 test/servers/reducers/server.test.js                 |  8 ++++----
 test/short-urls/reducers/shortUrlsListParams.test.js | 10 +++++-----
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/tags/reducers/tagDelete.js b/src/tags/reducers/tagDelete.js
index 4e2f40b6..3b70f460 100644
--- a/src/tags/reducers/tagDelete.js
+++ b/src/tags/reducers/tagDelete.js
@@ -19,7 +19,7 @@ const defaultState = {
   error: false,
 };
 
-export default function reduce(state = defaultState, action) {
+export default function reducer(state = defaultState, action) {
   switch (action.type) {
     case DELETE_TAG_START:
       return {
diff --git a/test/servers/reducers/selectedServer.test.js b/test/servers/reducers/selectedServer.test.js
index 74ea4b99..e8cf174f 100644
--- a/test/servers/reducers/selectedServer.test.js
+++ b/test/servers/reducers/selectedServer.test.js
@@ -1,5 +1,5 @@
 import * as sinon from 'sinon';
-import reduce, {
+import reducer, {
   _selectServer,
   RESET_SELECTED_SERVER,
   resetSelectedServer,
@@ -8,17 +8,17 @@ import reduce, {
 import { RESET_SHORT_URL_PARAMS } from '../../../src/short-urls/reducers/shortUrlsListParams';
 
 describe('selectedServerReducer', () => {
-  describe('reduce', () => {
+  describe('reducer', () => {
     it('returns default when action is not handled', () =>
-      expect(reduce(null, { type: 'unknown' })).toEqual(null));
+      expect(reducer(null, { type: 'unknown' })).toEqual(null));
 
     it('returns default when action is RESET_SELECTED_SERVER', () =>
-      expect(reduce(null, { type: RESET_SELECTED_SERVER })).toEqual(null));
+      expect(reducer(null, { type: RESET_SELECTED_SERVER })).toEqual(null));
 
     it('returns selected server when action is SELECT_SERVER', () => {
       const selectedServer = { id: 'abc123' };
 
-      expect(reduce(null, { type: SELECT_SERVER, selectedServer })).toEqual(selectedServer);
+      expect(reducer(null, { type: SELECT_SERVER, selectedServer })).toEqual(selectedServer);
     });
   });
 
diff --git a/test/servers/reducers/server.test.js b/test/servers/reducers/server.test.js
index b015603e..2449aba4 100644
--- a/test/servers/reducers/server.test.js
+++ b/test/servers/reducers/server.test.js
@@ -1,6 +1,6 @@
 import * as sinon from 'sinon';
 import { values } from 'ramda';
-import reduce, {
+import reducer, {
   _createServer,
   _deleteServer,
   _listServers,
@@ -20,12 +20,12 @@ describe('serverReducer', () => {
     createServers: sinon.fake(),
   };
 
-  describe('reduce', () => {
+  describe('reducer', () => {
     it('returns servers when action is FETCH_SERVERS', () =>
-      expect(reduce({}, { type: FETCH_SERVERS, servers })).toEqual(servers));
+      expect(reducer({}, { type: FETCH_SERVERS, servers })).toEqual(servers));
 
     it('returns default when action is unknown', () =>
-      expect(reduce({}, { type: 'unknown' })).toEqual({}));
+      expect(reducer({}, { type: 'unknown' })).toEqual({}));
   });
 
   describe('action creators', () => {
diff --git a/test/short-urls/reducers/shortUrlsListParams.test.js b/test/short-urls/reducers/shortUrlsListParams.test.js
index 89b43aec..848691bc 100644
--- a/test/short-urls/reducers/shortUrlsListParams.test.js
+++ b/test/short-urls/reducers/shortUrlsListParams.test.js
@@ -1,24 +1,24 @@
-import reduce, {
+import reducer, {
   RESET_SHORT_URL_PARAMS,
   resetShortUrlParams,
 } from '../../../src/short-urls/reducers/shortUrlsListParams';
 import { LIST_SHORT_URLS } from '../../../src/short-urls/reducers/shortUrlsList';
 
 describe('shortUrlsListParamsReducer', () => {
-  describe('reducer', () => {
+  describe('reducerr', () => {
     const defaultState = { page: '1' };
 
     it('returns default value when action is unknown', () =>
-      expect(reduce(defaultState, { type: 'unknown' })).toEqual(defaultState));
+      expect(reducer(defaultState, { type: 'unknown' })).toEqual(defaultState));
 
     it('returns params when action is LIST_SHORT_URLS', () =>
-      expect(reduce(defaultState, { type: LIST_SHORT_URLS, params: { searchTerm: 'foo' } })).toEqual({
+      expect(reducer(defaultState, { type: LIST_SHORT_URLS, params: { searchTerm: 'foo' } })).toEqual({
         ...defaultState,
         searchTerm: 'foo',
       }));
 
     it('returns default value when action is RESET_SHORT_URL_PARAMS', () =>
-      expect(reduce(defaultState, { type: RESET_SHORT_URL_PARAMS })).toEqual(defaultState));
+      expect(reducer(defaultState, { type: RESET_SHORT_URL_PARAMS })).toEqual(defaultState));
   });
 
   describe('resetShortUrlParams', () => {

From 2fdc7a0ff08955c99f467245e7b5e7a635540faa Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 26 Aug 2018 19:19:45 +0200
Subject: [PATCH 62/66] Fixed shape types not properly defined as shapes but as
 plane objects

---
 src/short-urls/reducers/shortUrlCreationResult.js | 4 ++--
 src/short-urls/reducers/shortUrlVisits.js         | 4 ++--
 src/short-urls/reducers/shortUrlsListParams.js    | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/short-urls/reducers/shortUrlCreationResult.js b/src/short-urls/reducers/shortUrlCreationResult.js
index a70f32a4..ccb4f01c 100644
--- a/src/short-urls/reducers/shortUrlCreationResult.js
+++ b/src/short-urls/reducers/shortUrlCreationResult.js
@@ -9,13 +9,13 @@ const CREATE_SHORT_URL = 'shlink/createShortUrl/CREATE_SHORT_URL';
 const RESET_CREATE_SHORT_URL = 'shlink/createShortUrl/RESET_CREATE_SHORT_URL';
 /* eslint-enable padding-line-between-statements, newline-after-var */
 
-export const createShortUrlResultType = {
+export const createShortUrlResultType = PropTypes.shape({
   result: PropTypes.shape({
     shortUrl: PropTypes.string,
   }),
   saving: PropTypes.bool,
   error: PropTypes.bool,
-};
+});
 
 const defaultState = {
   result: null,
diff --git a/src/short-urls/reducers/shortUrlVisits.js b/src/short-urls/reducers/shortUrlVisits.js
index b03ee9f7..65db1162 100644
--- a/src/short-urls/reducers/shortUrlVisits.js
+++ b/src/short-urls/reducers/shortUrlVisits.js
@@ -9,12 +9,12 @@ const GET_SHORT_URL_VISITS_ERROR = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_E
 const GET_SHORT_URL_VISITS = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS';
 /* eslint-enable padding-line-between-statements, newline-after-var */
 
-export const shortUrlVisitsType = {
+export const shortUrlVisitsType = PropTypes.shape({
   shortUrl: shortUrlType,
   visits: PropTypes.array,
   loading: PropTypes.bool,
   error: PropTypes.bool,
-};
+});
 
 const initialState = {
   shortUrl: {},
diff --git a/src/short-urls/reducers/shortUrlsListParams.js b/src/short-urls/reducers/shortUrlsListParams.js
index 7e5cfd6e..ef8de0b6 100644
--- a/src/short-urls/reducers/shortUrlsListParams.js
+++ b/src/short-urls/reducers/shortUrlsListParams.js
@@ -3,11 +3,11 @@ import { LIST_SHORT_URLS } from './shortUrlsList';
 
 export const RESET_SHORT_URL_PARAMS = 'shlink/shortUrlsListParams/RESET_SHORT_URL_PARAMS';
 
-export const shortUrlsListParamsType = {
+export const shortUrlsListParamsType = PropTypes.shape({
   page: PropTypes.string,
   tags: PropTypes.arrayOf(PropTypes.string),
   searchTerm: PropTypes.string,
-};
+});
 
 const defaultState = { page: '1' };
 

From 933de6e2c56c268cf7b6b56882f736232ffdd369 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 26 Aug 2018 19:30:56 +0200
Subject: [PATCH 63/66] Fixed event handlers not properly called

---
 .eslintrc                               | 1 +
 src/short-urls/helpers/EditTagsModal.js | 4 ++--
 src/tags/helpers/EditTagModal.js        | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 5aa91eab..8839bdef 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -22,6 +22,7 @@
   "rules": {
     "comma-dangle": ["error", "always-multiline"],
     "no-invalid-this": "off",
+    "no-console": "warn",
     "template-curly-spacing": ["error", "never"],
     "no-warning-comments": "off",
     "no-undefined": "off",
diff --git a/src/short-urls/helpers/EditTagsModal.js b/src/short-urls/helpers/EditTagsModal.js
index 8eda0b9c..0a8e95d0 100644
--- a/src/short-urls/helpers/EditTagsModal.js
+++ b/src/short-urls/helpers/EditTagsModal.js
@@ -62,7 +62,7 @@ export class EditTagsModalComponent extends React.Component {
     const { isOpen, toggle, url, shortUrlTags } = this.props;
 
     return (
-      <Modal isOpen={isOpen} toggle={toggle} centered onClosed={() => this.refreshShortUrls}>
+      <Modal isOpen={isOpen} toggle={toggle} centered onClosed={() => this.refreshShortUrls()}>
         <ModalHeader toggle={toggle}>
           Edit tags for <ExternalLink href={url}>{url}</ExternalLink>
         </ModalHeader>
@@ -80,7 +80,7 @@ export class EditTagsModalComponent extends React.Component {
             className="btn btn-primary"
             type="button"
             disabled={shortUrlTags.saving}
-            onClick={() => this.saveTags}
+            onClick={() => this.saveTags()}
           >
             {shortUrlTags.saving ? 'Saving tags...' : 'Save tags'}
           </button>
diff --git a/src/tags/helpers/EditTagModal.js b/src/tags/helpers/EditTagModal.js
index 5c12d67b..defbef5d 100644
--- a/src/tags/helpers/EditTagModal.js
+++ b/src/tags/helpers/EditTagModal.js
@@ -74,7 +74,7 @@ export class EditTagModalComponent extends React.Component {
 
     return (
       <Modal isOpen={isOpen} toggle={toggle} centered onClosed={this.handleOnClosed}>
-        <form onSubmit={() => this.saveTag()}>
+        <form onSubmit={(e) => this.saveTag(e)}>
           <ModalHeader toggle={toggle}>Edit tag</ModalHeader>
           <ModalBody>
             <div className="input-group">

From 3d39fa724c6f941a7431a4295f45404b5a84ad61 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 26 Aug 2018 19:48:21 +0200
Subject: [PATCH 64/66] Created App test

---
 src/utils/Storage.js | 12 ++++++++++--
 test/App.test.js     | 26 ++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 test/App.test.js

diff --git a/src/utils/Storage.js b/src/utils/Storage.js
index f7ba7d88..22a52632 100644
--- a/src/utils/Storage.js
+++ b/src/utils/Storage.js
@@ -15,6 +15,14 @@ export class Storage {
   set = (key, value) => this.localStorage.setItem(buildPath(key), JSON.stringify(value));
 }
 
-const storage = typeof localStorage !== 'undefined' ? localStorage : {};
+const browserStorage = global.localStorage || {
+  getItem() {
+    return '';
+  },
+  setItem() {
+    return '';
+  },
+};
+const storage = new Storage(browserStorage);
 
-export default new Storage(storage);
+export default storage;
diff --git a/test/App.test.js b/test/App.test.js
new file mode 100644
index 00000000..2121f547
--- /dev/null
+++ b/test/App.test.js
@@ -0,0 +1,26 @@
+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';
+
+describe('<App />', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<App />);
+  });
+  afterEach(() => wrapper.unmount());
+
+  it('renders a header', () => expect(wrapper.find(MainHeader)).toHaveLength(1));
+
+  it('renders app main routes', () => {
+    const routes = wrapper.find(Route);
+    const expectedRoutesCount = 3;
+
+    expect(routes).toHaveLength(expectedRoutesCount);
+    expect(routes.at(0).prop('path')).toEqual('/server/create');
+    expect(routes.at(1).prop('path')).toEqual('/');
+    expect(routes.at(2).prop('path')).toEqual('/server/:serverId');
+  });
+});

From def5afc5eee7a030e400db2bbfe933f3c61fd5aa Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 26 Aug 2018 20:07:55 +0200
Subject: [PATCH 65/66] Added version 1 to changelog

---
 CHANGELOG.md | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ed8c3c2b..748a8ca1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,44 @@
 # CHANGELOG
 
+## 1.0.0 - 2018-08-26
+
+#### Added
+
+* [#4](https://github.com/shlinkio/shlink-web-client/issues/4) Now it is possible to export and import servers.
+
+    * 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.
+
+    * List existing tags, and filter the list.
+    * Change their name and color.
+    * Jump to URLs list filtering by one tag.
+
+* [#5](https://github.com/shlinkio/shlink-web-client/issues/5) Tags for existing URLs can be edited now.
+* [#24](https://github.com/shlinkio/shlink-web-client/issues/24) Improved left menu in mobile devices, which is now a swipeable sidebar instead of a stacked top bar.
+* [#22](https://github.com/shlinkio/shlink-web-client/issues/22) Improved code coverage.
+* [#28](https://github.com/shlinkio/shlink-web-client/issues/28) Added integration with [Scrutinizer](https://scrutinizer-ci.com/g/shlinkio/shlink-web-client/).
+
+#### Changed
+
+* [#33](https://github.com/shlinkio/shlink-web-client/issues/33) Changed to [adidas coding style](https://github.com/adidas/js-linter-configs) for Javascript.
+* [#32](https://github.com/shlinkio/shlink-web-client/issues/32) Changed to [adidas coding style](https://github.com/adidas/js-linter-configs) for stylesheets.
+* [#26](https://github.com/shlinkio/shlink-web-client/issues/26) The tags input now displays tags using their actual color.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* *Nothing*
+
+
 ## 0.2.0 - 2018-08-12
 
 #### Added

From e5986ac6cf9c460023fea4386763c2b0f645998c Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 26 Aug 2018 20:17:40 +0200
Subject: [PATCH 66/66] Fixed coding styles

---
 test/App.test.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/test/App.test.js b/test/App.test.js
index 2121f547..63b6cdc8 100644
--- a/test/App.test.js
+++ b/test/App.test.js
@@ -17,10 +17,11 @@ describe('<App />', () => {
   it('renders app main routes', () => {
     const routes = wrapper.find(Route);
     const expectedRoutesCount = 3;
+    const second = 2;
 
     expect(routes).toHaveLength(expectedRoutesCount);
     expect(routes.at(0).prop('path')).toEqual('/server/create');
     expect(routes.at(1).prop('path')).toEqual('/');
-    expect(routes.at(2).prop('path')).toEqual('/server/:serverId');
+    expect(routes.at(second).prop('path')).toEqual('/server/:serverId');
   });
 });