useEffect Block von MapComponent.js in useFetchPoiData.js ausgelagert

components/mainComponent/MapComponent.js

@@ -28,7 +28,6 @@ import { setupPolylines } from "../../utils/polylines/setupPolylines.js";
 import { setupPOIs } from "../../utils/setupPOIs.js";
 import VersionInfoModal from "../VersionInfoModal.js";
 import useDrawLines from "../../hooks/layers/useDrawLines.js";
-import useFetchPoiData from "../../hooks/useFetchPoiData.js";
 import usePoiTypData from "../../hooks/usePoiTypData.js";
 import useLayerVisibility from "../../hooks/useLayerVisibility.js";
 import useLineData from "../../hooks/useLineData.js";
@@ -84,6 +83,7 @@ import { updateCountdown, closePolylineContextMenu, forceCloseContextMenu } from
 import useInitializeMap from "./hooks/useInitializeMap";
 import useLoadUserRights from "./hooks/useLoadUserRights";
 import useFetchWebServiceMap from "./hooks/useFetchWebServiceMap";
+import useFetchPoiData from "./hooks/useFetchPoiData.js";
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const dispatch = useDispatch();
@@ -177,7 +177,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [linesData, setLinesData] = useState([]);
   const mapLayersVisibility = useRecoilValue(mapLayersState);
   const selectedArea = useRecoilValue(selectedAreaState);
-  const poiData = useFetchPoiData("/api/talas_v5_DB/pois/poi-icons");
+
   const [linePositions, setLinePositions] = useState([]);
   const { lineColors, tooltipContents } = useLineData(webserviceGisLinesStatusUrl, setLineStatusData);
   const [polylines, setPolylines] = useState([]);
@@ -292,38 +292,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, []);
 
   //--------------------------------------------
+  //const poiData = useFetchPoiData("/api/talas_v5_DB/pois/poi-icons");
+  const [poiData, setPoiData] = useState([]);
   // POIs Popup Informationen anzeigen
-  useEffect(() => {
+  useFetchPoiData(setPoiTypMap, setPoiData);
-    const fetchPoiTypData = async () => {
+
-      try {
+  useEffect(() => {
-        const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
+    console.log("📌 POI-Typ Map in MapComponent:", poiTypMap);
-        const data = await response.json();
+    console.log("📌 POI-Daten in MapComponent:", poiData);
-        if (!Array.isArray(data)) {
+  }, [poiTypMap, poiData]);
-          console.warn(`Unerwartetes Format: ${JSON.stringify(data)}`);
-          throw new Error("Daten sind kein Array");
-        }
-        const map = new Map();
-        data.forEach((item) => map.set(item.idPoiTyp, item.name));
-        setPoiTypMap(map);
-      } catch (error) {
-        console.error("Fehler beim Abrufen der poiTyp-Daten-1:", error);
-      }
-    };
-    const fetchPoiData = async () => {
-      try {
-        const response = await fetch("/api/talas_v5_DB/pois/poi-icons");
-        if (!response.ok) {
-          throw new Error("Network response was not ok");
-        }
-        const data = await response.json();
-      } catch (error) {
-        console.error("Fehler beim Abrufen der poiData-2:", error);
-      }
-    };
 
-    fetchPoiTypData();
-    fetchPoiData();
-  }, []);
   //--------------------------------------------
   // POIs auf die Karte zeichnen
   useEffect(() => {

components/mainComponent/hooks/useFetchPoiData.js

@@ -0,0 +1,51 @@
+// /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 useFetchPoiData = (setPoiTypMap, setPoiData) => {
+  useEffect(() => {
+    console.log(`🌍 API_BASE_URL aus .env.local: ${API_BASE_URL}`);
+
+    console.log("✅ useFetchPoiData wurde gestartet...");
+    console.log(`🌍 API_BASE_URL: ${API_BASE_URL}`); // Debugging: Prüfen, ob die Umgebungsvariable korrekt geladen wird
+
+    const fetchPoiTypData = async () => {
+      try {
+        console.log("📡 Lade POI-Typ-Daten...");
+        const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/poiTyp/readPoiTyp`);
+        const data = await response.json();
+        if (!Array.isArray(data)) {
+          console.warn(`⚠️ Unerwartetes Format: ${JSON.stringify(data)}`);
+          throw new Error("Daten sind kein Array");
+        }
+        const map = new Map();
+        data.forEach((item) => map.set(item.idPoiTyp, item.name));
+        setPoiTypMap(map);
+        console.log("✅ POI-Typ-Daten erfolgreich geladen!");
+      } catch (error) {
+        console.error("❌ Fehler beim Abrufen der POI-Typ-Daten:", error);
+      }
+    };
+
+    const fetchPoiData = async () => {
+      try {
+        console.log("📡 Lade POI-Icons...");
+        const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/pois/poi-icons`);
+        if (!response.ok) {
+          throw new Error(`Netzwerkantwort war nicht ok, Status: ${response.status}`);
+        }
+        const data = await response.json();
+        setPoiData(data);
+        console.log("✅ POI-Icons erfolgreich geladen!", data);
+      } catch (error) {
+        console.error("❌ Fehler beim Abrufen der POI-Daten:", error);
+      }
+    };
+
+    fetchPoiTypData();
+    fetchPoiData();
+  }, [setPoiTypMap, setPoiData]);
+};
+
+export default useFetchPoiData;

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.50";
+export const APP_VERSION = "1.1.51";