feat: useEffect-Hooks ausgelagert in separate Hook-Dateien

- useEffect-Logik aus Kue705FO.tsx in eigene Hooks ausgelagert:
  - useKueVersion.ts für die KUE-Version
  - useAlarmStatus.ts für den Alarmstatus
  - useIsoDisplay.ts für die Anzeige der Isolationswerte
  - useLoopDisplay.ts für den Schleifenwiderstand
  - useChartPlugin.ts für Chart.js Plugin-Handling
  - useChartData.ts für Redux-Chart-Datenverwaltung
  - useModulName.ts für den Modulnamen mit Setter-Funktion

- Code in Kue705FO.tsx optimiert und modularisiert
- Fehler mit `setCurrentModulName` behoben durch Rückgabe der Setter-Funktion in useModulName.ts

components/main/kabelueberwachung/kue705FO/Kue705FO.tsx

@@ -1,31 +1,28 @@
 "use client"; // components/modules/kue705FO/Kue705FO.tsx
 import React, { useState, useEffect, useRef } from "react";
-import ReactModal from "react-modal";
 import Chart from "chart.js/auto";
 import { useSelector } from "react-redux";
 import KueModal from "./KueModal";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
 import { RootState } from "../../../../redux/store";
-import { DataTDR } from "../../../../redux/types/chartDataTypesTDR";
 import { useDispatch } from "react-redux";
-import {
+import { setSelectedChartData } from "../../../../redux/slices/variablesSlice";
-  setSelectedChartData,
-  setSelectedFileName,
-} from "../../../../redux/slices/variablesSlice";
-import { createLoopChart, createTDRChart } from "../../../../utils/chartUtils";
-import { getAlarmDisplayText } from "../../../../utils/alarmUtils";
 import { goLoop } from "../../../../utils/goLoop";
 import { goTDR } from "../../../../utils/goTDR";
-import { loadTDRChartData } from "../../../../utils/loadTDRChartData";
-import { loadLoopChartData } from "../../../../utils/loadLoopChartData";
 import { Kue705FOProps } from "../../../../types/components/Kue705FOProps";
 import ChartSwitcher from "./Charts/ChartSwitcher";
 import { setActiveMode } from "../../../../redux/slices/kueChartModeSlice";
-import LoopMeasurementChart from "./Charts/LoopMeasurementChart/LoopMeasurementChart";
-import TDRChart from "./Charts/TDRChart/TDRChart";
 import handleButtonClick from "./kue705FO-Funktionen/handleButtonClick";
 import { setChartOpen } from "../../../../redux/slices/kabelueberwachungChartSlice";
 import { setSlotNumber } from "../../../../redux/slices/kabelueberwachungChartSlice";
