Wikimedia-Austria · reiterbene · Jun 26, 2024 · Jun 24, 2024 · Jun 24, 2024 · Jun 24, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "i18n-ally.localesPaths": [
     "src/translations/locales"
@@ -13,4 +13,4 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.tabSize": 2,
   },
-}
+}
diff --git a/README.md b/README.md
@@ -35,10 +35,11 @@ To run on another server:
 ## Overview of the WikiDaheim App
 
 The WikiDaheim App
+
 - consists of the backend retrieving data from various sources like lists (e.g. Liste der denkmalgeschützten Objekte in ...), wikidata (items assigned to Austria via property P17=Q40), configured wanted images (Bilderwünsche), intersection of Commons categories for general features of municipalities like schools or sport venues, etc. The backend is maintained by [pixelhaufen](https://github.com/pixelhaufen)
 - and consists of the frontend (described here) and maintained by [reiterbene](https://github.com/reiterbene)
 - and is based on wikipedia data maintained by the various Austrian communities in the wikiversum (see [WP:WikiDaheim](https://de.wikipedia.org/wiki/Wikipedia:WikiDaheim) and associated talk page).
-  
+
 ## Dependencies and Structure of the frontend
 
 The frontend is mainly built with the help of the following libraries:
@@ -103,11 +104,27 @@ The main state is located in [`src/redux/reducers/index.js`](src/redux/reducers/
 Changes to the state can be made by dispatching actions. The actions are located in [`src/redux/actions/`](src/redux/actions/). The reducers are located in [`src/redux/reducers/`](src/redux/reducers/).
 
 ### GPX Export
+
 The GPX Exporter ist implemented as React Hook located in [`src/hooks/useDownloadGpx.js`](src/hooks/useDownloadGpx.js). It provides a `useDownloadGpx` function which converts the location list (provided to the hook as argument) to a gpx file and triggers a download. The locations are converted using the [`gpx-builder`](https://github.com/fabulator/gpx-builder) library.
 
 ### Editing Static Pages
+
 Static pages are located in [`src/views/`](src/views/). The create a new page, simply create a HTML file with the slug name of the static page (slug = the permalink of the page), suffixed with the language of the page (e.g. pagename_en.html). Afterwards register the page by its slug in [views.json](src/views/views.json). When the option "in_menu" is enabled, the page will show up in the hamburger menu.
 
+## Outdated Dependencies
+
+- [react-mapbox-gl](https://www.npmjs.com/package/react-mapbox-gl)
+  is not updatedated anymore and should be replaced by [react-map-gl](https://www.npmjs.com/package/react-map-gl).
+- [mapbox-gl](https://www.npmjs.com/package/mapbox-gl)
+  is not updated as react-mapbox-gl is not compatible with the latest major version of mapbox-gl.
+- [react-autocomplete](https://www.npmjs.com/package/react-autocomplete)
+  is not updated anymore and should be replaced by a maintained alternative.
+- [react-dropdown](https://www.npmjs.com/package/react-dropdown)
+  is not updated anymore and should be replaced by a maintained alternative.
+- [react-spinner-kit](https://www.npmjs.com/package/react-spinner-kit)
+  is not updated anymore and should be replaced by a maintained alternative. Alternatively, the spinner can be implemented with CSS.
+- [react-truncate](https://www.npmjs.com/package/react-truncate)
+  is not updated anymore and should be replaced by a maintained alternative.
 
 ## Future Changes and Additions
 

diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -3,14 +3,14 @@
 
 <head>
   <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="icon" href="favicon.ico" />
   <meta name="viewport"
     content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
   <meta name="description"
     content="WikiDaheim ist ein Projekt von Freiwilligen der Wikimedia-Projekte wie Wikipedia, das sich mit dem Sammeln von Informationen über Gemeinden in ganz Österreich beschäftigt.">
   <meta name="theme-color" content="#000000" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="apple-touch-icon" href="/logo192.png" />
+  <link rel="manifest" href="/manifest.json" />
   <title>WikiDaheim: deine Heimat in der Wikipedia</title>
 </head>
 
@@ -21,6 +21,7 @@
     WikiDaheim ist eine Webapplikation und benötigt daher JavaScript. Bitte aktiviere JavaScript für diese Webseite.
   </noscript>
   <div id="root"></div>
+  <script type="module" src="/src/index.jsx"></script>
 </body>
 
 </html>
diff --git a/package.json b/package.json
@@ -2,45 +2,44 @@
   "name": "wikidaheim",
   "version": "3.0.0",
   "private": true,
-  "license": "(cc) by-sa 2017-2020 Benedikt Reiter",
+  "license": "(cc) by-sa 2017-2024 Benedikt Reiter",
   "description": "WikiDaheim Client for Wikimedia Austria",
   "author": "Benedikt Reiter",
   "dependencies": {
-    "@formatjs/intl-pluralrules": "^5.2.4",
-    "@formatjs/intl-relativetimeformat": "^11.2.4",
+    "@formatjs/intl-pluralrules": "^5.2.14",
+    "@formatjs/intl-relativetimeformat": "^11.2.14",
     "dialog-polyfill": "^0.5.6",
     "geolib": "^3.3.4",
-    "gpx-builder": "^5.2.1",
+    "gpx-builder": "^5.3",
     "history": "^5.3.0",
-    "immutable": "^4.3.0",
+    "immutable": "^4.3.6",
     "mapbox-gl": "^2.15.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-autocomplete": "^1.8.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-dropdown": "^1.11.0",
-    "react-intl": "^6.4.4",
+    "react-intl": "^6.6.8",
     "react-mapbox-gl": "^5.1.1",
-    "react-redux": "^8.1.0",
-    "react-router-dom": "^6.12.1",
-    "react-scripts": "5.0.1",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.23.1",
     "react-spinners-kit": "^1.9.1",
     "react-truncate": "^2.4.0",
     "react-virtualized": "^9.22.5",
-    "redux": "^4.2.1",
-    "redux-devtools-extension": "^2.13.8",
-    "redux-thunk": "^2.4.2",
-    "sass": "^1.63.4",
+    "redux": "^5.0.1",
+    "redux-thunk": "^3.1.0",
+    "sass": "^1.77.6",
     "wikimedia-commons-file-path": "^2.1.1"
   },
   "engines": {
     "node": ">=18.0.0 <19.0.0"
   },
   "scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
+    "start": "vite",
+    "build": "vite build",
     "analyze": "npx source-map-explorer 'build/static/js/*.js'",
     "manage:translations": "formatjs extract 'src/components/**/*.js*' --out-file src/translations/extractedMessages.json --format simple",
-    "check:boundaries": "node ./boundary-checker.js"
+    "check:boundaries": "node ./boundary-checker.js",
+    "postinstall": "patch-package"
   },
   "browserslist": {
     "production": [
@@ -58,11 +57,15 @@
     ]
   },
   "devDependencies": {
-    "@formatjs/cli": "^6.1.3",
-    "babel-plugin-formatjs": "^10.5.3",
+    "@formatjs/cli": "^6.2.12",
+    "@vitejs/plugin-react": "^4.3.1",
+    "babel-plugin-formatjs": "^10.5.16",
     "customize-cra": "^1.0.0",
-    "html-loader": "^4.2.0",
-    "react-app-rewired": "^2.1.6",
+    "html-loader": "^5.0.0",
+    "patch-package": "^8.0.0",
+    "postinstall-postinstall": "^2.1.0",
+    "vite": "^5.3.1",
     "worker-loader": "^3.0.8"
-  }
+  },
+  "packageManager": "[email protected]+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }
diff --git a/patches/react-mapbox-gl+5.1.1.patch b/patches/react-mapbox-gl+5.1.1.patch
@@ -0,0 +1,13 @@
+diff --git a/node_modules/react-mapbox-gl/lib-esm/map.js b/node_modules/react-mapbox-gl/lib-esm/map.js
+index a475a36..371c236 100644
+--- a/node_modules/react-mapbox-gl/lib-esm/map.js
++++ b/node_modules/react-mapbox-gl/lib-esm/map.js
+@@ -56,7 +56,7 @@ var ReactMapboxFactory = function (_a) {
+             ReactMapboxGl.prototype.componentDidMount = function () {
+                 var _this = this;
+                 var _a = this.props, style = _a.style, onStyleLoad = _a.onStyleLoad, center = _a.center, pitch = _a.pitch, zoom = _a.zoom, fitBounds = _a.fitBounds, fitBoundsOptions = _a.fitBoundsOptions, bearing = _a.bearing, maxBounds = _a.maxBounds;
+-                MapboxGl.accessToken = accessToken;
++                MapboxGl.config.ACCESS_TOKEN = accessToken;
+                 if (apiUrl) {
+                     MapboxGl.config.API_URL = apiUrl;
+                 }
diff --git a/public/img/icon_bilderwuensche.svg b/public/img/icon_bilderwuensche.svg
diff --git a/public/img/icon_commons.svg b/public/img/icon_commons.svg
diff --git a/public/img/icon_denkmalliste.svg b/public/img/icon_denkmalliste.svg
diff --git a/public/img/icon_friedhof.svg b/public/img/icon_friedhof.svg
diff --git a/public/img/icon_kellergasse.svg b/public/img/icon_kellergasse.svg
diff --git a/public/img/icon_naturdenkmaeler.svg b/public/img/icon_naturdenkmaeler.svg
diff --git a/public/img/icon_public_art.svg b/public/img/icon_public_art.svg
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,37 @@
+/* REACT */
+import React from "react";
+
+/* REDUX */
+import { Provider } from "react-redux";
+import configureStore from "/src/redux/store";
+
+/* ROUTER */
+import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
+import { history } from "/src/config/routes";
+
+/* APP COMPONENTS */
+import ReduxIntlProvider from "/src/components/Global/ReduxIntlProvider";
+import Root from "/src/components/Root";
+import ScrollToTop from "/src/components/Global/ScrollToTop";
+
+// Load SCSS
+import "./scss/app.scss";
+
+// Init Redux-Store
+const store = configureStore();
+
+function App() {
+  return (
+    <Provider store={store}>
+      <ReduxIntlProvider>
+        <HistoryRouter history={history}>
+          <ScrollToTop>
+            <Root />
+          </ScrollToTop>
+        </HistoryRouter>
+      </ReduxIntlProvider>
+    </Provider>
+  );
+}
+
+export default App;
diff --git a/src/api/mapbox.js b/src/api/mapbox.js
@@ -1,41 +1,49 @@
-import { COUNTRY_CODE, MAPBOX_API_KEY } from 'config';
-import languages from 'translations/languages.json';
+import { COUNTRY_CODE, MAPBOX_API_KEY } from "/src/config";
+import languages from "translations/languages.json";
 
 const search = (query, lang, region) => {
   if (query.length === 0) {
     return new Promise((res) => res([]));
   }
 
-  const languageCode = languages.filter(l => l.locale === lang).map(l => l.mapbox_language_code);
-
-  return fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${ query }.json?access_token=${ MAPBOX_API_KEY }&country=${ COUNTRY_CODE }&language=${ languageCode }&types=place`, {
-    method: 'get',
-  }).then((res) => {
-    if (!res.ok) throw Error(res.statusText);
-    return res.json();
-  }).then(json => {
-    const features = json.features;
-
-    // if we have to filter by a specific region we have to do it manually here
-    if( region ) {
-      return features.filter(feature => {
-        if(
-          feature.context && feature.context.length > 1 &&
-          region === feature.context[0].short_code
-        ) {
-          return true;
-        }
-
-        return false;
-      });
-    }
+  const languageCode = languages
+    .filter((l) => l.locale === lang)
+    .map((l) => l.mapbox_language_code);
 
-    return features;
-  });
+  return fetch(
+    `https://api.mapbox.com/geocoding/v5/mapbox.places/${query}.json?access_token=${MAPBOX_API_KEY}&country=${COUNTRY_CODE}&language=${languageCode}&types=place`,
+    {
+      method: "get",
+    }
+  )
+    .then((res) => {
+      if (!res.ok) throw Error(res.statusText);
+      return res.json();
+    })
+    .then((json) => {
+      const features = json.features;
+
+      // if we have to filter by a specific region we have to do it manually here
+      if (region) {
+        return features.filter((feature) => {
+          if (
+            feature.context &&
+            feature.context.length > 1 &&
+            region === feature.context[0].short_code
+          ) {
+            return true;
+          }
+
+          return false;
+        });
+      }
+
+      return features;
+    });
 };
 
 const mapBoxAPI = {
-  search
+  search,
 };
 
 export default mapBoxAPI;
diff --git a/src/api/wikidaheim.js b/src/api/wikidaheim.js
@@ -1,4 +1,6 @@
-import { WIKIDAHEIM_ENDPOINT /*, WIKIDAHEIM_FEEDBACK_ENDPOINT*/ } from "config";
+import {
+  WIKIDAHEIM_ENDPOINT /*, WIKIDAHEIM_FEEDBACK_ENDPOINT*/,
+} from "/src/config";
 import boundaries from "../config/boundaries_mapped.json";
 
 const listCategories = () => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ @@
     # production
     /build
+    /dist
     # misc
     .DS_Store
@@ Expand Down @@