Merge pull request #25 from acelaya/feature/1.0.0

Feature/1.0.0

.eslintrc

@@ -0,0 +1,40 @@
+{
+  "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",
+    "no-console": "warn",
+    "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"
+  }
+}

.scrutinizer.yml

@@ -0,0 +1,5 @@
+build:
+  environment:
+    node: v10.4.1
+tools:
+  external_code_coverage: true

.stylelintrc

@@ -0,0 +1,11 @@
+{
+  "extends": [
+    "stylelint-config-adidas",
+    "stylelint-config-adidas-bem",
+    "stylelint-config-recommended-scss"
+  ],
+  "syntax": "scss",
+  "plugins": [
+    "stylelint-scss"
+  ]
+}

.travis.yml

@@ -12,8 +12,11 @@ install:
   - yarn install
 
 script:
-  # - yarn inspect
+  - yarn lint
-  - yarn test
+  - yarn test:ci
   - yarn build # Make sure the app can be built without errors
 
+after_script:
+  - yarn ocular coverage/clover.xml
+
 sudo: false

CHANGELOG.md

@@ -1,5 +1,70 @@
 # 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
+
+* [#12](https://github.com/shlinkio/shlink-web-client/issues/12) Improved code coverage
+* [#20](https://github.com/shlinkio/shlink-web-client/issues/20) Added servers list in welcome page, as well as added link to create one when none exist.
+
+#### Changed
+
+* [#11](https://github.com/shlinkio/shlink-web-client/issues/11) Improved app icons fro progressive web apps.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#19](https://github.com/shlinkio/shlink-web-client/issues/19) Added workaround in tags input so that it is possible to add tags on Android devices.
+* [#17](https://github.com/shlinkio/shlink-web-client/issues/17) Fixed short URLs list not being sortable in mobile resolutions.
+* [#13](https://github.com/shlinkio/shlink-web-client/issues/13) Improved visits page on mobile resolutions.
+
+
 ## 0.1.1 - 2018-08-06
 
 #### Added

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

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))
+  .filter((folder) => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, 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;
     }, {}),
   };

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

config/jest/fileTransform.js

@@ -1,4 +1,3 @@
-'use strict';
 
 const path = require('path');
 

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);
 }
 

config/polyfills.js

@@ -1,4 +1,3 @@
-'use strict';
 
 if (typeof Promise === 'undefined') {
   // Rejection tracking prevents a common issue where React gets into an

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

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

config/webpackDevServer.config.js

@@ -1,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

docker-compose.yml

@@ -10,3 +10,4 @@ services:
     ports:
       - "3000:3000"
       - "56745:56745"
+      - "5000:5000"

package.json

@@ -1,12 +1,19 @@
 {
   "name": "shlink-web-client-react",
-  "description": "A React-based web client for shlink",
+  "description": "A React-based progressive web application for shlink",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": false,
   "scripts": {
+    "lint": "yarn lint:js && yarn lint:css",
+    "lint:js": "eslint src test scripts config",
+    "lint:js:fix": "yarn lint:js --fix",
+    "lint:css": "stylelint src/**/*.scss",
+    "lint:css:fix": "yarn lint:css --fix",
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
-    "test": "node scripts/test.js --env=jsdom"
+    "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",
@@ -16,19 +23,24 @@
     "axios": "^0.18.0",
     "bootstrap": "^4.1.1",
     "chart.js": "^2.7.2",
+    "classnames": "^2.2.6",
+    "csvjson": "^5.1.0",
     "moment": "^2.22.2",
     "promise": "8.0.1",
+    "prop-types": "^15.6.2",
     "qs": "^6.5.2",
     "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",
     "react-moment": "^0.7.6",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.2.2",
-    "react-tag-autocomplete": "^5.5.1",
+    "react-swipeable": "^4.3.0",
+    "react-tagsinput": "^3.19.0",
     "reactstrap": "^6.0.1",
     "redux": "^4.0.0",
     "redux-thunk": "^2.3.0",
@@ -40,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",
@@ -50,13 +62,16 @@
     "dotenv-expand": "4.2.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "4.10.0",
+    "eslint": "^5.4.0",
-    "eslint-config-react-app": "^2.1.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-import": "2.8.0",
+    "eslint-plugin-jest": "^21.22.0",
-    "eslint-plugin-jsx-a11y": "5.1.1",
+    "eslint-plugin-promise": "^3.0.0",
-    "eslint-plugin-react": "7.4.0",
+    "eslint-plugin-react": "^7.4.0",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "1.1.5",
     "fs-extra": "3.0.1",
@@ -64,13 +79,21 @@
     "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",
     "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",
+    "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",
@@ -79,6 +102,7 @@
     "whatwg-fetch": "2.0.3"
   },
   "jest": {
+    "coverageDirectory": "<rootDir>/coverage",
     "collectCoverageFrom": [
       "src/**/*.{js,jsx,mjs}"
     ],
@@ -116,8 +140,5 @@
     "presets": [
       "react-app"
     ]
-  },
-  "eslintConfig": {
-    "extends": "react-app"
   }
 }

public/manifest.json

@@ -1,35 +1,45 @@
 {
   "short_name": "Shlink",
-  "name": "Shlink web client",
+  "name": "Shlink",
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#4696e5",
+  "background_color": "#4696e5",
   "icons": [
     {
-      "src": "./icons/shlink-128.png",
+      "src": "./icons/icon-72x72.png",
+      "type": "image/png",
+      "sizes": "72x72"
+    },
+    {
+      "src": "./icons/icon-96x96.png",
+      "type": "image/png",
+      "sizes": "96x96"
+    },
+    {
+      "src": "./icons/icon-128x128.png",
       "type": "image/png",
       "sizes": "128x128"
     },
     {
-      "src": "./icons/shlink-64.png",
+      "src": "./icons/icon-144x144.png",
       "type": "image/png",
-      "sizes": "64x64"
+      "sizes": "144x144"
     },
     {
-      "src": "./icons/shlink-32.png",
+      "src": "./icons/icon-152x152.png",
       "type": "image/png",
-      "sizes": "32x32"
+      "sizes": "152x152"
     },
     {
-      "src": "./icons/shlink-24.png",
+      "src": "./icons/icon-192x192.png",
       "type": "image/png",
-      "sizes": "24x24"
+      "sizes": "192x192"
     },
     {
-      "src": "./icons/shlink-16.png",
+      "src": "./icons/icon-384x384.png",
       "type": "image/png",
-      "sizes": "16x16"
+      "sizes": "384x384"
     }
-  ],
+  ]
-  "start_url": "/",
-  "display": "standalone",
-  "theme_color": "#4696e5",
-  "background_color": "#4696e5"
 }

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 =
+const { measureFileSizesBeforeBuild, printFileSizesAfterBuild } = FileSizeReporter;
-  FileSizeReporter.measureFileSizesBeforeBuild;
-const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 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_BUNDLE_GZIP_SIZE = 512 * 1024; // eslint-disable-line
-const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+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 ' +
+          `\nSearch for the ${
-            chalk.underline(chalk.yellow('keywords')) +
+            chalk.underline(chalk.yellow('keywords'))
-            ' to learn more about each warning.'
+          } to learn more about each warning.`
         );
         console.log(
-          'To ignore, add ' +
+          `To ignore, add ${
-            chalk.cyan('// eslint-disable-next-line') +
+            chalk.cyan('// eslint-disable-next-line')
-            ' to the line before.\n'
+          } 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'));

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 => {
+  .then((port) => {
-    if (port == null) {
+    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) {
+    [ 'SIGINT', 'SIGTERM' ].forEach((sig) => {
-      process.on(sig, function() {
+      process.on(sig, () => {
         devServer.close();
         process.exit();
       });
     });
   })
-  .catch(err => {
+  .catch((err) => {
     if (err && err.message) {
       console.log(err.message);
     }
+
     process.exit(1);
   });

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);

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 {
+export default function App() {
-  render() {
+  return (
-    return (
+    <div className="container-fluid app-container">
-      <div className="container-fluid">
+      <MainHeader />
-        <MainHeader/>
 
-        <div className="app">
+      <div className="app">
-          <Switch>
+        <Switch>
-            <Route exact path="/server/create" component={CreateServer} />
+          <Route exact path="/server/create" component={CreateServer} />
-            <Route exact path="/" component={Home} />
+          <Route exact path="/" component={Home} />
-            <Route path="/server/:serverId" component={MenuLayout} />
+          <Route path="/server/:serverId" component={MenuLayout} />
-          </Switch>
+        </Switch>
-        </div>
       </div>
-    );
+    </div>
-  }
+  );
 }

src/App.scss

@@ -1,5 +1,10 @@
 @import './utils/base';
 
+.app-container {
+  height: 100%;
+}
+
 .app {
   padding-top: $headerHeight;
+  height: 100%;
 }

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,27 +23,48 @@ export class ShlinkApiClient {
 
   listShortUrls = (options = {}) =>
     this._performRequest('/short-codes', 'GET', options)
-      .then(resp => resp.data.shortUrls)
+      .then((resp) => resp.data.shortUrls)
-      .catch(e => this._handleAuthError(e, this.listShortUrls, [options]));
+      .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)
+      .then((resp) => resp.data)
-      .catch(e => this._handleAuthError(e, this.createShortUrl, [filteredOptions]));
+      .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)
+      .then((resp) => resp.data.visits.data)
-      .catch(e => this._handleAuthError(e, this.getShortUrlVisits, [shortCode, dates]));
+      .catch((e) => this._handleAuthError(e, this.getShortUrlVisits, [ shortCode, dates ]));
 
-  getShortUrl = shortCode =>
+  getShortUrl = (shortCode) =>
     this._performRequest(`/short-codes/${shortCode}`, 'GET')
-      .then(resp => resp.data)
+      .then((resp) => resp.data)
-      .catch(e => this._handleAuthError(e, this.getShortUrl, [shortCode]));
+      .catch((e) => this._handleAuthError(e, this.getShortUrl, [ shortCode ]));
 
-  _performRequest = async (url, method = 'GET', params = {}, data = {}) => {
+  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 ]));
+
+  listTags = () =>
+    this._performRequest('/tags', 'GET')
+      .then((resp) => resp.data.tags.data)
+      .catch((e) => this._handleAuthError(e, this.listTags, []));
+
+  deleteTags = (tags) =>
+    this._performRequest('/tags', 'DELETE', { tags })
+      .then(() => ({ 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 ]));
+
+  _performRequest = async (url, method = 'GET', query = {}, body = {}) => {
     if (isEmpty(this._token)) {
       this._token = await this._authenticate();
     }
@@ -52,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,
+      params: query,
-      data,
+      data: body,
-      paramsSerializer: params => qs.stringify(params, { arrayFormat: 'brackets' })
+      paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'brackets' }),
-    }).then(resp => {
+    }).then((resp) => {
       // Save new token
       const { authorization = '' } = resp.headers;
+
       this._token = authorization.substr('Bearer '.length);
+
       return resp;
     });
   };
@@ -68,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);
     }
 
@@ -85,4 +109,6 @@ export class ShlinkApiClient {
   };
 }
 
-export default new ShlinkApiClient(axios);
+const shlinkApiClient = new ShlinkApiClient(axios);
+
+export default shlinkApiClient;

src/common/AsideMenu.js

@@ -1,27 +1,38 @@
-import listIcon from '@fortawesome/fontawesome-free-solid/faBars';
+import listIcon from '@fortawesome/fontawesome-free-solid/faList';
-import createIcon from '@fortawesome/fontawesome-free-solid/faPlus';
+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';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import DeleteServerButton from '../servers/DeleteServerButton';
 import './AsideMenu.scss';
+import { serverType } from '../servers/prop-types';
 
-export default function AsideMenu({ selectedServer, history }) {
+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 : '';
-  const isListShortUrlsActive = (match, { pathname }) => {
+  const asideClass = classnames('aside-menu', className, {
-    // FIXME. Should use the 'match' params, but they are not being properly resolved. Investigate
+    'aside-menu--hidden': !showOnMobile,
-    const serverIdFromPathname = pathname.split('/')[2];
+  });
-    return serverIdFromPathname === serverId && pathname.indexOf('list-short-urls') !== -1;
-  };
 
   return (
-    <aside className="aside-menu col-lg-2 col-md-3">
+    <aside className={asideClass}>
       <nav className="nav flex-column aside-menu__nav">
         <NavLink
           className="aside-menu__item"
           activeClassName="aside-menu__item--selected"
           to={`/server/${serverId}/list-short-urls/1`}
-          isActive={isListShortUrlsActive}
         >
           <FontAwesomeIcon icon={listIcon} />
           <span className="aside-menu__item-text">List short URLs</span>
@@ -31,16 +42,27 @@ export default function AsideMenu({ selectedServer, history }) {
           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}/manage-tags`}
