Merge pull request #330 from acelaya-forks/feature/fix-switch-alignment

Removed hardcoded display: inline for BooleanControls

.dockerignore

@@ -1,4 +1,7 @@
+./.github
 ./build
-./dist
+./coverage
 ./node_modules
 ./test
+./shlink-web-client.gif
+./dist

.eslintrc

@@ -1,42 +1,28 @@
 {
   "extends": [
-    "adidas-env/browser",
-    "adidas-env/module",
-    "adidas-env/node",
-    "adidas-es6",
-    "adidas-babel",
-    "adidas-react"
+    "@shlinkio/js-coding-standard"
   ],
   "plugins": ["jest"],
   "env": {
     "jest/globals": true
   },
+  "parserOptions": {
+    "tsconfigRootDir": ".",
+    "createDefaultProgram": true
+  },
   "globals": {
     "process": true,
     "setImmediate": true
   },
-  "settings": {
-    "react": {
-      "version": "16.3"
-    }
-  },
   "rules": {
-    "comma-dangle": ["error", "always-multiline"],
-    "no-invalid-this": "off",
-    "no-console": "warn",
-    "template-curly-spacing": ["error", "never"],
-    "no-warning-comments": "off",
-    "no-undefined": "off",
-    "indent": ["error", 2, {
-      "SwitchCase": 1
-    }
-    ],
-    "react/jsx-curly-spacing": ["error", "never"],
-    "react/jsx-indent-props": ["error", 2],
-    "react/jsx-first-prop-new-line": ["error", "multiline-multiprop"],
-    "react/jsx-closing-bracket-location": ["error", "tag-aligned"],
-    "react/no-array-index-key": "off",
-    "react/no-did-update-set-state": "off",
-    "react/display-name": "off"
+    "max-len": ["error", {
+      "code": 120,
+      "ignoreStrings": true,
+      "ignoreTemplateLiterals": true,
+      "ignoreComments": true
+    }],
+    "no-mixed-operators": "off",
+    "react/display-name": "off",
+    "@typescript-eslint/require-array-sort-compare": "off"
   }
 }

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE.md

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

.github/ISSUE_TEMPLATE/Bug.md

@@ -0,0 +1,36 @@
+---
+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/Feature_Request.md

@@ -0,0 +1,19 @@
+---
+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/Question_Support.md

@@ -0,0 +1,24 @@
+---
+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/workflows/docker-image-build.yml

@@ -0,0 +1,24 @@
+name: Build docker image
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - 'v*'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Install buildx
+        id: buildx
+        uses: crazy-max/ghaction-docker-buildx@v1
+        with:
+          buildx-version: latest
+      - name: Login to docker hub
+        run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
+      - name: Build the image
+        run: bash ./scripts/docker/build

.gitignore

@@ -3,18 +3,14 @@
 
 # testing
 /coverage
+/.stryker-tmp
+/reports
 
 # production
 /build
 
-# misc
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 docker-compose.override.yml
+home
+public/servers.json*

.scrutinizer.yml

@@ -1,5 +1,3 @@
-build:
-  environment:
-    node: v10.4.1
 tools:
-  external_code_coverage: true
+  external_code_coverage:
+    timeout: 1200

.travis.yml

@@ -1,33 +1,55 @@
+dist: bionic
+
 language: node_js
 
-node_js:
-  - "stable"
+branches:
+  only:
+    - /.*/
 
 cache:
-  yarn: true
   directories:
     - node_modules
 
-install:
-  - yarn install
+node_js:
+  - '14.15.0'
 
-script:
-  - yarn lint
-  - yarn test:ci
-  - if [[ -z $TRAVIS_TAG ]]; then yarn build ; fi
+jobs:
+  fast_finish: true
+  allow_failures:
+    - name: 'Mutation tests'
+  include:
 
-after_success:
-  - yarn ocular coverage/clover.xml
+    - name: 'Lint'
+      install: npm ci
+      script: npm run lint
 
