feat: Fetch-Logik für Linienstatusdaten in useFetchLineStatusData Hook ausgelagert

- Fetch-Logik für Linienstatusdaten aus MapComponent.js in einen separaten Hook ausgelagert.
- Neuer Hook: useFetchLineStatusData im hooks-Verzeichnis hinzugefügt.
- Verbesserung der Modularität und Wiederverwendbarkeit.

components/MapComponent.js

@@ -44,6 +44,7 @@ import { useMapComponentState } from "../hooks/useMapComponentState";
 import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
 import { updateLocation } from "../utils/updateBereichUtil";
 import { usePolylineTooltipLayer } from "../hooks/usePolylineTooltipLayer";
+import { useFetchLineStatusData } from "../hooks/useFetchLineStatusData";
 //--------------------------------------------
 import { currentPoiState } from "../redux/slices/currentPoiSlice.js";
 import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice";
@@ -451,34 +452,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   ]);
 
   //--------------------------------------------
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response1 = await fetch(webserviceGisLinesStatusUrl);
-        const data1 = await response1.json();
-        //console.log("data1.Statis", data1.Statis);
-        const reversedData = data1.Statis.reverse();
-        setLineStatusData(reversedData);
-
-        const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
-        const data2 = await response2.json();
-
-        const colorsByModule = {};
-        reversedData.forEach((stat) => {
-          const matchingLine = data2.find((item) => item.idLD === stat.IdLD && item.idModul === stat.Modul);
-          if (matchingLine) {
-            colorsByModule[matchingLine.idModul] = stat.PrioColor;
-            //console.log("Übereinstimmung gefunden für: ", stat);
-            setLinesData(matchingLine);
-          }
-        });
-        //setLineColors(colorsByModule);
-      } catch (error) {
-        console.error("Error fetching data:", error);
-      }
-    };
-    fetchData();
-  }, []);
+  useFetchLineStatusData(
+    webserviceGisLinesStatusUrl,
+    setLineStatusData,
+    setLinesData
+  );
   //--------------------------------------------
 
   usePolylineTooltipLayer(  

hooks/useFetchLineStatusData.js

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+
+export const useFetchLineStatusData = (
+  webserviceGisLinesStatusUrl,
+  setLineStatusData,
+  setLinesData
+) => {
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response1 = await fetch(webserviceGisLinesStatusUrl);
+        const data1 = await response1.json();
+        const reversedData = data1.Statis.reverse();
+        setLineStatusData(reversedData);
+
+        const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
+        const data2 = await response2.json();
+
+        const colorsByModule = {};
+        reversedData.forEach((stat) => {
+          const matchingLine = data2.find(
+            (item) => item.idLD === stat.IdLD && item.idModul === stat.Modul
+          );
+          if (matchingLine) {
+            colorsByModule[matchingLine.idModul] = stat.PrioColor;
+            setLinesData(matchingLine);
+          }
+        });
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+    fetchData();
+  }, [webserviceGisLinesStatusUrl, setLineStatusData, setLinesData]);
+};