+//-------hooks----------------
+import useChartPlugin from "./hooks/useChartPlugin";
+import useAlarmStatus from "./hooks/useAlarmStatus";
+import useKueVersion from "./hooks/useKueVersion";
+import useIsoDisplay from "./hooks/useIsoDisplay";
+import useLoopDisplay from "./hooks/useLoopDisplay";
+import useModulName from "./hooks/useModulName";
+import useChartData from "./hooks/useChartData";
 
 const Kue705FO: React.FC<Kue705FOProps> = ({
   isolationswert,
@@ -45,10 +42,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   const dispatch = useDispatch();
 
   const chartRef = useRef(null);
-  const [zoomPlugin, setZoomPlugin] = useState<any>(null); // Plugin-Status für Chart.js
+
-  const [kueVersion, setKueVersion] = useState("V4.19");
-  const [currentAlarmStatus, setCurrentAlarmStatus] = useState(false);
-  const [currentModulName, setCurrentModulName] = useState(modulName);
   const [activeButton, setActiveButton] = useState<"Schleife" | "TDR">(
     "Schleife"
   );
@@ -56,8 +50,6 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   const [loopTitleText, setloopTitleText] = useState(
     "Schleifenwiderstand [kOhm]"
   );
-  const [loopDisplayValue, setLoopDisplayValue] = useState(schleifenwiderstand); // Initialisiere den loopDisplayValue mit schleifenwiderstand
-
   const [isoDisplayText, setIsoDisplayText] = useState("Aderbruch");
   const [groundFaultDisplayText, setGroundFaultDisplayText] =
     useState("Erdschluss");
@@ -68,20 +60,12 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   const [isoGreaterThan200, setIsoGreaterThan200] = useState(">200 MOhm");
 
   const [loading, setLoading] = useState(false);
-  const [isoDisplayValue, setIsoDisplayValue] = useState<
+
-    string | JSX.Element
-  >(); //Test erstmal leer ohne isolationswert
   const [showModal, setShowModal] = useState(false);
   const [showChartModal, setShowChartModal] = useState(false);
   const [loopMeasurementCurveChartData, setLoopMeasurementCurveChartData] =
     useState(null);
 
-  useEffect(() => {
-    if (loopMeasurementCurveChartData) {
-      dispatch(setSelectedChartData(loopMeasurementCurveChartData));
-    }
-  }, [loopMeasurementCurveChartData, dispatch]); // Führe dispatch nur aus, wenn loopMeasurementCurveChartData sich ändert
-
   // Redux-Variablen abrufen
   const {
     kuePSTmMinus96V,
@@ -144,124 +128,6 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
 
   const chartInstance = useRef<Chart | null>(null);
 
-  const selectedFileName = useSelector(
-    (state: RootState) => state.variables.selectedFileName
-  );
-
-  // Füge das Plugin zu Chart.js hinzu
-  useEffect(() => {
-    // Lade das Plugin nur, wenn `window` verfügbar ist
-    if (typeof window !== "undefined") {
-      import("chartjs-plugin-zoom").then((mod) => {
-        setZoomPlugin(mod.default); // Setze das Plugin
-        Chart.register(mod.default); // Plugin zur Chart.js-Instanz registrieren
-      });
-    }
-  }, []);
-
-  interface DataLoop {
-    t: number; // Zeit oder Index
-    m: number; // Isolationswiderstand
-    n: number; // Schleifenwiderstand
-  }
-
-  useEffect(() => {
-    const updateAlarmStatus = () => {
-      const alarmStatus =
-        (kueAlarm1 && Number(kueAlarm1[slotIndex])) ||
-        (kueAlarm2 && Number(kueAlarm2[slotIndex])) ||
-        (kueCableBreak && Number(kueCableBreak[slotIndex])) ||
-        (kueGroundFault && Number(kueGroundFault[slotIndex]));
-
-      setCurrentAlarmStatus(!!alarmStatus); // Wandelt string oder undefined in boolean um
-    };
-
-    updateAlarmStatus();
-    const interval = setInterval(updateAlarmStatus, 10000);
-    return () => clearInterval(interval);
-  }, [slotIndex, kueAlarm1, kueAlarm2, kueCableBreak, kueGroundFault]);
-
-  useEffect(() => {
-    if (reduxKueVersion?.[slotIndex]) {
-      setKueVersion("V" + Number(reduxKueVersion[slotIndex]) / 100);
-    }
-  }, [slotIndex, reduxKueVersion]);
-  //---------------------------------------------------
-  // Funktion zum Aktualisieren der Anzeige basierend auf dem Alarmstatus mit Icon und Blinken
-  // Funktion zum Aktualisieren der Anzeige basierend auf dem Alarmstatus mit Icon und Blinken
-  useEffect(() => {
-    setIsoDisplayValue(
-      getAlarmDisplayText(
-        slotIndex,
-        kuePSTmMinus96V,
-        kueCableBreak,
-        kueGroundFault,
-        kueAlarm1,
-        kueAlarm2,
-        kueOverflow ?? undefined,
-        isolationswert,
-        isoDisplayText,
-        groundFaultDisplayText,
-        isoFaultDisplayText,
-        loopFaultDisplayText,
-        isoGreaterThan200
-      )
-    );
-  }, [
-    slotIndex,
-    isolationswert,
-    isoDisplayText,
-    groundFaultDisplayText,
-    isoFaultDisplayText,
-    loopFaultDisplayText,
-    isoGreaterThan200,
-    kuePSTmMinus96V,
-    kueCableBreak,
-    kueGroundFault,
-    kueAlarm1,
-    kueAlarm2,
-    kueOverflow,
-  ]);
-  //---------------------------------------------------
-
-  // Effekt, um Modulnamen zu aktualisieren, wenn sich der Prop ändert
-  useEffect(() => {
-    setCurrentModulName(modulName);
-    //console.log(`Modulname aktualisiert für Slot ${slotIndex}:`, modulName);
-  }, [modulName, slotIndex]);
-  //---------------------------------------------------
-  // Aktualisiert den Schleifenwiderstand, wenn sich der `schleifenwiderstand`-Prop ändert
-  useEffect(() => {
-    if (activeButton === "Schleife") {
-      setLoopDisplayValue(schleifenwiderstand);
-    }
-  }, [schleifenwiderstand, activeButton]);
-  //---------------------------------------------------
-  const noLetter = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    const input = e.currentTarget;
-    input.value = input.value.replace(/[^0-9]/g, "");
-  };
-  //---------------------------------------------------
-  //Auswahlmenü für Jahr, Monat und Sortierung
-  const [jahr, setJahr] = useState(new Date().getFullYear());
-  const [monat, setMonat] = useState(new Date().getMonth() + 1);
-  const [sortAscending, setSortAscending] = useState(true);
-
-  const handleSortToggle = () => {
-    setSortAscending(!sortAscending);
-    console.log(
-      "Sortierung umkehren:",
-      sortAscending ? "Absteigend" : "Aufsteigend"
-    );
-  };
-
-  const handleAktualisieren = () => {
-    console.log("Aktualisieren mit Jahr:", jahr, "Monat:", monat);
-    // Logik für die Aktualisierung hinzufügen
-  };
-
-  //---------------------------------------------------
-
   //----------------------------------
   useEffect(() => {
     if (selectedChartData) {
@@ -279,7 +145,40 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   }, [selectedChartData]);
 
   //----------------------------------
+  //hooks einbinden
+  const kueVersion = useKueVersion(slotIndex, reduxKueVersion);
+  const currentAlarmStatus = useAlarmStatus(
+    slotIndex,
+    kueAlarm1,
+    kueAlarm2,
+    kueCableBreak,
+    kueGroundFault
+  );
+  const isoDisplayValue = useIsoDisplay(
+    slotIndex,
+    kuePSTmMinus96V,
+    kueCableBreak,
+    kueGroundFault,
+    kueAlarm1,
+    kueAlarm2,
+    kueOverflow,
+    isolationswert,
+    isoDisplayText,
+    groundFaultDisplayText,
+    isoFaultDisplayText,
+    loopFaultDisplayText,
+    isoGreaterThan200
+  );
+  const { currentModulName, setCurrentModulName } = useModulName(
+    slotIndex,
+    modulName
+  );
 
+  const loopDisplayValue = useLoopDisplay(schleifenwiderstand, activeButton);
+  const zoomPlugin = useChartPlugin();
+  useChartData(loopMeasurementCurveChartData);
+
+  //---------------------------------
   return (
     <div
       className="relative bg-gray-300 w-[7.25rem] h-[24.375rem] border border-gray-400 transform laptop:-translate-y-12 2xl:-translate-y-0

components/main/kabelueberwachung/kue705FO/hooks/useAlarmStatus.ts

@@ -0,0 +1,32 @@
+// components/main/kabelueberwachung/kue705FO/hooks/useAlarmStatus.ts
+import { useEffect, useState } from "react";
+
+const useAlarmStatus = (
+  slotIndex: number,
+  kueAlarm1: any,
+  kueAlarm2: any,
+  kueCableBreak: any,
+  kueGroundFault: any
+) => {
+  const [currentAlarmStatus, setCurrentAlarmStatus] = useState(false);
+
+  useEffect(() => {
+    const updateAlarmStatus = () => {
+      const alarmStatus =
+        (kueAlarm1 && Number(kueAlarm1[slotIndex])) ||
+        (kueAlarm2 && Number(kueAlarm2[slotIndex])) ||
+        (kueCableBreak && Number(kueCableBreak[slotIndex])) ||
+        (kueGroundFault && Number(kueGroundFault[slotIndex]));
+
+      setCurrentAlarmStatus(!!alarmStatus);
+    };
+
+    updateAlarmStatus();
+    const interval = setInterval(updateAlarmStatus, 10000);
+    return () => clearInterval(interval);
+  }, [slotIndex, kueAlarm1, kueAlarm2, kueCableBreak, kueGroundFault]);
+
+  return currentAlarmStatus;
+};
+
+export default useAlarmStatus;

components/main/kabelueberwachung/kue705FO/hooks/useChartData.ts

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { setSelectedChartData } from "../../../../../redux/slices/variablesSlice";
+
+const useChartData = (loopMeasurementCurveChartData: any) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (loopMeasurementCurveChartData) {
+      dispatch(setSelectedChartData(loopMeasurementCurveChartData));
+    }
+  }, [loopMeasurementCurveChartData, dispatch]);
+};
+
+export default useChartData;

components/main/kabelueberwachung/kue705FO/hooks/useChartPlugin.ts

@@ -0,0 +1,20 @@
+// components/main/kabelueberwachung/kue705FO/hooks/useChartPlugin.ts
+import { useState, useEffect } from "react";
+import Chart from "chart.js/auto";
+
+const useChartPlugin = () => {
+  const [zoomPlugin, setZoomPlugin] = useState<any>(null);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      import("chartjs-plugin-zoom").then((mod) => {
+        setZoomPlugin(mod.default);
+        Chart.register(mod.default);
+      });
+    }
+  }, []);
+
+  return zoomPlugin;
+};
+
+export default useChartPlugin;