+        >
+          <FontAwesomeIcon icon={tagsIcon} />
+          <span className="aside-menu__item-text">Manage tags</span>
+        </NavLink>
+
         <DeleteServerButton
           className="aside-menu__item aside-menu__item--danger"
-          history={history}
           server={selectedServer}
         />
       </nav>
     </aside>
   );
 }
+
+AsideMenu.defaultProps = defaultProps;
+AsideMenu.propTypes = propTypes;

src/common/AsideMenu.scss

@@ -1,28 +1,44 @@
 @import '../utils/base';
+@import '../utils/mixins/box-shadow';
+@import '../utils/mixins/vertical-align';
+
+$asideMenuMobileWidth: 280px;
 
 .aside-menu {
   background-color: #f7f7f7;
-  padding-top: 10px;
+  position: fixed !important;
+  padding-top: 13px;
   padding-bottom: 10px;
+  top: $headerHeight;
+  bottom: 0;
+  left: 0;
+  display: block;
+  z-index: 1010;
+  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;
+    transition: left 300ms;
+    top: $headerHeight - 3px;
+
+    @include box-shadow(-10px 0 50px 11px rgba(0, 0, 0, .55));
+  }
+}
+
+.aside-menu--hidden {
+  @media (max-width: $smMax) {
+    left: -($asideMenuMobileWidth + 35px);
+  }
 }
 
 .aside-menu__nav {
-  @media(min-width: $smMin) {
+  height: 100%;
-    height: 100%;
-  }
 }
 
 .aside-menu__item {
@@ -31,6 +47,7 @@
   text-decoration: none !important;
   cursor: pointer;
 }
+
 .aside-menu__item:hover {
   background-color: $lightHoverColor;
 }
@@ -39,6 +56,7 @@
   color: #fff;
   background-color: $mainColor;
 }
+
 .aside-menu__item--selected:hover {
   color: #fff;
   background-color: $mainColor;
@@ -53,6 +71,7 @@
   color: $dangerColor;
   margin-top: auto;
 }
+
 .aside-menu__item--danger:hover {
   color: #fff;
   background-color: $dangerColor;

src/common/DateInput.js

@@ -3,6 +3,7 @@ import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import DatePicker from 'react-datepicker';
 import './DateInput.scss';
+import { isNil } from 'ramda';
 
 export default class DateInput extends React.Component {
   constructor(props) {
@@ -11,6 +12,9 @@ export default class DateInput extends React.Component {
   }
 
   render() {
+    const { isClearable, selected } = this.props;
+    const showCalendarIcon = !isClearable || isNil(selected);
+
     return (
       <div className="date-input-container">
         <DatePicker
@@ -20,11 +24,13 @@ export default class DateInput extends React.Component {
           readOnly
           ref={this.inputRef}
         />
-        <FontAwesomeIcon
+        {showCalendarIcon && (
-          icon={calendarIcon}
+          <FontAwesomeIcon
-          className="date-input-container__icon"
+            icon={calendarIcon}
-          onClick={() => this.inputRef.current.input.focus()}
+            className="date-input-container__icon"
-        />
+            onClick={() => this.inputRef.current.input.focus()}
+          />
+        )}
       </div>
     );
   }

src/common/DateInput.scss

@@ -1,4 +1,5 @@
 @import '../utils/mixins/vertical-align';
+@import '../utils/base';
 
 .date-input-container {
   position: relative;
@@ -11,6 +12,20 @@
 
 .date-input-container__icon {
   @include vertical-align();
-  right: 15px;
+
+  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 {
+  right: .75rem;
+  line-height: 11px;
+  background-color: #333;
+  font-size: 14px;
+}

src/common/Home.js

@@ -1,21 +1,58 @@
+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 './Home.scss';
+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();
   }
 
   render() {
+    const servers = values(this.props.servers);
+    const hasServers = !isEmpty(servers);
+
     return (
-      <div className="home-container">
+      <div className="home">
-        <h1 className="home-container__title">Welcome to Shlink</h1>
+        <h1 className="home__title">Welcome to Shlink</h1>
-        <h5 className="home-container__intro">Please, select a server.</h5>
+        <h5 className="home__intro">
+          {hasServers && <span>Please, select a server.</span>}
+          {!hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
+        </h5>
+
+        {hasServers && (
+          <ListGroup className="home__servers-list">
+            {servers.map(({ name, id }) => (
+              <ListGroupItem
+                key={id}
+                tag={Link}
+                to={`/server/${id}/list-short-urls/1`}
+                className="home__servers-item"
+              >
+                {name}
+                <FontAwesomeIcon icon={chevronIcon} className="home__servers-item-icon" />
+              </ListGroupItem>
+            ))}
+          </ListGroup>
+        )}
       </div>
     );
   }
 }
 
-export default connect(null, { resetSelectedServer })(Home);
+HomeComponent.propTypes = propTypes;
+
+const Home = connect(pick([ 'servers' ]), { resetSelectedServer })(HomeComponent);
+
+export default Home;

src/common/Home.scss

@@ -1,6 +1,7 @@
 @import '../utils/base';
+@import '../utils/mixins/vertical-align';
 
-.home-container {
+.home {
   text-align: center;
   height: calc(100vh - #{$headerHeight});
   display: flex;
@@ -9,6 +10,28 @@
   flex-flow: column;
 }
 
-.home-container__title {
+.home__title {
-  font-size: 36px;
+  font-size: 1.75rem;
+
+  @media (min-width: $mdMin) {
+    font-size: 2.2rem;
+  }
+}
+
+.home__servers-list {
+  margin-top: 1rem;
+  width: 100%;
+  max-width: 400px;
+}
+
+.home__servers-item.home__servers-item {
+  text-align: left;
+  position: relative;
+  padding: .75rem 2.5rem .75rem 1rem;
+}
+
+.home__servers-item-icon {
+  @include vertical-align();
+
+  right: 1rem;
 }

src/common/MainHeader.js

@@ -1,17 +1,24 @@
 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';
 
-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,
     }));
   };
 
@@ -22,17 +29,31 @@ 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
+          <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>
+
         <Collapse navbar isOpen={this.state.isOpen}>
           <Nav navbar className="ml-auto">
             <NavItem>
-              <NavLink tag={Link} to="/server/create">
+              <NavLink
-                <FontAwesomeIcon icon={plusIcon}/>&nbsp; Add server
+                tag={Link}
+                to={createServerPath}
+                active={location.pathname === createServerPath}
+              >
+                <FontAwesomeIcon icon={plusIcon} />&nbsp; Add server
               </NavLink>
             </NavItem>
             <ServersDropdown />
@@ -43,4 +64,8 @@ export class MainHeader extends React.Component {
   }
 }
 
-export default withRouter(MainHeader);
+MainHeaderComponent.propTypes = propTypes;
+
+const MainHeader = withRouter(MainHeaderComponent);
+
+export default MainHeader;

src/common/MainHeader.scss

@@ -13,3 +13,12 @@
   width: 26px;
   margin-right: 5px;
 }
+
+.main-header__toggle-icon {
+  width: 20px;
+  transition: transform 300ms;
+}
+
+.main-header__toggle-icon--opened {
+  transform: rotate(180deg);
+}

src/common/MenuLayout.js

@@ -1,46 +1,115 @@
 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 { 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 ShortUrlsVisits from '../short-urls/ShortUrlVisits';
+import './MenuLayout.scss';
+import TagsList from '../tags/TagsList';
+import { serverType } from '../servers/prop-types';
 import AsideMenu from './AsideMenu';
-import { pick } from 'ramda';
 
-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;
+    const { match, selectServer } = this.props;
-    this.props.selectServer(serverId);
+    const { params: { serverId } } = match;
+
+    selectServer(serverId);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { location } = this.props;
+
+    // Hide sidebar when location changes
+    if (location !== prevProps.location) {
+      this.setState({ showSideBar: false });
+    }
   }
 
   render() {
+    const { selectedServer } = this.props;
+    const burgerClasses = classnames('menu-layout__burger-icon', {
+      'menu-layout__burger-icon--active': this.state.showSideBar,
+    });
+
     return (
-      <div className="row">
+      <React.Fragment>
-        <AsideMenu {...this.props} />
+        <FontAwesomeIcon
-        <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3">
+          icon={burgerIcon}
-          <Switch>
+          className={burgerClasses}
-            <Route
+          onClick={() => this.setState(({ showSideBar }) => ({ showSideBar: !showSideBar }))}
-              exact
+        />
-              path="/server/:serverId/list-short-urls/:page"
+
-              component={ShortUrls}
+        <Swipeable
+          delta={40}
+          className="menu-layout__swipeable"
+          onSwipedLeft={() => this.setState({ showSideBar: false })}
+          onSwipedRight={() => this.setState({ showSideBar: true })}
+        >
+          <div className="row menu-layout__swipeable-inner">
+            <AsideMenu
+              className="col-lg-2 col-md-3"
+              selectedServer={selectedServer}
+              showOnMobile={this.state.showSideBar}
             />
-            <Route
+            <div
-              exact
+              className="col-lg-10 offset-lg-2 col-md-9 offset-md-3"
-              path="/server/:serverId/create-short-url"
+              onClick={() => this.setState({ showSideBar: false })}
-              component={CreateShortUrl}
+            >
-            />
+              <Switch>
-            <Route
+                <Route
-              exact
+                  exact
-              path="/server/:serverId/short-code/:shortCode/visits"
+                  path="/server/:serverId/list-short-urls/:page"
-              component={ShortUrlsVisits}
+                  component={ShortUrls}
-            />
+                />
-          </Switch>
+                <Route
-        </div>
+                  exact
-      </div>
+                  path="/server/:serverId/create-short-url"
+                  component={CreateShortUrl}
+                />
+                <Route
+                  exact
+                  path="/server/:serverId/short-code/:shortCode/visits"
+                  component={ShortUrlsVisits}
+                />
+                <Route
+                  exact
+                  path="/server/:serverId/manage-tags"
+                  component={TagsList}
+                />
+              </Switch>
+            </div>
+          </div>
+        </Swipeable>
+      </React.Fragment>
     );
   }
 }
 
-export default connect(pick(['selectedServer', 'shortUrlsListParams']), { selectServer })(MenuLayout);
+MenuLayoutComponent.propTypes = propTypes;
+
+const MenuLayout = compose(
+  connect(pick([ 'selectedServer', 'shortUrlsListParams' ]), { selectServer }),
+  withRouter
+)(MenuLayoutComponent);
+
+export default MenuLayout;

src/common/MenuLayout.scss

@@ -0,0 +1,34 @@
+@import '../utils/base';
+
+.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%;
+}
+
+.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;
+}

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 = {
+ScrollToTopComponent.defaultProps = defaultProps;
-  window
+ScrollToTopComponent.propTypes = propTypes;
-};
 
