From 69830a11856d5aa76cddd4b44ea93d0ca44c094e Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 16 May 2025 07:37:25 +0200 Subject: [PATCH] =?UTF-8?q?refactor:=20API-Port-Variable=20entfernt,=20dyn?= =?UTF-8?q?amische=20Port-Nutzung=20eingef=C3=BChrt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - NEXT_PUBLIC_API_PORT_3000 entfernt - API-Aufrufe basieren jetzt auf window.location.hostname:3000 - kein Rebuild mehr bei IP-Änderung nötig - .env.local aufgeräumt - CHANGELOG.md auf 1.1.68 aktualisiert --- .env.local | 2 +- CHANGELOG.md | 13 ++++ .../mainComponent/hooks/useFetchPoiData.js | 2 +- config/appVersion.js | 2 +- docs/frontend/hooks/useFetchPoiData.md | 44 ++++++++++++ docs/frontend/redux/slices/poiTypesSlice.md | 71 +++++++++++++++++++ redux/slices/db/poiTypesSlice.js | 11 ++- 7 files changed, 141 insertions(+), 4 deletions(-) create mode 100644 docs/frontend/hooks/useFetchPoiData.md create mode 100644 docs/frontend/redux/slices/poiTypesSlice.md diff --git a/.env.local b/.env.local index 36eb7fce8..bb753e837 100644 --- a/.env.local +++ b/.env.local @@ -15,4 +15,4 @@ NEXT_PUBLIC_DEBUG_LOG=true # für Polylines/kabelstecken -> in Konextmenü "Station öffnen" " NEXT_PUBLIC_BASE_URL=http://10.10.0.70/talas5/devices/ NEXT_PUBLIC_API_BASE_URL=http://10.10.0.70/talas5/ClientData/WebServiceMap.asmx -NEXT_PUBLIC_API_PORT_3000=http://10.10.0.70:3000 + diff --git a/CHANGELOG.md b/CHANGELOG.md index 17518d716..5ade00af5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,19 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie --- +## [1.1.68] – 2025-05-15 + +### Changed + +- Verweis auf `NEXT_PUBLIC_API_PORT_3000` entfernt +- API-URL wird nun dynamisch per `window.location.hostname:3000` gesetzt +- `.env.local` bereinigt: keine API-URL mehr nötig +- Betroffene Dateien: + - `useFetchPoiData.js` + - `poiTypesSlice.js` + +--- + ## [1.1.65] – 2025-05-15 ### Changed diff --git a/components/mainComponent/hooks/useFetchPoiData.js b/components/mainComponent/hooks/useFetchPoiData.js index 4c757dee6..789d5ec15 100644 --- a/components/mainComponent/hooks/useFetchPoiData.js +++ b/components/mainComponent/hooks/useFetchPoiData.js @@ -1,7 +1,7 @@ // /components/mainComponent/hooks/useFetchWebServiceMap.js import { useEffect, useState } from "react"; -const API_BASE_URL = process.env.NEXT_PUBLIC_API_PORT_3000; // API-URL aus .env.local +const API_BASE_URL = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:3000` : ""; const useFetchPoiData = (setPoiTypMap, setPoiData) => { useEffect(() => { diff --git a/config/appVersion.js b/config/appVersion.js index 179ee6e01..c6c98a8cf 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.68"; +export const APP_VERSION = "1.1.69"; diff --git a/docs/frontend/hooks/useFetchPoiData.md b/docs/frontend/hooks/useFetchPoiData.md new file mode 100644 index 000000000..8003bfb98 --- /dev/null +++ b/docs/frontend/hooks/useFetchPoiData.md @@ -0,0 +1,44 @@ +# 📍 useFetchPoiData – Laden von POI-Typen und Icons + +## Zweck + +Dieser React-Hook wird im Frontend verwendet, um: + +1. Alle POI-Typen (`poiTyp/readPoiTyp`) +2. Alle POI-Icons (`pois/poi-icons`) + +vom Server abzurufen und sie in lokale React-Komponenten zu laden. + +--- + +## Aufrufstruktur + +```js +const API_BASE_URL = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:3000` : ""; + +await fetch(`${API_BASE_URL}/api/talas_v5_DB/poiTyp/readPoiTyp`); +await fetch(`${API_BASE_URL}/api/talas_v5_DB/pois/poi-icons`); +``` + +--- + +## Erklärung + +Da die Anwendung produktiv über Port `80` läuft, aber die Next.js-API auf Port `3000`, wird `:3000` explizit in der URL ergänzt. + +Dieser Hook funktioniert nur im Client-Browser. Die Prüfung mit `typeof window !== "undefined"` schützt davor, dass `window` im SSR-Kontext (Server-Side Rendering) undefined ist. + +--- + +## Verhalten bei Fehlern + +- Wenn die Antwort nicht `ok` ist (z. B. 404, 500), wird ein Fehler in der Console angezeigt. +- Wenn die Daten kein Array sind (für `poiTyp`), wird eine zusätzliche Validierung ausgelöst. + +--- + +## Siehe auch + +- [`MapComponent`](../components/MapComponent.md) +- `pages/api/talas_v5_DB/poiTyp/readPoiTyp.js` +- `pages/api/talas_v5_DB/pois/poi-icons.js` diff --git a/docs/frontend/redux/slices/poiTypesSlice.md b/docs/frontend/redux/slices/poiTypesSlice.md new file mode 100644 index 000000000..030a001bc --- /dev/null +++ b/docs/frontend/redux/slices/poiTypesSlice.md @@ -0,0 +1,71 @@ +# 🧩 poiTypesSlice – Redux Slice für POI-Typen + +## Zweck + +Dieses Slice verwaltet die Liste der POI-Typen (`poiTyp`) aus der Datenbank. +Die Daten werden beim Start der Karte vom Server abgerufen und im Redux Store gespeichert. + +--- + +## Quelle + +API-Endpunkt: + +``` +/api/talas_v5_DB/poiTyp/readPoiTyp +``` + +Die Daten werden über einen `createAsyncThunk` geladen: + +```js +export const fetchPoiTypes = createAsyncThunk("poiTypes/fetchPoiTypes", async () => { + // ... +}); +``` + +--- + +## Dynamische API-URL + +Damit kein Rebuild bei jedem Serverwechsel nötig ist, wird die API-URL dynamisch bestimmt: + +```js +let API_BASE_URL = ""; + +if (typeof window !== "undefined") { + API_BASE_URL = `${window.location.protocol}//${window.location.hostname}:3000`; +} else { + API_BASE_URL = "http://localhost:3000"; +} +``` + +➡ Dadurch kann dieselbe `.next`-Build auf verschiedenen Servern verwendet werden, ohne neu zu builden. + +--- + +## Datenstruktur im Redux Store + +```ts +{ + poiTypes: { + items: [], // Liste aller POI-Typen + status: "idle" | "loading" | "succeeded" | "failed" + } +} +``` + +--- + +## Verwendung in Komponenten + +Diese Daten werden typischerweise verwendet in: + +- `components/pois/AddPoiModalWindow.js` +- `MapComponent.js` (indirekt) + +--- + +## Siehe auch + +- [`useFetchPoiData`](../../frontend/hooks/useFetchPoiData.md) +- API-Datei: `pages/api/talas_v5_DB/poiTyp/readPoiTyp.js` \ No newline at end of file diff --git a/redux/slices/db/poiTypesSlice.js b/redux/slices/db/poiTypesSlice.js index b4bb7cb9b..f5f44c7c2 100644 --- a/redux/slices/db/poiTypesSlice.js +++ b/redux/slices/db/poiTypesSlice.js @@ -3,7 +3,16 @@ import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; // API-Abruf für POI-Typen export const fetchPoiTypes = createAsyncThunk("poiTypes/fetchPoiTypes", async () => { - const API_BASE_URL = process.env.NEXT_PUBLIC_API_PORT_3000; + let API_BASE_URL = ""; + + if (typeof window !== "undefined") { + // Browser + API_BASE_URL = `${window.location.protocol}//${window.location.hostname}:3000`; + } else { + // Server (z. B. SSR) + API_BASE_URL = "http://localhost:3000"; // oder env-Fallback z. B. process.env.API_BASE_URL + } + const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/poiTyp/readPoiTyp`); return await response.json(); });