Merge pull request #848 from shlinkio/develop

Release 3.10.2

.dockerignore

@@ -1,5 +1,4 @@
 ./.github
-./.stryker-tmp
 ./build
 ./coverage
 ./node_modules

.github/workflows/ci.yml

@@ -11,7 +11,6 @@ jobs:
   ci:
     uses: shlinkio/github-actions/.github/workflows/web-app-ci.yml@main
     with:
-      node-version: 16.15
-      with-mutation-tests: true
+      node-version: 20.2
       publish-coverage: true
       force-install: true

.github/workflows/deploy-preview.yml

@@ -9,19 +9,18 @@ jobs:
     continue-on-error: true
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         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
+        uses: actions/setup-node@v3
         with:
-          node-version: 16.15
+          node-version: 20.2
       - name: Build
         run: |
           npm ci --force && \
           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

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

@@ -1,28 +1,15 @@
-name: Build docker image
+name: Build and publish 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
+    uses: shlinkio/github-actions/.github/workflows/docker-build-and-publish.yml@main
+    secrets: inherit
+    with:
+      image-name: shlinkio/shlink-web-client
+      version-arg-name: VERSION
+      platforms: 'linux/arm64/v8,linux/amd64'

.github/workflows/publish-release.yml

@@ -10,11 +10,11 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Use node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
-          node-version: 16.15
+          node-version: 20.2
       - name: Generate release assets
         run: npm ci --force && VERSION=${GITHUB_REF#refs/tags/v} npm run build:dist
       - name: Publish release with assets

.gitignore

@@ -3,7 +3,6 @@
 
 # testing
 /coverage
-/.stryker-tmp
 /reports
 
 # production

CHANGELOG.md

@@ -4,6 +4,185 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [3.10.2] - 2023-07-09
+### Added
+* *Nothing*
+
+### Changed
+* [#781](https://github.com/shlinkio/shlink-web-client/issues/781) Migrate tests from jest to vitest.
+* [#843](https://github.com/shlinkio/shlink-web-client/issues/843) Build docker image only for new tags, making sure it always includes an actual version number.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
+## [3.10.1] - 2023-04-23
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#826](https://github.com/shlinkio/shlink-web-client/issues/826) Fix generated short URLs CSV so that it can be used to import on Shlink.
+
+
+## [3.10.0] - 2023-03-19
+### Added
+* [#807](https://github.com/shlinkio/shlink-web-client/issues/807) Add support for device-specific long-URLs when creating or editing short URLs.
+* [#808](https://github.com/shlinkio/shlink-web-client/issues/808) Respect settings on excluding bots in the overview section, for visits cards.
+* [#809](https://github.com/shlinkio/shlink-web-client/issues/809) Respect settings on excluding bots in the tags list.
+
+### Changed
+* [#798](https://github.com/shlinkio/shlink-web-client/issues/798) Remove stryker and mutation testing.
+* [#800](https://github.com/shlinkio/shlink-web-client/issues/800) Use `/tags/stats` endpoint to load tags stats, when the server supports it.
+* Update to Vite 4.2
+* Update to TypeScript 5
+* Update to coding standard v2.1.0
+* Decouple tests from RTK internals.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#799](https://github.com/shlinkio/shlink-web-client/issues/799) Fix fallback visits not taking into account configuration regarding excluding bots.
+
+
+## [3.9.1] - 2022-12-31
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#787](https://github.com/shlinkio/shlink-web-client/issues/787) Fixed wrong base path set in vite config when homepage is set as empty string.
+
+
+## [3.9.0] - 2022-12-31
+### Added
+* [#750](https://github.com/shlinkio/shlink-web-client/issues/750) Added new icon indicators telling if a short URL can be normally visited, it received the max amount of visits, is still not enabled, etc.
+* [#764](https://github.com/shlinkio/shlink-web-client/issues/764) Added support to exclude visits from visits on short URLs list when consuming Shlink 3.4.0.
+
+  This feature also comes with a new setting to disable visits from bots by default, both on short URLs lists and visits sections.
+
+* [#760](https://github.com/shlinkio/shlink-web-client/issues/760) Added support to exclude short URLs which have reached the maximum amount of visits, or are valid until a date in the past.
+
+### Changed
+* [#753](https://github.com/shlinkio/shlink-web-client/issues/753) Migrated from react-scripts/webpack to vite.
+* [#770](https://github.com/shlinkio/shlink-web-client/issues/770) Updated to latest dependencies.
+* [#741](https://github.com/shlinkio/shlink-web-client/issues/741) Improved `visitsAsyncThunk`, making it wrap pending/fulfilled/rejected actions, as well as custom ones, in a type-safe way.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* [#736](https://github.com/shlinkio/shlink-web-client/issues/736) Removed cards mode in tags. Only table mode is supported now.
+* [#774](https://github.com/shlinkio/shlink-web-client/issues/774) Dropped support for Shlink older than 2.8.0.
+
+### Fixed
+* [#715](https://github.com/shlinkio/shlink-web-client/issues/715) Fixed connection still failing on miss-configured servers, after editing their params to set proper values.
+
+
+## [3.8.2] - 2022-12-17
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#766](https://github.com/shlinkio/shlink-web-client/issues/766) Fixed visits query being lost when switching between sub-sections.
+* [#765](https://github.com/shlinkio/shlink-web-client/issues/765) Added missing `"Content-Type": "application/json"` to requests with payload, making older Shlink versions fail.
+
+
+## [3.8.1] - 2022-12-06
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#756](https://github.com/shlinkio/shlink-web-client/issues/756) Fixed all visits interval not working unless switching to a different interval first.
+* [#757](https://github.com/shlinkio/shlink-web-client/issues/757) Fixed visits fallback interval not working until the visits view has been loaded at least twice.
+
+
+## [3.8.0] - 2022-12-03
+### Added
+* [#708](https://github.com/shlinkio/shlink-web-client/issues/708) Added support for API v3.
+* [#717](https://github.com/shlinkio/shlink-web-client/issues/717) Allowed to select time in 10 minute intervals when configuring "enabled since" and "enabled until" on short URLs.
+* [#748](https://github.com/shlinkio/shlink-web-client/issues/748) Improved visits section to add filters to the query string, allowing to navigate to a specific state or bookmarking filters.
+
+### Changed
+* [#713](https://github.com/shlinkio/shlink-web-client/issues/713) Updated dependencies.
+* [#620](https://github.com/shlinkio/shlink-web-client/issues/620) Migrated all reducers to redux toolkit.
+* [#721](https://github.com/shlinkio/shlink-web-client/issues/721) Migrated from axios to fetch.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#590](https://github.com/shlinkio/shlink-web-client/issues/590) Fixed position of the datepicker triangle.
+* [#729](https://github.com/shlinkio/shlink-web-client/issues/729) Fixed wrong stats displayed in tags after renaming.
+* [#737](https://github.com/shlinkio/shlink-web-client/issues/737) Fixed incorrect contrast in warning messages when using dark theme.
+* [#726](https://github.com/shlinkio/shlink-web-client/issues/726) Fixed delete server and delete short URL modals getting removed from the DOM before finishing close transition.
+* [#749](https://github.com/shlinkio/shlink-web-client/issues/749) Fixed broken short URLs table when some short URL has a too long custom slug.
+
+
+## [3.7.3] - 2022-09-13
+### Added
+* [#703](https://github.com/shlinkio/shlink-web-client/issues/703) Added support to publish docker image in GHCR.
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#709](https://github.com/shlinkio/shlink-web-client/issues/709) Fixed visits not being displayed after a large loading has finished.
+
+
 ## [3.7.2] - 2022-08-07
 ### Added
 * [#671](https://github.com/shlinkio/shlink-web-client/issues/671) Added proper color-scheme in root element based on selected theme.

Dockerfile

@@ -1,10 +1,10 @@
-FROM node:16.15-alpine as node
+FROM node:20.2-alpine as node
 COPY . /shlink-web-client
 ARG VERSION="latest"
 ENV VERSION ${VERSION}
-RUN cd /shlink-web-client && npm ci --force && NODE_ENV=production npm run build
+RUN cd /shlink-web-client && npm ci --force && npm run build
 
-FROM nginx:1.21-alpine
+FROM nginx:1.23-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

README.md

@@ -1,11 +1,12 @@
 # shlink-web-client
 
-[![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)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/shlinkio/shlink-web-client/ci.yml?branch=develop&logo=github&style=flat-square)](https://github.com/shlinkio/shlink-web-client/actions/workflows/ci.yml?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?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)
+[![Twitter](https://img.shields.io/badge/follow-shlinkio-blue.svg?style=flat-square&logo=twitter&color=blue)](https://twitter.com/shlinkio)
+[![Mastodon](https://img.shields.io/mastodon/follow/109329425426175098?color=%236364ff&domain=https%3A%2F%2Ffosstodon.org&label=follow&logo=mastodon&logoColor=white&style=flat-square)](https://fosstodon.org/@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).
@@ -53,7 +54,7 @@ Those servers can be exported and imported in other browsers, but if for some re
 [
   {
     "name": "Main server",
-    "url": "https://doma.in",
+    "url": "https://s.test",
     "apiKey": "09c972b7-506b-49f1-a19a-d729e22e599c"
   },
   {
@@ -84,7 +85,7 @@ If you want to pre-configure a single server, you can provide its config via env
     docker run \
         --name shlink-web-client \
         -p 8000:80 \
-        -e SHLINK_SERVER_URL=https://doma.in \
+        -e SHLINK_SERVER_URL=https://s.test \
         -e SHLINK_SERVER_API_KEY=6aeb82c6-e275-4538-a747-31f9abfba63c \
         shlinkio/shlink-web-client
     ```

babel.config.js

@@ -1,11 +0,0 @@
-module.exports = {
-  presets: [
-    [
-      'react-app',
-      {
-        runtime: 'automatic',
-        typescript: true,
-      },
-    ],
-  ],
-};

config/jest/cssTransform.js

@@ -1,12 +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 { code: 'module.exports = {};' };
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
-  },
-};

config/jest/fileTransform.js

@@ -1,31 +0,0 @@
-
-const path = require('path');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename));
-
-    if (filename.match(/\.svg$/)) {
-      return `module.exports = {
-        __esModule: true,
-        default: ${assetFilename},
-        ReactComponent: (props) => ({
-          $$typeof: Symbol.for('react.element'),
-          type: 'svg',
-          ref: null,
-          key: null,
-          props: Object.assign({}, props, {
-            children: ${assetFilename}
-          })
-        }),
-      };`;
-    }
-
-    return {
-      code: `module.exports = ${assetFilename};`
-    };
-  },
-};

config/jest/setupTests.ts

@@ -1,8 +0,0 @@
-import '@testing-library/jest-dom';
-import 'jest-canvas-mock';
-import ResizeObserver from 'resize-observer-polyfill';
-
-(global as any).ResizeObserver = ResizeObserver;
-(global as any).scrollTo = () => {};
-(global as any).prompt = () => {};
-(global as any).matchMedia = (media: string) => ({ matches: false, media });

config/test/setupTests.ts

@@ -0,0 +1,27 @@
+import 'vitest-canvas-mock';
+import 'chart.js/auto';
+import type { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
+import matchers from '@testing-library/jest-dom/matchers';
+import { cleanup } from '@testing-library/react';
+import ResizeObserver from 'resize-observer-polyfill';
+import { afterEach, expect } from 'vitest';
+
+// Workaround for TypeScript error: https://github.com/testing-library/jest-dom/issues/439#issuecomment-1536524120
+declare module 'vitest' {
+  interface Assertion<T = any> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {}
+}
+
+// Extends Vitest's expect method with methods from react-testing-library
+expect.extend(matchers);
+
+afterEach(() => {
+  // Clears all mocks after every test
+  vi.clearAllMocks();
+  // Run a cleanup after each test case (e.g. clearing jsdom)
+  cleanup();
+});
+
+(global as any).ResizeObserver = ResizeObserver;
+(global as any).scrollTo = () => {};
+(global as any).prompt = () => {};
+(global as any).matchMedia = (media: string) => ({ matches: false, media });

docker-compose.yml

@@ -3,11 +3,11 @@ version: '3'
 services:
   shlink_web_client_node:
     container_name: shlink_web_client_node
-    image: node:16.15-alpine
-    command: /bin/sh -c "cd /home/shlink/www && npm install && npm run start"
+    image: node:20.2-alpine
+    command: /bin/sh -c "cd /home/shlink/www && npm install --force && npm run start"
     volumes:
       - ./:/home/shlink/www
     ports:
       - "3000:3000"
       - "56745:56745"
-      - "5000:5000"
+      - "4173:4173"

index.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="theme-color" content="#4696e5">
+
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
+
+    <!-- FavIcon itself -->
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any">
+    <link rel="icon" type="image/png" href="/favicon.png">
+    <link rel="icon" type="image/gif" href="/favicon.gif">
+    <!-- Apple Touch -->
+    <link rel="apple-touch-icon" sizes="16x16" href="/icons/icon-16x16.png">
+    <link rel="apple-touch-icon" sizes="24x24" href="/icons/icon-24x24.png">
+    <link rel="apple-touch-icon" sizes="32x32" href="/icons/icon-32x32.png">
+    <link rel="apple-touch-icon" sizes="40x40" href="/icons/icon-40x40.png">
+    <link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/icons/icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="64x64" href="/icons/icon-64x64.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/icons/icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/icons/icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/icons/icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="128x128" href="/icons/icon-128x128.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="150x150" href="/icons/icon-150x150.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="160x160" href="/icons/icon-160x160.png">
+    <link rel="apple-touch-icon" sizes="167x167" href="/icons/icon-167x167.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png">
+    <link rel="apple-touch-icon" sizes="196x196" href="/icons/icon-196x196.png">
+    <link rel="apple-touch-icon" sizes="228x228" href="/icons/icon-228x228.png">
+    <link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png">
+    <link rel="apple-touch-icon" sizes="310x310" href="/icons/icon-310x310.png">
+    <link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png">
+    <link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png">
+    <link rel="apple-touch-icon" sizes="1024x1024" href="/icons/icon-1024x1024.png">
+    <!-- Normal -->
+    <link rel="icon" type="image/png" sizes="1024x1024" href="/icons/icon-1024x1024.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512x512.png">
+    <link rel="icon" type="image/png" sizes="384x384" href="/icons/icon-384x384.png">
+    <link rel="icon" type="image/png" sizes="310x310" href="/icons/icon-310x310.png">
+    <link rel="icon" type="image/png" sizes="256x256" href="/icons/icon-256x256.png">
+    <link rel="icon" type="image/png" sizes="228x228" href="/icons/icon-228x228.png">
+    <link rel="icon" type="image/png" sizes="196x196" href="/icons/icon-196x196.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="180x180" href="/icons/icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="167x167" href="/icons/icon-167x167.png">
+    <link rel="icon" type="image/png" sizes="160x160" href="/icons/icon-160x160.png">
+    <link rel="icon" type="image/png" sizes="152x152" href="/icons/icon-152x152.png">
+    <link rel="icon" type="image/png" sizes="150x150" href="/icons/icon-150x150.png">
+    <link rel="icon" type="image/png" sizes="144x144" href="/icons/icon-144x144.png">
+    <link rel="icon" type="image/png" sizes="128x128" href="/icons/icon-128x128.png">
+    <link rel="icon" type="image/png" sizes="120x120" href="/icons/icon-120x120.png">
+    <link rel="icon" type="image/png" sizes="114x114" href="/icons/icon-114x114.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/icons/icon-96x96.png">
+    <link rel="icon" type="image/png" sizes="76x76" href="/icons/icon-76x76.png">
+    <link rel="icon" type="image/png" sizes="72x72" href="/icons/icon-72x72.png">
+    <link rel="icon" type="image/png" sizes="64x64" href="/icons/icon-64x64.png">
+    <link rel="icon" type="image/png" sizes="60x60" href="/icons/icon-60x60.png">
+    <link rel="icon" type="image/png" sizes="48x48" href="/icons/icon-48x48.png">
+    <link rel="icon" type="image/png" sizes="40x40" href="/icons/icon-40x40.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/icons/icon-32x32.png">
+    <link rel="icon" type="image/png" sizes="24x24" href="/icons/icon-24x24.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/icons/icon-16x16.png">
+    <!-- MS -->
+    <meta name="msapplication-TileImage" content="/icons/icon-144x144.png">
+    <meta name="msapplication-square70x70logo" content="/icons/icon-70x70.png">
+    <meta name="msapplication-square144x144logo" content="/icons/icon-144x144.png">
+    <meta name="msapplication-square150x150logo" content="/icons/icon-150x150.png">
+    <meta name="msapplication-square310x310logo" content="/icons/icon-310x310.png">
+    <title>Shlink — The URL shortener</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

jest.config.js

@@ -1,40 +0,0 @@
-module.exports = {
-  coverageDirectory: '<rootDir>/coverage',
-  collectCoverageFrom: [
-    'src/**/*.{ts,tsx}',
-    '!src/*.{ts,tsx}',
-    '!src/reducers/index.ts',
-    '!src/**/provideServices.ts',
-    '!src/container/*.ts',
-  ],
-  coverageThreshold: {
-    global: {
-      statements: 90,
-      branches: 80,
-      functions: 85,
-      lines: 90,
-    },
-  },
-  setupFilesAfterEnv: ['<rootDir>/config/jest/setupTests.ts'],
-  testMatch: ['<rootDir>/test/**/*.test.{ts,tsx}'],
-  testEnvironment: 'jsdom',
-  testEnvironmentOptions: {
-    url: 'http://localhost',
-  },
-  transform: {
-    '^.+\\.(ts|tsx|js)$': '<rootDir>/node_modules/babel-jest',
-    '^.+\\.scss$': '<rootDir>/config/jest/cssTransform.js',
-    '^(?!.*\\.(ts|tsx|js|json|scss)$)': '<rootDir>/config/jest/fileTransform.js',
-  },
-  transformIgnorePatterns: [
-    '<rootDir>/.stryker-tmp',
-    'node_modules\/(?!(\@react-leaflet|react-leaflet|leaflet|react-chartjs-2|react-colorful)\/)',
-    '^.+\\.module\\.scss$',
-  ],
-  moduleNameMapper: {
-    '^.+\\.module\\.scss$': 'identity-obj-proxy',
-    'react-chartjs-2': '<rootDir>/node_modules/react-chartjs-2/dist/index.js',
-    'uuid': '<rootDir>/node_modules/uuid/dist/index.js',
-  },
-  moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
-};

manifest.ts

@@ -0,0 +1,145 @@
+export const manifest = {
+  short_name: 'Shlink',
+  name: 'Shlink',
+  start_url: '/',
+  display: 'standalone',
+  theme_color: '#4696e5',
+  background_color: '#4696e5',
+  icons: [
+    {
+      src: './icons/icon-16x16.png',
+      type: 'image/png',
+      sizes: '16x16',
+    },
+    {
+      src: './icons/icon-24x24.png',
+      type: 'image/png',
+      sizes: '24x24',
+    },
+    {
+      src: './icons/icon-32x32.png',
+      type: 'image/png',
+      sizes: '32x32',
+    },
+    {
+      src: './icons/icon-40x40.png',
+      type: 'image/png',
+      sizes: '40x40',
+    },
+    {
+      src: './icons/icon-48x48.png',
+      type: 'image/png',
+      sizes: '48x48',
+    },
+    {
+      src: './icons/icon-60x60.png',
+      type: 'image/png',
+      sizes: '60x60',
+    },
+    {
+      src: './icons/icon-64x64.png',
+      type: 'image/png',
+      sizes: '64x64',
+    },
+    {
+      src: './icons/icon-72x72.png',
+      type: 'image/png',
+      sizes: '72x72',
+    },
+    {
+      src: './icons/icon-76x76.png',
+      type: 'image/png',
+      sizes: '76x76',
+    },
+    {
+      src: './icons/icon-96x96.png',
+      type: 'image/png',
+      sizes: '96x96',
+    },
+    {
+      src: './icons/icon-114x114.png',
+      type: 'image/png',
+      sizes: '114x114',
+    },
+    {
+      src: './icons/icon-120x120.png',
+      type: 'image/png',
+      sizes: '120x120',
+    },
+    {
+      src: './icons/icon-128x128.png',
+      type: 'image/png',
+      sizes: '128x128',
+    },
+    {
+      src: './icons/icon-144x144.png',
+      type: 'image/png',
+      sizes: '144x144',
+    },
+    {
+      src: './icons/icon-150x150.png',
+      type: 'image/png',
+      sizes: '150x150',
+    },
+    {
+      src: './icons/icon-152x152.png',
+      type: 'image/png',
+      sizes: '152x152',
+    },
+    {
+      src: './icons/icon-160x160.png',
+      type: 'image/png',
+      sizes: '160x160',
+    },
+    {
+      src: './icons/icon-167x167.png',
+      type: 'image/png',
+      sizes: '167x167',
+    },
+    {
+      src: './icons/icon-180x180.png',
+      type: 'image/png',
+      sizes: '180x180',
+    },
+    {
+      src: './icons/icon-192x192.png',
+      type: 'image/png',
+      sizes: '192x192',
+    },
+    {
+      src: './icons/icon-196x196.png',
+      type: 'image/png',
+      sizes: '196x196',
+    },
+    {
+      src: './icons/icon-228x228.png',
+      type: 'image/png',
+      sizes: '228x228',
+    },
+    {
+      src: './icons/icon-256x256.png',
+      type: 'image/png',
+      sizes: '256x256',
+    },
+    {
+      src: './icons/icon-310x310.png',
+      type: 'image/png',
+      sizes: '310x310',
+    },
+    {
+      src: './icons/icon-384x384.png',
+      type: 'image/png',
+      sizes: '384x384',
+    },
+    {
+      src: './icons/icon-512x512.png',
+      type: 'image/png',
+      sizes: '512x512',
+    },
+    {
+      src: './icons/icon-1024x1024.png',
+      type: 'image/png',
+      sizes: '1024x1024',
+    },
+  ],
+};

package.json

@@ -12,99 +12,91 @@
     "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": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
-    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build && node scripts/replace-version.mjs",
+    "types": "tsc",
+    "start": "vite serve --host=0.0.0.0",
+    "preview": "vite preview --host=0.0.0.0",
+    "build": "npm run types && vite build && node scripts/replace-version.mjs",
     "build:dist": "npm run build && node scripts/create-dist-file.mjs",
-    "build:serve": "serve -p 5000 ./build",
-    "test": "jest --env=jsdom --colors",
-    "test:coverage": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary",
-    "test:ci": "npm run test:coverage -- --coverageReporters=clover --ci",
-    "test:pretty": "npm run test:coverage -- --coverageReporters=html",
-    "test:verbose": "npm run test -- --verbose",
-    "mutate": "./node_modules/.bin/stryker run --concurrency 4 --ignoreStatic"
+    "test": "vitest run --run",
+    "test:watch": "vitest --watch",
+    "test:ci": "npm run test -- --coverage",
+    "test:verbose": "npm run test -- --verbose"
   },
   "dependencies": {
-    "@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",
+    "@fortawesome/fontawesome-free": "^6.3.0",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.3.0",
+    "@fortawesome/free-regular-svg-icons": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@json2csv/plainjs": "^6.1.2",
+    "@reduxjs/toolkit": "^1.9.1",
+    "bootstrap": "^5.2.3",
+    "bottlejs": "^2.0.1",
     "bowser": "^2.11.0",
-    "chart.js": "^3.7.1",
-    "classnames": "^2.3.1",
-    "compare-versions": "^4.1.3",
+    "chart.js": "^4.1.1",
+    "classnames": "^2.3.2",
+    "compare-versions": "^5.0.3",
     "csvtojson": "^2.0.10",
-    "date-fns": "^2.28.0",
-    "event-source-polyfill": "^1.0.25",
-    "json2csv": "^5.0.7",
-    "leaflet": "^1.7.1",
-    "qs": "^6.9.6",
+    "date-fns": "^2.29.3",
+    "event-source-polyfill": "^1.0.31",
+    "history": "^5.3.0",
+    "leaflet": "^1.9.3",
+    "qs": "^6.11.0",
     "ramda": "^0.27.2",
-    "react": "^18.1.0",
-    "react-chartjs-2": "^4.1.0",
-    "react-colorful": "^5.5.1",
+    "react": "^18.2.0",
+    "react-chartjs-2": "^5.1.0",
+    "react-colorful": "^5.6.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-datepicker": "^4.8.0",
-    "react-dom": "^18.1.0",
-    "react-external-link": "^2.0.0",
-    "react-leaflet": "^4.0.0",
-    "react-redux": "^8.0.0",
-    "react-router-dom": "^6.3.0",
+    "react-dom": "^18.2.0",
+    "react-external-link": "^2.2.0",
+    "react-leaflet": "^4.2.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.6.1",
     "react-swipeable": "^7.0.0",
     "react-tag-autocomplete": "^6.3.0",
-    "reactstrap": "^9.0.1",
-    "redux": "^4.2.0",
-    "redux-localstorage-simple": "^2.4.1",
-    "redux-thunk": "^2.4.1",
-    "stream": "^0.0.2",
+    "reactstrap": "^9.1.5",
+    "redux-localstorage-simple": "^2.5.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"
+    "workbox-core": "^6.5.4",
+    "workbox-expiration": "^6.5.4",
+    "workbox-precaching": "^6.5.4",
+    "workbox-routing": "^6.5.4",
+    "workbox-strategies": "^6.5.4"
   },
   "devDependencies": {
-    "@shlinkio/eslint-config-js-coding-standard": "~2.0.2",
+    "@shlinkio/eslint-config-js-coding-standard": "~2.1.0",
     "@shlinkio/stylelint-config-css-coding-standard": "~1.0.1",
-    "@stryker-mutator/core": "^6.0.2",
-    "@stryker-mutator/jest-runner": "^6.0.2",
-    "@stryker-mutator/typescript-checker": "^6.0.2",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.1.1",
-    "@testing-library/user-event": "^14.1.1",
-    "@types/jest": "^27.4.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@total-typescript/shoehorn": "^0.1.0",
     "@types/json2csv": "^5.0.3",
-    "@types/leaflet": "^1.7.9",
+    "@types/leaflet": "^1.9.0",
     "@types/qs": "^6.9.7",
-    "@types/ramda": "0.27.38",
-    "@types/react": "^18.0.8",
+    "@types/ramda": "^0.28.15",
+    "@types/react": "^18.0.26",
     "@types/react-color": "^3.0.6",
-    "@types/react-copy-to-clipboard": "^5.0.2",
-    "@types/react-datepicker": "^4.3.4",
-    "@types/react-dom": "^18.0.3",
-    "@types/react-tag-autocomplete": "^6.1.1",
+    "@types/react-copy-to-clipboard": "^5.0.4",
+    "@types/react-datepicker": "^4.8.0",
+    "@types/react-dom": "^18.0.10",
+    "@types/react-tag-autocomplete": "^6.3.0",
     "@types/uuid": "^8.3.4",
-    "adm-zip": "^0.5.9",
-    "babel-jest": "^28.0.3",
-    "chalk": "^5.0.1",
-    "eslint": "^8.12.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.0.3",
-    "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^28.0.2",
-    "react-scripts": "^5.0.1",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@vitest/coverage-v8": "^0.32.0",
+    "adm-zip": "^0.5.10",
+    "chalk": "^5.2.0",
+    "eslint": "^8.30.0",
+    "jsdom": "^22.0.0",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.49.9",
-    "serve": "^13.0.2",
-    "stryker-cli": "^1.0.2",
-    "stylelint": "^14.8.2",
-    "ts-mockery": "^1.2.0",
-    "typescript": "^4.6.2",
-    "webpack": "^5.70.0"
+    "sass": "^1.57.1",
+    "stylelint": "^15.10.1",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9",
+    "vite-plugin-pwa": "^0.14.4",
+    "vitest": "^0.32.0",
+    "vitest-canvas-mock": "^0.2.2"
   },
   "browserslist": [
     ">0.2%",

public/index.html

@@ -1,109 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <meta name="theme-color" content="#4696e5">
-
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" crossorigin="use-credentials">
-
-    <!-- FavIcon itself -->
-    <link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico">
-    <link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg" sizes="any">
-    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon.png">
-    <link rel="icon" type="image/gif" href="%PUBLIC_URL%/favicon.gif">
-    <!-- Apple Touch -->
-    <link rel="apple-touch-icon" sizes="16x16" href="%PUBLIC_URL%/icons/icon-16x16.png">
-    <link rel="apple-touch-icon" sizes="24x24" href="%PUBLIC_URL%/icons/icon-24x24.png">
-    <link rel="apple-touch-icon" sizes="32x32" href="%PUBLIC_URL%/icons/icon-32x32.png">
-    <link rel="apple-touch-icon" sizes="40x40" href="%PUBLIC_URL%/icons/icon-40x40.png">
-    <link rel="apple-touch-icon" sizes="48x48" href="%PUBLIC_URL%/icons/icon-48x48.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="%PUBLIC_URL%/icons/icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="64x64" href="%PUBLIC_URL%/icons/icon-64x64.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/icons/icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/icons/icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="96x96" href="%PUBLIC_URL%/icons/icon-96x96.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/icons/icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="%PUBLIC_URL%/icons/icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="128x128" href="%PUBLIC_URL%/icons/icon-128x128.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/icons/icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="150x150" href="%PUBLIC_URL%/icons/icon-150x150.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/icons/icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="160x160" href="%PUBLIC_URL%/icons/icon-160x160.png">
-    <link rel="apple-touch-icon" sizes="167x167" href="%PUBLIC_URL%/icons/icon-167x167.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/icons/icon-180x180.png">
-    <link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/icons/icon-192x192.png">
-    <link rel="apple-touch-icon" sizes="196x196" href="%PUBLIC_URL%/icons/icon-196x196.png">
-    <link rel="apple-touch-icon" sizes="228x228" href="%PUBLIC_URL%/icons/icon-228x228.png">
-    <link rel="apple-touch-icon" sizes="256x256" href="%PUBLIC_URL%/icons/icon-256x256.png">
-    <link rel="apple-touch-icon" sizes="310x310" href="%PUBLIC_URL%/icons/icon-310x310.png">
-    <link rel="apple-touch-icon" sizes="384x384" href="%PUBLIC_URL%/icons/icon-384x384.png">
-    <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/icons/icon-512x512.png">
-    <link rel="apple-touch-icon" sizes="1024x1024" href="%PUBLIC_URL%/icons/icon-1024x1024.png">
-    <!-- Normal -->
-    <link rel="icon" type="image/png" sizes="1024x1024" href="%PUBLIC_URL%/icons/icon-1024x1024.png">
-    <link rel="icon" type="image/png" sizes="512x512" href="%PUBLIC_URL%/icons/icon-512x512.png">
-    <link rel="icon" type="image/png" sizes="384x384" href="%PUBLIC_URL%/icons/icon-384x384.png">
-    <link rel="icon" type="image/png" sizes="310x310" href="%PUBLIC_URL%/icons/icon-310x310.png">
-    <link rel="icon" type="image/png" sizes="256x256" href="%PUBLIC_URL%/icons/icon-256x256.png">
-    <link rel="icon" type="image/png" sizes="228x228" href="%PUBLIC_URL%/icons/icon-228x228.png">
-    <link rel="icon" type="image/png" sizes="196x196" href="%PUBLIC_URL%/icons/icon-196x196.png">
-    <link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/icons/icon-192x192.png">
-    <link rel="icon" type="image/png" sizes="180x180" href="%PUBLIC_URL%/icons/icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="167x167" href="%PUBLIC_URL%/icons/icon-167x167.png">
-    <link rel="icon" type="image/png" sizes="160x160" href="%PUBLIC_URL%/icons/icon-160x160.png">
-    <link rel="icon" type="image/png" sizes="152x152" href="%PUBLIC_URL%/icons/icon-152x152.png">
-    <link rel="icon" type="image/png" sizes="150x150" href="%PUBLIC_URL%/icons/icon-150x150.png">
-    <link rel="icon" type="image/png" sizes="144x144" href="%PUBLIC_URL%/icons/icon-144x144.png">
-    <link rel="icon" type="image/png" sizes="128x128" href="%PUBLIC_URL%/icons/icon-128x128.png">
-    <link rel="icon" type="image/png" sizes="120x120" href="%PUBLIC_URL%/icons/icon-120x120.png">
-    <link rel="icon" type="image/png" sizes="114x114" href="%PUBLIC_URL%/icons/icon-114x114.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/icons/icon-96x96.png">
-    <link rel="icon" type="image/png" sizes="76x76" href="%PUBLIC_URL%/icons/icon-76x76.png">
-    <link rel="icon" type="image/png" sizes="72x72" href="%PUBLIC_URL%/icons/icon-72x72.png">
-    <link rel="icon" type="image/png" sizes="64x64" href="%PUBLIC_URL%/icons/icon-64x64.png">
-    <link rel="icon" type="image/png" sizes="60x60" href="%PUBLIC_URL%/icons/icon-60x60.png">
-    <link rel="icon" type="image/png" sizes="48x48" href="%PUBLIC_URL%/icons/icon-48x48.png">
-    <link rel="icon" type="image/png" sizes="40x40" href="%PUBLIC_URL%/icons/icon-40x40.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/icons/icon-32x32.png">
-    <link rel="icon" type="image/png" sizes="24x24" href="%PUBLIC_URL%/icons/icon-24x24.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/icons/icon-16x16.png">
-    <!-- MS -->
-    <meta name="msapplication-TileImage" content="%PUBLIC_URL%/icons/icon-144x144.png">
-    <meta name="msapplication-square70x70logo" content="%PUBLIC_URL%/icons/icon-70x70.png">
-    <meta name="msapplication-square144x144logo" content="%PUBLIC_URL%/icons/icon-144x144.png">
-    <meta name="msapplication-square150x150logo" content="%PUBLIC_URL%/icons/icon-150x150.png">
-    <meta name="msapplication-square310x310logo" content="%PUBLIC_URL%/icons/icon-310x310.png">
-    
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>Shlink — The URL shortener</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

public/manifest.json

@@ -1,145 +0,0 @@
-{
-  "short_name": "Shlink",
-  "name": "Shlink",
-  "start_url": "/",
-  "display": "standalone",
-  "theme_color": "#4696e5",
-  "background_color": "#4696e5",
-  "icons": [
-    {
-      "src": "./icons/icon-16x16.png",
-      "type": "image/png",
-      "sizes": "16x16"
-    },
-    {
-      "src": "./icons/icon-24x24.png",
-      "type": "image/png",
-      "sizes": "24x24"
-    },
-    {
-      "src": "./icons/icon-32x32.png",
-      "type": "image/png",
-      "sizes": "32x32"
-    },
-    {
-      "src": "./icons/icon-40x40.png",
-      "type": "image/png",
-      "sizes": "40x40"
-    },
-    {
-      "src": "./icons/icon-48x48.png",
-      "type": "image/png",
-      "sizes": "48x48"
-    },
-    {
-      "src": "./icons/icon-60x60.png",
-      "type": "image/png",
-      "sizes": "60x60"
-    },
-    {
-      "src": "./icons/icon-64x64.png",
-      "type": "image/png",
-      "sizes": "64x64"
-    },
-    {
-      "src": "./icons/icon-72x72.png",
-      "type": "image/png",
-      "sizes": "72x72"
-    },
-    {
-      "src": "./icons/icon-76x76.png",
-      "type": "image/png",
-      "sizes": "76x76"
-    },
-    {
-      "src": "./icons/icon-96x96.png",
-      "type": "image/png",
-      "sizes": "96x96"
-    },
-    {
-      "src": "./icons/icon-114x114.png",
-      "type": "image/png",
-      "sizes": "114x114"
-    },
-    {
-      "src": "./icons/icon-120x120.png",
-      "type": "image/png",
-      "sizes": "120x120"
-    },
-    {
-      "src": "./icons/icon-128x128.png",
-      "type": "image/png",
-      "sizes": "128x128"
-    },
-    {
-      "src": "./icons/icon-144x144.png",
-      "type": "image/png",
-      "sizes": "144x144"
-    },
-    {
-      "src": "./icons/icon-150x150.png",
-      "type": "image/png",
-      "sizes": "150x150"
-    },
-    {
-      "src": "./icons/icon-152x152.png",
-      "type": "image/png",
-      "sizes": "152x152"
-    },
-    {
-      "src": "./icons/icon-160x160.png",
-      "type": "image/png",
-      "sizes": "160x160"
-    },
-    {
-      "src": "./icons/icon-167x167.png",
-      "type": "image/png",
-      "sizes": "167x167"
-    },
-    {
-      "src": "./icons/icon-180x180.png",
-      "type": "image/png",
-      "sizes": "180x180"
-    },
-    {
-      "src": "./icons/icon-192x192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "./icons/icon-196x196.png",
-      "type": "image/png",
-      "sizes": "196x196"
-    },
-    {
-      "src": "./icons/icon-228x228.png",
-      "type": "image/png",
-      "sizes": "228x228"
-    },
-    {
-      "src": "./icons/icon-256x256.png",
-      "type": "image/png",
-      "sizes": "256x256"
-    },
-    {
-      "src": "./icons/icon-310x310.png",
-      "type": "image/png",
-      "sizes": "310x310"
-    },
-    {
-      "src": "./icons/icon-384x384.png",
-      "type": "image/png",
-      "sizes": "384x384"
-    },
-    {
-      "src": "./icons/icon-512x512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    },
-    {
-      "src": "./icons/icon-1024x1024.png",
-      "type": "image/png",
-      "sizes": "1024x1024"
-    }
-  ]
-}

scripts/docker/build

@@ -1,25 +0,0 @@
-#!/bin/bash
-
-set -ex
-
-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
-  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/replace-version.mjs

@@ -1,11 +1,11 @@
 import fs from 'fs';
 
 function replaceVersionPlaceholder(version) {
-  const staticJsFilesPath = './build/static/js';
+  const staticJsFilesPath = './build/assets';
   const versionPlaceholder = '%_VERSION_%';
 
-  const isMainFile = (file) => file.startsWith('main.') && file.endsWith('.js');
-  const [ mainJsFile ] = fs.readdirSync(staticJsFilesPath).filter(isMainFile);
+  const isMainFile = (file) => file.startsWith('index-') && 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);

shlink-web-client.d.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line max-classes-per-file
 declare module 'event-source-polyfill' {
   declare class EventSourcePolyfill {
     public onmessage?: ({ data }: { data: string }) => void;
@@ -7,4 +8,10 @@ declare module 'event-source-polyfill' {
   }
 }
 
+declare module '@json2csv/plainjs' {
+  export class Parser {
+    parse: <T>(data: T[]) => string;
+  }
+}
+
 declare module '*.png'

src/api/ShlinkApiError.tsx

@@ -1,4 +1,4 @@
-import { ProblemDetailsError } from './types';
+import type { ProblemDetailsError } from './types/errors';
 import { isInvalidArgumentError } from './utils';
 
 export interface ShlinkApiErrorProps {

src/api/services/ShlinkApiClient.ts

@@ -1,128 +1,149 @@
 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 {
+import type { HttpClient } from '../../common/services/HttpClient';
+import type { ShortUrl, ShortUrlData } from '../../short-urls/data';
+import { orderToString } from '../../utils/helpers/ordering';
+import { stringifyQuery } from '../../utils/helpers/query';
+import type { OptionalString } from '../../utils/utils';
+import type {
+  ShlinkDomainRedirects,
+  ShlinkDomainsResponse,
+  ShlinkEditDomainRedirects,
   ShlinkHealth,
   ShlinkMercureInfo,
+  ShlinkShortUrlData,
+  ShlinkShortUrlsListNormalizedParams,
+  ShlinkShortUrlsListParams,
   ShlinkShortUrlsResponse,
   ShlinkTags,
   ShlinkTagsResponse,
+  ShlinkTagsStatsResponse,
   ShlinkVisits,
-  ShlinkVisitsParams,
-  ShlinkShortUrlData,
-  ShlinkDomainsResponse,
   ShlinkVisitsOverview,
-  ShlinkEditDomainRedirects,
-  ShlinkDomainRedirects,
-  ShlinkShortUrlsListParams,
-  ShlinkShortUrlsListNormalizedParams,
+  ShlinkVisitsParams,
 } from '../types';
-import { stringifyQuery } from '../../utils/helpers/query';
-import { orderToString } from '../../utils/helpers/ordering';
+import { isRegularNotFound, parseApiError } from '../utils';
 
-const buildShlinkBaseUrl = (url: string) => (url ? `${url}/rest/v2` : '');
+const buildShlinkBaseUrl = (url: string, version: 2 | 3) => `${url}/rest/v${version}`;
 const rejectNilProps = reject(isNil);
-const normalizeOrderByInParams = (params: ShlinkShortUrlsListParams): ShlinkShortUrlsListNormalizedParams => {
-  const { orderBy = {}, ...rest } = params;
-
-  return { ...rest, orderBy: orderToString(orderBy) };
-};
+const normalizeListParams = (
+  { orderBy = {}, excludeMaxVisitsReached, excludePastValidUntil, ...rest }: ShlinkShortUrlsListParams,
+): ShlinkShortUrlsListNormalizedParams => ({
+  ...rest,
+  excludeMaxVisitsReached: excludeMaxVisitsReached === true ? 'true' : undefined,
+  excludePastValidUntil: excludePastValidUntil === true ? 'true' : undefined,
+  orderBy: orderToString(orderBy),
+});
 
 export class ShlinkApiClient {
+  private apiVersion: 2 | 3;
+
   public constructor(
-    private readonly axios: AxiosInstance,
+    private readonly httpClient: HttpClient,
     private readonly baseUrl: string,
     private readonly apiKey: string,
   ) {
+    this.apiVersion = 3;
   }
 
   public readonly listShortUrls = async (params: ShlinkShortUrlsListParams = {}): Promise<ShlinkShortUrlsResponse> =>
-    this.performRequest<{ shortUrls: ShlinkShortUrlsResponse }>('/short-urls', 'GET', normalizeOrderByInParams(params))
-      .then(({ data }) => data.shortUrls);
+    this.performRequest<{ shortUrls: ShlinkShortUrlsResponse }>('/short-urls', 'GET', normalizeListParams(params))
+      .then(({ shortUrls }) => 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);
+    return this.performRequest<ShortUrl>('/short-urls', 'POST', {}, filteredOptions);
   };
 
   public readonly getShortUrlVisits = async (shortCode: string, query?: ShlinkVisitsParams): Promise<ShlinkVisits> =>
     this.performRequest<{ visits: ShlinkVisits }>(`/short-urls/${shortCode}/visits`, 'GET', query)
-      .then(({ data }) => data.visits);
+      .then(({ visits }) => 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);
+    this.performRequest<{ visits: ShlinkVisits }>(`/tags/${tag}/visits`, 'GET', query).then(({ visits }) => visits);
 
   public readonly getDomainVisits = async (domain: string, query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
-    this.performRequest<{ visits: ShlinkVisits }>(`/domains/${domain}/visits`, 'GET', query)
-      .then(({ data }) => data.visits);
+    this.performRequest<{ visits: ShlinkVisits }>(`/domains/${domain}/visits`, 'GET', query).then(({ visits }) => visits);
 
   public readonly getOrphanVisits = async (query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
-    this.performRequest<{ visits: ShlinkVisits }>('/visits/orphan', 'GET', query)
-      .then(({ data }) => data.visits);
+    this.performRequest<{ visits: ShlinkVisits }>('/visits/orphan', 'GET', query).then(({ visits }) => visits);
 
   public readonly getNonOrphanVisits = async (query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
-    this.performRequest<{ visits: ShlinkVisits }>('/visits/non-orphan', 'GET', query)
-      .then(({ data }) => data.visits);
+    this.performRequest<{ visits: ShlinkVisits }>('/visits/non-orphan', 'GET', query).then(({ visits }) => visits);
 
   public readonly getVisitsOverview = async (): Promise<ShlinkVisitsOverview> =>
-    this.performRequest<{ visits: ShlinkVisitsOverview }>('/visits', 'GET')
-      .then(({ data }) => data.visits);
+    this.performRequest<{ visits: ShlinkVisitsOverview }>('/visits').then(({ visits }) => visits);
 
   public readonly getShortUrl = async (shortCode: string, domain?: OptionalString): Promise<ShortUrl> =>
-    this.performRequest<ShortUrl>(`/short-urls/${shortCode}`, 'GET', { domain })
-      .then(({ data }) => data);
+    this.performRequest<ShortUrl>(`/short-urls/${shortCode}`, 'GET', { domain });
 
   public readonly deleteShortUrl = async (shortCode: string, domain?: OptionalString): Promise<void> =>
-    this.performRequest(`/short-urls/${shortCode}`, 'DELETE', { domain })
-      .then(() => {});
+    this.performEmptyRequest(`/short-urls/${shortCode}`, 'DELETE', { domain });
 
   public readonly updateShortUrl = async (
     shortCode: string,
     domain: OptionalString,
     edit: ShlinkShortUrlData,
   ): Promise<ShortUrl> =>
-    this.performRequest<ShortUrl>(`/short-urls/${shortCode}`, 'PATCH', { domain }, edit).then(({ data }) => data);
+    this.performRequest<ShortUrl>(`/short-urls/${shortCode}`, 'PATCH', { domain }, edit);
 
   public readonly listTags = async (): Promise<ShlinkTags> =>
     this.performRequest<{ tags: ShlinkTagsResponse }>('/tags', 'GET', { withStats: 'true' })
-      .then((resp) => resp.data.tags)
+      .then(({ tags }) => tags)
       .then(({ data, stats }) => ({ tags: data, stats }));
 
+  public readonly tagsStats = async (): Promise<ShlinkTags> =>
+    this.performRequest<{ tags: ShlinkTagsStatsResponse }>('/tags/stats', 'GET')
+      .then(({ tags }) => tags)
+      .then(({ data }) => ({ tags: data.map(({ tag }) => tag), stats: data }));
+
   public readonly deleteTags = async (tags: string[]): Promise<{ tags: string[] }> =>
-    this.performRequest('/tags', 'DELETE', { tags })
-      .then(() => ({ tags }));
+    this.performEmptyRequest('/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 }));
+    this.performEmptyRequest('/tags', 'PUT', {}, { oldName, newName }).then(() => ({ oldName, newName }));
 
-  public readonly health = async (): Promise<ShlinkHealth> =>
-    this.performRequest<ShlinkHealth>('/health', 'GET')
-      .then((resp) => resp.data);
+  public readonly health = async (): Promise<ShlinkHealth> => this.performRequest<ShlinkHealth>('/health', 'GET');
 
   public readonly mercureInfo = async (): Promise<ShlinkMercureInfo> =>
-    this.performRequest<ShlinkMercureInfo>('/mercure-info', 'GET')
-      .then((resp) => resp.data);
+    this.performRequest<ShlinkMercureInfo>('/mercure-info', 'GET');
 
   public readonly listDomains = async (): Promise<ShlinkDomainsResponse> =>
-    this.performRequest<{ domains: ShlinkDomainsResponse }>('/domains', 'GET').then(({ data }) => data.domains);
+    this.performRequest<{ domains: ShlinkDomainsResponse }>('/domains').then(({ domains }) => domains);
 
   public readonly editDomainRedirects = async (
     domainRedirects: ShlinkEditDomainRedirects,
   ): Promise<ShlinkDomainRedirects> =>
-    this.performRequest<ShlinkDomainRedirects>('/domains/redirects', 'PATCH', {}, domainRedirects).then(({ data }) => data);
+    this.performRequest<ShlinkDomainRedirects>('/domains/redirects', 'PATCH', {}, domainRedirects);
 
-  private readonly performRequest = async <T>(url: string, method: Method = 'GET', query = {}, body = {}): Promise<AxiosResponse<T>> =>
-    this.axios({
+  private readonly performRequest = async <T>(url: string, method = 'GET', query = {}, body?: object): Promise<T> =>
+    this.httpClient.fetchJson<T>(...this.toFetchParams(url, method, query, body)).catch(
+      this.handleFetchError(() => this.httpClient.fetchJson<T>(...this.toFetchParams(url, method, query, body))),
+    );
+
+  private readonly performEmptyRequest = async (url: string, method = 'GET', query = {}, body?: object): Promise<void> =>
+    this.httpClient.fetchEmpty(...this.toFetchParams(url, method, query, body)).catch(
+      this.handleFetchError(() => this.httpClient.fetchEmpty(...this.toFetchParams(url, method, query, body))),
+    );
+
+  private readonly toFetchParams = (url: string, method: string, query = {}, body?: object): [string, RequestInit] => {
+    const normalizedQuery = stringifyQuery(rejectNilProps(query));
+    const stringifiedQuery = isEmpty(normalizedQuery) ? '' : `?${normalizedQuery}`;
+
+    return [`${buildShlinkBaseUrl(this.baseUrl, this.apiVersion)}${url}${stringifiedQuery}`, {
       method,
-      url: `${buildShlinkBaseUrl(this.baseUrl)}${url}`,
+      body: body && JSON.stringify(body),
       headers: { 'X-Api-Key': this.apiKey },
-      params: rejectNilProps(query),
-      data: body,
-      paramsSerializer: stringifyQuery,
-    });
+    }];
+  };
+
+  private readonly handleFetchError = (retryFetch: Function) => (e: unknown) => {
+    if (!isRegularNotFound(parseApiError(e))) {
+      throw e;
+    }
+
+    // If we capture a not found error, let's assume this Shlink version does not support API v3, so we decrease to
+    // v2 and retry
+    this.apiVersion = 2;
+    return retryFetch();
+  };
 }

src/api/services/ShlinkApiClientBuilder.ts

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

src/api/services/provideServices.ts

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

src/api/types/actions.ts

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

src/api/types/errors.ts

@@ -0,0 +1,54 @@
+export enum ErrorTypeV2 {
+  INVALID_ARGUMENT = 'INVALID_ARGUMENT',
+  INVALID_SHORT_URL_DELETION = 'INVALID_SHORT_URL_DELETION',
+  DOMAIN_NOT_FOUND = 'DOMAIN_NOT_FOUND',
+  FORBIDDEN_OPERATION = 'FORBIDDEN_OPERATION',
+  INVALID_URL = 'INVALID_URL',
+  INVALID_SLUG = 'INVALID_SLUG',
+  INVALID_SHORTCODE = 'INVALID_SHORTCODE',
+  TAG_CONFLICT = 'TAG_CONFLICT',
+  TAG_NOT_FOUND = 'TAG_NOT_FOUND',
+  MERCURE_NOT_CONFIGURED = 'MERCURE_NOT_CONFIGURED',
+  INVALID_AUTHORIZATION = 'INVALID_AUTHORIZATION',
+  INVALID_API_KEY = 'INVALID_API_KEY',
+  NOT_FOUND = 'NOT_FOUND',
+}
+
+export enum ErrorTypeV3 {
+  INVALID_ARGUMENT = 'https://shlink.io/api/error/invalid-data',
+  INVALID_SHORT_URL_DELETION = 'https://shlink.io/api/error/invalid-short-url-deletion',
+  DOMAIN_NOT_FOUND = 'https://shlink.io/api/error/domain-not-found',
+  FORBIDDEN_OPERATION = 'https://shlink.io/api/error/forbidden-tag-operation',
+  INVALID_URL = 'https://shlink.io/api/error/invalid-url',
+  INVALID_SLUG = 'https://shlink.io/api/error/non-unique-slug',
+  INVALID_SHORTCODE = 'https://shlink.io/api/error/short-url-not-found',
+  TAG_CONFLICT = 'https://shlink.io/api/error/tag-conflict',
+  TAG_NOT_FOUND = 'https://shlink.io/api/error/tag-not-found',
+  MERCURE_NOT_CONFIGURED = 'https://shlink.io/api/error/mercure-not-configured',
+  INVALID_AUTHORIZATION = 'https://shlink.io/api/error/missing-authentication',
+  INVALID_API_KEY = 'https://shlink.io/api/error/invalid-api-key',
+  NOT_FOUND = 'https://shlink.io/api/error/not-found',
+}
+
+export interface ProblemDetailsError {
+  type: string;
+  detail: string;
+  title: string;
+  status: number;
+  [extraProps: string]: any;
+}
+
+export interface InvalidArgumentError extends ProblemDetailsError {
+  type: ErrorTypeV2.INVALID_ARGUMENT | ErrorTypeV3.INVALID_ARGUMENT;
+  invalidElements: string[];
+}
+
+export interface InvalidShortUrlDeletion extends ProblemDetailsError {
+  type: 'INVALID_SHORTCODE_DELETION' | ErrorTypeV2.INVALID_SHORT_URL_DELETION | ErrorTypeV3.INVALID_SHORT_URL_DELETION;
+  threshold: number;
+}
+
+export interface RegularNotFound extends ProblemDetailsError {
+  type: ErrorTypeV2.NOT_FOUND | ErrorTypeV3.NOT_FOUND;
+  status: 404;
+}

src/api/types/index.ts

@@ -1,6 +1,7 @@
-import { Visit } from '../../visits/types';
-import { OptionalString } from '../../utils/utils';
-import { ShortUrl, ShortUrlMeta, ShortUrlsOrder } from '../../short-urls/data';
+import type { ShortUrl, ShortUrlMeta } from '../../short-urls/data';
+import type { Order } from '../../utils/helpers/ordering';
+import type { OptionalString } from '../../utils/utils';
+import type { Visit } from '../../visits/types';
 
 export interface ShlinkShortUrlsResponse {
   data: ShortUrl[];
@@ -17,9 +18,12 @@ export interface ShlinkHealth {
   version: string;
 }
 
-interface ShlinkTagsStats {
+export interface ShlinkTagsStats {
   tag: string;
   shortUrlsCount: number;
+  visitsSummary?: ShlinkVisitsSummary; // Optional only before Shlink 3.5.0
+
+  /** @deprecated */
   visitsCount: number;
 }
 
@@ -30,22 +34,38 @@ export interface ShlinkTags {
 
 export interface ShlinkTagsResponse {
   data: string[];
+  /** @deprecated Present only when withStats=true is provided, which is deprecated */
   stats: ShlinkTagsStats[];
 }
 
+export interface ShlinkTagsStatsResponse {
+  data: ShlinkTagsStats[];
+}
+
 export interface ShlinkPaginator {
   currentPage: number;
   pagesCount: number;
   totalItems: number;
 }
 
+export interface ShlinkVisitsSummary {
+  total: number;
+  nonBots: number;
+  bots: number;
+}
+
 export interface ShlinkVisits {
   data: Visit[];
   pagination: ShlinkPaginator;
 }
 
 export interface ShlinkVisitsOverview {
+  nonOrphanVisits?: ShlinkVisitsSummary; // Optional only before Shlink 3.5.0
+  orphanVisits?: ShlinkVisitsSummary; // Optional only before Shlink 3.5.0
+
+  /** @deprecated */
   visitsCount: number;
+  /** @deprecated */
   orphanVisitsCount: number;
 }
 
@@ -88,35 +108,26 @@ export interface ShlinkDomainsResponse {
 
 export type TagsFilteringMode = 'all' | 'any';
 
+type ShlinkShortUrlsOrderableFields = 'dateCreated' | 'shortCode' | 'longUrl' | 'title' | 'visits' | 'nonBotVisits';
+
+export type ShlinkShortUrlsOrder = Order<ShlinkShortUrlsOrderableFields>;
+
 export interface ShlinkShortUrlsListParams {
   page?: string;
   itemsPerPage?: number;
-  tags?: string[];
   searchTerm?: string;
+  tags?: string[];
+  tagsMode?: TagsFilteringMode;
+  orderBy?: ShlinkShortUrlsOrder;
   startDate?: string;
   endDate?: string;
-  orderBy?: ShortUrlsOrder;
-  tagsMode?: TagsFilteringMode;
+  excludeMaxVisitsReached?: boolean;
+  excludePastValidUntil?: boolean;
 }
 
-export interface ShlinkShortUrlsListNormalizedParams extends Omit<ShlinkShortUrlsListParams, 'orderBy'> {
+export interface ShlinkShortUrlsListNormalizedParams extends
+  Omit<ShlinkShortUrlsListParams, 'orderBy' | 'excludeMaxVisitsReached' | 'excludePastValidUntil'> {
   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;
+  excludeMaxVisitsReached?: 'true';
+  excludePastValidUntil?: 'true';
 }

src/api/utils/index.ts

@@ -1,10 +1,25 @@
-import { AxiosError } from 'axios';
-import { InvalidArgumentError, InvalidShortUrlDeletion, ProblemDetailsError } from '../types';
+import type {
+  InvalidArgumentError,
+  InvalidShortUrlDeletion,
+  ProblemDetailsError,
+  RegularNotFound } from '../types/errors';
+import {
+  ErrorTypeV2,
+  ErrorTypeV3,
+} from '../types/errors';
 
-export const parseApiError = (e: AxiosError<ProblemDetailsError>) => e.response?.data;
+const isProblemDetails = (e: unknown): e is ProblemDetailsError =>
+  !!e && typeof e === 'object' && ['type', 'detail', 'title', 'status'].every((prop) => prop in e);
+
+export const parseApiError = (e: unknown): ProblemDetailsError | undefined => (isProblemDetails(e) ? e : undefined);
 
 export const isInvalidArgumentError = (error?: ProblemDetailsError): error is InvalidArgumentError =>
-  error?.type === 'INVALID_ARGUMENT';
+  error?.type === ErrorTypeV2.INVALID_ARGUMENT || error?.type === ErrorTypeV3.INVALID_ARGUMENT;
 
 export const isInvalidDeletionError = (error?: ProblemDetailsError): error is InvalidShortUrlDeletion =>
-  error?.type === 'INVALID_SHORTCODE_DELETION' || error?.type === 'INVALID_SHORT_URL_DELETION';
+  error?.type === 'INVALID_SHORTCODE_DELETION'
+  || error?.type === ErrorTypeV2.INVALID_SHORT_URL_DELETION
+  || error?.type === ErrorTypeV3.INVALID_SHORT_URL_DELETION;
+
+export const isRegularNotFound = (error?: ProblemDetailsError): error is RegularNotFound =>
+  (error?.type === ErrorTypeV2.NOT_FOUND || error?.type === ErrorTypeV3.NOT_FOUND) && error?.status === 404;

src/app/App.tsx

@@ -1,12 +1,13 @@
-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 type { FC } from 'react';
+import { useEffect } from 'react';
+import { Route, Routes, useLocation } from 'react-router-dom';
 import { AppUpdateBanner } from '../common/AppUpdateBanner';
+import { NotFound } from '../common/NotFound';
+import type { ServersMap } from '../servers/data';
+import type { Settings } from '../settings/reducers/settings';
 import { forceUpdate } from '../utils/helpers/sw';
+import { changeThemeInMarkup } from '../utils/theme';
 import './App.scss';
 
 interface AppProps {

src/app/reducers/appUpdates.ts

@@ -1,16 +1,14 @@
-import { Action } from 'redux';
-import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
+import { createSlice } from '@reduxjs/toolkit';
 
-export const APP_UPDATE_AVAILABLE = 'shlink/appUpdates/APP_UPDATE_AVAILABLE';
-export const RESET_APP_UPDATE = 'shlink/appUpdates/RESET_APP_UPDATE';
+const { actions, reducer } = createSlice({
+  name: 'shlink/appUpdates',
+  initialState: false,
+  reducers: {
+    appUpdateAvailable: () => true,
+    resetAppUpdate: () => false,
+  },
+});
 
-const initialState = false;
+export const { appUpdateAvailable, resetAppUpdate } = actions;
 
-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);
+export const appUpdatesReducer = reducer;

src/app/services/provideServices.ts

@@ -1,9 +1,9 @@
-import Bottle from 'bottlejs';
-import { appUpdateAvailable, resetAppUpdate } from '../reducers/appUpdates';
+import type Bottle from 'bottlejs';
+import type { ConnectDecorator } from '../../container/types';
 import { App } from '../App';
-import { ConnectDecorator } from '../../container/types';
+import { appUpdateAvailable, resetAppUpdate } from '../reducers/appUpdates';
 
-const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
+export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
   bottle.serviceFactory(
     'App',
@@ -23,5 +23,3 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('appUpdateAvailable', () => appUpdateAvailable);
   bottle.serviceFactory('resetAppUpdate', () => resetAppUpdate);
 };
-
-export default provideServices;

src/common/AppUpdateBanner.tsx

@@ -1,9 +1,9 @@
-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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC, MouseEventHandler } from 'react';
+import { Alert, Button } from 'reactstrap';
 import { useToggle } from '../utils/helpers/hooks';
+import { SimpleCard } from '../utils/SimpleCard';
 import './AppUpdateBanner.scss';
 
 interface AppUpdateBannerProps {

src/common/AsideMenu.tsx

@@ -1,18 +1,19 @@
 import {
-  faList as listIcon,
-  faLink as createIcon,
-  faTags as tagsIcon,
-  faPen as editIcon,
-  faHome as overviewIcon,
   faGlobe as domainsIcon,
+  faHome as overviewIcon,
+  faLink as createIcon,
+  faList as listIcon,
+  faPen as editIcon,
+  faTags as tagsIcon,
 } 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 type { FC } from 'react';
+import type { NavLinkProps } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
+import type { SelectedServer } from '../servers/data';
+import { isServerWithId } from '../servers/data';
+import type { DeleteServerButtonProps } from '../servers/DeleteServerButton';
 import './AsideMenu.scss';
 
 export interface AsideMenuProps {
@@ -22,6 +23,7 @@ export interface AsideMenuProps {
 
 interface AsideMenuItemProps extends NavLinkProps {
   to: string;
+  className?: string;
 }
 
 const AsideMenuItem: FC<AsideMenuItemProps> = ({ children, to, className, ...rest }) => (
@@ -40,7 +42,6 @@ export const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
   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,
   });
@@ -68,12 +69,10 @@ export const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
           <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('/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>

src/common/ErrorHandler.tsx

@@ -1,4 +1,5 @@
-import { Component, ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import { Component } from 'react';
 import { Button } from 'reactstrap';
 import { SimpleCard } from '../utils/SimpleCard';
 

src/common/Home.tsx

@@ -1,12 +1,12 @@
-import { useEffect } from 'react';
+import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isEmpty, values } from 'ramda';
+import { useEffect } from 'react';
+import { ExternalLink } from 'react-external-link';
 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 type { ServersMap } from '../servers/data';
 import { ServersListGroup } from '../servers/ServersListGroup';
-import { ServersMap } from '../servers/data';
 import { ShlinkLogo } from './img/ShlinkLogo';
 import './Home.scss';
 

src/common/MainHeader.tsx

@@ -1,9 +1,10 @@
 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 classNames from 'classnames';
+import type { FC } from 'react';
+import { 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';

src/common/MenuLayout.tsx

@@ -1,14 +1,15 @@
-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, supportsDomainVisits, supportsNonOrphanVisits } from '../utils/helpers/features';
+import type { FC } from 'react';
+import { useEffect } from 'react';
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import { isReachableServer } from '../servers/data';
+import { withSelectedServer } from '../servers/helpers/withSelectedServer';
+import { useFeature } from '../utils/helpers/features';
+import { useSwipeable, useToggle } from '../utils/helpers/hooks';
+import type { AsideMenuProps } from './AsideMenu';
 import { NotFound } from './NotFound';
-import { AsideMenuProps } from './AsideMenu';
 import './MenuLayout.scss';
 
 interface MenuLayoutProps {
@@ -38,7 +39,6 @@ export const MenuLayout = (
   useEffect(() => hideSidebar(), [location]);
   useEffect(() => {
     showContent && sidebarPresent();
-
     return () => sidebarNotPresent();
   }, []);
 
@@ -46,9 +46,8 @@ export const MenuLayout = (
     return <ServerError />;
   }
 
-  const addNonOrphanVisitsRoute = supportsNonOrphanVisits(selectedServer);
-  const addManageDomainsRoute = supportsDomainRedirects(selectedServer);
-  const addDomainVisitsRoute = supportsDomainVisits(selectedServer);
+  const addNonOrphanVisitsRoute = useFeature('nonOrphanVisits', selectedServer);
+  const addDomainVisitsRoute = useFeature('domainVisits', selectedServer);
   const burgerClasses = classNames('menu-layout__burger-icon', { 'menu-layout__burger-icon--active': sidebarVisible });
   const swipeableProps = useSwipeable(showSidebar, hideSidebar);
 
@@ -73,7 +72,7 @@ export const MenuLayout = (
                 <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="/manage-domains" element={<ManageDomains />} />
                 <Route
                   path="*"
                   element={<NotFound to={`/server/${selectedServer.id}/list-short-urls/1`}>List short URLs</NotFound>}

src/common/NoMenuLayout.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import './NoMenuLayout.scss';
 
 export const NoMenuLayout: FC<PropsWithChildren<unknown>> = ({ children }) => (

src/common/NotFound.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { Link } from 'react-router-dom';
 import { SimpleCard } from '../utils/SimpleCard';
 

src/common/ScrollToTop.tsx

@@ -1,4 +1,5 @@
-import { FC, PropsWithChildren, useEffect } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
 export const ScrollToTop: FC<PropsWithChildren<unknown>> = ({ children }) => {

src/common/ShlinkVersions.tsx

@@ -1,7 +1,8 @@
 import { pipe } from 'ramda';
 import { ExternalLink } from 'react-external-link';
+import type { SelectedServer } from '../servers/data';
+import { isReachableServer } from '../servers/data';
 import { versionToPrintable, versionToSemVer } from '../utils/helpers/version';
-import { isReachableServer, SelectedServer } from '../servers/data';
 
 const SHLINK_WEB_CLIENT_VERSION = '%_VERSION_%';
 const normalizeVersion = pipe(versionToSemVer(), versionToPrintable);

src/common/ShlinkVersionsContainer.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
-import { SelectedServer } from '../servers/data';
+import type { SelectedServer } from '../servers/data';
+import type { Sidebar } from './reducers/sidebar';
 import { ShlinkVersions } from './ShlinkVersions';
-import { Sidebar } from './reducers/sidebar';
 import './ShlinkVersionsContainer.scss';
 
 export interface ShlinkVersionsContainerProps {

src/common/SimplePaginator.tsx

@@ -1,12 +1,13 @@
-import { FC } from 'react';
 import classNames from 'classnames';
+import type { FC } from 'react';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+import type {
+  NumberOrEllipsis } from '../utils/helpers/pagination';
 import {
-  pageIsEllipsis,
   keyForPage,
-  NumberOrEllipsis,
-  progressivePagination,
+  pageIsEllipsis,
   prettifyPageNumber,
+  progressivePagination,
 } from '../utils/helpers/pagination';
 import './SimplePaginator.scss';
 

src/common/react-tag-autocomplete.scss

@@ -3,7 +3,7 @@
 .react-tags {
   position: relative;
   padding: 5px 0 0 6px;
-  border-radius: .3rem;
+  border-radius: .5rem;
   background-color: var(--primary-color);
   border: 1px solid var(--input-border-color);
   transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

src/common/reducers/sidebar.ts

@@ -1,25 +1,22 @@
-import { Action } from 'redux';
-import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
-
-export const SIDEBAR_PRESENT = 'shlink/common/SIDEBAR_PRESENT';
-export const SIDEBAR_NOT_PRESENT = 'shlink/common/SIDEBAR_NOT_PRESENT';
+import { createSlice } from '@reduxjs/toolkit';
 
 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);
+const { actions, reducer } = createSlice({
+  name: 'shlink/sidebar',
+  initialState,
+  reducers: {
+    sidebarPresent: () => ({ sidebarPresent: true }),
+    sidebarNotPresent: () => ({ sidebarPresent: false }),
+  },
+});
 
-export const sidebarPresent = buildActionCreator(SIDEBAR_PRESENT);
+export const { sidebarPresent, sidebarNotPresent } = actions;
 
-export const sidebarNotPresent = buildActionCreator(SIDEBAR_NOT_PRESENT);
+export const sidebarReducer = reducer;

src/common/services/HttpClient.ts

@@ -0,0 +1,42 @@
+import type { Fetch } from '../../utils/types';
+
+const applicationJsonHeader = { 'Content-Type': 'application/json' };
+const withJsonContentType = (options?: RequestInit): RequestInit | undefined => {
+  if (!options?.body) {
+    return options;
+  }
+
+  return options ? {
+    ...options,
+    headers: {
+      ...(options.headers ?? {}),
+      ...applicationJsonHeader,
+    },
+  } : {
+    headers: applicationJsonHeader,
+  };
+};
+
+export class HttpClient {
+  constructor(private readonly fetch: Fetch) {}
+
+  public readonly fetchJson = <T>(url: string, options?: RequestInit): Promise<T> =>
+    this.fetch(url, withJsonContentType(options)).then(async (resp) => {
+      const json = await resp.json();
+
+      if (!resp.ok) {
+        throw json;
+      }
+
+      return json as T;
+    });
+
+  public readonly fetchEmpty = (url: string, options?: RequestInit): Promise<void> =>
+    this.fetch(url, withJsonContentType(options)).then(async (resp) => {
+      if (!resp.ok) {
+        throw await resp.json();
+      }
+    });
+
+  public readonly fetchBlob = (url: string): Promise<Blob> => this.fetch(url).then((resp) => resp.blob());
+}

src/common/services/ImageDownloader.ts

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

src/common/services/ReportExporter.ts

@@ -1,7 +1,7 @@
-import { NormalizedVisit } from '../../visits/types';
-import { ExportableShortUrl } from '../../short-urls/data';
+import type { ExportableShortUrl } from '../../short-urls/data';
+import type { JsonToCsv } from '../../utils/helpers/csvjson';
 import { saveCsv } from '../../utils/helpers/files';
-import { JsonToCsv } from '../../utils/helpers/csvjson';
+import type { NormalizedVisit } from '../../visits/types';
 
 export class ReportExporter {
   public constructor(private readonly window: Window, private readonly jsonToCsv: JsonToCsv) {}
@@ -24,7 +24,6 @@ export class ReportExporter {
 
   private readonly exportCsv = (filename: string, rows: object[]) => {
     const csv = this.jsonToCsv(rows);
-
     saveCsv(this.window, csv, filename);
   };
 }

src/common/services/provideServices.ts

@@ -1,25 +1,26 @@
-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 type Bottle from 'bottlejs';
+import type { ConnectDecorator } from '../../container/types';
+import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
 import { AsideMenu } from '../AsideMenu';
 import { ErrorHandler } from '../ErrorHandler';
-import { ShlinkVersionsContainer } from '../ShlinkVersionsContainer';
-import { ConnectDecorator } from '../../container/types';
-import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
+import { Home } from '../Home';
+import { MainHeader } from '../MainHeader';
+import { MenuLayout } from '../MenuLayout';
 import { sidebarNotPresent, sidebarPresent } from '../reducers/sidebar';
+import { ScrollToTop } from '../ScrollToTop';
+import { ShlinkVersionsContainer } from '../ShlinkVersionsContainer';
+import { HttpClient } from './HttpClient';
 import { ImageDownloader } from './ImageDownloader';
 import { ReportExporter } from './ReportExporter';
 
-const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
+export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Services
-  bottle.constant('window', (global as any).window);
-  bottle.constant('console', global.console);
-  bottle.constant('axios', axios);
+  bottle.constant('window', window);
+  bottle.constant('console', console);
+  bottle.constant('fetch', window.fetch.bind(window));
 
-  bottle.service('ImageDownloader', ImageDownloader, 'axios', 'window');
+  bottle.service('HttpClient', HttpClient, 'fetch');
+  bottle.service('ImageDownloader', ImageDownloader, 'HttpClient', 'window');
   bottle.service('ReportExporter', ReportExporter, 'window', 'jsonToCsv');
 
   // Components
@@ -61,5 +62,3 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('sidebarPresent', () => sidebarPresent);
   bottle.serviceFactory('sidebarNotPresent', () => sidebarNotPresent);
 };
-
-export default provideServices;

src/container/index.ts

@@ -1,18 +1,19 @@
-import Bottle, { IContainer } from 'bottlejs';
-import { connect as reduxConnect } from 'react-redux';
+import type { IContainer } from 'bottlejs';
+import Bottle from 'bottlejs';
 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';
+import { connect as reduxConnect } from 'react-redux';
+import { provideServices as provideApiServices } from '../api/services/provideServices';
+import { provideServices as provideAppServices } from '../app/services/provideServices';
+import { provideServices as provideCommonServices } from '../common/services/provideServices';
+import { provideServices as provideDomainsServices } from '../domains/services/provideServices';
+import { provideServices as provideMercureServices } from '../mercure/services/provideServices';
+import { provideServices as provideServersServices } from '../servers/services/provideServices';
+import { provideServices as provideSettingsServices } from '../settings/services/provideServices';
+import { provideServices as provideShortUrlsServices } from '../short-urls/services/provideServices';
+import { provideServices as provideTagsServices } from '../tags/services/provideServices';
+import { provideServices as provideUtilsServices } from '../utils/services/provideServices';
+import { provideServices as provideVisitsServices } from '../visits/services/provideServices';
+import type { ConnectDecorator } from './types';
 
 type LazyActionMap = Record<string, Function>;
 

src/container/store.ts

@@ -1,14 +1,12 @@
-import ReduxThunk from 'redux-thunk';
-import { applyMiddleware, compose, createStore } from 'redux';
-import { save, load, RLSOptions } from 'redux-localstorage-simple';
-import reducers from '../reducers';
+import { configureStore } from '@reduxjs/toolkit';
+import type { IContainer } from 'bottlejs';
+import type { RLSOptions } from 'redux-localstorage-simple';
+import { load, save } from 'redux-localstorage-simple';
+import { initReducers } from '../reducers';
 import { migrateDeprecatedSettings } from '../settings/helpers';
-import { ShlinkState } from './types';
+import type { ShlinkState } from './types';
 
 const isProduction = process.env.NODE_ENV === 'production';
-// eslint-disable-next-line no-mixed-operators
-const composeEnhancers: Function = !isProduction && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-
 const localStorageConfig: RLSOptions = {
   states: ['settings', 'servers'],
   namespace: 'shlink',
@@ -17,6 +15,12 @@ const localStorageConfig: RLSOptions = {
 };
 const preloadedState = migrateDeprecatedSettings(load(localStorageConfig) as ShlinkState);
 
-export const store = createStore(reducers, preloadedState, composeEnhancers(
-  applyMiddleware(save(localStorageConfig), ReduxThunk),
-));
+export const setUpStore = (container: IContainer) => configureStore({
+  devTools: !isProduction,
+  reducer: initReducers(container),
+  preloadedState,
+  middleware: (defaultMiddlewaresIncludingReduxThunk) =>
+    defaultMiddlewaresIncludingReduxThunk({ immutableCheck: false, serializableCheck: false }) // State is too big for these
+      .prepend(container.selectServerListener.middleware)
+      .concat(save(localStorageConfig)),
+});

src/container/types.ts

@@ -1,27 +1,27 @@
-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';
-import { DomainVisits } from '../visits/reducers/domainVisits';
+import type { Sidebar } from '../common/reducers/sidebar';
+import type { DomainsList } from '../domains/reducers/domainsList';
+import type { MercureInfo } from '../mercure/reducers/mercureInfo';
+import type { SelectedServer, ServersMap } from '../servers/data';
+import type { Settings } from '../settings/reducers/settings';
+import type { ShortUrlCreation } from '../short-urls/reducers/shortUrlCreation';
+import type { ShortUrlDeletion } from '../short-urls/reducers/shortUrlDeletion';
+import type { ShortUrlDetail } from '../short-urls/reducers/shortUrlDetail';
+import type { ShortUrlEdition } from '../short-urls/reducers/shortUrlEdition';
+import type { ShortUrlsList } from '../short-urls/reducers/shortUrlsList';
+import type { TagDeletion } from '../tags/reducers/tagDelete';
+import type { TagEdition } from '../tags/reducers/tagEdit';
+import type { TagsList } from '../tags/reducers/tagsList';
+import type { DomainVisits } from '../visits/reducers/domainVisits';
+import type { ShortUrlVisits } from '../visits/reducers/shortUrlVisits';
+import type { TagVisits } from '../visits/reducers/tagVisits';
+import type { VisitsInfo } from '../visits/reducers/types';
+import type { VisitsOverview } from '../visits/reducers/visitsOverview';
 
 export interface ShlinkState {
   servers: ServersMap;
   selectedServer: SelectedServer;
   shortUrlsList: ShortUrlsList;
-  shortUrlCreationResult: ShortUrlCreation;
+  shortUrlCreation: ShortUrlCreation;
   shortUrlDeletion: ShortUrlDeletion;
   shortUrlEdition: ShortUrlEdition;
   shortUrlVisits: ShortUrlVisits;

src/domains/DomainRow.tsx

@@ -1,18 +1,20 @@
-import { FC, useEffect } from 'react';
-import { UncontrolledTooltip } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faDotCircle as defaultDomainIcon } from '@fortawesome/free-solid-svg-icons';
-import { ShlinkDomainRedirects } from '../api/types';
-import { OptionalString } from '../utils/utils';
-import { SelectedServer } from '../servers/data';
-import { Domain } from './data';
-import { DomainStatusIcon } from './helpers/DomainStatusIcon';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC } from 'react';
+import { useEffect } from 'react';
+import { UncontrolledTooltip } from 'reactstrap';
+import type { ShlinkDomainRedirects } from '../api/types';
+import type { SelectedServer } from '../servers/data';
+import type { OptionalString } from '../utils/utils';
+import type { Domain } from './data';
 import { DomainDropdown } from './helpers/DomainDropdown';
+import { DomainStatusIcon } from './helpers/DomainStatusIcon';
+import type { EditDomainRedirects } from './reducers/domainRedirects';
 
 interface DomainRowProps {
   domain: Domain;
   defaultRedirects?: ShlinkDomainRedirects;
-  editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
+  editDomainRedirects: (redirects: EditDomainRedirects) => Promise<void>;
   checkDomainHealth: (domain: string) => void;
   selectedServer: SelectedServer;
 }

src/domains/DomainSelector.tsx

@@ -1,11 +1,12 @@
-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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isEmpty, pipe } from 'ramda';
+import { useEffect } from 'react';
+import type { InputProps } from 'reactstrap';
+import { Button, DropdownItem, Input, InputGroup, UncontrolledTooltip } from 'reactstrap';
 import { DropdownBtn } from '../utils/DropdownBtn';
 import { useToggle } from '../utils/helpers/hooks';
-import { DomainsList } from './reducers/domainsList';
+import type { DomainsList } from './reducers/domainsList';
 import './DomainSelector.scss';
 
 export interface DomainSelectorProps extends Omit<InputProps, 'onChange'> {

src/domains/ManageDomains.tsx

@@ -1,18 +1,19 @@
-import { FC, useEffect } from 'react';
+import type { FC } from 'react';
+import { useEffect } from 'react';
+import { ShlinkApiError } from '../api/ShlinkApiError';
+import type { SelectedServer } from '../servers/data';
 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 { SimpleCard } from '../utils/SimpleCard';
 import { DomainRow } from './DomainRow';
+import type { EditDomainRedirects } from './reducers/domainRedirects';
+import type { DomainsList } from './reducers/domainsList';
 
 interface ManageDomainsProps {
   listDomains: Function;
   filterDomains: (searchTerm: string) => void;
-  editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
+  editDomainRedirects: (redirects: EditDomainRedirects) => Promise<void>;
   checkDomainHealth: (domain: string) => void;
   domainsList: DomainsList;
   selectedServer: SelectedServer;

src/domains/data/index.ts

@@ -1,4 +1,4 @@
-import { ShlinkDomain } from '../../api/types';
+import type { ShlinkDomain } from '../../api/types';
 
 export type DomainStatus = 'validating' | 'valid' | 'invalid';
 

src/domains/helpers/DomainDropdown.tsx

@@ -1,33 +1,33 @@
-import { FC } from 'react';
-import { DropdownItem } from 'reactstrap';
-import { Link } from 'react-router-dom';
 import { faChartPie as pieChartIcon, faEdit as editIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { DropdownItem } from 'reactstrap';
+import type { SelectedServer } from '../../servers/data';
+import { getServerId } from '../../servers/data';
+import { useFeature } from '../../utils/helpers/features';
 import { useToggle } from '../../utils/helpers/hooks';
-import { DropdownBtnMenu } from '../../utils/DropdownBtnMenu';
-import { EditDomainRedirectsModal } from './EditDomainRedirectsModal';
-import { Domain } from '../data';
-import { ShlinkDomainRedirects } from '../../api/types';
-import { supportsDefaultDomainRedirectsEdition, supportsDomainVisits } from '../../utils/helpers/features';
-import { getServerId, SelectedServer } from '../../servers/data';
+import { RowDropdownBtn } from '../../utils/RowDropdownBtn';
 import { DEFAULT_DOMAIN } from '../../visits/reducers/domainVisits';
+import type { Domain } from '../data';
+import type { EditDomainRedirects } from '../reducers/domainRedirects';
+import { EditDomainRedirectsModal } from './EditDomainRedirectsModal';
 
 interface DomainDropdownProps {
   domain: Domain;
-  editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
+  editDomainRedirects: (redirects: EditDomainRedirects) => Promise<void>;
   selectedServer: SelectedServer;
 }
 
 export const DomainDropdown: FC<DomainDropdownProps> = ({ domain, editDomainRedirects, selectedServer }) => {
-  const [isOpen, toggle] = useToggle();
   const [isModalOpen, toggleModal] = useToggle();
   const { isDefault } = domain;
-  const canBeEdited = !isDefault || supportsDefaultDomainRedirectsEdition(selectedServer);
-  const withVisits = supportsDomainVisits(selectedServer);
+  const canBeEdited = !isDefault || useFeature('defaultDomainRedirectsEdition', selectedServer);
+  const withVisits = useFeature('domainVisits', selectedServer);
   const serverId = getServerId(selectedServer);
 
   return (
-    <DropdownBtnMenu isOpen={isOpen} toggle={toggle}>
+    <RowDropdownBtn>
       {withVisits && (
         <DropdownItem
           tag={Link}
@@ -46,6 +46,6 @@ export const DomainDropdown: FC<DomainDropdownProps> = ({ domain, editDomainRedi
         toggle={toggleModal}
         editDomainRedirects={editDomainRedirects}
       />
-    </DropdownBtnMenu>
+    </RowDropdownBtn>
   );
 };

src/domains/helpers/DomainStatusIcon.tsx

@@ -1,15 +1,16 @@
-import { FC, useEffect, useRef, useState } from 'react';
-import { UncontrolledTooltip } from 'reactstrap';
-import { ExternalLink } from 'react-external-link';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
-  faTimes as invalidIcon,
   faCheck as checkIcon,
   faCircleNotch as loadingStatusIcon,
+  faTimes as invalidIcon,
 } from '@fortawesome/free-solid-svg-icons';
-import { MediaMatcher } from '../../utils/types';
-import { mutableRefToElementRef } from '../../utils/helpers/components';
-import { DomainStatus } from '../data';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC } from 'react';
+import { useEffect, useState } from 'react';
+import { ExternalLink } from 'react-external-link';
+import { UncontrolledTooltip } from 'reactstrap';
+import { useElementRef } from '../../utils/helpers/hooks';
+import type { MediaMatcher } from '../../utils/types';
+import type { DomainStatus } from '../data';
 
 interface DomainStatusIconProps {
   status: DomainStatus;
@@ -17,7 +18,7 @@ interface DomainStatusIconProps {
 }
 
 export const DomainStatusIcon: FC<DomainStatusIconProps> = ({ status, matchMedia = window.matchMedia }) => {
-  const ref = useRef<HTMLSpanElement>();
+  const ref = useElementRef<HTMLSpanElement>();
   const matchesMobile = () => matchMedia('(max-width: 991px)').matches;
   const [isMobile, setIsMobile] = useState<boolean>(matchesMobile());
 
@@ -35,13 +36,13 @@ export const DomainStatusIcon: FC<DomainStatusIconProps> = ({ status, matchMedia
 
   return (
     <>
-      <span ref={mutableRefToElementRef(ref)}>
+      <span ref={ref}>
         {status === 'valid'
           ? <FontAwesomeIcon fixedWidth icon={checkIcon} className="text-muted" />
           : <FontAwesomeIcon fixedWidth icon={invalidIcon} className="text-danger" />}
       </span>
       <UncontrolledTooltip
-        target={(() => ref.current) as any}
+        target={ref}
         placement={isMobile ? 'top-start' : 'left'}
         autohide={status === 'valid'}
       >

src/domains/helpers/EditDomainRedirectsModal.tsx

@@ -1,15 +1,18 @@
-import { FC, useState } from 'react';
+import type { FC } from 'react';
+import { useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import { ShlinkDomain, ShlinkDomainRedirects } from '../../api/types';
-import { InputFormGroup, InputFormGroupProps } from '../../utils/forms/InputFormGroup';
-import { handleEventPreventingDefault, nonEmptyValueOrNull } from '../../utils/utils';
+import type { ShlinkDomain } from '../../api/types';
+import type { InputFormGroupProps } from '../../utils/forms/InputFormGroup';
+import { InputFormGroup } from '../../utils/forms/InputFormGroup';
 import { InfoTooltip } from '../../utils/InfoTooltip';
+import { handleEventPreventingDefault, nonEmptyValueOrNull } from '../../utils/utils';
+import type { EditDomainRedirects } from '../reducers/domainRedirects';
 
 interface EditDomainRedirectsModalProps {
   domain: ShlinkDomain;
   isOpen: boolean;
   toggle: () => void;
-  editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
+  editDomainRedirects: (redirects: EditDomainRedirects) => Promise<void>;
 }
 
 const FormGroup: FC<InputFormGroupProps & { isLast?: boolean }> = ({ isLast, ...rest }) => (
@@ -30,10 +33,13 @@ export const EditDomainRedirectsModal: FC<EditDomainRedirectsModalProps> = (
   const [invalidShortUrlRedirect, setInvalidShortUrlRedirect] = useState(
     domain.redirects?.invalidShortUrlRedirect ?? '',
   );
-  const handleSubmit = handleEventPreventingDefault(async () => editDomainRedirects(domain.domain, {
-    baseUrlRedirect: nonEmptyValueOrNull(baseUrlRedirect),
-    regular404Redirect: nonEmptyValueOrNull(regular404Redirect),
-    invalidShortUrlRedirect: nonEmptyValueOrNull(invalidShortUrlRedirect),
+  const handleSubmit = handleEventPreventingDefault(async () => editDomainRedirects({
+    domain: domain.domain,
+    redirects: {
+      baseUrlRedirect: nonEmptyValueOrNull(baseUrlRedirect),
+      regular404Redirect: nonEmptyValueOrNull(regular404Redirect),
+      invalidShortUrlRedirect: nonEmptyValueOrNull(invalidShortUrlRedirect),
+    },
   }).then(toggle));
 
   return (

src/domains/reducers/domainRedirects.ts

@@ -1,31 +1,22 @@
-import { Action, Dispatch } from 'redux';
-import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { ShlinkDomainRedirects } from '../../api/types';
-import { GetState } from '../../container/types';
-import { ApiErrorAction } from '../../api/types/actions';
-import { parseApiError } from '../../api/utils';
+import type { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
+import type { ShlinkDomainRedirects } from '../../api/types';
+import { createAsyncThunk } from '../../utils/helpers/redux';
 
-export const EDIT_DOMAIN_REDIRECTS_START = 'shlink/domainRedirects/EDIT_DOMAIN_REDIRECTS_START';
-export const EDIT_DOMAIN_REDIRECTS_ERROR = 'shlink/domainRedirects/EDIT_DOMAIN_REDIRECTS_ERROR';
-export const EDIT_DOMAIN_REDIRECTS = 'shlink/domainRedirects/EDIT_DOMAIN_REDIRECTS';
+const EDIT_DOMAIN_REDIRECTS = 'shlink/domainRedirects/EDIT_DOMAIN_REDIRECTS';
 
-export interface EditDomainRedirectsAction extends Action<string> {
+export interface EditDomainRedirects {
   domain: string;
   redirects: ShlinkDomainRedirects;
 }
 
-export const editDomainRedirects = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
-  domain: string,
-  domainRedirects: Partial<ShlinkDomainRedirects>,
-) => async (dispatch: Dispatch, getState: GetState) => {
-  dispatch({ type: EDIT_DOMAIN_REDIRECTS_START });
-  const { editDomainRedirects: shlinkEditDomainRedirects } = buildShlinkApiClient(getState);
+export const editDomainRedirects = (
+  buildShlinkApiClient: ShlinkApiClientBuilder,
+) => createAsyncThunk(
+  EDIT_DOMAIN_REDIRECTS,
+  async ({ domain, redirects: providedRedirects }: EditDomainRedirects, { getState }): Promise<EditDomainRedirects> => {
+    const { editDomainRedirects: shlinkEditDomainRedirects } = buildShlinkApiClient(getState);
+    const redirects = await shlinkEditDomainRedirects({ domain, ...providedRedirects });
 
-  try {
-    const redirects = await shlinkEditDomainRedirects({ domain, ...domainRedirects });
-
-    dispatch<EditDomainRedirectsAction>({ type: EDIT_DOMAIN_REDIRECTS, domain, redirects });
-  } catch (e: any) {
-    dispatch<ApiErrorAction>({ type: EDIT_DOMAIN_REDIRECTS_ERROR, errorData: parseApiError(e) });
-  }
-};
+    return { domain, redirects };
+  },
+);

src/domains/reducers/domainsList.ts

@@ -1,20 +1,16 @@
-import { Action, Dispatch } from 'redux';
-import { ProblemDetailsError, ShlinkDomainRedirects } from '../../api/types';
-import { buildReducer } from '../../utils/helpers/redux';
-import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { GetState } from '../../container/types';
+import type { AsyncThunk, SliceCaseReducers } from '@reduxjs/toolkit';
+import { createAction, createSlice } from '@reduxjs/toolkit';
+import type { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
+import type { ShlinkDomainRedirects } from '../../api/types';
+import type { ProblemDetailsError } from '../../api/types/errors';
 import { parseApiError } from '../../api/utils';
-import { ApiErrorAction } from '../../api/types/actions';
-import { Domain, DomainStatus } from '../data';
 import { hasServerData } from '../../servers/data';
+import { createAsyncThunk } from '../../utils/helpers/redux';
 import { replaceAuthorityFromUri } from '../../utils/helpers/uri';
-import { EDIT_DOMAIN_REDIRECTS, EditDomainRedirectsAction } from './domainRedirects';
+import type { Domain, DomainStatus } from '../data';
+import type { EditDomainRedirects } from './domainRedirects';
 
-export const LIST_DOMAINS_START = 'shlink/domainsList/LIST_DOMAINS_START';
-export const LIST_DOMAINS_ERROR = 'shlink/domainsList/LIST_DOMAINS_ERROR';
-export const LIST_DOMAINS = 'shlink/domainsList/LIST_DOMAINS';
-export const FILTER_DOMAINS = 'shlink/domainsList/FILTER_DOMAINS';
-export const VALIDATE_DOMAIN = 'shlink/domainsList/VALIDATE_DOMAIN';
+const REDUCER_PREFIX = 'shlink/domainsList';
 
 export interface DomainsList {
   domains: Domain[];
@@ -25,16 +21,12 @@ export interface DomainsList {
   errorData?: ProblemDetailsError;
 }
 
-export interface ListDomainsAction extends Action<string> {
+interface ListDomains {
   domains: Domain[];
   defaultRedirects?: ShlinkDomainRedirects;
 }
 
-interface FilterDomainsAction extends Action<string> {
-  searchTerm: string;
-}
-
-interface ValidateDomain extends Action<string> {
+interface ValidateDomain {
   domain: string;
   status: DomainStatus;
 }
@@ -46,83 +38,89 @@ const initialState: DomainsList = {
   error: false,
 };
 
-export type DomainsCombinedAction = ListDomainsAction
-& ApiErrorAction
-& FilterDomainsAction
-& EditDomainRedirectsAction
-& ValidateDomain;
-
-export const replaceRedirectsOnDomain = (domain: string, redirects: ShlinkDomainRedirects) =>
+export const replaceRedirectsOnDomain = ({ domain, redirects }: EditDomainRedirects) =>
   (d: Domain): Domain => (d.domain !== domain ? d : { ...d, redirects });
 
 export const replaceStatusOnDomain = (domain: string, status: DomainStatus) =>
   (d: Domain): Domain => (d.domain !== domain ? d : { ...d, status });
 
-export default buildReducer<DomainsList, DomainsCombinedAction>({
-  [LIST_DOMAINS_START]: () => ({ ...initialState, loading: true }),
-  [LIST_DOMAINS_ERROR]: ({ errorData }) => ({ ...initialState, error: true, errorData }),
-  [LIST_DOMAINS]: (_, { domains, defaultRedirects }) =>
-    ({ ...initialState, domains, filteredDomains: domains, defaultRedirects }),
-  [FILTER_DOMAINS]: (state, { searchTerm }) => ({
-    ...state,
-    filteredDomains: state.domains.filter(({ domain }) => domain.toLowerCase().match(searchTerm.toLowerCase())),
-  }),
-  [EDIT_DOMAIN_REDIRECTS]: (state, { domain, redirects }) => ({
-    ...state,
-    domains: state.domains.map(replaceRedirectsOnDomain(domain, redirects)),
-    filteredDomains: state.filteredDomains.map(replaceRedirectsOnDomain(domain, redirects)),
-  }),
-  [VALIDATE_DOMAIN]: (state, { domain, status }) => ({
-    ...state,
-    domains: state.domains.map(replaceStatusOnDomain(domain, status)),
-    filteredDomains: state.filteredDomains.map(replaceStatusOnDomain(domain, status)),
-  }),
-}, initialState);
-
-export const listDomains = (buildShlinkApiClient: ShlinkApiClientBuilder) => () => async (
-  dispatch: Dispatch,
-  getState: GetState,
+export const domainsListReducerCreator = (
+  buildShlinkApiClient: ShlinkApiClientBuilder,
+  editDomainRedirects: AsyncThunk<EditDomainRedirects, any, any>,
 ) => {
-  dispatch({ type: LIST_DOMAINS_START });
-  const { listDomains: shlinkListDomains } = buildShlinkApiClient(getState);
+  const listDomains = createAsyncThunk(`${REDUCER_PREFIX}/listDomains`, async (_: void, { getState }): Promise<ListDomains> => {
+    const { listDomains: shlinkListDomains } = buildShlinkApiClient(getState);
+    const { data, defaultRedirects } = await shlinkListDomains();
 
-  try {
-    const resp = await shlinkListDomains().then(({ data, defaultRedirects }) => ({
+    return {
       domains: data.map((domain): Domain => ({ ...domain, status: 'validating' })),
       defaultRedirects,
-    }));
+    };
+  });
 
-    dispatch<ListDomainsAction>({ type: LIST_DOMAINS, ...resp });
-  } catch (e: any) {
-    dispatch<ApiErrorAction>({ type: LIST_DOMAINS_ERROR, errorData: parseApiError(e) });
-  }
-};
-
-export const filterDomains = (searchTerm: string): FilterDomainsAction => ({ type: FILTER_DOMAINS, searchTerm });
-
-export const checkDomainHealth = (buildShlinkApiClient: ShlinkApiClientBuilder) => (domain: string) => async (
-  dispatch: Dispatch,
-  getState: GetState,
-) => {
-  const { selectedServer } = getState();
-
-  if (!hasServerData(selectedServer)) {
-    dispatch<ValidateDomain>({ type: VALIDATE_DOMAIN, domain, status: 'invalid' });
-
-    return;
-  }
-
-  try {
-    const { url, ...rest } = selectedServer;
-    const { health } = buildShlinkApiClient({
-      ...rest,
-      url: replaceAuthorityFromUri(url, domain),
-    });
-
-    const { status } = await health();
-
-    dispatch<ValidateDomain>({ type: VALIDATE_DOMAIN, domain, status: status === 'pass' ? 'valid' : 'invalid' });
-  } catch (e) {
-    dispatch<ValidateDomain>({ type: VALIDATE_DOMAIN, domain, status: 'invalid' });
-  }
+  const checkDomainHealth = createAsyncThunk(
+    `${REDUCER_PREFIX}/checkDomainHealth`,
+    async (domain: string, { getState }): Promise<ValidateDomain> => {
+      const { selectedServer } = getState();
+
+      if (!hasServerData(selectedServer)) {
+        return { domain, status: 'invalid' };
+      }
+
+      try {
+        const { url, ...rest } = selectedServer;
+        const { health } = buildShlinkApiClient({
+          ...rest,
+          url: replaceAuthorityFromUri(url, domain),
+        });
+
+        const { status } = await health();
+
+        return { domain, status: status === 'pass' ? 'valid' : 'invalid' };
+      } catch (e) {
+        return { domain, status: 'invalid' };
+      }
+    },
+  );
+
+  const filterDomains = createAction<string>(`${REDUCER_PREFIX}/filterDomains`);
+
+  const { reducer } = createSlice<DomainsList, SliceCaseReducers<DomainsList>>({
+    name: REDUCER_PREFIX,
+    initialState,
+    reducers: {},
+    extraReducers: (builder) => {
+      builder.addCase(listDomains.pending, () => ({ ...initialState, loading: true }));
+      builder.addCase(listDomains.rejected, (_, { error }) => (
+        { ...initialState, error: true, errorData: parseApiError(error) }
+      ));
+      builder.addCase(listDomains.fulfilled, (_, { payload }) => (
+        { ...initialState, ...payload, filteredDomains: payload.domains }
+      ));
+
+      builder.addCase(checkDomainHealth.fulfilled, ({ domains, filteredDomains, ...rest }, { payload }) => ({
+        ...rest,
+        domains: domains.map(replaceStatusOnDomain(payload.domain, payload.status)),
+        filteredDomains: filteredDomains.map(replaceStatusOnDomain(payload.domain, payload.status)),
+      }));
+
+      builder.addCase(filterDomains, (state, { payload }) => ({
+        ...state,
+        filteredDomains: state.domains.filter(({ domain }) => domain.toLowerCase().match(payload.toLowerCase())),
+      }));
+
+      builder.addCase(editDomainRedirects.fulfilled, (state, { payload }) => ({
+        ...state,
+        domains: state.domains.map(replaceRedirectsOnDomain(payload)),
+        filteredDomains: state.filteredDomains.map(replaceRedirectsOnDomain(payload)),
+      }));
+    },
+  });
+
+  return {
+    reducer,
+    listDomains,
+    checkDomainHealth,
+    filterDomains,
+  };
 };

src/domains/services/provideServices.ts

@@ -1,11 +1,12 @@
-import Bottle from 'bottlejs';
-import { ConnectDecorator } from '../../container/types';
-import { checkDomainHealth, filterDomains, listDomains } from '../reducers/domainsList';
+import type Bottle from 'bottlejs';
+import { prop } from 'ramda';
+import type { ConnectDecorator } from '../../container/types';
 import { DomainSelector } from '../DomainSelector';
 import { ManageDomains } from '../ManageDomains';
 import { editDomainRedirects } from '../reducers/domainRedirects';
+import { domainsListReducerCreator } from '../reducers/domainsList';
 
-const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
+export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
   bottle.serviceFactory('DomainSelector', () => DomainSelector);
   bottle.decorator('DomainSelector', connect(['domainsList'], ['listDomains']));
@@ -16,11 +17,18 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
     ['listDomains', 'filterDomains', 'editDomainRedirects', 'checkDomainHealth'],
   ));
 
-  // Actions
-  bottle.serviceFactory('listDomains', listDomains, 'buildShlinkApiClient');
-  bottle.serviceFactory('filterDomains', () => filterDomains);
-  bottle.serviceFactory('editDomainRedirects', editDomainRedirects, 'buildShlinkApiClient');
-  bottle.serviceFactory('checkDomainHealth', checkDomainHealth, 'buildShlinkApiClient');
-};
+  // Reducer
+  bottle.serviceFactory(
+    'domainsListReducerCreator',
+    domainsListReducerCreator,
+    'buildShlinkApiClient',
+    'editDomainRedirects',
+  );
+  bottle.serviceFactory('domainsListReducer', prop('reducer'), 'domainsListReducerCreator');
 
-export default provideServices;
+  // Actions
+  bottle.serviceFactory('listDomains', prop('listDomains'), 'domainsListReducerCreator');
+  bottle.serviceFactory('filterDomains', prop('filterDomains'), 'domainsListReducerCreator');
+  bottle.serviceFactory('editDomainRedirects', editDomainRedirects, 'buildShlinkApiClient');
+  bottle.serviceFactory('checkDomainHealth', prop('checkDomainHealth'), 'domainsListReducerCreator');
+};

src/index.scss

@@ -3,7 +3,8 @@
 @import './utils/base';
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
 @import './common/react-tag-autocomplete.scss';
-@import './theme/theme';
+@import './utils/theme/theme';
+@import './utils/mixins/text-ellipsis';
 @import './utils/table/ResponsiveTable';
 @import './utils/StickyCardPaginator';
 
@@ -39,6 +40,10 @@ a:not(.nav-link):not(.navbar-brand):not(.page-link):not(.highlight-card):not(.bt
   background-color: $mainColor !important;
 }
 
+.bg-warning {
+  color: $lightTextColor;
+}
+
 .card-body,
 .card-header,
 .list-group-item {
@@ -218,9 +223,7 @@ hr {
 }
 
 .text-ellipsis {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+  @include text-ellipsis();
 }
 
 .progress-bar {

src/index.tsx

@@ -1,19 +1,20 @@
+import 'chart.js/auto'; // TODO Import specific ones to reduce bundle size https://react-chartjs-2.js.org/docs/migration-to-v4/#tree-shaking
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import pack from '../package.json';
 import { container } from './container';
-import { store } from './container/store';
-import { fixLeafletIcons } from './utils/helpers/leaflet';
+import { setUpStore } from './container/store';
 import { register as registerServiceWorker } from './serviceWorkerRegistration';
-import 'chart.js/auto'; // TODO Import specific ones to reduce bundle size https://react-chartjs-2.js.org/docs/migration-to-v4/#tree-shaking
-import 'react-datepicker/dist/react-datepicker.css';
-import 'leaflet/dist/leaflet.css';
+import { fixLeafletIcons } from './utils/helpers/leaflet';
 import './index.scss';
+import 'leaflet/dist/leaflet.css';
+import 'react-datepicker/dist/react-datepicker.css';
 
 // This overwrites icons used for leaflet maps, fixing some issues caused by webpack while processing the CSS
 fixLeafletIcons();
 
+const store = setUpStore(container);
 const { App, ScrollToTop, ErrorHandler, appUpdateAvailable } = container;
 
 createRoot(document.getElementById('root')!).render( // eslint-disable-line @typescript-eslint/no-non-null-assertion

src/mercure/helpers/boundToMercureHub.tsx

@@ -1,8 +1,9 @@
-import { FC, useEffect } from 'react';
 import { pipe } from 'ramda';
+import type { FC } from 'react';
+import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { CreateVisit } from '../../visits/types';
-import { MercureInfo } from '../reducers/mercureInfo';
+import type { CreateVisit } from '../../visits/types';
+import type { MercureInfo } from '../reducers/mercureInfo';
 import { bindToMercureTopic } from './index';
 
 export interface MercureBoundProps {

src/mercure/helpers/index.ts

@@ -1,5 +1,5 @@
 import { EventSourcePolyfill as EventSource } from 'event-source-polyfill';
-import { MercureInfo } from '../reducers/mercureInfo';
+import type { MercureInfo } from '../reducers/mercureInfo';
 
 export const bindToMercureTopic = <T>(mercureInfo: MercureInfo, topics: string[], onMessage: (message: T) => void, onTokenExpired: () => void) => { // eslint-disable-line max-len
   const { mercureHubUrl, token, loading, error } = mercureInfo;

src/mercure/reducers/mercureInfo.ts

@@ -1,52 +1,44 @@
-import { Action, Dispatch } from 'redux';
-import { ShlinkMercureInfo } from '../../api/types';
-import { GetState } from '../../container/types';
-import { buildReducer } from '../../utils/helpers/redux';
-import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
+import { createSlice } from '@reduxjs/toolkit';
+import type { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
+import type { ShlinkMercureInfo } from '../../api/types';
+import { createAsyncThunk } from '../../utils/helpers/redux';
 
-export const GET_MERCURE_INFO_START = 'shlink/mercure/GET_MERCURE_INFO_START';
-export const GET_MERCURE_INFO_ERROR = 'shlink/mercure/GET_MERCURE_INFO_ERROR';
-export const GET_MERCURE_INFO = 'shlink/mercure/GET_MERCURE_INFO';
+const REDUCER_PREFIX = 'shlink/mercure';
 
-export interface MercureInfo {
-  token?: string;
-  mercureHubUrl?: string;
+export interface MercureInfo extends Partial<ShlinkMercureInfo> {
   interval?: number;
   loading: boolean;
   error: boolean;
 }
 
-export type GetMercureInfoAction = Action<string> & ShlinkMercureInfo & { interval?: number };
-
 const initialState: MercureInfo = {
   loading: true,
   error: false,
 };
 
-export default buildReducer<MercureInfo, GetMercureInfoAction>({
-  [GET_MERCURE_INFO_START]: (state) => ({ ...state, loading: true, error: false }),
-  [GET_MERCURE_INFO_ERROR]: (state) => ({ ...state, loading: false, error: true }),
-  [GET_MERCURE_INFO]: (_, action) => ({ ...action, loading: false, error: false }),
-}, initialState);
+export const mercureInfoReducerCreator = (buildShlinkApiClient: ShlinkApiClientBuilder) => {
+  const loadMercureInfo = createAsyncThunk(
+    `${REDUCER_PREFIX}/loadMercureInfo`,
+    (_: void, { getState }): Promise<ShlinkMercureInfo> => {
+      const { settings } = getState();
+      if (!settings.realTimeUpdates.enabled) {
+        throw new Error('Real time updates not enabled');
+      }
 
-export const loadMercureInfo = (buildShlinkApiClient: ShlinkApiClientBuilder) =>
-  () => async (dispatch: Dispatch, getState: GetState) => {
-    dispatch({ type: GET_MERCURE_INFO_START });
+      return buildShlinkApiClient(getState).mercureInfo();
+    },
+  );
 
-    const { settings } = getState();
-    const { mercureInfo } = buildShlinkApiClient(getState);
+  const { reducer } = createSlice({
+    name: REDUCER_PREFIX,
+    initialState,
+    reducers: {},
+    extraReducers: (builder) => {
+      builder.addCase(loadMercureInfo.pending, (state) => ({ ...state, loading: true, error: false }));
+      builder.addCase(loadMercureInfo.rejected, (state) => ({ ...state, loading: false, error: true }));
+      builder.addCase(loadMercureInfo.fulfilled, (_, { payload }) => ({ ...payload, loading: false, error: false }));
+    },
+  });
 
-    if (!settings.realTimeUpdates.enabled) {
-      dispatch({ type: GET_MERCURE_INFO_ERROR });
-
-      return;
-    }
-
-    try {
-      const info = await mercureInfo();
-
-      dispatch<GetMercureInfoAction>({ type: GET_MERCURE_INFO, interval: settings.realTimeUpdates.interval, ...info });
-    } catch (e) {
-      dispatch({ type: GET_MERCURE_INFO_ERROR });
-    }
-  };
+  return { loadMercureInfo, reducer };
+};

src/mercure/services/provideServices.ts

@@ -1,9 +1,12 @@
-import Bottle from 'bottlejs';
-import { loadMercureInfo } from '../reducers/mercureInfo';
+import type Bottle from 'bottlejs';
+import { prop } from 'ramda';
+import { mercureInfoReducerCreator } from '../reducers/mercureInfo';
+
+export const provideServices = (bottle: Bottle) => {
+  // Reducer
+  bottle.serviceFactory('mercureInfoReducerCreator', mercureInfoReducerCreator, 'buildShlinkApiClient');
+  bottle.serviceFactory('mercureInfoReducer', prop('reducer'), 'mercureInfoReducerCreator');
 
-const provideServices = (bottle: Bottle) => {
   // Actions
-  bottle.serviceFactory('loadMercureInfo', loadMercureInfo, 'buildShlinkApiClient');
+  bottle.serviceFactory('loadMercureInfo', prop('loadMercureInfo'), 'mercureInfoReducerCreator');
 };
-
-export default provideServices;

src/reducers/index.ts

@@ -1,47 +1,31 @@
-import { combineReducers } from 'redux';
-import serversReducer from '../servers/reducers/servers';
-import selectedServerReducer from '../servers/reducers/selectedServer';
-import shortUrlsListReducer from '../short-urls/reducers/shortUrlsList';
-import shortUrlCreationReducer from '../short-urls/reducers/shortUrlCreation';
-import shortUrlDeletionReducer from '../short-urls/reducers/shortUrlDeletion';
-import shortUrlEditionReducer from '../short-urls/reducers/shortUrlEdition';
-import shortUrlVisitsReducer from '../visits/reducers/shortUrlVisits';
-import tagVisitsReducer from '../visits/reducers/tagVisits';
-import domainVisitsReducer from '../visits/reducers/domainVisits';
-import orphanVisitsReducer from '../visits/reducers/orphanVisits';
-import nonOrphanVisitsReducer from '../visits/reducers/nonOrphanVisits';
-import shortUrlDetailReducer from '../short-urls/reducers/shortUrlDetail';
-import tagsListReducer from '../tags/reducers/tagsList';
-import tagDeleteReducer from '../tags/reducers/tagDelete';
-import tagEditReducer from '../tags/reducers/tagEdit';
-import mercureInfoReducer from '../mercure/reducers/mercureInfo';
-import settingsReducer from '../settings/reducers/settings';
-import domainsListReducer from '../domains/reducers/domainsList';
-import visitsOverviewReducer from '../visits/reducers/visitsOverview';
-import appUpdatesReducer from '../app/reducers/appUpdates';
-import sidebarReducer from '../common/reducers/sidebar';
-import { ShlinkState } from '../container/types';
+import { combineReducers } from '@reduxjs/toolkit';
+import type { IContainer } from 'bottlejs';
+import { appUpdatesReducer } from '../app/reducers/appUpdates';
+import { sidebarReducer } from '../common/reducers/sidebar';
+import type { ShlinkState } from '../container/types';
+import { serversReducer } from '../servers/reducers/servers';
+import { settingsReducer } from '../settings/reducers/settings';
 
-export default combineReducers<ShlinkState>({
+export const initReducers = (container: IContainer) => combineReducers<ShlinkState>({
   servers: serversReducer,
-  selectedServer: selectedServerReducer,
-  shortUrlsList: shortUrlsListReducer,
-  shortUrlCreationResult: shortUrlCreationReducer,
-  shortUrlDeletion: shortUrlDeletionReducer,
-  shortUrlEdition: shortUrlEditionReducer,
-  shortUrlVisits: shortUrlVisitsReducer,
-  tagVisits: tagVisitsReducer,
-  domainVisits: domainVisitsReducer,
-  orphanVisits: orphanVisitsReducer,
-  nonOrphanVisits: nonOrphanVisitsReducer,
-  shortUrlDetail: shortUrlDetailReducer,
-  tagsList: tagsListReducer,
-  tagDelete: tagDeleteReducer,
-  tagEdit: tagEditReducer,
-  mercureInfo: mercureInfoReducer,
+  selectedServer: container.selectedServerReducer,
+  shortUrlsList: container.shortUrlsListReducer,
+  shortUrlCreation: container.shortUrlCreationReducer,
+  shortUrlDeletion: container.shortUrlDeletionReducer,
+  shortUrlEdition: container.shortUrlEditionReducer,
+  shortUrlDetail: container.shortUrlDetailReducer,
+  shortUrlVisits: container.shortUrlVisitsReducer,
+  tagVisits: container.tagVisitsReducer,
+  domainVisits: container.domainVisitsReducer,
+  orphanVisits: container.orphanVisitsReducer,
+  nonOrphanVisits: container.nonOrphanVisitsReducer,
+  tagsList: container.tagsListReducer,
+  tagDelete: container.tagDeleteReducer,
+  tagEdit: container.tagEditReducer,
+  mercureInfo: container.mercureInfoReducer,
   settings: settingsReducer,
-  domainsList: domainsListReducer,
-  visitsOverview: visitsOverviewReducer,
+  domainsList: container.domainsListReducer,
+  visitsOverview: container.visitsOverviewReducer,
   appUpdated: appUpdatesReducer,
   sidebar: sidebarReducer,
 });

src/servers/CreateServer.tsx

@@ -1,19 +1,21 @@
-import { FC, useEffect, useState } from 'react';
-import { v4 as uuid } from 'uuid';
-import { Button } from 'reactstrap';
+import type { FC } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Result } from '../utils/Result';
+import { Button } from 'reactstrap';
+import { v4 as uuid } from 'uuid';
 import { NoMenuLayout } from '../common/NoMenuLayout';
-import { TimeoutToggle, useGoBack, useToggle } from '../utils/helpers/hooks';
-import { ServerForm } from './helpers/ServerForm';
-import { ImportServersBtnProps } from './helpers/ImportServersBtn';
-import { ServerData, ServersMap, ServerWithId } from './data';
+import type { TimeoutToggle } from '../utils/helpers/hooks';
+import { useGoBack, useToggle } from '../utils/helpers/hooks';
+import { Result } from '../utils/Result';
+import type { ServerData, ServersMap, ServerWithId } from './data';
 import { DuplicatedServersModal } from './helpers/DuplicatedServersModal';
+import type { ImportServersBtnProps } from './helpers/ImportServersBtn';
+import { ServerForm } from './helpers/ServerForm';
 
 const SHOW_IMPORT_MSG_TIME = 4000;
 
 interface CreateServerProps {
-  createServer: (server: ServerWithId) => void;
+  createServers: (servers: ServerWithId[]) => void;
   servers: ServersMap;
 }
 
@@ -27,7 +29,7 @@ const ImportResult = ({ type }: { type: 'error' | 'success' }) => (
 );
 
 export const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useTimeoutToggle: TimeoutToggle) => (
-  { servers, createServer }: CreateServerProps,
+  { servers, createServers }: CreateServerProps,
 ) => {
   const navigate = useNavigate();
   const goBack = useGoBack();
@@ -43,7 +45,7 @@ export const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useTim
 
     const id = uuid();
 
-    createServer({ ...serverData, id });
+    createServers([{ ...serverData, id }]);
     navigate(`/server/${id}`);
   };
 

src/servers/DeleteServerButton.tsx

@@ -1,9 +1,9 @@
-import { FC, PropsWithChildren } from 'react';
 import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC, PropsWithChildren } from 'react';
 import { useToggle } from '../utils/helpers/hooks';
-import { DeleteServerModalProps } from './DeleteServerModal';
-import { ServerWithId } from './data';
+import type { ServerWithId } from './data';
+import type { DeleteServerModalProps } from './DeleteServerModal';
 
 export type DeleteServerButtonProps = PropsWithChildren<{
   server: ServerWithId;

src/servers/DeleteServerModal.tsx

@@ -1,7 +1,8 @@
-import { FC } from 'react';
-import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import type { FC } from 'react';
+import { useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { ServerWithId } from './data';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import type { ServerWithId } from './data';
 
 export interface DeleteServerModalProps {
   server: ServerWithId;
@@ -18,14 +19,22 @@ export const DeleteServerModal: FC<DeleteServerModalConnectProps> = (
   { server, toggle, isOpen, deleteServer, redirectHome = true },
 ) => {
   const navigate = useNavigate();
-  const closeModal = () => {
-    deleteServer(server);
+  const doDelete = useRef<boolean>(false);
+  const toggleAndDelete = () => {
+    doDelete.current = true;
     toggle();
+  };
+  const onClosed = () => {
+    if (!doDelete.current) {
+      return;
+    }
+
+    deleteServer(server);
     redirectHome && navigate('/');
   };
 
   return (
-    <Modal isOpen={isOpen} toggle={toggle} centered>
+    <Modal isOpen={isOpen} toggle={toggle} centered onClosed={onClosed}>
       <ModalHeader toggle={toggle} className="text-danger">Remove server</ModalHeader>
       <ModalBody>
         <p>Are you sure you want to remove <b>{server ? server.name : ''}</b>?</p>
@@ -38,7 +47,7 @@ export const DeleteServerModal: FC<DeleteServerModalConnectProps> = (
       </ModalBody>
       <ModalFooter>
         <Button color="link" onClick={toggle}>Cancel</Button>
-        <Button color="danger" onClick={() => closeModal()}>Delete</Button>
+        <Button color="danger" onClick={toggleAndDelete}>Delete</Button>
       </ModalFooter>
     </Modal>
   );

src/servers/EditServer.tsx

@@ -1,17 +1,21 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { Button } from 'reactstrap';
 import { NoMenuLayout } from '../common/NoMenuLayout';
-import { useGoBack } from '../utils/helpers/hooks';
+import { useGoBack, useParsedQuery } from '../utils/helpers/hooks';
+import type { ServerData } from './data';
+import { isServerWithId } from './data';
 import { ServerForm } from './helpers/ServerForm';
 import { withSelectedServer } from './helpers/withSelectedServer';
-import { isServerWithId, ServerData } from './data';
 
 interface EditServerProps {
   editServer: (serverId: string, serverData: ServerData) => void;
 }
 
-export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProps>(({ editServer, selectedServer }) => {
+export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProps>((
+  { editServer, selectedServer, selectServer },
+) => {
   const goBack = useGoBack();
+  const { reconnect } = useParsedQuery<{ reconnect?: 'true' }>();
 
   if (!isServerWithId(selectedServer)) {
     return null;
@@ -19,6 +23,7 @@ export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProp
 
   const handleSubmit = (serverData: ServerData) => {
     editServer(selectedServer.id, serverData);
+    reconnect === 'true' && selectServer(selectedServer.id);
     goBack();
   };
 

src/servers/ManageServers.tsx

@@ -1,17 +1,18 @@
-import { FC, useEffect, useState } from 'react';
-import { Button, Row } from 'reactstrap';
 import { faFileDownload as exportIcon, faPlus as plusIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC } from 'react';
+import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { Button, Row } from 'reactstrap';
 import { NoMenuLayout } from '../common/NoMenuLayout';
-import { SimpleCard } from '../utils/SimpleCard';
-import { SearchField } from '../utils/SearchField';
+import type { TimeoutToggle } from '../utils/helpers/hooks';
 import { Result } from '../utils/Result';
-import { TimeoutToggle } from '../utils/helpers/hooks';
-import { ImportServersBtnProps } from './helpers/ImportServersBtn';
-import { ServersMap } from './data';
-import { ManageServersRowProps } from './ManageServersRow';
-import ServersExporter from './services/ServersExporter';
+import { SearchField } from '../utils/SearchField';
+import { SimpleCard } from '../utils/SimpleCard';
+import type { ServersMap } from './data';
+import type { ImportServersBtnProps } from './helpers/ImportServersBtn';
+import type { ManageServersRowProps } from './ManageServersRow';
+import type { ServersExporter } from './services/ServersExporter';
 
 interface ManageServersProps {
   servers: ServersMap;

src/servers/ManageServersRow.tsx

@@ -1,10 +1,10 @@
-import { FC } from 'react';
-import { UncontrolledTooltip } from 'reactstrap';
-import { Link } from 'react-router-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck as checkIcon } from '@fortawesome/free-solid-svg-icons';
-import { ServerWithId } from './data';
-import { ManageServersRowDropdownProps } from './ManageServersRowDropdown';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { UncontrolledTooltip } from 'reactstrap';
+import type { ServerWithId } from './data';
+import type { ManageServersRowDropdownProps } from './ManageServersRowDropdown';
 
 export interface ManageServersRowProps {
   server: ServerWithId;

src/servers/ManageServersRowDropdown.tsx

@@ -1,18 +1,18 @@
-import { FC } from 'react';
-import { DropdownItem } from 'reactstrap';
-import { Link } from 'react-router-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircle as toggleOnIcon } from '@fortawesome/free-regular-svg-icons';
 import {
   faBan as toggleOffIcon,
   faEdit as editIcon,
   faMinusCircle as deleteIcon,
   faPlug as connectIcon,
 } from '@fortawesome/free-solid-svg-icons';
-import { faCircle as toggleOnIcon } from '@fortawesome/free-regular-svg-icons';
-import { DropdownBtnMenu } from '../utils/DropdownBtnMenu';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { DropdownItem } from 'reactstrap';
 import { useToggle } from '../utils/helpers/hooks';
-import { DeleteServerModalProps } from './DeleteServerModal';
-import { ServerWithId } from './data';
+import { RowDropdownBtn } from '../utils/RowDropdownBtn';
+import type { ServerWithId } from './data';
+import type { DeleteServerModalProps } from './DeleteServerModal';
 
 export interface ManageServersRowDropdownProps {
   server: ServerWithId;
@@ -25,14 +25,13 @@ interface ManageServersRowDropdownConnectProps extends ManageServersRowDropdownP
 export const ManageServersRowDropdown = (
   DeleteServerModal: FC<DeleteServerModalProps>,
 ): FC<ManageServersRowDropdownConnectProps> => ({ server, setAutoConnect }) => {
-  const [isMenuOpen, toggleMenu] = useToggle();
   const [isModalOpen,, showModal, hideModal] = useToggle();
   const serverUrl = `/server/${server.id}`;
   const { autoConnect: isAutoConnect } = server;
   const autoConnectIcon = isAutoConnect ? toggleOffIcon : toggleOnIcon;
 
   return (
-    <DropdownBtnMenu isOpen={isMenuOpen} toggle={toggleMenu}>
+    <RowDropdownBtn minWidth={170}>
       <DropdownItem tag={Link} to={serverUrl}>
         <FontAwesomeIcon icon={connectIcon} fixedWidth /> Connect
       </DropdownItem>
@@ -48,6 +47,6 @@ export const ManageServersRowDropdown = (
       </DropdownItem>
 
       <DeleteServerModal redirectHome={false} server={server} isOpen={isModalOpen} toggle={hideModal} />
-    </DropdownBtnMenu>
+    </RowDropdownBtn>
   );
 };

src/servers/Overview.tsx

@@ -1,18 +1,23 @@
-import { FC, useEffect } from 'react';
-import { Card, CardBody, CardHeader, Row } from 'reactstrap';
+import type { FC } from 'react';
+import { useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import { ITEMS_IN_OVERVIEW_PAGE, ShortUrlsList as ShortUrlsListState } from '../short-urls/reducers/shortUrlsList';
-import { prettify } from '../utils/helpers/numbers';
-import { TagsList } from '../tags/reducers/tagsList';
-import { ShortUrlsTableProps } from '../short-urls/ShortUrlsTable';
+import { Card, CardBody, CardHeader, Row } from 'reactstrap';
+import type { ShlinkShortUrlsListParams } from '../api/types';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
-import { CreateShortUrlProps } from '../short-urls/CreateShortUrl';
-import { VisitsOverview } from '../visits/reducers/visitsOverview';
 import { Topics } from '../mercure/helpers/Topics';
-import { ShlinkShortUrlsListParams } from '../api/types';
-import { supportsNonOrphanVisits } from '../utils/helpers/features';
-import { getServerId, SelectedServer } from './data';
+import type { Settings } from '../settings/reducers/settings';
+import type { CreateShortUrlProps } from '../short-urls/CreateShortUrl';
+import type { ShortUrlsList as ShortUrlsListState } from '../short-urls/reducers/shortUrlsList';
+import { ITEMS_IN_OVERVIEW_PAGE } from '../short-urls/reducers/shortUrlsList';
+import type { ShortUrlsTableType } from '../short-urls/ShortUrlsTable';
+import type { TagsList } from '../tags/reducers/tagsList';
+import { useFeature } from '../utils/helpers/features';
+import { prettify } from '../utils/helpers/numbers';
+import type { VisitsOverview } from '../visits/reducers/visitsOverview';
+import type { SelectedServer } from './data';
+import { getServerId } from './data';
 import { HighlightCard } from './helpers/HighlightCard';
+import { VisitsHighlightCard } from './helpers/VisitsHighlightCard';
 
 interface OverviewConnectProps {
   shortUrlsList: ShortUrlsListState;
@@ -22,10 +27,11 @@ interface OverviewConnectProps {
   selectedServer: SelectedServer;
   visitsOverview: VisitsOverview;
   loadVisitsOverview: Function;
+  settings: Settings;
 }
 
 export const Overview = (
-  ShortUrlsTable: FC<ShortUrlsTableProps>,
+  ShortUrlsTable: ShortUrlsTableType,
   CreateShortUrl: FC<CreateShortUrlProps>,
 ) => boundToMercureHub(({
   shortUrlsList,
@@ -35,12 +41,13 @@ export const Overview = (
   selectedServer,
   loadVisitsOverview,
   visitsOverview,
+  settings: { visits },
 }: OverviewConnectProps) => {
   const { loading, shortUrls } = shortUrlsList;
   const { loading: loadingTags } = tagsList;
-  const { loading: loadingVisits, visitsCount, orphanVisitsCount } = visitsOverview;
+  const { loading: loadingVisits, nonOrphanVisits, orphanVisits } = visitsOverview;
   const serverId = getServerId(selectedServer);
-  const linkToNonOrphanVisits = supportsNonOrphanVisits(selectedServer);
+  const linkToNonOrphanVisits = useFeature('nonOrphanVisits', selectedServer);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -53,14 +60,22 @@ export const Overview = (
     <>
       <Row>
         <div className="col-lg-6 col-xl-3 mb-3">
-          <HighlightCard title="Visits" link={linkToNonOrphanVisits && `/server/${serverId}/non-orphan-visits`}>
-            {loadingVisits ? 'Loading...' : prettify(visitsCount)}
-          </HighlightCard>
+          <VisitsHighlightCard
+            title="Visits"
+            link={linkToNonOrphanVisits ? `/server/${serverId}/non-orphan-visits` : undefined}
+            excludeBots={visits?.excludeBots ?? false}
+            loading={loadingVisits}
+            visitsSummary={nonOrphanVisits}
+          />
         </div>
         <div className="col-lg-6 col-xl-3 mb-3">
-          <HighlightCard title="Orphan visits" link={`/server/${serverId}/orphan-visits`}>
-            {loadingVisits ? 'Loading...' : prettify(orphanVisitsCount)}
-          </HighlightCard>
+          <VisitsHighlightCard
+            title="Orphan visits"
+            link={`/server/${serverId}/orphan-visits`}
+            excludeBots={visits?.excludeBots ?? false}
+            loading={loadingVisits}
+            visitsSummary={orphanVisits}
+          />
         </div>
         <div className="col-lg-6 col-xl-3 mb-3">
           <HighlightCard title="Short URLs" link={`/server/${serverId}/list-short-urls/1`}>

src/servers/ServersDropdown.tsx

@@ -1,9 +1,10 @@
-import { isEmpty, values } from 'ramda';
-import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
-import { Link } from 'react-router-dom';
 import { faPlus as plusIcon, faServer as serverIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { getServerId, SelectedServer, ServersMap } from './data';
+import { isEmpty, values } from 'ramda';
+import { Link } from 'react-router-dom';
+import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
+import type { SelectedServer, ServersMap } from './data';
+import { getServerId } from './data';
 
 export interface ServersDropdownProps {
   servers: ServersMap;

src/servers/ServersListGroup.tsx

@@ -1,10 +1,10 @@
-import { FC, PropsWithChildren } from 'react';
-import { ListGroup, ListGroupItem } from 'reactstrap';
-import { Link } from 'react-router-dom';
-import classNames from 'classnames';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons';
-import { ServerWithId } from './data';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import type { FC, PropsWithChildren } from 'react';
+import { Link } from 'react-router-dom';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+import type { ServerWithId } from './data';
 import './ServersListGroup.scss';
 
 type ServersListGroupProps = PropsWithChildren<{

src/servers/data/index.ts

@@ -1,5 +1,5 @@
 import { omit } from 'ramda';
-import { SemVer } from '../../utils/helpers/version';
+import type { SemVer } from '../../utils/helpers/version';
 
 export interface ServerData {
   name: string;

src/servers/helpers/DuplicatedServersModal.tsx

@@ -1,6 +1,7 @@
-import { FC, Fragment } from 'react';
+import type { FC } from 'react';
+import { Fragment } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import { ServerData } from '../data';
+import type { ServerData } from '../data';
 
 interface DuplicatedServersModalProps {
   duplicatedServers: ServerData[];

src/servers/helpers/HighlightCard.tsx

@@ -1,21 +1,30 @@
-import { FC, PropsWithChildren } from 'react';
-import { Card, CardText, CardTitle } from 'reactstrap';
-import { Link } from 'react-router-dom';
 import { faArrowAltCircleRight as linkIcon } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import { Card, CardText, CardTitle, UncontrolledTooltip } from 'reactstrap';
+import { useElementRef } from '../../utils/helpers/hooks';
 import './HighlightCard.scss';
 
 export type HighlightCardProps = PropsWithChildren<{
   title: string;
-  link?: string | false;
+  link?: string;
+  tooltip?: ReactNode;
 }>;
 
-const buildExtraProps = (link?: string | false) => (!link ? {} : { tag: Link, to: link });
+const buildExtraProps = (link?: string) => (!link ? {} : { tag: Link, to: link });
 
-export const HighlightCard: FC<HighlightCardProps> = ({ children, title, link }) => (
-  <Card className="highlight-card" body {...buildExtraProps(link)}>
-    {link && <FontAwesomeIcon size="3x" className="highlight-card__link-icon" icon={linkIcon} />}
-    <CardTitle tag="h5" className="highlight-card__title">{title}</CardTitle>
-    <CardText tag="h2">{children}</CardText>
-  </Card>
-);
+export const HighlightCard: FC<HighlightCardProps> = ({ children, title, link, tooltip }) => {
+  const ref = useElementRef<HTMLElement>();
+
+  return (
+    <>
+      <Card innerRef={ref} className="highlight-card" body {...buildExtraProps(link)}>
+        {link && <FontAwesomeIcon size="3x" className="highlight-card__link-icon" icon={linkIcon} />}
+        <CardTitle tag="h5" className="highlight-card__title">{title}</CardTitle>
+        <CardText tag="h2">{children}</CardText>
+      </Card>
+      {tooltip && <UncontrolledTooltip target={ref} placement="bottom">{tooltip}</UncontrolledTooltip>}
+    </>
+  );
+};

src/servers/helpers/ImportServersBtn.tsx

@@ -1,12 +1,12 @@
-import { useRef, ChangeEvent, useState, useEffect, FC, PropsWithChildren } from 'react';
-import { Button, UncontrolledTooltip } from 'reactstrap';
-import { complement, pipe } from 'ramda';
 import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useToggle } from '../../utils/helpers/hooks';
-import { mutableRefToElementRef } from '../../utils/helpers/components';
-import { ServersImporter } from '../services/ServersImporter';
-import { ServerData, ServersMap } from '../data';
+import { complement, pipe } from 'ramda';
+import type { ChangeEvent, FC, PropsWithChildren } from 'react';
+import { useEffect, useState } from 'react';
+import { Button, UncontrolledTooltip } from 'reactstrap';
+import { useElementRef, useToggle } from '../../utils/helpers/hooks';
+import type { ServerData, ServersMap } from '../data';
+import type { ServersImporter } from '../services/ServersImporter';
 import { DuplicatedServersModal } from './DuplicatedServersModal';
 import './ImportServersBtn.scss';
 
@@ -34,7 +34,7 @@ export const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC
   tooltipPlacement = 'bottom',
   className = '',
 }) => {
-  const ref = useRef<HTMLInputElement>();
+  const ref = useElementRef<HTMLInputElement>();
   const [serversToCreate, setServersToCreate] = useState<ServerData[] | undefined>();
   const [duplicatedServers, setDuplicatedServers] = useState<ServerData[]>([]);
   const [isModalOpen,, showModal, hideModal] = useToggle();
@@ -79,7 +79,7 @@ export const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC
         type="file"
         accept="text/csv"
         className="import-servers-btn__csv-select"
-        ref={mutableRefToElementRef(ref)}
+        ref={ref}
         onChange={onFile}
       />
 

src/servers/helpers/ServerError.tsx

@@ -1,10 +1,11 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { Link } from 'react-router-dom';
-import { Message } from '../../utils/Message';
-import { ServersListGroup } from '../ServersListGroup';
-import { DeleteServerButtonProps } from '../DeleteServerButton';
-import { isServerWithId, SelectedServer, ServersMap } from '../data';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
+import { Message } from '../../utils/Message';
+import type { SelectedServer, ServersMap } from '../data';
+import { isServerWithId } from '../data';
+import type { DeleteServerButtonProps } from '../DeleteServerButton';
+import { ServersListGroup } from '../ServersListGroup';
 import './ServerError.scss';
 
 interface ServerErrorProps {
@@ -37,7 +38,7 @@ export const ServerError = (DeleteServerButton: FC<DeleteServerButtonProps>): FC
           <h5>
             Alternatively, if you think you may have miss-configured this server, you
             can <DeleteServerButton server={selectedServer} className="server-error__delete-btn">remove it</DeleteServerButton> or&nbsp;
-            <Link to={`/server/${selectedServer.id}/edit`}>edit it</Link>.
+            <Link to={`/server/${selectedServer.id}/edit?reconnect=true`}>edit it</Link>.
           </h5>
         </div>
       )}

src/servers/helpers/ServerForm.tsx

@@ -1,8 +1,9 @@
-import { FC, PropsWithChildren, ReactNode, useEffect, useState } from 'react';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import { useEffect, useState } from 'react';
 import { InputFormGroup } from '../../utils/forms/InputFormGroup';
-import { handleEventPreventingDefault } from '../../utils/utils';
-import { ServerData } from '../data';
 import { SimpleCard } from '../../utils/SimpleCard';
+import { handleEventPreventingDefault } from '../../utils/utils';
+import type { ServerData } from '../data';
 
 type ServerFormProps = PropsWithChildren<{
   onSubmit: (server: ServerData) => void;

src/servers/helpers/VisitsHighlightCard.tsx

@@ -0,0 +1,26 @@
+import type { FC } from 'react';
+import { prettify } from '../../utils/helpers/numbers';
+import type { PartialVisitsSummary } from '../../visits/reducers/visitsOverview';
+import type { HighlightCardProps } from './HighlightCard';
+import { HighlightCard } from './HighlightCard';
+
+export type VisitsHighlightCardProps = Omit<HighlightCardProps, 'tooltip' | 'children'> & {
+  loading: boolean;
+  excludeBots: boolean;
+  visitsSummary: PartialVisitsSummary;
+};
+
+export const VisitsHighlightCard: FC<VisitsHighlightCardProps> = ({ loading, excludeBots, visitsSummary, ...rest }) => (
+  <HighlightCard
+    tooltip={
+      visitsSummary.bots !== undefined
+        ? <>{excludeBots ? 'Plus' : 'Including'} <b>{prettify(visitsSummary.bots)}</b> potential bot visits</>
+        : undefined
+    }
+    {...rest}
+  >
+    {loading ? 'Loading...' : prettify(
+      excludeBots && visitsSummary.nonBots ? visitsSummary.nonBots : visitsSummary.total,
+    )}
+  </HighlightCard>
+);

src/servers/helpers/withSelectedServer.tsx

@@ -1,8 +1,10 @@
-import { FC, useEffect } from 'react';
+import type { FC } from 'react';
+import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { Message } from '../../utils/Message';
-import { isNotFoundServer, SelectedServer } from '../data';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
+import { Message } from '../../utils/Message';
+import type { SelectedServer } from '../data';
+import { isNotFoundServer } from '../data';
 
 interface WithSelectedServerProps {
   selectServer: (serverId: string) => void;

src/servers/helpers/withoutSelectedServer.tsx

@@ -1,4 +1,5 @@
-import { FC, useEffect } from 'react';
+import type { FC } from 'react';
+import { useEffect } from 'react';
 
 interface WithoutSelectedServerProps {
   resetSelectedServer: Function;

src/servers/reducers/remoteServers.ts

@@ -1,18 +1,18 @@
-import { pipe, prop } from 'ramda';
-import { AxiosInstance } from 'axios';
-import { Dispatch } from 'redux';
 import pack from '../../../package.json';
-import { hasServerData, ServerData } from '../data';
+import type { HttpClient } from '../../common/services/HttpClient';
+import { createAsyncThunk } from '../../utils/helpers/redux';
+import type { ServerData } from '../data';
+import { hasServerData } from '../data';
 import { createServers } from './servers';
 
-const responseToServersList = pipe(
-  prop<any, any>('data'),
-  (data: any): ServerData[] => (Array.isArray(data) ? data.filter(hasServerData) : []),
+const responseToServersList = (data: any): ServerData[] => (Array.isArray(data) ? data.filter(hasServerData) : []);
+
+export const fetchServers = (httpClient: HttpClient) => createAsyncThunk(
+  'shlink/remoteServers/fetchServers',
+  async (_: void, { dispatch }): Promise<void> => {
+    const resp = await httpClient.fetchJson<any>(`${pack.homepage}/servers.json`);
+    const result = responseToServersList(resp);
+
+    dispatch(createServers(result));
+  },
 );
-
-export const fetchServers = ({ get }: AxiosInstance) => () => async (dispatch: Dispatch) => {
-  const resp = await get(`${pack.homepage}/servers.json`);
-  const remoteList = responseToServersList(resp);
-
-  dispatch(createServers(remoteList));
-};

src/servers/reducers/selectedServer.ts

@@ -1,31 +1,27 @@
-import { identity, memoizeWith, pipe } from 'ramda';
-import { Action, Dispatch } from 'redux';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createAction, createListenerMiddleware, createSlice } from '@reduxjs/toolkit';
+import { memoizeWith, pipe } from 'ramda';
+import type { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
+import type { ShlinkHealth } from '../../api/types';
+import { createAsyncThunk } from '../../utils/helpers/redux';
 import { versionToPrintable, versionToSemVer as toSemVer } from '../../utils/helpers/version';
-import { SelectedServer } from '../data';
-import { GetState } from '../../container/types';
-import { ShlinkHealth } from '../../api/types';
-import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
-import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
+import type { SelectedServer, ServerWithId } from '../data';
+import { isReachableServer } from '../data';
 
-export const SELECT_SERVER = 'shlink/selectedServer/SELECT_SERVER';
-export const RESET_SELECTED_SERVER = 'shlink/selectedServer/RESET_SELECTED_SERVER';
+const REDUCER_PREFIX = 'shlink/selectedServer';
 
 export const MIN_FALLBACK_VERSION = '1.0.0';
 export const MAX_FALLBACK_VERSION = '999.999.999';
 export const LATEST_VERSION_CONSTRAINT = 'latest';
 
-export interface SelectServerAction extends Action<string> {
-  selectedServer: SelectedServer;
-}
-
 const versionToSemVer = pipe(
   (version: string) => (version === LATEST_VERSION_CONSTRAINT ? MAX_FALLBACK_VERSION : version),
   toSemVer(MIN_FALLBACK_VERSION),
 );
 
 const getServerVersion = memoizeWith(
-  identity,
-  async (_serverId: string, health: () => Promise<ShlinkHealth>) => health().then(({ version }) => ({
+  (server: ServerWithId) => `${server.id}_${server.url}_${server.apiKey}`,
+  async (_server: ServerWithId, health: () => Promise<ShlinkHealth>) => health().then(({ version }) => ({
     version: versionToSemVer(version),
     printableVersion: versionToPrintable(version),
   })),
@@ -33,53 +29,59 @@ const getServerVersion = memoizeWith(
 
 const initialState: SelectedServer = null;
 
-export default buildReducer<SelectedServer, SelectServerAction>({
-  [RESET_SELECTED_SERVER]: () => initialState,
-  [SELECT_SERVER]: (_, { selectedServer }) => selectedServer,
-}, initialState);
+export const resetSelectedServer = createAction<void>(`${REDUCER_PREFIX}/resetSelectedServer`);
 
-export const resetSelectedServer = buildActionCreator(RESET_SELECTED_SERVER);
+export const selectServer = (buildShlinkApiClient: ShlinkApiClientBuilder) => createAsyncThunk(
+  `${REDUCER_PREFIX}/selectServer`,
+  async (serverId: string, { dispatch, getState }): Promise<SelectedServer> => {
+    dispatch(resetSelectedServer());
 
-export const selectServer = (
-  buildShlinkApiClient: ShlinkApiClientBuilder,
-  loadMercureInfo: () => Action,
-) => (
-  serverId: string,
-) => async (
-  dispatch: Dispatch,
-  getState: GetState,
-) => {
-  dispatch(resetSelectedServer());
+    const { servers } = getState();
+    const selectedServer = servers[serverId];
 
-  const { servers } = getState();
-  const selectedServer = servers[serverId];
+    if (!selectedServer) {
+      return { serverNotFound: true };
+    }
 
-  if (!selectedServer) {
-    dispatch<SelectServerAction>({
-      type: SELECT_SERVER,
-      selectedServer: { serverNotFound: true },
-    });
+    try {
+      const { health } = buildShlinkApiClient(selectedServer);
+      const { version, printableVersion } = await getServerVersion(selectedServer, health);
 
-    return;
-  }
-
-  try {
-    const { health } = buildShlinkApiClient(selectedServer);
-    const { version, printableVersion } = await getServerVersion(serverId, health);
-
-    dispatch<SelectServerAction>({
-      type: SELECT_SERVER,
-      selectedServer: {
+      return {
         ...selectedServer,
         version,
         printableVersion,
-      },
-    });
-    dispatch(loadMercureInfo());
-  } catch (e) {
-    dispatch<SelectServerAction>({
-      type: SELECT_SERVER,
-      selectedServer: { ...selectedServer, serverNotReachable: true },
-    });
-  }
+      };
+    } catch (e) {
+      return { ...selectedServer, serverNotReachable: true };
+    }
+  },
+);
+
+type SelectServerThunk = ReturnType<typeof selectServer>;
+
+export const selectServerListener = (
+  selectServerThunk: SelectServerThunk,
+  loadMercureInfo: () => PayloadAction<any>, // TODO Consider setting actual type, if relevant
+) => {
+  const listener = createListenerMiddleware();
+
+  listener.startListening({
+    actionCreator: selectServerThunk.fulfilled,
+    effect: ({ payload }, { dispatch }) => {
+      isReachableServer(payload) && dispatch(loadMercureInfo());
+    },
+  });
+
+  return listener;
 };
+
+export const selectedServerReducerCreator = (selectServerThunk: SelectServerThunk) => createSlice({
+  name: REDUCER_PREFIX,
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(resetSelectedServer, () => initialState);
+    builder.addCase(selectServerThunk.fulfilled, (_, { payload }) => payload as any);
+  },
+});

src/servers/reducers/servers.ts

@@ -1,23 +1,15 @@
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
 import { assoc, dissoc, fromPairs, map, pipe, reduce, toPairs } from 'ramda';
 import { v4 as uuid } from 'uuid';
-import { Action } from 'redux';
-import { ServerData, ServersMap, ServerWithId } from '../data';
-import { buildReducer } from '../../utils/helpers/redux';
+import type { ServerData, ServersMap, ServerWithId } from '../data';
 
-export const EDIT_SERVER = 'shlink/servers/EDIT_SERVER';
-export const DELETE_SERVER = 'shlink/servers/DELETE_SERVER';
-export const CREATE_SERVERS = 'shlink/servers/CREATE_SERVERS';
-export const SET_AUTO_CONNECT = 'shlink/servers/SET_AUTO_CONNECT';
-
-export interface CreateServersAction extends Action<string> {
-  newServers: ServersMap;
-}
-
-interface DeleteServerAction extends Action<string> {
+interface EditServer {
   serverId: string;
+  serverData: Partial<ServerData>;
 }
 
-interface SetAutoConnectAction extends Action<string> {
+interface SetAutoConnect {
   serverId: string;
   autoConnect: boolean;
 }
@@ -32,50 +24,57 @@ const serverWithId = (server: ServerWithId | ServerData): ServerWithId => {
   return assoc('id', uuid(), server);
 };
 
-export default buildReducer<ServersMap, CreateServersAction & DeleteServerAction & SetAutoConnectAction>({
-  [CREATE_SERVERS]: (state, { newServers }) => ({ ...state, ...newServers }),
-  [DELETE_SERVER]: (state, { serverId }) => dissoc(serverId, state),
-  [EDIT_SERVER]: (state, { serverId, serverData }: any) => (
-    !state[serverId] ? state : assoc(serverId, { ...state[serverId], ...serverData }, state)
-  ),
-  [SET_AUTO_CONNECT]: (state, { serverId, autoConnect }) => {
-    if (!state[serverId]) {
-      return state;
-    }
-
-    if (!autoConnect) {
-      return assoc(serverId, { ...state[serverId], autoConnect }, state);
-    }
-
-    return fromPairs(
-      toPairs(state).map(([evaluatedServerId, server]) => [
-        evaluatedServerId,
-        { ...server, autoConnect: evaluatedServerId === serverId },
-      ]),
-    );
-  },
-}, initialState);
-
 const serversListToMap = reduce<ServerWithId, ServersMap>((acc, server) => assoc(server.id, server, acc), {});
 
-export const createServers = pipe(
-  map(serverWithId),
-  serversListToMap,
-  (newServers: ServersMap) => ({ type: CREATE_SERVERS, newServers }),
-);
+export const { actions, reducer } = createSlice({
+  name: 'shlink/servers',
+  initialState,
+  reducers: {
+    editServer: {
+      prepare: (serverId: string, serverData: Partial<ServerData>) => ({
+        payload: { serverId, serverData },
+      }),
+      reducer: (state, { payload }: PayloadAction<EditServer>) => {
+        const { serverId, serverData } = payload;
+        return (
+          !state[serverId] ? state : assoc(serverId, { ...state[serverId], ...serverData }, state)
+        );
+      },
+    },
+    deleteServer: (state, { payload }) => dissoc(payload.id, state),
+    setAutoConnect: {
+      prepare: ({ id: serverId }: ServerWithId, autoConnect: boolean) => ({
+        payload: { serverId, autoConnect },
+      }),
+      reducer: (state, { payload }: PayloadAction<SetAutoConnect>) => {
+        const { serverId, autoConnect } = payload;
+        if (!state[serverId]) {
+          return state;
+        }
 
-export const createServer = (server: ServerWithId) => createServers([server]);
+        if (!autoConnect) {
+          return assoc(serverId, { ...state[serverId], autoConnect }, state);
+        }
 
-export const editServer = (serverId: string, serverData: Partial<ServerData>) => ({
-  type: EDIT_SERVER,
-  serverId,
-  serverData,
+        return fromPairs(
+          toPairs(state).map(([evaluatedServerId, server]) => [
+            evaluatedServerId,
+            { ...server, autoConnect: evaluatedServerId === serverId },
+          ]),
+        );
+      },
+    },
+    createServers: {
+      prepare: pipe(
+        map(serverWithId),
+        serversListToMap,
+        (payload: ServersMap) => ({ payload }),
+      ),
+      reducer: (state, { payload: newServers }: PayloadAction<ServersMap>) => ({ ...state, ...newServers }),
+    },
+  },
 });
 
-export const deleteServer = ({ id }: ServerWithId): DeleteServerAction => ({ type: DELETE_SERVER, serverId: id });
+export const { editServer, deleteServer, setAutoConnect, createServers } = actions;
 
-export const setAutoConnect = ({ id }: ServerWithId, autoConnect: boolean): SetAutoConnectAction => ({
-  type: SET_AUTO_CONNECT,
-  serverId: id,
-  autoConnect,
-});
+export const serversReducer = reducer;

src/servers/services/ServersExporter.ts

@@ -1,12 +1,13 @@
 import { values } from 'ramda';
-import { LocalStorage } from '../../utils/services/LocalStorage';
-import { ServersMap, serverWithIdToServerData } from '../data';
+import type { JsonToCsv } from '../../utils/helpers/csvjson';
 import { saveCsv } from '../../utils/helpers/files';
-import { JsonToCsv } from '../../utils/helpers/csvjson';
+import type { LocalStorage } from '../../utils/services/LocalStorage';
+import type { ServersMap } from '../data';
+import { serverWithIdToServerData } from '../data';
 
 const SERVERS_FILENAME = 'shlink-servers.csv';
 
-export default class ServersExporter {
+export class ServersExporter {
   public constructor(
     private readonly storage: LocalStorage,
     private readonly window: Window,

src/servers/services/ServersImporter.ts

@@ -1,5 +1,5 @@
-import { ServerData } from '../data';
-import { CsvToJson } from '../../utils/helpers/csvjson';
+import type { CsvToJson } from '../../utils/helpers/csvjson';
+import type { ServerData } from '../data';
 
 const validateServer = (server: any): server is ServerData =>
   typeof server.url === 'string' && typeof server.apiKey === 'string' && typeof server.name === 'string';

src/servers/services/provideServices.ts

@@ -1,24 +1,30 @@
-import Bottle from 'bottlejs';
+import type Bottle from 'bottlejs';
+import { prop } from 'ramda';
+import type { ConnectDecorator } from '../../container/types';
 import { CreateServer } from '../CreateServer';
-import { ServersDropdown } from '../ServersDropdown';
-import { DeleteServerModal } from '../DeleteServerModal';
 import { DeleteServerButton } from '../DeleteServerButton';
+import { DeleteServerModal } from '../DeleteServerModal';
 import { EditServer } from '../EditServer';
 import { ImportServersBtn } from '../helpers/ImportServersBtn';
-import { resetSelectedServer, selectServer } from '../reducers/selectedServer';
-import { createServer, createServers, deleteServer, editServer, setAutoConnect } from '../reducers/servers';
-import { fetchServers } from '../reducers/remoteServers';
 import { ServerError } from '../helpers/ServerError';
-import { ConnectDecorator } from '../../container/types';
 import { withoutSelectedServer } from '../helpers/withoutSelectedServer';
-import { Overview } from '../Overview';
 import { ManageServers } from '../ManageServers';
 import { ManageServersRow } from '../ManageServersRow';
 import { ManageServersRowDropdown } from '../ManageServersRowDropdown';
+import { Overview } from '../Overview';
+import { fetchServers } from '../reducers/remoteServers';
+import {
+  resetSelectedServer,
+  selectedServerReducerCreator,
+  selectServer,
+  selectServerListener,
+} from '../reducers/selectedServer';
+import { createServers, deleteServer, editServer, setAutoConnect } from '../reducers/servers';
+import { ServersDropdown } from '../ServersDropdown';
+import { ServersExporter } from './ServersExporter';
 import { ServersImporter } from './ServersImporter';
-import ServersExporter from './ServersExporter';
 
-const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
+export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
   bottle.serviceFactory(
     'ManageServers',
@@ -38,7 +44,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
 
   bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'useTimeoutToggle');
   bottle.decorator('CreateServer', withoutSelectedServer);
-  bottle.decorator('CreateServer', connect(['selectedServer', 'servers'], ['createServer', 'resetSelectedServer']));
+  bottle.decorator('CreateServer', connect(['selectedServer', 'servers'], ['createServers', 'resetSelectedServer']));
 
   bottle.serviceFactory('EditServer', EditServer, 'ServerError');
   bottle.decorator('EditServer', connect(['selectedServer'], ['editServer', 'selectServer', 'resetSelectedServer']));
@@ -59,7 +65,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
 
   bottle.serviceFactory('Overview', Overview, 'ShortUrlsTable', 'CreateShortUrl');
   bottle.decorator('Overview', connect(
-    ['shortUrlsList', 'tagsList', 'selectedServer', 'mercureInfo', 'visitsOverview'],
+    ['shortUrlsList', 'tagsList', 'selectedServer', 'mercureInfo', 'visitsOverview', 'settings'],
     ['listShortUrls', 'listTags', 'createNewVisits', 'loadMercureInfo', 'loadVisitsOverview'],
   ));
 
@@ -70,14 +76,16 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
 
   // Actions
   bottle.serviceFactory('selectServer', selectServer, 'buildShlinkApiClient', 'loadMercureInfo');
-  bottle.serviceFactory('createServer', () => createServer);
   bottle.serviceFactory('createServers', () => createServers);
   bottle.serviceFactory('deleteServer', () => deleteServer);
   bottle.serviceFactory('editServer', () => editServer);
   bottle.serviceFactory('setAutoConnect', () => setAutoConnect);
-  bottle.serviceFactory('fetchServers', fetchServers, 'axios');
+  bottle.serviceFactory('fetchServers', fetchServers, 'HttpClient');
 
   bottle.serviceFactory('resetSelectedServer', () => resetSelectedServer);
-};
 
-export default provideServices;
+  // Reducers
+  bottle.serviceFactory('selectServerListener', selectServerListener, 'selectServer', 'loadMercureInfo');
+  bottle.serviceFactory('selectedServerReducerCreator', selectedServerReducerCreator, 'selectServer');
+  bottle.serviceFactory('selectedServerReducer', prop('reducer'), 'selectedServerReducerCreator');
+};

src/service-worker.ts

@@ -12,12 +12,13 @@ import { ExpirationPlugin } from 'workbox-expiration';
 import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
 import { registerRoute } from 'workbox-routing';
 import { StaleWhileRevalidate } from 'workbox-strategies';
+import pack from '../package.json';
 
 declare const self: ServiceWorkerGlobalScope;
 
 clientsClaim();
 
-// Precache all of the assets generated by your build process.
+// Precache all the assets generated by your build process.
 // Their URLs are injected into the manifest variable below.
 // This variable must be present somewhere in your service worker file,
 // even if you decide not to use precaching. See https://cra.link/PWA
@@ -49,7 +50,7 @@ registerRoute(
     // Return true to signal that we want to use the handler.
     return true;
   },
-  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
+  createHandlerBoundToURL(`${pack.homepage}/index.html`)
 );
 
 // An example runtime caching route for requests that aren't handled by the