Merge pull request #1045 from shlinkio/develop

Release 4.0.0

.dockerignore

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

.eslintrc

@@ -6,11 +6,5 @@
   "parserOptions": {
     "project": "./tsconfig.json"
   },
-  "ignorePatterns": ["src/service*.ts"],
-  "rules": {
-    "jsx-a11y/control-has-associated-label": "off",
-    "jsx-a11y/label-has-associated-control": "off",
-    "jsx-a11y/click-events-have-key-events": "off",
-    "jsx-a11y/no-static-element-interactions": "off"
-  }
+  "ignorePatterns": ["src/service*.ts"]
 }

.github/DISCUSSION_TEMPLATE/q-a.yml

@@ -0,0 +1,24 @@
+title: 'Q&A'
+body:
+  - type: input
+    validations:
+      required: true
+    attributes:
+      label: shlink-web-client version
+      placeholder: x.y.z
+  - type: dropdown
+    validations:
+      required: true
+    attributes:
+      label: How do you use shlink-web-client
+      options:
+        - https://app.shlink.io
+        - Docker image
+        - Self-hosted
+        - Other (explain in summary)
+  - type: textarea
+    validations:
+      required: true
+    attributes:
+      label: Summary
+      value: '<!-- Describe your issue, question or request here. -->'

.github/FUNDING.yml

@@ -1,2 +1,2 @@
 github: ['acelaya']
-custom: ['https://acel.me/donate']
+custom: ['https://slnk.to/donate']

.github/ISSUE_TEMPLATE/Bug.md

@@ -1,36 +0,0 @@
----
-name: Bug report
-about: Something on shlink is broken or not working as documented?
-labels: bug
----
-
-<!--
-Before opening an issue, just take into account that this is a completely free of charge and open source project.
-I'm always happy to help and provide support, but some understanding will be expected.
-I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
-You may also be asked to provide tests or ways to reproduce reported bugs.
-Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
-
-With that said, please fill in the information requested next. More information might be requested once the issue is open.
--->
-
-#### Shlink web client version
-
-* Version: x.y.z
-* How do you use shlink-web-client: app.shlink.io|Docker image|self-hosted
-
-#### Summary
-
-<!-- Provide a summary describing the problem you are experiencing. -->
-
-#### Current behavior
-
-<!-- How is it actually behaving (and it shouldn't)? -->
-
-#### Expected behavior
-
-<!-- How did you expected to behave? -->
-
-#### How to reproduce
-
-<!-- Provide steps to reproduce the bug. -->

.github/ISSUE_TEMPLATE/Bug.yml

@@ -0,0 +1,38 @@
+name: 'Bug'
+description: Something on shlink is broken or not working as documented?
+labels: ['bug']
+body:
+  - type: input
+    validations:
+      required: true
+    attributes:
+      label: shlink-web-client version
+      placeholder: x.y.z
+  - type: dropdown
+    validations:
+      required: true
+    attributes:
+      label: How do you use shlink-web-client
+      options:
+        - https://app.shlink.io
+        - Docker image
+        - Self-hosted
+        - Other (explain in summary)
+  - type: textarea
+    validations:
+      required: true
+    attributes:
+      label: Current behavior
+      value: '<!-- How is it actually behaving (and it should not)? -->'
+  - type: textarea
+    validations:
+      required: true
+    attributes:
+      label: Expected behavior
+      value: '<!-- How did you expect it to behave? -->'
+  - type: textarea
+    validations:
+      required: true
+    attributes:
+      label: How to reproduce
+      value: '<!-- Provide steps to reproduce the bug. -->'

.github/ISSUE_TEMPLATE/Feature_Request.md

@@ -1,19 +0,0 @@
----
-name: Feature request
-about: Do you find shlink is missing some important feature that would make it more useful?
-labels: feature
----
-
-<!--
-Before opening an issue, just take into account that this is a completely free of charge and open source project.
-I'm always happy to help and provide support, but some understanding will be expected.
-I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
-You may also be asked to provide tests or ways to reproduce reported bugs.
-Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
-
-With that said, please fill in the information requested next. More information might be requested once the issue is open.
--->
-
-#### Summary
-
-<!-- Describe the new feature you would like to request. -->

.github/ISSUE_TEMPLATE/Feature_Request.yml

@@ -0,0 +1,16 @@
+name: Feature request
+description: Do you find shlink-web-client is missing some important feature that would make it more useful?
+labels: ['feature']
+body:
+  - type: textarea
+    validations:
+      required: true
+    attributes:
+      label: Summary
+      value: '<!-- Describe the new feature you would like to request. -->'
+  - type: textarea
+    validations:
+      required: true
+    attributes:
+      label: Use case
+      value: '<!-- Explain why do you think this feature would be useful, and what problems would it help to solve. -->'

.github/ISSUE_TEMPLATE/Question_Support.md

@@ -1,24 +0,0 @@
----
-name: Question - Support
-about: Do you have a problem setting up or using shlink?
-labels: question
----
-
-<!--
-Before opening an issue, just take into account that this is a completely free of charge and open source project.
-I'm always happy to help and provide support, but some understanding will be expected.
-I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
-You may also be asked to provide tests or ways to reproduce reported bugs.
-Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
-
-With that said, please fill in the information requested next. More information might be requested once the issue is open.
--->
-
-#### Shlink web client version
-
-* Version: x.y.z
-* How do you use shlink-web-client: app.shlink.io|Docker image|self-hosted
-
-#### Summary
-
-<!-- Describe the issue you are facing here. -->

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Question - Support
+    about: Do you need help setting up or using shlink-web-client?
+    url: https://github.com/shlinkio/shlink-web-client/discussions/new?category=q-a

.github/dependabot.yml

@@ -0,0 +1,42 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: '/'
+    schedule:
+      interval: weekly
+      day: saturday
+      time: '09:00'
+      timezone: 'Europe/Madrid'
+    open-pull-requests-limit: 10
+    groups:
+      fontawesome:
+        patterns:
+          - '@fortawesome/*'
+      shlink:
+        patterns:
+          - '@shlinkio/*'
+      types:
+        patterns:
+          - '@types/*'
+      testing:
+        patterns:
+          - '@testing-library/*'
+      vite:
+        patterns:
+          - 'vite'
+          - '@vitejs/*'
+      vitest:
+        patterns:
+          - 'vitest'
+          - '@vitest/*'
+    ignore:
+      # Bootstrap can introduce visual breaking changes on styles
+      # Ignore it, since the plan is to remove it anyway
+      - dependency-name: 'bootstrap'
+  - package-ecosystem: docker
+    directory: '/'
+    schedule:
+      interval: weekly
+      day: saturday
+      time: '09:00'
+      timezone: 'Europe/Madrid'

.github/workflows/ci.yml

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

.github/workflows/deploy-preview.yml

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

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

@@ -2,8 +2,6 @@ name: Build and publish docker image
 
 on:
   push:
-    branches:
-      - develop
     tags:
       - 'v*'
 
@@ -14,3 +12,4 @@ jobs:
     with:
       image-name: shlinkio/shlink-web-client
       version-arg-name: VERSION
+      platforms: 'linux/arm64/v8,linux/amd64'

.github/workflows/publish-release.yml

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

.gitignore

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

CHANGELOG.md

@@ -4,6 +4,198 @@ 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).
 
