doc: addItemsToMapContextMenu und hasRights in progress

components/MapComponent.js

@@ -36,7 +36,7 @@ import { currentPoiState } from "../store/atoms/currentPoiState.js";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { mapIdState, userIdState } from "../store/atoms/urlParameterState.js";
-import { set } from "lodash";
+import { has, set } from "lodash";
 import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible.js";
 import { data } from "autoprefixer";
 import plusRoundIcon from "./PlusRoundIcon.js";
@@ -278,35 +278,32 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   };
 
   // Kontextmenü Callback für "POI hinzufügen"
-  const addStationCallback = useCallback(
-    (event) => {
-      console.log(
-        "Überprüfung der Berechtigung in addStationCallback: ",
-        hasRights
-      );
-      if (hasRights) {
-        setPopupCoordinates(event.latlng);
-        setShowPopup(true);
-      } else {
-        toast.error("Benutzer hat keine Berechtigung zum Hinzufügen.", {
-          position: "top-center",
-          autoClose: 5000,
-          hideProgressBar: false,
-          closeOnClick: true,
-          pauseOnHover: true,
-          draggable: true,
-          progress: undefined,
-        });
-        console.error("Benutzer hat keine Berechtigung zum Hinzufügen.");
-      }
-    },
-    [hasRights]
-  );
+  const addStationCallback = useCallback((event, hasRights) => {
+    console.log(
+      "Überprüfung der Berechtigung in addStationCallback: ",
+      hasRights
+    );
+    if (hasRights) {
+      setPopupCoordinates(event.latlng);
+      setShowPopup(true);
+    } else {
+      toast.error("Benutzer hat keine Berechtigung zum Hinzufügen.", {
+        position: "top-center",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
+      console.error("Benutzer hat keine Berechtigung zum Hinzufügen.");
+    }
+  });
 
   //-----Kontextmenu----ende------------
 
-  const addItemsToMapContextMenu = () => {
-    if (!menuItemAdded) {
+  const addItemsToMapContextMenu = (hasRights) => {
+    if (!menuItemAdded && map) {
       map.contextmenu.addItem({
         text: "Koordinaten anzeigen",
         icon: "img/not_listed_location.png",
@@ -346,6 +343,43 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
   };
 
+  useEffect(() => {
+    if (
+      map &&
+      poiLayerRef.current &&
+      isPoiTypLoaded &&
+      !menuItemAdded &&
+      isRightsLoaded
+    ) {
+      console.log(
+        "Überprüfung der Berechtigung vor addItemsToMapContextMenu: ",
+        hasRights
+      );
+      addItemsToMapContextMenu(hasRights);
+    }
+  }, [
+    map,
+    poiLayerRef,
+    isPoiTypLoaded,
+    menuItemAdded, // Hinzufügen zu den Abhängigkeiten, um den Effekt korrekt zu steuern
+    hasRights, // Sicherstellen, dass hasRights berücksichtigt wird
+    isRightsLoaded, // Überprüfung, ob die Rechte geladen sind
+  ]);
+
+  useEffect(() => {
+    const fetchAndSetUserRights = async () => {
+      const rights = await fetchUserRights();
+      console.log("Benutzerrechte in server URL:", rights);
+      setUserRights(rights);
+      setIsRightsLoaded(true);
+      setHasRights(rights && rights.includes(56)); // Prüfen, ob Benutzer die Rechte hat
+      console.log("Benutzerrechte in useEffect in MapComponent:", rights);
+    };
+
+    fetchAndSetUserRights();
+  }, [urls.SERVER_URL]); // Lade die Berechtigungen beim Initialisieren der Komponente
+
+  //----------------------------------------------------
   //------------------------------------------ */
   const layerNames = {
     "GSM Modem": "GSMMODEM",
@@ -612,8 +646,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       setUserRights(rights);
       setIsRightsLoaded(true);
       setHasRights(rights && rights.includes(56)); // Prüfen, ob Benutzer die Rechte hat
+      console.log("Benutzerrechte in useEffect in MapComponent:", hasRights);
     });
-  }, [urls.SERVER_URL]); // Läuft, wenn serverURL sich ändert
+  }, []);
 
   // Anzeigen von Modals basierend auf Benutzerrechten
   useEffect(() => {
@@ -1022,7 +1057,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
   }; */
 
-  useEffect(() => {
+  /*   useEffect(() => {
     if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded) {
       addItemsToMapContextMenu();
     }
@@ -1031,7 +1066,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     poiLayerRef,
     isPoiTypLoaded,
     menuItemAdded, // Hinzufügen zu den Abhängigkeiten, um den Effekt korrekt zu steuern
-  ]);
+  ]); */
   //------------------------------------------
 
   //          poiLayerRef(poiDbLayer)  POI   hinzufügen