-export default withRouter(ScrollToTop);
+const ScrollToTop = withRouter(ScrollToTopComponent);
+
+export default ScrollToTop;

src/common/react-tagsinput.scss

@@ -0,0 +1,49 @@
+.react-tagsinput {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: .25rem;
+  overflow: hidden;
+  min-height: 2.6rem;
+  padding: 6px 0 0 6px;
+}
+
+.react-tagsinput--focused {
+  border-color: #80bdff;
+  -webkit-box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
+  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
+  -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
+  -o-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
+}
+
+.react-tagsinput-tag {
+  font-size: 1rem;
+  background-color: #f1f1f1;
+  border-radius: 4px;
+  display: inline-block;
+  font-weight: 400;
+  margin: 0 5px 6px 0;
+  padding: 6px 8px;
+  line-height: 1;
+  color: #fff;
+}
+
+.react-tagsinput-remove {
+  cursor: pointer;
+  font-weight: bold;
+  margin-left: 8px;
+}
+
+.react-tagsinput-tag span:before {
+  content: "\2715";
+  color: #fff;
+}
+
+.react-tagsinput-input {
+  background: transparent;
+  border: 0;
+  outline: none;
+  padding: 3px 5px;
+  width: 155px;
+  margin-bottom: 6px;
+}

src/index.js

@@ -5,12 +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 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__

src/index.scss

@@ -1,5 +1,11 @@
 @import './utils/base';
 
+html,
+body,
+#root {
+  height: 100%
+}
+
 * {
   outline: none !important;
 }
@@ -15,14 +21,32 @@
 .dropdown-item {
   cursor: pointer;
 }
-.dropdown-item.active {
+.dropdown-item.active,
+.dropdown-item:active {
   @extend .bg-main;
 }
 
-.short-urls-container {
+.shlink-container {
   padding: 20px 0;
 
   @media (min-width: $mdMin) {
-    padding: 30px 30px 30px 20px;
+    padding: 30px 15px;
+  }
+}
+
+.badge-main {
+  color: #fff;
+  background-color: $mainColor;
+}
+
+.react-datepicker__input-container,
+.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;
   }
 }

src/reducers/index.js

@@ -1,11 +1,14 @@
 import { combineReducers } from 'redux';
-
 import serversReducer from '../servers/reducers/server';
 import selectedServerReducer from '../servers/reducers/selectedServer';
 import shortUrlsListReducer from '../short-urls/reducers/shortUrlsList';
 import shortUrlsListParamsReducer from '../short-urls/reducers/shortUrlsListParams';
 import shortUrlCreationResultReducer from '../short-urls/reducers/shortUrlCreationResult';
 import shortUrlVisitsReducer from '../short-urls/reducers/shortUrlVisits';
+import 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,
@@ -13,5 +16,9 @@ export default combineReducers({
   shortUrlsList: shortUrlsListReducer,
   shortUrlsListParams: shortUrlsListParamsReducer,
   shortUrlCreationResult: shortUrlCreationResultReducer,
-  shortUrlVisits: shortUrlVisitsReducer
+  shortUrlVisits: shortUrlVisitsReducer,
+  shortUrlTags: shortUrlTagsReducer,
+  tagsList: tagsListReducer,
+  tagDelete: tagDeleteReducer,
+  tagEdit: tagEditReducer,
 });

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();
     });
   }

src/servers/CreateServer.js

@@ -1,17 +1,41 @@
-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 PropTypes from 'prop-types';
+import { resetSelectedServer } from './reducers/selectedServer';
+import { createServer } from './reducers/server';
 import './CreateServer.scss';
+import ImportServersBtn from './helpers/ImportServersBtn';
 
-export class CreateServer extends React.Component {
+const SHOW_IMPORT_MSG_TIME = 4000;
+const propTypes = {
+  createServer: PropTypes.func,
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }),
+  resetSelectedServer: PropTypes.func,
+};
+
+export class CreateServerComponent extends React.Component {
   state = {
     name: '',
     url: '',
     apiKey: '',
+    serversImported: false,
+  };
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+
+    const { createServer, history: { push } } = this.props;
+    const server = pipe(
+      assoc('id', uuid()),
+      dissoc('serversImported')
+    )(this.state);
+
+    createServer(server);
+    push(`/server/${server.id}/list-short-urls/1`);
   };
 
   componentDidMount() {
@@ -19,15 +43,11 @@ export class CreateServer extends React.Component {
   }
 
   render() {
-    const submit = e => {
+    const renderInputGroup = (id, placeholder, type = 'text') => (
-      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}
@@ -35,26 +55,50 @@ 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={submit}>
+        <form onSubmit={this.handleSubmit}>
           {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>
+            <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>
+
+          {this.state.serversImported && (
+            <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 :)
+                </div>
+              </div>
+            </div>
+          )}
         </form>
       </div>
     );
   }
 }
 
-export default connect(pick(['selectedServer']), {createServer, resetSelectedServer })(CreateServer);
+CreateServerComponent.propTypes = propTypes;
+
+const CreateServer = connect(
+  pick([ 'selectedServer' ]),
+  { createServer, resetSelectedServer }
+)(CreateServerComponent);
+
+export default CreateServer;

src/servers/CreateServer.scss

@@ -12,3 +12,9 @@
     text-align: right;
   }
 }
+
+.create-server__csv-select {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+}

src/servers/DeleteServerButton.js

@@ -1,34 +1,41 @@
 import deleteIcon from '@fortawesome/fontawesome-free-solid/faMinusCircle';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
+import PropTypes from 'prop-types';
 import DeleteServerModal from './DeleteServerModal';
+import { serverType } from './prop-types';
+
+const propTypes = {
+  server: serverType,
+  className: PropTypes.string,
+};
 
 export default class DeleteServerButton extends React.Component {
   state = { isModalOpen: false };
 
   render() {
-    const { history, 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"
+          onClick={() => this.setState({ isModalOpen: true })}
         >
           <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 })}
+          toggle={() => this.setState(({ isModalOpen }) => ({ isModalOpen: !isModalOpen }))}
-          history={history}
           server={server}
           key="deleteServerModal"
         />
-      )
+      </React.Fragment>
-    ];
+    );
   }
 }
+
+DeleteServerButton.propTypes = propTypes;

src/servers/DeleteServerModal.js

@@ -1,9 +1,23 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { compose } from 'redux';
 import { deleteServer } from './reducers/server';
+import { serverType } from './prop-types';
 
-export const DeleteServerModal = ({ server, deleteServer, toggle, history, isOpen }) => {
+const propTypes = {
+  toggle: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  server: serverType,
+  deleteServer: PropTypes.func,
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }),
+};
+
+export const DeleteServerModalComponent = ({ server, toggle, isOpen, deleteServer, history }) => {
   const closeModal = () => {
     deleteServer(server);
     toggle();
@@ -11,11 +25,14 @@ export const DeleteServerModal = ({ server, deleteServer, toggle, history, isOpe
   };
 
   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>
-        <p>No data will be deleted, only the access to that server will be removed from this host. You can create it again at any moment.</p>
+        <p>
+          No data will be deleted, only the access to that server will be removed from this host.
+          You can create it again at any moment.
+        </p>
       </ModalBody>
       <ModalFooter>
         <button className="btn btn-link" onClick={toggle}>Cancel</button>
@@ -25,4 +42,11 @@ export const DeleteServerModal = ({ server, deleteServer, toggle, history, isOpe
   );
 };
 
-export default connect(null, { deleteServer })(DeleteServerModal);
+DeleteServerModalComponent.propTypes = propTypes;
+
+const DeleteServerModal = compose(
+  withRouter,
+  connect(null, { deleteServer })
+)(DeleteServerModalComponent);
+
+export default DeleteServerModal;

src/servers/ServersDropdown.js

@@ -1,32 +1,59 @@
-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';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
-
+import PropTypes from 'prop-types';
-import { listServers } from './reducers/server';
 import { selectServer } from '../servers/reducers/selectedServer';
+import serversExporter from '../servers/services/ServersExporter';
+import { listServers } from './reducers/server';
+import { serverType } from './prop-types';
 
-export class ServersDropdown extends React.Component {
+const defaultProps = {
+  serversExporter,
+};
+const propTypes = {
+  servers: PropTypes.object,
+  serversExporter: PropTypes.shape({
+    exportServers: PropTypes.func,
+  }),
+  selectedServer: serverType,
+  selectServer: PropTypes.func,
+  listServers: PropTypes.func,
+};
+
+export class ServersDropdownComponent 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 <DropdownItem disabled><i>Add a server first...</i></DropdownItem>;
     }
 
-    return Object.values(servers).map(({ name, id }) => (
+    return (
-      <span key={id}>
+      <React.Fragment>
+        {values(servers).map(({ name, id }) => (
+          <DropdownItem
+            key={id}
+            tag={Link}
+            to={`/server/${id}/list-short-urls/1`}
+            active={selectedServer && selectedServer.id === id}
+
+            // FIXME This should be implicit
+            onClick={() => selectServer(id)}
+          >
+            {name}
+          </DropdownItem>
+        ))}
+        <DropdownItem divider />
         <DropdownItem
-          tag={Link}
+          className="servers-dropdown__export-item"
-          to={`/server/${id}/list-short-urls/1`}
+          onClick={() => serversExporter.exportServers()}
-          active={selectedServer && selectedServer.id === id}
-          onClick={() => selectServer(id)} // FIXME This should be implicit
         >
-          {name}
+          Export servers
         </DropdownItem>
-      </span>
+      </React.Fragment>
-    ));
+    );
   };
 
   componentDidMount() {
@@ -35,12 +62,20 @@ 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);
+ServersDropdownComponent.defaultProps = defaultProps;
+ServersDropdownComponent.propTypes = propTypes;
+
+const ServersDropdown = connect(
+  pick([ 'servers', 'selectedServer' ]),
+  { listServers, selectServer }
+)(ServersDropdownComponent);
+
+export default ServersDropdown;

src/servers/helpers/ImportServersBtn.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { UncontrolledTooltip } from 'reactstrap';
+import { assoc } from 'ramda';
+import { v4 as uuid } from 'uuid';
+import PropTypes from 'prop-types';
+import { createServers } from '../reducers/server';
+import serversImporter, { serversImporterType } from '../services/ServersImporter';
+
+const defaultProps = {
+  serversImporter,
+  onImport: () => ({}),
+};
+const propTypes = {
+  onImport: PropTypes.func,
+  serversImporter: serversImporterType,
+  createServers: PropTypes.func,
+  fileRef: PropTypes.oneOfType([ PropTypes.object, PropTypes.node ]),
+};
+
+export class ImportServersBtnComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.fileRef = props.fileRef || React.createRef();
+  }
+
+  render() {
+    const { serversImporter: { importServersFromFile }, onImport, createServers } = this.props;
+    const onChange = (e) =>
+      importServersFromFile(e.target.files[0])
+        .then((servers) => servers.map((server) => assoc('id', uuid(), server)))
+        .then(createServers)
+        .then(onImport);
+
+    return (
+      <React.Fragment>
+        <button
+          type="button"
+          className="btn btn-outline-secondary mr-2"
+          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 <b>name</b>, <b>apiKey</b> and <b>url</b>
+        </UncontrolledTooltip>
+
+        <input
+          type="file"
+          accept="text/csv"
+          className="create-server__csv-select"
+          ref={this.fileRef}
+          onChange={onChange}
+        />
+      </React.Fragment>
+    );
+  }
+}
+
+ImportServersBtnComponent.defaultProps = defaultProps;
+ImportServersBtnComponent.propTypes = propTypes;
+
+const ImportServersBtn = connect(null, { createServers })(ImportServersBtnComponent);
+
+export default ImportServersBtn;

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

