Merge MainApp feature slice into MissionForm component one

frontend/src/domain/use_cases/map/clickOnMapFeature.ts

@@ -1,6 +1,6 @@
 import GeoJSON from 'ol/format/GeoJSON'
 
-import { mainMapActions } from '../../../features/MainMap/slice'
+import { missionFormActions } from '../../../features/Mission/components/MissionForm/slice'
 import { showRegulatoryZoneMetadata } from '../../../features/Regulation/useCases/showRegulatoryZoneMetadata'
 import { stationActions } from '../../../features/Station/slice'
 import { FeatureWithCodeAndEntityId } from '../../../libs/FeatureWithCodeAndEntityId'
@@ -45,7 +45,7 @@ export const clickOnMapFeature =
       const featureGeoJSON = geoJSONParser.writeFeatureObject(mapClick.feature as Feature<Geometry>, {
         featureProjection: OPENLAYERS_PROJECTION
       })
-      dispatch(mainMapActions.setSelectedMissionGeoJSON(featureGeoJSON))
+      dispatch(missionFormActions.setSelectedMissionGeoJSON(featureGeoJSON))
 
       return
     }
@@ -57,7 +57,7 @@ export const clickOnMapFeature =
       const featureGeoJSON = geoJSONParser.writeFeatureObject(mapClick.feature as Feature<Geometry>, {
         featureProjection: OPENLAYERS_PROJECTION
       })
-      dispatch(mainMapActions.setSelectedMissionActionGeoJSON(featureGeoJSON))
+      dispatch(missionFormActions.setSelectedMissionActionGeoJSON(featureGeoJSON))
 
       return
     }

frontend/src/features/Mission/components/MissionForm/slice.ts

@@ -4,6 +4,7 @@ import { isEqual } from 'lodash/fp'
 import type { MissionMainFormValues } from './types'
 import type { MissionWithActionsDraft } from '../../types'
 import type { PayloadAction } from '@reduxjs/toolkit'
