fix: ConfirmModal-Zustand in Redux ausgelagert zur Stabilisierung

- Neuen confirmModalSlice erstellt für globale Steuerung des Bestätigungsdialogs
- Zustand wird nun nicht mehr durch Re-Renders oder Komponentenneuaufbau zurückgesetzt
- ConfirmModal in KueEinstellung.tsx vollständig an Redux angebunden
- Flackern und automatisches Schließen nach 10–15 Sekunden dauerhaft behoben
This commit is contained in:
ISA
2025-07-02 14:16:08 +02:00
parent b3c5580538
commit f50bff4819
8 changed files with 57 additions and 9 deletions

View File

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
NEXT_PUBLIC_EXPORT_STATIC=false
NEXT_PUBLIC_USE_CGI=false
# App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.521
NEXT_PUBLIC_APP_VERSION=1.6.522
NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

View File

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
NEXT_PUBLIC_EXPORT_STATIC=true
NEXT_PUBLIC_USE_CGI=true
# App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.521
NEXT_PUBLIC_APP_VERSION=1.6.522
NEXT_PUBLIC_CPL_MODE=production

View File

@@ -1,3 +1,14 @@
## [1.6.522] 2025-07-02
- feat: Auth-Status bei App-Start aus localStorage laden und in Redux speichern
- fetchAuthService erstellt zum Auslesen von isAdminLoggedIn aus localStorage
- getAuthThunks Thunk implementiert zur Initialisierung von authSlice
- authSlice erweitert um setIsAdminLoggedIn Reducer
- dispatch(getAuthThunks()) in _app.tsx integriert für automatische Initialisierung bei App-Start
- Flackern und falscher Admin-Status nach Reload dauerhaft behoben
---
## [1.6.521] 2025-07-02
- refactor: Admin-Status direkt aus Redux ausgelesen und Props entfernt

View File

@@ -9,6 +9,10 @@ import firmwareUpdate from "../handlers/firmwareUpdate";
import ProgressModal from "@/components/main/settingsPageComponents/modals/ProgressModal";
import { toast } from "react-toastify";
import ConfirmModal from "@/components/common/ConfirmModal";
import {
openConfirmModal,
closeConfirmModal,
} from "@/redux/slices/confirmModalSlice";
interface Props {
slot: number;
@@ -49,7 +53,9 @@ export default function KueEinstellung({
);
const [isAdminLoggedIn] = useState(() => reduxAdmin);
const [showConfirmModal, setShowConfirmModal] = useState(false);
const showConfirmModal = useSelector(
(state: RootState) => state.confirmModal.open
);
const [isUpdating, setIsUpdating] = useState(false);
const [progress, setProgress] = useState(0);
@@ -243,7 +249,7 @@ export default function KueEinstellung({
{isAdminLoggedIn && (
<>
<button
onClick={() => setShowConfirmModal(true)}
onClick={() => dispatch(openConfirmModal())}
className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
>
Firmware Update
@@ -255,9 +261,9 @@ export default function KueEinstellung({
open={showConfirmModal}
title="Firmware-Update starten?"
message="⚠️ Das Firmware-Update kann einige Minuten dauern. Möchten Sie wirklich fortfahren?"
onCancel={() => setShowConfirmModal(false)}
onCancel={() => dispatch(closeConfirmModal())}
onConfirm={async () => {
setShowConfirmModal(false);
dispatch(closeConfirmModal());
toast.info("Firmware-Update gestartet. Bitte warten...");
setIsUpdating(true);
setProgress(0);

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "cpl-v4",
"version": "1.6.521",
"version": "1.6.522",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "cpl-v4",
"version": "1.6.521",
"version": "1.6.522",
"dependencies": {
"@fontsource/roboto": "^5.1.0",
"@iconify-icons/ri": "^1.2.10",

View File

@@ -1,6 +1,6 @@
{
"name": "cpl-v4",
"version": "1.6.521",
"version": "1.6.522",
"private": true,
"scripts": {
"dev": "next dev",

View File

@@ -0,0 +1,29 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
interface ConfirmModalState {
open: boolean;
}
const initialState: ConfirmModalState = {
open: false,
};
export const confirmModalSlice = createSlice({
name: "confirmModal",
initialState,
reducers: {
openConfirmModal: (state) => {
state.open = true;
},
closeConfirmModal: (state) => {
state.open = false;
},
setConfirmModal: (state, action: PayloadAction<boolean>) => {
state.open = action.payload;
},
},
});
export const { openConfirmModal, closeConfirmModal, setConfirmModal } =
confirmModalSlice.actions;
export default confirmModalSlice.reducer;

View File

@@ -27,6 +27,7 @@ import analogInputsHistoryReducer from "./slices/analogInputsHistorySlice";
import selectedAnalogInputReducer from "./slices/selectedAnalogInputSlice";
import messagesReducer from "./slices/messagesSlice";
import firmwareUpdateReducer from "@/redux/slices/firmwareUpdateSlice";
import confirmModalReducer from "./slices/confirmModalSlice";
const store = configureStore({
reducer: {
@@ -56,6 +57,7 @@ const store = configureStore({
selectedAnalogInput: selectedAnalogInputReducer,
messages: messagesReducer,
firmwareUpdate: firmwareUpdateReducer,
confirmModal: confirmModalReducer,
},
});