Refactor DisplayedError to handle class and use case outside Redux

frontend/package.json

@@ -27,7 +27,6 @@
     "test:multi-windows:run": "IS_HEADLESS=true jest --config=./config/multi-windows/jest.config.js --detectOpenHandles",
     "test:lint": "eslint ./src",
     "test:lint:partial": "eslint --config=./.eslintrc.partial.js ./src ./cypress ./puppeteer",
-    "test:lint:partial:bis": "eslint --config=./.eslintrc.partial.js ./src/features/Mission",
     "test:lint:partial:fix": "npm run test:lint:partial -- --fix",
     "test:type": "tsc",
     "test:unit": "jest --config=./config/jest.config.js --detectOpenHandles",

frontend/src/domain/shared_slices/DisplayedError.ts

@@ -1,13 +1,17 @@
+import { UseCaseStore } from '@libs/UseCaseStore'
 import { createSlice } from '@reduxjs/toolkit'
+import { ensure } from '@utils/ensure'
 
-import { DisplayedError } from '../../libs/DisplayedError'
-
+import type { DisplayedError } from '@libs/DisplayedError'
+import type { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 import type { PayloadAction } from '@reduxjs/toolkit'
 
-export type DisplayedErrorState = {
-  missionFormError: DisplayedError | undefined
-  vesselSidebarError: DisplayedError | undefined
+type DisplayedErrorStateValue = {
+  hasRetryableUseCase: boolean
+  message: string
 }
+
+export type DisplayedErrorState = Record<DisplayedErrorKey, DisplayedErrorStateValue | undefined>
 export const INITIAL_STATE: DisplayedErrorState = {
   missionFormError: undefined,
   vesselSidebarError: undefined
@@ -17,16 +21,31 @@ const displayedErrorSlice = createSlice({
   initialState: INITIAL_STATE,
   name: 'displayedError',
   reducers: {
-    set(state, action: PayloadAction<Partial<DisplayedErrorState>>) {
+    set(
+      state,
+      action: PayloadAction<
+        Partial<{
+          [key in DisplayedErrorKey]: DisplayedError
+        }>
+      >
+    ) {
       Object.keys(action.payload).forEach(key => {
-        state[key] = action.payload[key]
+        const typedKey = key as DisplayedErrorKey
+        const displayedError = ensure(action.payload[typedKey], `action.payload[${typedKey}]`)
+
+        state[typedKey] = {
+          hasRetryableUseCase: displayedError.hasRetryableUseCase,
+          message: displayedError.message
+        }
       })
     },
 
     unset(state, action: PayloadAction<keyof DisplayedErrorState | Array<keyof DisplayedErrorState>>) {
       const keys = Array.isArray(action.payload) ? action.payload : [action.payload]
 
       keys.forEach(key => {
+        UseCaseStore.unset(key)
+
         state[key] = undefined
       })
     }

frontend/src/domain/use_cases/beaconMalfunction/getVesselBeaconMalfunctions.ts

@@ -1,3 +1,5 @@
+import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
+
 import openBeaconMalfunction from './openBeaconMalfunction'
 import { getVesselBeaconsMalfunctionsFromAPI } from '../../../api/beaconMalfunction'
 import { getOnlyVesselIdentityProperties } from '../../entities/vessel/vessel'
@@ -24,7 +26,7 @@ export const getVesselBeaconMalfunctions = (isFromUserAction: boolean) => async
 
   if (isFromUserAction) {
     dispatch(loadVesselBeaconMalfunctions())
-    dispatch(displayedErrorActions.unset('vesselSidebarError'))
+    dispatch(displayedErrorActions.unset(DisplayedErrorKey.VESSEL_SIDEBAR_ERROR))
   }
 
   try {
@@ -50,7 +52,7 @@ export const getVesselBeaconMalfunctions = (isFromUserAction: boolean) => async
         error,
         () => getVesselBeaconMalfunctions(isFromUserAction),
         isFromUserAction,
-        'vesselSidebarError'
+        DisplayedErrorKey.VESSEL_SIDEBAR_ERROR
       )
     )
     dispatch(resetVesselBeaconMalfunctionsResumeAndHistory())

frontend/src/domain/use_cases/error/displayOrLogError.ts

@@ -36,6 +36,6 @@ export const displayOrLogError =
       return
     }
 
-    const displayedError = new DisplayedError(errorMessage, retryableUseCase)
+    const displayedError = new DisplayedError(errorBoundaryKey, errorMessage, retryableUseCase)
     dispatch(displayedErrorActions.set({ [errorBoundaryKey]: displayedError }))
   }

frontend/src/domain/use_cases/mission/getVesselControls.ts

@@ -1,3 +1,5 @@
+import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
+
 import { getVesselControlsFromAPI } from '../../../api/missionAction'
 import NoControlsFoundError from '../../../errors/NoControlsFoundError'
 import {
@@ -28,7 +30,7 @@ export const getVesselControls = (isFromUserAction: boolean) => async (dispatch,
 
   const isSameVesselAsCurrentlyShowed = getIsSameVesselAsCurrentlyShowed(selectedVessel.vesselId, currentControlSummary)
   if (isFromUserAction) {
-    dispatch(displayedErrorActions.unset('vesselSidebarError'))
+    dispatch(displayedErrorActions.unset(DisplayedErrorKey.VESSEL_SIDEBAR_ERROR))
     dispatch(loadControls())
   }
 
@@ -44,7 +46,12 @@ export const getVesselControls = (isFromUserAction: boolean) => async (dispatch,
     dispatch(removeError())
   } catch (error) {
     dispatch(
-      displayOrLogError(error, () => getVesselControls(isFromUserAction), isFromUserAction, 'vesselSidebarError')
+      displayOrLogError(
+        error,
+        () => getVesselControls(isFromUserAction),
+        isFromUserAction,
+        DisplayedErrorKey.VESSEL_SIDEBAR_ERROR
+      )
     )
     dispatch(resetLoadControls())
   }

frontend/src/domain/use_cases/vessel/getVesselReportings.ts

@@ -1,3 +1,5 @@
+import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
+
 import { getVesselReportingsFromAPI } from '../../../api/vessel'
 import {
   loadReporting,
@@ -17,7 +19,7 @@ export const getVesselReportings = (isFromUserAction: boolean) => async (dispatc
   }
 
   if (isFromUserAction) {
-    dispatch(displayedErrorActions.unset('vesselSidebarError'))
+    dispatch(displayedErrorActions.unset(DisplayedErrorKey.VESSEL_SIDEBAR_ERROR))
     dispatch(loadReporting())
   }
 
@@ -40,7 +42,7 @@ export const getVesselReportings = (isFromUserAction: boolean) => async (dispatc
         error as Error,
         () => getVesselReportings(isFromUserAction),
         isFromUserAction,
-        'vesselSidebarError'
+        DisplayedErrorKey.VESSEL_SIDEBAR_ERROR
       )
     )
     dispatch(resetCurrentAndArchivedReportingsOfSelectedVessel())

frontend/src/domain/use_cases/vessel/showVessel.ts

@@ -1,3 +1,5 @@
+import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
+
 import { getVesselFromAPI } from '../../../api/vessel'
 import { logbookActions } from '../../../features/Logbook/slice'
 import { addVesselIdentifierToVesselIdentity } from '../../../features/VesselSearch/utils'
@@ -63,7 +65,7 @@ export const showVessel =
         vesselIdentifier: addVesselIdentifierToVesselIdentity(vesselIdentity).vesselIdentifier
       }
 
-      dispatch(displayedErrorActions.unset('vesselSidebarError'))
+      dispatch(displayedErrorActions.unset(DisplayedErrorKey.VESSEL_SIDEBAR_ERROR))
       dispatch(
         setSelectedVessel({
           positions: vesselAndPositions.positions,
@@ -76,7 +78,7 @@ export const showVessel =
           error as Error,
           () => showVessel(vesselIdentity, isFromSearch, isFromUserAction),
           isFromUserAction,
-          'vesselSidebarError'
+          DisplayedErrorKey.VESSEL_SIDEBAR_ERROR
         )
       )
       dispatch(resetLoadingVessel())

frontend/src/features/Logbook/useCases/getVesselLogbook.ts

@@ -1,3 +1,4 @@
+import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 import { customDayjs } from '@mtes-mct/monitor-ui'
 
 import { vesselsAreEquals } from '../../../domain/entities/vessel/vessel'
@@ -35,14 +36,14 @@ export const getVesselLogbook =
 
     const updateVesselTrack = navigateTo && isFromUserAction
     const isSameVesselAsCurrentlyShowed = vesselsAreEquals(vesselIdentity, currentSelectedVesselIdentity)
-    const nextNavigateTo = navigateTo || NavigateTo.LAST
+    const nextNavigateTo = navigateTo ?? NavigateTo.LAST
 
     if (nextNavigateTo === NavigateTo.NEXT && isLastVoyage) {
       return
     }
 
     if (isFromUserAction) {
-      dispatch(displayedErrorActions.unset('vesselSidebarError'))
+      dispatch(displayedErrorActions.unset(DisplayedErrorKey.VESSEL_SIDEBAR_ERROR))
       dispatch(logbookActions.setIsLoading())
     }
 
@@ -51,7 +52,7 @@ export const getVesselLogbook =
         isInLightMode,
         vesselIdentity,
         nextNavigateTo,
-        nextTripNumber || tripNumber
+        nextTripNumber ?? tripNumber
       )
       if (!voyage) {
         dispatch(logbookActions.init(vesselIdentity))
@@ -94,7 +95,7 @@ export const getVesselLogbook =
           error as Error,
           () => getVesselLogbook(isInLightMode)(vesselIdentity, navigateTo, isFromUserAction, nextTripNumber),
           isFromUserAction,
-          'vesselSidebarError'
+          DisplayedErrorKey.VESSEL_SIDEBAR_ERROR
         )
       )
       dispatch(logbookActions.resetIsLoading())

frontend/src/features/Mission/components/MissionForm/Loader.tsx

@@ -1,10 +1,10 @@
 import { openSideWindowPath } from '@features/SideWindow/useCases/openSideWindowPath'
 import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
+import { DisplayedError } from '@libs/DisplayedError'
+import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 import { Accent, Button, Icon } from '@mtes-mct/monitor-ui'
-import { assert } from '@utils/assert'
 import { SideWindowMenuKey } from 'domain/entities/sideWindow/constants'
-import { retry } from 'domain/use_cases/error/retry'
 import { useCallback } from 'react'
 import styled from 'styled-components'
 import { LoadingSpinnerWall } from 'ui/LoadingSpinnerWall'
@@ -22,17 +22,15 @@ export function Loader() {
   }, [dispatch])
 
   const handleRetry = () => {
-    assert(missionFormError, 'missionFormError')
-
-    dispatch(retry('missionFormError', missionFormError.useCase))
+    DisplayedError.retryUseCase(dispatch, DisplayedErrorKey.MISSION_FORM_ERROR)
   }
 
   if (missionFormError) {
     return (
       <ErrorFallback data-cy="mission-form-error">
         🔌 {missionFormError.message}
         <br />
-        {missionFormError.useCase && (
+        {missionFormError.hasRetryableUseCase && (
           <RetryButton accent={Accent.PRIMARY} onClick={handleRetry}>
             Réessayer
           </RetryButton>

frontend/src/features/Mission/useCases/addMission.ts

@@ -1,3 +1,4 @@
+import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 import { SideWindowMenuKey, SideWindowStatus } from 'domain/entities/sideWindow/constants'
 import { displayedErrorActions } from 'domain/shared_slices/DisplayedError'
 
@@ -36,6 +37,6 @@ const addMissionWithoutConfirmation =
   dispatch => {
     const newDraft = getMissionDraftFromPartialMainFormValues(initialMainFormValues)
 
-    dispatch(displayedErrorActions.unset('missionFormError'))
+    dispatch(displayedErrorActions.unset(DisplayedErrorKey.MISSION_FORM_ERROR))
     dispatch(missionFormActions.initializeDraft(newDraft))
   }

frontend/src/features/Mission/useCases/editMission.ts

@@ -1,3 +1,4 @@
+import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 import { SideWindowMenuKey, SideWindowStatus } from 'domain/entities/sideWindow/constants'
 import { displayedErrorActions } from 'domain/shared_slices/DisplayedError'
 import { sideWindowActions } from 'domain/shared_slices/SideWindow'
@@ -36,7 +37,7 @@ export const editMission =
 const editMissionWithoutConfirmation =
   (id: number): MainAppThunk =>
   async dispatch => {
-    dispatch(displayedErrorActions.unset('missionFormError'))
+    dispatch(displayedErrorActions.unset(DisplayedErrorKey.MISSION_FORM_ERROR))
 
     try {
       const missionWithActions = await dispatch(getMissionWithActions(id))
@@ -47,7 +48,9 @@ const editMissionWithoutConfirmation =
       dispatch(sideWindowActions.setSelectedPathIsLoading(false))
     } catch (err) {
       if (err instanceof FrontendApiError) {
-        dispatch(displayOrLogError(err, () => editMissionWithoutConfirmation(id), true, 'missionFormError'))
+        dispatch(
+          displayOrLogError(err, () => editMissionWithoutConfirmation(id), true, DisplayedErrorKey.MISSION_FORM_ERROR)
+        )
 
         return
       }

frontend/src/features/VesselSidebar/Body.tsx

@@ -1,3 +1,5 @@
+import { DisplayedError } from '@libs/DisplayedError'
+import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 import { Accent, Button } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
@@ -8,7 +10,6 @@ import { VesselSummary } from './Summary'
 import { AlertWarning } from './warnings/AlertWarning'
 import { BeaconMalfunctionWarning } from './warnings/BeaconMalfunctionWarning'
 import { VesselSidebarTab } from '../../domain/entities/vessel/vessel'
-import { retry } from '../../domain/use_cases/error/retry'
 import { useIsSuperUser } from '../../hooks/authorization/useIsSuperUser'
 import { useMainAppDispatch } from '../../hooks/useMainAppDispatch'
 import { useMainAppSelector } from '../../hooks/useMainAppSelector'
@@ -23,16 +24,17 @@ export function Body() {
   const selectedVessel = useMainAppSelector(state => state.vessel.selectedVessel)
   const vesselSidebarTab = useMainAppSelector(state => state.vessel.vesselSidebarTab)
 
+  const handleRetry = () => {
+    DisplayedError.retryUseCase(dispatch, DisplayedErrorKey.VESSEL_SIDEBAR_ERROR)
+  }
+
   if (vesselSidebarError) {
     return (
       <ErrorFallback data-cy="vessel-sidebar-error">
         🔌 {vesselSidebarError.message}
         <br />
-        {vesselSidebarError.useCase && (
-          <RetryButton
-            accent={Accent.PRIMARY}
-            onClick={() => dispatch(retry('vesselSidebarError', vesselSidebarError.useCase))}
-          >
+        {vesselSidebarError.hasRetryableUseCase && (
+          <RetryButton accent={Accent.PRIMARY} onClick={handleRetry}>
             Réessayer
           </RetryButton>
         )}

frontend/src/features/VesselSidebar/Tabs.tsx

@@ -1,3 +1,4 @@
+import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 import { useEffect } from 'react'
 import styled from 'styled-components'
 
@@ -30,7 +31,7 @@ export function Tabs() {
   }, [dispatch, isSuperUser, vesselSidebarTab])
 
   function showTab(tab: VesselSidebarTab) {
-    dispatch(displayedErrorActions.unset('vesselSidebarError'))
+    dispatch(displayedErrorActions.unset(DisplayedErrorKey.VESSEL_SIDEBAR_ERROR))
     dispatch(showVesselSidebarTab(tab))
   }
 

frontend/src/libs/DisplayedError/constants.ts

@@ -0,0 +1,4 @@
+export enum DisplayedErrorKey {
+  MISSION_FORM_ERROR = 'missionFormError',
+  VESSEL_SIDEBAR_ERROR = 'vesselSidebarError'
+}