+## [4.0.0] - 2024-01-29
+### Added
+* [shlink-web-component #7](https://github.com/shlinkio/shlink-web-component/issues/7) Allow comparing visits for multiple short URLs, tags or domains.
+
+  When in the tags, domains or short URLs tables, you can now pick up to 5 items to compare their visits. Once selected, you are taken to a section displaying a comparative line chart, which supports all regular visits filtering capabilities.
+
+* [shlink-web-component #9](https://github.com/shlinkio/shlink-web-component/issues/9) Allow comparing visits with the previous period.
+* [shlink-web-component #12](https://github.com/shlinkio/shlink-web-component/issues/12) and [#13](https://github.com/shlinkio/shlink-web-component/issues/13) Add new "Visits options" section for arbitrary visit stats options. Add section to delete short URL and orphan visits there.
+
+  This section is only visible if short URL visits deletion or orphan visits deletion are supported by connected Shlink server.
+
+* [shlink-web-component #10](https://github.com/shlinkio/shlink-web-component/issues/10) Improve general accessibility: Add accessibility tests, fix accessibility issues and enable accessibility linting rules.
+
+### Changed
+* [#338](https://github.com/shlinkio/shlink-web-client/issues/338) Extract `@shlinkio/shlink-web-component` and `@shlinkio/shlink-frontend-kit` as external libs.
+* [#978](https://github.com/shlinkio/shlink-web-client/issues/978) Use system preferred theme as default theme.
+* Use API client from `@shlinkio/shlink-js-sdk` to consume Shlink servers.
+* [#902](https://github.com/shlinkio/shlink-web-client/pull/902) Docker image is no longer running as root. As a side effect, exposed port is `8080`, not `80` anymore.
+* [shlink-web-component #117](https://github.com/shlinkio/shlink-web-component/issues/117) Migrate charts from Chart.JS to Recharts.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* Drop support for Shlink older than v3.0.0
+
+### Fixed
+* [#910](https://github.com/shlinkio/shlink-web-client/issues/910) Fix warnings related with missing `act` in tests and refs in `AppUpdateBanner`.
+
+
+## [3.10.2] - 2023-07-09
+### Added
+* *Nothing*
+
+### Changed
+* [#781](https://github.com/shlinkio/shlink-web-client/issues/781) Migrate tests from jest to vitest.
+* [#843](https://github.com/shlinkio/shlink-web-client/issues/843) Build docker image only for new tags, making sure it always includes an actual version number.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
+## [3.10.1] - 2023-04-23
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#826](https://github.com/shlinkio/shlink-web-client/issues/826) Fix generated short URLs CSV so that it can be used to import on Shlink.
+
+
+## [3.10.0] - 2023-03-19
+### Added
+* [#807](https://github.com/shlinkio/shlink-web-client/issues/807) Add support for device-specific long-URLs when creating or editing short URLs.
+* [#808](https://github.com/shlinkio/shlink-web-client/issues/808) Respect settings on excluding bots in the overview section, for visits cards.
+* [#809](https://github.com/shlinkio/shlink-web-client/issues/809) Respect settings on excluding bots in the tags list.
+
+### Changed
+* [#798](https://github.com/shlinkio/shlink-web-client/issues/798) Remove stryker and mutation testing.
+* [#800](https://github.com/shlinkio/shlink-web-client/issues/800) Use `/tags/stats` endpoint to load tags stats, when the server supports it.
+* Update to Vite 4.2
+* Update to TypeScript 5
+* Update to coding standard v2.1.0
+* Decouple tests from RTK internals.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#799](https://github.com/shlinkio/shlink-web-client/issues/799) Fix fallback visits not taking into account configuration regarding excluding bots.
+
+
+## [3.9.1] - 2022-12-31
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#787](https://github.com/shlinkio/shlink-web-client/issues/787) Fixed wrong base path set in vite config when homepage is set as empty string.
+
+
+## [3.9.0] - 2022-12-31
+### Added
+* [#750](https://github.com/shlinkio/shlink-web-client/issues/750) Added new icon indicators telling if a short URL can be normally visited, it received the max amount of visits, is still not enabled, etc.
+* [#764](https://github.com/shlinkio/shlink-web-client/issues/764) Added support to exclude visits from visits on short URLs list when consuming Shlink 3.4.0.
+
+  This feature also comes with a new setting to disable visits from bots by default, both on short URLs lists and visits sections.
+
+* [#760](https://github.com/shlinkio/shlink-web-client/issues/760) Added support to exclude short URLs which have reached the maximum amount of visits, or are valid until a date in the past.
+
+### Changed
+* [#753](https://github.com/shlinkio/shlink-web-client/issues/753) Migrated from react-scripts/webpack to vite.
+* [#770](https://github.com/shlinkio/shlink-web-client/issues/770) Updated to latest dependencies.
+* [#741](https://github.com/shlinkio/shlink-web-client/issues/741) Improved `visitsAsyncThunk`, making it wrap pending/fulfilled/rejected actions, as well as custom ones, in a type-safe way.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* [#736](https://github.com/shlinkio/shlink-web-client/issues/736) Removed cards mode in tags. Only table mode is supported now.
+* [#774](https://github.com/shlinkio/shlink-web-client/issues/774) Dropped support for Shlink older than 2.8.0.
+
+### Fixed
+* [#715](https://github.com/shlinkio/shlink-web-client/issues/715) Fixed connection still failing on miss-configured servers, after editing their params to set proper values.
+
+
+## [3.8.2] - 2022-12-17
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#766](https://github.com/shlinkio/shlink-web-client/issues/766) Fixed visits query being lost when switching between sub-sections.
+* [#765](https://github.com/shlinkio/shlink-web-client/issues/765) Added missing `"Content-Type": "application/json"` to requests with payload, making older Shlink versions fail.
+
+
+## [3.8.1] - 2022-12-06
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#756](https://github.com/shlinkio/shlink-web-client/issues/756) Fixed all visits interval not working unless switching to a different interval first.
+* [#757](https://github.com/shlinkio/shlink-web-client/issues/757) Fixed visits fallback interval not working until the visits view has been loaded at least twice.
+
+
+## [3.8.0] - 2022-12-03
+### Added
+* [#708](https://github.com/shlinkio/shlink-web-client/issues/708) Added support for API v3.
+* [#717](https://github.com/shlinkio/shlink-web-client/issues/717) Allowed to select time in 10 minute intervals when configuring "enabled since" and "enabled until" on short URLs.
+* [#748](https://github.com/shlinkio/shlink-web-client/issues/748) Improved visits section to add filters to the query string, allowing to navigate to a specific state or bookmarking filters.
+
+### Changed
+* [#713](https://github.com/shlinkio/shlink-web-client/issues/713) Updated dependencies.
+* [#620](https://github.com/shlinkio/shlink-web-client/issues/620) Migrated all reducers to redux toolkit.
+* [#721](https://github.com/shlinkio/shlink-web-client/issues/721) Migrated from axios to fetch.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#590](https://github.com/shlinkio/shlink-web-client/issues/590) Fixed position of the datepicker triangle.
+* [#729](https://github.com/shlinkio/shlink-web-client/issues/729) Fixed wrong stats displayed in tags after renaming.
+* [#737](https://github.com/shlinkio/shlink-web-client/issues/737) Fixed incorrect contrast in warning messages when using dark theme.
+* [#726](https://github.com/shlinkio/shlink-web-client/issues/726) Fixed delete server and delete short URL modals getting removed from the DOM before finishing close transition.
+* [#749](https://github.com/shlinkio/shlink-web-client/issues/749) Fixed broken short URLs table when some short URL has a too long custom slug.
+
+
 ## [3.7.3] - 2022-09-13
 ### Added
 * [#703](https://github.com/shlinkio/shlink-web-client/issues/703) Added support to publish docker image in GHCR.

CONTRIBUTING.md

@@ -6,7 +6,7 @@ You will also see how to ensure the code fulfills the expected code checks, and
 
 ## System dependencies
 
-The project can be run inside a docker container through provided docker-compose configuration.
+The project can be run inside a docker container through provided `docker compose` configuration.
 
 Because of this, the only actual dependencies are [docker](https://docs.docker.com/get-docker/) and [docker-compose](https://docs.docker.com/compose/install/).
 
@@ -17,7 +17,7 @@ The first thing you need to do is fork the repository, and clone it in your loca
 Then you will have to follow these steps:
 
 * Copy the file `docker-compose.override.yml.dist` by also removing the `dist` extension.
-* Start-up the project by running `docker-compose up`.
+* Start-up the project by running `docker compose up`.
 
 Once this is finished, you will have the project exposed in port `3000` (http://localhost:3000).
 

Dockerfile

@@ -1,12 +1,15 @@
-FROM node:16.15-alpine as node
+FROM node:21.6-alpine as node
 COPY . /shlink-web-client
 ARG VERSION="latest"
 ENV VERSION ${VERSION}
-RUN cd /shlink-web-client && npm ci --force && NODE_ENV=production npm run build
+RUN cd /shlink-web-client && npm ci && npm run build
 
-FROM nginx:1.21-alpine
+FROM nginxinc/nginx-unprivileged:1.25-alpine
+ARG UID=101
 LABEL maintainer="Alejandro Celaya <alejandro@alejandrocelaya.com>"
+USER root
 RUN rm -r /usr/share/nginx/html && rm /etc/nginx/conf.d/default.conf
+USER $UID
 COPY config/docker/nginx.conf /etc/nginx/conf.d/default.conf
 COPY scripts/docker/servers_from_env.sh /docker-entrypoint.d/30-shlink-servers-json.sh
 COPY --from=node /shlink-web-client/build /usr/share/nginx/html

README.md

@@ -1,11 +1,12 @@
 # shlink-web-client
 
-[![Build Status](https://img.shields.io/github/workflow/status/shlinkio/shlink-web-client/Continuous%20integration/develop?logo=github&style=flat-square)](https://github.com/shlinkio/shlink-web-client/actions?query=workflow%3A%22Continuous+integration%22)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/shlinkio/shlink-web-client/ci.yml?branch=develop&logo=github&style=flat-square)](https://github.com/shlinkio/shlink-web-client/actions/workflows/ci.yml?query=workflow%3A%22Continuous+integration%22)
 [![Code Coverage](https://img.shields.io/codecov/c/gh/shlinkio/shlink-web-client/develop?style=flat-square)](https://app.codecov.io/gh/shlinkio/shlink-web-client)
 [![GitHub release](https://img.shields.io/github/release/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/releases/latest)
 [![Docker pulls](https://img.shields.io/docker/pulls/shlinkio/shlink-web-client.svg?logo=docker&style=flat-square)](https://hub.docker.com/r/shlinkio/shlink-web-client/)
 [![GitHub license](https://img.shields.io/github/license/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/blob/main/LICENSE)
-[![Twitter](https://img.shields.io/twitter/follow/shlinkio?color=blue&label=follow&logo=twitter&style=flat-square)](https://twitter.com/shlinkio)
+[![Twitter](https://img.shields.io/badge/follow-shlinkio-blue.svg?style=flat-square&logo=x&color=black)](https://twitter.com/shlinkio)
+[![Mastodon](https://img.shields.io/mastodon/follow/109329425426175098?color=%236364ff&domain=https%3A%2F%2Ffosstodon.org&label=follow&logo=mastodon&logoColor=white&style=flat-square)](https://fosstodon.org/@shlinkio)
 [![Paypal Donate](https://img.shields.io/badge/Donate-paypal-blue.svg?style=flat-square&logo=paypal&colorA=cccccc)](https://slnk.to/donate)
 
 A ReactJS-based progressive web application for [Shlink](https://shlink.io).
@@ -53,7 +54,7 @@ Those servers can be exported and imported in other browsers, but if for some re
 [
   {
     "name": "Main server",
-    "url": "https://doma.in",
+    "url": "https://s.test",
     "apiKey": "09c972b7-506b-49f1-a19a-d729e22e599c"
   },
   {
@@ -68,7 +69,7 @@ Those servers can be exported and imported in other browsers, but if for some re
 
 If you are using the shlink-web-client docker image, you can mount the `servers.json` file in a volume inside `/usr/share/nginx/html`, which is the app's document root inside the container.
 
-    docker run --name shlink-web-client -p 8000:80 -v ${PWD}/servers.json:/usr/share/nginx/html/servers.json shlinkio/shlink-web-client
+    docker run --name shlink-web-client -p 8000:8080 -v ${PWD}/servers.json:/usr/share/nginx/html/servers.json shlinkio/shlink-web-client
     
 Alternatively, you can mount a `conf.d` directory, which in turn contains the `servers.json` file, in a volume inside `/usr/share/nginx/html`. *(since shlink-web-client 3.2.0)*.
 
@@ -84,7 +85,7 @@ If you want to pre-configure a single server, you can provide its config via env
     docker run \
         --name shlink-web-client \
         -p 8000:80 \
-        -e SHLINK_SERVER_URL=https://doma.in \
+        -e SHLINK_SERVER_URL=https://s.test \
         -e SHLINK_SERVER_API_KEY=6aeb82c6-e275-4538-a747-31f9abfba63c \
         shlinkio/shlink-web-client
     ```

babel.config.js

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

config/docker/nginx.conf

@@ -1,5 +1,5 @@
 server {
-    listen 80 default_server;
+    listen 8080 default_server;
     charset utf-8;
     root /usr/share/nginx/html;
     index index.html;

config/jest/cssTransform.js

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

config/jest/fileTransform.js

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

config/jest/setupTests.ts

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

config/test/setupTests.ts

@@ -0,0 +1,24 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import axe from 'axe-core';
+import { afterEach } from 'vitest';
+
+axe.configure({
+  checks: [
+    {
+      // Disable color contrast checking, as it doesn't work in jsdom
+      id: 'color-contrast',
+      enabled: false,
+    },
+  ],
+});
+
+// Clear all mocks and cleanup DOM after every test
+afterEach(() => {
+  vi.clearAllMocks();
+  cleanup();
+});
+
+HTMLCanvasElement.prototype.getContext = (() => {}) as any;
+(global as any).scrollTo = () => {};
+(global as any).matchMedia = () => ({ matches: false });

docker-compose.yml

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

index.html

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

indocker

@@ -2,7 +2,7 @@
 
 # Run docker container if it's not up yet
 if ! [[ $(docker ps | grep shlink_web_client_node) ]]; then
-    docker-compose up -d
+    docker compose up -d
 fi
 
 docker exec -it shlink_web_client_node /bin/sh -c "cd /home/shlink/www && $*"

jest.config.js

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

manifest.ts

@@ -0,0 +1,147 @@
+import type { ManifestOptions } from 'vite-plugin-pwa';
+
+export const manifest: Partial<ManifestOptions> = {
+  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

@@ -5,6 +5,7 @@
   "homepage": "",
   "repository": "https://github.com/shlinkio/shlink-web-client",
   "license": "MIT",
+  "type": "module",
   "scripts": {
     "lint": "npm run lint:css && npm run lint:js",
     "lint:css": "stylelint src/*.scss src/**/*.scss",
@@ -12,99 +13,73 @@
     "lint:fix": "npm run lint:css:fix && npm run lint:js:fix",
     "lint:css:fix": "npm run lint:css -- --fix",
     "lint:js:fix": "npm run lint:js -- --fix",
-    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
-    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build && node scripts/replace-version.mjs",
+    "types": "tsc",
+    "start": "vite serve --host=0.0.0.0",
+    "preview": "vite preview --host=0.0.0.0",
+    "build": "npm run types && vite build && node scripts/replace-version.mjs",
     "build:dist": "npm run build && node scripts/create-dist-file.mjs",
-    "build:serve": "serve -p 5000 ./build",
-    "test": "jest --env=jsdom --colors",
-    "test:coverage": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary",
-    "test:ci": "npm run test:coverage -- --coverageReporters=clover --ci",
-    "test:pretty": "npm run test:coverage -- --coverageReporters=html",
-    "test:verbose": "npm run test -- --verbose",
-    "mutate": "./node_modules/.bin/stryker run --concurrency 4 --ignoreStatic"
+    "test": "vitest run --run",
+    "test:watch": "vitest --watch",
+    "test:ci": "npm run test -- --coverage",
+    "test:verbose": "npm run test -- --verbose"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.0.0",
-    "@fortawesome/fontawesome-svg-core": "^1.3.0",
-    "@fortawesome/free-regular-svg-icons": "^6.0.0",
-    "@fortawesome/free-solid-svg-icons": "^6.0.0",
-    "@fortawesome/react-fontawesome": "^0.1.17",
-    "axios": "^0.26.0",
-    "bootstrap": "^5.1.3",
-    "bottlejs": "^2.0.0",
-    "bowser": "^2.11.0",
-    "chart.js": "^3.7.1",
-    "classnames": "^2.3.1",
-    "compare-versions": "^4.1.3",
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@json2csv/plainjs": "^7.0.5",
+    "@reduxjs/toolkit": "^2.1.0",
+    "@shlinkio/data-manipulation": "^1.0.3",
+    "@shlinkio/shlink-frontend-kit": "^0.4.2",
+    "@shlinkio/shlink-js-sdk": "^0.2.2",
+    "@shlinkio/shlink-web-component": "^0.5.0",
+    "bootstrap": "5.2.3",
+    "bottlejs": "^2.0.1",
+    "clsx": "^2.1.0",
+    "compare-versions": "^6.1.0",
     "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",
-    "ramda": "^0.27.2",
-    "react": "^18.1.0",
-    "react-chartjs-2": "^4.1.0",
-    "react-colorful": "^5.5.1",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-datepicker": "^4.8.0",
-    "react-dom": "^18.1.0",
-    "react-external-link": "^2.0.0",
-    "react-leaflet": "^4.0.0",
-    "react-redux": "^8.0.0",
-    "react-router-dom": "^6.3.0",
-    "react-swipeable": "^7.0.0",
-    "react-tag-autocomplete": "^6.3.0",
-    "reactstrap": "^9.0.1",
-    "redux": "^4.2.0",
-    "redux-localstorage-simple": "^2.4.1",
-    "redux-thunk": "^2.4.1",
-    "stream": "^0.0.2",
-    "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"
+    "date-fns": "^3.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-external-link": "^2.2.0",
+    "react-redux": "^9.1.0",
+    "react-router-dom": "^6.21.3",
+    "reactstrap": "^9.2.2",
+    "redux-localstorage-simple": "^2.5.1",
+    "uuid": "^9.0.1",
+    "workbox-core": "^7.0.0",
+    "workbox-expiration": "^7.0.0",
+    "workbox-precaching": "^7.0.0",
+    "workbox-routing": "^7.0.0",
+    "workbox-strategies": "^7.0.0"
   },
   "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/jest": "^27.4.1",
-    "@types/json2csv": "^5.0.3",
-    "@types/leaflet": "^1.7.9",
-    "@types/qs": "^6.9.7",
-    "@types/ramda": "0.27.38",
-    "@types/react": "^18.0.8",
-    "@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/uuid": "^8.3.4",
-    "adm-zip": "^0.5.9",
-    "babel-jest": "^28.0.3",
-    "chalk": "^5.0.1",
-    "eslint": "^8.12.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.0.3",
-    "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^28.0.2",
-    "react-scripts": "^5.0.1",
-    "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.49.9",
-    "serve": "^13.0.2",
-    "stryker-cli": "^1.0.2",
-    "stylelint": "^14.8.2",
-    "ts-mockery": "^1.2.0",
-    "typescript": "^4.6.2",
-    "webpack": "^5.70.0"
+    "@shlinkio/eslint-config-js-coding-standard": "~2.3.0",
+    "@shlinkio/stylelint-config-css-coding-standard": "~1.1.1",
+    "@testing-library/jest-dom": "^6.3.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@total-typescript/shoehorn": "^0.1.1",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@types/uuid": "^9.0.8",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.2.2",
+    "adm-zip": "^0.5.10",
+    "axe-core": "^4.8.3",
+    "chalk": "^5.3.0",
+    "eslint": "^8.56.0",
+    "history": "^5.3.0",
+    "jsdom": "^24.0.0",
+    "sass": "^1.70.0",
+    "stylelint": "^15.11.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
+    "vite-plugin-pwa": "^0.17.5",
+    "vitest": "^1.2.2"
   },
   "browserslist": [
     ">0.2%",

public/index.html

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

public/manifest.json

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

scripts/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,9 +1,6 @@
-declare module 'event-source-polyfill' {
-  declare class EventSourcePolyfill {
-    public onmessage?: ({ data }: { data: string }) => void;
-    public onerror?: ({ status }: { status: number }) => void;
-    public close: () => void;
-    public constructor(hubUrl: URL, options?: any);
+declare module '@json2csv/plainjs' {
+  export class Parser {
+    parse: <T>(data: T[]) => string;
   }
 }
 

src/api/ShlinkApiError.tsx

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

src/api/services/ShlinkApiClient.ts

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

src/api/services/ShlinkApiClientBuilder.ts

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

src/api/services/provideServices.ts

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

src/api/types/actions.ts

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

src/api/types/index.ts

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

src/api/utils/index.ts

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

src/app/App.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import 'node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 .app-container {
   height: 100%;

src/app/App.tsx

@@ -1,57 +1,79 @@
-import { useEffect, FC } from 'react';
+import { changeThemeInMarkup, getSystemPreferredTheme } from '@shlinkio/shlink-frontend-kit';
+import { clsx } from 'clsx';
+import type { FC } from 'react';
+import { useEffect, useRef } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
-import classNames from 'classnames';
-import { NotFound } from '../common/NotFound';
-import { ServersMap } from '../servers/data';
-import { Settings } from '../settings/reducers/settings';
-import { changeThemeInMarkup } from '../utils/theme';
 import { AppUpdateBanner } from '../common/AppUpdateBanner';
+import { NotFound } from '../common/NotFound';
+import type { FCWithDeps } from '../container/utils';
+import { componentFactory, useDependencies } from '../container/utils';
+import type { ServersMap } from '../servers/data';
+import type { AppSettings } from '../settings/reducers/settings';
 import { forceUpdate } from '../utils/helpers/sw';
 import './App.scss';
 
-interface AppProps {
+type AppProps = {
   fetchServers: () => void;
   servers: ServersMap;
-  settings: Settings;
+  settings: AppSettings;
   resetAppUpdate: () => void;
   appUpdated: boolean;
-}
+};
+
+type AppDeps = {
+  MainHeader: FC;
+  Home: FC;
+  ShlinkWebComponentContainer: FC;
+  CreateServer: FC;
+  EditServer: FC;
+  Settings: FC;
+  ManageServers: FC;
+  ShlinkVersionsContainer: FC;
+};
+
+const App: FCWithDeps<AppProps, AppDeps> = (
+  { fetchServers, servers, settings, appUpdated, resetAppUpdate },
+) => {
+  const {
+    MainHeader,
+    Home,
+    ShlinkWebComponentContainer,
+    CreateServer,
+    EditServer,
+    Settings,
+    ManageServers,
+    ShlinkVersionsContainer,
+  } = useDependencies(App);
 
-export const App = (
-  MainHeader: FC,
-  Home: FC,
-  MenuLayout: FC,
-  CreateServer: FC,
-  EditServer: FC,
-  SettingsComp: FC,
-  ManageServers: FC,
-  ShlinkVersionsContainer: FC,
-) => ({ fetchServers, servers, settings, appUpdated, resetAppUpdate }: AppProps) => {
   const location = useLocation();
+  const initialServers = useRef(servers);
   const isHome = location.pathname === '/';
 
   useEffect(() => {
-    // On first load, try to fetch the remote servers if the list is empty
-    if (Object.keys(servers).length === 0) {
+    // Try to fetch the remote servers if the list is empty at first
+    // We use a ref because we don't care if the servers list becomes empty later
+    if (Object.keys(initialServers.current).length === 0) {
       fetchServers();
     }
+  }, [fetchServers]);
 
-    changeThemeInMarkup(settings.ui?.theme ?? 'light');
-  }, []);
+  useEffect(() => {
+    changeThemeInMarkup(settings.ui?.theme ?? getSystemPreferredTheme());
+  }, [settings.ui?.theme]);
 
   return (
     <div className="container-fluid app-container">
       <MainHeader />
 
       <div className="app">
-        <div className={classNames('shlink-wrapper', { 'd-flex d-md-block align-items-center': isHome })}>
+        <div className={clsx('shlink-wrapper', { 'd-flex d-md-block align-items-center': isHome })}>
           <Routes>
             <Route index element={<Home />} />
-            <Route path="/settings/*" element={<SettingsComp />} />
+            <Route path="/settings/*" element={<Settings />} />
             <Route path="/manage-servers" element={<ManageServers />} />
             <Route path="/server/create" element={<CreateServer />} />
             <Route path="/server/:serverId/edit" element={<EditServer />} />
-            <Route path="/server/:serverId/*" element={<MenuLayout />} />
+            <Route path="/server/:serverId/*" element={<ShlinkWebComponentContainer />} />
             <Route path="*" element={<NotFound />} />
           </Routes>
         </div>
@@ -65,3 +87,14 @@ export const App = (
     </div>
   );
 };
+
+export const AppFactory = componentFactory(App, [
+  'MainHeader',
+  'Home',
+  'ShlinkWebComponentContainer',
+  'CreateServer',
+  'EditServer',
+  'Settings',
+  'ManageServers',
+  'ShlinkVersionsContainer',
+]);

src/app/reducers/appUpdates.ts

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

src/app/services/provideServices.ts

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

src/common/AppUpdateBanner.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import 'node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 @import '../utils/mixins/horizontal-align';
 
 .app-update-banner.app-update-banner {

src/common/AppUpdateBanner.tsx

@@ -1,9 +1,9 @@
-import { FC, MouseEventHandler } from 'react';
-import { Alert, Button } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSyncAlt as reloadIcon } from '@fortawesome/free-solid-svg-icons';
-import { SimpleCard } from '../utils/SimpleCard';
-import { useToggle } from '../utils/helpers/hooks';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { SimpleCard, useToggle } from '@shlinkio/shlink-frontend-kit';
+import type { MouseEventHandler } from 'react';
+import { forwardRef, useCallback } from 'react';
+import { Alert, Button } from 'reactstrap';
 import './AppUpdateBanner.scss';
 
 interface AppUpdateBannerProps {
@@ -12,15 +12,15 @@ interface AppUpdateBannerProps {
   forceUpdate: Function;
 }
 
-export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, toggle, forceUpdate }) => {
+export const AppUpdateBanner = forwardRef<HTMLElement, AppUpdateBannerProps>(({ isOpen, toggle, forceUpdate }, ref) => {
   const [isUpdating,, setUpdating] = useToggle();
-  const update = () => {
+  const update = useCallback(() => {
     setUpdating();
     forceUpdate();
-  };
+  }, [forceUpdate, setUpdating]);
 
   return (
-    <Alert className="app-update-banner" isOpen={isOpen} toggle={toggle} tag={SimpleCard} color="secondary">
+    <Alert className="app-update-banner" isOpen={isOpen} toggle={toggle} tag={SimpleCard} color="secondary" innerRef={ref}>
       <h4 className="mb-4">This app has just been updated!</h4>
       <p className="mb-0">
         Restart it to enjoy the new features.
@@ -31,4 +31,4 @@ export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, toggle, forc
       </p>
     </Alert>
   );
-};
+});

src/common/AsideMenu.scss

@@ -1,81 +0,0 @@
-@import '../utils/base';
-@import '../utils/mixins/vertical-align';
-
-.aside-menu {
-  width: $asideMenuWidth;
-  background-color: var(--primary-color);
-  box-shadow: rgb(0 0 0 / .05) 0 8px 15px;
-  position: fixed !important;
-  padding-top: 13px;
-  padding-bottom: 10px;
-  top: $headerHeight;
-  bottom: 0;
-  left: 0;
-  display: block;
-  z-index: 1010;
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  @media (min-width: $mdMin) {
-    padding: 30px 15px 15px;
-  }
-
-  @media (max-width: $smMax) {
-    transition: left 300ms;
-    top: $headerHeight - 3px;
-    box-shadow: -10px 0 50px 11px rgb(0 0 0 / .55);
-  }
-}
-
-.aside-menu--hidden {
-  @media (max-width: $smMax) {
-    left: -($asideMenuWidth + 35px);
-  }
-}
-
-.aside-menu__nav {
-  height: 100%;
-}
-
-.aside-menu__item {
-  padding: 10px 20px;
-  margin: 0 -15px;
-  text-decoration: none !important;
-  cursor: pointer;
-
-  @media (max-width: $smMax) {
-    margin: 0;
-  }
-}
-
-.aside-menu__item:hover {
-  background-color: var(--secondary-color);
-}
-
-.aside-menu__item--selected,
-.aside-menu__item--selected:hover {
-  color: #ffffff;
-  background-color: var(--brand-color);
-}
-
-.aside-menu__item--divider {
-  border-bottom: 1px solid #eeeeee;
-  margin: 20px 0;
-}
-
-.aside-menu__item--danger {
-  color: $dangerColor;
-}
-
-.aside-menu__item--push {
-  margin-top: auto;
-}
-
-.aside-menu__item--danger:hover {
-  color: #ffffff;
-  background-color: $dangerColor;
-}
-
-.aside-menu__item-text {
-  margin-left: 8px;
-}

src/common/AsideMenu.tsx

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

src/common/ErrorHandler.tsx

@@ -1,16 +1,19 @@
-import { Component, ReactNode } from 'react';
+import { SimpleCard } from '@shlinkio/shlink-frontend-kit';
+import type { PropsWithChildren, ReactNode } from 'react';
+import { Component } from 'react';
 import { Button } from 'reactstrap';
-import { SimpleCard } from '../utils/SimpleCard';
 
-interface ErrorHandlerState {
+type ErrorHandlerProps = PropsWithChildren<{
+  location?: typeof window.location;
+  console?: typeof window.console;
+}>;
+
+type ErrorHandlerState = {
   hasError: boolean;
-}
+};
 
-export const ErrorHandler = (
-  { location }: Window,
-  { error }: Console,
-) => class extends Component<any, ErrorHandlerState> {
-  public constructor(props: object) {
+export class ErrorHandler extends Component<ErrorHandlerProps, ErrorHandlerState> {
+  public constructor(props: ErrorHandlerProps) {
     super(props);
     this.state = { hasError: false };
   }
@@ -20,13 +23,14 @@ export const ErrorHandler = (
   }
 
   public componentDidCatch(e: Error): void {
-    if (process.env.NODE_ENV !== 'development') {
-      error(e);
-    }
+    const { console = globalThis.console } = this.props;
+    console.error(e);
   }
 
   public render(): ReactNode {
     const { hasError } = this.state;
+    const { location = globalThis.location } = this.props;
+
     if (hasError) {
       return (
         <div className="home">
@@ -43,4 +47,4 @@ export const ErrorHandler = (
     const { children } = this.props;
     return children;
   }
-};
+}

src/common/Home.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import 'node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 @import '../utils/mixins/vertical-align';
 
 $mainCardWidth: 720px;

src/common/Home.tsx

@@ -1,12 +1,11 @@
+import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect } from 'react';
-import { isEmpty, values } from 'ramda';
+import { ExternalLink } from 'react-external-link';
 import { Link, useNavigate } from 'react-router-dom';
 import { Card, Row } from 'reactstrap';
-import { ExternalLink } from 'react-external-link';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
+import type { ServersMap } from '../servers/data';
 import { ServersListGroup } from '../servers/ServersListGroup';
-import { ServersMap } from '../servers/data';
 import { ShlinkLogo } from './img/ShlinkLogo';
 import './Home.scss';
 
@@ -16,14 +15,14 @@ interface HomeProps {
 
 export const Home = ({ servers }: HomeProps) => {
   const navigate = useNavigate();
-  const serversList = values(servers);
-  const hasServers = !isEmpty(serversList);
+  const serversList = Object.values(servers);
+  const hasServers = serversList.length > 0;
 
   useEffect(() => {
     // Try to redirect to the first server marked as auto-connect
     const autoConnectServer = serversList.find(({ autoConnect }) => autoConnect);
     autoConnectServer && navigate(`/server/${autoConnectServer.id}`);
-  }, []);
+  }, [serversList, navigate]);
 
   return (
     <div className="home">

src/common/MainHeader.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import 'node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 .main-header.main-header {
   color: white;

src/common/MainHeader.tsx

@@ -1,22 +1,31 @@
 import { faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { FC, useEffect } from 'react';
+import { useToggle } from '@shlinkio/shlink-frontend-kit';
+import { clsx } from 'clsx';
+import type { FC } from 'react';
+import { useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
-import classNames from 'classnames';
-import { useToggle } from '../utils/helpers/hooks';
+import type { FCWithDeps } from '../container/utils';
+import { componentFactory, useDependencies } from '../container/utils';
 import { ShlinkLogo } from './img/ShlinkLogo';
 import './MainHeader.scss';
 
-export const MainHeader = (ServersDropdown: FC) => () => {
-  const [isOpen, toggleOpen, , close] = useToggle();
+type MainHeaderDeps = {
+  ServersDropdown: FC;
+};
+
+const MainHeader: FCWithDeps<{}, MainHeaderDeps> = () => {
+  const { ServersDropdown } = useDependencies(MainHeader);
+  const [isNotCollapsed, toggleCollapse, , collapse] = useToggle();
   const location = useLocation();
   const { pathname } = location;
 
-  useEffect(close, [location]);
+  // In mobile devices, collapse the navbar when location changes
+  useEffect(collapse, [location, collapse]);
 
   const settingsPath = '/settings';
-  const toggleClass = classNames('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isOpen });
+  const toggleClass = clsx('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isNotCollapsed });
 
   return (
     <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
@@ -24,11 +33,11 @@ export const MainHeader = (ServersDropdown: FC) => () => {
         <ShlinkLogo className="main-header__brand-logo" color="white" /> Shlink
       </NavbarBrand>
 
-      <NavbarToggler onClick={toggleOpen}>
+      <NavbarToggler onClick={toggleCollapse}>
         <FontAwesomeIcon icon={arrowIcon} className={toggleClass} />
       </NavbarToggler>
 
-      <Collapse navbar isOpen={isOpen}>
+      <Collapse navbar isOpen={isNotCollapsed}>
         <Nav navbar className="ms-auto">
           <NavItem>
             <NavLink tag={Link} to={settingsPath} active={pathname.startsWith(settingsPath)}>
@@ -41,3 +50,5 @@ export const MainHeader = (ServersDropdown: FC) => () => {
     </Navbar>
   );
 };
+
+export const MainHeaderFactory = componentFactory(MainHeader, ['ServersDropdown']);

src/common/MenuLayout.scss

@@ -1,37 +0,0 @@
-@import '../utils/base';
-
-.menu-layout__swipeable {
-  height: 100%;
-}
-
-.menu-layout__swipeable-inner {
-  height: 100%;
-}
-
-.menu-layout__burger-icon {
-  display: none;
-  transition: color 300ms;
-  position: fixed;
-  top: 18px;
-  z-index: 1035;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: rgb(255 255 255 / .5);
-
-  @media (max-width: $smMax) {
-    display: inline-block;
-  }
-}
-
-.menu-layout__burger-icon--active {
-  color: white;
-}
-
-.menu-layout__container.menu-layout__container {
-  padding: 20px 0 0;
-  min-height: 100%;
-
-  @media (min-width: $mdMin) {
-    padding: 30px 0 0 $asideMenuWidth;
-  }
-}

src/common/MenuLayout.tsx

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

src/common/NoMenuLayout.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import 'node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 .no-menu-wrapper {
   padding: 15px 0 0;

src/common/NoMenuLayout.tsx

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

src/common/NotFound.tsx

@@ -1,6 +1,6 @@
-import { FC, PropsWithChildren } from 'react';
+import { SimpleCard } from '@shlinkio/shlink-frontend-kit';
+import type { FC, PropsWithChildren } from 'react';
 import { Link } from 'react-router-dom';
-import { SimpleCard } from '../utils/SimpleCard';
 
 type NotFoundProps = PropsWithChildren<{ to?: string }>;
 

src/common/ScrollToTop.tsx

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

src/common/ShlinkVersions.tsx

@@ -1,10 +1,10 @@
-import { pipe } from 'ramda';
 import { ExternalLink } from 'react-external-link';
+import type { SelectedServer } from '../servers/data';
+import { isReachableServer } from '../servers/data';
 import { versionToPrintable, versionToSemVer } from '../utils/helpers/version';
-import { isReachableServer, SelectedServer } from '../servers/data';
 
 const SHLINK_WEB_CLIENT_VERSION = '%_VERSION_%';
-const normalizeVersion = pipe(versionToSemVer(), versionToPrintable);
+const normalizeVersion = (version: string) => versionToPrintable(versionToSemVer(version));
 
 export interface ShlinkVersionsProps {
   selectedServer: SelectedServer;

src/common/ShlinkVersionsContainer.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import 'node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 .shlink-versions-container--with-sidebar {
   margin-left: 0;

src/common/ShlinkVersionsContainer.tsx

@@ -1,17 +1,22 @@
-import classNames from 'classnames';
-import { SelectedServer } from '../servers/data';
+import { clsx } from 'clsx';
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import type { SelectedServer } from '../servers/data';
 import { ShlinkVersions } from './ShlinkVersions';
-import { Sidebar } from './reducers/sidebar';
 import './ShlinkVersionsContainer.scss';
 
-export interface ShlinkVersionsContainerProps {
+export type ShlinkVersionsContainerProps = {
   selectedServer: SelectedServer;
-  sidebar: Sidebar;
-}
+};
 
-export const ShlinkVersionsContainer = ({ selectedServer, sidebar }: ShlinkVersionsContainerProps) => {
-  const classes = classNames('text-center', {
-    'shlink-versions-container--with-sidebar': sidebar.sidebarPresent,
+const SHLINK_CONTAINER_PATH_PATTERN = /^\/server\/[a-zA-Z0-9-]*\/(?!edit)/;
+
+export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => {
+  const { pathname } = useLocation();
+  const withPadding = useMemo(() => SHLINK_CONTAINER_PATH_PATTERN.test(pathname), [pathname]);
+
+  const classes = clsx('text-center', {
+    'shlink-versions-container--with-sidebar': withPadding,
   });
 
   return (

src/common/ShlinkWebComponentContainer.tsx

@@ -0,0 +1,62 @@
+import type { Settings, ShlinkWebComponentType, TagColorsStorage } from '@shlinkio/shlink-web-component';
+import type { FC } from 'react';
+import { memo } from 'react';
+import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuilder';
+import type { FCWithDeps } from '../container/utils';
+import { componentFactory, useDependencies } from '../container/utils';
+import { isReachableServer } from '../servers/data';
+import type { WithSelectedServerProps } from '../servers/helpers/withSelectedServer';
+import { withSelectedServer } from '../servers/helpers/withSelectedServer';
+import { NotFound } from './NotFound';
+
+type ShlinkWebComponentContainerProps = WithSelectedServerProps & {
+  settings: Settings;
+};
+
+type ShlinkWebComponentContainerDeps = {
+  buildShlinkApiClient: ShlinkApiClientBuilder,
+  TagColorsStorage: TagColorsStorage,
+  ShlinkWebComponent: ShlinkWebComponentType,
+  ServerError: FC,
+};
+
+const ShlinkWebComponentContainer: FCWithDeps<
+ShlinkWebComponentContainerProps,
+ShlinkWebComponentContainerDeps
+// FIXME Using `memo` here to solve a flickering effect in charts.
+//       memo is probably not the right solution. The root cause is the withSelectedServer HOC, but I couldn't fix the
+//       extra rendering there.
+//       This should be revisited at some point.
+> = withSelectedServer(memo(({ selectedServer, settings }) => {
+  const {
+    buildShlinkApiClient,
+    TagColorsStorage: tagColorsStorage,
+    ShlinkWebComponent,
+    ServerError,
+  } = useDependencies(ShlinkWebComponentContainer);
+
+  if (!isReachableServer(selectedServer)) {
+    return <ServerError />;
+  }
+
+  const routesPrefix = `/server/${selectedServer.id}`;
+  return (
+    <ShlinkWebComponent
+      serverVersion={selectedServer.version}
+      apiClient={buildShlinkApiClient(selectedServer)}
+      settings={settings}
+      routesPrefix={routesPrefix}
+      tagColorsStorage={tagColorsStorage}
+      createNotFound={(nonPrefixedHomePath) => (
+        <NotFound to={`${routesPrefix}${nonPrefixedHomePath}`}>List short URLs</NotFound>
+      )}
+    />
+  );
+}));
+
+export const ShlinkWebComponentContainerFactory = componentFactory(ShlinkWebComponentContainer, [
+  'buildShlinkApiClient',
+  'TagColorsStorage',
+  'ShlinkWebComponent',
+  'ServerError',
+]);

src/common/SimplePaginator.scss

@@ -1,3 +0,0 @@
-.simple-paginator {
-  user-select: none;
-}

src/common/SimplePaginator.tsx

@@ -1,50 +0,0 @@
-import { FC } from 'react';
-import classNames from 'classnames';
-import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-import {
-  pageIsEllipsis,
-  keyForPage,
-  NumberOrEllipsis,
-  progressivePagination,
-  prettifyPageNumber,
-} from '../utils/helpers/pagination';
-import './SimplePaginator.scss';
-
-interface SimplePaginatorProps {
-  pagesCount: number;
-  currentPage: number;
-  setCurrentPage: (currentPage: number) => void;
-  centered?: boolean;
-}
-
-export const SimplePaginator: FC<SimplePaginatorProps> = (
-  { pagesCount, currentPage, setCurrentPage, centered = true },
-) => {
-  if (pagesCount < 2) {
-    return null;
-  }
-
-  const onClick = (page: NumberOrEllipsis) => () => !pageIsEllipsis(page) && setCurrentPage(page);
-
-  return (
-    <Pagination listClassName={classNames('flex-wrap mb-0 simple-paginator', { 'justify-content-center': centered })}>
-      <PaginationItem disabled={currentPage <= 1}>
-        <PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} />
-      </PaginationItem>
-      {progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
-        <PaginationItem
-          key={keyForPage(pageNumber, index)}
-          disabled={pageIsEllipsis(pageNumber)}
-          active={currentPage === pageNumber}
-        >
-          <PaginationLink role="link" tag="span" onClick={onClick(pageNumber)}>
-            {prettifyPageNumber(pageNumber)}
-          </PaginationLink>
-        </PaginationItem>
-      ))}
-      <PaginationItem disabled={currentPage >= pagesCount}>
-        <PaginationLink next tag="span" onClick={onClick(currentPage + 1)} />
-      </PaginationItem>
-    </Pagination>
-  );
-};

src/common/img/ShlinkLogo.tsx

@@ -1,4 +1,4 @@
-import { MAIN_COLOR } from '../../utils/theme';
+import { MAIN_COLOR } from '@shlinkio/shlink-frontend-kit';
 
 export interface ShlinkLogoProps {
   color?: string;

src/common/react-tag-autocomplete.scss

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

src/common/reducers/sidebar.ts

@@ -1,25 +0,0 @@
-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';
-
-export interface Sidebar {
-  sidebarPresent: boolean;
-}
-
-type SidebarRenderedAction = Action<string>;
-type SidebarNotRenderedAction = Action<string>;
-
-const initialState: Sidebar = {
-  sidebarPresent: false,
-};
-
-export default buildReducer<Sidebar, SidebarRenderedAction & SidebarNotRenderedAction>({
-  [SIDEBAR_PRESENT]: () => ({ sidebarPresent: true }),
-  [SIDEBAR_NOT_PRESENT]: () => ({ sidebarPresent: false }),
-}, initialState);
-
-export const sidebarPresent = buildActionCreator(SIDEBAR_PRESENT);
-
-export const sidebarNotPresent = buildActionCreator(SIDEBAR_NOT_PRESENT);

src/common/services/ImageDownloader.ts

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

src/common/services/ReportExporter.ts

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

src/common/services/provideServices.ts

@@ -1,65 +1,37 @@
-import axios from 'axios';
-import Bottle from 'bottlejs';
-import { ScrollToTop } from '../ScrollToTop';
-import { MainHeader } from '../MainHeader';
-import { Home } from '../Home';
-import { MenuLayout } from '../MenuLayout';
-import { AsideMenu } from '../AsideMenu';
-import { ErrorHandler } from '../ErrorHandler';
-import { ShlinkVersionsContainer } from '../ShlinkVersionsContainer';
-import { ConnectDecorator } from '../../container/types';
+import { FetchHttpClient } from '@shlinkio/shlink-js-sdk/browser';
+import { ShlinkWebComponent } from '@shlinkio/shlink-web-component';
+import type Bottle from 'bottlejs';
+import type { 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 { ErrorHandler } from '../ErrorHandler';
+import { Home } from '../Home';
+import { MainHeaderFactory } from '../MainHeader';
+import { ScrollToTop } from '../ScrollToTop';
+import { ShlinkVersionsContainer } from '../ShlinkVersionsContainer';
+import { ShlinkWebComponentContainerFactory } from '../ShlinkWebComponentContainer';
 
-const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
+export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Services
-  bottle.constant('window', (global as any).window);
-  bottle.constant('console', global.console);
-  bottle.constant('axios', axios);
-
-  bottle.service('ImageDownloader', ImageDownloader, 'axios', 'window');
-  bottle.service('ReportExporter', ReportExporter, 'window', 'jsonToCsv');
+  bottle.constant('window', window);
+  bottle.constant('console', console);
+  bottle.constant('fetch', window.fetch.bind(window));
+  bottle.service('HttpClient', FetchHttpClient, 'fetch');
 
   // Components
   bottle.serviceFactory('ScrollToTop', () => ScrollToTop);
 
-  bottle.serviceFactory('MainHeader', MainHeader, 'ServersDropdown');
+  bottle.factory('MainHeader', MainHeaderFactory);
 
   bottle.serviceFactory('Home', () => Home);
   bottle.decorator('Home', withoutSelectedServer);
   bottle.decorator('Home', connect(['servers'], ['resetSelectedServer']));
 
-  bottle.serviceFactory(
-    'MenuLayout',
-    MenuLayout,
-    'TagsList',
-    'ShortUrlsList',
-    'AsideMenu',
-    'CreateShortUrl',
-    'ShortUrlVisits',
-    'TagVisits',
-    'DomainVisits',
-    'OrphanVisits',
-    'NonOrphanVisits',
-    'ServerError',
-    'Overview',
-    'EditShortUrl',
-    'ManageDomains',
-  );
-  bottle.decorator('MenuLayout', connect(['selectedServer'], ['selectServer', 'sidebarPresent', 'sidebarNotPresent']));
-
-  bottle.serviceFactory('AsideMenu', AsideMenu, 'DeleteServerButton');
+  bottle.serviceFactory('ShlinkWebComponent', () => ShlinkWebComponent);
+  bottle.factory('ShlinkWebComponentContainer', ShlinkWebComponentContainerFactory);
+  bottle.decorator('ShlinkWebComponentContainer', connect(['selectedServer', 'settings'], ['selectServer']));
 
   bottle.serviceFactory('ShlinkVersionsContainer', () => ShlinkVersionsContainer);
-  bottle.decorator('ShlinkVersionsContainer', connect(['selectedServer', 'sidebar']));
+  bottle.decorator('ShlinkVersionsContainer', connect(['selectedServer']));
 
-  bottle.serviceFactory('ErrorHandler', ErrorHandler, 'window', 'console');
-
-  // Actions
-  bottle.serviceFactory('sidebarPresent', () => sidebarPresent);
-  bottle.serviceFactory('sidebarNotPresent', () => sidebarNotPresent);
+  bottle.serviceFactory('ErrorHandler', () => ErrorHandler);
 };
-
-export default provideServices;

src/container/index.ts

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

src/container/store.ts

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

src/container/types.ts

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

src/container/utils.ts

@@ -0,0 +1,29 @@
+import type { IContainer } from 'bottlejs';
+import type { FC } from 'react';
+import { useRef } from 'react';
+
+export type FCWithDeps<Props, Deps> = FC<Props> & Partial<Deps>;
+
+export function useDependencies<Deps>(obj: Deps): Omit<Required<Deps>, keyof FC> {
+  const depsRef = useRef(obj as Omit<Required<Deps>, keyof FC>);
+  return depsRef.current;
+}
+
+export function componentFactory<Deps, CompType = Omit<Partial<Deps>, keyof FC>>(
+  Component: CompType,
+  deps: ReadonlyArray<keyof CompType>,
+) {
+  return (container: IContainer, console = globalThis.console) => {
+    deps.forEach((dep) => {
+      const resolvedDependency = container[dep as string];
+      if (!resolvedDependency && process.env.NODE_ENV !== 'production') {
+        console.error(`[Debug] Could not find "${dep as string}" dependency in container`);
+      }
+
+      // eslint-disable-next-line no-param-reassign
+      Component[dep] = resolvedDependency;
+    });
+
+    return Component;
+  };
+}

src/domains/DomainRow.tsx

@@ -1,63 +0,0 @@
-import { FC, useEffect } from 'react';
-import { UncontrolledTooltip } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faDotCircle as defaultDomainIcon } from '@fortawesome/free-solid-svg-icons';
-import { ShlinkDomainRedirects } from '../api/types';
-import { OptionalString } from '../utils/utils';
-import { SelectedServer } from '../servers/data';
-import { Domain } from './data';
-import { DomainStatusIcon } from './helpers/DomainStatusIcon';
-import { DomainDropdown } from './helpers/DomainDropdown';
-
-interface DomainRowProps {
-  domain: Domain;
-  defaultRedirects?: ShlinkDomainRedirects;
-  editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
-  checkDomainHealth: (domain: string) => void;
-  selectedServer: SelectedServer;
-}
-
-const Nr: FC<{ fallback: OptionalString }> = ({ fallback }) => (
-  <span className="text-muted">
-    {!fallback && <small>No redirect</small>}
-    {fallback && <>{fallback} <small>(as fallback)</small></>}
-  </span>
-);
-const DefaultDomain: FC = () => (
-  <>
-    <FontAwesomeIcon fixedWidth icon={defaultDomainIcon} className="text-primary" id="defaultDomainIcon" />
-    <UncontrolledTooltip target="defaultDomainIcon" placement="right">Default domain</UncontrolledTooltip>
-  </>
-);
-
-export const DomainRow: FC<DomainRowProps> = (
-  { domain, editDomainRedirects, checkDomainHealth, defaultRedirects, selectedServer },
-) => {
-  const { domain: authority, isDefault, redirects, status } = domain;
-
-  useEffect(() => {
-    checkDomainHealth(domain.domain);
-  }, []);
-
-  return (
-    <tr className="responsive-table__row">
-      <td className="responsive-table__cell" data-th="Is default domain">{isDefault && <DefaultDomain />}</td>
-      <th className="responsive-table__cell" data-th="Domain">{authority}</th>
-      <td className="responsive-table__cell" data-th="Base path redirect">
-        {redirects?.baseUrlRedirect ?? <Nr fallback={defaultRedirects?.baseUrlRedirect} />}
-      </td>
-      <td className="responsive-table__cell" data-th="Regular 404 redirect">
-        {redirects?.regular404Redirect ?? <Nr fallback={defaultRedirects?.regular404Redirect} />}
-      </td>
-      <td className="responsive-table__cell" data-th="Invalid short URL redirect">
-        {redirects?.invalidShortUrlRedirect ?? <Nr fallback={defaultRedirects?.invalidShortUrlRedirect} />}
-      </td>
-      <td className="responsive-table__cell text-lg-center" data-th="Status">
-        <DomainStatusIcon status={status} />
-      </td>
-      <td className="responsive-table__cell text-end">
-        <DomainDropdown domain={domain} editDomainRedirects={editDomainRedirects} selectedServer={selectedServer} />
-      </td>
-    </tr>
-  );
-};

src/domains/DomainSelector.scss

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

src/domains/DomainSelector.tsx

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

src/domains/ManageDomains.tsx

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

src/domains/data/index.ts

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

src/domains/helpers/DomainDropdown.tsx

@@ -1,51 +0,0 @@
-import { FC } from 'react';
-import { DropdownItem } from 'reactstrap';
-import { Link } from 'react-router-dom';
-import { faChartPie as pieChartIcon, faEdit as editIcon } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useToggle } from '../../utils/helpers/hooks';
-import { DropdownBtnMenu } from '../../utils/DropdownBtnMenu';
-import { EditDomainRedirectsModal } from './EditDomainRedirectsModal';
-import { Domain } from '../data';
-import { ShlinkDomainRedirects } from '../../api/types';
-import { supportsDefaultDomainRedirectsEdition, supportsDomainVisits } from '../../utils/helpers/features';
-import { getServerId, SelectedServer } from '../../servers/data';
-import { DEFAULT_DOMAIN } from '../../visits/reducers/domainVisits';
-
-interface DomainDropdownProps {
-  domain: Domain;
-  editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
-  selectedServer: SelectedServer;
-}
-
-export const DomainDropdown: FC<DomainDropdownProps> = ({ domain, editDomainRedirects, selectedServer }) => {
-  const [isOpen, toggle] = useToggle();
-  const [isModalOpen, toggleModal] = useToggle();
-  const { isDefault } = domain;
-  const canBeEdited = !isDefault || supportsDefaultDomainRedirectsEdition(selectedServer);
-  const withVisits = supportsDomainVisits(selectedServer);
-  const serverId = getServerId(selectedServer);
-
-  return (
-    <DropdownBtnMenu isOpen={isOpen} toggle={toggle}>
-      {withVisits && (
-        <DropdownItem
-          tag={Link}
-          to={`/server/${serverId}/domain/${domain.domain}${domain.isDefault ? `_${DEFAULT_DOMAIN}` : ''}/visits`}
-        >
-          <FontAwesomeIcon icon={pieChartIcon} fixedWidth /> Visit stats
-        </DropdownItem>
-      )}
-      <DropdownItem disabled={!canBeEdited} onClick={!canBeEdited ? undefined : toggleModal}>
-        <FontAwesomeIcon fixedWidth icon={editIcon} /> Edit redirects
-      </DropdownItem>
-
-      <EditDomainRedirectsModal
-        domain={domain}
-        isOpen={isModalOpen}
-        toggle={toggleModal}
-        editDomainRedirects={editDomainRedirects}
-      />
-    </DropdownBtnMenu>
-  );
-};

src/domains/helpers/DomainStatusIcon.tsx

@@ -1,59 +0,0 @@
-import { FC, useEffect, useRef, useState } from 'react';
-import { UncontrolledTooltip } from 'reactstrap';
-import { ExternalLink } from 'react-external-link';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  faTimes as invalidIcon,
-  faCheck as checkIcon,
-  faCircleNotch as loadingStatusIcon,
-} from '@fortawesome/free-solid-svg-icons';
-import { MediaMatcher } from '../../utils/types';
-import { mutableRefToElementRef } from '../../utils/helpers/components';
-import { DomainStatus } from '../data';
-
-interface DomainStatusIconProps {
-  status: DomainStatus;
-  matchMedia?: MediaMatcher;
-}
-
-export const DomainStatusIcon: FC<DomainStatusIconProps> = ({ status, matchMedia = window.matchMedia }) => {
-  const ref = useRef<HTMLSpanElement>();
-  const matchesMobile = () => matchMedia('(max-width: 991px)').matches;
-  const [isMobile, setIsMobile] = useState<boolean>(matchesMobile());
-
-  useEffect(() => {
-    const listener = () => setIsMobile(matchesMobile());
-
-    window.addEventListener('resize', listener);
-
-    return () => window.removeEventListener('resize', listener);
-  }, []);
-
-  if (status === 'validating') {
-    return <FontAwesomeIcon fixedWidth icon={loadingStatusIcon} spin />;
-  }
-
-  return (
-    <>
-      <span ref={mutableRefToElementRef(ref)}>
-        {status === 'valid'
-          ? <FontAwesomeIcon fixedWidth icon={checkIcon} className="text-muted" />
-          : <FontAwesomeIcon fixedWidth icon={invalidIcon} className="text-danger" />}
-      </span>
-      <UncontrolledTooltip
-        target={(() => ref.current) as any}
-        placement={isMobile ? 'top-start' : 'left'}
-        autohide={status === 'valid'}
-      >
-        {status === 'valid' ? 'Congratulations! This domain is properly configured.' : (
-          <span>
-            Oops! There is some missing configuration, and short URLs shared with this domain will not work.
-            <br />
-            Check the <ExternalLink href="https://slnk.to/multi-domain-docs">documentation</ExternalLink> in order to
-            find out what is missing.
-          </span>
-        )}
-      </UncontrolledTooltip>
-    </>
-  );
-};

src/domains/helpers/EditDomainRedirectsModal.tsx

@@ -1,72 +0,0 @@
-import { FC, useState } from 'react';
-import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import { ShlinkDomain, ShlinkDomainRedirects } from '../../api/types';
-import { InputFormGroup, InputFormGroupProps } from '../../utils/forms/InputFormGroup';
-import { handleEventPreventingDefault, nonEmptyValueOrNull } from '../../utils/utils';
-import { InfoTooltip } from '../../utils/InfoTooltip';
-
-interface EditDomainRedirectsModalProps {
-  domain: ShlinkDomain;
-  isOpen: boolean;
-  toggle: () => void;
-  editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
-}
-
-const FormGroup: FC<InputFormGroupProps & { isLast?: boolean }> = ({ isLast, ...rest }) => (
-  <InputFormGroup
-    {...rest}
-    required={false}
-    type="url"
-    placeholder="No redirect"
-    className={isLast ? 'mb-0' : ''}
-  />
-);
-
-export const EditDomainRedirectsModal: FC<EditDomainRedirectsModalProps> = (
-  { isOpen, toggle, domain, editDomainRedirects },
-) => {
-  const [baseUrlRedirect, setBaseUrlRedirect] = useState(domain.redirects?.baseUrlRedirect ?? '');
-  const [regular404Redirect, setRegular404Redirect] = useState(domain.redirects?.regular404Redirect ?? '');
-  const [invalidShortUrlRedirect, setInvalidShortUrlRedirect] = useState(
-    domain.redirects?.invalidShortUrlRedirect ?? '',
-  );
-  const handleSubmit = handleEventPreventingDefault(async () => editDomainRedirects(domain.domain, {
-    baseUrlRedirect: nonEmptyValueOrNull(baseUrlRedirect),
-    regular404Redirect: nonEmptyValueOrNull(regular404Redirect),
-    invalidShortUrlRedirect: nonEmptyValueOrNull(invalidShortUrlRedirect),
-  }).then(toggle));
-
-  return (
-    <Modal isOpen={isOpen} toggle={toggle} centered>
-      <form name="domainRedirectsModal" onSubmit={handleSubmit}>
-        <ModalHeader toggle={toggle}>Edit redirects for <b>{domain.domain}</b></ModalHeader>
-        <ModalBody>
-          <FormGroup value={baseUrlRedirect} onChange={setBaseUrlRedirect}>
-            <InfoTooltip className="me-2" placement="bottom">
-              Visitors accessing the base url, as in <b>https://{domain.domain}/</b>, will be redirected to this URL.
-            </InfoTooltip>
-            Base URL
-          </FormGroup>
-          <FormGroup value={regular404Redirect} onChange={setRegular404Redirect}>
-            <InfoTooltip className="me-2" placement="bottom">
-              Visitors accessing a url not matching a short URL pattern, as in <b>https://{domain.domain}/???/[...]</b>,
-              will be redirected to this URL.
-            </InfoTooltip>
-            Regular 404
-          </FormGroup>
-          <FormGroup value={invalidShortUrlRedirect} isLast onChange={setInvalidShortUrlRedirect}>
-            <InfoTooltip className="me-2" placement="bottom">
-              Visitors accessing a url matching a short URL pattern, but not matching an existing short code, will be
-              redirected to this URL.
-            </InfoTooltip>
-            Invalid short URL
-          </FormGroup>
-        </ModalBody>
-        <ModalFooter>
-          <Button color="link" type="button" onClick={toggle}>Cancel</Button>
-          <Button color="primary">Save</Button>
-        </ModalFooter>
-      </form>
-    </Modal>
-  );
-};

src/domains/reducers/domainRedirects.ts

@@ -1,31 +0,0 @@
-import { Action, Dispatch } from 'redux';
-import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { ShlinkDomainRedirects } from '../../api/types';
-import { GetState } from '../../container/types';
-import { ApiErrorAction } from '../../api/types/actions';
-import { parseApiError } from '../../api/utils';
-
-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';
-
-export interface EditDomainRedirectsAction extends Action<string> {
-  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);
-
-  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) });
-  }
-};

src/domains/reducers/domainsList.ts

@@ -1,128 +0,0 @@
-import { Action, Dispatch } from 'redux';
-import { ProblemDetailsError, ShlinkDomainRedirects } from '../../api/types';
-import { buildReducer } from '../../utils/helpers/redux';
-import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { GetState } from '../../container/types';
-import { 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';
-
-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';
-
-export interface DomainsList {
-  domains: Domain[];
-  filteredDomains: Domain[];
-  defaultRedirects?: ShlinkDomainRedirects;
-  loading: boolean;
-  error: boolean;
-  errorData?: ProblemDetailsError;
-}
-
-export interface ListDomainsAction extends Action<string> {
-  domains: Domain[];
-  defaultRedirects?: ShlinkDomainRedirects;
-}
-
-interface FilterDomainsAction extends Action<string> {
-  searchTerm: string;
-}
-
-interface ValidateDomain extends Action<string> {
-  domain: string;
-  status: DomainStatus;
-}
-
-const initialState: DomainsList = {
-  domains: [],
-  filteredDomains: [],
-  loading: false,
-  error: false,
-};
-
-export type DomainsCombinedAction = ListDomainsAction
-& ApiErrorAction
-& FilterDomainsAction
-& EditDomainRedirectsAction
-& ValidateDomain;
-
-export const replaceRedirectsOnDomain = (domain: string, redirects: ShlinkDomainRedirects) =>
-  (d: Domain): Domain => (d.domain !== domain ? d : { ...d, redirects });
-
-export const replaceStatusOnDomain = (domain: string, status: DomainStatus) =>
-  (d: Domain): Domain => (d.domain !== domain ? d : { ...d, status });
-
-export default buildReducer<DomainsList, DomainsCombinedAction>({
-  [LIST_DOMAINS_START]: () => ({ ...initialState, loading: true }),
-  [LIST_DOMAINS_ERROR]: ({ errorData }) => ({ ...initialState, error: true, errorData }),
-  [LIST_DOMAINS]: (_, { domains, defaultRedirects }) =>
-    ({ ...initialState, domains, filteredDomains: domains, defaultRedirects }),
-  [FILTER_DOMAINS]: (state, { searchTerm }) => ({
-    ...state,
-    filteredDomains: state.domains.filter(({ domain }) => domain.toLowerCase().match(searchTerm.toLowerCase())),
-  }),
-  [EDIT_DOMAIN_REDIRECTS]: (state, { domain, redirects }) => ({
-    ...state,
-    domains: state.domains.map(replaceRedirectsOnDomain(domain, redirects)),
-    filteredDomains: state.filteredDomains.map(replaceRedirectsOnDomain(domain, redirects)),
-  }),
-  [VALIDATE_DOMAIN]: (state, { domain, status }) => ({
-    ...state,
-    domains: state.domains.map(replaceStatusOnDomain(domain, status)),
-    filteredDomains: state.filteredDomains.map(replaceStatusOnDomain(domain, status)),
-  }),
-}, initialState);
-
-export const listDomains = (buildShlinkApiClient: ShlinkApiClientBuilder) => () => async (
-  dispatch: Dispatch,
-  getState: GetState,
-) => {
-  dispatch({ type: LIST_DOMAINS_START });
-  const { listDomains: shlinkListDomains } = buildShlinkApiClient(getState);
-
-  try {
-    const resp = await shlinkListDomains().then(({ data, defaultRedirects }) => ({
-      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' });
-  }
-};

src/domains/services/provideServices.ts

@@ -1,26 +0,0 @@
-import Bottle from 'bottlejs';
-import { ConnectDecorator } from '../../container/types';
-import { checkDomainHealth, filterDomains, listDomains } from '../reducers/domainsList';
-import { DomainSelector } from '../DomainSelector';
-import { ManageDomains } from '../ManageDomains';
-import { editDomainRedirects } from '../reducers/domainRedirects';
-
-const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
-  // Components
-  bottle.serviceFactory('DomainSelector', () => DomainSelector);
-  bottle.decorator('DomainSelector', connect(['domainsList'], ['listDomains']));
-
-  bottle.serviceFactory('ManageDomains', () => ManageDomains);
-  bottle.decorator('ManageDomains', connect(
-    ['domainsList', 'selectedServer'],
-    ['listDomains', 'filterDomains', 'editDomainRedirects', 'checkDomainHealth'],
-  ));
-
-  // Actions
-  bottle.serviceFactory('listDomains', listDomains, 'buildShlinkApiClient');
-  bottle.serviceFactory('filterDomains', () => filterDomains);
-  bottle.serviceFactory('editDomainRedirects', editDomainRedirects, 'buildShlinkApiClient');
-  bottle.serviceFactory('checkDomainHealth', checkDomainHealth, 'buildShlinkApiClient');
-};
-
-export default provideServices;

src/index.scss

@@ -1,242 +1,4 @@
-/* stylelint-disable no-descending-specificity */
-
-@import './utils/base';
+@import 'node_modules/@shlinkio/shlink-frontend-kit/dist/base'; // Before bootstrap stylesheet. Includes SASS var overrides
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
-@import './common/react-tag-autocomplete.scss';
-@import './theme/theme';
-@import './utils/table/ResponsiveTable';
-@import './utils/StickyCardPaginator';
-
-* {
-  outline: none !important;
-}
-
-:root {
-  scroll-behavior: auto;
-  color-scheme: var(--color-scheme);
-}
-
-html,
-body,
-#root {
-  height: 100%;
-  background: var(--secondary-color);
-  color: var(--text-color);
-}
-
-a,
-.btn-link {
-  text-decoration: none;
-}
-
-/* stylelint-disable-next-line selector-max-pseudo-class */
-a:not(.nav-link):not(.navbar-brand):not(.page-link):not(.highlight-card):not(.btn):not(.dropdown-item):hover,
-.btn-link:hover {
-  text-decoration: underline;
-}
-
-.bg-main {
-  background-color: $mainColor !important;
-}
-
-.card-body,
-.card-header,
-.list-group-item {
-  background-color: transparent;
-}
-
-.card-footer {
-  background-color: var(--primary-color-alfa);
-}
-
-.card {
-  box-shadow: 0 .125rem .25rem rgb(0 0 0 / .075);
-  background-color: var(--primary-color);
-  border-color: var(--border-color);
-}
-
-.list-group {
-  background-color: var(--primary-color);
-}
-
-.modal-content,
-.page-link,
-.page-item.disabled .page-link,
-.dropdown-menu {
-  background-color: var(--primary-color);
-}
-
-.modal-header,
-.modal-footer,
-.card-header,
-.card-footer,
-.table thead th,
-.table th,
-.table td,
-.page-link,
-.page-link:hover,
-.page-item.disabled .page-link,
-.dropdown-divider,
-.dropdown-menu,
-.list-group-item,
-.modal-content,
-hr {
-  border-color: var(--border-color);
-}
-
-.table-bordered,
-.table-bordered thead th,
-.table-bordered thead td {
-  border-color: var(--table-border-color);
-}
-
-.page-link:hover,
-.page-link:focus {
-  background-color: var(--secondary-color);
-}
-
-.page-item.active .page-link {
-  background-color: var(--brand-color);
-  border-color: var(--brand-color);
-}
-
-.pagination .page-link {
-  cursor: pointer;
-}
-
-.container-xl {
-  @media (min-width: $xlgMin) {
-    max-width: 1320px;
-  }
-
-  @media (max-width: $smMax) {
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-
-/* Deprecated. Brought from bootstrap 4 */
-.btn-block {
-  display: block;
-  width: 100%;
-}
-
-.btn-primary,
-.btn-primary:hover,
-.btn-primary:active,
-.btn-primary.active,
-.btn-outline-primary:hover,
-.btn-outline-primary:active,
-.btn-outline-primary.active, {
-  color: #ffffff;
-}
-
-.dropdown-item,
-.dropdown-item-text {
-  color: var(--text-color);
-}
-
-.dropdown-item:not(:disabled) {
-  cursor: pointer;
-}
-
-.dropdown-item:focus:not(:disabled),
-.dropdown-item:hover:not(:disabled),
-.dropdown-item.active:not(:disabled),
-.dropdown-item:active:not(:disabled) {
-  background-color: var(--active-color) !important;
-  color: var(--text-color) !important;
-}
-
-.dropdown-item--danger.dropdown-item--danger {
-  color: $dangerColor;
-
-  &:hover,
-  &:active,
-  &.active {
-    color: $dangerColor !important;
-  }
-}
-
-.badge-main {
-  color: #ffffff;
-  background-color: var(--brand-color);
-}
-
-.close,
-.close:hover,
-.table,
-.table-hover > tbody > tr:hover > *,
-.table-hover > tbody > tr > * {
-  color: var(--text-color);
-}
-
-.btn-close {
-  filter: var(--btn-close-filter);
-}
-
-.table-hover tbody tr:hover {
-  background-color: var(--secondary-color);
-}
-
-.form-control,
-.form-control:focus {
-  background-color: var(--primary-color);
-  border-color: var(--input-border-color);
-  color: var(--input-text-color);
-}
-
-.form-control.disabled,
-.form-control:disabled {
-  background-color: var(--input-disabled-color);
-  cursor: not-allowed;
-}
-
-.card .form-control:not(:disabled),
-.card .form-control:not(:disabled):hover {
-  background-color: var(--input-color);
-}
-
-.table-active,
-.table-active > th,
-.table-active > td {
-  background-color: var(--table-highlight-color) !important;
-}
-
-.navbar-brand {
-  @media (max-width: $smMax) {
-    margin: 0 auto !important;
-  }
-}
-
-.indivisible {
-  white-space: nowrap;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-.text-ellipsis {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.progress-bar {
-  background-color: $mainColor;
-}
-
-.btn-xs-block {
-  @media (max-width: $xsMax) {
-    width: 100%;
-    display: block;
-  }
-}
-
-.btn-md-block {
-  @media (max-width: $mdMax) {
-    width: 100%;
-    display: block;
-  }
-}
+@import 'node_modules/@shlinkio/shlink-frontend-kit/dist/index'; // After bootstrap. Includes CSS overwrites
+@import 'node_modules/@shlinkio/shlink-web-component/dist/index';

src/index.tsx

@@ -3,17 +3,11 @@ import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import pack from '../package.json';
 import { container } from './container';
-import { store } from './container/store';
-import { fixLeafletIcons } from './utils/helpers/leaflet';
+import { setUpStore } from './container/store';
 import { register as registerServiceWorker } from './serviceWorkerRegistration';
-import 'chart.js/auto'; // TODO Import specific ones to reduce bundle size https://react-chartjs-2.js.org/docs/migration-to-v4/#tree-shaking
-import 'react-datepicker/dist/react-datepicker.css';
-import 'leaflet/dist/leaflet.css';
 import './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/helpers/Topics.ts

@@ -1,7 +0,0 @@
-export class Topics {
-  public static readonly visits = 'https://shlink.io/new-visit';
-
-  public static readonly orphanVisits = 'https://shlink.io/new-orphan-visit';
-
-  public static readonly shortUrlVisits = (shortCode: string) => `https://shlink.io/new-visit/${shortCode}`;
-}

src/mercure/helpers/boundToMercureHub.tsx

@@ -1,44 +0,0 @@
-import { FC, useEffect } from 'react';
-import { pipe } from 'ramda';
-import { useParams } from 'react-router-dom';
-import { CreateVisit } from '../../visits/types';
-import { MercureInfo } from '../reducers/mercureInfo';
-import { bindToMercureTopic } from './index';
-
-export interface MercureBoundProps {
-  createNewVisits: (createdVisits: CreateVisit[]) => void;
-  loadMercureInfo: () => void;
-  mercureInfo: MercureInfo;
-}
-
-export function boundToMercureHub<T = {}>(
-  WrappedComponent: FC<MercureBoundProps & T>,
-  getTopicsForProps: (props: T, routeParams: any) => string[],
-) {
-  const pendingUpdates = new Set<CreateVisit>();
-
-  return (props: MercureBoundProps & T) => {
-    const { createNewVisits, loadMercureInfo, mercureInfo } = props;
-    const { interval } = mercureInfo;
-    const params = useParams();
-
-    useEffect(() => {
-      const onMessage = (visit: CreateVisit) => (interval ? pendingUpdates.add(visit) : createNewVisits([visit]));
-      const topics = getTopicsForProps(props, params);
-      const closeEventSource = bindToMercureTopic(mercureInfo, topics, onMessage, loadMercureInfo);
-
-      if (!interval) {
-        return closeEventSource;
-      }
-
-      const timer = setInterval(() => {
-        createNewVisits([...pendingUpdates]);
-        pendingUpdates.clear();
-      }, interval * 1000 * 60);
-
-      return pipe(() => clearInterval(timer), () => closeEventSource?.());
-    }, [mercureInfo]);
-
-    return <WrappedComponent {...props} />;
-  };
-}

src/mercure/helpers/index.ts

@@ -1,31 +0,0 @@
-import { EventSourcePolyfill as EventSource } from 'event-source-polyfill';
-import { MercureInfo } from '../reducers/mercureInfo';
-
-export const bindToMercureTopic = <T>(mercureInfo: MercureInfo, topics: string[], onMessage: (message: T) => void, onTokenExpired: () => void) => { // eslint-disable-line max-len
-  const { mercureHubUrl, token, loading, error } = mercureInfo;
-
-  if (loading || error || !mercureHubUrl) {
-    return undefined;
-  }
-
-  const onEventSourceMessage = ({ data }: { data: string }) => onMessage(JSON.parse(data) as T);
-  const onEventSourceError = ({ status }: { status: number }) => status === 401 && onTokenExpired();
-
-  const subscriptions = topics.map((topic) => {
-    const hubUrl = new URL(mercureHubUrl);
-
-    hubUrl.searchParams.append('topic', topic);
-    const es = new EventSource(hubUrl, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
-
-    es.onmessage = onEventSourceMessage;
-    es.onerror = onEventSourceError;
-
-    return es;
-  });
-
-  return () => subscriptions.forEach((es) => es.close());
-};

src/mercure/reducers/mercureInfo.ts

@@ -1,52 +0,0 @@
-import { Action, Dispatch } from 'redux';
-import { ShlinkMercureInfo } from '../../api/types';
-import { GetState } from '../../container/types';
-import { buildReducer } from '../../utils/helpers/redux';
-import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-
-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';
-
-export interface MercureInfo {
-  token?: string;
-  mercureHubUrl?: string;
-  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 loadMercureInfo = (buildShlinkApiClient: ShlinkApiClientBuilder) =>
-  () => async (dispatch: Dispatch, getState: GetState) => {
-    dispatch({ type: GET_MERCURE_INFO_START });
-
-    const { settings } = getState();
-    const { mercureInfo } = buildShlinkApiClient(getState);
-
-    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 });
-    }
-  };

src/mercure/services/provideServices.ts

@@ -1,9 +0,0 @@
-import Bottle from 'bottlejs';
-import { loadMercureInfo } from '../reducers/mercureInfo';
-
-const provideServices = (bottle: Bottle) => {
-  // Actions
-  bottle.serviceFactory('loadMercureInfo', loadMercureInfo, 'buildShlinkApiClient');
-};
-
-export default provideServices;

src/reducers/index.ts

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

src/servers/CreateServer.tsx

@@ -1,21 +1,30 @@
-import { FC, useEffect, useState } from 'react';
-import { v4 as uuid } from 'uuid';
-import { Button } from 'reactstrap';
+import type { TimeoutToggle } from '@shlinkio/shlink-frontend-kit';
+import { Result, useToggle } from '@shlinkio/shlink-frontend-kit';
+import type { FC } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Result } from '../utils/Result';
+import { Button } from 'reactstrap';
+import { v4 as uuid } from 'uuid';
 import { NoMenuLayout } from '../common/NoMenuLayout';
-import { TimeoutToggle, useGoBack, useToggle } from '../utils/helpers/hooks';
-import { ServerForm } from './helpers/ServerForm';
-import { ImportServersBtnProps } from './helpers/ImportServersBtn';
-import { ServerData, ServersMap, ServerWithId } from './data';
+import type { FCWithDeps } from '../container/utils';
+import { componentFactory, useDependencies } from '../container/utils';
+import { useGoBack } from '../utils/helpers/hooks';
+import type { ServerData, ServersMap, ServerWithId } from './data';
 import { DuplicatedServersModal } from './helpers/DuplicatedServersModal';
+import type { ImportServersBtnProps } from './helpers/ImportServersBtn';
+import { ServerForm } from './helpers/ServerForm';
 
 const SHOW_IMPORT_MSG_TIME = 4000;
 
-interface CreateServerProps {
-  createServer: (server: ServerWithId) => void;
+type CreateServerProps = {
+  createServers: (servers: ServerWithId[]) => void;
   servers: ServersMap;
-}
+};
+
+type CreateServerDeps = {
+  ImportServersBtn: FC<ImportServersBtnProps>;
+  useTimeoutToggle: TimeoutToggle;
+};
 
 const ImportResult = ({ type }: { type: 'error' | 'success' }) => (
   <div className="mt-3">
@@ -26,34 +35,33 @@ const ImportResult = ({ type }: { type: 'error' | 'success' }) => (
   </div>
 );
 
-export const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useTimeoutToggle: TimeoutToggle) => (
-  { servers, createServer }: CreateServerProps,
-) => {
+const CreateServer: FCWithDeps<CreateServerProps, CreateServerDeps> = ({ servers, createServers }) => {
+  const { ImportServersBtn, useTimeoutToggle } = useDependencies(CreateServer);
   const navigate = useNavigate();
   const goBack = useGoBack();
   const hasServers = !!Object.keys(servers).length;
   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 = () => {
+  const [serverData, setServerData] = useState<ServerData>();
+  const saveNewServer = useCallback((theServerData: ServerData) => {
+    const id = uuid();
+
+    createServers([{ ...theServerData, id }]);
+    navigate(`/server/${id}`);
+  }, [createServers, navigate]);
+
+  useEffect(() => {
     if (!serverData) {
       return;
     }
 
-    const id = uuid();
-
-    createServer({ ...serverData, id });
-    navigate(`/server/${id}`);
-  };
-
-  useEffect(() => {
     const serverExists = Object.values(servers).some(
       ({ url, apiKey }) => serverData?.url === url && serverData?.apiKey === apiKey,
     );
 
-    serverExists ? toggleConfirmModal() : save();
-  }, [serverData]);
+    serverExists ? toggleConfirmModal() : saveNewServer(serverData);
+  }, [saveNewServer, serverData, servers, toggleConfirmModal]);
 
   return (
     <NoMenuLayout>
@@ -72,8 +80,10 @@ export const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useTim
         isOpen={isConfirmModalOpen}
         duplicatedServers={serverData ? [serverData] : []}
         onDiscard={goBack}
-        onSave={save}
+        onSave={() => serverData && saveNewServer(serverData)}
       />
     </NoMenuLayout>
   );
 };
+
+export const CreateServerFactory = componentFactory(CreateServer, ['ImportServersBtn', 'useTimeoutToggle']);