src/servers/reducers/selectedServer.js

@@ -1,9 +1,12 @@
-import ShlinkApiClient from '../../api/ShlinkApiClient';
+import { curry } from 'ramda';
-import ServersService from '../../servers/services/ServersService';
+import shlinkApiClient from '../../api/ShlinkApiClient';
-import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListParams'
+import serversService from '../../servers/services/ServersService';
+import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListParams';
 
-const SELECT_SERVER = 'shlink/selectedServer/SELECT_SERVER';
+/* eslint-disable padding-line-between-statements, newline-after-var */
-const RESET_SELECTED_SERVER = 'shlink/selectedServer/RESET_SELECTED_SERVER';
+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;
 
@@ -20,14 +23,17 @@ export default function reducer(state = defaultState, action) {
 
 export const resetSelectedServer = () => ({ type: RESET_SELECTED_SERVER });
 
-export const selectServer = serverId => dispatch => {
+export const _selectServer = (shlinkApiClient, serversService, serverId) => (dispatch) => {
   dispatch(resetShortUrlParams());
 
-  const selectedServer = ServersService.findServerById(serverId);
+  const selectedServer = serversService.findServerById(serverId);
-  ShlinkApiClient.setConfig(selectedServer);
+
+  shlinkApiClient.setConfig(selectedServer);
 
   dispatch({
     type: SELECT_SERVER,
-    selectedServer
+    selectedServer,
-  })
+  });
 };
+
+export const selectServer = curry(_selectServer)(shlinkApiClient, serversService);

src/servers/reducers/server.js

@@ -1,35 +1,44 @@
-import ServersService from '../services/ServersService';
+import { curry } from 'ramda';
+import serversService from '../services/ServersService';
 
-const FETCH_SERVERS = 'shlink/servers/FETCH_SERVERS';
+export const FETCH_SERVERS = 'shlink/servers/FETCH_SERVERS';
-const CREATE_SERVER = 'shlink/servers/CREATE_SERVER';
-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;
   }
 }
 