+import type { GeoJSON } from 'domain/types/GeoJSON'
 
 export interface MissionFormState {
   // TODO For side window closure prevention and cross-form validation we don't need the entire forms values.
@@ -20,14 +21,18 @@ export interface MissionFormState {
   isDraftDirty: boolean
   isListeningToEvents: boolean
   mustResetOtherControlsCheckboxes: boolean | undefined
+  selectedMissionActionGeoJSON: GeoJSON.GeoJson | undefined
+  selectedMissionGeoJSON: GeoJSON.GeoJson | undefined
 }
 const INITIAL_STATE: MissionFormState = {
   draft: undefined,
   geometryComputedFromControls: undefined,
   isClosing: false,
   isDraftDirty: false,
   isListeningToEvents: true,
-  mustResetOtherControlsCheckboxes: undefined
+  mustResetOtherControlsCheckboxes: undefined,
+  selectedMissionActionGeoJSON: undefined,
+  selectedMissionGeoJSON: undefined
 }
 
 const missionFormSlice = createSlice({
@@ -94,12 +99,41 @@ const missionFormSlice = createSlice({
       state.isListeningToEvents = action.payload
     },
 
+    /**
+     * Set selected mission action GeoJSON.
+     */
+    setSelectedMissionActionGeoJSON(state, action: PayloadAction<GeoJSON.GeoJson>) {
+      state.selectedMissionActionGeoJSON = action.payload
+    },
+
+    /**
+     * Set selected mission GeoJSON.
+     */
+    setSelectedMissionGeoJSON(state, action: PayloadAction<GeoJSON.GeoJson>) {
+      state.selectedMissionGeoJSON = action.payload
+    },
+
     /**
      * Unset geometry computed from controls to permit another modification of the mission's geometry
      * after adding another control to a mission.
      */
     unsetGeometryComputedFromControls(state) {
       state.geometryComputedFromControls = undefined
+    },
+
+    /**
+     * Unset selected mission action GeoJSON.
+     */
+    unsetSelectedMissionActionGeoJSON(state) {
+      state.selectedMissionActionGeoJSON = undefined
+    },
+
+    /**
+     * Unset selected mission ID.
+     */
+    unsetSelectedMissionGeoJSON(state) {
+      state.selectedMissionGeoJSON = undefined
+      state.selectedMissionActionGeoJSON = undefined
     }
   }
 })

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

@@ -18,7 +18,7 @@ import type { MutableRefObject } from 'react'
 
 export function UnmemoizedSelectedMissionActionsLayer() {
   const { missions } = useGetFilteredMissionsQuery()
-  const selectedMissionGeoJSON = useMainAppSelector(store => store.mainMap.selectedMissionGeoJSON)
+  const selectedMissionGeoJSON = useMainAppSelector(store => store.missionForm.selectedMissionGeoJSON)
   const missionId = useMainAppSelector(store => store.sideWindow.selectedPath.id)
   const draft = useMainAppSelector(store => store.missionForm.draft)
 

frontend/src/features/map/layers/Mission/SelectedMissionLayer.tsx

@@ -17,7 +17,7 @@ import type { VectorLayerWithName } from '../../../../domain/types/layer'
 
 export function UnmemoizedSelectedMissionLayer() {
   const { missions } = useGetFilteredMissionsQuery()
-  const selectedMissionGeoJSON = useMainAppSelector(store => store.mainMap.selectedMissionGeoJSON)
+  const selectedMissionGeoJSON = useMainAppSelector(store => store.missionForm.selectedMissionGeoJSON)
   const missionId = useMainAppSelector(store => store.sideWindow.selectedPath.id)
   const draft = useMainAppSelector(store => store.missionForm.draft)
 
@@ -97,7 +97,7 @@ export function UnmemoizedSelectedMissionLayer() {
     }
 
     // When creating a new mission, dummy NEW_MISSION_ID is used
-    const missionFeature = getMissionFeatureZone({ ...draft.mainFormValues, id: missionId || NEW_MISSION_ID })
+    const missionFeature = getMissionFeatureZone({ ...draft.mainFormValues, id: missionId ?? NEW_MISSION_ID })
     getVectorSource().addFeature(missionFeature)
   }, [getVectorSource, draft?.mainFormValues, missionId])
 

frontend/src/features/map/overlays/ControlOverlay/ControlDetails.tsx

@@ -7,17 +7,17 @@ import { margins } from './constants'
 import { useMainAppDispatch } from '../../../../hooks/useMainAppDispatch'
 import { pluralize } from '../../../../utils/pluralize'
 import { GreenCircle, RedCircle } from '../../../commonStyles/Circle.style'
-import { mainMapActions } from '../../../MainMap/slice'
+import { missionFormActions } from '../../../Mission/components/MissionForm/slice'
 import { Flag } from '../../../VesselList/tableCells'
 import { OverlayPosition } from '../Overlay'
 
 import type { Mission } from '../../../../domain/entities/mission/types'
 
-type ControlDetailsProps = {
+type ControlDetailsProps = Readonly<{
   control: Mission.MissionActionFeatureProperties
   isSelected: boolean
   overlayPosition: OverlayPosition
-}
+}>
 export function ControlDetails({ control, isSelected, overlayPosition }: ControlDetailsProps) {
   const dispatch = useMainAppDispatch()
 
@@ -67,12 +67,12 @@ export function ControlDetails({ control, isSelected, overlayPosition }: Control
             data-cy="mission-action-overlay-close"
             Icon={Icon.Close}
             iconSize={14}
-            onClick={() => dispatch(mainMapActions.unsetSelectedMissionActionGeoJSON())}
+            onClick={() => dispatch(missionFormActions.unsetSelectedMissionActionGeoJSON())}
           />
         )}
         <ZoneText>
           <Title>
-            Contrôle du navire {control.vesselName || 'NOM INCONNU'}
+            Contrôle du navire {control.vesselName ?? 'NOM INCONNU'}
             {control.flagState && (
               <Flag
                 rel="preload"

frontend/src/features/map/overlays/ControlOverlay/index.tsx

@@ -19,7 +19,7 @@ const overlayHeight = 130
 const INITIAL_OFFSET_VALUE = [0, 0]
 
 export function ControlOverlay({ feature, isSelected = false }) {
-  const selectedMissionActionGeoJSON = useMainAppSelector(store => store.mainMap.selectedMissionActionGeoJSON)
+  const selectedMissionActionGeoJSON = useMainAppSelector(store => store.missionForm.selectedMissionActionGeoJSON)
   const currentOffsetRef = useRef(INITIAL_OFFSET_VALUE)
   const [controlProperties, setControlProperties] = useState<Mission.MissionActionFeatureProperties | undefined>(
     undefined

frontend/src/features/map/overlays/MissionOverlay/MissionDetails.tsx

@@ -8,17 +8,17 @@ import { getMissionSourceTagText } from '../../../../domain/entities/mission'
 import { Mission } from '../../../../domain/entities/mission/types'
 import { useMainAppDispatch } from '../../../../hooks/useMainAppDispatch'
 import { pluralize } from '../../../../utils/pluralize'
-import { mainMapActions } from '../../../MainMap/slice'
+import { missionFormActions } from '../../../Mission/components/MissionForm/slice'
 import { editMission } from '../../../Mission/useCases/editMission'
 import { OverlayPosition } from '../Overlay'
 
 import type { LegacyControlUnit } from '../../../../domain/types/legacyControlUnit'
 
-type MissionDetailsProps = {
+type MissionDetailsProps = Readonly<{
   isSelected: boolean
   mission: Mission.MissionPointFeatureProperties
   overlayPosition: OverlayPosition
-}
+}>
 export function MissionDetails({ isSelected, mission, overlayPosition }: MissionDetailsProps) {
   const dispatch = useMainAppDispatch()
 
@@ -35,7 +35,7 @@ export function MissionDetails({ isSelected, mission, overlayPosition }: Mission
             data-cy="mission-overlay-close"
             Icon={Icon.Close}
             iconSize={14}
-            onClick={() => dispatch(mainMapActions.unsetSelectedMissionGeoJSON())}
+            onClick={() => dispatch(missionFormActions.unsetSelectedMissionGeoJSON())}
           />
         )}
         <ZoneText>

frontend/src/features/map/overlays/MissionOverlay/index.tsx

@@ -19,7 +19,7 @@ const overlayHeight = 200
 const INITIAL_OFFSET_VALUE = [0, 0]
 
 export function MissionOverlay({ feature, isSelected = false }) {
-  const selectedMissionGeoJSON = useMainAppSelector(store => store.mainMap.selectedMissionGeoJSON)
+  const selectedMissionGeoJSON = useMainAppSelector(store => store.missionForm.selectedMissionGeoJSON)
   const currentOffsetRef = useRef(INITIAL_OFFSET_VALUE)
   const [missionProperties, setMissionProperties] = useState<Mission.MissionPointFeatureProperties | undefined>(
     undefined

frontend/src/features/map/overlays/SelectedControlOverlay/index.tsx

@@ -6,7 +6,7 @@ import { useMainAppSelector } from '../../../../hooks/useMainAppSelector'
 import { ControlOverlay } from '../ControlOverlay'
 
 export function SelectedControlOverlay() {
-  const selectedControlGeoJSON = useMainAppSelector(store => store.mainMap.selectedMissionActionGeoJSON)
+  const selectedControlGeoJSON = useMainAppSelector(store => store.missionForm.selectedMissionActionGeoJSON)
   const selectedControl = useMemo(() => {
     if (!selectedControlGeoJSON) {
       return undefined

frontend/src/features/map/overlays/SelectedMissionOverlay/index.tsx

@@ -6,7 +6,7 @@ import { useMainAppSelector } from '../../../../hooks/useMainAppSelector'
 import { MissionOverlay } from '../MissionOverlay'
 
 export function SelectedMissionOverlay() {
-  const selectedMissionGeoJSON = useMainAppSelector(store => store.mainMap.selectedMissionGeoJSON)
+  const selectedMissionGeoJSON = useMainAppSelector(store => store.missionForm.selectedMissionGeoJSON)
   const isMissionsLayerDisplayed = useMainAppSelector(store => store.displayedComponent.isMissionsLayerDisplayed)
 
   const selectedMission = useMemo(() => {

frontend/src/store/reducers.ts

@@ -25,7 +25,6 @@ import { controlUnitDialogReducer } from '../features/ControlUnit/components/Con
 import { controlUnitListDialogPersistedReducer } from '../features/ControlUnit/components/ControlUnitListDialog/slice'
 import { customZoneReducer, type CustomZoneState } from '../features/CustomZone/slice'
 import { logbookReducer } from '../features/Logbook/slice'
-import { mainMapReducer } from '../features/MainMap/slice'
 import { missionFormReducer } from '../features/Mission/components/MissionForm/slice'
 import { missionListReducer, type MissionListState } from '../features/Mission/components/MissionList/slice'
 import { regulatoryLayerSearchReducer } from '../features/Regulation/components/RegulationSearch/slice'
@@ -83,7 +82,6 @@ export const mainReducer = {
   infraction: infractionReducer,
   interestPoint: interestPointReducer,
   layer: layer.homepage.reducer,
-  mainMap: mainMapReducer,
   measurement: measurementReducer,
   missionForm: missionFormReducer,
   missionList: persistReducerTyped(