-# Before deploying, build dist file for current travis tag
-before_deploy:
-  - yarn build ${TRAVIS_TAG#?}
+    - name: 'Unit tests'
+      install: npm ci
+      script: npm run test:ci
+      after_success:
+        - node_modules/.bin/ocular coverage/clover.xml
 
-deploy:
-  provider: releases
-  api_key:
-    secure: jBvPwC7EAbViaNR83rwMSt5XQDK0Iu9rgvEMa7GoyShbHcvUCCPd73Tu9quNpKi6NKsDY3INHgtch3vgonjGNGDGJ+yDyIBzXcvsAX2x3UcHpRbgY12uiINVmQxBI1+OVQB016Nm+cKC/i5Z36K4EmDbYfo+MrKndngM6AjcQFTwI8EwniIMaQgg4gNes//K8NhP5u0c3gwG+Q6jEGnq6uH3kcRgh6/epIZYpQyxjqWqKwF77sgcYj+X2Nf6XxtB5neuCi301UKLoLx8G0skh/Lm6KAIO4s9iIhIFa3UpoF21Ka0TxLpd2JxalLryCnFGlWWE6lxC9Htmc0TeRowJQlGdJXCskJ37xT9MljKY0fwNMu06VS/FUgykuCv+jP3zQu51pKu7Ew7+WeNPjautoOTu54VkdGyHcf2ThBNEyJQuiEwAQe4u7yAxY6R5ovEdvHBSIg4w1E5/Mxy5SMTCUlIAv6H7QQ1X9Z/zJm9HH5KeKz5tsHvQ/RIdSpgHXq/tC8o4Yup/LCFucXfrgvy/8pJoO1UpOlmvm62974NFfo0EG5YWwv6brUqz3QXpMjb8sWqgjltYMYJX3J7WZ34rIc+zt4NAmfhqgczaOC4pUGCiJ8jX3rMWIaQRn1AJ+5V337jL9fNDpTHny4phQjHrMJ1e0HZuNp0Xb5Q8wgqDPM=
-  file: "./dist/shlink-web-client_${TRAVIS_TAG#?}_dist.zip"
-  skip_cleanup: true
-  on:
-    tags: true
+    - name: 'Mutation tests'
+      install: npm ci
+      before_script:
+        - echo "Building commit range ${TRAVIS_COMMIT_RANGE}"
+        - export MUTATION_FILES=$(git diff ${TRAVIS_COMMIT_RANGE:-origin/main} --name-only | grep -E 'src\/(.*).(ts|tsx)$' | paste -sd ",")
+      script: npm run mutate:ci
+
+    - name: 'Build docker image'
+      services:
+        - docker
+      script: docker build -t shlink-web-client:test .
+
+    - name: 'Publish release'
+      if: tag IS present
+      script: echo "Publishing GitHub release"
+      before_deploy: npm run build ${TRAVIS_TAG#?}
+      deploy:
+        provider: releases
+        api_key:
+          secure: jBvPwC7EAbViaNR83rwMSt5XQDK0Iu9rgvEMa7GoyShbHcvUCCPd73Tu9quNpKi6NKsDY3INHgtch3vgonjGNGDGJ+yDyIBzXcvsAX2x3UcHpRbgY12uiINVmQxBI1+OVQB016Nm+cKC/i5Z36K4EmDbYfo+MrKndngM6AjcQFTwI8EwniIMaQgg4gNes//K8NhP5u0c3gwG+Q6jEGnq6uH3kcRgh6/epIZYpQyxjqWqKwF77sgcYj+X2Nf6XxtB5neuCi301UKLoLx8G0skh/Lm6KAIO4s9iIhIFa3UpoF21Ka0TxLpd2JxalLryCnFGlWWE6lxC9Htmc0TeRowJQlGdJXCskJ37xT9MljKY0fwNMu06VS/FUgykuCv+jP3zQu51pKu7Ew7+WeNPjautoOTu54VkdGyHcf2ThBNEyJQuiEwAQe4u7yAxY6R5ovEdvHBSIg4w1E5/Mxy5SMTCUlIAv6H7QQ1X9Z/zJm9HH5KeKz5tsHvQ/RIdSpgHXq/tC8o4Yup/LCFucXfrgvy/8pJoO1UpOlmvm62974NFfo0EG5YWwv6brUqz3QXpMjb8sWqgjltYMYJX3J7WZ34rIc+zt4NAmfhqgczaOC4pUGCiJ8jX3rMWIaQRn1AJ+5V337jL9fNDpTHny4phQjHrMJ1e0HZuNp0Xb5Q8wgqDPM=
+        file: "./dist/shlink-web-client_${TRAVIS_TAG#?}_dist.zip"
+        skip_cleanup: true
+        on:
+          tags: true

CHANGELOG.md

@@ -4,6 +4,422 @@ 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).
 
+## 2.6.1 - 2020-10-31
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* [#292](https://github.com/shlinkio/shlink-web-client/issues/292) Improved a bit how caching works by removing the service worker and adding proper HTTP caching config on nginx inside docker image.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#316](https://github.com/shlinkio/shlink-web-client/issues/316) Fixed manifest.json file not getting downloaded after passing credentials when the app is protected with basic auth.
+* [#311](https://github.com/shlinkio/shlink-web-client/issues/311) Fixed datepicker showing below other components.
+* [#306](https://github.com/shlinkio/shlink-web-client/issues/306) Fixed multi-arch docker builds by replacing node-sass with dart-sass.
+* [#328](https://github.com/shlinkio/shlink-web-client/issues/328) Fixed toggle switches getting broken in mobile resolutions.
+
+
+## 2.6.0 - 2020-09-20
+
+#### Added
+
+* [#289](https://github.com/shlinkio/shlink-web-client/issues/289) Client and server version constraints are now links to the corresponding project release notes.
+* [#293](https://github.com/shlinkio/shlink-web-client/issues/293) Shlink versions are now always displayed in footer, hiding the server version when there's no connected server.
+* [#250](https://github.com/shlinkio/shlink-web-client/issues/250) Added support to group real time updates in fixed intervals.
+
+    The settings page now allows to provide the interval in which the UI should get updated, making that happen at once, with all the updates that have happened during that interval.
+
+    By default updates are immediately applied if real-time updates are enabled, to keep the behavior as it was.
+
+* [#277](https://github.com/shlinkio/shlink-web-client/issues/277) Added highlighting capabilities to the visits line chart.
+
+#### Changed
+
+* [#150](https://github.com/shlinkio/shlink-web-client/issues/150) The list of short URLs is now ordered by the creation date, showing newest results first.
+* [#248](https://github.com/shlinkio/shlink-web-client/issues/248) Numbers displayed application-wide are now prettified.
+* [#40](https://github.com/shlinkio/shlink-web-client/issues/40) Migrated project to TypeScript.
+* [#297](https://github.com/shlinkio/shlink-web-client/issues/297) Moved docker image building to github actions.
+* [#305](https://github.com/shlinkio/shlink-web-client/issues/305) Split travis build so that every step is run in a parallel job.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#295](https://github.com/shlinkio/shlink-web-client/issues/295) Fixed custom slug field not being disabled when selecting a short code length.
+* [#301](https://github.com/shlinkio/shlink-web-client/issues/301) Fixed tags visits loading not being cancelled when leaving visits page.
+
+
+## 2.5.1 - 2020-06-06
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* [#254](https://github.com/shlinkio/shlink-web-client/issues/254) Reduced duplication on code to handle mercure topics binding.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#276](https://github.com/shlinkio/shlink-web-client/issues/276) Fixed default grouping used for visits line chart, making it be dynamic depending on how old the short URL is.
+* [#280](https://github.com/shlinkio/shlink-web-client/issues/280) Fixed shlink-web-client version not being properly passed when building stable tags of the docker image.
+* [#269](https://github.com/shlinkio/shlink-web-client/issues/269) Fixed doughnut chart legends getting to big and hiding charts on mobile devices.
+
+
+## 2.5.0 - 2020-05-31
+
+#### Added
+
+* [#148](https://github.com/shlinkio/shlink-web-client/issues/148) Added support for real-time updates when consuming a Shlink version that is integrated with a mercure hub server.
+
+    The integration is transparent. When a server is opened, shlink-web-client will try to get the mercure info from it.
+
+    * If it works, it will setup the necessary `EventSource`s, dispatching redux actions when an event is pushed, which will in turn update the UI.
+    * If it fails, it will assume it is either not configured or not supported by the Shlink version.
+
+* [#265](https://github.com/shlinkio/shlink-web-client/issues/265) Updated tags section to allow displaying number of short URLs using every tag and number of visits for all short URLs using the tag.
+
+    This will work only when using Shlink v2.2.0 or above. For previous versions, the tags page will continue behaving the same.
+
+* [#261](https://github.com/shlinkio/shlink-web-client/issues/261) Added new page to show visit stats by tag.
+
+    This new page will return a "not found" error when the server is lower than v2.2.0, as older versions do not support fetching stats by tag.
+
+* [#253](https://github.com/shlinkio/shlink-web-client/issues/253) Created new settings page that will be used to define customizations in the app.
+
+* [#149](https://github.com/shlinkio/shlink-web-client/issues/149) and [#198](https://github.com/shlinkio/shlink-web-client/issues/198) Added new line chart to visits and tags stats which displays amount of visits during selected time period, grouped by month, week, day or hour.
+
+#### Changed
+
+* [#218](https://github.com/shlinkio/shlink-web-client/issues/218) Added back button to sections not displayed in left menu.
+* [#255](https://github.com/shlinkio/shlink-web-client/issues/255) Improved how servers and settings are persisted in the local storage.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#262](https://github.com/shlinkio/shlink-web-client/issues/262) Fixed charts displaying decimal numbers, when visits are absolute and that makes no sense.
+
+
+## 2.4.0 - 2020-04-10
+
+#### Added
+
+* [#199](https://github.com/shlinkio/shlink-web-client/issues/199) Added table to visits page which displays the information in a paginated, sortable and filterable list.
+
+    It also supports selecting multiple visits in the table which makes the corresponding data to be highlighted in the visits charts.
+
+* [#241](https://github.com/shlinkio/shlink-web-client/issues/241) Added support to select charts bars in order to highlight related stats in other charts.
+
+    It also selects the visits in the new table, and you can even combine a selection in the chart and in the table.
+
+* [#213](https://github.com/shlinkio/shlink-web-client/issues/213) The versions of both shlink-web-client and currently consumed Shlink server are now displayed in the footer.
+* [#221](https://github.com/shlinkio/shlink-web-client/issues/221) Improved how servers are handled, displaying meaningful errors when a not-found or a not-reachable server is tried to be loaded.
+* [#226](https://github.com/shlinkio/shlink-web-client/issues/226) Created servers can now be edited.
+* [#234](https://github.com/shlinkio/shlink-web-client/issues/234) Allowed short code length to be edited on any new short URL when using Shlink 2.1 or higher.
+* [#235](https://github.com/shlinkio/shlink-web-client/issues/235) Allowed editing the long URL for any existing short URL when suing Shlink 2.1 or higher.
+
+#### Changed
+
+* [#205](https://github.com/shlinkio/shlink-web-client/issues/205) Replaced `jest-each` package by jet's native `test.each` function.
+* [#209](https://github.com/shlinkio/shlink-web-client/issues/209) Replaced `Unknown` by `Direct` for visits from undetermined referrers.
+* [#212](https://github.com/shlinkio/shlink-web-client/issues/212) Moved copy-to-clipboard next to short URL.
+* [#208](https://github.com/shlinkio/shlink-web-client/issues/208) Short URLs list paginator is now progressive.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#243](https://github.com/shlinkio/shlink-web-client/issues/243) Fixed loading state and resetting on short URL creation form.
+* [#239](https://github.com/shlinkio/shlink-web-client/issues/239) Fixed how user agents are parsed, reducing false results.
+
+
+## 2.3.1 - 2020-02-08
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* [#191](https://github.com/shlinkio/shlink-web-client/issues/191) Created `ForServerVersion` helper component which dynamically renders children if current server conditions are met.
+* [#189](https://github.com/shlinkio/shlink-web-client/issues/189) Simplified short url tags and short url deletion components and reducers, by removing redundant actions.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#193](https://github.com/shlinkio/shlink-web-client/issues/193) Fixed `maxVisits` being set to 0 when trying to reset it from having a value to `null`.
+* [#196](https://github.com/shlinkio/shlink-web-client/issues/196) Included apache `.htaccess` file which takes care of falling back to index.html when reloading the page on a client-side handled route.
+* [#179](https://github.com/shlinkio/shlink-web-client/issues/179) Ensured domain is provided to Shlink server when editing, deleting or fetching short URLs which do not belong to default domain.
+* [#202](https://github.com/shlinkio/shlink-web-client/issues/202) Fixed domain not passed when dispatching actions that affect a single short URL (edit tags, edit meta and delete), which cased the list not to be properly updated.
+
+
+## 2.3.0 - 2020-01-19
+
+#### Added
+
+* [#174](https://github.com/shlinkio/shlink-web-client/issues/174) Added complete support for Shlink v2.x together with currently supported Shlink versions.
+* [#164](https://github.com/shlinkio/shlink-web-client/issues/164) Added max visits control on those URLs which have `maxVisits`.
+* [#178](https://github.com/shlinkio/shlink-web-client/issues/178) Short URLs list can now be filtered by date range.
+* [#46](https://github.com/shlinkio/shlink-web-client/issues/46) Allowed short URL's metadata to be edited (`maxVisits`, `validSince` and `validUntil`).
+
+#### Changed
+
+* *Nothing*
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#170](https://github.com/shlinkio/shlink-web-client/issues/170) Fixed apple icon referencing to incorrect file names.
+
+
+## 2.2.2 - 2019-10-21
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* *Nothing*
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#167](https://github.com/shlinkio/shlink-web-client/issues/167) Fixed `/servers.json` path not being ignored when returning something other than an array.
+
+
+## 2.2.1 - 2019-10-18
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* *Nothing*
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#165](https://github.com/shlinkio/shlink-web-client/issues/165) Fixed error thrown when opening "create" page while using a Shlink version which does not return a valid SemVer version (like `latest` docker image, or any development instance).
+
+
+## 2.2.0 - 2019-10-05
+
+#### Added
+
+* [#144](https://github.com/shlinkio/shlink-web-client/issues/144) Added domain input to create domain page.
+
+#### Changed
+
+* [#140](https://github.com/shlinkio/shlink-web-client/issues/140) Updated project dependencies.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* *Nothing*
+
+
+## 2.1.1 - 2019-09-22
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* [#142](https://github.com/shlinkio/shlink-web-client/issues/142) Updated to newer versions of base docker images for dev and production.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#151](https://github.com/shlinkio/shlink-web-client/issues/151) Fixed "order by" indicator (caret) still indicate ASC on column header when no order is specified.
+* [#157](https://github.com/shlinkio/shlink-web-client/issues/157) Fixed pagination control on graphs expanding too much when lots of pages need to be rendered.
+* [#155](https://github.com/shlinkio/shlink-web-client/issues/155) Fixed client-side paths resolve to 404 when served from nginx in docker image instead of falling back to `index.html`.
+
+
+## 2.1.0 - 2019-05-19
+
+#### Added
+
+* [#101](https://github.com/shlinkio/shlink-web-client/issues/101) Added checkbox to short URL creation form that allows to determine the value of the `findIfExists` flag introduced in Shlink v1.16.0.
+* [#105](https://github.com/shlinkio/shlink-web-client/issues/105) Added support to pre-configure servers. See [how to pre-configure servers](README.md#pre-configuring-servers) to get more details on how to do it.
+
+#### Changed
+
+* [#125](https://github.com/shlinkio/shlink-web-client/issues/125) Refactored reducers to replace `switch` statements by `handleActions` from [redux-actions](https://github.com/redux-utilities/redux-actions).
+* [#116](https://github.com/shlinkio/shlink-web-client/issues/116) Removed sinon in favor of jest mocks.
+* [#72](https://github.com/shlinkio/shlink-web-client/issues/72) Increased code coverage up to 80%.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* *Nothing*
+
+
+## 2.0.3 - 2019-03-16
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* *Nothing*
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#120](https://github.com/shlinkio/shlink-web-client/issues/120) Fixed crash when visits page is loaded and there are no visits with known cities.
+* [#113](https://github.com/shlinkio/shlink-web-client/issues/113) Ensured visits loading is cancelled when the visits page is unmounted. Requests on flight will still finish.
+* [#118](https://github.com/shlinkio/shlink-web-client/issues/118) Fixed chart crashing when trying to render lots of bars by adding pagination.
+
+
+## 2.0.2 - 2019-03-04
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* *Nothing*
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#103](https://github.com/shlinkio/shlink-web-client/issues/103) Fixed visits page getting freezed when loading large amounts of visits.
+* [#111](https://github.com/shlinkio/shlink-web-client/issues/111) Fixed crash when trying to load a map modal with only one location.
+* [#115](https://github.com/shlinkio/shlink-web-client/issues/115) Created `ErrorHandler` component which will prevent crashes in app to make it unusable.
+
+
+## 2.0.1 - 2019-03-03
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* [#106](https://github.com/shlinkio/shlink-web-client/issues/106) Reduced size of docker image by using a multi-stage build Dockerfile.
+* [#95](https://github.com/shlinkio/shlink-web-client/issues/95) Tested docker image build during travis executions.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#104](https://github.com/shlinkio/shlink-web-client/issues/104) Fixed blank page being showed when not-found paths are loaded.
+* [#94](https://github.com/shlinkio/shlink-web-client/issues/94) Fixed initial zoom and center on maps.
+* [#93](https://github.com/shlinkio/shlink-web-client/issues/93) Prevented side menu to be swipeable while a modal window is displayed.
+
+
 ## 2.0.0 - 2019-01-13
 
 #### Added

CONTRIBUTING.md

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

Dockerfile

@@ -1,21 +1,12 @@
-FROM nginx:1.15.8-alpine
+FROM node:14.15.0-alpine as node
+COPY . /shlink-web-client
+ARG VERSION="latest"
+ENV VERSION ${VERSION}
+RUN cd /shlink-web-client && \
+    npm install && npm run build -- ${VERSION} --no-dist
+
+FROM nginx:1.19.3-alpine
 LABEL maintainer="Alejandro Celaya <alejandro@alejandrocelaya.com>"
-
-# Install node and yarn
-RUN apk add --no-cache nodejs && apk add --no-cache yarn
-
-ADD . ./shlink-web-client
-
-# Install dependencies and build project
-RUN cd ./shlink-web-client && \
-    yarn install && \
-    yarn build && \
-
-    # Move build contents to document root
-    cd .. && \
-    rm -r /usr/share/nginx/html/* && \
-    mv ./shlink-web-client/build/* /usr/share/nginx/html && \
-    rm -r ./shlink-web-client && \
-
-    # Delete and uninstall build tools
-    yarn cache clean && apk del yarn && apk del nodejs
+RUN rm -r /usr/share/nginx/html && rm /etc/nginx/conf.d/default.conf
+COPY config/docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=node /shlink-web-client/build /usr/share/nginx/html

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018-2019 shlinkio
+Copyright (c) 2018-2020 shlinkio
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,51 +1,102 @@
 # shlink-web-client
 
-[![Build Status](https://img.shields.io/travis/shlinkio/shlink-web-client.svg?style=flat-square)](https://travis-ci.org/shlinkio/shlink-web-client)
-[![Docker build status](https://img.shields.io/docker/build/shlinkio/shlink-web-client.svg?style=flat-square)](https://hub.docker.com/r/shlinkio/shlink-web-client/)
-[![Code Coverage](https://img.shields.io/scrutinizer/coverage/g/shlinkio/shlink-web-client.svg?style=flat-square)](https://scrutinizer-ci.com/g/shlinkio/shlink-web-client/?branch=master)
-[![Scrutinizer Code Quality](https://img.shields.io/scrutinizer/g/shlinkio/shlink-web-client.svg?style=flat-square)](https://scrutinizer-ci.com/g/shlinkio/shlink-web-client/?branch=master)
+[![Build Status](https://img.shields.io/travis/com/shlinkio/shlink-web-client.svg?style=flat-square)](https://travis-ci.com/shlinkio/shlink-web-client)
+[![Code Coverage](https://img.shields.io/scrutinizer/coverage/g/shlinkio/shlink-web-client.svg?style=flat-square)](https://scrutinizer-ci.com/g/shlinkio/shlink-web-client/)
+[![Scrutinizer Code Quality](https://img.shields.io/scrutinizer/g/shlinkio/shlink-web-client.svg?style=flat-square)](https://scrutinizer-ci.com/g/shlinkio/shlink-web-client/)
 [![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)
-[![GitHub license](https://img.shields.io/github/license/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/blob/master/LICENSE)
-[![Paypal Donate](https://img.shields.io/badge/Donate-paypal-blue.svg?style=flat-square&logo=paypal&colorA=cccccc)](https://acel.me/donate)
+[![Docker pulls](https://img.shields.io/docker/pulls/shlinkio/shlink-web-client.svg?style=flat-square)](https://hub.docker.com/r/shlinkio/shlink-web-client/)
+[![GitHub license](https://img.shields.io/github/license/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/blob/main/LICENSE)
+[![Paypal Donate](https://img.shields.io/badge/Donate-paypal-blue.svg?style=flat-square&logo=paypal&colorA=cccccc)](https://slnk.to/donate)
 
 A ReactJS-based progressive web application for [Shlink](https://shlink.io).
 
+![shlink-web-client](shlink-web-client.gif)
+
+> If you are trying to find out how to run the project in development mode or how to provide contributions, read the [CONTRIBUTING](CONTRIBUTING.md) doc.
+
 ## Installation
 
 There are three ways in which you can use this application.
 
-* The easiest way to use shlink-web-client is by just going to https://app.shlink.io.
+### From app.shlink.io
 
-    The application runs 100% in the browser, so you can use that instance and access any shlink instance from it.
+The easiest way to use shlink-web-client is by just going to <https://app.shlink.io>.
 
-* Self hosting the application yourself.
+The application runs 100% in the browser, so you can safely access any shlink instance from there.
 
-    Get the [latest release](https://github.com/shlinkio/shlink-web-client/releases/latest) and download the distributable zip file attached to it (`shlink-web-client_X.X.X_dist.zip`).
+### Docker image
 
-    The package contains static files only, so just put it in a folder and serve it with the web server of your choice.
+If you want to deploy shlink-web-client in a container-based cluster (kubernetes, docker swarm, etc), just pick the [shlinkio/shlink-web-client](https://hub.docker.com/r/shlinkio/shlink-web-client/) image and do it.
 
-    Provided dist files are configured to be served from the root of your domain. If you need to serve shlink-web-client from a subpath, you will have to build it yourself following [these simple steps](#serve-shlink-in-subpath).
+It's a lightweight [nginx:alpine](https://hub.docker.com/r/library/nginx/) image serving the static app on port 80.
 
-* Use the official [docker image](https://hub.docker.com/r/shlinkio/shlink-web-client/)
+### Self-hosted
 
-    If you want to deploy shlink-web-client in a container-based cluster (kubernetes, docker swarm, etc), just pick the image and do it.
+If you want to self-host it yourself, get the [latest release](https://github.com/shlinkio/shlink-web-client/releases/latest) and download the distributable zip file attached to it (`shlink-web-client_X.X.X_dist.zip`).
 
-    It's a lightweight [nginx:alpine](https://hub.docker.com/r/library/nginx/) image serving the assets on port 80.
+The package contains static files only, so just put it in a folder and serve it with the web server of your choice.
+
+**Considerations**:
+
+* Provided dist files are configured to be served from the root of your domain. If you need to serve shlink-web-client from a subpath, you will have to build it yourself following [these steps](#serve-shlink-in-subpath).
+* The app has a client-side router that handles dynamic paths. Because of that, you need to configure your web server to fall-back to the `index.html` file when requested files do not exist.
+    * If you use Apache, you are covered, since the project includes an `.htaccess` file which already does this.
+    * If you use nginx, you can [see how it's done](config/docker/nginx.conf) for the docker image and do the same.
+
+## Pre-configuring servers
+
+The first time you access shlink-web-client from a browser, you will have to configure the list of shlink servers you want to manage, and they will be saved in the local storage.
+
+Those servers can be exported and imported in other browsers, but if for some reason you need some servers to be there from the beginning, starting with shlink-web-client 2.1.0, you can provide a `servers.json` file in the project root folder (the same containing the `index.html`, `favicon.ico`, etc) with a structure like this:
+
+```json
+[
+  {
+    "name": "Main server",
+    "url": "https://doma.in",
+    "apiKey": "09c972b7-506b-49f1-a19a-d729e22e599c"
+  },
+  {
+    "name": "Local",
+    "url": "http://localhost:8080",
+    "apiKey": "580d0b42-4dea-419a-96bf-6c876b901451"
+  }
+]
+```
+
+> The list can contain as many servers as you need.
+
+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
+
+> **Be extremely careful when using this feature.**
+>
+> Due to shlink-web-client's client-side nature, the file needs to be accessible from the browser.
+>
+> Because of that, make sure you use this only when you self-host shlink-web-client, and you know only trusted people will have access to it.
+>
+> Failing to do this could cause your API keys to end up being exposed.
 
 ## Serve project in subpath
 
-Official distributable files have been build so that they are served from the root of a domain.
+Official distributable files have been built so that they are served from the root of a domain.
 
 If you need to host shlink-web-client yourself and serve it from a subpath, follow these steps:
 
-* Download [node](https://nodejs.org/en/download/package-manager/) 10.4 or later (if you don't have it yet).
-* Download [yarn](https://yarnpkg.com/en/docs/install) package manager.
-* Download shlink-web-client source files for the version you want to build.
+* Download shlink-web-client source code for the version you want to build.
     * For example, if you want to build `v1.0.1`, use this link https://github.com/shlinkio/shlink-web-client/archive/v1.0.1.zip
     * Replace the `v1.0.1` part in the link with the one of the version you want to build.
 * Decompress the file and `cd` into the resulting folder.
-* Install project dependencies by running `yarn install`.
 * Open the `package.json` file in the root of the project, locate the `homepage` property and replace the value (which should be an empty string) by the path from which you want to serve shlink-web-client.
     * For example: `"homepage": "/my-projects/shlink-web-client",`.
-* Build the distributable contents by running `yarn build`.
-* Once the command finishes, you will have a `build` folder with all the static assets you need to run shlink-web-client. Just place them wherever you want them to be served from.
+* Build the project:
+    * For classic hosting:
+        * Download [node](https://nodejs.org/en/download/package-manager/) 10.15 or later.
+        * Install project dependencies by running `npm install`.
+        * Build the project by running `npm run build`.
+        * Once the command finishes, you will have a `build` folder with all the static assets you need to run shlink-web-client. Just place them wherever you want them to be served from.
+    * For docker image:
+        * Download [docker](https://docs.docker.com/install/).
+        * Build the docker image by running `docker build . -t shlink-web-client`.
+        * Once the command finishes, you will have an image with the name `shlink-web-client`.

config/docker/nginx.conf

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

config/env.js

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

config/paths.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing, @typescript-eslint/promise-function-async, @typescript-eslint/prefer-optional-chain */
 
 const path = require('path');
 const fs = require('fs');

config/webpack.config.js

@@ -75,7 +75,7 @@ module.exports = (webpackEnv) => {
         loader: MiniCssExtractPlugin.loader,
         options: Object.assign(
           {},
-          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
+          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined,
         ),
       },
       {
@@ -227,7 +227,7 @@ module.exports = (webpackEnv) => {
 
               // Turned on because emoji and regex is not minified properly using default
               // https://github.com/facebook/create-react-app/issues/2488
-              ascii_only: true,
+              ascii_only: true, // eslint-disable-line @typescript-eslint/camelcase
             },
           },
 
@@ -281,7 +281,7 @@ module.exports = (webpackEnv) => {
       modules: [ 'node_modules' ].concat(
 
         // It is guaranteed to exist because we tweak it in `env.js`
-        process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
+        process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
       ),
 
       // These are the reasonable defaults supported by the Node ecosystem.
@@ -372,7 +372,7 @@ module.exports = (webpackEnv) => {
               loader: require.resolve('babel-loader'),
               options: {
                 customize: require.resolve(
-                  'babel-preset-react-app/webpack-overrides'
+                  'babel-preset-react-app/webpack-overrides',
                 ),
 
                 plugins: [
@@ -470,7 +470,7 @@ module.exports = (webpackEnv) => {
                   importLoaders: 2,
                   sourceMap: isEnvProduction && shouldUseSourceMap,
                 },
-                'sass-loader'
+                'sass-loader',
               ),
 
               // Don't consider CSS imports dead code even if the
@@ -491,7 +491,7 @@ module.exports = (webpackEnv) => {
                   modules: true,
                   getLocalIdent: getCSSModuleLocalIdent,
                 },
-                'sass-loader'
+                'sass-loader',
               ),
             },
 
@@ -544,8 +544,8 @@ module.exports = (webpackEnv) => {
                 minifyURLs: true,
               },
             }
-            : undefined
-        )
+            : undefined,
+        ),
       ),
 
       // Inlines the webpack runtime script. This script is too small to warrant
@@ -668,7 +668,7 @@ module.exports = (webpackEnv) => {
       fs: 'empty',
       net: 'empty',
       tls: 'empty',
-      child_process: 'empty',
+      child_process: 'empty', // eslint-disable-line @typescript-eslint/camelcase
     },
 
     // Turn off performance processing because we utilize

config/webpackDevServer.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 
 const fs = require('fs');
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');

docker-compose.override.yml.dist

@@ -6,3 +6,4 @@ services:
     volumes:
       - /etc/passwd:/etc/passwd:ro
       - /etc/group:/etc/group:ro
+      - ./home:/home/alejandro

docker-compose.yml

@@ -3,8 +3,8 @@ version: '3'
 services:
   shlink_web_client_node:
     container_name: shlink_web_client_node
-    image: node:10.15.0-alpine
-    command: /bin/sh -c "cd /home/shlink/www && yarn install && yarn start"
+    image: node:14.15.0-alpine
+    command: /bin/sh -c "cd /home/shlink/www && npm install && npm run start"
     volumes:
       - ./:/home/shlink/www
     ports:

jest.config.js

@@ -1,12 +1,12 @@
 module.exports = {
   coverageDirectory: '<rootDir>/coverage',
   collectCoverageFrom: [
-    'src/**/*.js',
+    'src/**/*.{js,ts,tsx}',
     '!src/registerServiceWorker.js',
-    '!src/index.js',
-    '!src/reducers/index.js',
-    '!src/**/provideServices.js',
-    '!src/container/*.js',
+    '!src/index.ts',
+    '!src/reducers/index.ts',
+    '!src/**/provideServices.ts',
+    '!src/container/*.ts',
   ],
   resolver: 'jest-pnp-resolver',
   setupFiles: [
@@ -17,9 +17,9 @@ module.exports = {
   testEnvironment: 'jsdom',
   testURL: 'http://localhost',
   transform: {
-    '^.+\\.(js|jsx|mjs)$': '<rootDir>/node_modules/babel-jest',
+    '^.+\\.(ts|tsx|js|jsx|mjs)$': '<rootDir>/node_modules/babel-jest',
     '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
-    '^(?!.*\\.(js|jsx|mjs|css|json)$)': '<rootDir>/config/jest/fileTransform.js',
+    '^(?!.*\\.(ts|tsx|js|jsx|mjs|css|json)$)': '<rootDir>/config/jest/fileTransform.js',
   },
   transformIgnorePatterns: [
     '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',

package.json

@@ -1,133 +1,167 @@
 {
-  "name": "shlink-web-client-react",
+  "name": "shlink-web-client",
   "description": "A React-based progressive web application for shlink",
-  "version": "1.0.0",
   "private": false,
   "homepage": "",
+  "repository": "https://github.com/shlinkio/shlink-web-client",
+  "license": "MIT",
   "scripts": {
-    "lint": "yarn lint:js && yarn lint:css",
-    "lint:js": "eslint src test scripts config",
-    "lint:js:fix": "yarn lint:js --fix",
+    "lint": "npm run lint:js && npm run lint:css",
+    "lint:js": "eslint --ext .js,.ts,.tsx src test scripts config",
+    "lint:js:fix": "npm run lint:js -- --fix",
     "lint:css": "stylelint src/*.scss src/**/*.scss",
-    "lint:css:fix": "yarn lint:css --fix",
+    "lint:css:fix": "npm run lint:css -- --fix",
     "start": "node scripts/start.js",
-    "serve:build": "yarn serve ./build",
+    "serve:build": "serve ./build",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom --colors",
-    "test:ci": "yarn test --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=clover",
-    "test:pretty": "yarn test --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=html"
+    "test:ci": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=clover",
+    "test:pretty": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=html",
+    "mutate": "./node_modules/.bin/stryker run",
+    "mutate:ci": "npm run mutate -- --mutate=$MUTATION_FILES"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.6.3",
-    "@fortawesome/fontawesome-svg-core": "^1.2.0",
-    "@fortawesome/free-regular-svg-icons": "^5.6.3",
-    "@fortawesome/free-solid-svg-icons": "^5.6.3",
-    "@fortawesome/react-fontawesome": "^0.1.3",
-    "axios": "^0.18.0",
-    "bootstrap": "~4.1.1",
-    "bottlejs": "^1.7.1",
-    "chart.js": "^2.7.2",
+    "@fortawesome/fontawesome-free": "^5.14.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-regular-svg-icons": "^5.14.0",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/react-fontawesome": "^0.1.11",
+    "array-filter": "^1.0.0",
+    "array-map": "^0.0.0",
+    "array-reduce": "^0.0.0",
+    "axios": "^0.20.0",
+    "bootstrap": "^4.5.2",
+    "bottlejs": "^2.0.0",
+    "bowser": "^2.10.0",
+    "chart.js": "^2.9.3",
     "classnames": "^2.2.6",
+    "compare-versions": "^3.6.0",
     "csvjson": "^5.1.0",
-    "leaflet": "^1.4.0",
-    "moment": "^2.22.2",
-    "promise": "^8.0.1",
-    "prop-types": "^15.6.2",
-    "qs": "^6.5.2",
-    "ramda": "^0.25.0",
-    "react": "^16.7.0",
-    "react-autosuggest": "^9.4.0",
-    "react-chartjs-2": "^2.7.4",
-    "react-color": "^2.14.1",
-    "react-copy-to-clipboard": "^5.0.1",
+    "event-source-polyfill": "^1.0.17",
+    "leaflet": "^1.7.1",
+    "moment": "^2.27.0",
+    "promise": "^8.0.3",
+    "qs": "^6.9.4",
+    "ramda": "^0.27.1",
+    "react": "^16.13.1",
+    "react-autosuggest": "^10.0.2",
+    "react-chartjs-2": "^2.10.0",
+    "react-color": "^2.18.1",
+    "react-copy-to-clipboard": "^5.0.2",
     "react-datepicker": "~1.5.0",
-    "react-dom": "^16.7.0",
-    "react-leaflet": "^2.1.4",
-    "react-moment": "^0.7.6",
-    "react-redux": "^5.0.7",
-    "react-router-dom": "^4.2.2",
-    "react-swipeable": "^4.3.0",
+    "react-dom": "^16.13.1",
+    "react-external-link": "^1.1.1",
+    "react-leaflet": "^2.7.0",
+    "react-moment": "^0.9.7",
+    "react-redux": "^7.2.1",
+    "react-router-dom": "^5.2.0",
+    "react-swipeable": "^5.5.1",
     "react-tagsinput": "^3.19.0",
-    "reactstrap": "^6.0.1",
-    "redux": "^4.0.0",
+    "reactstrap": "^8.0.1",
+    "redux": "^4.0.4",
+    "redux-localstorage-simple": "^2.2.0",
     "redux-thunk": "^2.3.0",
-    "uuid": "^3.3.2"
+    "uuid": "^3.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.6",
-    "@svgr/webpack": "^2.4.1",
-    "adm-zip": "0.4.11",
-    "autoprefixer": "^7.1.6",
+    "@babel/core": "^7.6.2",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+    "@shlinkio/eslint-config-js-coding-standard": "~1.1.0",
+    "@stryker-mutator/core": "^3.2.4",
+    "@stryker-mutator/typescript": "^3.2.4",
+    "@stryker-mutator/jest-runner": "^3.2.4",
+    "@svgr/webpack": "^4.3.3",
+    "@types/chart.js": "^2.9.24",
+    "@types/classnames": "^2.2.10",
+    "@types/enzyme": "^3.10.5",
+    "@types/jest": "^26.0.10",
+    "@types/leaflet": "^1.5.17",
+    "@types/moment": "^2.13.0",
+    "@types/qs": "^6.9.4",
+    "@types/ramda": "^0.27.14",
+    "@types/react": "^16.9.46",
+    "@types/react-autosuggest": "^10.0.0",
+    "@types/react-color": "^2.17.4",
+    "@types/react-copy-to-clipboard": "^4.3.0",
+    "@types/react-datepicker": "~1.8.0",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-leaflet": "^2.5.2",
+    "@types/react-redux": "^7.1.9",
+    "@types/react-router-dom": "^5.1.5",
+    "@types/react-tagsinput": "^3.19.7",
+    "@types/reactstrap": "^8.5.1",
+    "@types/uuid": "^8.3.0",
+    "adm-zip": "^0.4.13",
+    "autoprefixer": "^9.6.3",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.4",
-    "babel-plugin-named-asset-import": "^0.3.0",
-    "babel-preset-react-app": "^7.0.0",
+    "babel-jest": "^26.3.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-named-asset-import": "^0.3.4",
+    "babel-preset-react-app": "^9.0.2",
     "babel-runtime": "^6.26.0",
-    "bfj": "^6.1.1",
-    "case-sensitive-paths-webpack-plugin": "^2.1.2",
-    "chalk": "^2.4.1",
-    "css-loader": "^1.0.0",
-    "dotenv": "^6.0.0",
-    "dotenv-expand": "^4.2.0",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^5.11.1",
-    "eslint-config-adidas-babel": "^1.1.0",
-    "eslint-config-adidas-env": "^1.1.0",
-    "eslint-config-adidas-es6": "^1.2.0",
-    "eslint-config-adidas-react": "^1.1.1",
-    "eslint-loader": "^2.1.1",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jest": "^21.22.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-promise": "^4.0.1",
-    "eslint-plugin-react": "^7.11.1",
-    "file-loader": "^2.0.0",
+    "bfj": "^7.0.1",
+    "case-sensitive-paths-webpack-plugin": "^2.2.0",
+    "chalk": "^2.4.2",
+    "css-loader": "^3.2.0",
+    "dart-sass": "^1.25.0",
+    "dotenv": "^8.1.0",
+    "dotenv-expand": "^5.1.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^6.8.0",
+    "eslint-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
     "fork-ts-checker-webpack-plugin-alt": "^0.4.14",
-    "fs-extra": "^7.0.0",
-    "html-webpack-plugin": "^4.0.0-alpha.2",
+    "fs-extra": "^8.1.0",
+    "html-webpack-plugin": "^4.0.0-beta.8",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.6.0",
-    "jest-pnp-resolver": "^1.0.1",
-    "jest-resolve": "^23.6.0",
-    "mini-css-extract-plugin": "^0.4.3",
-    "node-sass": "^4.9.0",
+    "jest": "^26.4.2",
+    "jest-pnp-resolver": "^1.2.2",
+    "jest-resolve": "^26.4.0",
+    "mini-css-extract-plugin": "^0.8.0",
     "object-assign": "^4.1.1",
     "ocular.js": "^0.1.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "pnp-webpack-plugin": "^1.1.0",
-    "postcss": "^7.0.7",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "pnp-webpack-plugin": "^1.5.0",
+    "postcss": "^7.0.18",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.3.1",
+    "postcss-preset-env": "^6.7.0",
     "postcss-safe-parser": "^4.0.1",
-    "raf": "^3.4.0",
-    "react-app-polyfill": "^0.2.0",
-    "react-dev-utils": "^7.0.1",
-    "resolve": "^1.8.1",
-    "sass-loader": "^7.1.0",
-    "serve": "^10.0.0",
-    "sinon": "^6.1.5",
-    "style-loader": "^0.23.0",
-    "stylelint": "^9.9.0",
-    "stylelint-config-adidas": "^1.2.1",
+    "raf": "^3.4.1",
+    "react-app-polyfill": "^1.0.6",
+    "react-dev-utils": "^9.1.0",
+    "resolve": "^1.12.0",
+    "sass": "^1.28.0",
+    "sass-loader": "^10.0.2",
+    "serve": "^11.3.2",
+    "stryker-cli": "^1.0.0",
+    "style-loader": "^1.2.1",
+    "stylelint": "^13.7.0",
+    "stylelint-config-adidas": "^1.3.0",
     "stylelint-config-adidas-bem": "^1.2.0",
-    "stylelint-config-recommended-scss": "^3.2.0",
-    "stylelint-scss": "^3.3.0",
-    "sw-precache-webpack-plugin": "^0.11.4",
-    "terser-webpack-plugin": "^1.1.0",
-    "url-loader": "^1.1.1",
-    "webpack": "^4.19.1",
-    "webpack-dev-server": "^3.1.14",
-    "webpack-manifest-plugin": "^2.0.4",
-    "whatwg-fetch": "^2.0.3",
-    "workbox-webpack-plugin": "^3.6.3"
+    "stylelint-config-recommended-scss": "^4.2.0",
+    "stylelint-scss": "^3.18.0",
+    "sw-precache-webpack-plugin": "^0.11.5",
+    "terser-webpack-plugin": "^2.1.2",
+    "ts-jest": "^26.3.0",
+    "ts-mockery": "^1.2.0",
+    "typescript": "^3.9.7",
+    "url-loader": "^2.2.0",
+    "webpack": "^4.41.0",
+    "webpack-dev-server": "^3.8.2",
+    "webpack-manifest-plugin": "^2.2.0",
+    "whatwg-fetch": "^3.0.0",
+    "workbox-webpack-plugin": "^4.3.1"
   },
   "babel": {
     "presets": [
       "react-app"
+    ],
+    "plugins": [
+      "@babel/plugin-proposal-optional-chaining",
+      "@babel/plugin-proposal-nullish-coalescing-operator"
     ]
   },
   "browserslist": [

public/.htaccess

@@ -0,0 +1,16 @@
+RewriteEngine on
+RewriteBase /
+
+# do not do anything for already existing files
+RewriteCond %{REQUEST_FILENAME} -f [OR]
+RewriteCond %{REQUEST_FILENAME} -l [OR]
+RewriteCond %{REQUEST_FILENAME} -d
+RewriteRule (.*) - [L]
+
+# if request is no valid file NOR directory
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+# if static asset do not do anything
+RewriteRule (.*)(css|js|html|png|jpe?g|gif|bmp|ico|json|csv|otf|eot|svg|svgz|ttf|woff|woff2|ijmap|pdf|tif|map) - [NC,L,R=404]
+# everything else should be redirected to /index.html so it can be routed by it
+RewriteRule (.*) /index.html [L]

public/favicon.svg

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

public/index.html

@@ -9,14 +9,76 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" crossorigin="use-credentials">
 
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/icons/shlink-128.png">
-    <link rel="apple-touch-icon" sizes="64x64" href="%PUBLIC_URL%/icons/shlink-64.png">
-    <link rel="apple-touch-icon" sizes="32x32" href="%PUBLIC_URL%/icons/shlink-32.png">
-    <link rel="apple-touch-icon" sizes="24x24" href="%PUBLIC_URL%/icons/shlink-24.png">
-    <link rel="apple-touch-icon" sizes="16x16" href="%PUBLIC_URL%/icons/shlink-16.png">
+    <!-- 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.

public/manifest.json

@@ -6,16 +6,66 @@
   "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",
@@ -26,20 +76,70 @@
       "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/build.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-console */
+/* eslint-disable no-console, @typescript-eslint/prefer-nullish-coalescing, @typescript-eslint/promise-function-async, @typescript-eslint/prefer-optional-chain */
 
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'production';
@@ -14,7 +14,6 @@ process.on('unhandledRejection', (err) => {
 // Ensure environment variables are read.
 require('../config/env');
 
-const path = require('path');
 const chalk = require('chalk');
 const fs = require('fs-extra');
 const webpack = require('webpack');
@@ -22,7 +21,6 @@ const bfj = require('bfj');
 const AdmZip = require('adm-zip');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
-const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 const printBuildError = require('react-dev-utils/printBuildError');
 const { checkBrowsers } = require('react-dev-utils/browsersHelper');
@@ -30,7 +28,6 @@ const paths = require('../config/paths');
 const configFactory = require('../config/webpack.config');
 
 const { measureFileSizesBeforeBuild, printFileSizesAfterBuild } = FileSizeReporter;
-const useYarn = fs.existsSync(paths.yarnLockFile);
 
 // These sizes are pretty large. We'll warn for bundles exceeding them.
 const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024; // eslint-disable-line
@@ -46,7 +43,9 @@ if (!checkRequiredFiles([ paths.appHtml, paths.appIndexJs ])) {
 // Process CLI arguments
 const argvSliceStart = 2;
 const argv = process.argv.slice(argvSliceStart);
-const writeStatsJson = argv.indexOf('--stats') !== -1;
+const writeStatsJson = argv.includes('--stats');
+const withoutDist = argv.includes('--no-dist');
+const { version, hasVersion } = getVersionFromArgs(argv);
 
 // Generate configuration
 const config = configFactory('production');
@@ -76,15 +75,16 @@ checkBrowsers(paths.appPath, isInteractive)
         console.log(
           `\nSearch for the ${
             chalk.underline(chalk.yellow('keywords'))
-          } to learn more about each warning.`
+          } to learn more about each warning.`,
         );
         console.log(
           `To ignore, add ${
             chalk.cyan('// eslint-disable-next-line')
-          } to the line before.\n`
+          } to the line before.\n`,
         );
       } else {
         console.log(chalk.green('Compiled successfully.\n'));
+        hasVersion && replaceVersionPlaceholder(version);
       }
 
       console.log('File sizes after gzip:\n');
@@ -93,31 +93,17 @@ checkBrowsers(paths.appPath, isInteractive)
         previousFileSizes,
         paths.appBuild,
         WARN_AFTER_BUNDLE_GZIP_SIZE,
-        WARN_AFTER_CHUNK_GZIP_SIZE
+        WARN_AFTER_CHUNK_GZIP_SIZE,
       );
       console.log();
-
-      const appPackage = require(paths.appPackageJson);
-
-      const { publicUrl } = paths;
-      const { output: { publicPath } } = config;
-      const buildFolder = path.relative(process.cwd(), paths.appBuild);
-
-      printHostingInstructions(
-        appPackage,
-        publicUrl,
-        publicPath,
-        buildFolder,
-        useYarn
-      );
     },
     (err) => {
       console.log(chalk.red('Failed to compile.\n'));
       printBuildError(err);
       process.exit(1);
-    }
+    },
   )
-  .then(zipDist)
+  .then(() => hasVersion && !withoutDist && zipDist(version))
   .catch((err) => {
     if (err && err.message) {
       console.log(err.message);
@@ -147,7 +133,7 @@ function build(previousFileSizes) {
         });
       } else {
         messages = formatWebpackMessages(
-          stats.toJson({ all: false, warnings: true, errors: true })
+          stats.toJson({ all: false, warnings: true, errors: true }),
         );
       }
       if (messages.errors.length) {
@@ -168,8 +154,8 @@ function build(previousFileSizes) {
         console.log(
           chalk.yellow(
             '\nTreating warnings as errors because process.env.CI = true.\n' +
-              'Most CI servers set it automatically.\n'
-          )
+              'Most CI servers set it automatically.\n',
+          ),
         );
 
         return reject(new Error(messages.warnings.join('\n\n')));
@@ -200,15 +186,7 @@ function copyPublicFolder() {
   });
 }
 
-function zipDist() {
-  const minArgsToContainVersion = 3;
-
-  // If no version was provided, do nothing
-  if (process.argv.length < minArgsToContainVersion) {
-    return;
-  }
-
-  const [ , , version ] = process.argv;
+function zipDist(version) {
   const versionFileName = `./dist/shlink-web-client_${version}_dist.zip`;
 
   console.log(chalk.cyan(`Generating dist file for version ${chalk.bold(version)}...`));
@@ -226,4 +204,24 @@ function zipDist() {
     console.log(chalk.red('An error occurred while generating dist file'));
     console.log(e);
   }
+  console.log();
+}
+
+function getVersionFromArgs(argv) {
+  const [ version ] = argv;
+
+  return { version, hasVersion: !!version };
+}
+
+function replaceVersionPlaceholder(version) {
+  const staticJsFilesPath = './build/static/js';
+  const versionPlaceholder = '%_VERSION_%';
+
+  const isMainFile = (file) => file.startsWith('main.') && file.endsWith('.js');
+  const [ mainJsFile ] = fs.readdirSync(staticJsFilesPath).filter(isMainFile);
+  const filePath = `${staticJsFilesPath}/${mainJsFile}`;
+  const fileContent = fs.readFileSync(filePath, 'utf-8');
+  const replaced = fileContent.replace(versionPlaceholder, version);
+
+  fs.writeFileSync(filePath, replaced, 'utf-8');
 }

scripts/docker/build

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

scripts/start.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-console */
+/* eslint-disable no-console, @typescript-eslint/prefer-nullish-coalescing, @typescript-eslint/promise-function-async, @typescript-eslint/prefer-optional-chain */
 
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'development';
@@ -49,15 +49,15 @@ if (process.env.HOST) {
   console.log(
     chalk.cyan(
       `Attempting to bind to HOST environment variable: ${chalk.yellow(
-        chalk.bold(process.env.HOST)
-      )}`
-    )
+        chalk.bold(process.env.HOST),
+      )}`,
+    ),
   );
   console.log(
-    'If this was unintentional, check that you haven\'t mistakenly set it in your shell.'
+    'If this was unintentional, check that you haven\'t mistakenly set it in your shell.',
   );
   console.log(
-    `Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`
+    `Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`,
   );
   console.log();
 }
@@ -81,7 +81,7 @@ checkBrowsers(paths.appPath, isInteractive)
     const urls = prepareUrls(protocol, HOST, port);
 
     // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+    const compiler = createCompiler({ webpack, config, appName, urls, useYarn });
 
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
@@ -91,7 +91,7 @@ checkBrowsers(paths.appPath, isInteractive)
     // Serve webpack assets generated by the compiler over a web server.
     const serverConfig = createDevServerConfig(
       proxyConfig,
-      urls.lanUrlForConfig
+      urls.lanUrlForConfig,
     );
     const devServer = new WebpackDevServer(compiler, serverConfig);
 

shlink-web-client.d.ts

@@ -0,0 +1,12 @@
+declare module 'event-source-polyfill' {
+  export const EventSourcePolyfill: any;
+}
+
+declare module 'csvjson' {
+  export declare class CsvJson {
+    public toObject<T>(content: string): T[];
+    public toCSV<T>(data: T[], options: { headers: string }): string;
+  }
+}
+
+declare module '*.png'

src/App.js

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

src/App.scss

@@ -8,3 +8,19 @@
   padding-top: $headerHeight;
   height: 100%;
 }
+
+.shlink-wrapper {
+  min-height: 100%;
+  padding-bottom: $footer-height + $footer-margin;
+  margin-bottom: -($footer-height + $footer-margin);
+}
+
+.shlink-footer {
+  height: $footer-height;
+  margin-top: $footer-margin;
+  padding: 0;
+
+  @media (min-width: $mdMin) {
+    padding: 0 15px;
+  }
+}

src/App.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, FC } from 'react';
+import { Route, Switch } from 'react-router-dom';
+import NotFound from './common/NotFound';
+import { ServersMap } from './servers/data';
+import './App.scss';
+
+interface AppProps {
+  fetchServers: Function;
+  servers: ServersMap;
+}
+
+const App = (
+  MainHeader: FC,
+  Home: FC,
+  MenuLayout: FC,
+  CreateServer: FC,
+  EditServer: FC,
+  Settings: FC,
+  ShlinkVersions: FC,
+) => ({ fetchServers, servers }: AppProps) => {
+  // On first load, try to fetch the remote servers if the list is empty
+  useEffect(() => {
+    if (Object.keys(servers).length === 0) {
+      fetchServers();
+    }
+  }, []);
+
+  return (
+    <div className="container-fluid app-container">
+      <MainHeader />
+
+      <div className="app">
+        <div className="shlink-wrapper">
+          <Switch>
+            <Route exact path="/" component={Home} />
+            <Route exact path="/settings" component={Settings} />
+            <Route exact path="/server/create" component={CreateServer} />
+            <Route exact path="/server/:serverId/edit" component={EditServer} />
+            <Route path="/server/:serverId" component={MenuLayout} />
+            <Route component={NotFound} />
+          </Switch>
+        </div>
+
+        <div className="shlink-footer text-center text-md-right">
+          <ShlinkVersions />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;

src/common/AsideMenu.js

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

src/common/AsideMenu.scss

@@ -18,7 +18,7 @@ $asideMenuMobileWidth: 280px;
 
   @media (min-width: $mdMin) {
     padding: 30px 15px 15px;
-    border-right: 1px solid #eee;
+    border-right: 1px solid #eeeeee;
   }
 
   @media (max-width: $smMax) {
@@ -51,27 +51,30 @@ $asideMenuMobileWidth: 280px;
 }
 
 .aside-menu__item--selected {
-  color: #fff;
+  color: #ffffff;
   background-color: $mainColor;
 }
 
 .aside-menu__item--selected:hover {
-  color: #fff;
+  color: #ffffff;
   background-color: $mainColor;
 }
 
 .aside-menu__item--divider {
-  border-bottom: 1px solid #eee;
+  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: #fff;
+  color: #ffffff;
   background-color: $dangerColor;
 }
 

src/common/AsideMenu.tsx

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

src/common/ErrorHandler.scss

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

src/common/ErrorHandler.tsx

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

src/common/Home.js

@@ -1,50 +0,0 @@
-import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { isEmpty, values } from 'ramda';
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { ListGroup, ListGroupItem } from 'reactstrap';
-import PropTypes from 'prop-types';
-import './Home.scss';
-
-export default class Home extends React.Component {
-  static propTypes = {
-    resetSelectedServer: PropTypes.func,
-    servers: PropTypes.object,
-  };
-
-  componentDidMount() {
-    this.props.resetSelectedServer();
-  }
-
-  render() {
-    const servers = values(this.props.servers);
-    const hasServers = !isEmpty(servers);
-
-    return (
-      <div className="home">
-        <h1 className="home__title">Welcome to Shlink</h1>
-        <h5 className="home__intro">
-          {hasServers && <span>Please, select a server.</span>}
-          {!hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
-        </h5>
-
-        {hasServers && (
-          <ListGroup className="home__servers-list">
-            {servers.map(({ name, id }) => (
-              <ListGroupItem
-                key={id}
-                tag={Link}
-                to={`/server/${id}/list-short-urls/1`}
-                className="home__servers-item"
-              >
-                {name}
-                <FontAwesomeIcon icon={chevronIcon} className="home__servers-item-icon" />
-              </ListGroupItem>
-            ))}
-          </ListGroup>
-        )}
-      </div>
-    );
-  }
-}

src/common/Home.scss

@@ -1,9 +1,8 @@
 @import '../utils/base';
-@import '../utils/mixins/vertical-align';
 
 .home {
   text-align: center;
-  height: calc(100vh - #{$headerHeight});
+  height: calc(100vh - #{$headerHeight} - #{($footer-height + $footer-margin)});
   display: flex;
   align-items: center;
   justify-content: center;
@@ -17,21 +16,3 @@
     font-size: 2.2rem;
   }
 }
-
-.home__servers-list {
-  margin-top: 1rem;
-  width: 100%;
-  max-width: 400px;
-}
-
-.home__servers-item.home__servers-item {
-  text-align: left;
-  position: relative;
-  padding: .75rem 2.5rem .75rem 1rem;
-}
-
-.home__servers-item-icon {
-  @include vertical-align();
-
-  right: 1rem;
-}

src/common/Home.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { isEmpty, values } from 'ramda';
+import { Link } from 'react-router-dom';
+import ServersListGroup from '../servers/ServersListGroup';
+import './Home.scss';
+import { ServersMap } from '../servers/data';
+
+export interface HomeProps {
+  servers: ServersMap;
+}
+
+const Home = ({ servers }: HomeProps) => {
+  const serversList = values(servers);
+  const hasServers = !isEmpty(serversList);
+
+  return (
+    <div className="home">
+      <h1 className="home__title">Welcome to Shlink</h1>
+      <ServersListGroup servers={serversList}>
+        {hasServers && <span>Please, select a server.</span>}
+        {!hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
+      </ServersListGroup>
+    </div>
+  );
+};
+
+export default Home;

src/common/MainHeader.js

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

src/common/MainHeader.tsx

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

src/common/MenuLayout.js

@@ -1,100 +0,0 @@
-import React from 'react';
-import { Route, Switch } from 'react-router-dom';
-import Swipeable from 'react-swipeable';
-import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import classnames from 'classnames';
-import * as PropTypes from 'prop-types';
-import { serverType } from '../servers/prop-types';
-import './MenuLayout.scss';
-
-const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits) =>
-  class MenuLayout extends React.Component {
-    static propTypes = {
-      match: PropTypes.object,
-      selectServer: PropTypes.func,
-      location: PropTypes.object,
-      selectedServer: serverType,
-    };
-
-    state = { showSideBar: false };
-
-    // FIXME Shouldn't use componentWillMount, but this code has to be run before children components are rendered
-    /* eslint react/no-deprecated: "off" */
-    componentWillMount() {
-      const { match, selectServer } = this.props;
-      const { params: { serverId } } = match;
-
-      selectServer(serverId);
-    }
-
-    componentDidUpdate(prevProps) {
-      const { location } = this.props;
-
-      // Hide sidebar when location changes
-      if (location !== prevProps.location) {
-        this.setState({ showSideBar: false });
-      }
-    }
-
-    render() {
-      const { selectedServer } = this.props;
-      const burgerClasses = classnames('menu-layout__burger-icon', {
-        'menu-layout__burger-icon--active': this.state.showSideBar,
-      });
-
-      return (
-        <React.Fragment>
-          <FontAwesomeIcon
-            icon={burgerIcon}
-            className={burgerClasses}
-            onClick={() => this.setState(({ showSideBar }) => ({ showSideBar: !showSideBar }))}
-          />
-
-          <Swipeable
-            delta={40}
-            className="menu-layout__swipeable"
-            onSwipedLeft={() => this.setState({ showSideBar: false })}
-            onSwipedRight={() => this.setState({ showSideBar: true })}
-          >
-            <div className="row menu-layout__swipeable-inner">
-              <AsideMenu
-                className="col-lg-2 col-md-3"
-                selectedServer={selectedServer}
-                showOnMobile={this.state.showSideBar}
-              />
-              <div
-                className="col-lg-10 offset-lg-2 col-md-9 offset-md-3"
-                onClick={() => this.setState({ showSideBar: false })}
-              >
-                <Switch>
-                  <Route
-                    exact
-                    path="/server/:serverId/list-short-urls/:page"
-                    component={ShortUrls}
-                  />
-                  <Route
-                    exact
-                    path="/server/:serverId/create-short-url"
-                    component={CreateShortUrl}
-                  />
-                  <Route
-                    exact
-                    path="/server/:serverId/short-code/:shortCode/visits"
-                    component={ShortUrlVisits}
-                  />
-                  <Route
-                    exact
-                    path="/server/:serverId/manage-tags"
-                    component={TagsList}
-                  />
-                </Switch>
-              </div>
-            </div>
-          </Swipeable>
-        </React.Fragment>
-      );
-    }
-  };
-
-export default MenuLayout;

src/common/MenuLayout.scss

@@ -32,3 +32,12 @@
 .menu-layout__burger-icon--active {
   color: white;
 }
+
+.menu-layout__container {
+  padding: 20px 0 0;
+  min-height: 100%;
+
+  @media (min-width: $mdMin) {
+    padding: 30px 15px 0;
+  }
+}

src/common/MenuLayout.tsx

@@ -0,0 +1,80 @@
+import React, { FC, useEffect } from 'react';
+import { Route, Switch } from 'react-router-dom';
+import { EventData, Swipeable } from 'react-swipeable';
+import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import { withSelectedServer } from '../servers/helpers/withSelectedServer';
+import { useToggle } from '../utils/helpers/hooks';
+import { versionMatch } from '../utils/helpers/version';
+import { isReachableServer } from '../servers/data';
+import NotFound from './NotFound';
+import { AsideMenuProps } from './AsideMenu';
+import './MenuLayout.scss';
+
+const MenuLayout = (
+  TagsList: FC,
+  ShortUrls: FC,
+  AsideMenu: FC<AsideMenuProps>,
+  CreateShortUrl: FC,
+  ShortUrlVisits: FC,
+  TagVisits: FC,
+  ServerError: FC,
+) => withSelectedServer(({ location, selectedServer }) => {
+  const [ sidebarVisible, toggleSidebar, showSidebar, hideSidebar ] = useToggle();
+
+  useEffect(() => hideSidebar(), [ location ]);
+
+  if (!isReachableServer(selectedServer)) {
+    return <ServerError />;
+  }
+
+  const addTagsVisitsRoute = versionMatch(selectedServer.version, { minVersion: '2.2.0' });
+  const burgerClasses = classNames('menu-layout__burger-icon', {
+    'menu-layout__burger-icon--active': sidebarVisible,
+  });
+  const swipeMenuIfNoModalExists = (callback: () => void) => (e: EventData) => {
+    const swippedOnVisitsTable = (e.event.composedPath() as HTMLElement[]).some(
+      ({ classList }) => classList?.contains('visits-table'),
+    );
+
+    if (swippedOnVisitsTable || document.querySelector('.modal')) {
+      return;
+    }
+
+    callback();
+  };
+
+  return (
+    <React.Fragment>
+      <FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
+
+      <Swipeable
+        delta={40}
+        className="menu-layout__swipeable"
+        onSwipedLeft={swipeMenuIfNoModalExists(hideSidebar)}
+        onSwipedRight={swipeMenuIfNoModalExists(showSidebar)}
+      >
+        <div className="row menu-layout__swipeable-inner">
+          <AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={sidebarVisible} />
+          <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => hideSidebar()}>
+            <div className="menu-layout__container">
+              <Switch>
+                <Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrls} />
+                <Route exact path="/server/:serverId/create-short-url" component={CreateShortUrl} />
+                <Route exact path="/server/:serverId/short-code/:shortCode/visits" component={ShortUrlVisits} />
+                {addTagsVisitsRoute && <Route exact path="/server/:serverId/tag/:tag/visits" component={TagVisits} />}
+                <Route exact path="/server/:serverId/manage-tags" component={TagsList} />
+                <Route
+                  render={() => <NotFound to={`/server/${selectedServer.id}/list-short-urls/1`}>List short URLs</NotFound>}
+                />
+              </Switch>
+            </div>
+          </div>
+        </div>
+      </Swipeable>
+    </React.Fragment>
+  );
+}, ServerError);
+
+export default MenuLayout;

src/common/NoMenuLayout.scss

@@ -0,0 +1,3 @@
+.no-menu-wrapper {
+  padding: 40px 20px 20px;
+}

src/common/NoMenuLayout.tsx

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

src/common/NotFound.tsx

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

src/common/ScrollToTop.js

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

src/common/ScrollToTop.tsx

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren, useEffect } from 'react';
+import { RouteComponentProps } from 'react-router';
+
+const ScrollToTop = () => ({ location, children }: PropsWithChildren<RouteComponentProps>) => {
+  useEffect(() => {
+    scrollTo(0, 0);
+  }, [ location ]);
+
+  return <React.Fragment>{children}</React.Fragment>;
+};
+
+export default ScrollToTop;

src/common/ShlinkVersions.tsx

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

src/common/SimplePaginator.scss

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

src/common/SimplePaginator.tsx

@@ -0,0 +1,48 @@
+import React, { 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;
+}
+
+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 tag="span" onClick={onClick(pageNumber)}>{prettifyPageNumber(pageNumber)}</PaginationLink>
+        </PaginationItem>
+      ))}
+      <PaginationItem disabled={currentPage >= pagesCount}>
+        <PaginationLink next tag="span" onClick={onClick(currentPage + 1)} />
+      </PaginationItem>
+    </Pagination>
+  );
+};
+
+export default SimplePaginator;

src/common/react-tagsinput.scss

@@ -1,6 +1,6 @@
 .react-tagsinput {
-  background-color: #fff;
-  border: 1px solid #ccc;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
   border-radius: .25rem;
   overflow: hidden;
   min-height: 2.6rem;
@@ -22,7 +22,7 @@
   margin: 0 5px 6px 0;
   padding: 6px 8px;
   line-height: 1;
-  color: #fff;
+  color: #ffffff;
 }
 
 .react-tagsinput-remove {
@@ -33,7 +33,7 @@
 
 .react-tagsinput-tag span:before {
   content: '\2715';
-  color: #fff;
+  color: #ffffff;
 }
 
 .react-tagsinput-input {

src/common/services/provideServices.ts

@@ -1,19 +1,26 @@
+import Bottle, { Decorator } 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 ShlinkVersions from '../ShlinkVersions';
+import { ConnectDecorator } from '../../container/types';
+import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
 
-const provideServices = (bottle, connect, withRouter) => {
-  bottle.constant('window', global.window);
+const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
+  bottle.constant('window', (global as any).window);
+  bottle.constant('console', global.console);
 
-  bottle.serviceFactory('ScrollToTop', ScrollToTop, 'window');
+  bottle.serviceFactory('ScrollToTop', ScrollToTop);
   bottle.decorator('ScrollToTop', withRouter);
 
   bottle.serviceFactory('MainHeader', MainHeader, 'ServersDropdown');
   bottle.decorator('MainHeader', withRouter);
 
   bottle.serviceFactory('Home', () => Home);
+  bottle.decorator('Home', withoutSelectedServer);
   bottle.decorator('Home', connect([ 'servers' ], [ 'resetSelectedServer' ]));
 
   bottle.serviceFactory(
@@ -23,12 +30,19 @@ const provideServices = (bottle, connect, withRouter) => {
     'ShortUrls',
     'AsideMenu',
     'CreateShortUrl',
-    'ShortUrlVisits'
+    'ShortUrlVisits',
+    'TagVisits',
+    'ServerError',
   );
   bottle.decorator('MenuLayout', connect([ 'selectedServer', 'shortUrlsListParams' ], [ 'selectServer' ]));
   bottle.decorator('MenuLayout', withRouter);
 
   bottle.serviceFactory('AsideMenu', AsideMenu, 'DeleteServerButton');
+
+  bottle.serviceFactory('ShlinkVersions', () => ShlinkVersions);
+  bottle.decorator('ShlinkVersions', connect([ 'selectedServer' ]));
+
+  bottle.serviceFactory('ErrorHandler', ErrorHandler, 'window', 'console');
 };
 
 export default provideServices;

src/container/index.ts

@@ -1,4 +1,4 @@
-import Bottle from 'bottlejs';
+import Bottle, { IContainer } from 'bottlejs';
 import { withRouter } from 'react-router-dom';
 import { connect as reduxConnect } from 'react-redux';
 import { pick } from 'ramda';
@@ -9,24 +9,29 @@ 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 { ConnectDecorator } from './types';
+
+type LazyActionMap = Record<string, Function>;
 
 const bottle = new Bottle();
 const { container } = bottle;
 
-const lazyService = (container, serviceName) => (...args) => container[serviceName](...args);
-const mapActionService = (map, actionName) => ({
+const lazyService = (container: IContainer, serviceName: string) => (...args: any[]) => container[serviceName](...args);
+const mapActionService = (map: LazyActionMap, actionName: string): LazyActionMap => ({
   ...map,
-
   // Wrap actual action service in a function so that it is lazily created the first time it is called
   [actionName]: lazyService(container, actionName),
 });
-const connect = (propsFromState, actionServiceNames) =>
+const connect: ConnectDecorator = (propsFromState: string[] | null, actionServiceNames: string[] = []) =>
   reduxConnect(
     propsFromState ? pick(propsFromState) : null,
-    actionServiceNames.reduce(mapActionService, {})
+    actionServiceNames.reduce(mapActionService, {}),
   );
 
-bottle.serviceFactory('App', App, 'MainHeader', 'Home', 'MenuLayout', 'CreateServer');
+bottle.serviceFactory('App', App, 'MainHeader', 'Home', 'MenuLayout', 'CreateServer', 'EditServer', 'Settings', 'ShlinkVersions');
+bottle.decorator('App', connect([ 'servers' ], [ 'fetchServers' ]));
 
 provideCommonServices(bottle, connect, withRouter);
 provideShortUrlsServices(bottle, connect);
@@ -34,5 +39,7 @@ provideServersServices(bottle, connect, withRouter);
 provideTagsServices(bottle, connect);
 provideVisitsServices(bottle, connect);
 provideUtilsServices(bottle);
+provideMercureServices(bottle);
+provideSettingsServices(bottle, connect);
 
 export default container;

src/container/store.js

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

src/container/store.ts

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

src/container/types.ts

@@ -0,0 +1,40 @@
+import { MercureInfo } from '../mercure/reducers/mercureInfo';
+import { SelectedServer, ServersMap } from '../servers/data';
+import { Settings } from '../settings/reducers/settings';
+import { ShortUrlMetaEdition } from '../short-urls/reducers/shortUrlMeta';
+import { ShortUrlCreation } from '../short-urls/reducers/shortUrlCreation';
+import { ShortUrlDeletion } from '../short-urls/reducers/shortUrlDeletion';
+import { ShortUrlEdition } from '../short-urls/reducers/shortUrlEdition';
+import { ShortUrlsListParams } from '../short-urls/reducers/shortUrlsListParams';
+import { ShortUrlTags } from '../short-urls/reducers/shortUrlTags';
+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 '../visits/reducers/shortUrlDetail';
+import { ShortUrlVisits } from '../visits/reducers/shortUrlVisits';
+import { TagVisits } from '../visits/reducers/tagVisits';
+
+export interface ShlinkState {
+  servers: ServersMap;
+  selectedServer: SelectedServer;
+  shortUrlsList: ShortUrlsList;
+  shortUrlsListParams: ShortUrlsListParams;
+  shortUrlCreationResult: ShortUrlCreation;
+  shortUrlDeletion: ShortUrlDeletion;
+  shortUrlTags: ShortUrlTags;
+  shortUrlMeta: ShortUrlMetaEdition;
+  shortUrlEdition: ShortUrlEdition;
+  shortUrlVisits: ShortUrlVisits;
+  tagVisits: TagVisits;
+  shortUrlDetail: ShortUrlDetail;
+  tagsList: TagsList;
+  tagDelete: TagDeletion;
+  tagEdit: TagEdition;
+  mercureInfo: MercureInfo;
+  settings: Settings;
+}
+
+export type ConnectDecorator = (props: string[] | null, actions?: string[]) => any;
+
+export type GetState = () => ShlinkState;

src/index.scss

@@ -10,10 +10,6 @@ body,
   outline: none !important;
 }
 
-.nowrap {
-  white-space: nowrap;
-}
-
 .bg-main {
   background-color: $mainColor !important;
 }
@@ -28,16 +24,8 @@ body,
   color: inherit !important;
 }
 
-.shlink-container {
-  padding: 20px 0;
-
-  @media (min-width: $mdMin) {
-    padding: 30px 15px;
-  }
-}
-
 .badge-main {
-  color: #fff;
+  color: #ffffff;
   background-color: $mainColor;
 }
 
@@ -46,8 +34,38 @@ body,
   display: block !important;
 }
 
+.react-datepicker-popper {
+  z-index: 2;
+}
+
 .navbar-brand {
   @media (max-width: $smMax) {
     margin: 0 auto !important;
   }
 }
+
+.pagination .page-link {
+  cursor: pointer;
+}
+
+.indivisible {
+  white-space: nowrap;
+}
+
+.text-ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.react-datepicker__day--keyboard-selected {
+  background-color: $mainColor;
+
+  &:hover {
+    background-color: darken($mainColor, 12%);
+  }
+}
+
+.progress-bar {
+  background-color: $mainColor;
+}

src/index.tsx

@@ -1,13 +1,12 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import { homepage } from '../package.json';
-import registerServiceWorker from './registerServiceWorker';
 import container from './container';
 import store from './container/store';
-import { fixLeafletIcons } from './utils/utils';
+import { fixLeafletIcons } from './utils/helpers/leaflet';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import 'react-datepicker/dist/react-datepicker.css';
 import 'leaflet/dist/leaflet.css';
 import './common/react-tagsinput.scss';
@@ -16,16 +15,17 @@ import './index.scss';
 // This overwrites icons used for leaflet maps, fixing some issues caused by webpack while processing the CSS
 fixLeafletIcons();
 
-const { App, ScrollToTop } = container;
+const { App, ScrollToTop, ErrorHandler } = container;
 
 render(
   <Provider store={store}>
     <BrowserRouter basename={homepage}>
-      <ScrollToTop>
-        <App />
-      </ScrollToTop>
+      <ErrorHandler>
+        <ScrollToTop>
+          <App />
+        </ScrollToTop>
+      </ErrorHandler>
     </BrowserRouter>
   </Provider>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
-registerServiceWorker();

src/mercure/helpers/boundToMercureHub.tsx

@@ -0,0 +1,41 @@
+import React, { FC, useEffect } from 'react';
+import { pipe } from 'ramda';
+import { CreateVisit } from '../../visits/types';
+import { MercureInfo } from '../reducers/mercureInfo';
+import { bindToMercureTopic } from './index';
+
+export interface MercureBoundProps {
+  createNewVisits: (createdVisits: CreateVisit[]) => void;
+  loadMercureInfo: Function;
+  mercureInfo: MercureInfo;
+}
+
+export function boundToMercureHub<T = {}>(
+  WrappedComponent: FC<MercureBoundProps & T>,
+  getTopicForProps: (props: T) => string,
+) {
+  const pendingUpdates = new Set<CreateVisit>();
+
+  return (props: MercureBoundProps & T) => {
+    const { createNewVisits, loadMercureInfo, mercureInfo } = props;
+    const { interval } = mercureInfo;
+
+    useEffect(() => {
+      const onMessage = (visit: CreateVisit) => interval ? pendingUpdates.add(visit) : createNewVisits([ visit ]);
+      const closeEventSource = bindToMercureTopic(mercureInfo, getTopicForProps(props), 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

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

src/mercure/reducers/mercureInfo.ts

@@ -0,0 +1,54 @@
+import { Action, Dispatch } from 'redux';
+import { ShlinkMercureInfo } from '../../utils/services/types';
+import { GetState } from '../../container/types';
+import { buildReducer } from '../../utils/helpers/redux';
+import { ShlinkApiClientBuilder } from '../../utils/services/ShlinkApiClientBuilder';
+
+/* eslint-disable padding-line-between-statements */
+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';
+/* eslint-enable padding-line-between-statements */
+
+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 });
+    }
+  };