components/main/kabelueberwachung/kue705FO/hooks/useIsoDisplay.ts

@@ -0,0 +1,61 @@
+// compoenents/main/kabelueberwachung/kue705FO/hooks/useIsoDisplay.ts
+import { useEffect, useState } from "react";
+import { getAlarmDisplayText } from "../../../../../utils/alarmUtils";
+
+const useIsoDisplay = (
+  slotIndex: number,
+  kuePSTmMinus96V: any,
+  kueCableBreak: any,
+  kueGroundFault: any,
+  kueAlarm1: any,
+  kueAlarm2: any,
+  kueOverflow: any,
+  isolationswert: any,
+  isoDisplayText: string,
+  groundFaultDisplayText: string,
+  isoFaultDisplayText: string,
+  loopFaultDisplayText: string,
+  isoGreaterThan200: string
+) => {
+  const [isoDisplayValue, setIsoDisplayValue] = useState<
+    string | JSX.Element
+  >();
+
+  useEffect(() => {
+    setIsoDisplayValue(
+      getAlarmDisplayText(
+        slotIndex,
+        kuePSTmMinus96V,
+        kueCableBreak,
+        kueGroundFault,
+        kueAlarm1,
+        kueAlarm2,
+        kueOverflow ?? undefined,
+        isolationswert,
+        isoDisplayText,
+        groundFaultDisplayText,
+        isoFaultDisplayText,
+        loopFaultDisplayText,
+        isoGreaterThan200
+      )
+    );
+  }, [
+    slotIndex,
+    isolationswert,
+    isoDisplayText,
+    groundFaultDisplayText,
+    isoFaultDisplayText,
+    loopFaultDisplayText,
+    isoGreaterThan200,
+    kuePSTmMinus96V,
+    kueCableBreak,
+    kueGroundFault,
+    kueAlarm1,
+    kueAlarm2,
+    kueOverflow,
+  ]);
+
+  return isoDisplayValue;
+};
+
+export default useIsoDisplay;

