Chore/update project dependencies

.github/workflows/quality-gate.yml

@@ -4,6 +4,7 @@ on:
     pull_request:
         branches:
             - master
+            - dev
 jobs:
     quality-gate:
         name: Check code
@@ -16,10 +17,10 @@ jobs:
               with:
                   node-version: "22"
             - name: Install dependencies
-              run: npm ci --fund=false --audit=false --legacy-peer-deps
+              run: npm ci --fund=false --audit=false
             - name: Unit tests
               run: npm run test -- --watch=false
-            - name: Code linter
-              run: npm run lint
+            # - name: Code linter
+            #   run: npm run lint
             - name: Check code formatting
               run: npm run format:check

eslint.config.js

@@ -0,0 +1,28 @@
+import { defineConfig } from "eslint/config";
+import js from "@eslint/js";
+import react from "eslint-plugin-react";
+
+export default defineConfig([
+    {
+        files: ["**/*.js"],
+        plugins: {
+            js,
+            react,
+        },
+        extends: ["js/recommended"],
+        rules: {
+            "no-unused-vars": "warn",
+            "no-undef": "warn",
+            "react/jsx-uses-react": "error",
+            "react/jsx-uses-vars": "error",
+        },
+        languageOptions: {
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true,
+                    modules: true,
+                },
+            },
+        },
+    },
+]);

package.json

@@ -3,9 +3,10 @@
     "version": "1.2.0",
     "private": true,
     "license": "GPL-3.0-or-later",
+    "type": "module",
     "engines": {
-        "node": "^18.*.*",
-        "npm": "^8.*.*"
+        "node": "^24.*.*",
+        "npm": "^11.*.*"
     },
     "repository": {
         "type": "git",
@@ -16,32 +17,35 @@
         "email": "info@k-monitor.hu"
     },
     "dependencies": {
-        "@tolgee/i18next": "^5.16.3",
-        "i18next": "^22.0.6",
-        "leaflet": "^1.9.3",
+        "@tolgee/i18next": "^6.2.6",
+        "i18next": "^25.2.1",
+        "leaflet": "^1.9.4",
         "leaflet.markercluster": "^1.5.3",
-        "mkdirp": "^2.1.5",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "mkdirp": "^3.0.1",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
         "react-gtm-module": "^2.0.11",
-        "react-helmet": "^6.1.0",
-        "react-i18next": "^12.1.1",
-        "react-icons": "^5.2.1",
-        "react-leaflet": "^4.2.0",
-        "react-leaflet-cluster": "^2.1.0",
-        "react-markdown": "^8.0.4",
-        "react-router-dom": "^5.1.0",
-        "react-scripts": "5.0.1",
+        "react-helmet-async": "^2.0.5",
+        "react-i18next": "^15.5.3",
+        "react-icons": "^5.5.0",
+        "react-leaflet": "^5.0.0",
+        "react-leaflet-markercluster": "^5.0.0-rc.0",
+        "react-markdown": "^10.1.0",
+        "react-router": "^7.6.2",
         "react-transition-group": "^4.4.5",
-        "rehype-raw": "^6.1.1"
+        "rehype-raw": "^7.0.0"
     },
     "devDependencies": {
-        "@testing-library/react": "^14.0.0",
-        "@vitejs/plugin-react": "^3.1.0",
+        "@eslint/js": "^9.30.0",
+        "@testing-library/react": "^16.3.0",
+        "@vitejs/plugin-react": "^4.5.2",
+        "eslint": "^9.30.0",
+        "eslint-plugin-react": "^7.37.5",
+        "jsdom": "^26.1.0",
         "prettier": "^2.8.4",
-        "vite": "^4.1.0",
-        "vite-plugin-markdown": "^2.1.0",
-        "vitest": "^0.28.5"
+        "vite": "^6.3.5",
+        "vite-plugin-markdown": "^2.2.0",
+        "vitest": "^3.2.3"
     },
     "scripts": {
         "dev": "vite",
@@ -67,5 +71,10 @@
             "last 1 firefox version",
             "last 1 safari version"
         ]
+    },
+    "overrides": {
+        "react-helmet-async": {
+            "react": "^19.1.0"
+        }
     }
 }

scripts/download-hotels-as-json.js

@@ -1,7 +1,7 @@
 import loadHotelDataFromCsv from "../src/utils/load-hotel-data-from-csv.js";
