esLint

components/main/kabelueberwachung/kue705FO/Kue705FO.tsx

@@ -1,5 +1,5 @@
 "use client"; // components/modules/kue705FO/Kue705FO.tsx
-import React, { useState, useEffect, useRef, useMemo } from "react";
+import React, { useState, useRef, useMemo } from "react";
 import { useSelector } from "react-redux";
 import KueModal from "./modals/SettingsModalWrapper";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
@@ -9,14 +9,15 @@ import ChartSwitcher from "./Charts/ChartSwitcher";
 import { RootState } from "../../../../redux/store";
 import { useDispatch } from "react-redux";
 //-------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";
-import useTDRChart from "./hooks/useTDRChart";
+
+import type { Chart } from "chart.js";
+
 //--------handlers----------------
 import handleButtonClick from "./kue705FO-Funktionen/handleButtonClick";
 import handleOpenModal from "./handlers/handleOpenModal";
@@ -36,15 +37,10 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   /*   console.log(
     `Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
   ); */
-  const selectedChartData = useSelector(
-    (state: RootState) => state.selectedChartDataSlice.selectedChartData
-  );
 
   const dispatch = useDispatch();
   const { kueName } = useSelector((state: RootState) => state.kueDataSlice);
 
-  const chartRef = useRef(null);
-
   const [activeButton, setActiveButton] = useState<"Schleife" | "TDR">(
     "Schleife"
   );
@@ -52,21 +48,17 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   const [loopTitleText, setloopTitleText] = useState(
     "Schleifenwiderstand [kOhm]"
   );
-  const [isoDisplayText, setIsoDisplayText] = useState("Aderbruch");
-  const [groundFaultDisplayText, setGroundFaultDisplayText] =
-    useState("Erdschluss");
-  const [loopFaultDisplayText, setLoopFaultDisplayText] =
-    useState("Schleifenfehler");
-  const [isoFaultDisplayText, setIsoFaultDisplayText] =
-    useState("Isolationsfehler");
-  const [isoGreaterThan200, setIsoGreaterThan200] = useState(">200 MOhm");
+  const [isoDisplayText] = useState("Aderbruch");
+  const [groundFaultDisplayText] = useState("Erdschluss");
+  const [loopFaultDisplayText] = useState("Schleifenfehler");
+  const [isoFaultDisplayText] = useState("Isolationsfehler");
+  const [isoGreaterThan200] = useState(">200 MOhm");
 
   const [loading, setLoading] = useState(false);
 
   const [showModal, setShowModal] = useState(false);
   const [showChartModal, setShowChartModal] = useState(false);
-  const [loopMeasurementCurveChartData, setLoopMeasurementCurveChartData] =
-    useState(null);
+  // Removed unused loopMeasurementCurveChartData state
 
   //------- Redux-Variablen abrufen--------------------------------
   const {
@@ -108,6 +100,9 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
     handleOpenChartModal(setShowChartModal, dispatch, slotIndex, activeButton);
   const refreshClick = () =>
     handleRefreshClick(activeButton, slotIndex, setLoading);
+  // Create a ref for the chart instance to pass as the second argument
+  const chartInstance = useRef<Chart | null>(null);
+
   const closeChartModal = () =>
     handleCloseChartModal(setShowChartModal, chartInstance);
   //----------------------------------
@@ -122,23 +117,20 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   );
   const isoDisplayValue = useIsoDisplay(
     slotIndex,
-    kuePSTmMinus96V,
-    kueCableBreak,
-    kueGroundFault,
-    kueAlarm1,
-    kueAlarm2,
-    kueOverflow,
-    isolationswert,
+    !!kuePSTmMinus96V?.[slotIndex],
+    !!kueCableBreak?.[slotIndex],
+    !!kueGroundFault?.[slotIndex],
+    !!kueAlarm1?.[slotIndex],
+    !!kueAlarm2?.[slotIndex],
+    !!kueOverflow?.[slotIndex],
+    Number(isolationswert),
     isoDisplayText,
     groundFaultDisplayText,
     isoFaultDisplayText,
     loopFaultDisplayText,
     isoGreaterThan200
   );
-  const { currentModulName, setCurrentModulName } = useModulName(
-    slotIndex,
-    modulName
-  );
+  const { setCurrentModulName } = useModulName(slotIndex, modulName);
   //---------------------------------
   //---------------------------------
   const tdmChartData = useSelector(
@@ -167,9 +159,8 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
     loopValue,
     activeButton
   );
-  const zoomPlugin = useChartPlugin();
-  useChartData(loopMeasurementCurveChartData);
-  const { chartInstance } = useTDRChart(selectedChartData);
+
+  // Removed useChartData(loopMeasurementCurveChartData) as the state was unused
 
   //---------------------------------
 
@@ -283,8 +274,8 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
                     ), // Hier sicherstellen, dass nur number übergeben wird
                   Number(schleifenwiderstand), // <- Stelle sicher, dass es eine Zahl ist
                   tdrLocation,
-                  slotIndex,
-                  dispatch
+                  dispatch,
+                  slotIndex
                 )
               }
               className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${