next release version

* new chart system

.eslintignore

@@ -1,3 +0,0 @@
-/ui/public
-/db/
-/conf/

README.md

@@ -1,102 +1,159 @@
+# Fredy 🏡 – Your Self-Hosted Real Estate Finder for Germany
+
+Finding an apartment or house in Germany can be stressful and
+time-consuming.\
+**Fredy** makes it easier: it automatically scrapes **ImmoScout24,
+Immowelt, Immonet, eBay Kleinanzeigen, and WG-Gesucht** and notifies you
+instantly via **Slack, Telegram, Email, ntfy, and more** when new
+listings appear.
+
+With a modern architecture, Fredy provides a **clean Web UI**, removes
+duplicates across platforms, and stores results so you never see the
+same listing twice.
+
 <img src="https://github.com/orangecoding/fredy/blob/master/doc/logo.png" width="400">
 
-![Test](https://github.com/orangecoding/fredy/actions/workflows/test.yml/badge.svg) [![Create and publish Docker image](https://github.com/orangecoding/fredy/actions/workflows/docker.yml/badge.svg)](https://github.com/orangecoding/fredy/actions/workflows/docker.yml) ![Check the sourcecode](https://github.com/orangecoding/fredy/actions/workflows/check_source.yml/badge.svg)
+![Tests](https://github.com/orangecoding/fredy/actions/workflows/test.yml/badge.svg)
+[![Docker](https://github.com/orangecoding/fredy/actions/workflows/docker.yml/badge.svg)](https://github.com/orangecoding/fredy/actions/workflows/docker.yml)
+![Source](https://github.com/orangecoding/fredy/actions/workflows/check_source.yml/badge.svg)
 
-Searching an apartment in Germany can be a frustrating task. Not any longer though, as _Fredy_ will take over and will only notify you once new listings have been found that match your requirements.
+------------------------------------------------------------------------
 
-_Fredy_ scrapes multiple services (Immonet, Immowelt etc.) and send new listings to you once they become available. The list of available services can easily be extended. For your convenience, _Fredy_ has a UI to help you configure your search jobs.
+## ✨ Key Features
 
-If _Fredy_ finds matching results, it will send them to you via Slack, Email, Telegram etc. (More adapters can be configured.) As _Fredy_ stores the listings it has found, new results will not be sent to you twice (and as a side-effect, _Fredy_ can show some statistics). Furthermore, _Fredy_ checks duplicates per scraping so that the same listings are not being sent twice or more when posted on various platforms (which happens more often than one might think).
+-   🏠 Scrapes **ImmoScout24, Immowelt, Immonet, eBay Kleinanzeigen,
+    WG-Gesucht**
+-   ⚡ Instant notifications: Slack, Telegram, Email (SendGrid,
+    Mailjet), ntfy
+-   🔎 Uses the **ImmoScout Mobile API** (reverse engineered)
+-   🌍 Runs anywhere: Docker, Node.js, self-hosted
+-   🖥️ Intuitive **Web UI** to manage searches
+-   🎯 Easy to use thanks to a user-friendly Web UI
+-   🔄 Deduplication across platforms
+-   ⏱️ Customizable search intervals
 
-# Sponsorship [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/orangecoding)
+------------------------------------------------------------------------
 
-If you like my work, consider becoming a sponsor. I'm not expecting anybody to pay for _Fredy_ or any other Open Source Project I'm maintaining, however keep in mind, I'm doing all of this in my spare time :) Thanks.
+## 🤝 Sponsorship [![](https://img.shields.io/static/v1?label=Sponsor&message=❤&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/orangecoding)
 
-[![JetBrains logo.](https://resources.jetbrains.com/storage/products/company/brand/logos/jetbrains.svg)](https://jb.gg/OpenSourceSupport)
+I maintain Fredy and other open-source projects in my free time.\
+If you find it useful, consider supporting the project 💙
 
-_Fredy_ is supported by JetBrains under Open Source Support Program
+[<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jetbrains.svg" alt="JetBrains" width="120"/>](https://jb.gg/OpenSourceSupport)
 
-## Demo
+Fredy is proudly supported by the **JetBrains Open Source Support
+Program**.
 
-If you want to try out _Fredy_, you can access the demo version [here](https://fredy.orange-coding.net) 🤘
+------------------------------------------------------------------------
 
-## Usage
+## 🚀 Quick Start
 
-- Make sure to use Node.js 20 or above
+### With Docker
-- Run the following commands:
 
-```ssh
+``` bash
+docker pull ghcr.io/orangecoding/fredy:master
+docker create --name fredy -v /path/to/your/conf/:/conf -p 9998:9998 fredy/fredy
+docker start fredy
+```
+
+Logs:
+
+``` bash
+docker logs fredy -f
+```
+
+### Manual (Node.js)
+
+-   Requirement: **Node.js 20 or higher**
+-   Install dependencies and start:
+
+``` bash
 yarn
-yarn run start:backend
+yarn run start:backend   # in one terminal
-yarn run start:frontend
+yarn run start:frontend  # in another terminal
 ```
 
-_Fredy_ will start with the default port, set to `9998`. You can access _Fredy_ by opening your browser at `http://localhost:9998`. The default login is `admin`, both for username and password. You should change the password as soon as possible when you plan to run Fredy on a server.
+👉 Open <http://localhost:9998>
 
-<p align="center">
+**Default Login:**
-  <img alt="Job Configuration" src="https://github.com/orangecoding/fredy/blob/master/doc/screenshot1.png" width="30%">
+- Username: `admin`
-&nbsp; &nbsp; &nbsp; &nbsp;
+- Password: `admin`
-  <img alt="Job Analytics" src="https://github.com/orangecoding/fredy/blob/master/doc/screenshot_2.png" width="30%">
-&nbsp; &nbsp; &nbsp; &nbsp;  
-  <img alt="Job Overview" width="30%" src="https://github.com/orangecoding/fredy/blob/master/doc/screenshot_3.png">
-</p>
 
-## Understanding the fundamentals
+------------------------------------------------------------------------
 
-There are 3 important parts in Fredy, that you need to understand to leverage the full power of _Fredy_.
+## 📸 Screenshots
 
-#### Provider
+| Job Configuration | Job Analytics | Job Overview |
+|-------------------|--------------|--------------|
+| ![Screenshot showing job configuration in Fredy](doc/screenshot1.png) | ![Screenshot showing job analytics in Fredy](doc/screenshot_2.png) | ![Screenshot showing job overview in Fredy](doc/screenshot_3.png) |
 
-_Fredy_ supports multiple services. Immonet, Immowelt and Ebay are just a few examples. Those services are called providers within _Fredy_. When creating a new job, you can choose one or more providers.
+------------------------------------------------------------------------
-A provider contains the URL that points to the search results for the respective service. If you go to immonet.de and search for something, the displayed URL in the browser is what the provider needs to do its magic.
-**It is important that you order the search results by date, so that _Fredy_ always picks the latest results first!**
 
-#### Adapter
+## 🧩 Core Concepts
 
-_Fredy_ supports multiple adapters, such as Slack, SendGrid, Telegram etc. A search job can have as many adapters as supported by _Fredy_. Each adapter needs different configuration values, which you have to provide when using them. An adapter dictates how the frontend renders by telling the frontend what information it needs in order to send listings to the user.
+Fredy is built around three simple concepts:
 
-#### Jobs
+### Provider 🌐
 
-A Job wraps adapters and providers. _Fredy_ runs the configured jobs in a specific interval (can be configured in `/conf/config.json`).
+A **provider** is a real-estate platform (e.g. ImmoScout24, Immowelt,
+Immonet, eBay Kleinanzeigen, WG-Gesucht).\
+When you create a job, you paste the search URL from the platform into
+Fredy.\
+⚠️ Always make sure the search results are sorted by **date**, so Fredy
+picks up the newest listings first.
 
-## Creating your first job
+### Adapter 📡
 
-To create your first job, click on the button "Create New Job" on the job table. The job creation dialog should be self-explanatory, however there is one important thing.
+An **adapter** is the channel through which Fredy notifies you (Slack,
-When configuring providers, before copying the URL from your browser, make sure that you have sorted the results by date to make sure _Fredy_ always picks the latest results first.
+Telegram, Email, ntfy, ...).\
+Each adapter has its own configuration (e.g. API keys, webhook URLs).\
+You can use multiple adapters at once --- Fredy will send new listings
+through all of them.
 
-## User management
+### Job 📅
 
-As an administrator, you can create, edit and remove users from _Fredy_. Be careful, each job is connected to the user that has created the job. If you remove the user, their jobs will also be removed.
+A **job** combines providers and adapters.\
+Example: "Search apartments on ImmoScout24 + Immowelt and send results
+to Slack + Telegram."\
+Jobs run automatically at the interval you configure (see
+`/conf/config.json`).
 
-# Development
+------------------------------------------------------------------------
 
-### Running Fredy in development mode
+## Immoscout
 
-Start the backend with:
+Immoscout has implemented advanced bot detection. In order to work around this, we are using a reversed engineered version of their mobile api. See [Immoscout Reverse Engineering Documentation](https://github.com/orangecoding/fredy/blob/master/reverse-engineered-immoscout.md)
 
-```shell
+## Analytics
+
+Fredy is completely free (and will always remain free). However, it would be a huge help if you’d allow me to collect some analytical data.
+Before you freak out, let me explain...  
+If you agree, Fredy will send a ping to my Mixpanel project each time it runs.  
+The data includes: names of active adapters/providers, OS, architecture, Node version, and language. The information is entirely anonymous and helps me understand which adapters/providers are most frequently used.</p>
+
+**Thanks**🤘
+
+## 🛠️ Development
+
+### Development Mode
+
+``` bash
 yarn run start:backend:dev
-```
-
-For the frontend, run:
-
-```shell
 yarn run start:frontend:dev
 ```
-
 You should now be able to access _Fredy_ from your browser. Check your Terminal to see what port the frontend is running on.
 
-### Running Tests
+### Run Tests
 
-To run the tests, run
+``` bash
-
-```shell
 yarn run test
 ```
 
-# Architecture
+------------------------------------------------------------------------
 
-```mermaid
+## 📐 Architecture
+
+``` mermaid
 flowchart TD
  subgraph Jobs["Jobs"]
         A1["Job 1"]
@@ -109,80 +166,38 @@ flowchart TD
         C3["Provider 3"]
   end
  subgraph NotificationAdapters["Notification Adapters"]
-        F1["Notification Adapter 1"]
+        F1["Adapter 1"]
-        F2["Notification Adapter 2"]
+        F2["Adapter 2"]
   end
 
     A1 --> B["FredyRuntime"]
     A2 --> B
     A3 --> B
     B --> C1 & C2 & C3
-    C1 --> D["Similarity-Check"]
+    C1 --> D["Similarity Check"]
     C2 --> D
     C3 --> D
-    D --> E{"Found<br>similarity?"}
+    D --> E{"Duplicate?"}
     E -- No --> F1
     F1 --> F2
-
-    style A1 fill:#fde9a0,stroke:#333333,color:#333333
-    style A2 fill:#fde9a0,stroke:#333333,color:#333333
-    style A3 fill:#fde9a0,stroke:#333333,color:#333333
-    style C1 fill:#c4c9f1,stroke:#333333,color:#333333
-    style C2 fill:#c4c9f1,stroke:#333333,color:#333333
-    style C3 fill:#c4c9f1,stroke:#333333,color:#333333
-    style F1 fill:#d2edba,stroke:#333333,color:#333333
-    style F2 fill:#d2edba,stroke:#333333,color:#333333
-    style B fill:#abd8f9,stroke:#333333,color:#333333
-    style D fill:#fab4a8,stroke:#333333,color:#333333
-    style E fill:#fffbb4,stroke:#333333,color:#333333
 ```
 
-### Immoscout
+------------------------------------------------------------------------
 
-Immoscout has implemented advanced bot detection. In order to work around this, we are using a reversed engineered version of their mobile api. See [Immoscout Reverse Engineering Documentation](https://github.com/orangecoding/fredy/blob/master/reverse-engineered-immoscout.md)
+## 👐 Contributing
 
-# Analytics
+Thanks to everyone who has contributed!
 
-Fredy is completely free (and will always remain free). However, it would be a huge help if you’d allow me to collect some analytical data.
+`<a href="https://github.com/orangecoding/fredy/graphs/contributors">`{=html}
-Before you freak out, let me explain...  
+`<img src="https://contrib.rocks/image?repo=orangecoding/fredy" />`{=html}
-If you agree, Fredy will send a ping to my Mixpanel project each time it runs.  
+`</a>`{=html}
-The data includes: names of active adapters/providers, OS, architecture, Node version, and language. The information is entirely anonymous and helps me understand which adapters/providers are most frequently used.</p>
-**Thanks**🤘
 
-# Docker
+See the [Contributing
+Guide](https://github.com/orangecoding/fredy/blob/master/CONTRIBUTING.md).
 
-Use the Dockerfile in this repository to build an image.
+------------------------------------------------------------------------
 
-Example: `docker build -t fredy/fredy /path/to/your/Dockerfile`
+## ⭐ Star History
 
-Or use docker-compose:
+[![Star History
-
+Chart](https://api.star-history.com/svg?repos=orangecoding/fredy&type=Date)](https://www.star-history.com/#orangecoding/fredy&Date)
-Example `docker-compose build`
-
-Or use the container that will be built automatically.
-
-`docker pull ghcr.io/orangecoding/fredy:master`
-
-## Create & run a container
-
-Put your config.json into a path of your choice, such as `/path/to/your/conf/`.
-
-Example: `docker create --name fredy -v /path/to/your/conf/:/conf -p 9998:9998 fredy/fredy`
-
-## Logs
-
-You can browse the logs with `docker logs fredy -f`.
-
-### 👐 Contributing
-
-Thanks to all the people who already contributed!
-
-<a href="https://github.com/orangecoding/fredy/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=orangecoding/fredy" />
-</a>
-
-See [Contributing](https://github.com/orangecoding/fredy/blob/master/CONTRIBUTING.md)
-
-## Star History
-
-[![Star History Chart](https://api.star-history.com/svg?repos=orangecoding/fredy&type=Date)](https://www.star-history.com/#orangecoding/fredy&Date)

conf/config.json

@@ -1,7 +1 @@
-{
+{"interval":"60","port":9998,"workingHours":{"from":"","to":""},"demoMode":false,"analyticsEnabled":null}
-  "interval": "60",
-  "port": 9998,
-  "workingHours": { "from": "", "to": "" },
-  "demoMode": false,
-  "analyticsEnabled": null
-}

eslint.config.js

@@ -6,6 +6,10 @@ import react from 'eslint-plugin-react';
 import babelParser from '@babel/eslint-parser';
 
 export default [
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    ignores: ['**/node_modules/**', '**/dist/**', '**/build/**', '**/public/**', 'db/**', 'conf/**'],
+  },
   js.configs.recommended,
   prettier,
   {
@@ -23,70 +27,34 @@ export default [
         after: 'readonly',
         it: 'readonly',
       },
-      parserOptions: {
+      parserOptions: { requireConfigFile: false },
-        requireConfigFile: false,
-      },
-    },
-    plugins: {
-      react,
     },
+    plugins: { react },
     rules: {
       eqeqeq: [2, 'allow-null'],
-
-      // Semantics / Performance impacting
       strict: 0,
       'no-redeclare': [2, { builtinGlobals: false }],
       'class-methods-use-this': 'off',
-
-      // Style
       indent: ['off', 2],
       'linebreak-style': ['error', 'unix'],
       quotes: ['error', 'single', { avoidEscape: true, allowTemplateLiterals: true }],
       semi: ['error', 'always'],
       'no-console': ['error', { allow: ['warn', 'error'] }],
-
-      // React
       'jsx-quotes': ['error', 'prefer-double'],
       'react/display-name': 'off',
       'react/forbid-prop-types': 'off',
       'react/jsx-closing-bracket-location': 'off',
       'react/jsx-curly-spacing': 'off',
-      'react/jsx-handler-names': [
+      'react/jsx-handler-names': ['off', { eventHandlerPrefix: 'handle', eventHandlerPropPrefix: 'on' }],
-        'off',
-        {
-          eventHandlerPrefix: 'handle',
-          eventHandlerPropPrefix: 'on',
-        },
-      ],
       'react/jsx-indent-props': 'off',
       'react/jsx-key': 'off',
       'react/jsx-max-props-per-line': 'off',
-      'react/jsx-no-bind': [
+      'react/jsx-no-bind': ['error', { ignoreRefs: true, allowArrowFunctions: true, allowBind: false }],
-        'error',
-        {
-          ignoreRefs: true,
-          allowArrowFunctions: true,
-          allowBind: false,
-        },
-      ],
       'react/jsx-no-duplicate-props': ['error', { ignoreCase: true }],
       'react/jsx-no-literals': 'off',
       'react/jsx-no-undef': 'error',
-      'react/jsx-pascal-case': [
+      'react/jsx-pascal-case': ['error', { allowAllCaps: true, ignore: [] }],
-        'error',
+      'react/sort-prop-types': ['off', { ignoreCase: true, callbacksLast: false, requiredFirst: false }],
-        {
-          allowAllCaps: true,
-          ignore: [],
-        },
-      ],
-      'react/sort-prop-types': [
-        'off',
-        {
-          ignoreCase: true,
-          callbacksLast: false,
-          requiredFirst: false,
-        },
-      ],
       'react/jsx-sort-prop-types': 'off',
       'react/jsx-sort-props': 'off',
       'react/jsx-uses-react': 'error',
@@ -106,14 +74,7 @@ export default [
       'react/require-render-return': 'error',
       'react/self-closing-comp': 'warn',
       'react/sort-comp': 'off',
-      'react/jsx-wrap-multilines': [
+      'react/jsx-wrap-multilines': ['warn', { declaration: true, assignment: true, return: true }],
-        'warn',
-        {
-          declaration: true,
-          assignment: true,
-          return: true,
-        },
-      ],
       'react/wrap-multilines': 'off',
       'react/jsx-first-prop-new-line': 'off',
       'react/jsx-equals-spacing': ['warn', 'never'],
@@ -126,20 +87,10 @@ export default [
       'react/no-find-dom-node': 'warn',
       'react/forbid-component-props': ['off', { forbid: [] }],
       'react/no-danger-with-children': 'error',
-      'react/no-unused-prop-types': [
+      'react/no-unused-prop-types': ['warn', { customValidators: [], skipShapeProps: true }],
-        'warn',
-        {
-          customValidators: [],
-          skipShapeProps: true,
-        },
-      ],
       'react/style-prop-object': 'error',
       'react/no-children-prop': 'warn',
     },
-    settings: {
+    settings: { react: { version: 'detect' } },
-      react: {
-        version: 'detect',
-      },
-    },
   },
 ];

lib/provider/immonet.js

@@ -11,7 +11,7 @@ let appliedBlackList = [];
 function normalize(o) {
   const size = o.size != null ? o.size.replace('Wohnfläche ', '') : 'N/A m²';
   const price = o.price.replace('Kaufpreis ', '');
-  const address = o.address.split(' • ')[o.address.split(' • ').length - 1];
+  const address = o.address?.split(' • ')?.pop() ?? null;
   const title = o.title || 'No title available';
   const link = config.url;
   const id = buildHash(title, price);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fredy",
-  "version": "11.4.3",
+  "version": "11.5.1",
   "description": "[F]ind [R]eal [E]states [d]amn eas[y].",
   "scripts": {
     "prepare": "husky",
@@ -11,7 +11,7 @@
     "build:frontend": "vite build",
     "format": "prettier --write \"**/*.js\"",
     "format:check": "prettier --check \"**/*.js\"",
-    "test": "mocha --loader=esmock --timeout 60000 test/**/*.test.js",
+    "test": "node --import ./test/esmock-loader.mjs ./node_modules/mocha/bin/mocha.js --timeout 60000 test/**/*.test.js",
     "lint": "eslint .",
     "lint:fix": "yarn lint --fix"
   },
@@ -54,18 +54,19 @@
     "Firefox ESR"
   ],
   "dependencies": {
-    "@douyinfe/semi-ui": "2.85.0",
+    "@douyinfe/semi-ui": "2.86.0",
     "@rematch/core": "2.2.0",
     "@rematch/loading": "2.1.2",
     "@sendgrid/mail": "8.1.5",
+    "@visactor/react-vchart": "^2.0.4",
+    "@visactor/vchart": "^2.0.4",
+    "@visactor/vchart-semi-theme": "^1.12.2",
     "@vitejs/plugin-react": "5.0.2",
     "better-sqlite3": "^12.2.0",
     "body-parser": "2.2.0",
     "cheerio": "^1.1.2",
     "cookie-session": "2.1.1",
     "handlebars": "4.7.8",
-    "highcharts": "12.3.0",
-    "highcharts-react-official": "3.2.2",
     "lodash": "4.17.21",
     "lowdb": "7.0.1",
     "markdown": "^0.5.0",
@@ -75,22 +76,22 @@
     "node-mailjet": "6.0.9",
     "p-throttle": "^8.0.0",
     "package-up": "^5.0.0",
-    "puppeteer": "^24.17.1",
+    "puppeteer": "^24.19.0",
     "puppeteer-extra": "^3.3.6",
     "puppeteer-extra-plugin-stealth": "^2.11.2",
     "query-string": "9.2.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-redux": "9.2.0",
-    "react-router": "5.2.1",
+    "react-router": "7.8.2",
-    "react-router-dom": "5.3.0",
+    "react-router-dom": "7.8.2",
     "redux": "5.0.1",
     "redux-thunk": "3.1.0",
     "restana": "5.1.0",
     "serve-static": "2.2.0",
     "slack": "11.0.2",
     "string-similarity": "^4.0.4",
-    "vite": "7.1.3",
+    "vite": "7.1.4",
     "x-var": "^2.1.0"
   },
   "devDependencies": {
@@ -102,12 +103,12 @@
     "eslint": "9.34.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-react": "7.37.5",
-    "esmock": "2.7.1",
+    "esmock": "2.7.2",
     "history": "5.3.0",
     "husky": "9.1.7",
     "less": "4.4.1",
-    "lint-staged": "16.1.5",
+    "lint-staged": "16.1.6",
-    "mocha": "11.7.1",
+    "mocha": "11.7.2",
     "nodemon": "^3.1.10",
     "prettier": "3.6.2",
     "redux-logger": "3.0.6"

test/esmock-loader.mjs

@@ -0,0 +1,4 @@
+import { register } from 'node:module';
+import { pathToFileURL } from 'node:url';
+
+register('esmock', pathToFileURL('./'));

ui/src/App.jsx

@@ -7,14 +7,13 @@ import JobMutation from './views/jobs/mutation/JobMutation';
 import UserMutator from './views/user/mutation/UserMutator';
 import JobInsight from './views/jobs/insights/JobInsight.jsx';
 import { useDispatch, useSelector } from 'react-redux';
-import { Switch, Redirect } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
 import Logout from './components/logout/Logout';
 import Logo from './components/logo/Logo';
 import Menu from './components/menu/Menu';
 import Login from './views/login/Login';
 import Users from './views/user/Users';
 import Jobs from './views/jobs/Jobs';
-import { Route } from 'react-router';
 
 import './App.less';
 import TrackingModal from './components/tracking/TrackingModal.jsx';
@@ -49,10 +48,10 @@ export default function FredyApp() {
   const isAdmin = () => currentUser != null && currentUser.isAdmin;
 
   const login = () => (
-    <Switch>
+    <Routes>
-      <Route name="Login" path={'/login'} component={Login} />
+      <Route path="/login" element={<Login />} />
-      <Redirect from="*" to={'/login'} />
+      <Route path="*" element={<Navigate to="/login" replace />} />
-    </Switch>
+    </Routes>
   );
 
   return loading ? null : needsLogin() ? (
@@ -77,34 +76,49 @@ export default function FredyApp() {
           </>
         )}
         {settings.analyticsEnabled === null && !settings.demoMode && <TrackingModal />}
-        <Switch>
+        <Routes>
-          <Route name="Insufficient Permission" path={'/403'} component={InsufficientPermission} />
+          <Route path="/403" element={<InsufficientPermission />} />
-          <Route name="Create new Job" path={'/jobs/new'} component={JobMutation} />
+          <Route path="/jobs/new" element={<JobMutation />} />
-          <Route name="Edit a Job" path={'/jobs/edit/:jobId'} component={JobMutation} />
+          <Route path="/jobs/edit/:jobId" element={<JobMutation />} />
-          <Route name="Insights into a Job" path={'/jobs/insights/:jobId'} component={JobInsight} />
+          <Route path="/jobs/insights/:jobId" element={<JobInsight />} />
-          <Route name="Job overview" path={'/jobs'} component={Jobs} />
+          <Route path="/jobs" element={<Jobs />} />
-          <PermissionAwareRoute
+
-            name="Create new User"
+          {/* Permission-aware routes */}
+          <Route
             path="/users/new"
-            component={<UserMutator />}
+            element={
-            currentUser={currentUser}
+              <PermissionAwareRoute currentUser={currentUser}>
+                <UserMutator />
+              </PermissionAwareRoute>
+            }
           />
-          <PermissionAwareRoute
+          <Route
-            name="Edit a user"
             path="/users/edit/:userId"
-            component={<UserMutator />}
+            element={
-            currentUser={currentUser}
+              <PermissionAwareRoute currentUser={currentUser}>
+                <UserMutator />
+              </PermissionAwareRoute>
+            }
           />
-          <PermissionAwareRoute name="Users" path="/users" component={<Users />} currentUser={currentUser} />
+          <Route
-          <PermissionAwareRoute
+            path="/users"
-            name="General Settings"
+            element={
+              <PermissionAwareRoute currentUser={currentUser}>
+                <Users />
+              </PermissionAwareRoute>
+            }
+          />
+          <Route
             path="/generalSettings"
-            component={<GeneralSettings />}
+            element={
-            currentUser={currentUser}
+              <PermissionAwareRoute currentUser={currentUser}>
+                <GeneralSettings />
+              </PermissionAwareRoute>
+            }
           />
 
-          <Redirect from="/" to={'/jobs'} />
+          <Route path="/" element={<Navigate to="/jobs" replace />} />
-        </Switch>
+        </Routes>
       </div>
     </div>
   );

ui/src/Index.jsx

@@ -2,23 +2,24 @@ import React from 'react';
 
 import { reduxStore } from './services/rematch/store';
 import { HashRouter } from 'react-router-dom';
-import { createHashHistory } from 'history';
 import { Provider } from 'react-redux';
 import { createRoot } from 'react-dom/client';
 import en_US from '@douyinfe/semi-ui/lib/es/locale/source/en_US';
 import { LocaleProvider } from '@douyinfe/semi-ui';
+import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
+import App from './App';
+import './Index.less';
 
 const container = document.getElementById('fredy');
 const root = createRoot(container);
-const history = createHashHistory();
 
-import App from './App';
+initVChartSemiTheme({
-
+  defaultMode: 'dark',
-import './Index.less';
+});
 
 root.render(
   <Provider store={reduxStore}>
-    <HashRouter history={history}>
+    <HashRouter>
       <LocaleProvider locale={en_US}>
         <App />
       </LocaleProvider>

ui/src/components/menu/Menu.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Tabs, TabPane } from '@douyinfe/semi-ui';
 
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import { IconUser, IconTerminal, IconSetting } from '@douyinfe/semi-icons';
 import './Menu.less';
 
@@ -12,15 +12,10 @@ function parsePathName(name) {
 }
 
 const TopMenu = function TopMenu({ isAdmin }) {
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
   return (
-    <Tabs
+    <Tabs className="menu" type="line" activeKey={parsePathName(location.pathname)} onTabClick={(key) => navigate(key)}>
-      className="menu"
-      type="line"
-      activeKey={parsePathName(location.pathname)}
-      onTabClick={(key) => history.push(key)}
-    >
       <TabPane
         itemKey="/jobs"
         tab={

ui/src/components/permission/PermissionAwareRoute.jsx

@@ -1,21 +1,8 @@
 import React from 'react';
 
-import { Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
-import { Route } from 'react-router';
 
-export default function PermissionAwareRoute({ currentUser, name, path, component }) {
+export default function PermissionAwareRoute({ currentUser, children }) {
-  /**
+  const isAdmin = currentUser != null && currentUser.isAdmin;
-   * Checks if given component should be rendered if current user has given permission enabled. If that's not the case,
+  return isAdmin ? children : <Navigate to="/403" replace />;
-   * user is redirected to '/403'.
-   *
-   * @param permission
-   * @param component
-   * @param path
-   * @returns {*}
-   */
-  const checkIfAdmin = (component, path) => {
-    return currentUser != null && currentUser.isAdmin ? component : <Redirect from={path} to="/403" />;
-  };
-
-  return <Route name={name} path={path} render={() => checkIfAdmin(component, path)} />;
 }

ui/src/services/time/timeService.js

@@ -8,4 +8,4 @@ export function format(ts) {
     second: 'numeric',
   }).format(ts);
 }
-export const roundToNext5Minute = (ts) => Math.ceil(ts / (1000 * 60 * 5)) * (1000 * 60 * 5);
+export const roundToHour = (ts) => Math.ceil(ts / (1000 * 60 * 60)) * (1000 * 60 * 60);

ui/src/views/jobs/Jobs.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import JobTable from '../../components/table/JobTable';
 import { useSelector, useDispatch } from 'react-redux';
 import { xhrDelete, xhrPut } from '../../services/xhr';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import ProcessingTimes from './ProcessingTimes';
 import { Button, Toast } from '@douyinfe/semi-ui';
 import { IconPlusCircle } from '@douyinfe/semi-icons';
@@ -12,7 +12,7 @@ import './Jobs.less';
 export default function Jobs() {
   const jobs = useSelector((state) => state.jobs.jobs);
   const processingTimes = useSelector((state) => state.jobs.processingTimes);
-  const history = useHistory();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
 
   const onJobRemoval = async (jobId) => {
@@ -43,7 +43,7 @@ export default function Jobs() {
           type="primary"
           icon={<IconPlusCircle />}
           className="jobs__newButton"
-          onClick={() => history.push('/jobs/new')}
+          onClick={() => navigate('/jobs/new')}
         >
           New Job
         </Button>
@@ -53,8 +53,8 @@ export default function Jobs() {
         jobs={jobs || []}
         onJobRemoval={onJobRemoval}
         onJobStatusChanged={onJobStatusChanged}
-        onJobInsight={(jobId) => history.push(`/jobs/insights/${jobId}`)}
+        onJobInsight={(jobId) => navigate(`/jobs/insights/${jobId}`)}
-        onJobEdit={(jobId) => history.push(`/jobs/edit/${jobId}`)}
+        onJobEdit={(jobId) => navigate(`/jobs/edit/${jobId}`)}
       />
     </div>
   );

ui/src/views/jobs/insights/JobInsight.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { roundToNext5Minute } from '../../../services/time/timeService';
+import { roundToHour } from '../../../services/time/timeService';
 import Headline from '../../../components/headline/Headline';
 import { useDispatch, useSelector } from 'react-redux';
-import { useParams } from 'react-router';
+import { useParams } from 'react-router-dom';
 import Linechart from './Linechart';
 
 const JobInsight = function JobInsight() {
@@ -20,27 +20,47 @@ const JobInsight = function JobInsight() {
 
   const getData = () => {
     const data = insights[params.jobId] || {};
+    const providers = Object.keys(data);
 
-    const result = [];
+    const countsByProvider = {};
-    Object.keys(data).forEach((key) => {
+    const allTimes = new Set();
-      const series = {
-        name: key[0].toUpperCase() + key.substring(1),
-        data: [],
-      };
 
+    const cap = (s) => (s ? s[0].toUpperCase() + s.slice(1) : 'Unknown');
+
+    providers.forEach((key) => {
+      const providerName = cap(key);
       const tmpTimeObj = {};
 
       Object.values(data[key] || {}).forEach((listingTs) => {
-        const time = roundToNext5Minute(listingTs);
+        const time = roundToHour(listingTs);
         tmpTimeObj[time] = tmpTimeObj[time] == null ? 1 : tmpTimeObj[time] + 1;
+        allTimes.add(time);
       });
 
-      Object.keys(tmpTimeObj)
+      countsByProvider[providerName] = tmpTimeObj;
-        .sort()
+    });
-        .forEach((timeKey) => {
+
-          series.data.push([parseInt(timeKey), tmpTimeObj[timeKey]]);
+    const sortedTimes = Array.from(allTimes).sort((a, b) => a - b);
+
+    const result = [];
+    providers.forEach((key) => {
+      const providerName = cap(key);
+      const bucket = countsByProvider[providerName] || {};
+
+      sortedTimes.forEach((t) => {
+        result.push({
+          listings: new Intl.DateTimeFormat('en-US', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+          }).format(new Date(parseInt(t))),
+          listingsNumber: bucket[t] || 0, // y value
+          provider: providerName, // series key
         });
-      result.push(series);
+      });
     });
 
     return result;

ui/src/views/jobs/insights/Linechart.jsx

@@ -1,337 +1,49 @@
 import React from 'react';
 
 import Placeholder from '../../../components/placeholder/Placeholder';
-import HighchartsReact from 'highcharts-react-official';
+import { VChart } from '@visactor/react-vchart';
-import Highcharts from 'highcharts/highcharts.src.js';
 
 import './Linechart.less';
 
-Highcharts.theme = {
+const commonSpec = {
-  colors: [
+  type: 'line',
-    '#2b908f',
+  xField: 'listings',
-    '#90ee7e',
+  yField: 'listingsNumber',
-    '#f45b5b',
+  seriesField: 'provider',
-    '#7798BF',
+  legends: { visible: true },
-    '#aaeeee',
+  line: {
-    '#ff0066',
+    style: {
-    '#eeaaee',
+      lineWidth: 2,
-    '#55BF3B',
+    },
-    '#DF5353',
+  },
-    '#7798BF',
+  point: {
-    '#aaeeee',
+    visible: false,
+  },
+  axes: [
+    {
+      orient: 'bottom',
+      field: 'listings',
+      zero: false,
+    },
   ],
-  chart: {
-    backgroundColor: {
-      linearGradient: {
-        x1: 0,
-        y1: 0,
-        x2: 1,
-        y2: 1,
-      },
-      stops: [
-        [0, '#2a2a2b'],
-        [1, '#3e3e40'],
-      ],
-    },
-    style: {
-      fontFamily: "'Unica One', sans-serif",
-    },
-    plotBorderColor: '#606063',
-  },
-  title: {
-    style: {
-      color: '#E0E0E3',
-      textTransform: 'uppercase',
-      fontSize: '20px',
-    },
-  },
-  subtitle: {
-    style: {
-      color: '#E0E0E3',
-      textTransform: 'uppercase',
-    },
-  },
-  xAxis: {
-    gridLineColor: '#707073',
-    labels: {
-      style: {
-        color: '#E0E0E3',
-      },
-    },
-    lineColor: '#707073',
-    minorGridLineColor: '#505053',
-    tickColor: '#707073',
-    title: {
-      style: {
-        color: '#A0A0A3',
-      },
-    },
-  },
-  yAxis: {
-    gridLineColor: '#707073',
-    labels: {
-      style: {
-        color: '#E0E0E3',
-      },
-    },
-    lineColor: '#707073',
-    minorGridLineColor: '#505053',
-    tickColor: '#707073',
-    tickWidth: 1,
-    title: {
-      style: {
-        color: '#A0A0A3',
-      },
-    },
-  },
-  tooltip: {
-    backgroundColor: 'rgba(0, 0, 0, 0.85)',
-    style: {
-      color: '#F0F0F0',
-    },
-  },
-  plotOptions: {
-    series: {
-      dataLabels: {
-        color: '#F0F0F3',
-        style: {
-          fontSize: '13px',
-        },
-      },
-      marker: {
-        lineColor: '#333',
-      },
-    },
-    boxplot: {
-      fillColor: '#505053',
-    },
-    candlestick: {
-      lineColor: 'white',
-    },
-    errorbar: {
-      color: 'white',
-    },
-  },
-  legend: {
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    itemStyle: {
-      color: '#E0E0E3',
-    },
-    itemHoverStyle: {
-      color: '#FFF',
-    },
-    itemHiddenStyle: {
-      color: '#606063',
-    },
-    title: {
-      style: {
-        color: '#C0C0C0',
-      },
-    },
-  },
-  credits: {
-    style: {
-      color: '#666',
-    },
-  },
-  labels: {
-    style: {
-      color: '#707073',
-    },
-  },
-
-  drilldown: {
-    activeAxisLabelStyle: {
-      color: '#F0F0F3',
-    },
-    activeDataLabelStyle: {
-      color: '#F0F0F3',
-    },
-  },
-
-  navigation: {
-    buttonOptions: {
-      symbolStroke: '#DDDDDD',
-      theme: {
-        fill: '#505053',
-      },
-    },
-  },
-
-  // scroll charts
-  rangeSelector: {
-    buttonTheme: {
-      fill: '#505053',
-      stroke: '#000000',
-      style: {
-        color: '#CCC',
-      },
-      states: {
-        hover: {
-          fill: '#707073',
-          stroke: '#000000',
-          style: {
-            color: 'white',
-          },
-        },
-        select: {
-          fill: '#000003',
-          stroke: '#000000',
-          style: {
-            color: 'white',
-          },
-        },
-      },
-    },
-    inputBoxBorderColor: '#505053',
-    inputStyle: {
-      backgroundColor: '#333',
-      color: 'silver',
-    },
-    labelStyle: {
-      color: 'silver',
-    },
-  },
-
-  navigator: {
-    handles: {
-      backgroundColor: '#666',
-      borderColor: '#AAA',
-    },
-    outlineColor: '#CCC',
-    maskFill: 'rgba(255,255,255,0.1)',
-    series: {
-      color: '#7798BF',
-      lineColor: '#A6C7ED',
-    },
-    xAxis: {
-      gridLineColor: '#505053',
-    },
-  },
-
-  scrollbar: {
-    barBackgroundColor: '#808083',
-    barBorderColor: '#808083',
-    buttonArrowColor: '#CCC',
-    buttonBackgroundColor: '#606063',
-    buttonBorderColor: '#606063',
-    rifleColor: '#FFF',
-    trackBackgroundColor: '#404043',
-    trackBorderColor: '#404043',
-  },
 };
 
-// Apply the theme
+const Linechart = function Linechart({ title, series, isLoading = false }) {
-Highcharts.setOptions(Highcharts.theme);
-
-const defaultOptions = {
-  title: {
-    text: null,
-  },
-  legend: {
-    enabled: true,
-  },
-  xAxis: {
-    //most of the time (if not everytime), the x axis is time
-    type: 'datetime',
-    crosshair: {
-      snap: false,
-    },
-  },
-  yAxis: {
-    title: {
-      text: null,
-    },
-    //do not show float numbers
-    allowDecimals: false,
-  },
-  chart: {
-    type: 'line',
-    zoomType: 'x',
-    plotBackgroundColor: null,
-    plotBorderWidth: null,
-  },
-  exporting: {
-    enabled: false,
-  },
-  tooltip: {
-    shared: true,
-    formatter: null,
-  },
-  plotOptions: {
-    line: {
-      animation: false,
-      marker: {
-        enabled: false,
-      },
-    },
-    series: {
-      lineWidth: 1.5,
-      connectNulls: true,
-      marker: {
-        enabled: false,
-      },
-    },
-  },
-  series: [],
-};
-
-/**
- * Usage of this chart:
- * title: optional (show a title, if null, no title is shown)
- * zoom: optional (if true, zooming in x axis is possible)
- * legend: optional (show / hide the legend)
- * series: mandatory (an array of data to be shown)
- *
- * <Linechart
- *    title="something"
- *    legend={true}
- *    timeframe={week/month/all} --> If this is not set, we assume the timeframe is 'all'
- *    //everything that is "subscribed" to this topic will receive this update
- *    highlightTopic="someTopic"
- *    height={"500px"}
- *    zoom={true}
- *    series={[
- *      {
- *        name: 'something',
- *        data: [x,y],
- *        dashStyle: (OPTIONAL) | solid / 'shortdot'
- *      }
- *    ]}
- * />
- */
-const Linechart = function Linechart({ title, series, height, isLoading = false }) {
-  const options = () => {
-    return {
-      ...defaultOptions,
-      title: {
-        text: title,
-      },
-      time: {
-        useUTC: false,
-      },
-      legend: {
-        enabled: true,
-      },
-      series: series.map((series) => {
-        return {
-          ...series,
-        };
-      }),
-      chart: {
-        type: 'line',
-        zoomType: 'x',
-        height: height || '400px',
-      },
-    };
-  };
-
   return (
     <Placeholder ready={!isLoading} rows={6}>
       {series == null || series.length === 0 ? (
         <div className="linechart__no__data">No Data for selected timeframe :-/</div>
       ) : (
-        <HighchartsReact highcharts={Highcharts} options={options()} />
+        <VChart
+          spec={{
+            ...commonSpec,
+            title: {
+              visible: true,
+              text: title,
+            },
+            data: { values: series },
+          }}
+        />
       )}
     </Placeholder>
   );

ui/src/views/jobs/mutation/JobMutation.jsx

@@ -7,8 +7,7 @@ import ProviderMutator from './components/provider/ProviderMutator';
 import Headline from '../../../components/headline/Headline';
 import { useDispatch, useSelector } from 'react-redux';
 import { xhrPost } from '../../../services/xhr';
-import { useHistory } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
-import { useParams } from 'react-router';
 import { Divider, Input, Switch, Button, TagInput, Toast } from '@douyinfe/semi-ui';
 import './JobMutation.less';
 import { SegmentPart } from '../../../components/segment/SegmentPart';
@@ -34,7 +33,7 @@ export default function JobMutator() {
   const [blacklist, setBlacklist] = useState(defaultBlacklist);
   const [notificationAdapterData, setNotificationAdapterData] = useState(defaultNotificationAdapter);
   const [enabled, setEnabled] = useState(defaultEnabled);
-  const history = useHistory();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
 
   const isSavingEnabled = () => {
@@ -53,7 +52,7 @@ export default function JobMutator() {
       });
       await dispatch.jobs.getJobs();
       Toast.success('Job successfully saved...');
-      history.push('/jobs');
+      navigate('/jobs');
     } catch (Exception) {
       console.error(Exception.json.message);
       Toast.error(Exception.json != null ? Exception.json.message : Exception);
@@ -177,7 +176,7 @@ export default function JobMutator() {
           <Switch className="jobMutation__spaceTop" onChange={(checked) => setEnabled(checked)} checked={enabled} />
         </SegmentPart>
         <Divider margin="1rem" />
-        <Button type="danger" style={{ marginRight: '1rem' }} onClick={() => history.push('/jobs')}>
+        <Button type="danger" style={{ marginRight: '1rem' }} onClick={() => navigate('/jobs')}>
           Cancel
         </Button>
         <Button type="primary" icon={<IconPlusCircle />} disabled={!isSavingEnabled()} onClick={mutateJob}>

ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx

@@ -30,7 +30,8 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false,
       if (selectedProvider.baseUrl.indexOf(url.origin) === -1) {
         return 'The url you have copied is not valid.';
       }
-    } catch (Exception) {
+      /* eslint-disable no-unused-vars */
+    } catch (ignored) {
       return 'The url you have copied is not valid.';
     }
     return null;

ui/src/views/login/Login.jsx

@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import cityBackground from '../../assets/city_background.jpg';
 import Logo from '../../components/logo/Logo';
 import { xhrPost } from '../../services/xhr';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { Input, Button, Banner, Toast } from '@douyinfe/semi-ui';
 
@@ -16,7 +16,7 @@ export default function Login() {
   const [password, setPassword] = React.useState('');
   const [error, setError] = React.useState(null);
   const demoMode = useSelector((state) => state.demoMode.demoMode || false);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   useEffect(() => {
     async function init() {
@@ -38,7 +38,8 @@ export default function Login() {
         username: username.trim(),
         password,
       });
-    } catch (Exception) {
+      /* eslint-disable no-unused-vars */
+    } catch (ignored) {
       Toast.error('Login unsuccessful…');
       return;
     }
@@ -46,7 +47,7 @@ export default function Login() {
     Toast.success('Login successful!');
 
     await dispatch.user.getCurrentUser();
-    history.push('/jobs');
+    navigate('/jobs');
   };
 
   return (

ui/src/views/user/Users.jsx

@@ -7,7 +7,7 @@ import { IconPlus } from '@douyinfe/semi-icons';
 import { Button } from '@douyinfe/semi-ui';
 import UserRemovalModal from './UserRemovalModal';
 import { xhrDelete } from '../../services/xhr';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 
 import './Users.less';
 
@@ -16,7 +16,7 @@ const Users = function Users() {
   const [loading, setLoading] = React.useState(true);
   const users = useSelector((state) => state.user.users);
   const [userIdToBeRemoved, setUserIdToBeRemoved] = React.useState(null);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   React.useEffect(() => {
     async function init() {
@@ -50,7 +50,7 @@ const Users = function Users() {
             type="primary"
             className="users__newButton"
             icon={<IconPlus />}
-            onClick={() => history.push('/users/new')}
+            onClick={() => navigate('/users/new')}
           >
             Create new User
           </Button>
@@ -58,7 +58,7 @@ const Users = function Users() {
           <UserTable
             user={users}
             onUserEdit={(userId) => {
-              history.push(`/users/edit/${userId}`);
+              navigate(`/users/edit/${userId}`);
             }}
             onUserRemoval={(userId) => {
               setUserIdToBeRemoved(userId);

ui/src/views/user/mutation/UserMutator.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { xhrGet, xhrPost } from '../../../services/xhr';
-import { useHistory, useParams } from 'react-router';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { Divider, Input, Switch, Button, Toast } from '@douyinfe/semi-ui';
 import './UserMutator.less';
@@ -15,7 +15,7 @@ const UserMutator = function UserMutator() {
   const [password2, setPassword2] = React.useState('');
   const [isAdmin, setIsAdmin] = React.useState(false);
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
 
   React.useEffect(() => {
@@ -50,7 +50,7 @@ const UserMutator = function UserMutator() {
       });
       await dispatch.user.getUsers();
       Toast.success('User successfully saved...');
-      history.push('/users');
+      navigate('/users');
     } catch (error) {
       console.error(error);
       Toast.error(error.json.message);
@@ -98,7 +98,7 @@ const UserMutator = function UserMutator() {
         <Switch checked={isAdmin} onChange={(checked) => setIsAdmin(checked)} />
       </SegmentPart>
       <Divider margin="1rem" />
-      <Button type="danger" style={{ marginRight: '1rem' }} onClick={() => history.push('/users')}>
+      <Button type="danger" style={{ marginRight: '1rem' }} onClick={() => navigate('/users')}>
         Cancel
       </Button>
       <Button type="primary" icon={<IconPlusCircle />} onClick={saveUser}>