From 6da44ac1c5088fc9eb5df7c21e4ba30665975124 Mon Sep 17 00:00:00 2001
From: Ismail Ali <ismailali1553@gmail.com>
Date: Mon, 24 Feb 2025 20:11:47 +0100
Subject: [PATCH] fix: Endlosschleife in useAlarmStatus.ts behoben &
 Redux-Selektoren optimiert
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useMemo für Redux-Selektoren in Kue705FO.tsx hinzugefügt, um unnötige Re-Renders zu vermeiden.
- State-Update in useAlarmStatus.ts optimiert, sodass setState nur noch aufgerufen wird, wenn sich der Wert wirklich ändert.
- Performance verbessert und maximale Update-Tiefe-Fehler ("Maximum update depth exceeded") behoben.
- Code-Struktur verbessert, um stabilere Redux-Integration zu gewährleisten.
---
 .../kabelueberwachung/kue705FO/Kue705FO.tsx   | 43 +++++++++++++------
 .../kue705FO/hooks/useAlarmStatus.ts          | 32 +++++++-------
 2 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx b/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
index 6a8c1ff..94c2775 100644
--- a/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
@@ -1,5 +1,5 @@
 "use client"; // components/modules/kue705FO/Kue705FO.tsx
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useMemo } from "react";
 import { useSelector } from "react-redux";
 import KueModal from "./KueModal";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
@@ -73,23 +73,42 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
     tdrActive,
   } = useSelector((state: RootState) => state.variables);
 
-  // Stelle sicher, dass alle Werte als number[] vorliegen
-  const kueCableBreak = useSelector(
-    (state: RootState) => state.variables.kueCableBreak?.map(Number) ?? []
+  const kueCableBreakRaw = useSelector(
+    (state: RootState) => state.variables.kueCableBreak
   );
-  const kueGroundFault = useSelector(
-    (state: RootState) => state.variables.kueGroundFault?.map(Number) ?? []
+  const kueGroundFaultRaw = useSelector(
+    (state: RootState) => state.variables.kueGroundFault
   );
-  const kueAlarm1 = useSelector(
-    (state: RootState) => state.variables.kueAlarm1?.map(Number) ?? []
+  const kueAlarm1Raw = useSelector(
+    (state: RootState) => state.variables.kueAlarm1
   );
-  const kueAlarm2 = useSelector(
-    (state: RootState) => state.variables.kueAlarm2?.map(Number) ?? []
+  const kueAlarm2Raw = useSelector(
+    (state: RootState) => state.variables.kueAlarm2
   );
-  const kueOverflow = useSelector(
-    (state: RootState) => state.variables.kueOverflow?.map(Number) ?? []
+  const kueOverflowRaw = useSelector(
+    (state: RootState) => state.variables.kueOverflow
   );
 
+  const kueCableBreak = useMemo(
+    () => kueCableBreakRaw?.map(Number) ?? [],
+    [kueCableBreakRaw]
+  );
+  const kueGroundFault = useMemo(
+    () => kueGroundFaultRaw?.map(Number) ?? [],
+    [kueGroundFaultRaw]
+  );
+  const kueAlarm1 = useMemo(
+    () => kueAlarm1Raw?.map(Number) ?? [],
+    [kueAlarm1Raw]
+  );
+  const kueAlarm2 = useMemo(
+    () => kueAlarm2Raw?.map(Number) ?? [],
+    [kueAlarm2Raw]
+  );
+  const kueOverflow = useMemo(
+    () => kueOverflowRaw?.map(Number) ?? [],
+    [kueOverflowRaw]
+  );
   //-------------------------handlers-------------------------
   const openModal = () => handleOpenModal(setShowModal);
   const closeModal = () => handleCloseModal(setShowModal);
diff --git a/components/main/kabelueberwachung/kue705FO/hooks/useAlarmStatus.ts b/components/main/kabelueberwachung/kue705FO/hooks/useAlarmStatus.ts
index 4a0a38e..13101d3 100644
--- a/components/main/kabelueberwachung/kue705FO/hooks/useAlarmStatus.ts
+++ b/components/main/kabelueberwachung/kue705FO/hooks/useAlarmStatus.ts
@@ -3,27 +3,29 @@ import { useEffect, useState } from "react";
 
 const useAlarmStatus = (
   slotIndex: number,
-  kueAlarm1: any,
-  kueAlarm2: any,
-  kueCableBreak: any,
-  kueGroundFault: any
+  kueAlarm1: number[],
+  kueAlarm2: number[],
+  kueCableBreak: number[],
+  kueGroundFault: number[]
 ) => {
   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);
+    const calculateAlarmStatus = () => {
+      return (
+        (kueAlarm1?.[slotIndex] ?? 0) ||
+        (kueAlarm2?.[slotIndex] ?? 0) ||
+        (kueCableBreak?.[slotIndex] ?? 0) ||
+        (kueGroundFault?.[slotIndex] ?? 0)
+      );
     };
 
-    updateAlarmStatus();
-    const interval = setInterval(updateAlarmStatus, 10000);
-    return () => clearInterval(interval);
+    const newStatus = !!calculateAlarmStatus();
+
+    // 🚀 Nur aktualisieren, wenn sich der Wert wirklich ändert!
+    setCurrentAlarmStatus((prevStatus) =>
+      prevStatus !== newStatus ? newStatus : prevStatus
+    );
   }, [slotIndex, kueAlarm1, kueAlarm2, kueCableBreak, kueGroundFault]);
 
   return currentAlarmStatus;