Merge pull request #608 from shlinkio/develop

Release 3.6.0

.dockerignore

@@ -1,6 +1,9 @@
 ./.github
+./.stryker-tmp
 ./build
 ./coverage
 ./node_modules
 ./test
 ./shlink-web-client.gif
+./dist
+./docs

.eslintrc

@@ -1,45 +1,24 @@
 {
   "extends": [
-    "adidas-env/browser",
-    "adidas-env/module",
-    "adidas-env/node",
-    "adidas-es6",
-    "adidas-babel",
-    "adidas-react"
+    "@shlinkio/js-coding-standard"
   ],
   "plugins": ["jest"],
   "env": {
     "jest/globals": true
   },
+  "parserOptions": {
+    "tsconfigRootDir": ".",
+    "createDefaultProgram": true
+  },
   "globals": {
     "process": true,
     "setImmediate": true
   },
-  "settings": {
-    "react": {
-      "version": "16.3"
-    }
-  },
+  "ignorePatterns": ["src/service*.ts"],
   "rules": {
-    "comma-dangle": ["error", "always-multiline"],
-    "no-invalid-this": "off",
-    "no-console": "warn",
-    "template-curly-spacing": ["error", "never"],
-    "no-warning-comments": "off",
-    "no-magic-numbers": "off",
-    "no-undefined": "off",
-    "no-inline-comments": "off",
-    "lines-around-comment": "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",
-    "react/display-name": "off"
+    "complexity": "off",
+    "@typescript-eslint/no-unnecessary-type-assertion": "off",
+    "@typescript-eslint/no-unsafe-return": "off",
+    "@typescript-eslint/no-unsafe-call": "off"
   }
 }

.github/ISSUE_TEMPLATE.md

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

.github/ISSUE_TEMPLATE/Bug.md

@@ -5,9 +5,10 @@ labels: bug
 ---
 
 <!--
-Before opening an issue, just take into account that this is a completely free of charge open source project.
-I'm always happy to help and provide support, but some understanding will be required.
+Before opening an issue, just take into account that this is a completely free of charge and open source project.
+I'm always happy to help and provide support, but some understanding will be expected.
 I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
+You may also be asked to provide tests or ways to reproduce reported bugs.
 Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
 
 With that said, please fill in the information requested next. More information might be requested once the issue is open.

.github/ISSUE_TEMPLATE/Feature_Request.md

@@ -5,9 +5,10 @@ labels: feature
 ---
 
 <!--
-Before opening an issue, just take into account that this is a completely free of charge open source project.
-I'm always happy to help and provide support, but some understanding will be required.
+Before opening an issue, just take into account that this is a completely free of charge and open source project.
+I'm always happy to help and provide support, but some understanding will be expected.
 I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
+You may also be asked to provide tests or ways to reproduce reported bugs.
 Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
 
 With that said, please fill in the information requested next. More information might be requested once the issue is open.

.github/ISSUE_TEMPLATE/Question_Support.md

@@ -5,9 +5,10 @@ labels: question
 ---
 
 <!--
-Before opening an issue, just take into account that this is a completely free of charge open source project.
-I'm always happy to help and provide support, but some understanding will be required.
+Before opening an issue, just take into account that this is a completely free of charge and open source project.
+I'm always happy to help and provide support, but some understanding will be expected.
 I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
+You may also be asked to provide tests or ways to reproduce reported bugs.
 Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
 
 With that said, please fill in the information requested next. More information might be requested once the issue is open.

.github/workflows/ci.yml

@@ -0,0 +1,16 @@
+name: Continuous integration
+
+on:
+  pull_request: null
+  push:
+    branches:
+      - main
+      - develop
+
+jobs:
+  ci:
+    uses: shlinkio/github-actions/.github/workflows/web-app-ci.yml@main
+    with:
+      node-version: 16.13
+      with-mutation-tests: true
+      publish-coverage: true

.github/workflows/deploy-preview.yml

@@ -0,0 +1,29 @@
+name: Deploy preview
+
+on:
+  pull_request_target: null
+
+jobs:
+  deploy:
+    runs-on: ubuntu-20.04
+    continue-on-error: true
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+        with:
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+          ref: ${{ github.event.pull_request.head.ref }}
+      - name: Use node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16.13
+      - name: Build
+        run: |
+          npm ci && \
+          node ./scripts/set-homepage.js /shlink-web-client/${GITHUB_HEAD_REF#refs/heads/} && \
+          rm src/service-worker.ts && \
+          npm run build
+      - name: Deploy preview
+        uses: shlinkio/deploy-preview-action@v1.0.1
+        with:
+          folder: build

.github/workflows/docker-image-build.yml

@@ -0,0 +1,28 @@
+name: Build docker image
+
+on:
+  push:
+    branches:
+      - develop
+    tags:
+      - 'v*'
+
+jobs:
+  build:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+        with:
+          version: latest
+      - name: Login to docker hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
+          password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}
+      - name: Build the image
+        run: bash ./scripts/docker/build

.github/workflows/publish-release.yml

