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
This commit is contained in:
ISA
2025-02-24 14:13:53 +01:00
parent a51edab6bc
commit 91103b28ec
8 changed files with 221 additions and 145 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;