-export const listServers = () => {
+export const _listServers = (serversService) => ({
-  return {
+  type: FETCH_SERVERS,
-    type: FETCH_SERVERS,
+  servers: serversService.listServers(),
-    servers: ServersService.listServers(),
+});
-  };
+
+export const listServers = () => _listServers(serversService);
+
+export const _createServer = (serversService, server) => {
+  serversService.createServer(server);
+
+  return _listServers(serversService);
 };
 
-export const createServer = server => {
+export const createServer = curry(_createServer)(serversService);
-  ServersService.createServer(server);
+
-  return listServers();
+export const _deleteServer = (serversService, server) => {
+  serversService.deleteServer(server);
+
+  return _listServers(serversService);
 };
 
-export const deleteServer = server => {
+export const deleteServer = curry(_deleteServer)(serversService);
-  ServersService.deleteServer(server);
+
-  return listServers();
+export const _createServers = (serversService, servers) => {
+  serversService.createServers(servers);
+
+  return _listServers(serversService);
 };
+
+export const createServers = curry(_createServers)(serversService);

src/servers/services/ServersExporter.js

@@ -0,0 +1,55 @@
+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;' });
+
+  // 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(serversService, window, csvjson) {
+    this.serversService = serversService;
+    this.window = window;
+    this.csvjson = csvjson;
+  }
+
+  exportServers = async () => {
+    const servers = values(this.serversService.listServers()).map(dissoc('id'));
+
+    try {
+      const csv = this.csvjson.toCSV(servers, {
+        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;

src/servers/services/ServersImporter.js

@@ -0,0 +1,34 @@
+import csvjson from 'csvjson';
+import PropTypes from 'prop-types';
+
+export const serversImporterType = PropTypes.shape({
+  importServersFromFile: PropTypes.func,
+});
+
+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.addEventListener('loadend', (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;

src/servers/services/ServersService.js

@@ -1,5 +1,5 @@
-import Storage from '../../utils/Storage';
+import { assoc, dissoc, reduce } from 'ramda';
-import { dissoc } from 'ramda';
+import storage from '../../utils/Storage';
 
 const SERVERS_STORAGE_KEY = 'servers';
 
@@ -8,25 +8,29 @@ export class ServersService {
     this.storage = storage;
   }
 
-  listServers = () => {
+  listServers = () => this.storage.get(SERVERS_STORAGE_KEY) || {};
-    return 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 => {
+  deleteServer = (server) =>
-    const servers = this.listServers();
+    this.storage.set(
-    return servers[serverId];
+      SERVERS_STORAGE_KEY,
-  };
+      dissoc(server.id, this.listServers())
-
+    );
-  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);
-  };
 }
 
-export default new ServersService(Storage);
+const serversService = new ServersService(storage);
+
+export default serversService;

src/short-urls/CreateShortUrl.js

@@ -1,18 +1,16 @@
 import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown';
 import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import { assoc, dissoc, isNil, pick, pipe, pluck, replace } from 'ramda';
+import { assoc, dissoc, isNil, pick, pipe, replace, trim } from 'ramda';
 import React from 'react';
 import { connect } from 'react-redux';
-import ReactTags from 'react-tag-autocomplete';
 import { Collapse } from 'reactstrap';
-import '../../node_modules/react-datepicker/dist/react-datepicker.css';
 import DateInput from '../common/DateInput';
-import './CreateShortUrl.scss';
+import TagsSelector from '../utils/TagsSelector';
 import CreateShortUrlResult from './helpers/CreateShortUrlResult';
 import { createShortUrl, resetCreateShortUrl } from './reducers/shortUrlCreationResult';
 
-export class CreateShortUrl extends React.Component {
+export class CreateShortUrlComponent extends React.Component {
   state = {
     longUrl: '',
     tags: [],
@@ -20,49 +18,44 @@ export class CreateShortUrl extends React.Component {
     validSince: undefined,
     validUntil: undefined,
     maxVisits: undefined,
-    moreOptionsVisible: false
+    moreOptionsVisible: false,
   };
 
   render() {
     const { createShortUrl, shortUrlCreationResult, resetCreateShortUrl } = this.props;
 
-    const addTag = tag => this.setState({
+    const changeTags = (tags) => this.setState({ tags: tags.map(pipe(trim, replace(/ /g, '-'))) });
-      tags: [].concat(this.state.tags, assoc('name', replace(/ /g, '-', tag.name), tag))
+    const renderOptionalInput = (id, placeholder, type = 'text', props = {}) => (
-    });
-    const removeTag = i => {
-      const tags = this.state.tags.slice(0);
-      tags.splice(i, 1);
-      this.setState({ tags });
-    };
-    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('tags', pluck('name', this.state.tags)), // Map tags array to use only their names
         assoc('validSince', formatDate(this.state.validSince)),
         assoc('validUntil', formatDate(this.state.validUntil))
       )(this.state));
     };
 
     return (
-      <div className="short-urls-container">
+      <div className="shlink-container">
         <form onSubmit={save}>
           <div className="form-group">
             <input
@@ -71,19 +64,13 @@ 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>
 
           <Collapse isOpen={this.state.moreOptionsVisible}>
             <div className="form-group">
-              <ReactTags
+              <TagsSelector tags={this.state.tags} onChange={changeTags} />
-                tags={this.state.tags}
-                handleAddition={addTag}
-                handleDelete={removeTag}
-                allowNew={true}
-                placeholder="Add tags you want to apply to the URL"
-              />
             </div>
 
             <div className="row">
@@ -110,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;
@@ -131,7 +118,9 @@ export class CreateShortUrl extends React.Component {
   }
 }
 
-export default connect(pick(['shortUrlCreationResult']), {
+const CreateShortUrl = connect(pick([ 'shortUrlCreationResult' ]), {
   createShortUrl,
-  resetCreateShortUrl
+  resetCreateShortUrl,
-})(CreateShortUrl);
+})(CreateShortUrlComponent);
+
+export default CreateShortUrl;

src/short-urls/CreateShortUrl.scss

@@ -1,24 +0,0 @@
-@import '../../node_modules/react-tag-autocomplete/example/styles.css';
-@import '../utils/mixins/box-shadow';
-@import '../utils/mixins/border-radius';
-
-.create-short-url__btn:not(:first-child) {
-  margin-left: 5px;
-}
-
-.react-tags {
-  @include border-radius(.25rem);
-  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
-}
-.react-tags.is-focused {
-  color: #495057;
-  background-color: #fff;
-  border-color: #80bdff;
-  outline: 0;
-  @include box-shadow(0 0 0 0.2rem rgba(0,123,255,.25));
-}
-
-.react-datepicker__input-container,
-.react-datepicker-wrapper {
-  display: block !important;
-}

src/short-urls/Paginator.js

@@ -1,52 +1,55 @@
 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';
 
-export default class Paginator extends React.Component {
+const propTypes = {
-  render() {
+  serverId: PropTypes.string.isRequired,
-    const { paginator = {}, serverId } = this.props;
+  paginator: PropTypes.shape({
-    const { currentPage, pagesCount = 0 } = paginator;
+    currentPage: PropTypes.number,
-    if (pagesCount <= 1) {
+    pagesCount: PropTypes.number,
-      return null;
+  }),
-    }
+};
 
-    const renderPages = () => {
+export default function Paginator({ paginator = {}, serverId }) {
-      const pages = [];
+  const { currentPage, pagesCount = 0 } = paginator;
 
-      for (let i = 1; i <= pagesCount; i++) {
+  if (pagesCount <= 1) {
-        pages.push(
+    return null;
-          <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>
-    );
   }
+
+  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">
+      <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;

src/short-urls/SearchBar.js

@@ -1,81 +1,55 @@
-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 { 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 { pick, isEmpty } from 'ramda';
+import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
 
-export class SearchBar extends React.Component {
+const propTypes = {
-  state = {
+  listShortUrls: PropTypes.func,
-    showClearBtn: false,
+  shortUrlsListParams: shortUrlsListParamsType,
-    searchTerm: '',
+};
-  };
-  timer = null;
 
-  render() {
+export function SearchBarComponent({ listShortUrls, shortUrlsListParams }) {
-    const { listShortUrls, shortUrlsListParams } = this.props;
+  const selectedTags = shortUrlsListParams.tags || [];
-    const selectedTags = shortUrlsListParams.tags || [];
 
-    return (
+  return (
-      <div className="serach-bar-container">
+    <div className="serach-bar-container">
-        <div className="search-bar">
+      <SearchField onChange={
-          <input
+        (searchTerm) => listShortUrls({ ...shortUrlsListParams, searchTerm })
-            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) && (
+      {!isEmpty(selectedTags) && (
-          <h4 className="search-bar__selected-tag mt-2">
+        <h4 className="search-bar__selected-tag mt-2">
-            <small>Filtering by tags:</small>
+          <FontAwesomeIcon icon={tagsIcon} className="search-bar__tags-icon" />
-            &nbsp;
+          &nbsp;
-            {selectedTags.map(tag => <Tag
+          {selectedTags.map((tag) => (
+            <Tag
+              key={tag}
               text={tag}
               clearable
               onClose={() => listShortUrls(
                 {
                   ...shortUrlsListParams,
-                  tags: selectedTags.filter(selectedTag => selectedTag !== tag)
+                  tags: selectedTags.filter((selectedTag) => selectedTag !== tag),
                 }
               )}
-            />)}
+            />
-          </h4>
+          ))}
-        )}
+        </h4>
-      </div>
+      )}
-    );
+    </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);
-  }
 }
 
-export default connect(pick(['shortUrlsListParams']), { listShortUrls })(SearchBar);
+SearchBarComponent.propTypes = propTypes;
+
+const SearchBar = connect(pick([ 'shortUrlsListParams' ]), { listShortUrls })(SearchBarComponent);
+
+export default SearchBar;

src/short-urls/SearchBar.scss

@@ -1,21 +1,3 @@
-@import '../utils/mixins/vertical-align';
+.search-bar__tags-icon {
-
+  vertical-align: bottom;
-.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;
 }

src/short-urls/ShortUrlVisits.js

@@ -6,28 +6,46 @@ 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 VisitsParser from '../visits/services/VisitsParser';
+import {
-import { getShortUrlVisits } from './reducers/shortUrlVisits';
+  processOsStats,
+  processBrowserStats,
+  processCountriesStats,
+  processReferrersStats,
+} from '../visits/services/VisitsParser';
+import MutedMessage from '../utils/MuttedMessage';
+import ExternalLink from '../utils/ExternalLink';
+import { serverType } from '../servers/prop-types';
+import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits';
 import './ShortUrlVisits.scss';
 
-const MutedMessage = ({ children }) =>
+const propTypes = {
-  <div className="col-md-10 offset-md-1">
+  processOsStats: PropTypes.func,
-    <Card className="bg-light mt-4" body>
+  processBrowserStats: PropTypes.func,
-      <h3 className="text-center text-muted mb-0">
+  processCountriesStats: PropTypes.func,
-        {children}
+  processReferrersStats: PropTypes.func,
-      </h3>
+  match: PropTypes.object,
-    </Card>
+  getShortUrlVisits: PropTypes.func,
-  </div>;
+  selectedServer: serverType,
+  shortUrlVisits: shortUrlVisitsType,
+};
+const defaultProps = {
+  processOsStats,
+  processBrowserStats,
+  processCountriesStats,
+  processReferrersStats,
+};
 
-export class ShortUrlsVisits extends React.Component {
+export class ShortUrlsVisitsComponent extends React.Component {
   state = { startDate: undefined, endDate: undefined };
   loadVisits = () => {
-    const { match: { params } } = this.props;
+    const { match: { params }, getShortUrlVisits } = this.props;
-    this.props.getShortUrlVisits(params.shortCode, mapObjIndexed(
+
-      value => value && value.format ? value.format('YYYY-MM-DD') : value,
+    getShortUrlVisits(params.shortCode, mapObjIndexed(
+      (value) => value && value.format ? value.format('YYYY-MM-DD') : value,
       this.state
-    ))
+    ));
   };
 
   componentDidMount() {
@@ -38,8 +56,11 @@ export class ShortUrlsVisits extends React.Component {
     const {
       match: { params },
       selectedServer,
-      visitsParser,
+      processOsStats,
-      shortUrlVisits: { visits, loading, error, shortUrl }
+      processBrowserStats,
+      processCountriesStats,
+      processReferrersStats,
+      shortUrlVisits: { visits, loading, error, shortUrl },
     } = this.props;
     const serverUrl = selectedServer ? selectedServer.url : '';
     const shortLink = `${serverUrl}/${params.shortCode}`;
@@ -56,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={{
+            {!isBarChart && (
-              legend: {
+              <Doughnut
-                position: 'right'
+                data={generateGraphData(stats, label || title, isBarChart)}
-              }
+                options={{
-            }} />}
+                  legend: {
-            {isBarChart && <HorizontalBar data={generateGraphData(stats, label || title, isBarChart)} options={{
+                    position: 'right',
-              legend: {
+                  },
-                display: false
+                }}
-              }
+              />
-            }} />}
+            )}
+            {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>;
@@ -100,67 +132,74 @@ export class ShortUrlsVisits extends React.Component {
 
       return (
         <div className="row">
-          {renderGraphCard('Operating systems', visitsParser.processOsStats(visits), false)}
+          {renderGraphCard('Operating systems', processOsStats(visits), false)}
-          {renderGraphCard('Browsers', visitsParser.processBrowserStats(visits), false)}
+          {renderGraphCard('Browsers', processBrowserStats(visits), false)}
-          {renderGraphCard('Countries', visitsParser.processCountriesStats(visits), true, 'Visits')}
+          {renderGraphCard('Countries', processCountriesStats(visits), true, 'Visits')}
-          {renderGraphCard('Referrers', visitsParser.processReferrersStats(visits), true, 'Visits')}
+          {renderGraphCard('Referrers', processReferrersStats(visits), true, 'Visits')}
         </div>
       );
     };
 
-    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="short-urls-container">
+      <div className="shlink-container">
         <header>
           <Card className="bg-light">
             <CardBody>
               <h2>
                 {
                   shortUrl.visitsCount &&
-                  <span className="badge badge-primary float-right">Visits: {shortUrl.visitsCount}</span>
+                  <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>
+              {shortUrl.dateCreated && (
-                Created:
+                <div>
-                &nbsp;
+                  Created:
-                {loading && <small>Loading...</small>}
+                  &nbsp;
-                {!loading && renderCreated()}
+                  {loading && <small>Loading...</small>}
-              </div>}
+                  {!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>
         </header>
 
-        <section>
+        <section className="mt-4">
-          <form onSubmit={e => e.preventDefault()} className="form-inline mt-4 float-md-right">
+          <div className="row">
-            <label>Period</label>
+            <div className="col-xl-3 col-lg-4 col-md-6 offset-xl-6 offset-lg-4">
-            <DateInput
+              <DateInput
-              selected={this.state.startDate}
+                selected={this.state.startDate}
-              placeholderText="Since"
+                placeholderText="Since"
-              onChange={date => this.setState({ startDate: date }, () => this.loadVisits())}
+                isClearable
-              className="short-url-visits__date-input"
+                onChange={(date) => this.setState({ startDate: date }, () => this.loadVisits())}
-            />
+              />
-            <DateInput
+            </div>
-              selected={this.state.endDate}
+            <div className="col-xl-3 col-lg-4 col-md-6">
-              placeholderText="Until"
+              <DateInput
-              onChange={date => this.setState({ endDate: date }, () => this.loadVisits())}
+                selected={this.state.endDate}
-              className="short-url-visits__date-input"
+                placeholderText="Until"
-            />
+                isClearable
-          </form>
+                className="short-url-visits__date-input"
-          <div className="clearfix" />
+                onChange={(date) => this.setState({ endDate: date }, () => this.loadVisits())}
+              />
+            </div>
+          </div>
         </section>
 
         <section>
@@ -171,8 +210,12 @@ export class ShortUrlsVisits extends React.Component {
   }
 }
 
-ShortUrlsVisits.defaultProps = {
+ShortUrlsVisitsComponent.propTypes = propTypes;
-  visitsParser: VisitsParser
+ShortUrlsVisitsComponent.defaultProps = defaultProps;
-};
 
-export default connect(pick(['selectedServer', 'shortUrlVisits']), { getShortUrlVisits })(ShortUrlsVisits);
+const ShortUrlsVisits = connect(
+  pick([ 'selectedServer', 'shortUrlVisits' ]),
+  { getShortUrlVisits }
+)(ShortUrlsVisitsComponent);
+
+export default ShortUrlsVisits;

src/short-urls/ShortUrlVisits.scss

@@ -1,3 +1,7 @@
+@import '../utils/base';
+
 .short-url-visits__date-input {
-  margin-left: 10px;
+  @media (max-width: $smMax) {
+    margin-top: .5rem;
+  }
 }

src/short-urls/ShortUrls.js

@@ -1,17 +1,18 @@
 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}`;
 
   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} />
@@ -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;

src/short-urls/ShortUrlsList.js

@@ -1,113 +1,114 @@
 import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
 import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import { isEmpty, pick } 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';
+import qs from 'qs';
+import PropTypes from 'prop-types';
+import { serverType } from '../servers/prop-types';
 import { ShortUrlsRow } from './helpers/ShortUrlsRow';
-import { listShortUrls } from './reducers/shortUrlsList';
+import { listShortUrls, shortUrlType } from './reducers/shortUrlsList';
 import './ShortUrlsList.scss';
+import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
 
-export class ShortUrlsList extends React.Component {
+const SORTABLE_FIELDS = {
-  refreshList = extraParams => {
+  dateCreated: 'Created at',
+  shortCode: 'Short URL',
+  originalUrl: 'Long URL',
+  visits: 'Visits',
+};
+
+const propTypes = {
+  listShortUrls: PropTypes.func,
+  shortUrlsListParams: shortUrlsListParamsType,
+  match: PropTypes.object,
+  location: PropTypes.object,
+  loading: PropTypes.bool,
+  error: PropTypes.bool,
+  shortUrlsList: PropTypes.arrayOf(shortUrlType),
+  selectedServer: serverType,
+};
+
+export class ShortUrlsListComponent extends React.Component {
+  refreshList = (extraParams) => {
     const { listShortUrls, shortUrlsListParams } = this.props;
+
     listShortUrls({
       ...shortUrlsListParams,
-      ...extraParams
+      ...extraParams,
     });
   };
+  determineOrderDir = (field) => {
+    if (this.state.orderField !== field) {
+      return 'ASC';
+    }
+
+    const newOrderMap = {
+      ASC: 'DESC',
+      DESC: undefined,
+    };
+
+    return this.state.orderDir ? newOrderMap[this.state.orderDir] : 'ASC';
+  };
+  orderBy = (field) => {
+    const newOrderDir = this.determineOrderDir(field);
+
+    this.setState({ orderField: newOrderDir !== undefined ? field : undefined, orderDir: newOrderDir });
+    this.refreshList({ orderBy: { [field]: newOrderDir } });
+  };
+  renderOrderIcon = (field, className = 'short-urls-list__header-icon') => {
+    if (this.state.orderField !== field) {
+      return null;
+    }
+
+    return (
+      <FontAwesomeIcon
+        icon={this.state.orderDir === 'ASC' ? caretUpIcon : caretDownIcon}
+        className={className}
+      />
+    );
+  };
 
   constructor(props) {
     super(props);
 
-    const orderBy = props.shortUrlsListParams.orderBy;
+    const { orderBy } = props.shortUrlsListParams;
+
     this.state = {
-      orderField: orderBy ? Object.keys(orderBy)[0] : 'dateCreated',
+      orderField: orderBy ? head(keys(orderBy)) : undefined,
-      orderDir: orderBy ? Object.values(orderBy)[0] : 'ASC',
+      orderDir: orderBy ? head(values(orderBy)) : undefined,
-    }
+    };
   }
 
   componentDidMount() {
-    const { match: { params } } = this.props;
+    const { match: { params }, location } = this.props;
-    this.refreshList({ page: params.page });
+    const query = qs.parse(location.search, { ignoreQueryPrefix: true });
-  }
 
-  render() {
+    this.refreshList({ page: params.page, tags: query.tag ? [ query.tag ] : [] });
-    const orderBy = field => {
-      const newOrderDir = this.state.orderField !== field ? 'ASC' : (this.state.orderDir === 'DESC' ? 'ASC' : 'DESC');
-      this.setState({ orderField: field, orderDir: newOrderDir });
-      this.refreshList({ orderBy: { [field]: newOrderDir } })
-    };
-    const renderOrderIcon = field => {
-      if (this.state.orderField !== field) {
-          return null;
-      }
-
-      return (
-        <FontAwesomeIcon
-          icon={this.state.orderDir === 'ASC' ? caretUpIcon : caretDownIcon}
-          className="short-urls-list__header-icon"
-        />
-      );
-    };
-
-    return (
-      <table className="table table-striped table-hover">
-        <thead className="short-urls-list__header">
-          <tr>
-            <th
-              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-              onClick={() => orderBy('dateCreated')}
-            >
-              {renderOrderIcon('dateCreated')}
-              Created at
-            </th>
-            <th
-              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-              onClick={() => orderBy('shortCode')}
-            >
-              {renderOrderIcon('shortCode')}
-              Short URL
-            </th>
-            <th
-              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-              onClick={() => orderBy('originalUrl')}
-            >
-              {renderOrderIcon('originalUrl')}
-              Long URL
-            </th>
-            <th className="short-urls-list__header-cell">Tags</th>
-            <th
-              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-              onClick={() => orderBy('visits')}
-            >
-              <span className="nowrap">{renderOrderIcon('visits')} Visits</span>
-            </th>
-            <th className="short-urls-list__header-cell">&nbsp;</th>
-          </tr>
-        </thead>
-        <tbody>
-          {this.renderShortUrls()}
-        </tbody>
-      </table>
-    );
   }
 
   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) {
       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}
@@ -117,6 +118,79 @@ export class ShortUrlsList extends React.Component {
       />
     ));
   }
+
+  renderMobileOrderingControls() {
+    return (
+      <div className="d-block d-md-none mb-3">
+        <UncontrolledDropdown>
+          <DropdownToggle caret className="btn-block">
+            Order by
+          </DropdownToggle>
+          <DropdownMenu className="short-urls-list__order-dropdown">
+            {toPairs(SORTABLE_FIELDS).map(([ key, value ]) => (
+              <DropdownItem key={key} active={this.state.orderField === key} onClick={() => this.orderBy(key)}>
+                {value}
+                {this.renderOrderIcon(key, 'short-urls-list__header-icon--mobile')}
+              </DropdownItem>
+            ))}
+          </DropdownMenu>
+        </UncontrolledDropdown>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        {this.renderMobileOrderingControls()}
+        <table className="table table-striped table-hover">
+          <thead className="short-urls-list__header">
+            <tr>
+              <th
+                className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
+                onClick={() => this.orderBy('dateCreated')}
+              >
+                {this.renderOrderIcon('dateCreated')}
+                Created at
+              </th>
+              <th
+                className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
+                onClick={() => this.orderBy('shortCode')}
+              >
+                {this.renderOrderIcon('shortCode')}
+                Short URL
+              </th>
+              <th
+                className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
+                onClick={() => this.orderBy('originalUrl')}
+              >
+                {this.renderOrderIcon('originalUrl')}
+                Long URL
+              </th>
+              <th className="short-urls-list__header-cell">Tags</th>
+              <th
+                className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
+                onClick={() => this.orderBy('visits')}
+              >
+                <span className="nowrap">{this.renderOrderIcon('visits')} Visits</span>
+              </th>
+              <th className="short-urls-list__header-cell">&nbsp;</th>
+            </tr>
+          </thead>
+          <tbody>
+            {this.renderShortUrls()}
+          </tbody>
+        </table>
+      </React.Fragment>
+    );
+  }
 }
 
-export default connect(pick(['selectedServer', 'shortUrlsListParams']), { listShortUrls })(ShortUrlsList);
+ShortUrlsListComponent.propTypes = propTypes;
+
+const ShortUrlsList = connect(
+  pick([ 'selectedServer', 'shortUrlsListParams' ]),
+  { listShortUrls }
+)(ShortUrlsListComponent);
+
+export default ShortUrlsList;

src/short-urls/ShortUrlsList.scss

@@ -13,3 +13,16 @@
 .short-urls-list__header-icon {
   margin-right: 5px;
 }
+
+.short-urls-list__header-icon--mobile {
+  margin: 3.5px 0 0;
+  float: right;
+}
+
+.short-urls-list__header-cell--with-action {
+  cursor: pointer;
+}
+
+.short-urls-list__order-dropdown {
+  width: 100%;
+}

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">
+            <button
-              <FontAwesomeIcon icon={copyIcon}/> Copy
+              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;

src/short-urls/helpers/EditTagsModal.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import PropTypes from 'prop-types';
+import { pick } from 'ramda';
+import TagsSelector from '../../utils/TagsSelector';
+import {
+  editShortUrlTags,
+  resetShortUrlsTags,
+  shortUrlTagsType,
+  shortUrlTagsEdited,
+} from '../reducers/shortUrlTags';
+import ExternalLink from '../../utils/ExternalLink';
+import { shortUrlType } from '../reducers/shortUrlsList';
+
+const propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+  url: PropTypes.string.isRequired,
+  shortUrl: shortUrlType.isRequired,
+  shortUrlTags: shortUrlTagsType,
+  editShortUrlTags: PropTypes.func,
+  shortUrlTagsEdited: PropTypes.func,
+  resetShortUrlsTags: PropTypes.func,
+};
+
+export class EditTagsModalComponent extends React.Component {
+  saveTags = () => {
+    const { editShortUrlTags, shortUrl, toggle } = this.props;
+
+    editShortUrlTags(shortUrl.shortCode, this.state.tags)
+      .then(() => {
+        this.tagsSaved = true;
+        toggle();
+      })
+      .catch(() => {});
+  };
+  refreshShortUrls = () => {
+    if (!this.tagsSaved) {
+      return;
+    }
+
+    const { shortUrlTagsEdited, shortUrl } = this.props;
+    const { tags } = this.state;
+
+    shortUrlTagsEdited(shortUrl.shortCode, tags);
+  };
+
+  componentDidMount() {
+    const { resetShortUrlsTags } = this.props;
+
+    resetShortUrlsTags();
+    this.tagsSaved = false;
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = { tags: props.shortUrl.tags };
+  }
+
+  render() {
+    const { isOpen, toggle, url, shortUrlTags } = this.props;
+
+    return (
+      <Modal isOpen={isOpen} toggle={toggle} centered onClosed={() => this.refreshShortUrls()}>
+        <ModalHeader toggle={toggle}>
+          Edit tags for <ExternalLink href={url}>{url}</ExternalLink>
+        </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>
+          <button
+            className="btn btn-primary"
+            type="button"
+            disabled={shortUrlTags.saving}
+            onClick={() => this.saveTags()}
+          >
+            {shortUrlTags.saving ? 'Saving tags...' : 'Save tags'}
+          </button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+EditTagsModalComponent.propTypes = propTypes;
+
+const EditTagsModal = connect(
+  pick([ 'shortUrlTags' ]),
+  { editShortUrlTags, resetShortUrlsTags, shortUrlTagsEdited }
+)(EditTagsModalComponent);
+
+export default EditTagsModal;

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;

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={true}>
+    <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;

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,9 +29,14 @@ 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() {
@@ -30,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>
@@ -45,12 +64,12 @@ 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);
+              setTimeout(() => this.setState({ copiedToClipboard: false }), COPIED_MSG_TIME);
             }}
           />
         </td>
@@ -58,3 +77,5 @@ export class ShortUrlsRow extends React.Component {
     );
   }
 }
+
+ShortUrlsRow.propTypes = propTypes;

src/short-urls/helpers/ShortUrlsRow.scss

@@ -27,10 +27,11 @@
 
     &:last-child {
       position: absolute;
-      top: 3px;
+      top: 3.5px;
       right: .5rem;
       width: auto;
       padding: 0;
+      border: none;
     }
   }
 }

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';
@@ -8,55 +9,81 @@ 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, isQrModalOpen: false, isPreviewOpen: false };
+  state = {
-  toggle = () => this.setState({ isOpen: !this.state.isOpen });
+    isOpen: false,
+    isQrModalOpen: false,
+    isPreviewOpen: false,
+    isTagsModalOpen: false,
+  };
+  toggle = () => this.setState(({ isOpen }) => ({ isOpen: !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 toggleQrCode = () => this.setState(({ isQrModalOpen }) => ({ isQrModalOpen: !isQrModalOpen }));
-    const togglePreview = () => this.setState({isPreviewOpen: !this.state.isPreviewOpen});
+    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/${shortCode}/visits`}>
+          <DropdownItem tag={Link} to={`/server/${serverId}/short-code/${shortUrl.shortCode}/visits`}>
-            <FontAwesomeIcon icon={pieChartIcon}/> &nbsp;Visit Stats
+            <FontAwesomeIcon icon={pieChartIcon} /> &nbsp;Visit Stats
           </DropdownItem>
+          <DropdownItem onClick={toggleTags}>
+            <FontAwesomeIcon icon={tagsIcon} /> &nbsp;Edit tags
+          </DropdownItem>
+          <EditTagsModal
+            url={completeShortUrl}
+            shortUrl={shortUrl}
+            isOpen={this.state.isTagsModalOpen}
+            toggle={toggleTags}
+          />
 
-          <DropdownItem divider/>
+          <DropdownItem divider />
 
           <DropdownItem onClick={togglePreview}>
-            <FontAwesomeIcon icon={pictureIcon}/> &nbsp;Preview
+            <FontAwesomeIcon icon={pictureIcon} /> &nbsp;Preview
           </DropdownItem>
           <PreviewModal
-            url={shortUrl}
+            url={completeShortUrl}
             isOpen={this.state.isPreviewOpen}
             toggle={togglePreview}
           />
 
           <DropdownItem onClick={toggleQrCode}>
-            <FontAwesomeIcon icon={qrIcon}/> &nbsp;QR code
+            <FontAwesomeIcon icon={qrIcon} /> &nbsp;QR code
           </DropdownItem>
           <QrCodeModal
-            url={shortUrl}
+            url={completeShortUrl}
             isOpen={this.state.isQrModalOpen}
             toggle={toggleQrCode}
           />
 
-          <DropdownItem divider/>
+          <DropdownItem divider />
 
-          <CopyToClipboard text={shortUrl} onCopy={onCopyToClipboard}>
+          <CopyToClipboard text={completeShortUrl} onCopy={onCopyToClipboard}>
             <DropdownItem>
-              <FontAwesomeIcon icon={copyIcon}/> &nbsp;Copy to clipboard
+              <FontAwesomeIcon icon={copyIcon} /> &nbsp;Copy to clipboard
             </DropdownItem>
           </CopyToClipboard>
         </DropdownMenu>
@@ -64,3 +91,5 @@ export class ShortUrlsRowMenu extends React.Component {
     );
   }
 }
+
+ShortUrlsRowMenu.propTypes = propTypes;

src/short-urls/reducers/shortUrlCreationResult.js

@@ -1,9 +1,21 @@
-import ShlinkApiClient from '../../api/ShlinkApiClient';
+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 = PropTypes.shape({
+  result: PropTypes.shape({
+    shortUrl: PropTypes.string,
+  }),
+  saving: PropTypes.bool,
+  error: PropTypes.bool,
+});
 
 const defaultState = {
   result: null,
@@ -37,15 +49,18 @@ export default function reducer(state = defaultState, action) {
   }
 }
 
-export const createShortUrl = 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 resetCreateShortUrl = () => ({ type: RESET_CREATE_SHORT_URL });

src/short-urls/reducers/shortUrlTags.js

@@ -0,0 +1,77 @@
+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,
+  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,
+      };
+    case RESET_EDIT_SHORT_URL_TAGS:
+      return defaultState;
+    default:
+      return state;
+  }
+}
+
+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);
+    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 resetShortUrlsTags = () => ({ type: RESET_EDIT_SHORT_URL_TAGS });
+
+export const shortUrlTagsEdited = (shortCode, tags) => ({
+  tags,
+  shortCode,
+  type: SHORT_URL_TAGS_EDITED,
+});

src/short-urls/reducers/shortUrlVisits.js

@@ -1,48 +1,62 @@
-import ShlinkApiClient from '../../api/ShlinkApiClient';
+import { curry } from 'ramda';
+import PropTypes from 'prop-types';
+import shlinkApiClient from '../../api/ShlinkApiClient';
+import { shortUrlType } from './shortUrlsList';
 
+/* eslint-disable padding-line-between-statements, newline-after-var */
 const GET_SHORT_URL_VISITS_START = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_START';
 const GET_SHORT_URL_VISITS_ERROR = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_ERROR';
 const GET_SHORT_URL_VISITS = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS';
+/* eslint-enable padding-line-between-statements, newline-after-var */
+
+export const shortUrlVisitsType = PropTypes.shape({
+  shortUrl: shortUrlType,
+  visits: PropTypes.array,
+  loading: PropTypes.bool,
+  error: PropTypes.bool,
+});
 
 const initialState = {
   shortUrl: {},
   visits: [],
   loading: false,
-  error: false
+  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 = (shortCode, dates) => dispatch => {
+export const _getShortUrlVisits = (shlinkApiClient, shortCode, dates) => (dispatch) => {
   dispatch({ type: GET_SHORT_URL_VISITS_START });
 
   Promise.all([
-    ShlinkApiClient.getShortUrlVisits(shortCode, dates),
+    shlinkApiClient.getShortUrlVisits(shortCode, dates),
-    ShlinkApiClient.getShortUrl(shortCode)
+    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);

src/short-urls/reducers/shortUrlsList.js

@@ -1,8 +1,19 @@
-import ShlinkApiClient from '../../api/ShlinkApiClient';
+import { assoc, assocPath } from 'ramda';
+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),
+  shortCode: PropTypes.string,
+  originalUrl: PropTypes.string,
+});
 
 const initialState = {
   shortUrls: {},
@@ -17,26 +28,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) =>
+        shortUrl.shortCode === action.shortCode
+          ? assoc('tags', action.tags, shortUrl)
+          : shortUrl), state);
     default:
       return state;
   }
 }
 
-export const listShortUrls = (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);

src/short-urls/reducers/shortUrlsListParams.js

@@ -1,6 +1,13 @@
+import PropTypes from 'prop-types';
 import { LIST_SHORT_URLS } from './shortUrlsList';
 
-const RESET_SHORT_URL_PARAMS = 'shlink/shortUrlsListParams/RESET_SHORT_URL_PARAMS';
+export const RESET_SHORT_URL_PARAMS = 'shlink/shortUrlsListParams/RESET_SHORT_URL_PARAMS';
+
+export const shortUrlsListParamsType = PropTypes.shape({
+  page: PropTypes.string,
+  tags: PropTypes.arrayOf(PropTypes.string),
+  searchTerm: PropTypes.string,
+});
 
 const defaultState = { page: '1' };
 

src/tags/TagCard.js

@@ -0,0 +1,74 @@
+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 PropTypes from 'prop-types';
+import React from 'react';
+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,
+};
+
+export default class TagCard extends React.Component {
+  state = { isDeleteModalOpen: false, isEditModalOpen: false };
+
+  render() {
+    const { tag, colorGenerator, currentServerId } = this.props;
+    const toggleDelete = () =>
+      this.setState(({ isDeleteModalOpen }) => ({ isDeleteModalOpen: !isDeleteModalOpen }));
+    const toggleEdit = () =>
+      this.setState(({ isEditModalOpen }) => ({ isEditModalOpen: !isEditModalOpen }));
+
+    return (
+      <Card className="tag-card">
+        <CardBody className="tag-card__body">
+          <button
+            className="btn btn-light btn-sm tag-card__btn tag-card__btn--last"
+            onClick={toggleDelete}
+          >
+            <FontAwesomeIcon icon={deleteIcon} />
+          </button>
+          <button
+            className="btn btn-light btn-sm tag-card__btn"
+            onClick={toggleEdit}
+          >
+            <FontAwesomeIcon icon={editIcon} />
+          </button>
+          <h5 className="tag-card__tag-title">
+            <div
+              style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
+              className="tag-card__tag-bullet"
+            />
+            <Link to={`/server/${currentServerId}/list-short-urls/1?tag=${tag}`}>
+              {tag}
+            </Link>
+          </h5>
+        </CardBody>
+
+        <DeleteTagConfirmModal
+          tag={tag}
+          toggle={toggleDelete}
+          isOpen={this.state.isDeleteModalOpen}
+        />
+        <EditTagModal
+          tag={tag}
+          toggle={toggleEdit}
+          isOpen={this.state.isEditModalOpen}
+        />
+      </Card>
+    );
+  }
+}
+
+TagCard.propTypes = propTypes;
+TagCard.defaultProps = defaultProps;

src/tags/TagCard.scss

@@ -0,0 +1,36 @@
+.tag-card.tag-card {
+  background-color: #eee;
+  margin-bottom: .5rem;
+}
+
+.tag-card__body.tag-card__body {
+  padding: .75rem;
+}
+
+.tag-card__tag-title {
+  margin: 0;
+  line-height: 31px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-right: 5px;
+}
+
+.tag-card__tag-bullet {
+  $width: 20px;
+
+  border-radius: 50%;
+  width: $width;
+  height: $width;
+  display: inline-block;
+  vertical-align: -4px;
+  margin-right: 7px;
+}
+
+.tag-card__btn {
+  float: right;
+}
+
+.tag-card__btn--last {
+  margin-left: 3px;
+}

src/tags/TagsList.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { pick, splitEvery } from 'ramda';
+import PropTypes from 'prop-types';
+import MuttedMessage from '../utils/MuttedMessage';
+import SearchField from '../utils/SearchField';
+import { filterTags, listTags } from './reducers/tagsList';
+import TagCard from './TagCard';
+
+const { ceil } = Math;
+const TAGS_GROUP_SIZE = 4;
+const propTypes = {
+  filterTags: PropTypes.func,
+  listTags: PropTypes.func,
+  tagsList: PropTypes.shape({
+    loading: PropTypes.bool,
+  }),
+  match: PropTypes.object,
+};
+
+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>;
+    }
+
+    if (tagsList.error) {
+      return (
+        <div className="col-12">
+          <div className="bg-danger p-2 text-white text-center">Error loading tags :(</div>
+        </div>
+      );
+    }
+
+    const tagsCount = tagsList.filteredTags.length;
+
+    if (tagsCount < 1) {
+      return <MuttedMessage>No tags found</MuttedMessage>;
+    }
+
+    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) => (
+              <TagCard
+                key={tag}
+                tag={tag}
+                currentServerId={match.params.serverId}
+              />
+            ))}
+          </div>
+        ))}
+      </React.Fragment>
+    );
+  }
+
+  render() {
+    const { filterTags } = this.props;
+
+    return (
+      <div className="shlink-container">
+        {!this.props.tagsList.loading && (
+          <SearchField
+            className="mb-3"
+            placeholder="Search tags..."
+            onChange={filterTags}
+          />
+        )}
+        <div className="row">
+          {this.renderContent()}
+        </div>
+      </div>
+    );
+  }
+}
+
+TagsListComponent.propTypes = propTypes;
+
+const TagsList = connect(pick([ 'tagsList' ]), { listTags, filterTags })(TagsListComponent);
+
+export default TagsList;