components/main/kabelueberwachung/kue705FO/hooks/useKueVersion.ts

@@ -0,0 +1,16 @@
+// components/main/kabelueberwachung/kue705FO/hooks/useKueVersion.ts
+import { useEffect, useState } from "react";
+
+const useKueVersion = (slotIndex: number, reduxKueVersion: any) => {
+  const [kueVersion, setKueVersion] = useState("V4.19");
+
+  useEffect(() => {
+    if (reduxKueVersion?.[slotIndex]) {
+      setKueVersion("V" + Number(reduxKueVersion[slotIndex]) / 100);
+    }
+  }, [slotIndex, reduxKueVersion]);
+
+  return kueVersion;
+};
+
+export default useKueVersion;

components/main/kabelueberwachung/kue705FO/hooks/useLoopDisplay.ts

@@ -0,0 +1,19 @@
+// components/main/kabelueberwachung/kue705FO/hooks/useLoopDisplay.ts
+import { useEffect, useState } from "react";
+
+const useLoopDisplay = (
+  schleifenwiderstand: number,
+  activeButton: "Schleife" | "TDR"
+) => {
+  const [loopDisplayValue, setLoopDisplayValue] = useState(schleifenwiderstand);
+
+  useEffect(() => {
+    if (activeButton === "Schleife") {
+      setLoopDisplayValue(schleifenwiderstand);
+    }
+  }, [schleifenwiderstand, activeButton]);
+
+  return loopDisplayValue;
+};
+
+export default useLoopDisplay;

components/main/kabelueberwachung/kue705FO/hooks/useModulName.ts

@@ -0,0 +1,14 @@
+// components/main/kabelueberwachung/kue705FO/hooks/useModulName.ts
+import { useEffect, useState } from "react";
+
+const useModulName = (slotIndex: number, modulName: string) => {
+  const [currentModulName, setCurrentModulName] = useState(modulName);
+
+  useEffect(() => {
+    setCurrentModulName(modulName);
+  }, [modulName, slotIndex]);
+
+  return { currentModulName, setCurrentModulName }; // Hier wird die Setter-Funktion zurückgegeben
+};
+
+export default useModulName;