refactor(map): useDrawLines.js auf Redux umgestellt

- fetch-Aufruf ersetzt durch Redux-Thunk fetchGisLinesThunk
- gisLines aus Redux-Store bezogen mit selectGisLines
- Datenmapping erfolgt reaktiv via useEffect
- Version auf 1.1.174 erhöht

CHANGELOG.md

@@ -4,6 +4,39 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
 
 ---
 
+[1.1.174] – 2025-05-26
+♻️ Refactor
+useDrawLines.js vollständig auf Redux umgestellt:
+
+Entfernt: direkter fetch("/api/talas_v5_DB/gisLines/readGisLines")
+
+Stattdessen: Redux fetchGisLinesThunk() + selectGisLines verwendet
+
+Datenverarbeitung der points erfolgt reaktiv über Redux-State
+
+🧠 Architektur
+useDrawLines.js verwendet jetzt:
+
+fetchGisLinesService (Service)
+
+fetchGisLinesThunk (Thunk)
+
+gisLinesSlice mit Selektor selectGisLines
+
+State wird automatisch im Redux verwaltet (loading/succeeded/failed)
+
+✅ Cleanup
+Promise-Kette .then().catch() durch useSelector-basierten Effekt ersetzt
+
+Fehlerausgabe bei ungültigen points strukturiert behandelt
+
+Hook ist nun Redux-konform und testbar
+
+🔧 Version
+📦 Version erhöht auf 1.1.174
+
+---
+
 [1.1.173] – 2025-05-26
 ♻️ Refactor
 useMapComponentState.js vollständig auf Redux umgestellt:

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.174";
+export const APP_VERSION = "1.1.175";

hooks/layers/useDrawLines.js

@@ -1,37 +1,40 @@
+// /hooks/layers/useDrawLines.js
 import { useEffect } from "react";
-const useDrawLines = (setLinePositions) => {
+import { useDispatch, useSelector } from "react-redux";
-  // Linien auf die Karte zeichnen
+import { fetchGisLinesThunk } from "../../redux/thunks/database/polylines/fetchGisLinesThunk";
-  useEffect(() => {
+import { selectGisLines } from "../../redux/slices/database/polylines/gisLinesSlice";
-    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)) {
+const useDrawLines = (setLinePositions) => {
-            return {
+  const dispatch = useDispatch();
-              coordinates: item.points.map((point) => [point.x, point.y]),
+  const gisLines = useSelector(selectGisLines);
-              idModul: item.idModul,
+
-              idLD: item.idLD,
+  // Daten laden (nur einmal)
-            };
+  useEffect(() => {
-          } else {
+    dispatch(fetchGisLinesThunk());
-            throw new Error("Points missing or not an array");
+  }, [dispatch]);
-          }
+
-        });
+  // Linien aus GIS-Daten berechnen
-        setLinePositions(newLinePositions);
+  useEffect(() => {
-      })
+    if (!Array.isArray(gisLines)) return;
-      .catch((error) => {
+
-        console.error("Error fetching data:", error.message);
+    try {
+      const newLinePositions = gisLines.map((item) => {
+        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 (err) {
+      console.error("❌ Fehler beim Zeichnen der Linien:", err.message);
+    }
+  }, [gisLines, setLinePositions]);
 };
 
 export default useDrawLines;