contextmenu, manchmal geht manchmal nicht, Timing Problem

redux/slices/polylineContextMenuSlice.js

@@ -3,8 +3,10 @@ import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
   isOpen: false,
-  position: null, // Serialisierbarer Wert { lat, lng }
-  forceClose: false, // Neuer State, um das Schließen zu erzwingen
+  position: null,
+  forceClose: false,
+  timerStart: null,
+  countdown: 20,
 };
 
 const polylineContextMenuSlice = createSlice({
@@ -14,19 +16,31 @@ const polylineContextMenuSlice = createSlice({
     openPolylineContextMenu: (state, action) => {
       state.isOpen = true;
       state.position = { lat: action.payload.position.lat, lng: action.payload.position.lng };
-      state.forceClose = false; // Beim Öffnen zurücksetzen
+      state.forceClose = false;
+      state.timerStart = Date.now();
+      state.countdown = 20;
     },
     closePolylineContextMenu: (state) => {
       state.isOpen = false;
       state.position = null;
+      state.timerStart = null;
+      state.countdown = 0;
+    },
+    updateCountdown: (state) => {
+      if (state.timerStart) {
+        const elapsedTime = (Date.now() - state.timerStart) / 1000;
+        state.countdown = Math.max(20 - elapsedTime, 0);
+      }
     },
     forceCloseContextMenu: (state) => {
       state.isOpen = false;
       state.position = null;
-      state.forceClose = true; // Setzt Flagge, um Schließen zu signalisieren
+      state.forceClose = true;
+      state.timerStart = null;
+      state.countdown = 0;
     },
   },
 });
 
-export const { openPolylineContextMenu, closePolylineContextMenu, forceCloseContextMenu } = polylineContextMenuSlice.actions;
+export const { openPolylineContextMenu, closePolylineContextMenu, updateCountdown, forceCloseContextMenu } = polylineContextMenuSlice.actions;
 export default polylineContextMenuSlice.reducer;