src/tags/helpers/DeleteTagConfirmModal.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import PropTypes from 'prop-types';
+import { pick } from 'ramda';
+import { deleteTag, tagDeleted, tagDeleteType } from '../reducers/tagDelete';
+
+const propTypes = {
+  tag: PropTypes.string.isRequired,
+  toggle: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  deleteTag: PropTypes.func,
+  tagDelete: tagDeleteType,
+  tagDeleted: PropTypes.func,
+};
+
+export class DeleteTagConfirmModalComponent extends React.Component {
+  doDelete = () => {
+    const { tag, toggle, deleteTag } = this.props;
+
+    deleteTag(tag).then(() => {
+      this.tagWasDeleted = true;
+      toggle();
+    });
+  };
+  handleOnClosed = () => {
+    if (!this.tagWasDeleted) {
+      return;
+    }
+
+    const { tagDeleted, tag } = this.props;
+
+    tagDeleted(tag);
+  };
+
+  componentDidMount() {
+    this.tagWasDeleted = false;
+  }
+
+  render() {
+    const { tag, toggle, isOpen, tagDelete } = this.props;
+
+    return (
+      <Modal toggle={toggle} isOpen={isOpen} centered onClosed={this.handleOnClosed}>
+        <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"
+            disabled={tagDelete.deleting}
+            onClick={() => this.doDelete()}
+          >
+            {tagDelete.deleting ? 'Deleting tag...' : 'Delete tag'}
+          </button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+DeleteTagConfirmModalComponent.propTypes = propTypes;
+
+const DeleteTagConfirmModal = connect(
+  pick([ 'tagDelete' ]),
+  { deleteTag, tagDeleted }
+)(DeleteTagConfirmModalComponent);
+
+export default DeleteTagConfirmModal;

src/tags/helpers/EditTagModal.js

@@ -0,0 +1,141 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
+import { pick } from 'ramda';
+import { ChromePicker } from 'react-color';
+import colorIcon from '@fortawesome/fontawesome-free-solid/faPalette';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import PropTypes from 'prop-types';
+import colorGenerator, { colorGeneratorType } from '../../utils/ColorGenerator';
+import { editTag, tagEdited } from '../reducers/tagEdit';
+import './EditTagModal.scss';
+
+const propTypes = {
+  tag: PropTypes.string,
+  editTag: PropTypes.func,
+  toggle: PropTypes.func,
+  tagEdited: PropTypes.func,
+  colorGenerator: colorGeneratorType,
+  isOpen: PropTypes.bool,
+  tagEdit: PropTypes.shape({
+    error: PropTypes.bool,
+    editing: PropTypes.bool,
+  }),
+};
+const defaultProps = {
+  colorGenerator,
+};
+
+export class EditTagModalComponent extends React.Component {
+  saveTag = (e) => {
+    e.preventDefault();
+    const { tag: oldName, editTag, toggle } = this.props;
+    const { tag: newName, color } = this.state;
+
+    editTag(oldName, newName, color)
+      .then(() => {
+        this.tagWasEdited = true;
+        toggle();
+      })
+      .catch(() => {});
+  };
+  handleOnClosed = () => {
+    if (!this.tagWasEdited) {
+      return;
+    }
+
+    const { tag: oldName, tagEdited } = this.props;
+    const { tag: newName, color } = this.state;
+
+    tagEdited(oldName, newName, color);
+  };
+
+  constructor(props) {
+    super(props);
+
+    const { colorGenerator, tag } = props;
+
+    this.state = {
+      showColorPicker: false,
+      tag,
+      color: colorGenerator.getColorForKey(tag),
+    };
+  }
+
+  componentDidMount() {
+    this.tagWasEdited = false;
+  }
+
+  render() {
+    const { isOpen, toggle, tagEdit } = this.props;
+    const { tag, color } = this.state;
+    const toggleColorPicker = () =>
+      this.setState(({ showColorPicker }) => ({ showColorPicker: !showColorPicker }));
+
+    return (
+      <Modal isOpen={isOpen} toggle={toggle} centered onClosed={this.handleOnClosed}>
+        <form onSubmit={(e) => this.saveTag(e)}>
+          <ModalHeader toggle={toggle}>Edit tag</ModalHeader>
+          <ModalBody>
+            <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,
+                    borderColor: color,
+                  }}
+                >
+                  <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}
+                  disableAlpha
+                  onChange={(color) => this.setState({ color: color.hex })}
+                />
+              </Popover>
+              <input
+                type="text"
+                value={tag}
+                placeholder="Tag"
+                required
+                className="form-control"
+                onChange={(e) => this.setState({ tag: e.target.value })}
+              />
+            </div>
+
+            {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>
+    );
+  }
+}
+
+EditTagModalComponent.propTypes = propTypes;
+EditTagModalComponent.defaultProps = defaultProps;
+
+const EditTagModal = connect(pick([ 'tagEdit' ]), { editTag, tagEdited })(EditTagModalComponent);
+
+export default EditTagModal;

src/tags/helpers/EditTagModal.scss

@@ -0,0 +1,7 @@
+.edit-tag-modal__color-picker-toggle {
+  cursor: pointer;
+}
+
+.edit-tag-modal__color-icon {
+  color: #fff;
+}

src/tags/reducers/tagDelete.js

@@ -0,0 +1,59 @@
+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,
+  error: PropTypes.bool,
+});
+
+const defaultState = {
+  deleting: false,
+  error: false,
+};
+
+export default function reducer(state = defaultState, action) {
+  switch (action.type) {
+    case DELETE_TAG_START:
+      return {
+        deleting: true,
+        error: false,
+      };
+    case DELETE_TAG_ERROR:
+      return {
+        deleting: false,
+        error: true,
+      };
+    case DELETE_TAG:
+      return {
+        deleting: false,
+        error: false,
+      };
+    default:
+      return state;
+  }
+}
+
+export 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);
+
+export const tagDeleted = (tag) => ({ type: TAG_DELETED, tag });

