fix: Synchronize field update with save

frontend/src/domain/use_cases/missions/switchTab.ts

@@ -1,4 +1,3 @@
-import { attachReportingToMissionSliceActions } from '../../../features/missions/MissionForm/AttachReporting/slice'
 import { missionFormsActions } from '../../../features/missions/MissionForm/slice'
 import { missionActions } from '../../../features/missions/slice'
 import { sideWindowActions } from '../../../features/SideWindow/slice'
@@ -9,9 +8,7 @@ import type { HomeAppThunk } from '@store/index'
 
 export const switchTab =
   (path: string): HomeAppThunk =>
-  async (dispatch, getState) => {
-    const { missions } = getState().missionForms
-
+  async dispatch => {
     const routeParams = getMissionPageRoute(path)
     const id = getIdTyped(routeParams?.params.id)
 
@@ -28,10 +25,4 @@ export const switchTab =
     dispatch(missionActions.setSelectedMissionIdOnMap(id))
 
     dispatch(sideWindowActions.setCurrentPath(path))
-
-    // since we are switching to another mission, we need to update the attached reportings store
-    // because it's the form who listen to this store
-    dispatch(
-      attachReportingToMissionSliceActions.setAttachedReportings(missions[id]?.missionForm?.attachedReportings || [])
-    )
   }

frontend/src/features/missions/MissionForm/MissionForm.tsx

@@ -1,12 +1,12 @@
 import {
   Banner,
-  type ControlUnit,
-  customDayjs,
   FormikEffect,
   Icon,
   Level,
   THEME,
-  usePrevious
+  customDayjs,
+  usePrevious,
+  type ControlUnit
 } from '@mtes-mct/monitor-ui'
 import { useMissionEventContext } from 'context/mission/useMissionEventContext'
 import { useFormikContext } from 'formik'
@@ -23,7 +23,6 @@ import { ExternalActionsModal } from './ExternalActionsModal'
 import { FormikSyncMissionFields } from './FormikSyncMissionFields'
 import { GeneralInformationsForm } from './GeneralInformationsForm'
 import { useMissionAndActionsCompletion } from './hooks/useMissionAndActionsCompletion'
-import { useSyncFormValuesWithRedux } from './hooks/useSyncFormValuesWithRedux'
 import { useUpdateOtherControlTypes } from './hooks/useUpdateOtherControlTypes'
 import { useUpdateSurveillance } from './hooks/useUpdateSurveillance'
 import { MissionFormBottomBar } from './MissionFormBottomBar'
@@ -32,8 +31,8 @@ import { getIsMissionFormValid, isMissionAutoSaveEnabled, shouldSaveMission } fr
 import { missionsAPI } from '../../../api/missionsAPI'
 import {
   FrontCompletionStatus,
-  type Mission,
   MissionSourceEnum,
+  type Mission,
   type NewMission
 } from '../../../domain/entities/missions'
 import { sideWindowPaths } from '../../../domain/entities/sideWindow'
@@ -99,7 +98,6 @@ export function MissionForm({
 
   const isFormDirty = useMemo(() => selectedMissions[id]?.isFormDirty ?? false, [id, selectedMissions])
 
-  useSyncFormValuesWithRedux(isAutoSaveEnabled)
   const { missionCompletionFrontStatus } = useMissionAndActionsCompletion()
   useUpdateSurveillance()
   useUpdateOtherControlTypes()
@@ -179,6 +177,14 @@ export function MissionForm({
   }
 
   const validateBeforeOnChange = useDebouncedCallback(async (nextValues, forceSave) => {
+    dispatch(
+      missionFormsActions.setMission({
+        engagedControlUnit,
+        isFormDirty,
+        missionForm: nextValues
+      })
+    )
+
     if (!isAutoSaveEnabled || engagedControlUnit || !isMissionFormValid) {
       return
     }
@@ -188,7 +194,7 @@ export function MissionForm({
     }
 
     dispatch(saveMission(nextValues, false, false))
-  }, 300)
+  }, 150)
 
   useEffect(() => {
     if (isNewMission && !engagedControlUnit && previousEngagedControlUnit !== engagedControlUnit) {

frontend/src/features/missions/MissionForm/index.tsx

@@ -1,9 +1,11 @@
+import { useAppDispatch } from '@hooks/useAppDispatch'
 import { Banner, Icon, Level, THEME } from '@mtes-mct/monitor-ui'
 import { Form, Formik } from 'formik'
 import { noop } from 'lodash'
 import { useMemo } from 'react'
 import styled from 'styled-components'
 
+import { attachReportingToMissionSliceActions } from './AttachReporting/slice'
 import { MissionForm } from './MissionForm'
 import { MissionSchema } from './Schemas'
 import { useAppSelector } from '../../../hooks/useAppSelector'
@@ -13,13 +15,18 @@ import { missionFactory } from '../Missions.helpers'
 import type { Mission as MissionType, NewMission } from '../../../domain/entities/missions'
 
 export function MissionFormWrapper() {
+  const dispatch = useAppDispatch()
   const activeMissionId = useAppSelector(state => state.missionForms.activeMissionId)
 
   const selectedMission = useAppSelector(state =>
     activeMissionId ? state.missionForms.missions[activeMissionId] : undefined
   )
   const engagedControlUnit = selectedMission?.engagedControlUnit
 
+  dispatch(
+    attachReportingToMissionSliceActions.setAttachedReportings(selectedMission?.missionForm.attachedReportings ?? [])
+  )
+
   const activeAction = selectedMission?.activeAction
 
   const missionIsNewMission = useMemo(() => isNewMission(activeMissionId), [activeMissionId])