feat: create useMapContextMenu.js for Separate of Conserns or modularity

components/MapComponent.js

@@ -76,6 +76,7 @@ import {
 } from "../utils/contextMenuUtils.js";
 import { MAP_VERSION } from "../config/settings";
 import * as layers from "../config/layers.js";
+import useMapContextMenu from "./useMapContextMenu.js";
 
 //---------------------------------------------------------------------
 //-------------------- MapComponent -----------------------------------
@@ -301,6 +302,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   ); // Abhängigkeit zu hasRights hinzufügen
 
   //-----Kontextmenu----ende------------
+
+  const { addItemsToMapContextMenu } = useMapContextMenu(
+    map,
+    hasRights,
+    addStationCallback
+  );
   //------------------------------------------ */
   const layerNames = {
     "GSM Modem": "GSMMODEM",
@@ -884,7 +891,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //------------------------------------------
   //--------------------------------------------------
 
-  const addItemsToMapContextMenu = () => {
+  /*   const addItemsToMapContextMenu = () => {
     if (!menuItemAdded) {
       //console.log("contextMenuItems hasRights:", hasRights);
 
@@ -897,7 +904,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
       setMenuItemAdded(true); // Menüpunkt wurde hinzugefült, Zustand aktualisieren
     }
-  };
+  }; */
 
   useEffect(() => {
     if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded) {

components/useMapContextMenu.js

@@ -0,0 +1,22 @@
+import { useState, useCallback } from "react";
+
+const useMapContextMenu = (map, hasRights, addStationCallback) => {
+  const [menuItemAdded, setMenuItemAdded] = useState(false);
+
+  const addItemsToMapContextMenu = useCallback(() => {
+    if (map && !menuItemAdded) {
+      map.contextmenu.addItem({
+        text: "POI hinzufügen",
+        icon: "img/add_station.png",
+        className: "background-red",
+        callback: (event) => addStationCallback(event, hasRights),
+      });
+
+      setMenuItemAdded(true); // Menüpunkt wurde hinzugefült, Zustand aktualisieren
+    }
+  }, [map, menuItemAdded, hasRights, addStationCallback]);
+
+  return { addItemsToMapContextMenu };
+};
+
+export default useMapContextMenu;