src/tags/reducers/tagEdit.js

@@ -0,0 +1,67 @@
+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';
+
+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 {
+        ...pick([ 'oldName', 'newName' ], action),
+        editing: false,
+        error: false,
+      };
+    default:
+      return state;
+  }
+}
+
+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);
+      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, color) => ({
+  type: TAG_EDITED,
+  oldName,
+  newName,
+  color,
+});

src/tags/reducers/tagsList.js

@@ -0,0 +1,88 @@
+import { reject } from 'ramda';
+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: [],
+  filteredTags: [],
+  loading: false,
+  error: false,
+};
+
+export default function reducer(state = defaultState, action) {
+  switch (action.type) {
+    case LIST_TAGS_START:
+      return {
+        ...state,
+        loading: true,
+        error: false,
+      };
+    case LIST_TAGS_ERROR:
+      return {
+        ...state,
+        loading: false,
+        error: true,
+      };
+    case LIST_TAGS:
+      return {
+        tags: action.tags,
+        filteredTags: action.tags,
+        loading: false,
+        error: false,
+      };
+    case TAG_DELETED:
+      return {
+        ...state,
+
+        // 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,
+
+        // FIXME This should be optimized somehow...
+        tags: state.tags.map(renameTag).sort(),
+        filteredTags: state.filteredTags.map(renameTag).sort(),
+      };
+    case FILTER_TAGS:
+      return {
+        ...state,
+        filteredTags: state.tags.filter(
+          (tag) => tag.toLowerCase().match(action.searchTerm),
+        ),
+      };
+    default:
+      return state;
+  }
+}
+
+export const _listTags = (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 });
+  }
+};
+
+export const listTags = () => _listTags(shlinkApiClient);
+
+export const filterTags = (searchTerm) => ({
+  type: FILTER_TAGS,
+  searchTerm,
+});