@@ -0,0 +1,27 @@
+name: Publish release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  build:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Use node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16.13
+      - name: Generate release assets
+        run: npm ci && VERSION=${GITHUB_REF#refs/tags/v} npm run build:dist
+      - name: Publish release with assets
+        uses: docker://antonyurchenko/git-release:latest
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ALLOW_EMPTY_CHANGELOG: "true"
+        with:
+          args: |
+            dist/shlink-web-client_*_dist.zip

.scrutinizer.yml

@@ -1,6 +0,0 @@
-build:
-  environment:
-    node: v12.14.1
-tools:
-  external_code_coverage:
-    timeout: 1200

.travis.yml

@@ -1,45 +0,0 @@
-language: node_js
-
-node_js:
-  - "12.14.1"
-
-cache:
-  directories:
-    - node_modules
-
-services:
-  - docker
-
-install:
-  - npm ci
-
-before_script:
-  - echo "Building commit range ${TRAVIS_COMMIT_RANGE}"
-  - export MUTATION_FILES=$(git diff ${TRAVIS_COMMIT_RANGE:-origin/master} --name-only | grep -E 'src\/(.*).(js|ts|jsx|tsx)$' | paste -sd ",")
-
-script:
-  - npm run lint
-  - npm run test:ci
-  - if [[ $TRAVIS_PULL_REQUEST != 'false' ]]; then docker build -t shlink-web-client:test . ; fi
-  - if [[ $TRAVIS_PULL_REQUEST != 'false' ]]; then npm run mutate:ci ; fi
-
-after_success:
-  - node_modules/.bin/ocular coverage/clover.xml
-
-# Before deploying, build dist file for current travis tag
-before_deploy:
-  - if [[ ! -z $TRAVIS_TAG ]]; then npm run build ${TRAVIS_TAG#?} ; fi
-
-deploy:
-  - provider: script
-    script: bash ./scripts/docker/build
-    on:
-      all_branches: true
-      condition: $TRAVIS_PULL_REQUEST == 'false'
-  - provider: releases
-    api_key:
-      secure: jBvPwC7EAbViaNR83rwMSt5XQDK0Iu9rgvEMa7GoyShbHcvUCCPd73Tu9quNpKi6NKsDY3INHgtch3vgonjGNGDGJ+yDyIBzXcvsAX2x3UcHpRbgY12uiINVmQxBI1+OVQB016Nm+cKC/i5Z36K4EmDbYfo+MrKndngM6AjcQFTwI8EwniIMaQgg4gNes//K8NhP5u0c3gwG+Q6jEGnq6uH3kcRgh6/epIZYpQyxjqWqKwF77sgcYj+X2Nf6XxtB5neuCi301UKLoLx8G0skh/Lm6KAIO4s9iIhIFa3UpoF21Ka0TxLpd2JxalLryCnFGlWWE6lxC9Htmc0TeRowJQlGdJXCskJ37xT9MljKY0fwNMu06VS/FUgykuCv+jP3zQu51pKu7Ew7+WeNPjautoOTu54VkdGyHcf2ThBNEyJQuiEwAQe4u7yAxY6R5ovEdvHBSIg4w1E5/Mxy5SMTCUlIAv6H7QQ1X9Z/zJm9HH5KeKz5tsHvQ/RIdSpgHXq/tC8o4Yup/LCFucXfrgvy/8pJoO1UpOlmvm62974NFfo0EG5YWwv6brUqz3QXpMjb8sWqgjltYMYJX3J7WZ34rIc+zt4NAmfhqgczaOC4pUGCiJ8jX3rMWIaQRn1AJ+5V337jL9fNDpTHny4phQjHrMJ1e0HZuNp0Xb5Q8wgqDPM=
-    file: "./dist/shlink-web-client_${TRAVIS_TAG#?}_dist.zip"
-    skip_cleanup: true
-    on:
-      tags: true

CONTRIBUTING.md

@@ -0,0 +1,72 @@
+# Contributing
+
+This file will guide you through the process of getting to project up and running, in case you want to provide coding contributions.
+
+You will also see how to ensure the code fulfills the expected code checks, and how to create a pull request.
+
+## System dependencies
+
+The project can be run inside a docker container through provided docker-compose configuration.
+
+Because of this, the only actual dependencies are [docker](https://docs.docker.com/get-docker/) and [docker-compose](https://docs.docker.com/compose/install/).
+
+## Setting up the project
+
+The first thing you need to do is fork the repository, and clone it in your local machine.
+
+Then you will have to follow these steps:
+
+* Copy the file `docker-compose.override.yml.dist` by also removing the `dist` extension.
+* Start-up the project by running `docker-compose up`.
+
+Once this is finished, you will have the project exposed in port `3000` (http://localhost:3000).
+
+## Project structure
+
+This project is a [react](https://reactjs.org/) & [redux](https://redux.js.org/) application, built with [typescript](https://www.typescriptlang.org/), which is distributed as a 100% client-side progressive web application.
+
+This is the basic project structure:
+
+```
+shlink-web-client
+├── config
+├── public
+├── scripts
+├── src
+├── test
+├── package.json
+└── README.md
+```
+
+* `config`: It contains some configuration scripts, used during testing, linting and building of the project.
+* `public`: Will act as the application document root once built, and contains some static assets (favicons, images, etc).
+* `scripts`: It has some of the CLI scripts used to run tests or building.
+* `src`: Contains the main source code of the application, including both web components, SASS stylesheets and files with logic.
+* `test`: Contains the project tests.
+
+## Running code checks
+
+> Note: The `indocker` shell script is a helper used to run commands inside the docker container.
+
+* `./indocker npm run lint`: Checks coding styles are fulfilled, both in JS/TS files as well as in stylesheets.
+* `./indocker npm run lint:js`: Checks coding styles are fulfilled in JS/TS files.
+* `./indocker npm run lint:css`: Checks coding styles are fulfilled in stylesheets.
+* `./indocker npm run lint:js:fix`: Fixes coding styles in JS/TS files.
+* `./indocker npm run lint:css:fix`: Fixes coding styles in stylesheets.
+* `./indocker npm run test`: Runs unit tests with Jest.
+* `./indocker npm run mutate`: Runs mutation tests with StrykerJS (this command can be very slow).
+
+## Building the project
+
+The source code in this project cannot be run directly in a web browser, you need to build it first.
+
+* `./indocker npm run build`: Builds the project using a combination of `webpack`, `babel` and `tsc`, generating the final static files. The content is placed in the `build` folder, which is automatically created if it does not exist.
+* `./indocker npm run serve:build`: Serves the static files inside the `build` folder in port 5000 (http://localhost:5000). Useful to test the content built with previous command.
+
+## Pull request process
+
+In order to provide pull requests to this project, you should always start by creating a new branch, where you will make all desired changes.
+
+The base branch should always be `main`, and the target branch for the pull request should also be `main`.
+
+Before your branch can be merged, all the checks described in [Running code checks](#running-code-checks) have to be passing. You can verify that manually, or wait for the build to be run automatically after the pull request is created.

Dockerfile

@@ -1,17 +1,12 @@
-FROM node:12.14.1-alpine as node
+FROM node:16.13-alpine as node
 COPY . /shlink-web-client
 ARG VERSION="latest"
 ENV VERSION ${VERSION}
-RUN cd /shlink-web-client && \
-    UNCOMPRESSED="shlink-web-client_${VERSION}_dist" && \
-    DIST_FILE="./dist/${UNCOMPRESSED}.zip" && \
-    # If a dist file already exists, just unzip it
-    if [[ -f ${DIST_FILE} ]]; then unzip ${DIST_FILE} && mv ./${UNCOMPRESSED} ./build ; fi && \
-    # If no dist file exsts, build from scratch
-    if [[ ! -f ${DIST_FILE} ]]; then npm install && npm run build -- ${VERSION} --no-dist ; fi
+RUN cd /shlink-web-client && npm ci && npm run build
 
-FROM nginx:1.17.7-alpine
+FROM nginx:1.21-alpine
 LABEL maintainer="Alejandro Celaya <alejandro@alejandrocelaya.com>"
 RUN rm -r /usr/share/nginx/html && rm /etc/nginx/conf.d/default.conf
 COPY config/docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY scripts/docker/servers_from_env.sh /docker-entrypoint.d/30-shlink-servers-json.sh
 COPY --from=node /shlink-web-client/build /usr/share/nginx/html

README.md

@@ -1,17 +1,19 @@
 # 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/g/shlinkio/shlink-web-client/?branch=master)
-[![Scrutinizer Code Quality](https://img.shields.io/scrutinizer/g/shlinkio/shlink-web-client.svg?style=flat-square)](https://scrutinizer-ci.com/g/shlinkio/shlink-web-client/?branch=master)
+[![Build Status](https://img.shields.io/github/workflow/status/shlinkio/shlink-web-client/Continuous%20integration/develop?logo=github&style=flat-square)](https://github.com/shlinkio/shlink-web-client/actions?query=workflow%3A%22Continuous+integration%22)
+[![Code Coverage](https://img.shields.io/codecov/c/gh/shlinkio/shlink-web-client/develop?style=flat-square)](https://app.codecov.io/gh/shlinkio/shlink-web-client)
 [![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)
-[![Docker pulls](https://img.shields.io/docker/pulls/shlinkio/shlink-web-client.svg?style=flat-square)](https://hub.docker.com/r/shlinkio/shlink-web-client/)
-[![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)
+[![Docker pulls](https://img.shields.io/docker/pulls/shlinkio/shlink-web-client.svg?logo=docker&style=flat-square)](https://hub.docker.com/r/shlinkio/shlink-web-client/)
+[![GitHub license](https://img.shields.io/github/license/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/blob/main/LICENSE)
+[![Twitter](https://img.shields.io/twitter/follow/shlinkio?color=blue&label=follow&logo=twitter&style=flat-square)](https://twitter.com/shlinkio)
 [![Paypal Donate](https://img.shields.io/badge/Donate-paypal-blue.svg?style=flat-square&logo=paypal&colorA=cccccc)](https://slnk.to/donate)
 
 A ReactJS-based progressive web application for [Shlink](https://shlink.io).
 
 ![shlink-web-client](shlink-web-client.gif)
 
+> If you are trying to find out how to run the project in development mode or how to provide contributions, read the [CONTRIBUTING](CONTRIBUTING.md) doc.
+
 ## Installation
 
 There are three ways in which you can use this application.
@@ -67,6 +69,33 @@ Those servers can be exported and imported in other browsers, but if for some re
 If you are using the shlink-web-client docker image, you can mount the `servers.json` file in a volume inside `/usr/share/nginx/html`, which is the app's document root inside the container.
 
     docker run --name shlink-web-client -p 8000:80 -v ${PWD}/servers.json:/usr/share/nginx/html/servers.json shlinkio/shlink-web-client
+    
+Alternatively, you can mount a `conf.d` directory, which in turn contains the `servers.json` file, in a volume inside `/usr/share/nginx/html`. *(since shlink-web-client 3.2.0)*.
+
+    docker run --name shlink-web-client -p 8000:80 -v ${PWD}/my-config/:/usr/share/nginx/html/conf.d/ shlinkio/shlink-web-client
+    
+If you want to pre-configure a single server, you can provide its config via env vars. When the container starts up, it will build the `servers.json` file dynamically based on them. *(since shlink-web-client 3.2.0)*.
+
+  * `SHLINK_SERVER_URL`: The fully qualified URL for the Shlink server.
+  * `SHLINK_SERVER_API_KEY`: The API key.
+  * `SHLINK_SERVER_NAME`: The name to be displayed. Defaults to **Shlink** if not provided.
+
+    ```shell
+    docker run \
+        --name shlink-web-client \
+        -p 8000:80 \
+        -e SHLINK_SERVER_URL=https://doma.in \
+        -e SHLINK_SERVER_API_KEY=6aeb82c6-e275-4538-a747-31f9abfba63c \
+        shlinkio/shlink-web-client
+    ```
+
+> **Be extremely careful when using this feature.**
+>
+> Due to shlink-web-client's client-side nature, the file needs to be accessible from the browser.
+>
+> Because of that, make sure you use this only when you self-host shlink-web-client, and you know only trusted people will have access to it.
+>
+> Failing to do this could cause your API keys to end up being exposed.
 
 ## Serve project in subpath
 

babel.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  presets: [
+    [
+      'react-app',
+      {
+        runtime: 'automatic',
+        typescript: true,
+      },
+    ],
+  ],
+  plugins: [
+    '@babel/plugin-proposal-optional-chaining',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+  ],
+};

config/docker/nginx.conf

@@ -4,11 +4,31 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
+    # Expire rules for static content
+    # HTML files should never be cached. There's only one here, which is the entry point (index.html)
+    location ~* \.(?:manifest|appcache|html?|xml|json)$ {
+       expires -1;
+    }
+    # Images and other binary assets can be saved for a month
+    location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
+        expires 1M;
+        add_header Cache-Control "public";
+    }
+    # JS and CSS files can be saved for a year, as they are always hashed. New versions will include a new hash anyway, forcing the download
+    location ~* \.(?:css|js)$ {
+        expires 1y;
+        add_header Cache-Control "public";
+    }
+
+    # servers.json may be on the root, or in conf.d directory
+    location = /servers.json {
+        try_files /servers.json /conf.d/servers.json;
+    }
+
     # When requesting static paths with extension, try them, and return a 404 if not found
     location ~* .+\.(css|js|html|png|jpe?g|gif|bmp|ico|json|csv|otf|eot|svg|svgz|ttf|woff|woff2|ijmap|pdf|tif|map) {
         try_files $uri $uri/ =404;
     }
-
     # When requesting a path without extension, try it, and return the index if not found
     # This allows HTML5 history paths to be handled by the client application
     location / {

config/env.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing, @typescript-eslint/promise-function-async, @typescript-eslint/prefer-optional-chain */
 
 const fs = require('fs');
 const path = require('path');
@@ -10,7 +11,7 @@ const { NODE_ENV } = process.env;
 
 if (!NODE_ENV) {
   throw new Error(
-    'The NODE_ENV environment variable is required but was not specified.'
+    'The NODE_ENV environment variable is required but was not specified.',
   );
 }
 
@@ -36,7 +37,7 @@ dotenvFiles.forEach((dotenvFile) => {
     require('dotenv-expand')(
       require('dotenv').config({
         path: dotenvFile,
-      })
+      }),
     );
   }
 });
@@ -82,7 +83,7 @@ function getClientEnvironment(publicUrl) {
         // This should only be used as an escape hatch. Normally you would put
         // images into the `src` and `import` them in code to get their paths.
         PUBLIC_URL: publicUrl,
-      }
+      },
     );
 
   // Stringify all values so we can feed into Webpack DefinePlugin

config/jest/cssTransform.js

@@ -1,13 +0,0 @@
-
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process() {
-    return 'module.exports = {};';
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
-  },
-};

config/paths.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing, @typescript-eslint/promise-function-async, @typescript-eslint/prefer-optional-chain */
 
 const path = require('path');
 const fs = require('fs');
@@ -82,6 +83,7 @@ module.exports = {
   appNodeModules: resolveApp('node_modules'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
   servedPath: getServedPath(resolveApp('package.json')),
+  swSrc: resolveModule(resolveApp, 'src/service-worker'),
 };
 
 module.exports.moduleFileExtensions = moduleFileExtensions;

config/setupEnzyme.js

@@ -1,4 +1,4 @@
 import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
 Enzyme.configure({ adapter: new Adapter() });

config/webpack.config.js

@@ -33,6 +33,9 @@ const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
 
+// Get the path to the uncompiled service worker (if it exists).
+const swSrc = paths.swSrc;
+
 // style files regexes
 const cssRegex = /\.css$/;
 const cssModuleRegex = /\.module\.css$/;
@@ -75,7 +78,7 @@ module.exports = (webpackEnv) => {
         loader: MiniCssExtractPlugin.loader,
         options: Object.assign(
           {},
-          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
+          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined,
         ),
       },
       {
@@ -227,7 +230,7 @@ module.exports = (webpackEnv) => {
 
               // Turned on because emoji and regex is not minified properly using default
               // https://github.com/facebook/create-react-app/issues/2488
-              ascii_only: true,
+              ascii_only: true, // eslint-disable-line @typescript-eslint/camelcase
             },
           },
 
@@ -281,7 +284,7 @@ module.exports = (webpackEnv) => {
       modules: [ 'node_modules' ].concat(
 
         // It is guaranteed to exist because we tweak it in `env.js`
-        process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
+        process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
       ),
 
       // These are the reasonable defaults supported by the Node ecosystem.
@@ -372,7 +375,7 @@ module.exports = (webpackEnv) => {
               loader: require.resolve('babel-loader'),
               options: {
                 customize: require.resolve(
-                  'babel-preset-react-app/webpack-overrides'
+                  'babel-preset-react-app/webpack-overrides',
                 ),
 
                 plugins: [
@@ -470,7 +473,7 @@ module.exports = (webpackEnv) => {
                   importLoaders: 2,
                   sourceMap: isEnvProduction && shouldUseSourceMap,
                 },
-                'sass-loader'
+                'sass-loader',
               ),
 
               // Don't consider CSS imports dead code even if the
@@ -491,7 +494,7 @@ module.exports = (webpackEnv) => {
                   modules: true,
                   getLocalIdent: getCSSModuleLocalIdent,
                 },
-                'sass-loader'
+                'sass-loader',
               ),
             },
 
@@ -544,8 +547,8 @@ module.exports = (webpackEnv) => {
                 minifyURLs: true,
               },
             }
-            : undefined
-        )
+            : undefined,
+        ),
       ),
 
       // Inlines the webpack runtime script. This script is too small to warrant
@@ -612,23 +615,16 @@ module.exports = (webpackEnv) => {
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
 
       // Generate a service worker script that will precache, and keep up to date,
-      // the HTML & assets that are part of the Webpack build.
-      isEnvProduction &&
-        new WorkboxWebpackPlugin.GenerateSW({
-          clientsClaim: true,
-          exclude: [ /\.map$/, /asset-manifest\.json$/ ],
-          importWorkboxFrom: 'cdn',
-          navigateFallback: `${publicUrl}/index.html`,
-          navigateFallbackBlacklist: [
-
-            // Exclude URLs starting with /_, as they're likely an API call
-            new RegExp('^/_'),
-
-            // Exclude URLs containing a dot, as they're likely a resource in
-            // public/ and not a SPA route
-            new RegExp('/[^/]+\\.[^/]+$'),
-          ],
-        }),
+      // the HTML & assets that are part of the webpack build.
+      isEnvProduction && fs.existsSync(swSrc) && new WorkboxWebpackPlugin.InjectManifest({
+        swSrc,
+        dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
+        exclude: [ /\.map$/, /asset-manifest\.json$/, /LICENSE/ ],
+        // Bump up the default maximum size (2mb) that's precached,
+        // to make lazy-loading failure scenarios less likely.
+        // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
+        maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+      }),
 
       // TypeScript type checking
       useTypeScript &&
@@ -668,7 +664,7 @@ module.exports = (webpackEnv) => {
       fs: 'empty',
       net: 'empty',
       tls: 'empty',
-      child_process: 'empty',
+      child_process: 'empty', // eslint-disable-line @typescript-eslint/camelcase
     },
 
     // Turn off performance processing because we utilize

config/webpackDevServer.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 
 const fs = require('fs');
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
@@ -109,7 +110,7 @@ module.exports = function(proxy, allowedHost) {
       // We do this in development to avoid hitting the production cache if
       // it used the same host and port.
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      app.use(noopServiceWorkerMiddleware());
+      app.use(noopServiceWorkerMiddleware(paths.publicUrl));
     },
   };
 };

docker-compose.yml

@@ -3,7 +3,7 @@ version: '3'
 services:
   shlink_web_client_node:
     container_name: shlink_web_client_node
-    image: node:12.14.1-alpine
+    image: node:16.13-alpine
     command: /bin/sh -c "cd /home/shlink/www && npm install && npm run start"
     volumes:
       - ./:/home/shlink/www

docs/adr/2021-10-31-how-to-handle-setting-auto-connect-on-servers.md

@@ -0,0 +1,51 @@
+# How to handle setting auto-connect on servers
+
+* Status: Accepted
+* Date: 2021-10-31
+
+## Context and problem statement
+
+A new feature has been requested, to allow auto-connecting to servers. The request specifically mentioned doing it automatically when there's only one server configured, but it can be extended a bit to allow setting an "auto-connect" server, regardless the number of configured servers.
+
+At all times, no more than one server can be set to "auto-connect" simultaneously. Setting a new one will effectively unset the previous one, if any.
+
+## Considered option
+
+* Auto-connect only of there's a single server configured.
+* Allow to set the server as "auto-connect" during server creation, edition or import.
+* Allow to set the server as "auto-connect" on a separated flow, where the full list of servers can be handled.
+
+## Decision outcome
+
+In order to make it more flexible, any server will be allowed to be set as "auto-connect", regardless the amount of configured servers.
+
+Auto-connect will be handled from the new "Manage servers" section.
+
+## Pros and Cons of the Options
+
+### Only one server
+
+* Good:
+  * Does not require extending models, and the logic to auto-connect is based on the amount of configured servers.
+* Bad:
+  * It's not flexible enough.
+  * Makes the app behave differently depending on the amount of configured servers, making it confusing.
+
+### Auto-connect configured on existing creation/edition/import
+
+* Good:
+  * Does not require creating a new section to handle "auto-connect".
+* Bad:
+  * Requires extending the server model with a new prop.
+  * It's much harder to ensure data consistency, as we need to ensure only one server is set to "auto-connect".
+  * On import, many servers might have been set to "auto-connect". The expected behavior there can be unclear.
+
+### Auto-connect configured on new section
+
+* Good:
+  * It's much easier to ensure data consistency.
+  * It's much more clear and predictable, as the UI shows which is the server configured as auto-connect.
+  * We have controls in a single place to set/unset auto connect on servers, allowing only the proper option based on current state for every server.
+* Bad:
+  * Requires extending the server model with a new prop.
+    * Requires creating a new section to handle "auto-connect".

docs/adr/README.md

@@ -0,0 +1,5 @@
+# Architectural Decision Records
+
+Here listed you will find the different architectural decisions taken in the project, including all the reasoning behind it, options considered, and final outcome.
+
+* [2021-10-31 How to handle setting auto-connect on servers](2021-10-31-how-to-handle-setting-auto-connect-on-servers.md)

jest.config.js

@@ -1,44 +1,37 @@
 module.exports = {
   coverageDirectory: '<rootDir>/coverage',
   collectCoverageFrom: [
-    'src/**/*.js',
-    '!src/registerServiceWorker.js',
-    '!src/index.js',
-    '!src/reducers/index.js',
-    '!src/**/provideServices.js',
-    '!src/container/*.js',
+    'src/**/*.{ts,tsx}',
+    '!src/*.{ts,tsx}',
+    '!src/reducers/index.ts',
+    '!src/**/provideServices.ts',
+    '!src/container/*.ts',
   ],
-  resolver: 'jest-pnp-resolver',
-  setupFiles: [
-    'react-app-polyfill/jsdom',
-    '<rootDir>/config/setupEnzyme.js',
-  ],
-  testMatch: [ '<rootDir>/test/**/*.test.{js,jsx,ts,tsx}' ],
+  coverageThreshold: {
+    global: {
+      statements: 85,
+      branches: 80,
+      functions: 80,
+      lines: 85,
+    },
+  },
+  setupFiles: [ '<rootDir>/config/setupEnzyme.js' ],
+  testMatch: [ '<rootDir>/test/**/*.test.{ts,tsx}' ],
   testEnvironment: 'jsdom',
   testURL: 'http://localhost',
   transform: {
-    '^.+\\.(js|jsx|mjs)$': '<rootDir>/node_modules/babel-jest',
-    '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
-    '^(?!.*\\.(js|jsx|mjs|css|json)$)': '<rootDir>/config/jest/fileTransform.js',
+    '^.+\\.(ts|tsx|js)$': '<rootDir>/node_modules/babel-jest',
+    '^(?!.*\\.(ts|tsx|js|json)$)': '<rootDir>/config/jest/fileTransform.js',
   },
   transformIgnorePatterns: [
+    '<rootDir>/.stryker-tmp',
     '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
-    '^.+\\.module\\.(css|sass|scss)$',
+    '^.+\\.module\\.scss$',
   ],
   moduleNameMapper: {
-    '^react-native$': 'react-native-web',
-    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+    '^.+\\.module\\.scss$': 'identity-obj-proxy',
+    // Reactstrap module resolution does not work in jest for some reason. Manually mapping it solves the problem
+    'reactstrap': '<rootDir>/node_modules/reactstrap/dist/reactstrap.umd.js',
   },
-  moduleFileExtensions: [
-    'web.js',
-    'js',
-    'web.ts',
-    'ts',
-    'web.tsx',
-    'tsx',
-    'json',
-    'web.jsx',
-    'jsx',
-    'node',
-  ],
+  moduleFileExtensions: [ 'js', 'ts', 'tsx', 'json' ],
 };

package.json

@@ -1,149 +1,148 @@
 {
   "name": "shlink-web-client",
   "description": "A React-based progressive web application for shlink",
-  "version": "2.3.0",
   "private": false,
   "homepage": "",
   "repository": "https://github.com/shlinkio/shlink-web-client",
   "license": "MIT",
   "scripts": {
-    "lint": "npm run lint:js && npm run lint:css",
-    "lint:js": "eslint src test scripts config",
-    "lint:js:fix": "npm run lint:js -- --fix",
+    "lint": "npm run lint:css && npm run lint:js",
     "lint:css": "stylelint src/*.scss src/**/*.scss",
+    "lint:js": "eslint --ext .js,.ts,.tsx src test",
+    "lint:fix": "npm run lint:css:fix && npm run lint:js:fix",
     "lint:css:fix": "npm run lint:css -- --fix",
+    "lint:js:fix": "npm run lint:js -- --fix",
     "start": "node scripts/start.js",
     "serve:build": "serve ./build",
-    "build": "node scripts/build.js",
-    "test": "node scripts/test.js --env=jsdom --colors",
-    "test:ci": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=clover",
-    "test:pretty": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=html",
-    "mutate": "./node_modules/.bin/stryker run",
-    "mutate:ci": "npm run mutate -- --mutate=$MUTATION_FILES"
+    "build": "node scripts/build.js && node scripts/replace-version.js",
+    "build:dist": "npm run build && node scripts/create-dist-file.js",
+    "test": "node scripts/test.js --env=jsdom --colors --verbose",
+    "test:coverage": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary",
+    "test:ci": "npm run test:coverage -- --coverageReporters=clover",
+    "test:pretty": "npm run test:coverage -- --coverageReporters=html",
+    "mutate": "./node_modules/.bin/stryker run --concurrency 4"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.11.2",
-    "@fortawesome/fontawesome-svg-core": "^1.2.25",
-    "@fortawesome/free-regular-svg-icons": "^5.11.2",
-    "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/react-fontawesome": "^0.1.5",
-    "array-filter": "^1.0.0",
-    "array-map": "^0.0.0",
-    "array-reduce": "^0.0.0",
-    "axios": "^0.19.0",
-    "bootstrap": "^4.3.1",
-    "bottlejs": "^1.7.2",
-    "bowser": "^2.9.0",
-    "chart.js": "^2.8.0",
-    "classnames": "^2.2.6",
-    "compare-versions": "^3.5.1",
+    "@fortawesome/fontawesome-free": "^6.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.3.0",
+    "@fortawesome/free-regular-svg-icons": "^6.0.0",
+    "@fortawesome/free-solid-svg-icons": "^6.0.0",
+    "@fortawesome/react-fontawesome": "^0.1.17",
+    "axios": "^0.26.0",
+    "bootstrap": "^5.1.3",
+    "bottlejs": "^2.0.0",
+    "bowser": "^2.11.0",
+    "chart.js": "^3.7.1",
+    "classnames": "^2.3.1",
+    "compare-versions": "^4.1.3",
     "csvjson": "^5.1.0",
-    "leaflet": "^1.5.1",
-    "moment": "^2.24.0",
-    "promise": "^8.0.3",
-    "prop-types": "^15.7.2",
-    "qs": "^6.9.0",
-    "ramda": "^0.26.1",
-    "react": "^16.13.1",
-    "react-autosuggest": "^9.4.3",
-    "react-chartjs-2": "^2.8.0",
-    "react-color": "^2.17.3",
-    "react-copy-to-clipboard": "^5.0.1",
-    "react-datepicker": "~1.5.0",
-    "react-dom": "^16.13.1",
-    "react-external-link": "^1.0.0",
-    "react-leaflet": "^2.4.0",
-    "react-moment": "^0.9.5",
-    "react-redux": "^7.1.1",
-    "react-router-dom": "^5.1.2",
-    "react-swipeable": "^5.4.0",
-    "react-tagsinput": "^3.19.0",
-    "reactstrap": "^8.0.1",
-    "redux": "^4.0.4",
-    "redux-actions": "^2.6.5",
-    "redux-thunk": "^2.3.0",
-    "uuid": "^3.3.3"
+    "date-fns": "^2.28.0",
+    "event-source-polyfill": "^1.0.25",
+    "leaflet": "^1.7.1",
+    "qs": "^6.9.6",
+    "ramda": "^0.27.2",
+    "react": "^17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-colorful": "^5.5.1",
+    "react-copy-to-clipboard": "^5.0.4",
+    "react-datepicker": "^4.7.0",
+    "react-dom": "^17.0.2",
+    "react-external-link": "^1.2.2",
+    "react-leaflet": "^3.2.5",
+    "react-redux": "^7.2.6",
+    "react-router-dom": "^6.2.2",
+    "react-swipeable": "^6.2.0",
+    "react-tag-autocomplete": "^6.3.0",
+    "reactstrap": "^9.0.1",
+    "redux": "^4.1.2",
+    "redux-localstorage-simple": "^2.4.1",
+    "redux-thunk": "^2.4.1",
+    "uuid": "^8.3.2",
+    "workbox-core": "^6.5.1",
+    "workbox-expiration": "^6.5.1",
+    "workbox-precaching": "^6.5.1",
+    "workbox-routing": "^6.5.1",
+    "workbox-strategies": "^6.5.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
-    "@stryker-mutator/core": "^2.1.0",
-    "@stryker-mutator/html-reporter": "^2.1.0",
-    "@stryker-mutator/javascript-mutator": "^2.1.0",
-    "@stryker-mutator/jest-runner": "^2.1.0",
-    "@svgr/webpack": "^4.3.3",
-    "adm-zip": "^0.4.13",
-    "autoprefixer": "^9.6.3",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-named-asset-import": "^0.3.4",
-    "babel-preset-react-app": "^9.0.2",
+    "@babel/core": "^7.17.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@shlinkio/eslint-config-js-coding-standard": "~1.2.2",
+    "@stryker-mutator/core": "^5.6.1",
+    "@stryker-mutator/jest-runner": "^5.6.1",
+    "@stryker-mutator/typescript-checker": "^5.6.1",
+    "@svgr/webpack": "^5.5.0",
+    "@types/classnames": "^2.3.1",
+    "@types/enzyme": "^3.10.11",
+    "@types/jest": "^27.4.1",
+    "@types/leaflet": "^1.7.9",
+    "@types/qs": "^6.9.7",
+    "@types/ramda": "0.27.38",
+    "@types/react": "^17.0.39",
+    "@types/react-color": "^3.0.6",
+    "@types/react-copy-to-clipboard": "^5.0.2",
+    "@types/react-datepicker": "^4.3.4",
+    "@types/react-dom": "^17.0.13",
+    "@types/react-leaflet": "^2.8.2",
+    "@types/react-redux": "^7.1.23",
+    "@types/react-tag-autocomplete": "^6.1.1",
+    "@types/uuid": "^8.3.4",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.5",
+    "adm-zip": "^0.5.9",
+    "autoprefixer": "^10.4.2",
+    "babel-jest": "^27.5.1",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-named-asset-import": "^0.3.8",
+    "babel-preset-react-app": "10.0.0",
     "babel-runtime": "^6.26.0",
-    "bfj": "^7.0.1",
-    "case-sensitive-paths-webpack-plugin": "^2.2.0",
-    "chalk": "^2.4.2",
-    "css-loader": "^3.2.0",
-    "dotenv": "^8.1.0",
+    "bfj": "^7.0.2",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "chalk": "^4.1.2",
+    "css-loader": "^5.0.1",
+    "dart-sass": "^1.25.0",
+    "dotenv": "^8.2.0",
     "dotenv-expand": "^5.1.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "eslint": "^5.11.1",
-    "eslint-config-adidas-babel": "^1.1.0",
-    "eslint-config-adidas-env": "^1.1.0",
-    "eslint-config-adidas-es6": "^1.2.0",
-    "eslint-config-adidas-react": "^1.1.1",
-    "eslint-loader": "^3.0.2",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jest": "^22.17.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.16.0",
-    "file-loader": "^4.2.0",
+    "eslint": "^7.13.0",
+    "eslint-loader": "^4.0.2",
+    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin-alt": "^0.4.14",
-    "fs-extra": "^8.1.0",
-    "html-webpack-plugin": "^4.0.0-beta.8",
+    "fs-extra": "^9.0.1",
+    "html-webpack-plugin": "^4.5.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.9.0",
-    "jest-pnp-resolver": "^1.2.1",
-    "jest-resolve": "^24.9.0",
-    "mini-css-extract-plugin": "^0.8.0",
-    "node-sass": "^4.12.0",
+    "jest": "^27.5.1",
+    "mini-css-extract-plugin": "^1.3.1",
     "object-assign": "^4.1.1",
-    "ocular.js": "^0.1.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "pnp-webpack-plugin": "^1.5.0",
-    "postcss": "^7.0.18",
-    "postcss-flexbugs-fixes": "^4.1.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "pnp-webpack-plugin": "^1.7.0",
+    "postcss": "^8.4.8",
+    "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
-    "postcss-safe-parser": "^4.0.1",
-    "raf": "^3.4.1",
-    "react-app-polyfill": "^1.0.4",
-    "react-dev-utils": "^9.1.0",
-    "resolve": "^1.12.0",
-    "sass-loader": "^8.0.0",
-    "serve": "^11.2.0",
-    "stryker-cli": "^1.0.0",
-    "style-loader": "^1.0.0",
-    "stylelint": "^9.10.1",
-    "stylelint-config-adidas": "^1.2.1",
+    "postcss-safe-parser": "^5.0.2",
+    "react-dev-utils": "^11.0.0",
+    "resolve": "^1.22.0",
+    "sass": "^1.49.9",
+    "sass-loader": "^10.1.0",
+    "serve": "^12.0.0",
+    "stryker-cli": "^1.0.2",
+    "style-loader": "^2.0.0",
+    "stylelint": "^13.7.2",
+    "stylelint-config-adidas": "^1.3.0",
     "stylelint-config-adidas-bem": "^1.2.0",
-    "stylelint-config-recommended-scss": "^4.0.0",
-    "stylelint-scss": "^3.11.1",
-    "sw-precache-webpack-plugin": "^0.11.5",
-    "terser-webpack-plugin": "^2.1.2",
-    "url-loader": "^2.2.0",
-    "webpack": "^4.41.0",
-    "webpack-dev-server": "^3.8.2",
+    "stylelint-config-recommended-scss": "^4.2.0",
+    "stylelint-scss": "^3.18.0",
+    "sw-precache-webpack-plugin": "^1.0.0",
+    "terser-webpack-plugin": "^4.2.3",
+    "ts-mockery": "^1.2.0",
+    "typescript": "^4.6.2",
+    "url-loader": "^4.1.1",
+    "webpack": "^4.46.0",
+    "webpack-dev-server": "^3.11.3",
     "webpack-manifest-plugin": "^2.2.0",
-    "whatwg-fetch": "^3.0.0",
-    "workbox-webpack-plugin": "^4.3.1"
-  },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
+    "whatwg-fetch": "^3.6.2",
+    "workbox-webpack-plugin": "^6.5.1"
   },
   "browserslist": [
     ">0.2%",

public/index.html

@@ -9,7 +9,7 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" crossorigin="use-credentials">
 
     <!-- FavIcon itself -->
     <link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico">

scripts/build.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-console */
+/* eslint-disable no-console, @typescript-eslint/prefer-nullish-coalescing, @typescript-eslint/promise-function-async, @typescript-eslint/prefer-optional-chain */
 
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'production';
@@ -18,7 +18,6 @@ const chalk = require('chalk');
 const fs = require('fs-extra');
 const webpack = require('webpack');
 const bfj = require('bfj');
-const AdmZip = require('adm-zip');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
@@ -43,9 +42,7 @@ if (!checkRequiredFiles([ paths.appHtml, paths.appIndexJs ])) {
 // Process CLI arguments
 const argvSliceStart = 2;
 const argv = process.argv.slice(argvSliceStart);
-const writeStatsJson = argv.indexOf('--stats') !== -1;
-const withoutDist = argv.indexOf('--no-dist') !== -1;
-const { version, hasVersion } = getVersionFromArgs(argv);
+const writeStatsJson = argv.includes('--stats');
 
 // Generate configuration
 const config = configFactory('production');
@@ -75,16 +72,15 @@ checkBrowsers(paths.appPath, isInteractive)
         console.log(
           `\nSearch for the ${
             chalk.underline(chalk.yellow('keywords'))
-          } to learn more about each warning.`
+          } to learn more about each warning.`,
         );
         console.log(
           `To ignore, add ${
             chalk.cyan('// eslint-disable-next-line')
-          } to the line before.\n`
+          } to the line before.\n`,
         );
       } else {
         console.log(chalk.green('Compiled successfully.\n'));
-        hasVersion && replaceVersionPlaceholder(version);
       }
 
       console.log('File sizes after gzip:\n');
@@ -93,7 +89,7 @@ checkBrowsers(paths.appPath, isInteractive)
         previousFileSizes,
         paths.appBuild,
         WARN_AFTER_BUNDLE_GZIP_SIZE,
-        WARN_AFTER_CHUNK_GZIP_SIZE
+        WARN_AFTER_CHUNK_GZIP_SIZE,
       );
       console.log();
     },
@@ -101,9 +97,8 @@ checkBrowsers(paths.appPath, isInteractive)
       console.log(chalk.red('Failed to compile.\n'));
       printBuildError(err);
       process.exit(1);
-    }
+    },
   )
-  .then(() => hasVersion && !withoutDist && zipDist(version))
   .catch((err) => {
     if (err && err.message) {
       console.log(err.message);
@@ -133,7 +128,7 @@ function build(previousFileSizes) {
         });
       } else {
         messages = formatWebpackMessages(
-          stats.toJson({ all: false, warnings: true, errors: true })
+          stats.toJson({ all: false, warnings: true, errors: true }),
         );
       }
       if (messages.errors.length) {
@@ -154,8 +149,8 @@ function build(previousFileSizes) {
         console.log(
           chalk.yellow(
             '\nTreating warnings as errors because process.env.CI = true.\n' +
-              'Most CI servers set it automatically.\n'
-          )
+              'Most CI servers set it automatically.\n',
+          ),
         );
 
         return reject(new Error(messages.warnings.join('\n\n')));
@@ -185,43 +180,3 @@ function copyPublicFolder() {
     filter: (file) => file !== paths.appHtml,
   });
 }
-
-function zipDist(version) {
-  const versionFileName = `./dist/shlink-web-client_${version}_dist.zip`;
-
-  console.log(chalk.cyan(`Generating dist file for version ${chalk.bold(version)}...`));
-  const zip = new AdmZip();
-
-  try {
-    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'));
-  } catch (e) {
-    console.log(chalk.red('An error occurred while generating dist file'));
-    console.log(e);
-  }
-  console.log();
-}
-
-function getVersionFromArgs(argv) {
-  const [ version ] = argv;
-
-  return { version, hasVersion: !!version };
-}
-
-function replaceVersionPlaceholder(version) {
-  const staticJsFilesPath = './build/static/js';
-  const versionPlaceholder = '%_VERSION_%';
-
-  const isMainFile = (file) => file.startsWith('main.') && file.endsWith('.js');
-  const [ mainJsFile ] = fs.readdirSync(staticJsFilesPath).filter(isMainFile);
-  const filePath = `${staticJsFilesPath}/${mainJsFile}`;
-  const fileContent = fs.readFileSync(filePath, 'utf-8');
-  const replaced = fileContent.replace(versionPlaceholder, version);
-
-  fs.writeFileSync(filePath, replaced, 'utf-8');
-}

scripts/create-dist-file.js

@@ -0,0 +1,36 @@
+/* eslint-disable no-console, @typescript-eslint/prefer-nullish-coalescing, @typescript-eslint/promise-function-async, @typescript-eslint/prefer-optional-chain */
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+const chalk = require('chalk');
+const AdmZip = require('adm-zip');
+const fs = require('fs-extra');
+
+function zipDist(version) {
+  const versionFileName = `./dist/shlink-web-client_${version}_dist.zip`;
+
+  console.log(chalk.cyan(`Generating dist file for version ${chalk.bold(version)}...`));
+  const zip = new AdmZip();
+
+  try {
+    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'));
+  } catch (e) {
+    console.log(chalk.red('An error occurred while generating dist file'));
+    console.log(e);
+  }
+  console.log();
+}
+
+const version = process.env.VERSION;
+
+if (version) {
+  zipDist(version);
+}

scripts/docker/build

@@ -1,13 +1,25 @@
 #!/bin/bash
-set -e
 
-echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
+set -ex
 
-if [[ -z $TRAVIS_TAG ]]; then
-  docker build -t shlinkio/shlink-web-client:latest .
-  docker push shlinkio/shlink-web-client:latest
+PLATFORMS="linux/arm/v7,linux/arm64/v8,linux/amd64"
+DOCKER_IMAGE="shlinkio/shlink-web-client"
+
+if [[ "$GITHUB_REF" == *"develop"* ]]; then
+  docker buildx build --push \
+    --platform ${PLATFORMS} \
+    -t ${DOCKER_IMAGE}:latest .
+
+# If ref is not develop, then this is a tag. Build that docker tag and also "stable"
 else
-  docker build --build-arg VERSION=${TRAVIS_TAG#?} -t shlinkio/shlink-web-client:${TRAVIS_TAG#?} -t shlinkio/shlink-web-client:stable .
-  docker push shlinkio/shlink-web-client:${TRAVIS_TAG#?}
-  docker push shlinkio/shlink-web-client:stable
+  VERSION=${GITHUB_REF#refs/tags/v}
+  TAGS="-t ${DOCKER_IMAGE}:${VERSION}"
+
+  # Push stable tag only if this is not an alpha or beta release
+  [[ $GITHUB_REF != *"alpha"* && $GITHUB_REF != *"beta"* ]] && TAGS="${TAGS} -t ${DOCKER_IMAGE}:stable"
+
+  docker buildx build --push \
+    --build-arg VERSION=${VERSION} \
+    --platform ${PLATFORMS} \
+    ${TAGS} .
 fi

scripts/docker/servers_from_env.sh

@@ -0,0 +1,16 @@
+#!/bin/sh
+
+set -e
+
+ME=$(basename $0)
+
+setup_single_shlink_server() {
+  [ -n "$SHLINK_SERVER_URL" ] || return 0
+  [ -n "$SHLINK_SERVER_API_KEY" ] || return 0
+  local name="${SHLINK_SERVER_NAME:-Shlink}"
+  echo "[{\"name\":\"${name}\",\"url\":\"${SHLINK_SERVER_URL}\",\"apiKey\":\"${SHLINK_SERVER_API_KEY}\"}]" > /usr/share/nginx/html/servers.json
+}
+
+setup_single_shlink_server
+
+exit 0

scripts/replace-version.js

@@ -0,0 +1,20 @@
+const fs = require('fs-extra');
+
+function replaceVersionPlaceholder(version) {
+  const staticJsFilesPath = './build/static/js';
+  const versionPlaceholder = '%_VERSION_%';
+
+  const isMainFile = (file) => file.startsWith('main.') && file.endsWith('.js');
+  const [ mainJsFile ] = fs.readdirSync(staticJsFilesPath).filter(isMainFile);
+  const filePath = `${staticJsFilesPath}/${mainJsFile}`;
+  const fileContent = fs.readFileSync(filePath, 'utf-8');
+  const replaced = fileContent.replace(versionPlaceholder, version);
+
+  fs.writeFileSync(filePath, replaced, 'utf-8');
+}
+
+const version = process.env.VERSION;
+
+if (version) {
+  replaceVersionPlaceholder(version);
+}

scripts/set-homepage.js

@@ -0,0 +1,13 @@
+const argv = process.argv.slice(2);
+const [ homepage ] = argv;
+
+if (!homepage) {
+  throw new Error('Homepage has to be provided as the first arg for this script');
+}
+
+const packageJsonPath = `${__dirname}/../package.json`;
+const packageJson = require(packageJsonPath);
+const fs = require('fs');
+
+packageJson.homepage = homepage;
+fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));

scripts/start.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-console */
+/* eslint-disable no-console, @typescript-eslint/prefer-nullish-coalescing, @typescript-eslint/promise-function-async, @typescript-eslint/prefer-optional-chain */
 
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'development';
@@ -49,15 +49,15 @@ if (process.env.HOST) {
   console.log(
     chalk.cyan(
       `Attempting to bind to HOST environment variable: ${chalk.yellow(
-        chalk.bold(process.env.HOST)
-      )}`
-    )
+        chalk.bold(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/CRA-advanced-config')}`
+    `Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`,
   );
   console.log();
 }
@@ -91,7 +91,7 @@ checkBrowsers(paths.appPath, isInteractive)
     // Serve webpack assets generated by the compiler over a web server.
     const serverConfig = createDevServerConfig(
       proxyConfig,
-      urls.lanUrlForConfig
+      urls.lanUrlForConfig,
     );
     const devServer = new WebpackDevServer(compiler, serverConfig);
 

shlink-web-client.d.ts

@@ -0,0 +1,17 @@
+declare module 'event-source-polyfill' {
+  declare class EventSourcePolyfill {
+    public onmessage?: ({ data }: { data: string }) => void;
+    public onerror?: ({ status }: { status: number }) => void;
+    public close: () => void;
+    public constructor(hubUrl: URL, options?: any);
+  }
+}
+
+declare module 'csvjson' {
+  export declare class CsvJson {
+    public toObject<T>(content: string): T[];
+    public toCSV<T>(data: T[], options: { headers: 'full' | 'none' | 'relative' | 'key'; wrap?: true }): string;
+  }
+}
+
+declare module '*.png'

src/App.js

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

src/App.scss

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

src/api/ShlinkApiError.tsx

@@ -0,0 +1,16 @@
+import { ProblemDetailsError } from './types';
+import { isInvalidArgumentError } from './utils';
+
+export interface ShlinkApiErrorProps {
+  errorData?: ProblemDetailsError;
+  fallbackMessage?: string;
+}
+
+export const ShlinkApiError = ({ errorData, fallbackMessage }: ShlinkApiErrorProps) => (
+  <>
+    {errorData?.detail ?? fallbackMessage}
+    {isInvalidArgumentError(errorData) &&
+      <p className="mb-0">Invalid elements: [{errorData.invalidElements.join(', ')}]</p>
+    }
+  </>
+);

src/api/services/ShlinkApiClient.ts

@@ -0,0 +1,137 @@
+import { isEmpty, isNil, reject } from 'ramda';
+import { AxiosInstance, AxiosResponse, Method } from 'axios';
+import { ShortUrl, ShortUrlData } from '../../short-urls/data';
+import { OptionalString } from '../../utils/utils';
+import {
+  ShlinkHealth,
+  ShlinkMercureInfo,
+  ShlinkShortUrlsResponse,
+  ShlinkTags,
+  ShlinkTagsResponse,
+  ShlinkVisits,
+  ShlinkVisitsParams,
+  ShlinkShortUrlData,
+  ShlinkDomainsResponse,
+  ShlinkVisitsOverview,
+  ShlinkEditDomainRedirects,
+  ShlinkDomainRedirects,
+  ShlinkShortUrlsListParams,
+  ShlinkShortUrlsListNormalizedParams,
+} from '../types';
+import { stringifyQuery } from '../../utils/helpers/query';
+import { orderToString } from '../../utils/helpers/ordering';
+
+const buildShlinkBaseUrl = (url: string) => url ? `${url}/rest/v2` : '';
+const rejectNilProps = reject(isNil);
+const normalizeOrderByInParams = (params: ShlinkShortUrlsListParams): ShlinkShortUrlsListNormalizedParams => {
+  const { orderBy = {}, ...rest } = params;
+
+  return { ...rest, orderBy: orderToString(orderBy) };
+};
+
+export default class ShlinkApiClient {
+  public constructor(
+    private readonly axios: AxiosInstance,
+    private readonly baseUrl: string,
+    private readonly apiKey: string,
+  ) {
+  }
+
+  public readonly listShortUrls = async (params: ShlinkShortUrlsListParams = {}): Promise<ShlinkShortUrlsResponse> =>
+    this.performRequest<{ shortUrls: ShlinkShortUrlsResponse }>('/short-urls', 'GET', normalizeOrderByInParams(params))
+      .then(({ data }) => data.shortUrls);
+
+  public readonly createShortUrl = async (options: ShortUrlData): Promise<ShortUrl> => {
+    const filteredOptions = reject((value) => isEmpty(value) || isNil(value), options as any);
+
+    return this.performRequest<ShortUrl>('/short-urls', 'POST', {}, filteredOptions)
+      .then((resp) => resp.data);
+  };
+
+  public readonly getShortUrlVisits = async (shortCode: string, query?: ShlinkVisitsParams): Promise<ShlinkVisits> =>
+    this.performRequest<{ visits: ShlinkVisits }>(`/short-urls/${shortCode}/visits`, 'GET', query)
+      .then(({ data }) => data.visits);
+
+  public readonly getTagVisits = async (tag: string, query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
+    this.performRequest<{ visits: ShlinkVisits }>(`/tags/${tag}/visits`, 'GET', query)
+      .then(({ data }) => data.visits);
+
+  public readonly getOrphanVisits = async (query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
+    this.performRequest<{ visits: ShlinkVisits }>('/visits/orphan', 'GET', query)
+      .then(({ data }) => data.visits);
+
+  public readonly getNonOrphanVisits = async (query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
+    this.performRequest<{ visits: ShlinkVisits }>('/visits/non-orphan', 'GET', query)
+      .then(({ data }) => data.visits);
+
+  public readonly getVisitsOverview = async (): Promise<ShlinkVisitsOverview> =>
+    this.performRequest<{ visits: ShlinkVisitsOverview }>('/visits', 'GET')
+      .then(({ data }) => data.visits);
+
+  public readonly getShortUrl = async (shortCode: string, domain?: OptionalString): Promise<ShortUrl> =>
+    this.performRequest<ShortUrl>(`/short-urls/${shortCode}`, 'GET', { domain })
+      .then(({ data }) => data);
+
+  public readonly deleteShortUrl = async (shortCode: string, domain?: OptionalString): Promise<void> =>
+    this.performRequest(`/short-urls/${shortCode}`, 'DELETE', { domain })
+      .then(() => {});
+
+  // eslint-disable-next-line valid-jsdoc
+  /**
+   * @deprecated. If using Shlink 2.6.0 or greater, use updateShortUrl instead
+   */
+  public readonly updateShortUrlTags = async (
+    shortCode: string,
+    domain: OptionalString,
+    tags: string[],
+  ): Promise<string[]> =>
+    this.performRequest<{ tags: string[] }>(`/short-urls/${shortCode}/tags`, 'PUT', { domain }, { tags })
+      .then(({ data }) => data.tags);
+
+  public readonly updateShortUrl = async (
+    shortCode: string,
+    domain: OptionalString,
+    data: ShlinkShortUrlData,
+  ): Promise<ShortUrl> =>
+    this.performRequest<ShortUrl>(`/short-urls/${shortCode}`, 'PATCH', { domain }, data)
+      .then(({ data }) => data);
+
+  public readonly listTags = async (): Promise<ShlinkTags> =>
+    this.performRequest<{ tags: ShlinkTagsResponse }>('/tags', 'GET', { withStats: 'true' })
+      .then((resp) => resp.data.tags)
+      .then(({ data, stats }) => ({ tags: data, stats }));
+
+  public readonly deleteTags = async (tags: string[]): Promise<{ tags: string[] }> =>
+    this.performRequest('/tags', 'DELETE', { tags })
+      .then(() => ({ tags }));
+
+  public readonly editTag = async (oldName: string, newName: string): Promise<{ oldName: string; newName: string }> =>
+    this.performRequest('/tags', 'PUT', {}, { oldName, newName })
+      .then(() => ({ oldName, newName }));
+
+  public readonly health = async (): Promise<ShlinkHealth> =>
+    this.performRequest<ShlinkHealth>('/health', 'GET')
+      .then((resp) => resp.data);
+
+  public readonly mercureInfo = async (): Promise<ShlinkMercureInfo> =>
+    this.performRequest<ShlinkMercureInfo>('/mercure-info', 'GET')
+      .then((resp) => resp.data);
+
+  public readonly listDomains = async (): Promise<ShlinkDomainsResponse> =>
+    this.performRequest<{ domains: ShlinkDomainsResponse }>('/domains', 'GET').then(({ data }) => data.domains);
+
+  public readonly editDomainRedirects = async (
+    domainRedirects: ShlinkEditDomainRedirects,
+  ): Promise<ShlinkDomainRedirects> =>
+    this.performRequest<ShlinkDomainRedirects>('/domains/redirects', 'PATCH', {}, domainRedirects).then(({ data }) => data);
+
+  private readonly performRequest = async <T>(url: string, method: Method = 'GET', query = {}, body = {}): Promise<AxiosResponse<T>> =>
+    this.axios({
+      method,
+      url: `${buildShlinkBaseUrl(this.baseUrl)}${url}`,
+      headers: { 'X-Api-Key': this.apiKey },
+      params: rejectNilProps(query),
+      data: body,
+      paramsSerializer: stringifyQuery,
+    });
+}

src/api/services/ShlinkApiClientBuilder.ts

@@ -0,0 +1,36 @@
+import { AxiosInstance } from 'axios';
+import { prop } from 'ramda';
+import { hasServerData, SelectedServer, ServerWithId } from '../../servers/data';
+import { GetState } from '../../container/types';
+import ShlinkApiClient from './ShlinkApiClient';
+
+const apiClients: Record<string, ShlinkApiClient> = {};
+
+const isGetState = (getStateOrSelectedServer: GetState | ServerWithId): getStateOrSelectedServer is GetState =>
+  typeof getStateOrSelectedServer === 'function';
+const getSelectedServerFromState = (getState: GetState): SelectedServer => prop('selectedServer', getState());
+
+export type ShlinkApiClientBuilder = (getStateOrSelectedServer: GetState | ServerWithId) => ShlinkApiClient;
+
+const buildShlinkApiClient = (axios: AxiosInstance): ShlinkApiClientBuilder => (
+  getStateOrSelectedServer: GetState | ServerWithId,
+) => {
+  const server = isGetState(getStateOrSelectedServer)
+    ? getSelectedServerFromState(getStateOrSelectedServer)
+    : getStateOrSelectedServer;
+
+  if (!hasServerData(server)) {
+    throw new Error('There\'s no selected server or it is not found');
+  }
+
+  const { url, apiKey } = server;
+  const clientKey = `${url}_${apiKey}`;
+
+  if (!apiClients[clientKey]) {
+    apiClients[clientKey] = new ShlinkApiClient(axios, url, apiKey);
+  }
+
+  return apiClients[clientKey];
+};
+
+export default buildShlinkApiClient;

src/api/services/provideServices.ts

@@ -0,0 +1,8 @@
+import Bottle from 'bottlejs';
+import buildShlinkApiClient from './ShlinkApiClientBuilder';
+
+const provideServices = (bottle: Bottle) => {
+  bottle.serviceFactory('buildShlinkApiClient', buildShlinkApiClient, 'axios');
+};
+
+export default provideServices;

src/api/types/actions.ts

@@ -0,0 +1,6 @@
+import { Action } from 'redux';
+import { ProblemDetailsError } from './index';
+
+export interface ApiErrorAction extends Action<string> {
+  errorData?: ProblemDetailsError;
+}

src/api/types/index.ts

@@ -0,0 +1,122 @@
+import { Visit } from '../../visits/types';
+import { OptionalString } from '../../utils/utils';
+import { ShortUrl, ShortUrlMeta, ShortUrlsOrder } from '../../short-urls/data';
+
+export interface ShlinkShortUrlsResponse {
+  data: ShortUrl[];
+  pagination: ShlinkPaginator;
+}
+
+export interface ShlinkMercureInfo {
+  token: string;
+  mercureHubUrl: string;
+}
+
+export interface ShlinkHealth {
+  status: 'pass' | 'fail';
+  version: string;
+}
+
+interface ShlinkTagsStats {
+  tag: string;
+  shortUrlsCount: number;
+  visitsCount: number;
+}
+
+export interface ShlinkTags {
+  tags: string[];
+  stats: ShlinkTagsStats[];
+}
+
+export interface ShlinkTagsResponse {
+  data: string[];
+  stats: ShlinkTagsStats[];
+}
+
+export interface ShlinkPaginator {
+  currentPage: number;
+  pagesCount: number;
+  totalItems: number;
+}
+
+export interface ShlinkVisits {
+  data: Visit[];
+  pagination: ShlinkPaginator;
+}
+
+export interface ShlinkVisitsOverview {
+  visitsCount: number;
+  orphanVisitsCount?: number; // Optional only for versions older than 2.6.0
+}
+
+export interface ShlinkVisitsParams {
+  domain?: OptionalString;
+  page?: number;
+  itemsPerPage?: number;
+  startDate?: string;
+  endDate?: string;
+  excludeBots?: boolean;
+}
+
+export interface ShlinkShortUrlData extends ShortUrlMeta {
+  longUrl?: string;
+  title?: string;
+  validateUrl?: boolean;
+  tags?: string[];
+}
+
+export interface ShlinkDomainRedirects {
+  baseUrlRedirect: string | null;
+  regular404Redirect: string | null;
+  invalidShortUrlRedirect: string | null;
+}
+
+export interface ShlinkEditDomainRedirects extends Partial<ShlinkDomainRedirects> {
+  domain: string;
+}
+
+export interface ShlinkDomain {
+  domain: string;
+  isDefault: boolean;
+  redirects?: ShlinkDomainRedirects; // Optional only for Shlink older than 2.8
+}
+
+export interface ShlinkDomainsResponse {
+  data: ShlinkDomain[];
+  defaultRedirects?: ShlinkDomainRedirects; // Optional only for Shlink older than 2.10
+}
+
+export type TagsFilteringMode = 'all' | 'any';
+
+export interface ShlinkShortUrlsListParams {
+  page?: string;
+  itemsPerPage?: number;
+  tags?: string[];
+  searchTerm?: string;
+  startDate?: string;
+  endDate?: string;
+  orderBy?: ShortUrlsOrder;
+  tagsMode?: TagsFilteringMode;
+}
+
+export interface ShlinkShortUrlsListNormalizedParams extends Omit<ShlinkShortUrlsListParams, 'orderBy'> {
+  orderBy?: string;
+}
+
+export interface ProblemDetailsError {
+  type: string;
+  detail: string;
+  title: string;
+  status: number;
+  [extraProps: string]: any;
+}
+
+export interface InvalidArgumentError extends ProblemDetailsError {
+  type: 'INVALID_ARGUMENT';
+  invalidElements: string[];
+}
+
+export interface InvalidShortUrlDeletion extends ProblemDetailsError {
+  type: 'INVALID_SHORTCODE_DELETION' | 'INVALID_SHORT_URL_DELETION';
+  threshold: number;
+}

src/api/utils/index.ts

@@ -0,0 +1,10 @@
+import { AxiosError } from 'axios';
+import { InvalidArgumentError, InvalidShortUrlDeletion, ProblemDetailsError } from '../types';
+
+export const parseApiError = (e: AxiosError<ProblemDetailsError>) => e.response?.data;
+
+export const isInvalidArgumentError = (error?: ProblemDetailsError): error is InvalidArgumentError =>
+  error?.type === 'INVALID_ARGUMENT';
+
+export const isInvalidDeletionError = (error?: ProblemDetailsError): error is InvalidShortUrlDeletion =>
+  error?.type === 'INVALID_SHORTCODE_DELETION' || error?.type === 'INVALID_SHORT_URL_DELETION';

src/app/App.scss

@@ -0,0 +1,26 @@
+@import '../utils/base';
+
+.app-container {
+  height: 100%;
+}
+
+.app {
+  padding-top: $headerHeight;
+  height: 100%;
+}
+
+.shlink-wrapper {
+  min-height: 100%;
+  padding-bottom: $footer-height + $footer-margin;
+  margin-bottom: -($footer-height + $footer-margin);
+}
+
+.shlink-footer {
+  height: $footer-height;
+  margin-top: $footer-margin;
+  padding: 0;
+
+  @media (min-width: $mdMin) {
+    padding: 0 15px;
+  }
+}

src/app/App.tsx

@@ -0,0 +1,69 @@
+import { useEffect, FC } from 'react';
+import { Route, Routes, useLocation } from 'react-router-dom';
+import classNames from 'classnames';
+import NotFound from '../common/NotFound';
+import { ServersMap } from '../servers/data';
+import { Settings } from '../settings/reducers/settings';
+import { changeThemeInMarkup } from '../utils/theme';
+import { AppUpdateBanner } from '../common/AppUpdateBanner';
+import { forceUpdate } from '../utils/helpers/sw';
+import './App.scss';
+
+interface AppProps {
+  fetchServers: () => void;
+  servers: ServersMap;
+  settings: Settings;
+  resetAppUpdate: () => void;
+  appUpdated: boolean;
+}
+
+const App = (
+  MainHeader: FC,
+  Home: FC,
+  MenuLayout: FC,
+  CreateServer: FC,
+  EditServer: FC,
+  Settings: FC,
+  ManageServers: FC,
+  ShlinkVersionsContainer: FC,
+) => ({ fetchServers, servers, settings, appUpdated, resetAppUpdate }: AppProps) => {
+  const location = useLocation();
+  const isHome = location.pathname === '/';
+
+  useEffect(() => {
+    // On first load, try to fetch the remote servers if the list is empty
+    if (Object.keys(servers).length === 0) {
+      fetchServers();
+    }
+
+    changeThemeInMarkup(settings.ui?.theme ?? 'light');
+  }, []);
+
+  return (
+    <div className="container-fluid app-container">
+      <MainHeader />
+
+      <div className="app">
+        <div className={classNames('shlink-wrapper', { 'd-flex d-md-block align-items-center': isHome })}>
+          <Routes>
+            <Route index element={<Home />} />
+            <Route path="/settings/*" element={<Settings />} />
+            <Route path="/manage-servers" element={<ManageServers />} />
+            <Route path="/server/create" element={<CreateServer />} />
+            <Route path="/server/:serverId/edit" element={<EditServer />} />
+            <Route path="/server/:serverId/*" element={<MenuLayout />} />
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </div>
+
+        <div className="shlink-footer">
+          <ShlinkVersionsContainer />
+        </div>
+      </div>
+
+      <AppUpdateBanner isOpen={appUpdated} toggle={resetAppUpdate} forceUpdate={forceUpdate} />
+    </div>
+  );
+};
+
+export default App;

src/app/reducers/appUpdates.ts

@@ -0,0 +1,18 @@
+import { Action } from 'redux';
+import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
+
+/* eslint-disable padding-line-between-statements */
+export const APP_UPDATE_AVAILABLE = 'shlink/appUpdates/APP_UPDATE_AVAILABLE';
+export const RESET_APP_UPDATE = 'shlink/appUpdates/RESET_APP_UPDATE';
+/* eslint-enable padding-line-between-statements */
+
+const initialState = false;
+
+export default buildReducer<boolean, Action<string>>({
+  [APP_UPDATE_AVAILABLE]: () => true,
+  [RESET_APP_UPDATE]: () => false,
+}, initialState);
+
+export const appUpdateAvailable = buildActionCreator(APP_UPDATE_AVAILABLE);
+
+export const resetAppUpdate = buildActionCreator(RESET_APP_UPDATE);

src/app/services/provideServices.ts

@@ -0,0 +1,27 @@
+import Bottle from 'bottlejs';
+import { appUpdateAvailable, resetAppUpdate } from '../reducers/appUpdates';
+import App from '../App';
+import { ConnectDecorator } from '../../container/types';
+
+const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
+  // Components
+  bottle.serviceFactory(
+    'App',
+    App,
+    'MainHeader',
+    'Home',
+    'MenuLayout',
+    'CreateServer',
+    'EditServer',
+    'Settings',
+    'ManageServers',
+    'ShlinkVersionsContainer',
+  );
+  bottle.decorator('App', connect([ 'servers', 'settings', 'appUpdated' ], [ 'fetchServers', 'resetAppUpdate' ]));
+
+  // Actions
+  bottle.serviceFactory('appUpdateAvailable', () => appUpdateAvailable);
+  bottle.serviceFactory('resetAppUpdate', () => resetAppUpdate);
+};
+
+export default provideServices;

src/common/AppUpdateBanner.scss

@@ -0,0 +1,17 @@
+@import '../utils/base';
+@import '../utils/mixins/horizontal-align';
+
+.app-update-banner.app-update-banner {
+  @include horizontal-align();
+
+  position: fixed;
+  top: $headerHeight - 25px;
+  padding: 0 4rem 0 0;
+  z-index: 1040;
+  margin: 0;
+  color: var(--text-color);
+  text-align: center;
+  width: 700px;
+  max-width: calc(100% - 30px);
+  box-shadow: 0 0 1rem var(--brand-color);
+}

src/common/AppUpdateBanner.tsx

@@ -0,0 +1,34 @@
+import { FC, MouseEventHandler } from 'react';
+import { Alert, Button } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSyncAlt as reloadIcon } from '@fortawesome/free-solid-svg-icons';
+import { SimpleCard } from '../utils/SimpleCard';
+import { useToggle } from '../utils/helpers/hooks';
+import './AppUpdateBanner.scss';
+
+interface AppUpdateBannerProps {
+  isOpen: boolean;
+  toggle: MouseEventHandler<any>;
+  forceUpdate: Function;
+}
+
+export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, toggle, forceUpdate }) => {
+  const [ isUpdating,, setUpdating ] = useToggle();
+  const update = () => {
+    setUpdating();
+    forceUpdate();
+  };
+
+  return (
+    <Alert className="app-update-banner" isOpen={isOpen} toggle={toggle} tag={SimpleCard} color="secondary">
+      <h4 className="mb-4">This app has just been updated!</h4>
+      <p className="mb-0">
+        Restart it to enjoy the new features.
+        <Button disabled={isUpdating} className="ms-2" color="secondary" size="sm" onClick={update}>
+          {!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ms-1" /></>}
+          {isUpdating && <>Restarting...</>}
+        </Button>
+      </p>
+    </Alert>
+  );
+};

src/common/AsideMenu.js

@@ -1,81 +0,0 @@
-import {
-  faList as listIcon,
-  faLink as createIcon,
-  faTags as tagsIcon,
-  faPen as editIcon,
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { serverType } from '../servers/prop-types';
-import './AsideMenu.scss';
-
-const AsideMenuItem = ({ children, to, className, ...rest }) => (
-  <NavLink
-    className={classNames('aside-menu__item', className)}
-    activeClassName="aside-menu__item--selected"
-    to={to}
-    {...rest}
-  >
-    {children}
-  </NavLink>
-);
-
-AsideMenuItem.propTypes = {
-  children: PropTypes.node.isRequired,
-  to: PropTypes.string.isRequired,
-  className: PropTypes.string,
-};
-
-const propTypes = {
-  selectedServer: serverType,
-  className: PropTypes.string,
-  showOnMobile: PropTypes.bool,
-};
-
-const AsideMenu = (DeleteServerButton) => {
-  const AsideMenu = ({ selectedServer, className, showOnMobile }) => {
-    const serverId = selectedServer ? selectedServer.id : '';
-    const asideClass = classNames('aside-menu', className, {
-      'aside-menu--hidden': !showOnMobile,
-    });
-    const shortUrlsIsActive = (match, location) => location.pathname.match('/list-short-urls');
-    const buildPath = (suffix) => `/server/${serverId}${suffix}`;
-
-    return (
-      <aside className={asideClass}>
-        <nav className="nav flex-column aside-menu__nav">
-          <AsideMenuItem to={buildPath('/list-short-urls/1')} isActive={shortUrlsIsActive}>
-            <FontAwesomeIcon icon={listIcon} />
-            <span className="aside-menu__item-text">List short URLs</span>
-          </AsideMenuItem>
-          <AsideMenuItem to={buildPath('/create-short-url')}>
-            <FontAwesomeIcon icon={createIcon} flip="horizontal" />
-            <span className="aside-menu__item-text">Create short URL</span>
-          </AsideMenuItem>
-          <AsideMenuItem to={buildPath('/manage-tags')}>
-            <FontAwesomeIcon icon={tagsIcon} />
-            <span className="aside-menu__item-text">Manage tags</span>
-          </AsideMenuItem>
-          <AsideMenuItem to={buildPath('/edit')} className="aside-menu__item--push">
-            <FontAwesomeIcon icon={editIcon} />
-            <span className="aside-menu__item-text">Edit this server</span>
-          </AsideMenuItem>
-          <DeleteServerButton
-            className="aside-menu__item aside-menu__item--danger"
-            textClassName="aside-menu__item-text"
-            server={selectedServer}
-          />
-        </nav>
-      </aside>
-    );
-  };
-
-  AsideMenu.propTypes = propTypes;
-
-  return AsideMenu;
-};
-
-export default AsideMenu;

src/common/AsideMenu.scss

@@ -1,10 +1,10 @@
 @import '../utils/base';
 @import '../utils/mixins/vertical-align';
 
-$asideMenuMobileWidth: 280px;
-
 .aside-menu {
-  background-color: #f7f7f7;
+  width: $asideMenuWidth;
+  background-color: var(--primary-color);
+  box-shadow: rgba(0, 0, 0, .05) 0 8px 15px;
   position: fixed !important;
   padding-top: 13px;
   padding-bottom: 10px;
@@ -18,11 +18,9 @@ $asideMenuMobileWidth: 280px;
 
   @media (min-width: $mdMin) {
     padding: 30px 15px 15px;
-    border-right: 1px solid #eee;
   }
 
   @media (max-width: $smMax) {
-    width: $asideMenuMobileWidth !important;
     transition: left 300ms;
     top: $headerHeight - 3px;
     box-shadow: -10px 0 50px 11px rgba(0, 0, 0, .55);
@@ -31,7 +29,7 @@ $asideMenuMobileWidth: 280px;
 
 .aside-menu--hidden {
   @media (max-width: $smMax) {
-    left: -($asideMenuMobileWidth + 35px);
+    left: -($asideMenuWidth + 35px);
   }
 }
 
@@ -44,24 +42,24 @@ $asideMenuMobileWidth: 280px;
   margin: 0 -15px;
   text-decoration: none !important;
   cursor: pointer;
+
+  @media (max-width: $smMax) {
+    margin: 0;
+  }
 }
 
 .aside-menu__item:hover {
-  background-color: $lightHoverColor;
-}
-
-.aside-menu__item--selected {
-  color: #fff;
-  background-color: $mainColor;
+  background-color: var(--secondary-color);
 }
 
+.aside-menu__item--selected,
 .aside-menu__item--selected:hover {
-  color: #fff;
-  background-color: $mainColor;
+  color: #ffffff;
+  background-color: var(--brand-color);
 }
 
 .aside-menu__item--divider {
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid #eeeeee;
   margin: 20px 0;
 }
 
@@ -74,7 +72,7 @@ $asideMenuMobileWidth: 280px;
 }
 
 .aside-menu__item--danger:hover {
-  color: #fff;
+  color: #ffffff;
   background-color: $dangerColor;
 }
 

src/common/AsideMenu.tsx

@@ -0,0 +1,94 @@
+import {
+  faList as listIcon,
+  faLink as createIcon,
+  faTags as tagsIcon,
+  faPen as editIcon,
+  faHome as overviewIcon,
+  faGlobe as domainsIcon,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FC } from 'react';
+import { NavLink, NavLinkProps, useLocation } from 'react-router-dom';
+import classNames from 'classnames';
+import { DeleteServerButtonProps } from '../servers/DeleteServerButton';
+import { isServerWithId, SelectedServer } from '../servers/data';
+import { supportsDomainRedirects } from '../utils/helpers/features';
+import './AsideMenu.scss';
+
+export interface AsideMenuProps {
+  selectedServer: SelectedServer;
+  className?: string;
+  showOnMobile?: boolean;
+}
+
+interface AsideMenuItemProps extends NavLinkProps {
+  to: string;
+}
+
+const AsideMenuItem: FC<AsideMenuItemProps> = ({ children, to, className, ...rest }) => (
+  <NavLink
+    className={({ isActive }) => classNames('aside-menu__item', className, { 'aside-menu__item--selected': isActive })}
+    to={to}
+    {...rest}
+  >
+    {children}
+  </NavLink>
+);
+
+const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
+  { selectedServer, showOnMobile = false }: AsideMenuProps,
+) => {
+  const hasId = isServerWithId(selectedServer);
+  const serverId = hasId ? selectedServer.id : '';
+  const { pathname } = useLocation();
+  const addManageDomainsLink = supportsDomainRedirects(selectedServer);
+  const asideClass = classNames('aside-menu', {
+    'aside-menu--hidden': !showOnMobile,
+  });
+  const buildPath = (suffix: string) => `/server/${serverId}${suffix}`;
+
+  return (
+    <aside className={asideClass}>
+      <nav className="nav flex-column aside-menu__nav">
+        <AsideMenuItem to={buildPath('/overview')}>
+          <FontAwesomeIcon fixedWidth icon={overviewIcon} />
+          <span className="aside-menu__item-text">Overview</span>
+        </AsideMenuItem>
+        <AsideMenuItem
+          to={buildPath('/list-short-urls/1')}
+          className={classNames({ 'aside-menu__item--selected': pathname.match('/list-short-urls') !== null })}
+        >
+          <FontAwesomeIcon fixedWidth icon={listIcon} />
+          <span className="aside-menu__item-text">List short URLs</span>
+        </AsideMenuItem>
+        <AsideMenuItem to={buildPath('/create-short-url')}>
+          <FontAwesomeIcon fixedWidth icon={createIcon} flip="horizontal" />
+          <span className="aside-menu__item-text">Create short URL</span>
+        </AsideMenuItem>
+        <AsideMenuItem to={buildPath('/manage-tags')}>
+          <FontAwesomeIcon fixedWidth icon={tagsIcon} />
+          <span className="aside-menu__item-text">Manage tags</span>
+        </AsideMenuItem>
+        {addManageDomainsLink && (
+          <AsideMenuItem to={buildPath('/manage-domains')}>
+            <FontAwesomeIcon fixedWidth icon={domainsIcon} />
+            <span className="aside-menu__item-text">Manage domains</span>
+          </AsideMenuItem>
+        )}
+        <AsideMenuItem to={buildPath('/edit')} className="aside-menu__item--push">
+          <FontAwesomeIcon fixedWidth icon={editIcon} />
+          <span className="aside-menu__item-text">Edit this server</span>
+        </AsideMenuItem>
+        {hasId && (
+          <DeleteServerButton
+            className="aside-menu__item aside-menu__item--danger"
+            textClassName="aside-menu__item-text"
+            server={selectedServer}
+          />
+        )}
+      </nav>
+    </aside>
+  );
+};
+
+export default AsideMenu;

src/common/ErrorHandler.js

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

src/common/ErrorHandler.scss

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

src/common/ErrorHandler.tsx

@@ -0,0 +1,46 @@
+import { Component, ReactNode } from 'react';
+import { Button } from 'reactstrap';
+import { SimpleCard } from '../utils/SimpleCard';
+
+interface ErrorHandlerState {
+  hasError: boolean;
+}
+
+const ErrorHandler = (
+  { location }: Window,
+  { error }: Console,
+) => class ErrorHandler extends Component<any, ErrorHandlerState> {
+  public constructor(props: object) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  public static getDerivedStateFromError(): ErrorHandlerState {
+    return { hasError: true };
+  }
+
+  public componentDidCatch(e: Error): void {
+    if (process.env.NODE_ENV !== 'development') {
+      error(e);
+    }
+  }
+
+  public render(): ReactNode {
+    if (this.state.hasError) {
+      return (
+        <div className="home">
+          <SimpleCard className="p-4">
+            <h1>Oops! This is awkward :S</h1>
+            <p>It seems that something went wrong. Try refreshing the page or just click this button.</p>
+            <br />
+            <Button outline color="primary" onClick={() => location.reload()}>Take me back</Button>
+          </SimpleCard>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+};
+
+export default ErrorHandler;

src/common/Home.js

@@ -1,35 +0,0 @@
-import React, { useEffect } from 'react';
-import { isEmpty, values } from 'ramda';
-import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import './Home.scss';
-import ServersListGroup from '../servers/ServersListGroup';
-
-const propTypes = {
-  resetSelectedServer: PropTypes.func,
-  servers: PropTypes.object,
-};
-
-const Home = ({ resetSelectedServer, servers: { list, loading } }) => {
-  const servers = values(list);
-  const hasServers = !isEmpty(servers);
-
-  useEffect(() => {
-    resetSelectedServer();
-  }, []);
-
-  return (
-    <div className="home">
-      <h1 className="home__title">Welcome to Shlink</h1>
-      <ServersListGroup servers={servers}>
-        {!loading && hasServers && <span>Please, select a server.</span>}
-        {!loading && !hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
-        {loading && <span>Trying to load servers...</span>}
-      </ServersListGroup>
-    </div>
-  );
-};
-
-Home.propTypes = propTypes;
-
-export default Home;

src/common/Home.scss

@@ -1,18 +1,58 @@
 @import '../utils/base';
+@import '../utils/mixins/vertical-align';
+
+$mainCardWidth: 720px;
+$fiveColumnsSize: .4167; // 12 / 5 -> Can't use "/" operator in latest dart-sass
 
 .home {
-  text-align: center;
-  height: calc(100vh - #{$headerHeight});
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-flow: column;
+  position: relative;
+  padding-top: 15px;
+  width: 100%;
+
+  @media (min-width: $mdMin) {
+    padding-top: 0;
+    height: calc(100vh - #{$headerHeight} - #{($footer-height + $footer-margin)});
+  }
+}
+
+.home__logo-wrapper {
+  padding: 1.5rem !important;
+  height: 100% !important;
+  min-height: 300px;
+}
+
+.home__logo {
+  @include vertical-align();
+
+  width: calc(#{$mainCardWidth * $fiveColumnsSize} - 3rem);
+}
+
+.home__main-card {
+  margin: 0 auto;
+  max-width: $mainCardWidth;
+
+  @media (min-width: $mdMin) {
+    @include vertical-align();
+  }
+}
+
+.home__title-wrapper {
+  padding: 1.5rem !important;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .home__title {
+  text-align: center;
   font-size: 1.75rem;
+  margin: 0;
 
   @media (min-width: $mdMin) {
     font-size: 2.2rem;
   }
 }
+
+.home__servers-container {
+  @media (min-width: $mdMin) {
+    border-left: 1px solid var(--border-color);
+  }
+}

src/common/Home.tsx

@@ -0,0 +1,70 @@
+import { useEffect } from 'react';
+import { isEmpty, values } from 'ramda';
+import { Link, useNavigate } from 'react-router-dom';
+import { Card, Row } from 'reactstrap';
+import { ExternalLink } from 'react-external-link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
+import ServersListGroup from '../servers/ServersListGroup';
+import { ServersMap } from '../servers/data';
+import { ShlinkLogo } from './img/ShlinkLogo';
+import './Home.scss';
+
+export interface HomeProps {
+  servers: ServersMap;
+}
+
+const Home = ({ servers }: HomeProps) => {
+  const navigate = useNavigate();
+  const serversList = values(servers);
+  const hasServers = !isEmpty(serversList);
+
+  useEffect(() => {
+    // Try to redirect to the first server marked as auto-connect
+    const autoConnectServer = serversList.find(({ autoConnect }) => autoConnect);
+
+    autoConnectServer && navigate(`/server/${autoConnectServer.id}`);
+  }, []);
+
+  return (
+    <div className="home">
+      <Card className="home__main-card">
+        <Row className="g-0">
+          <div className="col-md-5 d-none d-md-block">
+            <div className="home__logo-wrapper">
+              <div className="home__logo">
+                <ShlinkLogo />
+              </div>
+            </div>
+          </div>
+          <div className="col-md-7 home__servers-container">
+            <div className="home__title-wrapper">
+              <h1 className="home__title">Welcome!</h1>
+            </div>
+            <ServersListGroup embedded servers={serversList}>
+              {!hasServers && (
+                <div className="p-4 text-center">
+                  <p className="mb-5">This application will help you manage your Shlink servers.</p>
+                  <p>
+                    <Link to="/server/create" className="btn btn-outline-primary btn-lg me-2">
+                      <FontAwesomeIcon icon={faPlus} /> <span className="ms-1">Add a server</span>
+                    </Link>
+                  </p>
+                  <p className="mb-0 mt-5">
+                    <ExternalLink href="https://shlink.io/documentation">
+                      <small>
+                        <span className="me-1">Learn more about Shlink</span> <FontAwesomeIcon icon={faExternalLinkAlt} />
+                      </small>
+                    </ExternalLink>
+                  </p>
+                </div>
+              )}
+            </ServersListGroup>
+          </div>
+        </Row>
+      </Card>
+    </div>
+  );
+};
+
+export default Home;

src/common/MainHeader.js

@@ -1,65 +0,0 @@
-import { faPlus as plusIcon, faChevronDown as arrowIcon } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import shlinkLogo from './shlink-logo-white.png';
-import './MainHeader.scss';
-
-const MainHeader = (ServersDropdown) => class MainHeader extends React.Component {
-  static propTypes = {
-    location: PropTypes.object,
-  };
-
-  state = { isOpen: false };
-  handleToggle = () => {
-    this.setState(({ isOpen }) => ({
-      isOpen: !isOpen,
-    }));
-  };
-
-  componentDidUpdate(prevProps) {
-    if (this.props.location !== prevProps.location) {
-      this.setState({ isOpen: false });
-    }
-  }
-
-  render() {
-    const { location } = this.props;
-    const createServerPath = '/server/create';
-    const toggleClass = classnames('main-header__toggle-icon', {
-      'main-header__toggle-icon--opened': this.state.isOpen,
-    });
-
-    return (
-      <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
-        <NavbarBrand tag={Link} to="/">
-          <img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo" /> Shlink
-        </NavbarBrand>
-
-        <NavbarToggler onClick={this.handleToggle}>
-          <FontAwesomeIcon icon={arrowIcon} className={toggleClass} />
-        </NavbarToggler>
-
-        <Collapse navbar isOpen={this.state.isOpen}>
-          <Nav navbar className="ml-auto">
-            <NavItem>
-              <NavLink
-                tag={Link}
-                to={createServerPath}
-                active={location.pathname === createServerPath}
-              >
-                <FontAwesomeIcon icon={plusIcon} />&nbsp; Add server
-              </NavLink>
-            </NavItem>
-            <ServersDropdown />
-          </Nav>
-        </Collapse>
-      </Navbar>
-    );
-  }
-};
-
-export default MainHeader;

src/common/MainHeader.scss

@@ -1,8 +1,8 @@
 @import '../utils/base';
 
 .main-header.main-header {
-  background-color: $mainColor !important;
   color: white;
+  background-color: var(--brand-color) !important;
 
   .navbar-brand {
     color: inherit !important;

src/common/MainHeader.tsx

@@ -0,0 +1,45 @@
+import { faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FC, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
+import classNames from 'classnames';
+import { useToggle } from '../utils/helpers/hooks';
+import { ShlinkLogo } from './img/ShlinkLogo';
+import './MainHeader.scss';
+
+const MainHeader = (ServersDropdown: FC) => () => {
+  const [ isOpen, toggleOpen, , close ] = useToggle();
+  const location = useLocation();
+  const { pathname } = location;
+
+  useEffect(close, [ location ]);
+
+  const settingsPath = '/settings';
+  const toggleClass = classNames('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isOpen });
+
+  return (
+    <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
+      <NavbarBrand tag={Link} to="/">
+        <ShlinkLogo className="main-header__brand-logo" color="white" /> Shlink
+      </NavbarBrand>
+
+      <NavbarToggler onClick={toggleOpen}>
+        <FontAwesomeIcon icon={arrowIcon} className={toggleClass} />
+      </NavbarToggler>
+
+      <Collapse navbar isOpen={isOpen}>
+        <Nav navbar className="ms-auto">
+          <NavItem>
+            <NavLink tag={Link} to={settingsPath} active={pathname.startsWith(settingsPath)}>
+              <FontAwesomeIcon icon={cogsIcon} />&nbsp; Settings
+            </NavLink>
+          </NavItem>
+          <ServersDropdown />
+        </Nav>
+      </Collapse>
+    </Navbar>
+  );
+};
+
+export default MainHeader;

src/common/MenuLayout.js

@@ -1,82 +0,0 @@
-import React, { useEffect } from 'react';
-import { Route, Switch } from 'react-router-dom';
-import { Swipeable } from 'react-swipeable';
-import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import classNames from 'classnames';
-import * as PropTypes from 'prop-types';
-import { serverType } from '../servers/prop-types';
-import { withSelectedServer } from '../servers/helpers/withSelectedServer';
-import { useToggle } from '../utils/helpers/hooks';
-import NotFound from './NotFound';
-import './MenuLayout.scss';
-
-const propTypes = {
-  match: PropTypes.object,
-  location: PropTypes.object,
-  selectedServer: serverType,
-};
-
-const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits, ShlinkVersions, ServerError) => {
-  const MenuLayoutComp = ({ match, location, selectedServer }) => {
-    const [ sidebarVisible, toggleSidebar, showSidebar, hideSidebar ] = useToggle();
-    const { params: { serverId } } = match;
-
-    useEffect(() => hideSidebar(), [ location ]);
-
-    if (selectedServer.serverNotReachable) {
-      return <ServerError type="not-reachable" />;
-    }
-
-    const burgerClasses = classNames('menu-layout__burger-icon', {
-      'menu-layout__burger-icon--active': sidebarVisible,
-    });
-    const swipeMenuIfNoModalExists = (callback) => () => {
-      if (document.querySelector('.modal')) {
-        return;
-      }
-
-      callback();
-    };
-
-    return (
-      <React.Fragment>
-        <FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
-
-        <Swipeable
-          delta={40}
-          className="menu-layout__swipeable"
-          onSwipedLeft={swipeMenuIfNoModalExists(hideSidebar)}
-          onSwipedRight={swipeMenuIfNoModalExists(showSidebar)}
-        >
-          <div className="row menu-layout__swipeable-inner">
-            <AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={sidebarVisible} />
-            <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => hideSidebar()}>
-              <div className="menu-layout__container">
-                <Switch>
-                  <Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrls} />
-                  <Route exact path="/server/:serverId/create-short-url" component={CreateShortUrl} />
-                  <Route exact path="/server/:serverId/short-code/:shortCode/visits" component={ShortUrlVisits} />
-                  <Route exact path="/server/:serverId/manage-tags" component={TagsList} />
-                  <Route
-                    render={() => <NotFound to={`/server/${serverId}/list-short-urls/1`}>List short URLs</NotFound>}
-                  />
-                </Switch>
-              </div>
-
-              <div className="menu-layout__footer text-center text-md-right">
-                <ShlinkVersions />
-              </div>
-            </div>
-          </div>
-        </Swipeable>
-      </React.Fragment>
-    );
-  };
-
-  MenuLayoutComp.propTypes = propTypes;
-
-  return withSelectedServer(MenuLayoutComp, ServerError);
-};
-
-export default MenuLayout;

src/common/MenuLayout.scss

@@ -1,13 +1,7 @@
 @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 {
@@ -33,25 +27,11 @@
   color: white;
 }
 
-$footer-height: 2.3rem;
-$footer-margin: .8rem;
-
-.menu-layout__container {
-  padding: 20px 0 ($footer-height + $footer-margin);
+.menu-layout__container.menu-layout__container {
+  padding: 20px 0 0;
   min-height: 100%;
-  margin-bottom: -($footer-height + $footer-margin);
 
   @media (min-width: $mdMin) {
-    padding: 30px 15px ($footer-height + $footer-margin);
-  }
-}
-
-.menu-layout__footer {
-  height: $footer-height;
-  margin-top: $footer-margin;
-  padding: 0;
-
-  @media (min-width: $mdMin) {
-    padding: 0 15px;
+    padding: 30px 0 0 $asideMenuWidth;
   }
 }

src/common/MenuLayout.tsx

@@ -0,0 +1,88 @@
+import { FC, useEffect } from 'react';
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import { withSelectedServer } from '../servers/helpers/withSelectedServer';
+import { useSwipeable, useToggle } from '../utils/helpers/hooks';
+import { supportsDomainRedirects, supportsNonOrphanVisits, supportsOrphanVisits } from '../utils/helpers/features';
+import { isReachableServer } from '../servers/data';
+import NotFound from './NotFound';
+import { AsideMenuProps } from './AsideMenu';
+import './MenuLayout.scss';
+
+interface MenuLayoutProps {
+  sidebarPresent: Function;
+  sidebarNotPresent: Function;
+}
+
+const MenuLayout = (
+  TagsList: FC,
+  ShortUrlsList: FC,
+  AsideMenu: FC<AsideMenuProps>,
+  CreateShortUrl: FC,
+  ShortUrlVisits: FC,
+  TagVisits: FC,
+  OrphanVisits: FC,
+  NonOrphanVisits: FC,
+  ServerError: FC,
+  Overview: FC,
+  EditShortUrl: FC,
+  ManageDomains: FC,
+) => withSelectedServer<MenuLayoutProps>(({ selectedServer, sidebarNotPresent, sidebarPresent }) => {
+  const location = useLocation();
+  const [ sidebarVisible, toggleSidebar, showSidebar, hideSidebar ] = useToggle();
+  const showContent = isReachableServer(selectedServer);
+
+  useEffect(() => hideSidebar(), [ location ]);
+  useEffect(() => {
+    showContent && sidebarPresent();
+
+    return () => sidebarNotPresent();
+  }, []);
+
+  if (!showContent) {
+    return <ServerError />;
+  }
+
+  const addOrphanVisitsRoute = supportsOrphanVisits(selectedServer);
+  const addNonOrphanVisitsRoute = supportsNonOrphanVisits(selectedServer);
+  const addManageDomainsRoute = supportsDomainRedirects(selectedServer);
+  const burgerClasses = classNames('menu-layout__burger-icon', { 'menu-layout__burger-icon--active': sidebarVisible });
+  const swipeableProps = useSwipeable(showSidebar, hideSidebar);
+
+  return (
+    <>
+      <FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
+
+      <div {...swipeableProps} className="menu-layout__swipeable">
+        <div className="menu-layout__swipeable-inner">
+          <AsideMenu selectedServer={selectedServer} showOnMobile={sidebarVisible} />
+          <div className="menu-layout__container" onClick={() => hideSidebar()}>
+            <div className="container-xl">
+              <Routes>
+                <Route index element={<Navigate replace to="overview" />} />
+                <Route path="/overview" element={<Overview />} />
+                <Route path="/list-short-urls/:page" element={<ShortUrlsList />} />
+                <Route path="/create-short-url" element={<CreateShortUrl />} />
+                <Route path="/short-code/:shortCode/visits/*" element={<ShortUrlVisits />} />
+                <Route path="/short-code/:shortCode/edit" element={<EditShortUrl />} />
+                <Route path="/tag/:tag/visits/*" element={<TagVisits />} />
+                {addOrphanVisitsRoute && <Route path="/orphan-visits/*" element={<OrphanVisits />} />}
+                {addNonOrphanVisitsRoute && <Route path="/non-orphan-visits/*" element={<NonOrphanVisits />} />}
+                <Route path="/manage-tags" element={<TagsList />} />
+                {addManageDomainsRoute && <Route path="/manage-domains" element={<ManageDomains />} />}
+                <Route
+                  path="*"
+                  element={<NotFound to={`/server/${selectedServer.id}/list-short-urls/1`}>List short URLs</NotFound>}
+                />
+              </Routes>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}, ServerError);
+
+export default MenuLayout;

src/common/NoMenuLayout.scss

@@ -0,0 +1,9 @@
+@import '../utils/base';
+
+.no-menu-wrapper {
+  padding: 15px 0 0;
+
+  @media (min-width: $mdMin) {
+    padding: 30px 20px 20px;
+  }
+}

src/common/NoMenuLayout.tsx

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import './NoMenuLayout.scss';
+
+export const NoMenuLayout: FC = ({ children }) => <div className="no-menu-wrapper container-xl">{children}</div>;

src/common/NotFound.js

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

src/common/NotFound.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { SimpleCard } from '../utils/SimpleCard';
+
+interface NotFoundProps {
+  to?: string;
+}
+
+const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
+  <div className="home">
+    <SimpleCard className="p-4">
+      <h2>Oops! We could not find requested route.</h2>
+      <p>
+        Use your browser&apos;s back button to navigate to the page you have previously come from, or just press this
+        button.
+      </p>
+      <br />
+      <Link to={to} className="btn btn-outline-primary btn-lg">{children}</Link>
+    </SimpleCard>
+  </div>
+);
+
+export default NotFound;

src/common/ScrollToTop.js

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

src/common/ScrollToTop.tsx

@@ -0,0 +1,14 @@
+import { FC, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const ScrollToTop = (): FC => ({ children }) => {
+  const location = useLocation();
+
+  useEffect(() => {
+    scrollTo(0, 0);
+  }, [ location ]);
+
+  return <>{children}</>;
+};
+
+export default ScrollToTop;

src/common/ShlinkVersions.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { pipe } from 'ramda';
-import { serverType } from '../servers/prop-types';
-import { versionToPrintable, versionToSemVer } from '../utils/helpers/version';
-
-const SHLINK_WEB_CLIENT_VERSION = '%_VERSION_%';
-
-const propTypes = {
-  selectedServer: serverType,
-  className: PropTypes.string,
-  clientVersion: PropTypes.string,
-};
-
-const ShlinkVersions = ({ selectedServer, className, clientVersion = SHLINK_WEB_CLIENT_VERSION }) => {
-  const { printableVersion: serverVersion } = selectedServer;
-  const normalizedClientVersion = pipe(versionToSemVer(), versionToPrintable)(clientVersion);
-
-  return (
-    <small className={classNames('text-muted', className)}>
-      Client: <b>{normalizedClientVersion}</b> - Server: <b>{serverVersion}</b>
-    </small>
-  );
-};
-
-ShlinkVersions.propTypes = propTypes;
-
-export default ShlinkVersions;

src/common/ShlinkVersions.tsx

@@ -0,0 +1,33 @@
+import { pipe } from 'ramda';
+import { ExternalLink } from 'react-external-link';
+import { versionToPrintable, versionToSemVer } from '../utils/helpers/version';
+import { isReachableServer, SelectedServer } from '../servers/data';
+
+const SHLINK_WEB_CLIENT_VERSION = '%_VERSION_%';
+const normalizeVersion = pipe(versionToSemVer(), versionToPrintable);
+
+export interface ShlinkVersionsProps {
+  selectedServer: SelectedServer;
+  clientVersion?: string;
+}
+
+const VersionLink = ({ project, version }: { project: 'shlink' | 'shlink-web-client'; version: string }) => (
+  <ExternalLink href={`https://github.com/shlinkio/${project}/releases/${version}`} className="text-muted">
+    <b>{version}</b>
+  </ExternalLink>
+);
+
+const ShlinkVersions = ({ selectedServer, clientVersion = SHLINK_WEB_CLIENT_VERSION }: ShlinkVersionsProps) => {
+  const normalizedClientVersion = normalizeVersion(clientVersion);
+
+  return (
+    <small className="text-muted">
+      {isReachableServer(selectedServer) &&
+        <>Server: <VersionLink project="shlink" version={selectedServer.printableVersion} /> - </>
+      }
+      Client: <VersionLink project="shlink-web-client" version={normalizedClientVersion} />
+    </small>
+  );
+};
+
+export default ShlinkVersions;

src/common/ShlinkVersionsContainer.scss

@@ -0,0 +1,9 @@
+@import '../utils/base';
+
+.shlink-versions-container--with-sidebar {
+  margin-left: 0;
+
+  @media (min-width: $mdMin) {
+    margin-left: $asideMenuWidth;
+  }
+}

src/common/ShlinkVersionsContainer.tsx

@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+import { SelectedServer } from '../servers/data';
+import ShlinkVersions from './ShlinkVersions';
+import { Sidebar } from './reducers/sidebar';
+import './ShlinkVersionsContainer.scss';
+
+export interface ShlinkVersionsContainerProps {
+  selectedServer: SelectedServer;
+  sidebar: Sidebar;
+}
+
+const ShlinkVersionsContainer = ({ selectedServer, sidebar }: ShlinkVersionsContainerProps) => {
+  const classes = classNames('text-center', {
+    'shlink-versions-container--with-sidebar': sidebar.sidebarPresent,
+  });
+
+  return (
+    <div className={classes}>
+      <ShlinkVersions selectedServer={selectedServer} />
+    </div>
+  );
+};
+
+export default ShlinkVersionsContainer;

src/common/SimplePaginator.tsx

@@ -1,23 +1,28 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { FC } from 'react';
 import classNames from 'classnames';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-import { isPageDisabled, keyForPage, progressivePagination } from '../utils/helpers/pagination';
+import {
+  pageIsEllipsis,
+  keyForPage,
+  NumberOrEllipsis,
+  progressivePagination,
+  prettifyPageNumber,
+} from '../utils/helpers/pagination';
 import './SimplePaginator.scss';
 
-const propTypes = {
-  pagesCount: PropTypes.number.isRequired,
-  currentPage: PropTypes.number.isRequired,
-  setCurrentPage: PropTypes.func.isRequired,
-  centered: PropTypes.bool,
-};
+interface SimplePaginatorProps {
+  pagesCount: number;
+  currentPage: number;
+  setCurrentPage: (currentPage: number) => void;
+  centered?: boolean;
+}
 
-const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage, centered = true }) => {
+const SimplePaginator: FC<SimplePaginatorProps> = ({ pagesCount, currentPage, setCurrentPage, centered = true }) => {
   if (pagesCount < 2) {
     return null;
   }
 
-  const onClick = (page) => () => setCurrentPage(page);
+  const onClick = (page: NumberOrEllipsis) => () => !pageIsEllipsis(page) && setCurrentPage(page);
 
   return (
     <Pagination listClassName={classNames('flex-wrap mb-0 simple-paginator', { 'justify-content-center': centered })}>
@@ -27,10 +32,10 @@ const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage, centered = t
       {progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
         <PaginationItem
           key={keyForPage(pageNumber, index)}
-          disabled={isPageDisabled(pageNumber)}
+          disabled={pageIsEllipsis(pageNumber)}
           active={currentPage === pageNumber}
         >
-          <PaginationLink tag="span" onClick={onClick(pageNumber)}>{pageNumber}</PaginationLink>
+          <PaginationLink tag="span" onClick={onClick(pageNumber)}>{prettifyPageNumber(pageNumber)}</PaginationLink>
         </PaginationItem>
       ))}
       <PaginationItem disabled={currentPage >= pagesCount}>
@@ -40,6 +45,4 @@ const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage, centered = t
   );
 };
 
-SimplePaginator.propTypes = propTypes;
-
 export default SimplePaginator;

src/common/img/ShlinkLogo.tsx

@@ -0,0 +1,25 @@
+import { MAIN_COLOR } from '../../utils/theme';
+
+export interface ShlinkLogoProps {
+  color?: string;
+  className?: string;
+}
+
+export const ShlinkLogo = ({ color = MAIN_COLOR, className }: ShlinkLogoProps) => (
+  <svg className={className} viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g fill={color}>
+      <path
+        d=" M 23.71 85.08 C 17.22 49.81 49.44 14.86 85.08 18.12 C 118.83 19.21 145.72 53.33 139.45 86.37 C 155.64 102.30 171.32 118.83 187.87 134.36 C 198.32 111.73 208.84 89.12 219.57 66.62 C 226.05 53.84 243.47 48.74 255.73 56.27 C 263.76 62.10 270.34 69.69 277.25 76.75 C 286.28 86.61 285.72 102.89 276.31 112.31 C 223.38 165.37 170.38 218.37 117.35 271.34 C 107.72 280.99 91.01 281.25 81.11 271.86 C 74.39 264.94 66.82 258.69 61.24 250.77 C 53.72 238.52 58.85 221.07 71.64 214.62 C 94.11 203.87 116.72 193.38 139.33 182.91 C 123.81 166.36 107.30 150.68 91.37 134.49 C 60.20 140.28 27.37 116.78 23.71 85.08 Z"
+      />
+      <path
+        d=" M 205.21 201.23 C 225.32 181.36 260.88 181.11 281.14 200.86 C 299.25 218.75 317.37 236.65 335.10 254.93 C 356.73 278.01 352.01 318.70 326.03 336.56 C 320.07 330.47 313.73 324.65 308.12 318.28 C 323.86 309.39 328.76 286.18 316.63 272.39 C 301.73 256.95 286.30 242.03 271.24 226.75 C 264.49 219.65 256.80 212.00 246.37 211.52 C 224.65 208.64 205.52 233.36 214.49 253.58 C 221.09 266.81 234.22 275.12 243.62 286.24 C 240.43 295.96 238.09 306.13 238.29 316.46 C 225.55 304.29 213.16 291.73 200.89 279.09 C 180.97 257.57 183.10 220.45 205.21 201.23 Z"
+      />
+      <path
+        d=" M 273.90 352.07 C 252.28 328.99 256.98 288.31 282.96 270.46 C 288.93 276.54 295.26 282.36 300.88 288.72 C 285.14 297.62 280.23 320.82 292.38 334.61 C 307.27 350.05 322.70 364.96 337.75 380.25 C 344.51 387.35 352.20 395.00 362.64 395.48 C 384.35 398.37 403.49 373.64 394.51 353.42 C 387.92 340.18 374.78 331.88 365.38 320.76 C 368.56 311.04 370.91 300.86 370.71 290.54 C 383.45 302.70 395.84 315.27 408.11 327.91 C 428.03 349.43 425.90 386.55 403.78 405.77 C 383.68 425.64 348.13 425.89 327.86 406.14 C 309.75 388.25 291.60 370.37 273.90 352.07 Z"
+      />
+      <path
+        d=" M 422.11 403.83 C 431.96 394.07 441.60 384.06 451.66 374.51 C 460.90 383.74 471.89 392.70 474.89 406.11 C 480.16 429.97 484.08 454.13 488.76 478.12 C 490.00 483.41 484.47 488.29 479.35 486.63 C 454.66 481.52 429.55 478.12 405.14 471.84 C 393.17 467.97 385.20 457.75 376.55 449.27 C 386.39 439.49 396.13 429.60 406.06 419.91 C 416.37 433.45 435.74 414.00 422.11 403.83 Z"
+      />
+    </g>
+  </svg>
+);

src/common/react-tag-autocomplete.scss

@@ -0,0 +1,145 @@
+@import '../utils/base';
+
+.react-tags {
+  position: relative;
+  padding: 5px 0 0 6px;
+  border-radius: .3rem;
+  background-color: var(--input-color);
+  border: 1px solid var(--input-border-color);
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+  /* shared font styles */
+  font-size: 1em;
+  line-height: 1.2;
+
+  /* clicking anywhere will focus the input */
+  cursor: text;
+}
+
+.react-tags.is-focused {
+  box-shadow: 0 0 0 .2rem rgb(70 150 229 / 25%);
+}
+
+.react-tags__tag {
+  font-size: 100%;
+}
+
+.react-tags__selected {
+  display: inline;
+  vertical-align: 2px;
+}
+
+.react-tags__selected-tag {
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0 6px 6px 0;
+  padding: 6px 8px;
+  border: 1px solid var(--input-border-color);
+  border-radius: .25rem;
+  background: #f1f1f1;
+
+  /* match the font styles */
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.react-tags__selected-tag:after {
+  content: '\2715';
+  color: #aaaaaa;
+  margin-left: 8px;
+}
+
+.react-tags__selected-tag:hover,
+.react-tags__selected-tag:focus {
+  border-color: var(--input-border-color);
+}
+
+.react-tags__search {
+  display: inline-block;
+
+  /* match tag layout */
+  padding: 6px 2px;
+  margin-bottom: 5px;
+
+  /* prevent autoresize overflowing the container */
+  max-width: 100%;
+}
+
+@media screen and (min-width: $smMin) {
+  .react-tags__search {
+    /* this will become the offsetParent for suggestions */
+    position: relative;
+  }
+}
+
+.react-tags__search-input {
+  font-size: 1.25rem;
+  line-height: inherit;
+  color: var(--input-text-color);
+  background-color: var(--input-color);
+
+  /* prevent autoresize overflowing the container */
+  max-width: 100%;
+
+  /* remove styles and layout from this element */
+  margin: 0 0 0 7px;
+  padding: 0;
+  border: 0;
+  outline: none;
+}
+
+.react-tags__search-input::-ms-clear {
+  display: none;
+}
+
+.react-tags__suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+}
+
+@media screen and (min-width: $smMin) {
+  .react-tags__suggestions {
+    width: 240px;
+  }
+}
+
+.react-tags__suggestions ul {
+  margin: 4px -1px;
+  padding: 0;
+  list-style: none;
+  background: var(--primary-color);
+  border: 1px solid var(--border-color);
+  border-radius: .25rem;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
+}
+
+.react-tags__suggestions li {
+  padding: 8px 10px;
+}
+
+.react-tags__suggestions li:not(:last-child) {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.react-tags__suggestions li mark {
+  text-decoration: underline;
+  background: none;
+  font-weight: 600;
+}
+
+.react-tags__suggestions li:hover {
+  cursor: pointer;
+  background-color: var(--active-color);
+}
+
+.react-tags__suggestions li.is-active {
+  background-color: var(--active-color);
+}
+
+.react-tags__suggestions li.is-disabled {
+  opacity: .5;
+  cursor: auto;
+}

src/common/react-tagsinput.scss

@@ -1,46 +0,0 @@
-.react-tagsinput {
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: .25rem;
-  overflow: hidden;
-  min-height: 2.6rem;
-  padding: 6px 0 0 6px;
-  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-}
-
-.react-tagsinput--focused {
-  border-color: #80bdff;
-  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
-}
-
-.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: 700;
-  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: 100%;
-  margin-bottom: 6px;
-}

src/common/reducers/sidebar.ts

@@ -0,0 +1,27 @@
+import { Action } from 'redux';
+import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
+
+/* eslint-disable padding-line-between-statements */
+export const SIDEBAR_PRESENT = 'shlink/common/SIDEBAR_PRESENT';
+export const SIDEBAR_NOT_PRESENT = 'shlink/common/SIDEBAR_NOT_PRESENT';
+/* eslint-enable padding-line-between-statements */
+
+export interface Sidebar {
+  sidebarPresent: boolean;
+}
+
+type SidebarRenderedAction = Action<string>;
+type SidebarNotRenderedAction = Action<string>;
+
+const initialState: Sidebar = {
+  sidebarPresent: false,
+};
+
+export default buildReducer<Sidebar, SidebarRenderedAction & SidebarNotRenderedAction>({
+  [SIDEBAR_PRESENT]: () => ({ sidebarPresent: true }),
+  [SIDEBAR_NOT_PRESENT]: () => ({ sidebarPresent: false }),
+}, initialState);
+
+export const sidebarPresent = buildActionCreator(SIDEBAR_PRESENT);
+
+export const sidebarNotPresent = buildActionCreator(SIDEBAR_NOT_PRESENT);

src/common/services/ImageDownloader.ts

@@ -0,0 +1,13 @@
+import { AxiosInstance } from 'axios';
+import { saveUrl } from '../../utils/helpers/files';
+
+export class ImageDownloader {
+  public constructor(private readonly axios: AxiosInstance, private readonly window: Window) {}
+
+  public async saveImage(imgUrl: string, filename: string): Promise<void> {
+    const { data } = await this.axios.get(imgUrl, { responseType: 'blob' });
+    const url = URL.createObjectURL(data);
+
+    saveUrl(this.window, url, filename);
+  }
+}

src/common/services/ReportExporter.ts

@@ -0,0 +1,33 @@
+import { CsvJson } from 'csvjson';
+import { NormalizedVisit } from '../../visits/types';
+import { ExportableShortUrl } from '../../short-urls/data';
+import { saveCsv } from '../../utils/helpers/files';
+
+export class ReportExporter {
+  public constructor(
+    private readonly window: Window,
+    private readonly csvjson: CsvJson,
+  ) {}
+
+  public readonly exportVisits = (filename: string, visits: NormalizedVisit[]) => {
+    if (!visits.length) {
+      return;
+    }
+
+    this.exportCsv(filename, visits);
+  };
+
+  public readonly exportShortUrls = (shortUrls: ExportableShortUrl[]) => {
+    if (!shortUrls.length) {
+      return;
+    }
+
+    this.exportCsv('short_urls.csv', shortUrls);
+  };
+
+  private readonly exportCsv = (filename: string, rows: object[]) => {
+    const csv = this.csvjson.toCSV(rows, { headers: 'key', wrap: true });
+
+    saveCsv(this.window, csv, filename);
+  };
+}

src/common/services/provideServices.js

@@ -1,44 +0,0 @@
-import ScrollToTop from '../ScrollToTop';
-import MainHeader from '../MainHeader';
-import Home from '../Home';
-import MenuLayout from '../MenuLayout';
-import AsideMenu from '../AsideMenu';
-import ErrorHandler from '../ErrorHandler';
-import ShlinkVersions from '../ShlinkVersions';
-
-const provideServices = (bottle, connect, withRouter) => {
-  bottle.constant('window', global.window);
-  bottle.constant('console', global.console);
-
-  bottle.serviceFactory('ScrollToTop', ScrollToTop, 'window');
-  bottle.decorator('ScrollToTop', withRouter);
-
-  bottle.serviceFactory('MainHeader', MainHeader, 'ServersDropdown');
-  bottle.decorator('MainHeader', withRouter);
-
-  bottle.serviceFactory('Home', () => Home);
-  bottle.decorator('Home', connect([ 'servers' ], [ 'resetSelectedServer' ]));
-
-  bottle.serviceFactory(
-    'MenuLayout',
-    MenuLayout,
-    'TagsList',
-    'ShortUrls',
-    'AsideMenu',
-    'CreateShortUrl',
-    'ShortUrlVisits',
-    'ShlinkVersions',
-    'ServerError'
-  );
-  bottle.decorator('MenuLayout', connect([ 'selectedServer', 'shortUrlsListParams' ], [ 'selectServer' ]));
-  bottle.decorator('MenuLayout', withRouter);
-
-  bottle.serviceFactory('AsideMenu', AsideMenu, 'DeleteServerButton');
-
-  bottle.serviceFactory('ShlinkVersions', () => ShlinkVersions);
-  bottle.decorator('ShlinkVersions', connect([ 'selectedServer' ]));
-
-  bottle.serviceFactory('ErrorHandler', ErrorHandler, 'window', 'console');
-};
-
-export default provideServices;

src/common/services/provideServices.ts

@@ -0,0 +1,64 @@
+import axios from 'axios';
+import Bottle from 'bottlejs';
+import ScrollToTop from '../ScrollToTop';
+import MainHeader from '../MainHeader';
+import Home from '../Home';
+import MenuLayout from '../MenuLayout';
+import AsideMenu from '../AsideMenu';
+import ErrorHandler from '../ErrorHandler';
+import ShlinkVersionsContainer from '../ShlinkVersionsContainer';
+import { ConnectDecorator } from '../../container/types';
+import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
+import { sidebarNotPresent, sidebarPresent } from '../reducers/sidebar';
+import { ImageDownloader } from './ImageDownloader';
+import { ReportExporter } from './ReportExporter';
+
+const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
+  // Services
+  bottle.constant('window', (global as any).window);
+  bottle.constant('console', global.console);
+  bottle.constant('axios', axios);
+
+  bottle.service('ImageDownloader', ImageDownloader, 'axios', 'window');
+  bottle.service('ReportExporter', ReportExporter, 'window', 'csvjson');
+
+  // Components
+  bottle.serviceFactory('ScrollToTop', ScrollToTop);
+
+  bottle.serviceFactory('MainHeader', MainHeader, 'ServersDropdown');
+
+  bottle.serviceFactory('Home', () => Home);
+  bottle.decorator('Home', withoutSelectedServer);
+  bottle.decorator('Home', connect([ 'servers' ], [ 'resetSelectedServer' ]));
+
+  bottle.serviceFactory(
+    'MenuLayout',
+    MenuLayout,
+    'TagsList',
+    'ShortUrlsList',
+    'AsideMenu',
+    'CreateShortUrl',
+    'ShortUrlVisits',
+    'TagVisits',
+    'OrphanVisits',
+    'NonOrphanVisits',
+    'ServerError',
+    'Overview',
+    'EditShortUrl',
+    'ManageDomains',
+  );
+  bottle.decorator('MenuLayout', connect([ 'selectedServer' ], [ 'selectServer', 'sidebarPresent', 'sidebarNotPresent' ]));
+
+  bottle.serviceFactory('AsideMenu', AsideMenu, 'DeleteServerButton');
+
+  bottle.serviceFactory('ShlinkVersionsContainer', () => ShlinkVersionsContainer);
+  bottle.decorator('ShlinkVersionsContainer', connect([ 'selectedServer', 'sidebar' ]));
+
+  bottle.serviceFactory('ErrorHandler', ErrorHandler, 'window', 'console');
+
+  // Actions
+  bottle.serviceFactory('sidebarPresent', () => sidebarPresent);
+  bottle.serviceFactory('sidebarNotPresent', () => sidebarNotPresent);
+};
+
+export default provideServices;

src/container/index.js

@@ -1,38 +0,0 @@
-import Bottle from 'bottlejs';
-import { withRouter } from 'react-router-dom';
-import { connect as reduxConnect } from 'react-redux';
-import { pick } from 'ramda';
-import App from '../App';
-import provideCommonServices from '../common/services/provideServices';
-import provideShortUrlsServices from '../short-urls/services/provideServices';
-import provideServersServices from '../servers/services/provideServices';
-import provideVisitsServices from '../visits/services/provideServices';
-import provideTagsServices from '../tags/services/provideServices';
-import provideUtilsServices from '../utils/services/provideServices';
-
-const bottle = new Bottle();
-const { container } = bottle;
-
-const lazyService = (container, serviceName) => (...args) => container[serviceName](...args);
-const mapActionService = (map, actionName) => ({
-  ...map,
-
-  // Wrap actual action service in a function so that it is lazily created the first time it is called
-  [actionName]: lazyService(container, actionName),
-});
-const connect = (propsFromState, actionServiceNames = []) =>
-  reduxConnect(
-    propsFromState ? pick(propsFromState) : null,
-    actionServiceNames.reduce(mapActionService, {})
-  );
-
-bottle.serviceFactory('App', App, 'MainHeader', 'Home', 'MenuLayout', 'CreateServer', 'EditServer');
-
-provideCommonServices(bottle, connect, withRouter);
-provideShortUrlsServices(bottle, connect);
-provideServersServices(bottle, connect, withRouter);
-provideTagsServices(bottle, connect);
-provideVisitsServices(bottle, connect);
-provideUtilsServices(bottle);
-
-export default container;

src/container/index.ts

@@ -0,0 +1,46 @@
+import Bottle, { IContainer } from 'bottlejs';
+import { connect as reduxConnect } from 'react-redux';
+import { pick } from 'ramda';
+import provideApiServices from '../api/services/provideServices';
+import provideCommonServices from '../common/services/provideServices';
+import provideShortUrlsServices from '../short-urls/services/provideServices';
+import provideServersServices from '../servers/services/provideServices';
+import provideVisitsServices from '../visits/services/provideServices';
+import provideTagsServices from '../tags/services/provideServices';
+import provideUtilsServices from '../utils/services/provideServices';
+import provideMercureServices from '../mercure/services/provideServices';
+import provideSettingsServices from '../settings/services/provideServices';
+import provideDomainsServices from '../domains/services/provideServices';
+import provideAppServices from '../app/services/provideServices';
+import { ConnectDecorator } from './types';
+
+type LazyActionMap = Record<string, Function>;
+
+const bottle = new Bottle();
+
+export const { container } = bottle;
+
+const lazyService = <T extends Function, K>(container: IContainer, serviceName: string) =>
+  (...args: any[]) => (container[serviceName] as T)(...args) as K;
+const mapActionService = (map: LazyActionMap, actionName: string): LazyActionMap => ({
+  ...map,
+  // Wrap actual action service in a function so that it is lazily created the first time it is called
+  [actionName]: lazyService(container, actionName),
+});
+const connect: ConnectDecorator = (propsFromState: string[] | null, actionServiceNames: string[] = []) =>
+  reduxConnect(
+    propsFromState ? pick(propsFromState) : null,
+    actionServiceNames.reduce(mapActionService, {}),
+  );
+
+provideAppServices(bottle, connect);
+provideCommonServices(bottle, connect);
+provideApiServices(bottle);
+provideShortUrlsServices(bottle, connect);
+provideServersServices(bottle, connect);
+provideTagsServices(bottle, connect);
+provideVisitsServices(bottle, connect);
+provideUtilsServices(bottle);
+provideMercureServices(bottle);
+provideSettingsServices(bottle, connect);
+provideDomainsServices(bottle, connect);

src/container/store.js

@@ -1,13 +0,0 @@
-import ReduxThunk from 'redux-thunk';
-import { applyMiddleware, compose, createStore } from 'redux';
-import reducers from '../reducers';
-
-const composeEnhancers = process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-  : compose;
-
-const store = createStore(reducers, composeEnhancers(
-  applyMiddleware(ReduxThunk)
-));
-
-export default store;

src/container/store.ts

@@ -0,0 +1,21 @@
+import ReduxThunk from 'redux-thunk';
+import { applyMiddleware, compose, createStore } from 'redux';
+import { save, load, RLSOptions } from 'redux-localstorage-simple';
+import reducers from '../reducers';
+import { migrateDeprecatedSettings } from '../settings/helpers';
+import { ShlinkState } from './types';
+
+const isProduction = process.env.NODE_ENV !== 'production';
+const composeEnhancers: Function = !isProduction && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const localStorageConfig: RLSOptions = {
+  states: [ 'settings', 'servers' ],
+  namespace: 'shlink',
+  namespaceSeparator: '.',
+  debounce: 300,
+};
+const preloadedState = migrateDeprecatedSettings(load(localStorageConfig) as ShlinkState);
+
+export const store = createStore(reducers, preloadedState, composeEnhancers(
+  applyMiddleware(save(localStorageConfig), ReduxThunk),
+));

src/container/types.ts

@@ -0,0 +1,44 @@
+import { MercureInfo } from '../mercure/reducers/mercureInfo';
+import { SelectedServer, ServersMap } from '../servers/data';
+import { Settings } from '../settings/reducers/settings';
+import { ShortUrlCreation } from '../short-urls/reducers/shortUrlCreation';
+import { ShortUrlDeletion } from '../short-urls/reducers/shortUrlDeletion';
+import { ShortUrlEdition } from '../short-urls/reducers/shortUrlEdition';
+import { ShortUrlsList } from '../short-urls/reducers/shortUrlsList';
+import { TagDeletion } from '../tags/reducers/tagDelete';
+import { TagEdition } from '../tags/reducers/tagEdit';
+import { TagsList } from '../tags/reducers/tagsList';
+import { ShortUrlDetail } from '../short-urls/reducers/shortUrlDetail';
+import { ShortUrlVisits } from '../visits/reducers/shortUrlVisits';
+import { TagVisits } from '../visits/reducers/tagVisits';
+import { DomainsList } from '../domains/reducers/domainsList';
+import { VisitsOverview } from '../visits/reducers/visitsOverview';
+import { VisitsInfo } from '../visits/types';
+import { Sidebar } from '../common/reducers/sidebar';
+
+export interface ShlinkState {
+  servers: ServersMap;
+  selectedServer: SelectedServer;
+  shortUrlsList: ShortUrlsList;
+  shortUrlCreationResult: ShortUrlCreation;
+  shortUrlDeletion: ShortUrlDeletion;
+  shortUrlEdition: ShortUrlEdition;
+  shortUrlVisits: ShortUrlVisits;
+  tagVisits: TagVisits;
+  orphanVisits: VisitsInfo;
+  nonOrphanVisits: VisitsInfo;
+  shortUrlDetail: ShortUrlDetail;
+  tagsList: TagsList;
+  tagDelete: TagDeletion;
+  tagEdit: TagEdition;
+  mercureInfo: MercureInfo;
+  settings: Settings;
+  domainsList: DomainsList;
+  visitsOverview: VisitsOverview;
+  appUpdated: boolean;
+  sidebar: Sidebar;
+}
+
+export type ConnectDecorator = (props: string[] | null, actions?: string[]) => any;
+
+export type GetState = () => ShlinkState;

src/domains/DomainRow.tsx

@@ -0,0 +1,88 @@
+import { FC, useEffect } from 'react';
+import { Button, UncontrolledTooltip } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faBan as forbiddenIcon,
+  faDotCircle as defaultDomainIcon,
+  faEdit as editIcon,
+} from '@fortawesome/free-solid-svg-icons';
+import { ShlinkDomainRedirects } from '../api/types';
+import { useToggle } from '../utils/helpers/hooks';
+import { OptionalString } from '../utils/utils';
+import { SelectedServer } from '../servers/data';
+import { supportsDefaultDomainRedirectsEdition } from '../utils/helpers/features';
+import { EditDomainRedirectsModal } from './helpers/EditDomainRedirectsModal';
+import { Domain } from './data';
+import { DomainStatusIcon } from './helpers/DomainStatusIcon';
+
+interface DomainRowProps {
+  domain: Domain;
+  defaultRedirects?: ShlinkDomainRedirects;
+  editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
+  checkDomainHealth: (domain: string) => void;
+  selectedServer: SelectedServer;
+}
+
+const Nr: FC<{ fallback: OptionalString }> = ({ fallback }) => (
+  <span className="text-muted">
+    {!fallback && <small>No redirect</small>}
+    {fallback && <>{fallback} <small>(as fallback)</small></>}
+  </span>
+);
+const DefaultDomain: FC = () => (
+  <>
+    <FontAwesomeIcon fixedWidth icon={defaultDomainIcon} className="text-primary" id="defaultDomainIcon" />
+    <UncontrolledTooltip target="defaultDomainIcon" placement="right">Default domain</UncontrolledTooltip>
+  </>
+);
+
+export const DomainRow: FC<DomainRowProps> = (
+  { domain, editDomainRedirects, checkDomainHealth, defaultRedirects, selectedServer },
+) => {
+  const [ isOpen, toggle ] = useToggle();
+  const { domain: authority, isDefault, redirects, status } = domain;
+  const canEditDomain = !isDefault || supportsDefaultDomainRedirectsEdition(selectedServer);
+
+  useEffect(() => {
+    checkDomainHealth(domain.domain);
+  }, []);
+
+  return (
+    <tr className="responsive-table__row">
+      <td className="responsive-table__cell" data-th="Is default domain">{isDefault && <DefaultDomain />}</td>
+      <th className="responsive-table__cell" data-th="Domain">{authority}</th>
+      <td className="responsive-table__cell" data-th="Base path redirect">
+        {redirects?.baseUrlRedirect ?? <Nr fallback={defaultRedirects?.baseUrlRedirect} />}
+      </td>
+      <td className="responsive-table__cell" data-th="Regular 404 redirect">
+        {redirects?.regular404Redirect ?? <Nr fallback={defaultRedirects?.regular404Redirect} />}
+      </td>
+      <td className="responsive-table__cell" data-th="Invalid short URL redirect">
+        {redirects?.invalidShortUrlRedirect ?? <Nr fallback={defaultRedirects?.invalidShortUrlRedirect} />}
+      </td>
+      <td className="responsive-table__cell text-lg-center" data-th="Status">
+        <DomainStatusIcon status={status} />
+      </td>
+      <td className="responsive-table__cell text-end">
+        <span id={!canEditDomain ? 'defaultDomainBtn' : undefined}>
+          <Button outline size="sm" disabled={!canEditDomain} onClick={!canEditDomain ? undefined : toggle}>
+            <FontAwesomeIcon fixedWidth icon={!canEditDomain ? forbiddenIcon : editIcon} />
+          </Button>
+        </span>
+        {!canEditDomain && (
+          <UncontrolledTooltip target="defaultDomainBtn" placement="left">
+            Redirects for default domain cannot be edited here.
+            <br />
+            Use config options or env vars directly on the server.
+          </UncontrolledTooltip>
+        )}
+      </td>
+      <EditDomainRedirectsModal
+        domain={domain}
+        isOpen={isOpen}
+        toggle={toggle}
+        editDomainRedirects={editDomainRedirects}
+      />
+    </tr>
+  );
+};

src/domains/DomainSelector.scss

@@ -0,0 +1,19 @@
+@import '../utils/base';
+@import '../utils/mixins/vertical-align';
+
+.domains-dropdown__toggle-btn.domains-dropdown__toggle-btn,
+.domains-dropdown__toggle-btn.domains-dropdown__toggle-btn:hover,
+.domains-dropdown__toggle-btn.domains-dropdown__toggle-btn:active {
+  color: $textPlaceholder !important;
+}
+
+.domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active,
+.domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active:hover,
+.domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active:active {
+  color: var(--input-text-color) !important;
+}
+
+.domains-dropdown__back-btn.domains-dropdown__back-btn,
+.domains-dropdown__back-btn.domains-dropdown__back-btn:hover {
+  border-color: var(--border-color);
+}

src/domains/DomainSelector.tsx

@@ -0,0 +1,72 @@
+import { useEffect } from 'react';
+import { Button, DropdownItem, Input, InputGroup, UncontrolledTooltip, InputProps } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUndo } from '@fortawesome/free-solid-svg-icons';
+import { isEmpty, pipe } from 'ramda';
+import { DropdownBtn } from '../utils/DropdownBtn';
+import { useToggle } from '../utils/helpers/hooks';
+import { DomainsList } from './reducers/domainsList';
+import './DomainSelector.scss';
+
+export interface DomainSelectorProps extends Omit<InputProps, 'onChange'> {
+  value?: string;
+  onChange: (domain: string) => void;
+}
+
+interface DomainSelectorConnectProps extends DomainSelectorProps {
+  listDomains: Function;
+  domainsList: DomainsList;
+}
+
+export const DomainSelector = ({ listDomains, value, domainsList, onChange }: DomainSelectorConnectProps) => {
+  const [ inputDisplayed,, showInput, hideInput ] = useToggle();
+  const { domains } = domainsList;
+  const valueIsEmpty = isEmpty(value);
+  const unselectDomain = () => onChange('');
+
+  useEffect(() => {
+    listDomains();
+  }, []);
+
+  return inputDisplayed ? (
+    <InputGroup>
+      <Input
+        value={value ?? ''}
+        placeholder="Domain"
+        onChange={(e) => onChange(e.target.value)}
+      />
+      <Button
+        id="backToDropdown"
+        outline
+        type="button"
+        className="domains-dropdown__back-btn"
+        onClick={pipe(unselectDomain, hideInput)}
+      >
+        <FontAwesomeIcon icon={faUndo} />
+      </Button>
+      <UncontrolledTooltip target="backToDropdown" placement="left" trigger="hover">
+        Existing domains
+      </UncontrolledTooltip>
+    </InputGroup>
+  ) : (
+    <DropdownBtn
+      text={valueIsEmpty ? 'Domain' : `Domain: ${value}`}
+      className={!valueIsEmpty ? 'domains-dropdown__toggle-btn--active' : 'domains-dropdown__toggle-btn'}
+    >
+      {domains.map(({ domain, isDefault }) => (
+        <DropdownItem
+          key={domain}
+          active={value === domain || isDefault && valueIsEmpty}
+          onClick={() => onChange(domain)}
+        >
+          {domain}
+          {isDefault && <span className="float-end text-muted">default</span>}
+        </DropdownItem>
+      ))}
+      <DropdownItem divider />
+      <DropdownItem onClick={pipe(unselectDomain, showInput)}>
+        <i>New domain</i>
+      </DropdownItem>
+    </DropdownBtn>
+  );
+};

src/domains/ManageDomains.tsx

@@ -0,0 +1,76 @@
+import { FC, useEffect } from 'react';
+import Message from '../utils/Message';
+import { Result } from '../utils/Result';
+import { ShlinkApiError } from '../api/ShlinkApiError';
+import { SimpleCard } from '../utils/SimpleCard';
+import SearchField from '../utils/SearchField';
+import { ShlinkDomainRedirects } from '../api/types';
+import { SelectedServer } from '../servers/data';
+import { DomainsList } from './reducers/domainsList';
+import { DomainRow } from './DomainRow';
+
+interface ManageDomainsProps {
+  listDomains: Function;
+  filterDomains: (searchTerm: string) => void;
+  editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
+  checkDomainHealth: (domain: string) => void;
+  domainsList: DomainsList;
+  selectedServer: SelectedServer;
+}
+
+const headers = [ '', 'Domain', 'Base path redirect', 'Regular 404 redirect', 'Invalid short URL redirect', '', '' ];
+
+export const ManageDomains: FC<ManageDomainsProps> = (
+  { listDomains, domainsList, filterDomains, editDomainRedirects, checkDomainHealth, selectedServer },
+) => {
+  const { filteredDomains: domains, defaultRedirects, loading, error, errorData } = domainsList;
+  const resolvedDefaultRedirects = defaultRedirects ?? domains.find(({ isDefault }) => isDefault)?.redirects;
+
+  useEffect(() => {
+    listDomains();
+  }, []);
+
+  if (loading) {
+    return <Message loading />;
+  }
+
+  const renderContent = () => {
+    if (error) {
+      return (
+        <Result type="error">
+          <ShlinkApiError errorData={errorData} fallbackMessage="Error loading domains :(" />
+        </Result>
+      );
+    }
+
+    return (
+      <SimpleCard>
+        <table className="table table-hover responsive-table mb-0">
+          <thead className="responsive-table__header">
+            <tr>{headers.map((column, index) => <th key={index}>{column}</th>)}</tr>
+          </thead>
+          <tbody>
+            {domains.length < 1 && <tr><td colSpan={headers.length} className="text-center">No results found</td></tr>}
+            {domains.map((domain) => (
+              <DomainRow
+                key={domain.domain}
+                domain={domain}
+                editDomainRedirects={editDomainRedirects}
+                checkDomainHealth={checkDomainHealth}
+                defaultRedirects={resolvedDefaultRedirects}
+                selectedServer={selectedServer}
+              />
+            ))}
+          </tbody>
+        </table>
+      </SimpleCard>
+    );
+  };
+
+  return (
+    <>
+      <SearchField className="mb-3" onChange={filterDomains} />
+      {renderContent()}
+    </>
+  );
+};

src/domains/data/index.ts

@@ -0,0 +1,7 @@
+import { ShlinkDomain } from '../../api/types';
+
+export type DomainStatus = 'validating' | 'valid' | 'invalid';
+
+export interface Domain extends ShlinkDomain {
+  status: DomainStatus;
+}