Merge pull request #820 from shlinkio/develop

Release 3.10.0

.dockerignore

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

.github/workflows/ci.yml

@@ -11,6 +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: 18.12
       publish-coverage: true
+      force-install: true

.github/workflows/deploy-preview.yml

@@ -16,12 +16,11 @@ jobs:
       - name: Use node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 16.15
+          node-version: 18.12
       - name: Build
         run: |
-          npm ci && \
+          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,4 +1,4 @@
-name: Build docker image
+name: Build and publish docker image
 
 on:
   push:
@@ -9,20 +9,8 @@ on:
 
 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

.github/workflows/publish-release.yml

@@ -14,9 +14,9 @@ jobs:
       - name: Use node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 16.15
+          node-version: 18.12
       - name: Generate release assets
-        run: npm ci && VERSION=${GITHUB_REF#refs/tags/v} npm run build:dist
+        run: npm ci --force && VERSION=${GITHUB_REF#refs/tags/v} npm run build:dist
       - name: Publish release with assets
         uses: docker://antonyurchenko/git-release:latest
         env:

.gitignore

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

CHANGELOG.md

@@ -4,12 +4,19 @@ 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.7.1] - 2022-05-25
+## [3.10.0] - 2023-03-19
 ### Added
-* *Nothing*
+* [#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
-* [#648](https://github.com/shlinkio/shlink-web-client/pull/648) Migrated some scripts to ESM and updated to chalk 5.
+* [#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*
@@ -18,30 +25,186 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * *Nothing*
 
 ### Fixed
-* [#653](https://github.com/shlinkio/shlink-web-client/pull/653) Fixed rendering values greater than 1000 in charts, when the browser has certain locales configured.
+* [#799](https://github.com/shlinkio/shlink-web-client/issues/799) Fix fallback visits not taking into account configuration regarding excluding bots.
 
 
-## [3.7.0] - 2022-05-14
+## [3.9.1] - 2022-12-31
 ### Added
-* [#622](https://github.com/shlinkio/shlink-web-client/pull/622) Added support to load domain visits when consuming Shlink 3.1.0 or newer.
-* [#582](https://github.com/shlinkio/shlink-web-client/pull/582) Improved filtering short URLs by tag.
-
-  Now, a new full tags selector component is available, which allows selecting any of the existing tags and also composes a toggle to filter by "any" tag or "all" tags.
+* *Nothing*
 
 ### Changed
-* [#616](https://github.com/shlinkio/shlink-web-client/pull/616) Updated to React 18.
-* [#595](https://github.com/shlinkio/shlink-web-client/pull/595) Updated to react-chartjs-2 v4.1.0.
-* [#594](https://github.com/shlinkio/shlink-web-client/pull/594) Updated to a new coding standard.
-* [#627](https://github.com/shlinkio/shlink-web-client/pull/627) Updated to Jest 28.
-* [#603](https://github.com/shlinkio/shlink-web-client/pull/603) Migrated to new and maintained dependencies to parse CSV<->JSON.
-* [#610](https://github.com/shlinkio/shlink-web-client/pull/610) Migrated to a maintained coding style for CSS.
-* [#619](https://github.com/shlinkio/shlink-web-client/pull/619) Introduced react testing library, to progressively replace enzyme.
+* *Nothing*
 
 ### Deprecated
 * *Nothing*
 
 ### Removed
-* [#623](https://github.com/shlinkio/shlink-web-client/pull/623) Dropped support for Shlink older than 2.6.0.
+* *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.
+
+### Changed
+* [#688](https://github.com/shlinkio/shlink-web-client/issues/688) Finalized migration from enzyme to react-testing-library.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#695](https://github.com/shlinkio/shlink-web-client/issues/695) Fixed some warnings in tests.
+* [#693](https://github.com/shlinkio/shlink-web-client/issues/693) Fixed tags, servers and domains search to make it case-insensitive.
+* [#694](https://github.com/shlinkio/shlink-web-client/issues/694) Fixed editing and loading visits on short URLs with multi-segment slugs.
+
+
+## [3.7.1] - 2022-05-25
+### Added
+* *Nothing*
+
+### Changed
+* [#648](https://github.com/shlinkio/shlink-web-client/issues/648) Migrated some scripts to ESM and updated to chalk 5.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#653](https://github.com/shlinkio/shlink-web-client/issues/653) Fixed rendering values greater than 1000 in charts, when the browser has certain locales configured.
+
+
+## [3.7.0] - 2022-05-14
+### Added
+* [#622](https://github.com/shlinkio/shlink-web-client/issues/622) Added support to load domain visits when consuming Shlink 3.1.0 or newer.
+* [#582](https://github.com/shlinkio/shlink-web-client/issues/582) Improved filtering short URLs by tag.
+
+  Now, a new full tags selector component is available, which allows selecting any of the existing tags and also composes a toggle to filter by "any" tag or "all" tags.
+
+### Changed
+* [#616](https://github.com/shlinkio/shlink-web-client/issues/616) Updated to React 18.
+* [#595](https://github.com/shlinkio/shlink-web-client/issues/595) Updated to react-chartjs-2 v4.1.0.
+* [#594](https://github.com/shlinkio/shlink-web-client/issues/594) Updated to a new coding standard.
+* [#627](https://github.com/shlinkio/shlink-web-client/issues/627) Updated to Jest 28.
+* [#603](https://github.com/shlinkio/shlink-web-client/issues/603) Migrated to new and maintained dependencies to parse CSV<->JSON.
+* [#610](https://github.com/shlinkio/shlink-web-client/issues/610) Migrated to a maintained coding style for CSS.
+* [#619](https://github.com/shlinkio/shlink-web-client/issues/619) Introduced react testing library, to progressively replace enzyme.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* [#623](https://github.com/shlinkio/shlink-web-client/issues/623) Dropped support for Shlink older than 2.6.0.
 
 ### Fixed
 * *Nothing*
@@ -49,19 +212,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [3.6.0] - 2022-03-17
 ### Added
-* [#558](https://github.com/shlinkio/shlink-web-client/pull/558) Added dark text for tags where the generated background is too light, improving its legibility.
-* [#570](https://github.com/shlinkio/shlink-web-client/pull/570) Added new section to load non-orphan visits all together when consuming Shlink 3.0.0.
-* [#556](https://github.com/shlinkio/shlink-web-client/pull/556) Added support to filter short URLs list by "all" tags when consuming Shlink 3.0.0.
-* [#549](https://github.com/shlinkio/shlink-web-client/pull/549) Allowed to export the list of short URLs as CSV.
+* [#558](https://github.com/shlinkio/shlink-web-client/issues/558) Added dark text for tags where the generated background is too light, improving its legibility.
+* [#570](https://github.com/shlinkio/shlink-web-client/issues/570) Added new section to load non-orphan visits all together when consuming Shlink 3.0.0.
+* [#556](https://github.com/shlinkio/shlink-web-client/issues/556) Added support to filter short URLs list by "all" tags when consuming Shlink 3.0.0.
+* [#549](https://github.com/shlinkio/shlink-web-client/issues/549) Allowed to export the list of short URLs as CSV.
 
 ### Changed
-* [#543](https://github.com/shlinkio/shlink-web-client/pull/543) Redesigned settings section.
-* [#567](https://github.com/shlinkio/shlink-web-client/pull/567) Improved Shlink 3.0.0 compatibility by checking the `INVALID_SHORT_URL_DELETION` error code when deleting short URLs.
-* [#448](https://github.com/shlinkio/shlink-web-client/pull/448) Updated to bootstrap v5.
-* [#524](https://github.com/shlinkio/shlink-web-client/pull/524) Updated to react-router v6.
-* [#576](https://github.com/shlinkio/shlink-web-client/pull/576) Updated to fontawesome v6.
-* [#579](https://github.com/shlinkio/shlink-web-client/pull/579) Replaced react-color with react-colorful.
-* [#564](https://github.com/shlinkio/shlink-web-client/pull/564) Updated most of the dependencies.
+* [#543](https://github.com/shlinkio/shlink-web-client/issues/543) Redesigned settings section.
+* [#567](https://github.com/shlinkio/shlink-web-client/issues/567) Improved Shlink 3.0.0 compatibility by checking the `INVALID_SHORT_URL_DELETION` error code when deleting short URLs.
+* [#448](https://github.com/shlinkio/shlink-web-client/issues/448) Updated to bootstrap v5.
+* [#524](https://github.com/shlinkio/shlink-web-client/issues/524) Updated to react-router v6.
+* [#576](https://github.com/shlinkio/shlink-web-client/issues/576) Updated to fontawesome v6.
+* [#579](https://github.com/shlinkio/shlink-web-client/issues/579) Replaced react-color with react-colorful.
+* [#564](https://github.com/shlinkio/shlink-web-client/issues/564) Updated most of the dependencies.
 
 ### Deprecated
 * *Nothing*
@@ -70,7 +233,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * *Nothing*
 
 ### Fixed
-* [#589](https://github.com/shlinkio/shlink-web-client/pull/589) Fixed alignment of shlink versions footer, by basing the logic on the presence of the sidebar instead of selected server.
+* [#589](https://github.com/shlinkio/shlink-web-client/issues/589) Fixed alignment of shlink versions footer, by basing the logic on the presence of the sidebar instead of selected server.
 
 
 ## [3.5.1] - 2022-01-08
@@ -94,27 +257,27 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [3.5.0] - 2022-01-01
 ### Added
-* [#407](https://github.com/shlinkio/shlink-web-client/pull/407) Improved how visits (short URLs, tags and orphan) are loaded, to avoid ending up in a page with "There are no visits matching current filter".
+* [#407](https://github.com/shlinkio/shlink-web-client/issues/407) Improved how visits (short URLs, tags and orphan) are loaded, to avoid ending up in a page with "There are no visits matching current filter".
 
     Now, the app will try to load visits for the configured default interval, and in parallel, it will load the latest visit.
 
     If the resulting list for that interval is empty, it will try to infer the closest interval with visits, based on the latest visit's date, and reload visits for that interval.
 
-* [#547](https://github.com/shlinkio/shlink-web-client/pull/547) Improved domains page, to tell which of the domains are not properly configured.
+* [#547](https://github.com/shlinkio/shlink-web-client/issues/547) Improved domains page, to tell which of the domains are not properly configured.
 
     Now, when this section is loaded, it tries to call the `GET /rest/health` endpoint for each one of the domains, and displays a warning icon on each one that failed.
 
     The warning includes a link to the documentation, explaining what are the steps to get it fixed.
 
-* [#506](https://github.com/shlinkio/shlink-web-client/pull/506) Improved how servers are handled, displaying a warning when creating or importing servers that already exist.
-* [#535](https://github.com/shlinkio/shlink-web-client/pull/535) Allowed editing default domain redirects when consuming Shlink 2.10 or newer.
-* [#531](https://github.com/shlinkio/shlink-web-client/pull/531) Added custom slug field to the basic creation form in the Overview page.
-* [#537](https://github.com/shlinkio/shlink-web-client/pull/537) Allowed to customize the ordering for every list in the app that supports it, being currently tags and short URLs.
-* [#542](https://github.com/shlinkio/shlink-web-client/pull/542) Added ordering for short URLs to the query, so that it is consistent with the rest of the filtering params.
+* [#506](https://github.com/shlinkio/shlink-web-client/issues/506) Improved how servers are handled, displaying a warning when creating or importing servers that already exist.
+* [#535](https://github.com/shlinkio/shlink-web-client/issues/535) Allowed editing default domain redirects when consuming Shlink 2.10 or newer.
+* [#531](https://github.com/shlinkio/shlink-web-client/issues/531) Added custom slug field to the basic creation form in the Overview page.
+* [#537](https://github.com/shlinkio/shlink-web-client/issues/537) Allowed to customize the ordering for every list in the app that supports it, being currently tags and short URLs.
+* [#542](https://github.com/shlinkio/shlink-web-client/issues/542) Added ordering for short URLs to the query, so that it is consistent with the rest of the filtering params.
 
 ### Changed
-* [#534](https://github.com/shlinkio/shlink-web-client/pull/534) Updated axios.
-* [#538](https://github.com/shlinkio/shlink-web-client/pull/538) Switched to the `<field>-<dir>` notation in `orderBy` param for short URLs list, in preparation for Shlink v3.0.0
+* [#534](https://github.com/shlinkio/shlink-web-client/issues/534) Updated axios.
+* [#538](https://github.com/shlinkio/shlink-web-client/issues/538) Switched to the `<field>-<dir>` notation in `orderBy` param for short URLs list, in preparation for Shlink v3.0.0
 
 ### Deprecated
 * *Nothing*

Dockerfile

@@ -1,10 +1,10 @@
-FROM node:16.15-alpine as node
+FROM node:18.12-alpine as node
 COPY . /shlink-web-client
 ARG VERSION="latest"
 ENV VERSION ${VERSION}
-RUN cd /shlink-web-client && npm ci && 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 +1,9 @@
 module.exports = {
   presets: [
-    [
-      'react-app',
-      {
-        runtime: 'automatic',
-        typescript: true,
-      },
-    ],
+    ['@babel/preset-env', {
+      targets: { esmodules: true }
+    }],
+    ['@babel/preset-react', { runtime: 'automatic' }],
+    '@babel/preset-typescript',
   ],
 };

config/jest/setupBeforeEnzyme.js

@@ -1,4 +0,0 @@
-import * as util from 'util';
-
-global.TextEncoder = util.TextEncoder;
-global.TextDecoder = util.TextDecoder;

config/jest/setupEnzyme.js

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

config/jest/setupTests.ts

@@ -1,7 +1,12 @@
 import '@testing-library/jest-dom';
 import 'jest-canvas-mock';
+import 'chart.js/auto';
 import ResizeObserver from 'resize-observer-polyfill';
+import { setAutoFreeze } from 'immer';
 
 (global as any).ResizeObserver = ResizeObserver;
 (global as any).scrollTo = () => {};
+(global as any).prompt = () => {};
 (global as any).matchMedia = (media: string) => ({ matches: false, media });
+
+setAutoFreeze(false); // TODO Bypassing a bug on jest

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:18.12-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

@@ -10,12 +10,11 @@ module.exports = {
   coverageThreshold: {
     global: {
       statements: 90,
-      branches: 80,
-      functions: 85,
+      branches: 85,
+      functions: 90,
       lines: 90,
     },
   },
-  setupFiles: ['<rootDir>/config/jest/setupBeforeEnzyme.js', '<rootDir>/config/jest/setupEnzyme.js'],
   setupFilesAfterEnv: ['<rootDir>/config/jest/setupTests.ts'],
   testMatch: ['<rootDir>/test/**/*.test.{ts,tsx}'],
   testEnvironment: 'jsdom',
@@ -28,7 +27,6 @@ module.exports = {
     '^(?!.*\\.(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$',
   ],

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,101 +12,99 @@
     "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 --verbose",
+    "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",
-    "mutate": "./node_modules/.bin/stryker run --concurrency 4 --ignoreStatic"
+    "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",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.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-copy-to-clipboard": "^5.0.4",
-    "react-datepicker": "^4.7.0",
-    "react-dom": "^18.1.0",
+    "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.2.0",
     "react-external-link": "^2.0.0",
-    "react-leaflet": "^4.0.0",
-    "react-redux": "^8.0.0",
-    "react-router-dom": "^6.3.0",
-    "react-swipeable": "^6.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",
+    "reactstrap": "^9.1.5",
     "redux": "^4.2.0",
-    "redux-localstorage-simple": "^2.4.1",
-    "redux-thunk": "^2.4.1",
-    "stream": "^0.0.2",
+    "redux-localstorage-simple": "^2.5.1",
+    "redux-thunk": "^2.4.2",
     "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/enzyme": "^3.10.11",
-    "@types/jest": "^27.4.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.4",
     "@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",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.6.5",
-    "adm-zip": "^0.5.9",
-    "babel-jest": "^28.0.3",
-    "chalk": "^5.0.1",
-    "enzyme": "^3.11.0",
-    "eslint": "^8.12.0",
+    "@vitejs/plugin-react": "^3.1.0",
+    "adm-zip": "^0.5.10",
+    "babel-jest": "^29.5.0",
+    "chalk": "^5.2.0",
+    "eslint": "^8.30.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.0.3",
+    "jest": "^29.3.1",
     "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^28.0.2",
-    "react-scripts": "^5.0.1",
+    "jest-environment-jsdom": "^29.3.1",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.49.9",
-    "serve": "^13.0.2",
-    "stryker-cli": "^1.0.2",
-    "stylelint": "^14.8.2",
+    "sass": "^1.57.1",
+    "stylelint": "^14.16.0",
     "ts-mockery": "^1.2.0",
-    "typescript": "^4.6.2",
-    "webpack": "^5.70.0"
+    "typescript": "^5.0.2",
+    "vite": "^4.2.0",
+    "vite-plugin-pwa": "^0.14.4"
   },
   "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;
+const normalizeListParams = (
+  { orderBy = {}, excludeMaxVisitsReached, excludePastValidUntil, ...rest }: ShlinkShortUrlsListParams,
+): ShlinkShortUrlsListNormalizedParams => ({
+  ...rest,
+  excludeMaxVisitsReached: excludeMaxVisitsReached === true ? 'true' : undefined,
+  excludePastValidUntil: excludePastValidUntil === true ? 'true' : undefined,
+  orderBy: orderToString(orderBy),
+});
 
-  return { ...rest, orderBy: orderToString(orderBy) };
-};
+export class ShlinkApiClient {
+  private apiVersion: 2 | 3;
 
-export default class ShlinkApiClient {
   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,36 +1,33 @@
-import { AxiosInstance } from 'axios';
-import { prop } from 'ramda';
-import { hasServerData, SelectedServer, ServerWithId } from '../../servers/data';
-import { GetState } from '../../container/types';
-import ShlinkApiClient from './ShlinkApiClient';
+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;
-
-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 default buildShlinkApiClient;
+export type ShlinkApiClientBuilder = ReturnType<typeof buildShlinkApiClient>;

src/api/services/provideServices.ts

@@ -1,8 +1,6 @@
-import Bottle from 'bottlejs';
-import buildShlinkApiClient from './ShlinkApiClientBuilder';
+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 }) => (
@@ -34,13 +36,12 @@ const AsideMenuItem: FC<AsideMenuItemProps> = ({ children, to, className, ...res
   </NavLink>
 );
 
-const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
+export const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
   { selectedServer, showOnMobile = false }: AsideMenuProps,
 ) => {
   const hasId = isServerWithId(selectedServer);
   const serverId = hasId ? selectedServer.id : '';
   const { pathname } = useLocation();
-  const addManageDomainsLink = supportsDomainRedirects(selectedServer);
   const asideClass = classNames('aside-menu', {
     'aside-menu--hidden': !showOnMobile,
   });
@@ -68,12 +69,10 @@ 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>
@@ -89,5 +88,3 @@ const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
     </aside>
   );
 };
-
-export default AsideMenu;

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 ServersListGroup from '../servers/ServersListGroup';
-import { ServersMap } from '../servers/data';
+import type { ServersMap } from '../servers/data';
+import { ServersListGroup } from '../servers/ServersListGroup';
 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);
@@ -17,7 +18,7 @@ const VersionLink = ({ project, version }: { project: 'shlink' | 'shlink-web-cli
   </ExternalLink>
 );
 
-const ShlinkVersions = ({ selectedServer, clientVersion = SHLINK_WEB_CLIENT_VERSION }: ShlinkVersionsProps) => {
+export const ShlinkVersions = ({ selectedServer, clientVersion = SHLINK_WEB_CLIENT_VERSION }: ShlinkVersionsProps) => {
   const normalizedClientVersion = normalizeVersion(clientVersion);
 
   return (
@@ -29,5 +30,3 @@ const ShlinkVersions = ({ selectedServer, clientVersion = SHLINK_WEB_CLIENT_VERS
     </small>
   );
 };
-
-export default ShlinkVersions;

src/common/ShlinkVersionsContainer.tsx

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

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

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 AsideMenu from '../AsideMenu';
-import { ErrorHandler } from '../ErrorHandler';
-import ShlinkVersionsContainer from '../ShlinkVersionsContainer';
-import { ConnectDecorator } from '../../container/types';
+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 { 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 Message from '../utils/Message';
-import { Result } from '../utils/Result';
+import type { FC } from 'react';
+import { useEffect } from 'react';
 import { ShlinkApiError } from '../api/ShlinkApiError';
-import { SimpleCard } from '../utils/SimpleCard';
+import type { SelectedServer } from '../servers/data';
+import { Message } from '../utils/Message';
+import { Result } from '../utils/Result';
 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,20 +1,21 @@
-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 { useToggle } from '../../utils/helpers/hooks';
+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 { 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 { useFeature } from '../../utils/helpers/features';
+import { useToggle } from '../../utils/helpers/hooks';
 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;
 }
 
@@ -22,8 +23,8 @@ export const DomainDropdown: FC<DomainDropdownProps> = ({ domain, editDomainRedi
   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 (

src/domains/helpers/DomainStatusIcon.tsx

@@ -1,14 +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 { 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;
@@ -16,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());
 
@@ -34,17 +36,13 @@ export const DomainStatusIcon: FC<DomainStatusIconProps> = ({ status, matchMedia
 
   return (
     <>
-      <span
-        ref={(el: HTMLSpanElement) => {
-          ref.current = el;
-        }}
-      >
+      <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)),
-  }),
-  [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';
 
@@ -13,6 +14,7 @@
 
 :root {
   scroll-behavior: auto;
+  color-scheme: var(--color-scheme);
 }
 
 html,
@@ -38,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 {
@@ -217,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 { StateFlagTimeout, 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;
 }
 
@@ -26,14 +28,14 @@ const ImportResult = ({ type }: { type: 'error' | 'success' }) => (
   </div>
 );
 
-const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagTimeout: StateFlagTimeout) => (
-  { servers, createServer }: CreateServerProps,
+export const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useTimeoutToggle: TimeoutToggle) => (
+  { servers, createServers }: CreateServerProps,
 ) => {
   const navigate = useNavigate();
   const goBack = useGoBack();
   const hasServers = !!Object.keys(servers).length;
-  const [serversImported, setServersImported] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
-  const [errorImporting, setErrorImporting] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
+  const [serversImported, setServersImported] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
+  const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
   const [isConfirmModalOpen, toggleConfirmModal] = useToggle();
   const [serverData, setServerData] = useState<ServerData | undefined>();
   const save = () => {
@@ -43,7 +45,7 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
 
     const id = uuid();
 
-    createServer({ ...serverData, id });
+    createServers([{ ...serverData, id }]);
     navigate(`/server/${id}`);
   };
 
@@ -77,5 +79,3 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
     </NoMenuLayout>
   );
 };
-
-export default CreateServer;

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;
@@ -11,7 +11,7 @@ export type DeleteServerButtonProps = PropsWithChildren<{
   textClassName?: string;
 }>;
 
-const DeleteServerButton = (DeleteServerModal: FC<DeleteServerModalProps>): FC<DeleteServerButtonProps> => (
+export const DeleteServerButton = (DeleteServerModal: FC<DeleteServerModalProps>): FC<DeleteServerButtonProps> => (
   { server, className, children, textClassName },
 ) => {
   const [isModalOpen, , showModal, hideModal] = useToggle();
@@ -27,5 +27,3 @@ const DeleteServerButton = (DeleteServerModal: FC<DeleteServerModalProps>): FC<D
     </>
   );
 };
-
-export default DeleteServerButton;

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;
@@ -14,19 +15,27 @@ interface DeleteServerModalConnectProps extends DeleteServerModalProps {
   deleteServer: (server: ServerWithId) => void;
 }
 
-const DeleteServerModal: FC<DeleteServerModalConnectProps> = (
+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>
-      <ModalHeader toggle={toggle}><span className="text-danger">Remove server</span></ModalHeader>
+    <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>
         <p>
@@ -38,10 +47,8 @@ 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>
   );
 };
-
-export default DeleteServerModal;

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 { StateFlagTimeout } 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;
@@ -22,16 +23,16 @@ const SHOW_IMPORT_MSG_TIME = 4000;
 export const ManageServers = (
   serversExporter: ServersExporter,
   ImportServersBtn: FC<ImportServersBtnProps>,
-  useStateFlagTimeout: StateFlagTimeout,
+  useTimeoutToggle: TimeoutToggle,
   ManageServersRow: FC<ManageServersRowProps>,
 ): FC<ManageServersProps> => ({ servers }) => {
   const allServers = Object.values(servers);
   const [serversList, setServersList] = useState(allServers);
   const filterServers = (searchTerm: string) => setServersList(
-    allServers.filter(({ name, url }) => `${name} ${url}`.match(searchTerm)),
+    allServers.filter(({ name, url }) => `${name} ${url}`.toLowerCase().match(searchTerm.toLowerCase())),
   );
   const hasAutoConnect = serversList.some(({ autoConnect }) => !!autoConnect);
-  const [errorImporting, setErrorImporting] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
+  const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
 
   useEffect(() => {
     setServersList(Object.values(servers));

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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { DropdownItem } from 'reactstrap';
 import { DropdownBtnMenu } from '../utils/DropdownBtnMenu';
 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 interface ManageServersRowDropdownProps {
   server: ServerWithId;
@@ -39,7 +39,7 @@ export const ManageServersRowDropdown = (
       <DropdownItem tag={Link} to={`${serverUrl}/edit`}>
         <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit server
       </DropdownItem>
-      <DropdownItem onClick={() => setAutoConnect(server, !server.autoConnect)}>
+      <DropdownItem onClick={() => setAutoConnect(server, !isAutoConnect)}>
         <FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
       </DropdownItem>
       <DropdownItem divider />

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<{
@@ -19,7 +19,7 @@ const ServerListItem = ({ id, name }: { id: string; name: string }) => (
   </ListGroupItem>
 );
 
-const ServersListGroup: FC<ServersListGroupProps> = ({ servers, children, embedded = false }) => (
+export const ServersListGroup: FC<ServersListGroupProps> = ({ servers, children, embedded = false }) => (
   <>
     {children && <h5 className="mb-md-3">{children}</h5>}
     {servers.length > 0 && (
@@ -31,5 +31,3 @@ const ServersListGroup: FC<ServersListGroupProps> = ({ servers, children, embedd
     )}
   </>
 );
-
-export default ServersListGroup;

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,16 +1,15 @@
-import { useRef, RefObject, ChangeEvent, MutableRefObject, 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 { 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';
 
-type Ref<T> = RefObject<T> | MutableRefObject<T>;
-
 export type ImportServersBtnProps = PropsWithChildren<{
   onImport?: () => void;
   onImportError?: (error: Error) => void;
@@ -21,23 +20,21 @@ export type ImportServersBtnProps = PropsWithChildren<{
 interface ImportServersBtnConnectProps extends ImportServersBtnProps {
   createServers: (servers: ServerData[]) => void;
   servers: ServersMap;
-  fileRef: Ref<HTMLInputElement>;
 }
 
 const serversFiltering = (servers: ServerData[]) =>
   ({ url, apiKey }: ServerData) => servers.some((server) => server.url === url && server.apiKey === apiKey);
 
-const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC<ImportServersBtnConnectProps> => ({
+export const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC<ImportServersBtnConnectProps> => ({
   createServers,
   servers,
-  fileRef,
   children,
   onImport = () => {},
   onImportError = () => {},
   tooltipPlacement = 'bottom',
   className = '',
 }) => {
-  const ref = fileRef ?? useRef<HTMLInputElement>();
+  const ref = useElementRef<HTMLInputElement>();
   const [serversToCreate, setServersToCreate] = useState<ServerData[] | undefined>();
   const [duplicatedServers, setDuplicatedServers] = useState<ServerData[]>([]);
   const [isModalOpen,, showModal, hideModal] = useToggle();
@@ -78,7 +75,13 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC<Import
         You can create servers by importing a CSV file with columns <b>name</b>, <b>apiKey</b> and <b>url</b>.
       </UncontrolledTooltip>
 
-      <input type="file" accept="text/csv" className="import-servers-btn__csv-select" ref={ref} onChange={onFile} />
+      <input
+        type="file"
+        accept="text/csv"
+        className="import-servers-btn__csv-select"
+        ref={ref}
+        onChange={onFile}
+      />
 
       <DuplicatedServersModal
         isOpen={isModalOpen}
@@ -89,5 +92,3 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC<Import
     </>
   );
 };
-
-export default ImportServersBtn;

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,31 +1,37 @@
-import Bottle from 'bottlejs';
-import CreateServer from '../CreateServer';
-import { ServersDropdown } from '../ServersDropdown';
-import DeleteServerModal from '../DeleteServerModal';
-import DeleteServerButton from '../DeleteServerButton';
+import type Bottle from 'bottlejs';
+import { prop } from 'ramda';
+import type { ConnectDecorator } from '../../container/types';
+import { CreateServer } from '../CreateServer';
+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 { ImportServersBtn } from '../helpers/ImportServersBtn';
 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',
     ManageServers,
     'ServersExporter',
     'ImportServersBtn',
-    'useStateFlagTimeout',
+    'useTimeoutToggle',
     'ManageServersRow',
   );
   bottle.decorator('ManageServers', withoutSelectedServer);
@@ -36,9 +42,9 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('ManageServersRowDropdown', ManageServersRowDropdown, 'DeleteServerModal');
   bottle.decorator('ManageServersRowDropdown', connect(null, ['setAutoConnect']));
 
-  bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'useStateFlagTimeout');
+  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

src/serviceWorkerRegistration.ts

@@ -9,6 +9,7 @@
 
 // To learn more about the benefits of this model and instructions on how to
 // opt-in, read https://cra.link/PWA
+import pack from'../package.json';
 
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||
@@ -26,7 +27,7 @@ type Config = {
 export function register(config?: Config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL ?? '', window.location.href);
+    const publicUrl = new URL(pack.homepage, window.location.href);
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to
@@ -35,7 +36,7 @@ export function register(config?: Config) {
     }
 
     window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      const swUrl = `${pack.homepage}/service-worker.js`;
 
       if (isLocalhost) {
         // This is running on localhost. Let's check if a service worker still exists or not.