refactor: ausgelagert die Linien-Zeichnungslogik in einen separaten Hook

- Die Logik zum Abrufen und Zeichnen von Linien wurde in den neuen Hook `useDrawLines` ausgelagert.
- Dies verbessert die Übersichtlichkeit in `MapComponent.js` und ermöglicht eine einfachere Wiederverwendung und Wartung.
- Der neue Hook befindet sich im Verzeichnis `hooks/layers/`.

components/MapComponent.js

@@ -54,6 +54,8 @@ import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleS
 import { useSelector, useDispatch } from "react-redux";
 import { selectCurrentPoi, setCurrentPoi, clearCurrentPoi } from "../redux/slices/currentPoiSlice";
 
+import useDrawLines from "../hooks/layers/useDrawLines";
+
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const dispatch = useDispatch();
   const currentPoi = useSelector(selectCurrentPoi);
@@ -268,37 +270,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, []);
 
   //--------------------------------------------------------
-  useEffect(() => {
+  useDrawLines(setLinePositions);
-    const endpoint = "/api/talas_v5_DB/gisLines/readGisLines";
-    //const endpoint = "http://localhost/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=10";
-    fetch(endpoint)
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        return response.json();
-      })
-      .then((data) => {
-        const newLinePositions = data.map((item) => {
-          //console.log("item.idLD", item.idLD);
-          //console.log("item.idModul", item.idModul);
-
-          if (item.points && Array.isArray(item.points)) {
-            return {
-              coordinates: item.points.map((point) => [point.x, point.y]),
-              idModul: item.idModul,
-              idLD: item.idLD,
-            };
-          } else {
-            throw new Error("Points missing or not an array");
-          }
-        });
-        setLinePositions(newLinePositions);
-      })
-      .catch((error) => {
-        console.error("Error fetching data:", error.message);
-      });
-  }, []);
   //--------------------------------------------
   useEffect(() => {
     const fetchPoiTypData = async () => {

hooks/layers/useDrawLines.js

@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+const useDrawLines = (setLinePositions) => {
+  // Linien auf die Karte zeichnen
+  useEffect(() => {
+    const endpoint = "/api/talas_v5_DB/gisLines/readGisLines";
+    //const endpoint = "http://localhost/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=10";
+    fetch(endpoint)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((data) => {
+        const newLinePositions = data.map((item) => {
+          //console.log("item.idLD", item.idLD);
+          //console.log("item.idModul", item.idModul);
+
+          if (item.points && Array.isArray(item.points)) {
+            return {
+              coordinates: item.points.map((point) => [point.x, point.y]),
+              idModul: item.idModul,
+              idLD: item.idLD,
+            };
+          } else {
+            throw new Error("Points missing or not an array");
+          }
+        });
+        setLinePositions(newLinePositions);
+      })
+      .catch((error) => {
+        console.error("Error fetching data:", error.message);
+      });
+  }, []);
+};
+
+export default useDrawLines;