-const fs = require("fs");
-const mkdirp = require("mkdirp");
-const path = require("path");
+import fs from "fs";
+import { mkdirp } from "mkdirp";
+import path from "path";
 
 function downloadHotelsAsJSON() {
     loadHotelDataFromCsv()

src/App.jsx

@@ -1,6 +1,6 @@
-import { useEffect, useState, useReducer, lazy, Suspense } from "react";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
-import { Helmet } from "react-helmet";
+import { useEffect, useState, useReducer } from "react";
+import { BrowserRouter, Route, Routes } from "react-router";
+import { Helmet, HelmetProvider } from "react-helmet-async";
 
 import ErrorBoundary from "./components/ErrorBoundary";
 import AnalyticsWrapper from "./components/analytics/AnalyticsWrapper";
@@ -11,63 +11,14 @@ import { useTranslation } from "react-i18next";
 import { config } from "./config";
 
 import loadHotelDataFromCsv from "./utils/load-hotel-data-from-csv";
-import LoadingSpinner from "./components/ui/LoadingSpinner";
 import LegacyHashRouteRedirect from "./components/routing/LegacyHashRouteRedirect";
 
-const HotelView = lazy(() => import("./views/HotelView"));
-const MapView = lazy(() => import("./views/MapView"));
-const ContentPageView = lazy(() => import("./views/ContentPageView"));
-const PersonView = lazy(() => import("./views/PersonView"));
-const ErrorView = lazy(() => import("./views/ErrorView"));
-const PressReleaseView = lazy(() => import("./views/PressReleasesView"));
-
-function HotelPage(props) {
-    return (
-        <Suspense fallback={<LoadingSpinner />}>
-            <HotelView {...props} />
-        </Suspense>
-    );
-}
-
-function MapPage(props) {
-    return (
-        <Suspense fallback={<LoadingSpinner />}>
-            <MapView {...props} />
-        </Suspense>
-    );
-}
-
-function ContentPage(props) {
-    return (
-        <Suspense fallback={<LoadingSpinner />}>
-            <ContentPageView {...props} />
-        </Suspense>
-    );
-}
-
-function PersonPage(props) {
-    return (
-        <Suspense fallback={<LoadingSpinner />}>
-            <PersonView {...props} />
-        </Suspense>
-    );
-}
-
-function ErrorPage(props) {
-    return (
-        <Suspense fallback={<LoadingSpinner />}>
-            <ErrorView {...props} />
-        </Suspense>
-    );
-}
-
-function PressReleasePage(props) {
-    return (
-        <Suspense fallback={<LoadingSpinner />}>
-            <PressReleaseView {...props} />
-        </Suspense>
-    );
-}
+import HotelView from "./views/HotelView";
+import MapView from "./views/MapView";
+import ContentPageView from "./views/ContentPageView";
+import PersonView from "./views/PersonView";
+import ErrorView from "./views/ErrorView";
+import PressReleasesView from "./views/PressReleasesView";
 
 function App() {
     const [state, dispatch] = useReducer(reducer, initialState);
@@ -114,7 +65,7 @@ function App() {
     }, []);
 
     return (
-        <>
+        <HelmetProvider>
             <ErrorBoundary>
                 <Helmet>
                     <title>
@@ -126,23 +77,23 @@ function App() {
                         <BrowserRouter>
                             <LegacyHashRouteRedirect>
                                 <AnalyticsWrapper>
-                                    <Switch>
-                                        <Route path="/" exact component={MapPage} />
-                                        <Route path="/hotel/:id" exact component={HotelPage} />
-                                        <Route path="/person/:name" exact component={PersonPage} />
-                                        <Route path="/about" exact component={ContentPage} />
-                                        <Route path="/contact" exact component={ContentPage} />
-                                        <Route path="/data-export" exact component={ContentPage} />
-                                        <Route path="/press-releases" exact component={PressReleasePage} />
-                                        <Route path="*" component={ErrorPage} />
-                                    </Switch>
+                                    <Routes>
+                                        <Route path="/" element={<MapView />} />
+                                        <Route path="/hotel/:id" element={<HotelView />} />
+                                        <Route path="/person/:name" element={<PersonView />} />
+                                        <Route path="/about" element={<ContentPageView />} />
+                                        <Route path="/contact" element={<ContentPageView />} />
+                                        <Route path="/data-export" element={<ContentPageView />} />
+                                        <Route path="/press-releases" element={<PressReleasesView />} />
+                                        <Route path="*" element={<ErrorView />} />
+                                    </Routes>
                                 </AnalyticsWrapper>
                             </LegacyHashRouteRedirect>
                         </BrowserRouter>
                     </MapContext.Provider>
                 </HotelContext.Provider>
             </ErrorBoundary>
-        </>
+        </HelmetProvider>
     );
 }
 

src/components/Hotel.jsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { MapContainer as LeafletMap, Marker, TileLayer } from "react-leaflet";
 import { useTranslation } from "react-i18next";
-import { Helmet } from "react-helmet";
+import { Helmet } from "react-helmet-async";
 import { SmartLink } from "./SmartLink";
 import Icon from "./ui/Icon";
 import HotelImage from "./HotelImage";

src/components/List.jsx

@@ -1,8 +1,9 @@
+import { useTranslation, Trans } from "react-i18next";
+import { useNavigate, useLocation } from "react-router";
+
 import { useContext, useCallback } from "react";
 import styles from "../css/list.module.css";
 import Icon from "./ui/Icon";
-import { useTranslation, Trans } from "react-i18next";
-import { useHistory, useLocation } from "react-router-dom";
 
 import closeIcon from "../assets/close-icon.svg";
 import ListItem from "./ListItem";
@@ -12,7 +13,7 @@ import { MapContext } from "../context";
 function List() {
     const { dispatch, list, map } = useContext(MapContext);
     const { t } = useTranslation();
-    const history = useHistory();
+    const navigate = useNavigate();
     const location = useLocation();
 
     const showItem = useCallback(
@@ -26,7 +27,7 @@ function List() {
             dispatch({ type: "ToggleList", showList: false });
             dispatch({ type: "TogglePopup", showPopup: true });
             if (location.pathname !== "/") {
-                history.push("/");
+                navigate("/");
             }
         },
         [map, dispatch, history, location]

src/components/MapCluster.jsx

@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import { useMap, useMapEvents } from "react-leaflet";
 
 import { createClusterCustomIcon, getMarkerList } from "../leaflet-helper.jsx";
-import MarkerClusterGroup from "react-leaflet-cluster";
+import MarkerClusterGroup from "react-leaflet-markercluster";
 
 function MapCluster({ filteredPoints, selectedPoint, onMarkerClickCallback, setMap, onClusterClick, onMove }) {
     const map = useMap();

src/components/SmartLink.jsx

@@ -1,4 +1,4 @@
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router";
 import isEmail from "../utils/is-email";
 import isUrl from "../utils/is-url";
 

src/components/analytics/AnalyticsWrapper.jsx

@@ -1,10 +1,10 @@
 import { useEffect, useContext } from "react";
-import { useHistory } from "react-router-dom";
+import { useLocation } from "react-router";
 import { MapContext } from "../../context";
 import trackPageView from "../../utils/analytics/track-page-view";
 
 function AnalyticsWrapper({ children }) {
-    const history = useHistory();
+    const location = useLocation();
     const { selectedPoint } = useContext(MapContext);
 
     useEffect(() => {
@@ -22,8 +22,7 @@ function AnalyticsWrapper({ children }) {
 
     useEffect(() => {
         trackPageView();
-        history.listen(trackPageView);
-    }, [history]);
+    }, [location]);
 
     return <>{children}</>;
 }

src/components/header/Header.jsx

@@ -1,4 +1,6 @@
 import { useContext, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation, useNavigate } from "react-router";
 
 import Search from "./Search";
 import styles from "./Header.module.css";
@@ -12,22 +14,20 @@ import { MapContext } from "../../context";
 import { config } from "../../config";
 import LangSwitch from "../LangSwitch";
 
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-
 import { SmartLink } from "../SmartLink";
 
-const Header = (props) => {
+const Header = () => {
     const { dispatch } = useContext(MapContext);
     const { i18n } = useTranslation();
+    const navigate = useNavigate();
     const { resolvedLanguage } = i18n;
     const location = useLocation();
 
     const languageChangeHandler = (e) => {
         const lang = e.target.value;
         i18n.changeLanguage(lang);
         localStorage.setItem(config.locales.paramName, lang);
-        props.history.push({
+        navigate({
             pathname: location.pathname,
             search: `?${config.locales.paramName}=${lang}`,
         });

src/components/person/Person.jsx

@@ -1,5 +1,5 @@
 import { useContext, useState, lazy, Suspense, useEffect, useCallback } from "react";
-import { Helmet } from "react-helmet";
+import { Helmet } from "react-helmet-async";
 import { SmartLink } from "../SmartLink";
 import { useTranslation } from "react-i18next";
 import Leaflet from "leaflet";