refactor: API-Port-Variable entfernt, dynamische Port-Nutzung eingeführt
- 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
This commit is contained in:
44
docs/frontend/hooks/useFetchPoiData.md
Normal file
44
docs/frontend/hooks/useFetchPoiData.md
Normal file
@@ -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`
|
||||
71
docs/frontend/redux/slices/poiTypesSlice.md
Normal file
71
docs/frontend/redux/slices/poiTypesSlice.md
Normal file
@@ -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`
|
||||
Reference in New Issue
Block a user