Merge pull request #786 from shlinkio/develop

Release 3.9.0

.github/workflows/ci.yml

@@ -11,6 +11,7 @@ jobs:
   ci:
     uses: shlinkio/github-actions/.github/workflows/web-app-ci.yml@main
     with:
-      node-version: 16.15
+      node-version: 18.12
       with-mutation-tests: true
       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:

CHANGELOG.md

@@ -4,12 +4,37 @@ 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.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
-* [#648](https://github.com/shlinkio/shlink-web-client/pull/648) Migrated some scripts to ESM and updated to chalk 5.
+* *Nothing*
 
 ### Deprecated
 * *Nothing*
@@ -18,30 +43,127 @@ 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.
+* [#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.7.0] - 2022-05-14
+## [3.8.1] - 2022-12-06
 ### 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
+* [#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 +171,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 +192,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 +216,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)
+[![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).

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,8 +3,8 @@ 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:

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

@@ -15,9 +15,9 @@ module.exports = {
       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}'],
+  modulePathIgnorePatterns: ['<rootDir>/.stryker-tmp'],
   testEnvironment: 'jsdom',
   testEnvironmentOptions: {
     url: 'http://localhost',

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,103 @@
     "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",
+    "start": "vite serve --host=0.0.0.0",
+    "build": "tsc --noEmit && 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",
+    "test:verbose": "npm run test -- --verbose",
     "mutate": "./node_modules/.bin/stryker run --concurrency 4 --ignoreStatic"
   },
   "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.18.6",
+    "@fortawesome/fontawesome-free": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@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/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",
+    "@stryker-mutator/core": "^6.3.1",
+    "@stryker-mutator/jest-runner": "^6.3.1",
+    "@stryker-mutator/typescript-checker": "^6.3.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.0.0",
+    "adm-zip": "^0.5.10",
+    "babel-jest": "^29.3.1",
+    "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",
+    "sass": "^1.57.1",
+    "serve": "^14.1.2",
     "stryker-cli": "^1.0.2",
-    "stylelint": "^14.8.2",
+    "stylelint": "^14.16.0",
     "ts-mockery": "^1.2.0",
-    "typescript": "^4.6.2",
-    "webpack": "^5.70.0"
+    "typescript": "^4.9.4",
+    "vite": "^4.0.3",
+    "vite-plugin-pwa": "^0.14.0"
   },
   "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,5 +1,5 @@
-import { ProblemDetailsError } from './types';
 import { isInvalidArgumentError } from './utils';
+import { ProblemDetailsError } from './types/errors';
 
 export interface ShlinkApiErrorProps {
   errorData?: ProblemDetailsError;

src/api/services/ShlinkApiClient.ts

@@ -1,5 +1,4 @@
 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 {
@@ -18,111 +17,127 @@ import {
   ShlinkShortUrlsListParams,
   ShlinkShortUrlsListNormalizedParams,
 } from '../types';
-import { stringifyQuery } from '../../utils/helpers/query';
 import { orderToString } from '../../utils/helpers/ordering';
+import { isRegularNotFound, parseApiError } from '../utils';
+import { stringifyQuery } from '../../utils/helpers/query';
+import { HttpClient } from '../../common/services/HttpClient';
 
-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 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,32 @@
-import { AxiosInstance } from 'axios';
-import { prop } from 'ramda';
-import { hasServerData, SelectedServer, ServerWithId } from '../../servers/data';
+import { hasServerData, ServerWithId } from '../../servers/data';
 import { GetState } from '../../container/types';
-import ShlinkApiClient from './ShlinkApiClient';
+import { ShlinkApiClient } from './ShlinkApiClient';
+import { HttpClient } from '../../common/services/HttpClient';
 
 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,8 @@
 import Bottle from 'bottlejs';
-import buildShlinkApiClient from './ShlinkApiClientBuilder';
+import { buildShlinkApiClient } from './ShlinkApiClientBuilder';
 
 const provideServices = (bottle: Bottle) => {
-  bottle.serviceFactory('buildShlinkApiClient', buildShlinkApiClient, 'axios');
+  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 { ShortUrl, ShortUrlMeta } from '../../short-urls/data';
+import { Order } from '../../utils/helpers/ordering';
 
 export interface ShlinkShortUrlsResponse {
   data: ShortUrl[];
@@ -88,35 +89,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,24 @@
-import { AxiosError } from 'axios';
-import { InvalidArgumentError, InvalidShortUrlDeletion, ProblemDetailsError } from '../types';
+import {
+  ErrorTypeV2,
+  ErrorTypeV3,
+  InvalidArgumentError,
+  InvalidShortUrlDeletion,
+  ProblemDetailsError,
+  RegularNotFound,
+} 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/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/common/AsideMenu.tsx

@@ -12,7 +12,6 @@ import { NavLink, NavLinkProps, useLocation } from 'react-router-dom';
 import classNames from 'classnames';
 import { DeleteServerButtonProps } from '../servers/DeleteServerButton';
 import { isServerWithId, SelectedServer } from '../servers/data';
-import { supportsDomainRedirects } from '../utils/helpers/features';
 import './AsideMenu.scss';
 
 export interface AsideMenuProps {
@@ -22,6 +21,7 @@ export interface AsideMenuProps {
 
 interface AsideMenuItemProps extends NavLinkProps {
   to: string;
+  className?: string;
 }
 
 const AsideMenuItem: FC<AsideMenuItemProps> = ({ children, to, className, ...rest }) => (
@@ -34,13 +34,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 +67,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 +86,3 @@ const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
     </aside>
   );
 };
-
-export default AsideMenu;

src/common/Home.tsx

@@ -5,7 +5,7 @@ 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 { ServersListGroup } from '../servers/ServersListGroup';
 import { ServersMap } from '../servers/data';
 import { ShlinkLogo } from './img/ShlinkLogo';
 import './Home.scss';

src/common/MenuLayout.tsx

@@ -5,7 +5,7 @@ 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 { supportsDomainVisits, supportsNonOrphanVisits } from '../utils/helpers/features';
 import { isReachableServer } from '../servers/data';
 import { NotFound } from './NotFound';
 import { AsideMenuProps } from './AsideMenu';
@@ -38,7 +38,6 @@ export const MenuLayout = (
   useEffect(() => hideSidebar(), [location]);
   useEffect(() => {
     showContent && sidebarPresent();
-
     return () => sidebarNotPresent();
   }, []);
 
@@ -47,7 +46,6 @@ export const MenuLayout = (
   }
 
   const addNonOrphanVisitsRoute = supportsNonOrphanVisits(selectedServer);
-  const addManageDomainsRoute = supportsDomainRedirects(selectedServer);
   const addDomainVisitsRoute = supportsDomainVisits(selectedServer);
   const burgerClasses = classNames('menu-layout__burger-icon', { 'menu-layout__burger-icon--active': sidebarVisible });
   const swipeableProps = useSwipeable(showSidebar, hideSidebar);
@@ -73,7 +71,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/ShlinkVersions.tsx

@@ -17,7 +17,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 +29,3 @@ const ShlinkVersions = ({ selectedServer, clientVersion = SHLINK_WEB_CLIENT_VERS
     </small>
   );
 };
-
-export default ShlinkVersions;

src/common/ShlinkVersionsContainer.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { SelectedServer } from '../servers/data';
-import ShlinkVersions from './ShlinkVersions';
+import { ShlinkVersions } from './ShlinkVersions';
 import { Sidebar } from './reducers/sidebar';
 import './ShlinkVersionsContainer.scss';
 
@@ -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/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 { 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 { 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/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 { AsideMenu } from '../AsideMenu';
 import { ErrorHandler } from '../ErrorHandler';
-import ShlinkVersionsContainer from '../ShlinkVersionsContainer';
+import { ShlinkVersionsContainer } from '../ShlinkVersionsContainer';
 import { ConnectDecorator } from '../../container/types';
 import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
 import { sidebarNotPresent, sidebarPresent } from '../reducers/sidebar';
 import { ImageDownloader } from './ImageDownloader';
 import { ReportExporter } from './ReportExporter';
+import { HttpClient } from './HttpClient';
 
 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

src/container/store.ts

@@ -1,14 +1,11 @@
-import ReduxThunk from 'redux-thunk';
-import { applyMiddleware, compose, createStore } from 'redux';
+import { IContainer } from 'bottlejs';
 import { save, load, RLSOptions } from 'redux-localstorage-simple';
-import reducers from '../reducers';
+import { configureStore } from '@reduxjs/toolkit';
+import reducer from '../reducers';
 import { migrateDeprecatedSettings } from '../settings/helpers';
 import { 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 +14,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: reducer(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

@@ -13,15 +13,15 @@ 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 { VisitsInfo } from '../visits/reducers/types';
 
 export interface ShlinkState {
   servers: ServersMap;
   selectedServer: SelectedServer;
   shortUrlsList: ShortUrlsList;
-  shortUrlCreationResult: ShortUrlCreation;
+  shortUrlCreation: ShortUrlCreation;
   shortUrlDeletion: ShortUrlDeletion;
   shortUrlEdition: ShortUrlEdition;
   shortUrlVisits: ShortUrlVisits;

src/domains/DomainRow.tsx

@@ -8,11 +8,12 @@ import { SelectedServer } from '../servers/data';
 import { Domain } from './data';
 import { DomainStatusIcon } from './helpers/DomainStatusIcon';
 import { DomainDropdown } from './helpers/DomainDropdown';
+import { 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/ManageDomains.tsx

@@ -1,10 +1,10 @@
 import { FC, useEffect } from 'react';
-import Message from '../utils/Message';
+import { Message } from '../utils/Message';
 import { Result } from '../utils/Result';
 import { ShlinkApiError } from '../api/ShlinkApiError';
 import { SimpleCard } from '../utils/SimpleCard';
 import { SearchField } from '../utils/SearchField';
-import { ShlinkDomainRedirects } from '../api/types';
+import { EditDomainRedirects } from './reducers/domainRedirects';
 import { SelectedServer } from '../servers/data';
 import { DomainsList } from './reducers/domainsList';
 import { DomainRow } from './DomainRow';
@@ -12,7 +12,7 @@ import { DomainRow } from './DomainRow';
 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/helpers/DomainDropdown.tsx

@@ -7,14 +7,14 @@ import { useToggle } from '../../utils/helpers/hooks';
 import { DropdownBtnMenu } from '../../utils/DropdownBtnMenu';
 import { EditDomainRedirectsModal } from './EditDomainRedirectsModal';
 import { Domain } from '../data';
-import { ShlinkDomainRedirects } from '../../api/types';
+import { EditDomainRedirects } from '../reducers/domainRedirects';
 import { supportsDefaultDomainRedirectsEdition, supportsDomainVisits } from '../../utils/helpers/features';
 import { getServerId, SelectedServer } from '../../servers/data';
 import { DEFAULT_DOMAIN } from '../../visits/reducers/domainVisits';
 
 interface DomainDropdownProps {
   domain: Domain;
-  editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
+  editDomainRedirects: (redirects: EditDomainRedirects) => Promise<void>;
   selectedServer: SelectedServer;
 }
 

src/domains/helpers/DomainStatusIcon.tsx

@@ -8,6 +8,7 @@ import {
   faCircleNotch as loadingStatusIcon,
 } from '@fortawesome/free-solid-svg-icons';
 import { MediaMatcher } from '../../utils/types';
+import { mutableRefToElementRef } from '../../utils/helpers/components';
 import { DomainStatus } from '../data';
 
 interface DomainStatusIconProps {
@@ -34,11 +35,7 @@ export const DomainStatusIcon: FC<DomainStatusIconProps> = ({ status, matchMedia
 
   return (
     <>
-      <span
-        ref={(el: HTMLSpanElement) => {
-          ref.current = el;
-        }}
-      >
+      <span ref={mutableRefToElementRef(ref)}>
         {status === 'valid'
           ? <FontAwesomeIcon fixedWidth icon={checkIcon} className="text-muted" />
           : <FontAwesomeIcon fixedWidth icon={invalidIcon} className="text-danger" />}

src/domains/helpers/EditDomainRedirectsModal.tsx

@@ -1,15 +1,16 @@
 import { FC, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import { ShlinkDomain, ShlinkDomainRedirects } from '../../api/types';
+import { ShlinkDomain } from '../../api/types';
 import { InputFormGroup, InputFormGroupProps } from '../../utils/forms/InputFormGroup';
 import { handleEventPreventingDefault, nonEmptyValueOrNull } from '../../utils/utils';
 import { InfoTooltip } from '../../utils/InfoTooltip';
+import { 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 +31,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 { createAsyncThunk } from '../../utils/helpers/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';
 
-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,15 @@
-import { Action, Dispatch } from 'redux';
-import { ProblemDetailsError, ShlinkDomainRedirects } from '../../api/types';
-import { buildReducer } from '../../utils/helpers/redux';
+import { createSlice, createAction, SliceCaseReducers, AsyncThunk } from '@reduxjs/toolkit';
+import { createAsyncThunk } from '../../utils/helpers/redux';
+import { ShlinkDomainRedirects } from '../../api/types';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { GetState } from '../../container/types';
-import { parseApiError } from '../../api/utils';
-import { ApiErrorAction } from '../../api/types/actions';
 import { Domain, DomainStatus } from '../data';
 import { hasServerData } from '../../servers/data';
 import { replaceAuthorityFromUri } from '../../utils/helpers/uri';
-import { EDIT_DOMAIN_REDIRECTS, EditDomainRedirectsAction } from './domainRedirects';
+import { ProblemDetailsError } from '../../api/types/errors';
+import { parseApiError } from '../../api/utils';
+import { 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 +20,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 +37,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,6 +1,7 @@
+import { prop } from 'ramda';
 import Bottle from 'bottlejs';
 import { ConnectDecorator } from '../../container/types';
-import { checkDomainHealth, filterDomains, listDomains } from '../reducers/domainsList';
+import { domainsListReducerCreator } from '../reducers/domainsList';
 import { DomainSelector } from '../DomainSelector';
 import { ManageDomains } from '../ManageDomains';
 import { editDomainRedirects } from '../reducers/domainRedirects';
@@ -16,11 +17,20 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
     ['listDomains', 'filterDomains', 'editDomainRedirects', 'checkDomainHealth'],
   ));
 
+  // Reducer
+  bottle.serviceFactory(
+    'domainsListReducerCreator',
+    domainsListReducerCreator,
+    'buildShlinkApiClient',
+    'editDomainRedirects',
+  );
+  bottle.serviceFactory('domainsListReducer', prop('reducer'), 'domainsListReducerCreator');
+
   // Actions
-  bottle.serviceFactory('listDomains', listDomains, 'buildShlinkApiClient');
-  bottle.serviceFactory('filterDomains', () => filterDomains);
+  bottle.serviceFactory('listDomains', prop('listDomains'), 'domainsListReducerCreator');
+  bottle.serviceFactory('filterDomains', prop('filterDomains'), 'domainsListReducerCreator');
   bottle.serviceFactory('editDomainRedirects', editDomainRedirects, 'buildShlinkApiClient');
-  bottle.serviceFactory('checkDomainHealth', checkDomainHealth, 'buildShlinkApiClient');
+  bottle.serviceFactory('checkDomainHealth', prop('checkDomainHealth'), 'domainsListReducerCreator');
 };
 
 export default provideServices;

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

@@ -3,7 +3,7 @@ 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 { setUpStore } from './container/store';
 import { fixLeafletIcons } from './utils/helpers/leaflet';
 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
@@ -14,6 +14,7 @@ import './index.scss';
 // 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/reducers/mercureInfo.ts

@@ -1,52 +1,44 @@
-import { Action, Dispatch } from 'redux';
+import { createSlice } from '@reduxjs/toolkit';
+import { createAsyncThunk } from '../../utils/helpers/redux';
 import { ShlinkMercureInfo } from '../../api/types';
-import { GetState } from '../../container/types';
-import { buildReducer } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 
-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,14 @@
+import { prop } from 'ramda';
 import Bottle from 'bottlejs';
-import { loadMercureInfo } from '../reducers/mercureInfo';
+import { mercureInfoReducerCreator } from '../reducers/mercureInfo';
 
 const provideServices = (bottle: Bottle) => {
+  // Reducer
+  bottle.serviceFactory('mercureInfoReducerCreator', mercureInfoReducerCreator, 'buildShlinkApiClient');
+  bottle.serviceFactory('mercureInfoReducer', prop('reducer'), 'mercureInfoReducerCreator');
+
   // 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 { IContainer } from 'bottlejs';
+import { combineReducers } from '@reduxjs/toolkit';
+import { serversReducer } from '../servers/reducers/servers';
+import { settingsReducer } from '../settings/reducers/settings';
+import { appUpdatesReducer } from '../app/reducers/appUpdates';
+import { sidebarReducer } from '../common/reducers/sidebar';
 import { ShlinkState } from '../container/types';
 
-export default combineReducers<ShlinkState>({
+export default (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

@@ -4,7 +4,7 @@ import { Button } from 'reactstrap';
 import { useNavigate } from 'react-router-dom';
 import { Result } from '../utils/Result';
 import { NoMenuLayout } from '../common/NoMenuLayout';
-import { StateFlagTimeout, useGoBack, useToggle } from '../utils/helpers/hooks';
+import { TimeoutToggle, useGoBack, useToggle } from '../utils/helpers/hooks';
 import { ServerForm } from './helpers/ServerForm';
 import { ImportServersBtnProps } from './helpers/ImportServersBtn';
 import { ServerData, ServersMap, ServerWithId } from './data';
@@ -13,7 +13,7 @@ import { DuplicatedServersModal } from './helpers/DuplicatedServersModal';
 const SHOW_IMPORT_MSG_TIME = 4000;
 
 interface CreateServerProps {
-  createServer: (server: ServerWithId) => void;
+  createServers: (servers: ServerWithId[]) => void;
   servers: ServersMap;
 }
 
@@ -26,14 +26,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 +43,7 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
 
     const id = uuid();
 
-    createServer({ ...serverData, id });
+    createServers([{ ...serverData, id }]);
     navigate(`/server/${id}`);
   };
 
@@ -77,5 +77,3 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
     </NoMenuLayout>
   );
 };
-
-export default CreateServer;

src/servers/DeleteServerButton.tsx

@@ -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,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useRef } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { useNavigate } from 'react-router-dom';
 import { ServerWithId } from './data';
@@ -14,19 +14,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 +46,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,7 +1,7 @@
 import { 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 { ServerForm } from './helpers/ServerForm';
 import { withSelectedServer } from './helpers/withSelectedServer';
 import { isServerWithId, ServerData } from './data';
@@ -10,8 +10,11 @@ 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 +22,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

@@ -7,7 +7,7 @@ import { NoMenuLayout } from '../common/NoMenuLayout';
 import { SimpleCard } from '../utils/SimpleCard';
 import { SearchField } from '../utils/SearchField';
 import { Result } from '../utils/Result';
-import { StateFlagTimeout } from '../utils/helpers/hooks';
+import { TimeoutToggle } from '../utils/helpers/hooks';
 import { ImportServersBtnProps } from './helpers/ImportServersBtn';
 import { ServersMap } from './data';
 import { ManageServersRowProps } from './ManageServersRow';
@@ -22,16 +22,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/ManageServersRowDropdown.tsx

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

@@ -4,7 +4,7 @@ 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 { ShortUrlsTableType } from '../short-urls/ShortUrlsTable';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { CreateShortUrlProps } from '../short-urls/CreateShortUrl';
 import { VisitsOverview } from '../visits/reducers/visitsOverview';
@@ -25,7 +25,7 @@ interface OverviewConnectProps {
 }
 
 export const Overview = (
-  ShortUrlsTable: FC<ShortUrlsTableProps>,
+  ShortUrlsTable: ShortUrlsTableType,
   CreateShortUrl: FC<CreateShortUrlProps>,
 ) => boundToMercureHub(({
   shortUrlsList,

src/servers/ServersListGroup.tsx

@@ -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/helpers/ImportServersBtn.tsx

@@ -1,16 +1,15 @@
-import { useRef, RefObject, ChangeEvent, MutableRefObject, useState, useEffect, FC, PropsWithChildren } from 'react';
+import { useRef, ChangeEvent, useState, useEffect, FC, PropsWithChildren } from 'react';
 import { Button, UncontrolledTooltip } from 'reactstrap';
 import { complement, pipe } from 'ramda';
 import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useToggle } from '../../utils/helpers/hooks';
+import { mutableRefToElementRef } from '../../utils/helpers/components';
 import { ServersImporter } from '../services/ServersImporter';
 import { ServerData, ServersMap } from '../data';
 import { 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 = useRef<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={mutableRefToElementRef(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,7 +1,7 @@
 import { FC } from 'react';
 import { Link } from 'react-router-dom';
-import Message from '../../utils/Message';
-import ServersListGroup from '../ServersListGroup';
+import { Message } from '../../utils/Message';
+import { ServersListGroup } from '../ServersListGroup';
 import { DeleteServerButtonProps } from '../DeleteServerButton';
 import { isServerWithId, SelectedServer, ServersMap } from '../data';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
@@ -37,7 +37,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/withSelectedServer.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import Message from '../../utils/Message';
+import { Message } from '../../utils/Message';
 import { isNotFoundServer, SelectedServer } from '../data';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
 

src/servers/reducers/remoteServers.ts

@@ -1,18 +1,17 @@
-import { pipe, prop } from 'ramda';
-import { AxiosInstance } from 'axios';
-import { Dispatch } from 'redux';
 import pack from '../../../package.json';
 import { hasServerData, ServerData } from '../data';
 import { createServers } from './servers';
+import { createAsyncThunk } from '../../utils/helpers/redux';
+import { HttpClient } from '../../common/services/HttpClient';
 
-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,25 @@
-import { identity, memoizeWith, pipe } from 'ramda';
-import { Action, Dispatch } from 'redux';
+import { createAction, createListenerMiddleware, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { memoizeWith, pipe } from 'ramda';
 import { versionToPrintable, versionToSemVer as toSemVer } from '../../utils/helpers/version';
-import { SelectedServer } from '../data';
-import { GetState } from '../../container/types';
+import { isReachableServer, SelectedServer, ServerWithId } from '../data';
 import { ShlinkHealth } from '../../api/types';
-import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
+import { createAsyncThunk } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 
-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 +27,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,14 @@
+import { createSlice, PayloadAction } 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';
 
-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 +23,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,5 +1,5 @@
 import { values } from 'ramda';
-import LocalStorage from '../../utils/services/LocalStorage';
+import { LocalStorage } from '../../utils/services/LocalStorage';
 import { ServersMap, serverWithIdToServerData } from '../data';
 import { saveCsv } from '../../utils/helpers/files';
 import { JsonToCsv } from '../../utils/helpers/csvjson';

src/servers/services/provideServices.ts

@@ -1,12 +1,18 @@
+import { prop } from 'ramda';
 import Bottle from 'bottlejs';
-import CreateServer from '../CreateServer';
+import { CreateServer } from '../CreateServer';
 import { ServersDropdown } from '../ServersDropdown';
-import DeleteServerModal from '../DeleteServerModal';
-import DeleteServerButton from '../DeleteServerButton';
+import { DeleteServerModal } from '../DeleteServerModal';
+import { DeleteServerButton } from '../DeleteServerButton';
 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 { ImportServersBtn } from '../helpers/ImportServersBtn';
+import {
+  resetSelectedServer,
+  selectedServerReducerCreator,
+  selectServer,
+  selectServerListener,
+} from '../reducers/selectedServer';
+import { createServers, deleteServer, editServer, setAutoConnect } from '../reducers/servers';
 import { fetchServers } from '../reducers/remoteServers';
 import { ServerError } from '../helpers/ServerError';
 import { ConnectDecorator } from '../../container/types';
@@ -25,7 +31,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
     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']));
@@ -70,14 +76,18 @@ 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);
+
+  // Reducers
+  bottle.serviceFactory('selectServerListener', selectServerListener, 'selectServer', 'loadMercureInfo');
+  bottle.serviceFactory('selectedServerReducerCreator', selectedServerReducerCreator, 'selectServer');
+  bottle.serviceFactory('selectedServerReducer', prop('reducer'), 'selectedServerReducerCreator');
 };
 
 export default provideServices;

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.

src/settings/RealTimeUpdatesSettings.tsx

@@ -1,10 +1,11 @@
 import { FormGroup, Input } from 'reactstrap';
 import classNames from 'classnames';
-import ToggleSwitch from '../utils/ToggleSwitch';
+import { ToggleSwitch } from '../utils/ToggleSwitch';
 import { SimpleCard } from '../utils/SimpleCard';
 import { FormText } from '../utils/forms/FormText';
 import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
 import { Settings } from './reducers/settings';
+import { useDomId } from '../utils/helpers/hooks';
 
 interface RealTimeUpdatesProps {
   settings: Settings;
@@ -14,43 +15,48 @@ interface RealTimeUpdatesProps {
 
 const intervalValue = (interval?: number) => (!interval ? '' : `${interval}`);
 
-const RealTimeUpdatesSettings = (
+export const RealTimeUpdatesSettings = (
   { settings: { realTimeUpdates }, toggleRealTimeUpdates, setRealTimeUpdatesInterval }: RealTimeUpdatesProps,
-) => (
-  <SimpleCard title="Real-time updates" className="h-100">
-    <FormGroup>
-      <ToggleSwitch checked={realTimeUpdates.enabled} onChange={toggleRealTimeUpdates}>
-        Enable or disable real-time updates.
-        <FormText>
-          Real-time updates are currently being <b>{realTimeUpdates.enabled ? 'processed' : 'ignored'}</b>.
-        </FormText>
-      </ToggleSwitch>
-    </FormGroup>
-    <LabeledFormGroup
-      noMargin
-      label="Real-time updates frequency (in minutes):"
-      labelClassName={classNames('form-label', { 'text-muted': !realTimeUpdates.enabled })}
-    >
-      <Input
-        type="number"
-        min={0}
-        placeholder="Immediate"
-        disabled={!realTimeUpdates.enabled}
-        value={intervalValue(realTimeUpdates.interval)}
-        onChange={({ target }) => setRealTimeUpdatesInterval(Number(target.value))}
-      />
-      {realTimeUpdates.enabled && (
-        <FormText>
-          {realTimeUpdates.interval !== undefined && realTimeUpdates.interval > 0 && (
-            <span>
-              Updates will be reflected in the UI every <b>{realTimeUpdates.interval}</b> minute{realTimeUpdates.interval > 1 && 's'}.
-            </span>
-          )}
-          {!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'}
-        </FormText>
-      )}
-    </LabeledFormGroup>
-  </SimpleCard>
-);
+) => {
+  const inputId = useDomId();
 
-export default RealTimeUpdatesSettings;
+  return (
+    <SimpleCard title="Real-time updates" className="h-100">
+      <FormGroup>
+        <ToggleSwitch checked={realTimeUpdates.enabled} onChange={toggleRealTimeUpdates}>
+          Enable or disable real-time updates.
+          <FormText>
+            Real-time updates are currently being <b>{realTimeUpdates.enabled ? 'processed' : 'ignored'}</b>.
+          </FormText>
+        </ToggleSwitch>
+      </FormGroup>
+      <LabeledFormGroup
+        noMargin
+        label="Real-time updates frequency (in minutes):"
+        labelClassName={classNames('form-label', { 'text-muted': !realTimeUpdates.enabled })}
+        id={inputId}
+      >
+        <Input
+          type="number"
+          min={0}
+          placeholder="Immediate"
+          disabled={!realTimeUpdates.enabled}
+          value={intervalValue(realTimeUpdates.interval)}
+          id={inputId}
+          onChange={({ target }) => setRealTimeUpdatesInterval(Number(target.value))}
+        />
+        {realTimeUpdates.enabled && (
+          <FormText>
+            {realTimeUpdates.interval !== undefined && realTimeUpdates.interval > 0 && (
+              <span>
+                Updates will be reflected in the UI
+                every <b>{realTimeUpdates.interval}</b> minute{realTimeUpdates.interval > 1 && 's'}.
+              </span>
+            )}
+            {!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'}
+          </FormText>
+        )}
+      </LabeledFormGroup>
+    </SimpleCard>
+  );
+};

src/settings/Settings.tsx

@@ -9,7 +9,7 @@ const SettingsSections: FC<{ items: ReactNode[] }> = ({ items }) => (
   </>
 );
 
-const Settings = (
+export const Settings = (
   RealTimeUpdates: FC,
   ShortUrlCreation: FC,
   ShortUrlsList: FC,
@@ -32,5 +32,3 @@ const Settings = (
     </Routes>
   </NoMenuLayout>
 );
-
-export default Settings;

src/settings/ShortUrlCreationSettings.tsx

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
 import { DropdownItem, FormGroup } from 'reactstrap';
 import { SimpleCard } from '../utils/SimpleCard';
-import ToggleSwitch from '../utils/ToggleSwitch';
+import { ToggleSwitch } from '../utils/ToggleSwitch';
 import { DropdownBtn } from '../utils/DropdownBtn';
 import { FormText } from '../utils/forms/FormText';
 import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';

src/settings/TagsSettings.tsx

@@ -1,10 +1,7 @@
 import { FC } from 'react';
 import { SimpleCard } from '../utils/SimpleCard';
-import { TagsModeDropdown } from '../tags/TagsModeDropdown';
-import { capitalize } from '../utils/utils';
 import { OrderingDropdown } from '../utils/OrderingDropdown';
 import { TAGS_ORDERABLE_FIELDS } from '../tags/data/TagsListChildrenProps';
-import { FormText } from '../utils/forms/FormText';
 import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
 import { Settings, TagsSettings as TagsSettingsOptions } from './reducers/settings';
 
@@ -15,14 +12,6 @@ interface TagsProps {
 
 export const TagsSettings: FC<TagsProps> = ({ settings: { tags }, setTagsSettings }) => (
   <SimpleCard title="Tags" className="h-100">
-    <LabeledFormGroup label="Default display mode when managing tags:">
-      <TagsModeDropdown
-        mode={tags?.defaultMode ?? 'cards'}
-        renderTitle={(tagsMode) => capitalize(tagsMode)}
-        onChange={(defaultMode) => setTagsSettings({ ...tags, defaultMode })}
-      />
-      <FormText>Tags will be displayed as <b>{tags?.defaultMode ?? 'cards'}</b>.</FormText>
-    </LabeledFormGroup>
     <LabeledFormGroup noMargin label="Default ordering for tags list:">
       <OrderingDropdown
         items={TAGS_ORDERABLE_FIELDS}

src/settings/UserInterfaceSettings.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons';
 import { SimpleCard } from '../utils/SimpleCard';
-import ToggleSwitch from '../utils/ToggleSwitch';
+import { ToggleSwitch } from '../utils/ToggleSwitch';
 import { changeThemeInMarkup, Theme } from '../utils/theme';
 import { Settings, UiSettings } from './reducers/settings';
 import './UserInterfaceSettings.scss';

src/settings/VisitsSettings.tsx

@@ -1,20 +1,39 @@
 import { FC } from 'react';
+import { FormGroup } from 'reactstrap';
 import { SimpleCard } from '../utils/SimpleCard';
 import { DateIntervalSelector } from '../utils/dates/DateIntervalSelector';
 import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
 import { Settings, VisitsSettings as VisitsSettingsConfig } from './reducers/settings';
+import { ToggleSwitch } from '../utils/ToggleSwitch';
+import { FormText } from '../utils/forms/FormText';
+import { DateInterval } from '../utils/helpers/dateIntervals';
 
 interface VisitsProps {
   settings: Settings;
   setVisitsSettings: (settings: VisitsSettingsConfig) => void;
 }
 
+const currentDefaultInterval = (settings: Settings): DateInterval => settings.visits?.defaultInterval ?? 'last30Days';
+
 export const VisitsSettings: FC<VisitsProps> = ({ settings, setVisitsSettings }) => (
   <SimpleCard title="Visits" className="h-100">
+    <FormGroup>
+      <ToggleSwitch
+        checked={!!settings.visits?.excludeBots}
+        onChange={(excludeBots) => setVisitsSettings(
+          { defaultInterval: currentDefaultInterval(settings), excludeBots },
+        )}
+      >
+        Exclude bots wherever possible (this option&lsquo;s effect might depend on Shlink server&lsquo;s version).
+        <FormText>
+          The visits coming from potential bots will be <b>{settings.visits?.excludeBots ? 'excluded' : 'included'}</b>.
+        </FormText>
+      </ToggleSwitch>
+    </FormGroup>
     <LabeledFormGroup noMargin label="Default interval to load on visits sections:">
       <DateIntervalSelector
         allText="All visits"
-        active={settings.visits?.defaultInterval ?? 'last30Days'}
+        active={currentDefaultInterval(settings)}
         onChange={(defaultInterval) => setVisitsSettings({ defaultInterval })}
       />
     </LabeledFormGroup>

src/settings/helpers/index.ts

@@ -11,12 +11,5 @@ export const migrateDeprecatedSettings = (state: Partial<ShlinkState>): Partial<
     state.settings.visits && (state.settings.visits.defaultInterval = 'last180Days');
   }
 
-  // The "tags display mode" option has been moved from "ui" to "tags"
-  state.settings.tags = {
-    ...state.settings.tags,
-    defaultMode: state.settings.tags?.defaultMode ?? (state.settings.ui as any)?.tagsMode,
-  };
-  state.settings.ui && delete (state.settings.ui as any).tagsMode;
-
   return state;
 };

src/settings/reducers/settings.ts

@@ -1,14 +1,10 @@
-import { Action } from 'redux';
-import { dissoc, mergeDeepRight } from 'ramda';
-import { buildReducer } from '../../utils/helpers/redux';
-import { RecursivePartial } from '../../utils/utils';
+import { createSlice, PayloadAction, PrepareAction } from '@reduxjs/toolkit';
+import { mergeDeepRight } from 'ramda';
 import { Theme } from '../../utils/theme';
-import { DateInterval } from '../../utils/dates/types';
+import { DateInterval } from '../../utils/helpers/dateIntervals';
 import { TagsOrder } from '../../tags/data/TagsListChildrenProps';
 import { ShortUrlsOrder } from '../../short-urls/data';
 
-export const SET_SETTINGS = 'shlink/realTimeUpdates/SET_SETTINGS';
-
 export const DEFAULT_SHORT_URLS_ORDERING: ShortUrlsOrder = {
   field: 'dateCreated',
   dir: 'DESC',
@@ -32,19 +28,17 @@ export interface ShortUrlCreationSettings {
   forwardQuery?: boolean;
 }
 
-export type TagsMode = 'cards' | 'list';
-
 export interface UiSettings {
   theme: Theme;
 }
 
 export interface VisitsSettings {
   defaultInterval: DateInterval;
+  excludeBots?: boolean;
 }
 
 export interface TagsSettings {
   defaultOrdering?: TagsOrder;
-  defaultMode?: TagsMode;
 }
 
 export interface ShortUrlsListSettings {
@@ -78,45 +72,37 @@ const initialState: Settings = {
   },
 };
 
-type SettingsAction = Action & Settings;
+type SettingsAction = PayloadAction<Settings>;
+type SettingsPrepareAction = PrepareAction<Settings>;
 
-type PartialSettingsAction = Action & RecursivePartial<Settings>;
+const commonReducer = (state: Settings, { payload }: SettingsAction) => mergeDeepRight(state, payload);
+const toReducer = (prepare: SettingsPrepareAction) => ({ reducer: commonReducer, prepare });
+const toPreparedAction: SettingsPrepareAction = (payload: Settings) => ({ payload });
 
-export default buildReducer<Settings, SettingsAction>({
-  [SET_SETTINGS]: (state, action) => mergeDeepRight(state, dissoc('type', action)),
-}, initialState);
-
-export const toggleRealTimeUpdates = (enabled: boolean): PartialSettingsAction => ({
-  type: SET_SETTINGS,
-  realTimeUpdates: { enabled },
+const { reducer, actions } = createSlice({
+  name: 'shlink/settings',
+  initialState,
+  reducers: {
+    toggleRealTimeUpdates: toReducer((enabled: boolean) => toPreparedAction({ realTimeUpdates: { enabled } })),
+    setRealTimeUpdatesInterval: toReducer((interval: number) => toPreparedAction({ realTimeUpdates: { interval } })),
+    setShortUrlCreationSettings: toReducer(
+      (shortUrlCreation: ShortUrlCreationSettings) => toPreparedAction({ shortUrlCreation }),
+    ),
+    setShortUrlsListSettings: toReducer((shortUrlsList: ShortUrlsListSettings) => toPreparedAction({ shortUrlsList })),
+    setUiSettings: toReducer((ui: UiSettings) => toPreparedAction({ ui })),
+    setVisitsSettings: toReducer((visits: VisitsSettings) => toPreparedAction({ visits })),
+    setTagsSettings: toReducer((tags: TagsSettings) => toPreparedAction({ tags })),
+  },
 });
 
-export const setRealTimeUpdatesInterval = (interval: number): PartialSettingsAction => ({
-  type: SET_SETTINGS,
-  realTimeUpdates: { interval },
-});
+export const {
+  toggleRealTimeUpdates,
+  setRealTimeUpdatesInterval,
+  setShortUrlCreationSettings,
+  setShortUrlsListSettings,
+  setUiSettings,
+  setVisitsSettings,
+  setTagsSettings,
+} = actions;
 
-export const setShortUrlCreationSettings = (settings: ShortUrlCreationSettings): PartialSettingsAction => ({
-  type: SET_SETTINGS,
-  shortUrlCreation: settings,
-});
-
-export const setShortUrlsListSettings = (settings: ShortUrlsListSettings): PartialSettingsAction => ({
-  type: SET_SETTINGS,
-  shortUrlsList: settings,
-});
-
-export const setUiSettings = (settings: UiSettings): PartialSettingsAction => ({
-  type: SET_SETTINGS,
-  ui: settings,
-});
-
-export const setVisitsSettings = (settings: VisitsSettings): PartialSettingsAction => ({
-  type: SET_SETTINGS,
-  visits: settings,
-});
-
-export const setTagsSettings = (settings: TagsSettings): PartialSettingsAction => ({
-  type: SET_SETTINGS,
-  tags: settings,
-});
+export const settingsReducer = reducer;

src/settings/services/provideServices.ts

@@ -1,6 +1,6 @@
 import Bottle from 'bottlejs';
-import RealTimeUpdatesSettings from '../RealTimeUpdatesSettings';
-import Settings from '../Settings';
+import { RealTimeUpdatesSettings } from '../RealTimeUpdatesSettings';
+import { Settings } from '../Settings';
 import {
   setRealTimeUpdatesInterval,
   setShortUrlCreationSettings,

src/short-urls/CreateShortUrl.tsx

@@ -12,7 +12,7 @@ export interface CreateShortUrlProps {
 
 interface CreateShortUrlConnectProps extends CreateShortUrlProps {
   settings: Settings;
-  shortUrlCreationResult: ShortUrlCreation;
+  shortUrlCreation: ShortUrlCreation;
   selectedServer: SelectedServer;
   createShortUrl: (data: ShortUrlData) => Promise<void>;
   resetCreateShortUrl: () => void;
@@ -33,9 +33,12 @@ const getInitialState = (settings?: ShortUrlCreationSettings): ShortUrlData => (
   forwardQuery: settings?.forwardQuery ?? true,
 });
 
-const CreateShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>, CreateShortUrlResult: FC<CreateShortUrlResultProps>) => ({
+export const CreateShortUrl = (
+  ShortUrlForm: FC<ShortUrlFormProps>,
+  CreateShortUrlResult: FC<CreateShortUrlResultProps>,
+) => ({
   createShortUrl,
-  shortUrlCreationResult,
+  shortUrlCreation,
   resetCreateShortUrl,
   selectedServer,
   basicMode = false,
@@ -47,22 +50,19 @@ const CreateShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>, CreateShortUrlResul
     <>
       <ShortUrlForm
         initialState={initialState}
-        saving={shortUrlCreationResult.saving}
+        saving={shortUrlCreation.saving}
         selectedServer={selectedServer}
         mode={basicMode ? 'create-basic' : 'create'}
         onSave={async (data: ShortUrlData) => {
           resetCreateShortUrl();
-
           return createShortUrl(data);
         }}
       />
       <CreateShortUrlResult
-        {...shortUrlCreationResult}
+        creation={shortUrlCreation}
         resetCreateShortUrl={resetCreateShortUrl}
         canBeClosed={basicMode}
       />
     </>
   );
 };
-
-export default CreateShortUrl;

src/short-urls/EditShortUrl.tsx

@@ -5,48 +5,27 @@ import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { ExternalLink } from 'react-external-link';
 import { useLocation, useParams } from 'react-router-dom';
 import { SelectedServer } from '../servers/data';
-import { Settings, ShortUrlCreationSettings } from '../settings/reducers/settings';
-import { OptionalString } from '../utils/utils';
+import { Settings } from '../settings/reducers/settings';
+import { ShortUrlIdentifier } from './data';
 import { parseQuery } from '../utils/helpers/query';
-import Message from '../utils/Message';
+import { Message } from '../utils/Message';
 import { Result } from '../utils/Result';
 import { ShlinkApiError } from '../api/ShlinkApiError';
-import { useGoBack, useToggle } from '../utils/helpers/hooks';
+import { useGoBack } from '../utils/helpers/hooks';
 import { ShortUrlFormProps } from './ShortUrlForm';
 import { ShortUrlDetail } from './reducers/shortUrlDetail';
-import { EditShortUrlData, ShortUrl, ShortUrlData } from './data';
-import { ShortUrlEdition } from './reducers/shortUrlEdition';
+import { EditShortUrl as EditShortUrlInfo, ShortUrlEdition } from './reducers/shortUrlEdition';
+import { shortUrlDataFromShortUrl, urlDecodeShortCode } from './helpers';
 
 interface EditShortUrlConnectProps {
   settings: Settings;
   selectedServer: SelectedServer;
   shortUrlDetail: ShortUrlDetail;
   shortUrlEdition: ShortUrlEdition;
-  getShortUrlDetail: (shortCode: string, domain: OptionalString) => void;
-  editShortUrl: (shortUrl: string, domain: OptionalString, data: EditShortUrlData) => Promise<void>;
+  getShortUrlDetail: (shortUrl: ShortUrlIdentifier) => void;
+  editShortUrl: (editShortUrl: EditShortUrlInfo) => void;
 }
 
-const getInitialState = (shortUrl?: ShortUrl, settings?: ShortUrlCreationSettings): ShortUrlData => {
-  const validateUrl = settings?.validateUrls ?? false;
-
-  if (!shortUrl) {
-    return { longUrl: '', validateUrl };
-  }
-
-  return {
-    longUrl: shortUrl.longUrl,
-    tags: shortUrl.tags,
-    title: shortUrl.title ?? undefined,
-    domain: shortUrl.domain ?? undefined,
-    validSince: shortUrl.meta.validSince ?? undefined,
-    validUntil: shortUrl.meta.validUntil ?? undefined,
-    maxVisits: shortUrl.meta.maxVisits ?? undefined,
-    crawlable: shortUrl.crawlable,
-    forwardQuery: shortUrl.forwardQuery,
-    validateUrl,
-  };
-};
-
 export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
   settings: { shortUrlCreation: shortUrlCreationSettings },
   selectedServer,
@@ -59,16 +38,15 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
   const params = useParams<{ shortCode: string }>();
   const goBack = useGoBack();
   const { loading, error, errorData, shortUrl } = shortUrlDetail;
-  const { saving, error: savingError, errorData: savingErrorData } = shortUrlEdition;
+  const { saving, saved, error: savingError, errorData: savingErrorData } = shortUrlEdition;
   const { domain } = parseQuery<{ domain?: string }>(search);
   const initialState = useMemo(
-    () => getInitialState(shortUrl, shortUrlCreationSettings),
+    () => shortUrlDataFromShortUrl(shortUrl, shortUrlCreationSettings),
     [shortUrl, shortUrlCreationSettings],
   );
-  const [savingSucceeded,, isSuccessful, isNotSuccessful] = useToggle();
 
   useEffect(() => {
-    params.shortCode && getShortUrlDetail(params.shortCode, domain);
+    params.shortCode && getShortUrlDetail({ shortCode: urlDecodeShortCode(params.shortCode), domain });
   }, []);
 
   if (loading) {
@@ -108,18 +86,15 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
             return;
           }
 
-          isNotSuccessful();
-          editShortUrl(shortUrl.shortCode, shortUrl.domain, shortUrlData)
-            .then(isSuccessful)
-            .catch(isNotSuccessful);
+          editShortUrl({ ...shortUrl, data: shortUrlData });
         }}
       />
-      {savingError && (
+      {saved && savingError && (
         <Result type="error" className="mt-3">
           <ShlinkApiError errorData={savingErrorData} fallbackMessage="An error occurred while updating short URL :(" />
         </Result>
       )}
-      {savingSucceeded && <Result type="success" className="mt-3">Short URL properly edited.</Result>}
+      {saved && !savingError && <Result type="success" className="mt-3">Short URL properly edited.</Result>}
     </>
   );
 };

src/short-urls/Paginator.tsx

@@ -15,13 +15,13 @@ interface PaginatorProps {
   currentQueryString?: string;
 }
 
-const Paginator = ({ paginator, serverId, currentQueryString = '' }: PaginatorProps) => {
+export const Paginator = ({ paginator, serverId, currentQueryString = '' }: PaginatorProps) => {
   const { currentPage = 0, pagesCount = 0 } = paginator ?? {};
   const urlForPage = (pageNumber: NumberOrEllipsis) =>
     `/server/${serverId}/list-short-urls/${pageNumber}${currentQueryString}`;
 
   if (pagesCount <= 1) {
-    return null;
+    return <div className="pb-3" />; // Return some space
   }
 
   const renderPages = () =>
@@ -38,7 +38,7 @@ const Paginator = ({ paginator, serverId, currentQueryString = '' }: PaginatorPr
     ));
 
   return (
-    <Pagination className="sticky-card-paginator" listClassName="flex-wrap justify-content-center mb-0">
+    <Pagination className="sticky-card-paginator py-3" listClassName="flex-wrap justify-content-center mb-0">
       <PaginationItem disabled={currentPage === 1}>
         <PaginationLink previous tag={Link} to={urlForPage(currentPage - 1)} />
       </PaginationItem>
@@ -49,5 +49,3 @@ const Paginator = ({ paginator, serverId, currentQueryString = '' }: PaginatorPr
     </Pagination>
   );
 };
-
-export default Paginator;

src/short-urls/ShortUrlForm.tsx

@@ -3,11 +3,11 @@ import { InputType } from 'reactstrap/types/lib/Input';
 import { Button, FormGroup, Input, Row } from 'reactstrap';
 import { cond, isEmpty, pipe, replace, trim, T } from 'ramda';
 import { parseISO } from 'date-fns';
-import DateInput, { DateInputProps } from '../utils/DateInput';
-import { supportsCrawlableVisits, supportsForwardQuery } from '../utils/helpers/features';
+import { DateTimeInput, DateTimeInputProps } from '../utils/dates/DateTimeInput';
+import { supportsForwardQuery } from '../utils/helpers/features';
 import { SimpleCard } from '../utils/SimpleCard';
 import { handleEventPreventingDefault, hasValue, OptionalString } from '../utils/utils';
-import Checkbox from '../utils/Checkbox';
+import { Checkbox } from '../utils/Checkbox';
 import { SelectedServer } from '../servers/data';
 import { TagsSelectorProps } from '../tags/helpers/TagsSelector';
 import { DomainSelectorProps } from '../domains/DomainSelector';
@@ -83,8 +83,8 @@ export const ShortUrlForm = (
       />
     </FormGroup>
   );
-  const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateInputProps> = {}) => (
-    <DateInput
+  const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateTimeInputProps> = {}) => (
+    <DateTimeInput
       selected={shortUrlData[id] ? toDate(shortUrlData[id] as string | Date) : null}
       placeholderText={placeholder}
       isClearable
@@ -113,16 +113,14 @@ export const ShortUrlForm = (
     </>
   );
 
-  const showCrawlableControl = supportsCrawlableVisits(selectedServer);
   const showForwardQueryControl = supportsForwardQuery(selectedServer);
-  const showBehaviorCard = showCrawlableControl || showForwardQueryControl;
 
   return (
-    <form className="short-url-form" onSubmit={submit}>
+    <form name="shortUrlForm" className="short-url-form" onSubmit={submit}>
       {isBasicMode && basicComponents}
       {!isBasicMode && (
         <>
-          <SimpleCard title="Basic options" className="mb-3">
+          <SimpleCard title="Main options" className="mb-3">
             {basicComponents}
           </SimpleCard>
 
@@ -190,30 +188,26 @@ export const ShortUrlForm = (
                 )}
               </SimpleCard>
             </div>
-            {showBehaviorCard && (
-              <div className="col-sm-6 mb-3">
-                <SimpleCard title="Configure behavior">
-                  {showCrawlableControl && (
-                    <ShortUrlFormCheckboxGroup
-                      infoTooltip="This short URL will be included in the robots.txt for your Shlink instance, allowing web crawlers (like Google) to index it."
-                      checked={shortUrlData.crawlable}
-                      onChange={(crawlable) => setShortUrlData({ ...shortUrlData, crawlable })}
-                    >
-                      Make it crawlable
-                    </ShortUrlFormCheckboxGroup>
-                  )}
-                  {showForwardQueryControl && (
-                    <ShortUrlFormCheckboxGroup
-                      infoTooltip="When this short URL is visited, any query params appended to it will be forwarded to the long URL."
-                      checked={shortUrlData.forwardQuery}
-                      onChange={(forwardQuery) => setShortUrlData({ ...shortUrlData, forwardQuery })}
-                    >
-                      Forward query params on redirect
-                    </ShortUrlFormCheckboxGroup>
-                  )}
-                </SimpleCard>
-              </div>
-            )}
+            <div className="col-sm-6 mb-3">
+              <SimpleCard title="Configure behavior">
+                <ShortUrlFormCheckboxGroup
+                  infoTooltip="This short URL will be included in the robots.txt for your Shlink instance, allowing web crawlers (like Google) to index it."
+                  checked={shortUrlData.crawlable}
+                  onChange={(crawlable) => setShortUrlData({ ...shortUrlData, crawlable })}
+                >
+                  Make it crawlable
+                </ShortUrlFormCheckboxGroup>
+                {showForwardQueryControl && (
+                  <ShortUrlFormCheckboxGroup
+                    infoTooltip="When this short URL is visited, any query params appended to it will be forwarded to the long URL."
+                    checked={shortUrlData.forwardQuery}
+                    onChange={(forwardQuery) => setShortUrlData({ ...shortUrlData, forwardQuery })}
+                  >
+                    Forward query params on redirect
+                  </ShortUrlFormCheckboxGroup>
+                )}
+              </SimpleCard>
+            </div>
           </Row>
         </>
       )}

src/short-urls/ShortUrlsFilteringBar.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { isEmpty, pipe } from 'ramda';
-import { parseISO } from 'date-fns';
 import { Button, InputGroup, Row, UncontrolledTooltip } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTag, faTags } from '@fortawesome/free-solid-svg-icons';
@@ -8,8 +7,8 @@ import classNames from 'classnames';
 import { SearchField } from '../utils/SearchField';
 import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
 import { formatIsoDate } from '../utils/helpers/date';
-import { DateRange } from '../utils/dates/types';
-import { supportsAllTagsFiltering } from '../utils/helpers/features';
+import { DateRange, datesToDateRange } from '../utils/helpers/dateIntervals';
+import { supportsAllTagsFiltering, supportsFilterDisabledUrls } from '../utils/helpers/features';
 import { SelectedServer } from '../servers/data';
 import { OrderDir } from '../utils/helpers/ordering';
 import { OrderingDropdown } from '../utils/OrderingDropdown';
@@ -17,23 +16,36 @@ import { useShortUrlsQuery } from './helpers/hooks';
 import { SHORT_URLS_ORDERABLE_FIELDS, ShortUrlsOrder, ShortUrlsOrderableFields } from './data';
 import { ExportShortUrlsBtnProps } from './helpers/ExportShortUrlsBtn';
 import { TagsSelectorProps } from '../tags/helpers/TagsSelector';
+import { ShortUrlsFilterDropdown } from './helpers/ShortUrlsFilterDropdown';
+import { Settings } from '../settings/reducers/settings';
 import './ShortUrlsFilteringBar.scss';
 
-export interface ShortUrlsFilteringProps {
+interface ShortUrlsFilteringProps {
   selectedServer: SelectedServer;
   order: ShortUrlsOrder;
+  settings: Settings;
   handleOrderBy: (orderField?: ShortUrlsOrderableFields, orderDir?: OrderDir) => void;
   className?: string;
   shortUrlsAmount?: number;
 }
 
-const dateOrNull = (date?: string) => (date ? parseISO(date) : null);
-
 export const ShortUrlsFilteringBar = (
   ExportShortUrlsBtn: FC<ExportShortUrlsBtnProps>,
   TagsSelector: FC<TagsSelectorProps>,
-): FC<ShortUrlsFilteringProps> => ({ selectedServer, className, shortUrlsAmount, order, handleOrderBy }) => {
-  const [{ search, tags, startDate, endDate, tagsMode = 'any' }, toFirstPage] = useShortUrlsQuery();
+): FC<ShortUrlsFilteringProps> => ({ selectedServer, className, shortUrlsAmount, order, handleOrderBy, settings }) => {
+  const [filter, toFirstPage] = useShortUrlsQuery();
+  const {
+    search,
+    tags,
+    startDate,
+    endDate,
+    excludeBots,
+    excludeMaxVisitsReached,
+    excludePastValidUntil,
+    tagsMode = 'any',
+  } = filter;
+  const supportsDisabledFiltering = supportsFilterDisabledUrls(selectedServer);
+
   const setDates = pipe(
     ({ startDate: theStartDate, endDate: theEndDate }: DateRange) => ({
       startDate: formatIsoDate(theStartDate) ?? undefined,
@@ -72,14 +84,25 @@ export const ShortUrlsFilteringBar = (
 
       <Row className="flex-lg-row-reverse">
         <div className="col-lg-8 col-xl-6 mt-3">
-          <DateRangeSelector
-            defaultText="All short URLs"
-            initialDateRange={{
-              startDate: dateOrNull(startDate),
-              endDate: dateOrNull(endDate),
-            }}
-            onDatesChange={setDates}
-          />
+          <div className="d-md-flex">
+            <div className="flex-fill">
+              <DateRangeSelector
+                defaultText="All short URLs"
+                initialDateRange={datesToDateRange(startDate, endDate)}
+                onDatesChange={setDates}
+              />
+            </div>
+            <ShortUrlsFilterDropdown
+              className="ms-0 ms-md-2 mt-3 mt-md-0"
+              selected={{
+                excludeBots: excludeBots ?? settings.visits?.excludeBots,
+                excludeMaxVisitsReached,
+                excludePastValidUntil,
+              }}
+              onChange={toFirstPage}
+              supportsDisabledFiltering={supportsDisabledFiltering}
+            />
+          </div>
         </div>
         <div className="col-6 col-lg-4 col-xl-6 mt-3">
           <ExportShortUrlsBtn amount={shortUrlsAmount} />
@@ -96,3 +119,5 @@ export const ShortUrlsFilteringBar = (
     </div>
   );
 };
+
+export type ShortUrlsFilteringBarType = ReturnType<typeof ShortUrlsFilteringBar>;

src/short-urls/ShortUrlsList.tsx

@@ -1,5 +1,5 @@
 import { pipe } from 'ramda';
-import { FC, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Card } from 'reactstrap';
 import { useLocation, useParams } from 'react-router-dom';
 import { determineOrderDir, OrderDir } from '../utils/helpers/ordering';
@@ -7,14 +7,15 @@ import { getServerId, SelectedServer } from '../servers/data';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { Topics } from '../mercure/helpers/Topics';
 import { TableOrderIcon } from '../utils/table/TableOrderIcon';
-import { ShlinkShortUrlsListParams } from '../api/types';
+import { ShlinkShortUrlsListParams, ShlinkShortUrlsOrder } from '../api/types';
 import { DEFAULT_SHORT_URLS_ORDERING, Settings } from '../settings/reducers/settings';
 import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
-import { ShortUrlsTableProps } from './ShortUrlsTable';
-import Paginator from './Paginator';
+import { ShortUrlsTableType } from './ShortUrlsTable';
+import { Paginator } from './Paginator';
 import { useShortUrlsQuery } from './helpers/hooks';
-import { ShortUrlsOrderableFields } from './data';
-import { ShortUrlsFilteringProps } from './ShortUrlsFilteringBar';
+import { ShortUrlsOrder, ShortUrlsOrderableFields } from './data';
+import { ShortUrlsFilteringBarType } from './ShortUrlsFilteringBar';
+import { supportsExcludeBotsOnShortUrls } from '../utils/helpers/features';
 
 interface ShortUrlsListProps {
   selectedServer: SelectedServer;
@@ -23,19 +24,31 @@ interface ShortUrlsListProps {
   settings: Settings;
 }
 
-const ShortUrlsList = (
-  ShortUrlsTable: FC<ShortUrlsTableProps>,
-  ShortUrlsFilteringBar: FC<ShortUrlsFilteringProps>,
+export const ShortUrlsList = (
+  ShortUrlsTable: ShortUrlsTableType,
+  ShortUrlsFilteringBar: ShortUrlsFilteringBarType,
 ) => boundToMercureHub(({ listShortUrls, shortUrlsList, selectedServer, settings }: ShortUrlsListProps) => {
   const serverId = getServerId(selectedServer);
   const { page } = useParams();
   const location = useLocation();
-  const [{ tags, search, startDate, endDate, orderBy, tagsMode }, toFirstPage] = useShortUrlsQuery();
+  const [filter, toFirstPage] = useShortUrlsQuery();
+  const {
+    tags,
+    search,
+    startDate,
+    endDate,
+    orderBy,
+    tagsMode,
+    excludeBots,
+    excludePastValidUntil,
+    excludeMaxVisitsReached,
+  } = filter;
   const [actualOrderBy, setActualOrderBy] = useState(
     // This separated state handling is needed to be able to fall back to settings value, but only once when loaded
     orderBy ?? settings.shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING,
   );
   const { pagination } = shortUrlsList?.shortUrls ?? {};
+  const doExcludeBots = excludeBots ?? settings.visits?.excludeBots;
   const handleOrderBy = (field?: ShortUrlsOrderableFields, dir?: OrderDir) => {
     toFirstPage({ orderBy: { field, dir } });
     setActualOrderBy({ field, dir });
@@ -48,6 +61,13 @@ const ShortUrlsList = (
     (newTag: string) => [...new Set([...tags, newTag])],
     (updatedTags) => toFirstPage({ tags: updatedTags }),
   );
+  const parseOrderByForShlink = ({ field, dir }: ShortUrlsOrder): ShlinkShortUrlsOrder => {
+    if (supportsExcludeBotsOnShortUrls(selectedServer) && doExcludeBots && field === 'visits') {
+      return { field: 'nonBotVisits', dir };
+    }
+
+    return { field, dir };
+  };
 
   useEffect(() => {
     listShortUrls({
@@ -56,10 +76,23 @@ const ShortUrlsList = (
       tags,
       startDate,
       endDate,
-      orderBy: actualOrderBy,
+      orderBy: parseOrderByForShlink(actualOrderBy),
       tagsMode,
+      excludePastValidUntil,
+      excludeMaxVisitsReached,
     });
-  }, [page, search, tags, startDate, endDate, actualOrderBy, tagsMode]);
+  }, [
+    page,
+    search,
+    tags,
+    startDate,
+    endDate,
+    actualOrderBy.field,
+    actualOrderBy.dir,
+    tagsMode,
+    excludePastValidUntil,
+    excludeMaxVisitsReached,
+  ]);
 
   return (
     <>
@@ -68,9 +101,10 @@ const ShortUrlsList = (
         shortUrlsAmount={shortUrlsList.shortUrls?.pagination.totalItems}
         order={actualOrderBy}
         handleOrderBy={handleOrderBy}
+        settings={settings}
         className="mb-3"
       />
-      <Card body className="pb-1">
+      <Card body className="pb-0">
         <ShortUrlsTable
           selectedServer={selectedServer}
           shortUrlsList={shortUrlsList}
@@ -83,5 +117,3 @@ const ShortUrlsList = (
     </>
   );
 }, () => [Topics.visits]);
-
-export default ShortUrlsList;

src/short-urls/ShortUrlsTable.scss

@@ -1,3 +1,7 @@
+.short-urls-table.short-urls-table {
+  margin-bottom: -1px;
+}
+
 .short-urls-table__header-cell--with-action {
   cursor: pointer;
 }

src/short-urls/ShortUrlsTable.tsx

@@ -1,13 +1,13 @@
-import { FC, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { isEmpty } from 'ramda';
 import classNames from 'classnames';
 import { SelectedServer } from '../servers/data';
 import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
-import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
+import { ShortUrlsRowType } from './helpers/ShortUrlsRow';
 import { ShortUrlsOrderableFields } from './data';
 import './ShortUrlsTable.scss';
 
-export interface ShortUrlsTableProps {
+interface ShortUrlsTableProps {
   orderByColumn?: (column: ShortUrlsOrderableFields) => () => void;
   renderOrderIcon?: (column: ShortUrlsOrderableFields) => ReactNode;
   shortUrlsList: ShortUrlsListState;
@@ -16,7 +16,7 @@ export interface ShortUrlsTableProps {
   className?: string;
 }
 
-export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
+export const ShortUrlsTable = (ShortUrlsRow: ShortUrlsRowType) => ({
   orderByColumn,
   renderOrderIcon,
   shortUrlsList,
@@ -27,7 +27,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
   const { error, loading, shortUrls } = shortUrlsList;
   const actionableFieldClasses = classNames({ 'short-urls-table__header-cell--with-action': !!orderByColumn });
   const orderableColumnsClasses = classNames('short-urls-table__header-cell', actionableFieldClasses);
-  const tableClasses = classNames('table table-hover responsive-table', className);
+  const tableClasses = classNames('table table-hover responsive-table short-urls-table', className);
 
   const renderShortUrls = () => {
     if (error) {
@@ -81,7 +81,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
           <th className={orderableColumnsClasses} onClick={orderByColumn?.('visits')}>
             <span className="indivisible">Visits {renderOrderIcon?.('visits')}</span>
           </th>
-          <th className="short-urls-table__header-cell">&nbsp;</th>
+          <th className="short-urls-table__header-cell" colSpan={2} />
         </tr>
       </thead>
       <tbody>
@@ -90,3 +90,5 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
     </table>
   );
 };
+
+export type ShortUrlsTableType = ReturnType<typeof ShortUrlsTable>;

src/short-urls/data/index.ts

@@ -21,12 +21,19 @@ export interface ShortUrlData extends EditShortUrlData {
   findIfExists?: boolean;
 }
 
+export interface ShortUrlIdentifier {
+  shortCode: string;
+  domain?: OptionalString;
+}
+
 export interface ShortUrl {
   shortCode: string;
   shortUrl: string;
   longUrl: string;
   dateCreated: string;
-  visitsCount: number;
+  /** @deprecated */
+  visitsCount: number; // Deprecated since Shlink 3.4.0
+  visitsSummary?: ShortUrlVisitsSummary; // Optional only before Shlink 3.4.0
   meta: Required<Nullable<ShortUrlMeta>>;
   tags: string[];
   domain: string | null;
@@ -41,17 +48,18 @@ export interface ShortUrlMeta {
   maxVisits?: number;
 }
 
+export interface ShortUrlVisitsSummary {
+  total: number;
+  nonBots: number;
+  bots: number;
+}
+
 export interface ShortUrlModalProps {
   shortUrl: ShortUrl;
   isOpen: boolean;
   toggle: () => void;
 }
 
-export interface ShortUrlIdentifier {
-  shortCode: string;
-  domain: OptionalString;
-}
-
 export const SHORT_URLS_ORDERABLE_FIELDS = {
   dateCreated: 'Created at',
   shortCode: 'Short URL',
@@ -72,3 +80,9 @@ export interface ExportableShortUrl {
   tags: string;
   visits: number;
 }
+
+export interface ShortUrlsFilter {
+  excludeBots?: boolean;
+  excludeMaxVisitsReached?: boolean;
+  excludePastValidUntil?: boolean;
+}

src/short-urls/helpers/CreateShortUrlResult.tsx

@@ -1,25 +1,26 @@
 import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
 import { faTimes as closeIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { isNil } from 'ramda';
 import { useEffect } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { Tooltip } from 'reactstrap';
 import { ShortUrlCreation } from '../reducers/shortUrlCreation';
-import { StateFlagTimeout } from '../../utils/helpers/hooks';
+import { TimeoutToggle } from '../../utils/helpers/hooks';
 import { Result } from '../../utils/Result';
 import './CreateShortUrlResult.scss';
 import { ShlinkApiError } from '../../api/ShlinkApiError';
 
-export interface CreateShortUrlResultProps extends ShortUrlCreation {
+export interface CreateShortUrlResultProps {
+  creation: ShortUrlCreation;
   resetCreateShortUrl: () => void;
   canBeClosed?: boolean;
 }
 
-const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => (
-  { error, errorData, result, resetCreateShortUrl, canBeClosed = false }: CreateShortUrlResultProps,
+export const CreateShortUrlResult = (useTimeoutToggle: TimeoutToggle) => (
+  { creation, resetCreateShortUrl, canBeClosed = false }: CreateShortUrlResultProps,
 ) => {
-  const [showCopyTooltip, setShowCopyTooltip] = useStateFlagTimeout();
+  const [showCopyTooltip, setShowCopyTooltip] = useTimeoutToggle();
+  const { error, saved } = creation;
 
   useEffect(() => {
     resetCreateShortUrl();
@@ -29,21 +30,21 @@ const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => (
     return (
       <Result type="error" className="mt-3">
         {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-end pointer" onClick={resetCreateShortUrl} />}
-        <ShlinkApiError errorData={errorData} fallbackMessage="An error occurred while creating the URL :(" />
+        <ShlinkApiError errorData={creation.errorData} fallbackMessage="An error occurred while creating the URL :(" />
       </Result>
     );
   }
 
-  if (isNil(result)) {
+  if (!saved) {
     return null;
   }
 
-  const { shortUrl } = result;
+  const { shortUrl } = creation.result;
 
   return (
     <Result type="success" className="mt-3">
       {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-end pointer" onClick={resetCreateShortUrl} />}
-      <b>Great!</b> The short URL is <b>{shortUrl}</b>
+      <span><b>Great!</b> The short URL is <b>{shortUrl}</b></span>
 
       <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
         <button
@@ -61,5 +62,3 @@ const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => (
     </Result>
   );
 };
-
-export default CreateShortUrlResult;

src/short-urls/helpers/DeleteShortUrlModal.tsx

@@ -1,38 +1,41 @@
 import { useEffect, useState } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import { identity, pipe } from 'ramda';
+import { pipe } from 'ramda';
 import { ShortUrlDeletion } from '../reducers/shortUrlDeletion';
-import { ShortUrlModalProps } from '../data';
-import { handleEventPreventingDefault, OptionalString } from '../../utils/utils';
+import { ShortUrlIdentifier, ShortUrlModalProps } from '../data';
+import { handleEventPreventingDefault } from '../../utils/utils';
 import { Result } from '../../utils/Result';
 import { isInvalidDeletionError } from '../../api/utils';
 import { ShlinkApiError } from '../../api/ShlinkApiError';
 
 interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps {
   shortUrlDeletion: ShortUrlDeletion;
-  deleteShortUrl: (shortCode: string, domain: OptionalString) => Promise<void>;
+  deleteShortUrl: (shortUrl: ShortUrlIdentifier) => Promise<void>;
+  shortUrlDeleted: (shortUrl: ShortUrlIdentifier) => void;
   resetDeleteShortUrl: () => void;
 }
 
-const DeleteShortUrlModal = (
-  { shortUrl, toggle, isOpen, shortUrlDeletion, resetDeleteShortUrl, deleteShortUrl }: DeleteShortUrlModalConnectProps,
-) => {
+const DELETION_PATTERN = 'delete';
+
+export const DeleteShortUrlModal = ({
+  shortUrl,
+  toggle,
+  isOpen,
+  shortUrlDeletion,
+  resetDeleteShortUrl,
+  deleteShortUrl,
+  shortUrlDeleted,
+}: DeleteShortUrlModalConnectProps) => {
   const [inputValue, setInputValue] = useState('');
 
   useEffect(() => resetDeleteShortUrl, []);
 
-  const { error, errorData } = shortUrlDeletion;
+  const { loading, error, deleted, errorData } = shortUrlDeletion;
   const close = pipe(resetDeleteShortUrl, toggle);
-  const handleDeleteUrl = handleEventPreventingDefault(() => {
-    const { shortCode, domain } = shortUrl;
-
-    deleteShortUrl(shortCode, domain)
-      .then(toggle)
-      .catch(identity);
-  });
+  const handleDeleteUrl = handleEventPreventingDefault(() => deleteShortUrl(shortUrl).then(toggle));
 
   return (
-    <Modal isOpen={isOpen} toggle={close} centered>
+    <Modal isOpen={isOpen} toggle={close} centered onClosed={() => deleted && shortUrlDeleted(shortUrl)}>
       <form onSubmit={handleDeleteUrl}>
         <ModalHeader toggle={close}>
           <span className="text-danger">Delete short URL</span>
@@ -40,12 +43,12 @@ const DeleteShortUrlModal = (
         <ModalBody>
           <p><b className="text-danger">Caution!</b> You are about to delete a short URL.</p>
           <p>This action cannot be undone. Once you have deleted it, all the visits stats will be lost.</p>
-          <p>Write <b>{shortUrl.shortCode}</b> to confirm deletion.</p>
+          <p>Write <b>{DELETION_PATTERN}</b> to confirm deletion.</p>
 
           <input
             type="text"
             className="form-control"
-            placeholder={`Insert the short code (${shortUrl.shortCode})`}
+            placeholder={`Insert ${DELETION_PATTERN}`}
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
           />
@@ -61,14 +64,12 @@ const DeleteShortUrlModal = (
           <button
             type="submit"
             className="btn btn-danger"
-            disabled={inputValue !== shortUrl.shortCode || shortUrlDeletion.loading}
+            disabled={inputValue !== DELETION_PATTERN || loading}
           >
-            {shortUrlDeletion.loading ? 'Deleting...' : 'Delete'}
+            {loading ? 'Deleting...' : 'Delete'}
           </button>
         </ModalFooter>
       </form>
     </Modal>
   );
 };
-
-export default DeleteShortUrlModal;

src/short-urls/helpers/ExportShortUrlsBtn.tsx

@@ -52,7 +52,7 @@ export const ExportShortUrlsBtn = (
       longUrl: shortUrl.longUrl,
       title: shortUrl.title ?? '',
       tags: shortUrl.tags.join(','),
-      visits: shortUrl.visitsCount,
+      visits: shortUrl?.visitsSummary?.total ?? shortUrl.visitsCount,
     })));
     stopLoading();
   };

src/short-urls/helpers/QrCodeModal.tsx

@@ -6,8 +6,8 @@ import { ExternalLink } from 'react-external-link';
 import { ShortUrlModalProps } from '../data';
 import { SelectedServer } from '../../servers/data';
 import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
-import { buildQrCodeUrl, QrCodeCapabilities, QrCodeFormat, QrErrorCorrection } from '../../utils/helpers/qrCodes';
-import { supportsNonRestCors, supportsQrErrorCorrection } from '../../utils/helpers/features';
+import { buildQrCodeUrl, QrCodeFormat, QrErrorCorrection } from '../../utils/helpers/qrCodes';
+import { supportsNonRestCors } from '../../utils/helpers/features';
 import { ImageDownloader } from '../../common/services/ImageDownloader';
 import { QrFormatDropdown } from './qr-codes/QrFormatDropdown';
 import { QrErrorCorrectionDropdown } from './qr-codes/QrErrorCorrectionDropdown';
@@ -17,21 +17,17 @@ interface QrCodeModalConnectProps extends ShortUrlModalProps {
   selectedServer: SelectedServer;
 }
 
-const QrCodeModal = (imageDownloader: ImageDownloader) => (
+export const QrCodeModal = (imageDownloader: ImageDownloader) => (
   { shortUrl: { shortUrl, shortCode }, toggle, isOpen, selectedServer }: QrCodeModalConnectProps,
 ) => {
   const [size, setSize] = useState(300);
   const [margin, setMargin] = useState(0);
   const [format, setFormat] = useState<QrCodeFormat>('png');
   const [errorCorrection, setErrorCorrection] = useState<QrErrorCorrection>('L');
-  const capabilities: QrCodeCapabilities = useMemo(() => ({
-    errorCorrectionIsSupported: supportsQrErrorCorrection(selectedServer),
-  }), [selectedServer]);
   const displayDownloadBtn = supportsNonRestCors(selectedServer);
-  const willRenderThreeControls = !capabilities.errorCorrectionIsSupported;
   const qrCodeUrl = useMemo(
-    () => buildQrCodeUrl(shortUrl, { size, format, margin, errorCorrection }, capabilities),
-    [shortUrl, size, format, margin, errorCorrection, capabilities],
+    () => buildQrCodeUrl(shortUrl, { size, format, margin, errorCorrection }),
+    [shortUrl, size, format, margin, errorCorrection],
   );
   const totalSize = useMemo(() => size + margin, [size, margin]);
   const modalSize = useMemo(() => {
@@ -49,7 +45,7 @@ const QrCodeModal = (imageDownloader: ImageDownloader) => (
       </ModalHeader>
       <ModalBody>
         <Row>
-          <FormGroup className={`d-grid ${willRenderThreeControls ? 'col-md-4' : 'col-md-6'}`}>
+          <FormGroup className="d-grid col-md-4">
             <label>Size: {size}px</label>
             <input
               type="range"
@@ -61,7 +57,7 @@ const QrCodeModal = (imageDownloader: ImageDownloader) => (
               onChange={(e) => setSize(Number(e.target.value))}
             />
           </FormGroup>
-          <FormGroup className={`d-grid ${willRenderThreeControls ? 'col-md-4' : 'col-md-6'}`}>
+          <FormGroup className="d-grid col-md-4">
             <label htmlFor="marginControl">Margin: {margin}px</label>
             <input
               id="marginControl"
@@ -74,14 +70,12 @@ const QrCodeModal = (imageDownloader: ImageDownloader) => (
               onChange={(e) => setMargin(Number(e.target.value))}
             />
           </FormGroup>
-          <FormGroup className={willRenderThreeControls ? 'col-md-4' : 'col-md-6'}>
+          <FormGroup className="d-grid col-md-4">
             <QrFormatDropdown format={format} setFormat={setFormat} />
           </FormGroup>
-          {capabilities.errorCorrectionIsSupported && (
-            <FormGroup className="col-md-6">
-              <QrErrorCorrectionDropdown errorCorrection={errorCorrection} setErrorCorrection={setErrorCorrection} />
-            </FormGroup>
-          )}
+          <FormGroup className="col-md-6">
+            <QrErrorCorrectionDropdown errorCorrection={errorCorrection} setErrorCorrection={setErrorCorrection} />
+          </FormGroup>
         </Row>
         <div className="text-center">
           <div className="mb-3">
@@ -107,5 +101,3 @@ const QrCodeModal = (imageDownloader: ImageDownloader) => (
     </Modal>
   );
 };
-
-export default QrCodeModal;

src/short-urls/helpers/ShortUrlDetailLink.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { Link } from 'react-router-dom';
 import { isServerWithId, SelectedServer, ServerWithId } from '../../servers/data';
 import { ShortUrl } from '../data';
+import { urlEncodeShortCode } from './index';
 
 export type LinkSuffix = 'visits' | 'edit';
 
@@ -13,11 +14,10 @@ export interface ShortUrlDetailLinkProps {
 
 const buildUrl = ({ id }: ServerWithId, { shortCode, domain }: ShortUrl, suffix: LinkSuffix) => {
   const query = domain ? `?domain=${domain}` : '';
-
-  return `/server/${id}/short-code/${shortCode}/${suffix}${query}`;
+  return `/server/${id}/short-code/${urlEncodeShortCode(shortCode)}/${suffix}${query}`;
 };
 
-const ShortUrlDetailLink: FC<ShortUrlDetailLinkProps & Record<string | number, any>> = (
+export const ShortUrlDetailLink: FC<ShortUrlDetailLinkProps & Record<string | number, any>> = (
   { selectedServer, shortUrl, suffix, children, ...rest },
 ) => {
   if (!selectedServer || !isServerWithId(selectedServer) || !shortUrl) {
@@ -26,5 +26,3 @@ const ShortUrlDetailLink: FC<ShortUrlDetailLinkProps & Record<string | number, a
 
   return <Link to={buildUrl(selectedServer, shortUrl, suffix)} {...rest}>{children}</Link>;
 };
-
-export default ShortUrlDetailLink;

src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent, FC, PropsWithChildren } from 'react';
-import Checkbox from '../../utils/Checkbox';
+import { Checkbox } from '../../utils/Checkbox';
 import { InfoTooltip } from '../../utils/InfoTooltip';
 
 type ShortUrlFormCheckboxGroupProps = PropsWithChildren<{

src/short-urls/helpers/ShortUrlStatus.tsx

@@ -0,0 +1,86 @@
+import { FC, ReactNode, useRef } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import { faLinkSlash, faCalendarXmark, faCheck } from '@fortawesome/free-solid-svg-icons';
+import { UncontrolledTooltip } from 'reactstrap';
+import { isBefore } from 'date-fns';
+import { mutableRefToElementRef } from '../../utils/helpers/components';
+import { ShortUrl } from '../data';
+import { formatHumanFriendly, now, parseISO } from '../../utils/helpers/date';
+
+interface ShortUrlStatusProps {
+  shortUrl: ShortUrl;
+}
+
+interface StatusResult {
+  icon: IconDefinition;
+  className: string;
+  description: ReactNode;
+}
+
+const resolveShortUrlStatus = (shortUrl: ShortUrl): StatusResult => {
+  const { meta, visitsCount, visitsSummary } = shortUrl;
+  const { maxVisits, validSince, validUntil } = meta;
+  const totalVisits = visitsSummary?.total ?? visitsCount;
+
+  if (maxVisits && totalVisits >= maxVisits) {
+    return {
+      icon: faLinkSlash,
+      className: 'text-danger',
+      description: (
+        <>
+          This short URL cannot be currently visited because it has reached the maximum
+          amount of <b>{maxVisits}</b> visit{maxVisits > 1 ? 's' : ''}.
+        </>
+      ),
+    };
+  }
+
+  if (validUntil && isBefore(parseISO(validUntil), now())) {
+    return {
+      icon: faCalendarXmark,
+      className: 'text-danger',
+      description: (
+        <>
+          This short URL cannot be visited
+          since <b className="indivisible">{formatHumanFriendly(parseISO(validUntil))}</b>.
+        </>
+      ),
+    };
+  }
+
+  if (validSince && isBefore(now(), parseISO(validSince))) {
+    return {
+      icon: faCalendarXmark,
+      className: 'text-warning',
+      description: (
+        <>
+          This short URL will start working
+          on <b className="indivisible">{formatHumanFriendly(parseISO(validSince))}</b>.
+        </>
+      ),
+    };
+  }
+
+  return {
+    icon: faCheck,
+    className: 'text-primary',
+    description: 'This short URL can be visited normally.',
+  };
+};
+
+export const ShortUrlStatus: FC<ShortUrlStatusProps> = ({ shortUrl }) => {
+  const tooltipRef = useRef<HTMLElement | undefined>();
+  const { icon, className, description } = resolveShortUrlStatus(shortUrl);
+
+  return (
+    <>
+      <span style={{ cursor: !description ? undefined : 'help' }} ref={mutableRefToElementRef(tooltipRef)}>
+        <FontAwesomeIcon icon={icon} className={className} />
+      </span>
+      <UncontrolledTooltip target={(() => tooltipRef.current) as any} placement="bottom">
+        {description}
+      </UncontrolledTooltip>
+    </>
+  );
+};

src/short-urls/helpers/ShortUrlVisitsCount.scss

@@ -10,3 +10,7 @@
 .short-url-visits-count__amount--big {
   transform: scale(1.5);
 }
+
+.short-url-visits-count__tooltip-list-item:not(:last-child) {
+  margin-bottom: .5rem;
+}

src/short-urls/helpers/ShortUrlVisitsCount.tsx

@@ -6,7 +6,9 @@ import classNames from 'classnames';
 import { prettify } from '../../utils/helpers/numbers';
 import { ShortUrl } from '../data';
 import { SelectedServer } from '../../servers/data';
-import ShortUrlDetailLink from './ShortUrlDetailLink';
+import { ShortUrlDetailLink } from './ShortUrlDetailLink';
+import { mutableRefToElementRef } from '../../utils/helpers/components';
+import { formatHumanFriendly, parseISO } from '../../utils/helpers/date';
 import './ShortUrlVisitsCount.scss';
 
 interface ShortUrlVisitsCountProps {
@@ -16,8 +18,11 @@ interface ShortUrlVisitsCountProps {
   active?: boolean;
 }
 
-const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = false }: ShortUrlVisitsCountProps) => {
-  const maxVisits = shortUrl?.meta?.maxVisits;
+export const ShortUrlVisitsCount = (
+  { visitsCount, shortUrl, selectedServer, active = false }: ShortUrlVisitsCountProps,
+) => {
+  const { maxVisits, validSince, validUntil } = shortUrl?.meta ?? {};
+  const hasLimit = !!maxVisits || !!validSince || !!validUntil;
   const visitsLink = (
     <ShortUrlDetailLink selectedServer={selectedServer} shortUrl={shortUrl} suffix="visits">
       <strong
@@ -28,34 +33,44 @@ const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = f
     </ShortUrlDetailLink>
   );
 
-  if (!maxVisits) {
+  if (!hasLimit) {
     return visitsLink;
   }
 
-  const prettifiedMaxVisits = prettify(maxVisits);
-  const tooltipRef = useRef<HTMLElement | null>();
+  const tooltipRef = useRef<HTMLElement | undefined>();
 
   return (
     <>
       <span className="indivisible">
         {visitsLink}
-        <small
-          className="short-urls-visits-count__max-visits-control"
-          ref={(el) => {
-            tooltipRef.current = el;
-          }}
-        >
-          {' '}/ {prettifiedMaxVisits}{' '}
-          <sup>
+        <small className="short-urls-visits-count__max-visits-control" ref={mutableRefToElementRef(tooltipRef)}>
+          {maxVisits && <> / {prettify(maxVisits)}</>}
+          <sup className="ms-1">
             <FontAwesomeIcon icon={infoIcon} />
           </sup>
         </small>
       </span>
       <UncontrolledTooltip target={(() => tooltipRef.current) as any} placement="bottom">
-        This short URL will not accept more than <b>{prettifiedMaxVisits}</b> visits.
+        <ul className="list-unstyled mb-0">
+          {maxVisits && (
+            <li className="short-url-visits-count__tooltip-list-item">
+              This short URL will not accept more than <b>{prettify(maxVisits)}</b> visit{maxVisits === 1 ? '' : 's'}.
+            </li>
+          )}
+          {validSince && (
+            <li className="short-url-visits-count__tooltip-list-item">
+              This short URL will not accept visits
+              before <b className="indivisible">{formatHumanFriendly(parseISO(validSince))}</b>.
+            </li>
+          )}
+          {validUntil && (
+            <li className="short-url-visits-count__tooltip-list-item">
+              This short URL will not accept visits
+              after <b className="indivisible">{formatHumanFriendly(parseISO(validUntil))}</b>.
+            </li>
+          )}
+        </ul>
       </UncontrolledTooltip>
     </>
   );
 };
-
-export default ShortUrlVisitsCount;