[Missions] Impossible de dessiner la zone d'une mission (#2683)

## Linked issues

- Resolve #2670 
- Refactor: Suppression de la props `map` pour utiliser l'instance
globale

----

- [ ] Tests E2E (Cypress)

frontend/src/api/APIWorker.tsx

@@ -30,7 +30,7 @@ export function APIWorker() {
   const dispatch = useMainAppDispatch()
   const isSuperUser = useIsSuperUser()
   const { selectedVesselIdentity, vesselSidebarTab } = useMainAppSelector(state => state.vessel)
-  const { sideWindow } = useMainAppSelector(state => state)
+  const sideWindow = useMainAppSelector(state => state.sideWindow)
   const { openedBeaconMalfunctionInKanban, vesselBeaconMalfunctionsResumeAndHistory } = useMainAppSelector(
     state => state.beaconMalfunction
   )

frontend/src/features/MainWindow.tsx

@@ -24,7 +24,8 @@ export function MainWindow() {
     state => state.displayedComponent
   )
   const isVesselSidebarOpen = useMainAppSelector(state => state.vessel.vesselSidebarIsOpen)
-  const { mission, sideWindow } = useMainAppSelector(state => state)
+  const mission = useMainAppSelector(state => state.mission)
+  const sideWindow = useMainAppSelector(state => state.sideWindow)
 
   const warnOnUnload = useCallback(
     event => {

frontend/src/features/MapButtons/AlertsMapButton.tsx

@@ -12,7 +12,7 @@ import { ReactComponent as AlertsSVG } from '../icons/Icone_alertes.svg'
 export function AlertsMapButton() {
   const dispatch = useMainAppDispatch()
   const { previewFilteredVesselsMode } = useMainAppSelector(state => state.global)
-  const { sideWindow } = useMainAppSelector(state => state)
+  const sideWindow = useMainAppSelector(state => state.sideWindow)
 
   const isActive =
     sideWindow.status !== SideWindowStatus.CLOSED &&

frontend/src/features/MapButtons/BeaconMalfunctionsMapButton.tsx

@@ -12,7 +12,7 @@ import { ReactComponent as BeaconMalfunctionsSVG } from '../icons/Icone_VMS.svg'
 export function BeaconMalfunctionsMapButton() {
   const dispatch = useMainAppDispatch()
   const { previewFilteredVesselsMode } = useMainAppSelector(state => state.global)
-  const { sideWindow } = useMainAppSelector(state => state)
+  const sideWindow = useMainAppSelector(state => state.sideWindow)
 
   const isActive =
     sideWindow.status !== SideWindowStatus.CLOSED &&

frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx

@@ -104,12 +104,6 @@ function UnmemoizedRegulatoryLayerSearchResultTopic({
     }
   }
 
-  // console.group('RegulatoryLayerSearchResultTopic')
-  // console.log('regulatoryLayerLawType', regulatoryLayerLawType)
-  // console.log('regulatoryLayerTopic', regulatoryLayerTopic)
-  // console.log('topicDetails', topicDetails)
-  // console.groupEnd()
-
   return (
     <>
       <LayerTopic onClick={() => setZonesAreOpen(!zonesAreOpen)}>

frontend/src/features/MapButtons/Missions/index.tsx

@@ -16,7 +16,7 @@ import { MapToolButton } from '../shared/MapToolButton'
 
 export function MissionsMenu() {
   const dispatch = useMainAppDispatch()
-  const { sideWindow } = useMainAppSelector(state => state)
+  const sideWindow = useMainAppSelector(state => state.sideWindow)
   const { leftBoxOpened } = useMainAppSelector(state => state.global)
   const { isMissionsLayerDisplayed } = useMainAppSelector(state => state.displayedComponent)
 

frontend/src/features/map/draw/DrawModal.tsx

@@ -40,7 +40,7 @@ const INTERACTION_LISTENER_BUTTON_LABEL: Partial<Record<InteractionListener, str
 export function DrawLayerModal() {
   const dispatch = useMainAppDispatch()
   const { drawedGeometry, initialGeometry, interactionType, listener } = useMainAppSelector(state => state.draw)
-  const { sideWindow } = useMainAppSelector(state => state)
+  const sideWindowStatus = useMainAppSelector(state => state.sideWindow.status)
   const coordinatesFormat = useMainAppSelector(state => state.map.coordinatesFormat)
   const initialFeatureNumberRef = useRef<number | undefined>(undefined)
 
@@ -76,10 +76,10 @@ export function DrawLayerModal() {
   }, [feature])
 
   useEffect(() => {
-    if (sideWindow.status === SideWindowStatus.CLOSED) {
+    if (sideWindowStatus === SideWindowStatus.CLOSED) {
       dispatch(closeDraw())
     }
-  }, [dispatch, sideWindow.status])
+  }, [dispatch, sideWindowStatus])
 
   const handleQuit = () => {
     dispatch(closeDraw())

frontend/src/features/map/layers/AdministrativeLayers.tsx

@@ -9,21 +9,19 @@ import {
 } from '../../../domain/entities/layers'
 import { getVectorOLLayer } from '../../../domain/use_cases/layer/administrative/showAdministrativeZone'
 import { useMainAppSelector } from '../../../hooks/useMainAppSelector'
+import { monitorfishMap } from '../monitorfishMap'
 
-export type AdministrativeLayersProps = {
-  map?: any
-}
-function UnmemoizedAdministrativeLayers({ map }: AdministrativeLayersProps) {
+function UnmemoizedAdministrativeLayers() {
   const { showedLayers } = useMainAppSelector(state => state.layer)
   const isBackoffice = useMainAppSelector(state => state.global.isBackoffice)
 
   useEffect(() => {
-    if (!map && !showedLayers) {
+    if (!showedLayers) {
       return
     }
 
     function addAdministrativeLayersToMap() {
-      const olLayers = map.getLayers()
+      const olLayers = monitorfishMap.getLayers()
       const layersToInsert = showedLayers
         .filter(layer => layerOfTypeAdministrativeLayer(administrativeLayers, layer))
         .filter(layer => layersNotInCurrentOLMap(olLayers, layer))
@@ -38,7 +36,7 @@ function UnmemoizedAdministrativeLayers({ map }: AdministrativeLayersProps) {
     }
 
     function removeAdministrativeLayersToMap() {
-      const layers = map.getLayers()
+      const layers = monitorfishMap.getLayers()
       const layersToRemove = layers
         .getArray()
         .filter(olLayer => layerOfTypeAdministrativeLayerInCurrentMap(administrativeLayers, olLayer))
@@ -51,7 +49,7 @@ function UnmemoizedAdministrativeLayers({ map }: AdministrativeLayersProps) {
 
     addAdministrativeLayersToMap()
     removeAdministrativeLayersToMap()
-  }, [isBackoffice, map, showedLayers])
+  }, [isBackoffice, showedLayers])
 
   return <></>
 }

frontend/src/features/map/layers/BaseLayer.tsx

@@ -7,14 +7,12 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { LayerProperties } from '../../../domain/entities/layers/constants'
 import { useIsInLightMode } from '../../../hooks/authorization/useIsInLightMode'
 import { useMainAppSelector } from '../../../hooks/useMainAppSelector'
+import { monitorfishMap } from '../monitorfishMap'
 
 import type { ImageTile } from 'ol'
 import type Tile from 'ol/Tile'
 
-export type BaseLayerProps = {
-  map?: any
-}
-function UnmemoizedBaseLayer({ map }: BaseLayerProps) {
+function UnmemoizedBaseLayer() {
   const isInLightMode = useIsInLightMode()
   const selectedBaseLayer = useMainAppSelector(state => state.map.selectedBaseLayer)
 
@@ -109,14 +107,16 @@ function UnmemoizedBaseLayer({ map }: BaseLayerProps) {
   )
 
   useEffect(() => {
-    if (!map || !selectedBaseLayer || !baseLayersObjects[selectedBaseLayer]) {
+    if (!selectedBaseLayer || !baseLayersObjects[selectedBaseLayer]) {
       return
     }
 
     function showAnotherBaseLayer() {
-      const olLayers = map.getLayers()
-      // eslint-disable-next-line no-underscore-dangle
+      const olLayers = monitorfishMap.getLayers()
+      /* eslint-disable no-underscore-dangle */
+      // @ts-ignore
       const layerToRemove = olLayers.getArray().find(layer => layer.className_ === LayerProperties.BASE_LAYER.code)
+      /* eslint-enable no-underscore-dangle */
 
       olLayers.insertAt(0, baseLayersObjects[selectedBaseLayer]())
 
@@ -130,7 +130,7 @@ function UnmemoizedBaseLayer({ map }: BaseLayerProps) {
     }
 
     showAnotherBaseLayer()
-  }, [baseLayersObjects, map, selectedBaseLayer])
+  }, [baseLayersObjects, selectedBaseLayer])
 
   return <></>
 }

frontend/src/features/map/layers/DrawLayer.tsx

@@ -208,6 +208,7 @@ function resetModifyInteractions(map) {
 function resetDrawInteractions(map) {
   map.getInteractions().forEach(interaction => {
     if (interaction instanceof Draw) {
+      interaction.abortDrawing()
       interaction.setActive(false)
     }
   })

frontend/src/features/map/layers/FilterLayer.jsx

@@ -8,8 +8,9 @@ import { Stroke, Style } from 'ol/style'
 import { OPENLAYERS_PROJECTION, WSG84_PROJECTION } from '../../../domain/entities/map/constants'
 import { LayerProperties } from '../../../domain/entities/layers/constants'
 import { COLORS } from '../../../constants/constants'
+import { monitorfishMap } from '../monitorfishMap'
 
-const FilterLayer = ({ map }) => {
+const FilterLayer = () => {
   const { showedFilter, filterColor } = useSelector((state) => {
     const _showedFilter = state.filter?.filters?.find(filter => filter.showed)
     return {
@@ -59,26 +60,20 @@ const FilterLayer = ({ map }) => {
   }
 
   useEffect(() => {
-    if (map) {
-      map.getLayers().push(getLayer())
-    }
+    monitorfishMap.getLayers().push(getLayer())
 
     return () => {
-      if (map) {
-        map.removeLayer(getLayer())
-      }
+      monitorfishMap.removeLayer(getLayer())
     }
-  }, [map])
+  }, [])
 
   useEffect(() => {
-    if (map) {
-      getVectorSource()?.clear(true)
-      const feature = filterFeature && getVectorSource()?.getFormat().readFeatures(filterFeature)
-      if (feature) {
-        getVectorSource()?.addFeatures(feature)
-      }
+    getVectorSource()?.clear(true)
+    const feature = filterFeature && getVectorSource()?.getFormat().readFeatures(filterFeature)
+    if (feature) {
+      getVectorSource()?.addFeatures(feature)
     }
-  }, [map, filterFeature])
+  }, [filterFeature])
 
   useEffect(() => {
     layerRef?.current.setStyle(new Style({

frontend/src/features/map/layers/Mission/MissionLayer/index.tsx

@@ -8,15 +8,13 @@ import { MonitorFishLayer } from '../../../../../domain/entities/layers/types'
 import { getMissionFeaturePoint } from '../../../../../domain/entities/mission'
 import { useGetFilteredMissionsQuery } from '../../../../../domain/entities/mission/hooks/useGetFilteredMissionsQuery'
 import { useMainAppDispatch } from '../../../../../hooks/useMainAppDispatch'
+import { monitorfishMap } from '../../../monitorfishMap'
 
 import type { WebGLPointsLayerWithName } from '../../../../../domain/types/layer'
 import type { Feature } from 'ol'
 import type { Point } from 'ol/geom'
 
-export type MissionLayerProps = {
-  map?: any
-}
-function UnmemoizedMissionLayer({ map }: MissionLayerProps) {
+function UnmemoizedMissionLayer() {
   const dispatch = useMainAppDispatch()
   const { missions } = useGetFilteredMissionsQuery()
 
@@ -45,9 +43,6 @@ function UnmemoizedMissionLayer({ map }: MissionLayerProps) {
   }, [])
 
   useEffect(() => {
-    if (!map) {
-      return
-    }
     getVectorSource().clear()
 
     const features = missions
@@ -58,21 +53,17 @@ function UnmemoizedMissionLayer({ map }: MissionLayerProps) {
     }
 
     getVectorSource().addFeatures(features)
-  }, [dispatch, map, missions])
+  }, [dispatch, missions])
 
   useEffect(() => {
-    if (!map) {
-      return undefined
-    }
-
     getLayer().name = LayerProperties.MISSION_PIN_POINT.code
-    map.getLayers().push(getLayer())
+    monitorfishMap.getLayers().push(getLayer())
 
     return () => {
-      map.removeLayer(getLayer())
+      monitorfishMap.removeLayer(getLayer())
       getLayer().dispose()
     }
-  }, [getLayer, map])
+  }, [getLayer])
 
   return <></>
 }

frontend/src/features/map/layers/Vessel/VesselAlertAndBeaconMalfunctionLayer.jsx

@@ -9,8 +9,9 @@ import { LayerProperties } from '../../../../domain/entities/layers/constants'
 import { getVesselAlertAndBeaconMalfunctionStyle } from './style'
 import { getVesselCompositeIdentifier, vesselIsShowed } from '../../../../domain/entities/vessel/vessel'
 import { useIsSuperUser } from '../../../../hooks/authorization/useIsSuperUser'
+import { monitorfishMap } from '../../monitorfishMap'
 
-const VesselAlertAndBeaconMalfunctionLayer = ({ map }) => {
+const VesselAlertAndBeaconMalfunctionLayer = () => {
   const isSuperUser = useIsSuperUser()
   const {
     vessels,
@@ -57,17 +58,15 @@ const VesselAlertAndBeaconMalfunctionLayer = ({ map }) => {
   }
 
   useEffect(() => {
-    if (isSuperUser && map) {
+    if (isSuperUser) {
       getLayer().name = LayerProperties.VESSEL_BEACON_MALFUNCTION.code
-      map.getLayers().push(getLayer())
+      monitorfishMap.getLayers().push(getLayer())
     }
 
     return () => {
-      if (map) {
-        map.removeLayer(getLayer())
-      }
+      monitorfishMap.removeLayer(getLayer())
     }
-  }, [isSuperUser, map, getLayer])
+  }, [isSuperUser, getLayer])
 
   useEffect(() => {
     if (isSuperUser && vessels?.length) {

frontend/src/features/map/layers/Vessel/VesselAlertLayer.jsx

@@ -14,8 +14,9 @@ import {
   vesselIsShowed
 } from '../../../../domain/entities/vessel/vessel'
 import { useIsSuperUser } from '../../../../hooks/authorization/useIsSuperUser'
+import { monitorfishMap } from '../../monitorfishMap'
 
-const VesselAlertLayer = ({ map }) => {
+const VesselAlertLayer = () => {
   const isSuperUser = useIsSuperUser()
 
   const {
@@ -65,17 +66,15 @@ const VesselAlertLayer = ({ map }) => {
   }
 
   useEffect(() => {
-    if (isSuperUser && map) {
+    if (isSuperUser) {
       getLayer().name = LayerProperties.VESSEL_ALERT.code
-      map.getLayers().push(getLayer())
+      monitorfishMap.getLayers().push(getLayer())
     }
 
     return () => {
-      if (map) {
-        map.removeLayer(getLayer())
-      }
+      monitorfishMap.removeLayer(getLayer())
     }
-  }, [isSuperUser, map])
+  }, [isSuperUser])
 
   useEffect(() => {
     if (isSuperUser && vessels?.length) {

frontend/src/features/map/layers/Vessel/VesselBeaconMalfunctionLayer.jsx

@@ -9,8 +9,9 @@ import { LayerProperties } from '../../../../domain/entities/layers/constants'
 import { getVesselBeaconMalfunctionStyle } from './style'
 import { getVesselCompositeIdentifier, vesselIsShowed } from '../../../../domain/entities/vessel/vessel'
 import { useIsSuperUser } from '../../../../hooks/authorization/useIsSuperUser'
+import { monitorfishMap } from '../../monitorfishMap'
 
-const VesselBeaconMalfunctionLayer = ({ map }) => {
+const VesselBeaconMalfunctionLayer = () => {
   const isSuperUser = useIsSuperUser()
 
   const {
@@ -58,17 +59,15 @@ const VesselBeaconMalfunctionLayer = ({ map }) => {
   }
 
   useEffect(() => {
-    if (isSuperUser && map) {
+    if (isSuperUser) {
       getLayer().name = LayerProperties.VESSEL_BEACON_MALFUNCTION.code
-      map.getLayers().push(getLayer())
+      monitorfishMap.getLayers().push(getLayer())
     }
 
     return () => {
-      if (map) {
-        map.removeLayer(getLayer())
-      }
+      monitorfishMap.removeLayer(getLayer())
     }
-  }, [isSuperUser, map, getLayer])
+  }, [isSuperUser, getLayer])
 
   useEffect(() => {
     if (isSuperUser && vessels?.length) {