src/utils/ColorGenerator.js

@@ -1,13 +1,16 @@
-import Storage from './Storage';
+import { range } from 'ramda';
+import PropTypes from 'prop-types';
+import storage from './Storage';
 
-const buildRandomColor = () => {
+const HEX_COLOR_LENGTH = 6;
-  const letters = '0123456789ABCDEF';
+const { floor, random } = Math;
-  let color = '#';
+const letters = '0123456789ABCDEF';
-  for (let i = 0; i < 6; i++ ) {
+const buildRandomColor = () =>
-    color += letters[Math.floor(Math.random() * 16)];
+  `#${
-  }
+    range(0, HEX_COLOR_LENGTH)
-  return color;
+      .map(() => letters[floor(random() * letters.length)])
-};
+      .join('')
+  }`;
 
 export class ColorGenerator {
   constructor(storage) {
@@ -15,18 +18,30 @@ export class ColorGenerator {
     this.colors = this.storage.get('colors') || {};
   }
 
-  getColorForKey = key => {
+  getColorForKey = (key) => {
-    let color = this.colors[key];
+    const color = this.colors[key];
-    if (color) {
-      return color;
-    }
 
     // If a color has not been set yet, generate a random one and save it
-    color = buildRandomColor();
+    if (!color) {
-    this.colors[key] = color;
+      this.setColorForKey(key, buildRandomColor());
-    this.storage.set('colors', this.colors);
+
+      return this.getColorForKey(key);
+    }
+
     return color;
   };
+
+  setColorForKey = (key, color) => {
+    this.colors[key] = color;
+    this.storage.set('colors', this.colors);
+  }
 }
 
-export default new ColorGenerator(Storage);
+export const colorGeneratorType = PropTypes.shape({
+  getColorForKey: PropTypes.func,
+  setColorForKey: PropTypes.func,
+});
+
+const colorGenerator = new ColorGenerator(storage);
+
+export default colorGenerator;

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;

src/utils/MuttedMessage.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Card } from 'reactstrap';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+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,
+  });
+
+  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>
+  );
+}
+
+MutedMessage.propTypes = propTypes;

src/utils/SearchField.js

@@ -0,0 +1,69 @@
+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 DEFAULT_SEARCH_INTERVAL = 500;
+const propTypes = {
+  onChange: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  placeholder: PropTypes.string,
+};
+const defaultProps = {
+  className: '',
+  placeholder: 'Search...',
+};
+
+export default class SearchField extends React.Component {
+  state = { showClearBtn: false, searchTerm: '' };
+  timer = null;
+
+  searchTermChanged(searchTerm, timeout = DEFAULT_SEARCH_INTERVAL) {
+    this.setState({
+      showClearBtn: searchTerm !== '',
+      searchTerm,
+    });
+
+    const resetTimer = () => {
+      clearTimeout(this.timer);
+      this.timer = null;
+    };
+
+    resetTimer();
+
+    this.timer = setTimeout(() => {
+      this.props.onChange(searchTerm);
+      resetTimer();
+    }, timeout);
+  }
+
+  render() {
+    const { className, placeholder } = this.props;
+
+    return (
+      <div className={classnames('search-field', className)}>
+        <input
+          type="text"
+          className="form-control form-control-lg search-field__input"
+          placeholder={placeholder}
+          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}
+          id="search-field__close"
+          onClick={() => this.searchTermChanged('', 0)}
+        >
+          &times;
+        </div>
+      </div>
+    );
+  }
+}
+
+SearchField.propTypes = propTypes;
+SearchField.defaultProps = defaultProps;

src/utils/SearchField.scss

@@ -0,0 +1,23 @@
+@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;
+}

src/utils/Storage.js

@@ -1,18 +1,28 @@
 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;
   };
 
   set = (key, value) => this.localStorage.setItem(buildPath(key), JSON.stringify(value));
 }
 
-const storage = typeof localStorage !== 'undefined' ? localStorage : {};
+const browserStorage = global.localStorage || {
-export default new Storage(storage);
+  getItem() {
+    return '';
+  },
+  setItem() {
+    return '';
+  },
+};
+const storage = new Storage(browserStorage);
+
+export default storage;