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 {
-  setSelectedChartData,
-  setSelectedFileName,
-} from "../../../../redux/slices/variablesSlice";
-import { createLoopChart, createTDRChart } from "../../../../utils/chartUtils";
-import { getAlarmDisplayText } from "../../../../utils/alarmUtils";
+import { setSelectedChartData } from "../../../../redux/slices/variablesSlice";
 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