Fix redux serialize issues and few warnings

frontend/src/api/missionAction.ts

@@ -53,10 +53,10 @@ export const MISSION_ACTIONS_ERROR_MESSAGE = "Nous n'avons pas pu récupérer le
  * @throws {@link ApiError}
  *
  */
-export async function getVesselControlsFromAPI(vesselId: number, fromDate: Date) {
+export async function getVesselControlsFromAPI(vesselId: number, fromDate: string) {
   try {
     return await monitorfishApiKy
-      .get(`/bff/v1/mission_actions/controls?vesselId=${vesselId}&afterDateTime=${fromDate.toISOString()}`)
+      .get(`/bff/v1/mission_actions/controls?vesselId=${vesselId}&afterDateTime=${fromDate}`)
       .json<MissionAction.MissionControlsSummary>()
   } catch (err) {
     throw new ApiError(MISSION_ACTIONS_ERROR_MESSAGE, err)

frontend/src/api/vessel.ts

@@ -4,7 +4,6 @@ import { ApiError } from '../libs/ApiError'
 
 import type { TrackRequest, VesselAndPositions, VesselIdentity, VesselPosition } from '../domain/entities/vessel/types'
 import type { VesselReportings } from '@features/Reporting/types'
-import type { Dayjs } from 'dayjs'
 
 const VESSEL_POSITIONS_ERROR_MESSAGE = "Nous n'avons pas pu récupérer les informations du navire"
 const VESSEL_SEARCH_ERROR_MESSAGE = "Nous n'avons pas pu récupérer les navires dans notre base"
@@ -91,14 +90,13 @@ async function searchVesselsFromAPI(searched: string) {
  *
  * @throws {@link ApiError}
  */
-async function getVesselReportingsFromAPI(identity: VesselIdentity, fromDate: Dayjs) {
+async function getVesselReportingsFromAPI(identity: VesselIdentity, fromDate: string) {
   const { externalReferenceNumber, internalReferenceNumber, ircs, vesselId, vesselIdentifier } =
     getVesselIdentityAsEmptyStringWhenNull(identity)
-
   try {
     return await monitorfishApiKy
       .get(
-        `/bff/v1/vessels/reporting?vesselId=${vesselId}&internalReferenceNumber=${internalReferenceNumber}&externalReferenceNumber=${externalReferenceNumber}&IRCS=${ircs}&vesselIdentifier=${vesselIdentifier}&fromDate=${fromDate.toISOString()}`
+        `/bff/v1/vessels/reporting?vesselId=${vesselId}&internalReferenceNumber=${internalReferenceNumber}&externalReferenceNumber=${externalReferenceNumber}&IRCS=${ircs}&vesselIdentifier=${vesselIdentifier}&fromDate=${fromDate}`
       )
       .json<VesselReportings>()
   } catch (err) {

frontend/src/domain/entities/controls.ts

@@ -2,7 +2,6 @@ import { MissionAction } from '@features/Mission/missionAction.types'
 import { customDayjs } from '@mtes-mct/monitor-ui'
 
 import type { MissionActionFormValues } from '@features/Mission/components/MissionForm/types'
-import type { Dayjs } from 'dayjs'
 
 import InfractionType = MissionAction.InfractionType
 
@@ -43,12 +42,12 @@ export const getLastControls = (yearsToControls: {
  * Get mission actions for each years : Years are keys and actions are values
  */
 export const getYearsToActions = (
-  controlsFromDate: Dayjs,
+  controlsFromDate: string,
   controls: MissionAction.MissionAction[]
 ): Record<string, MissionAction.MissionAction[]> => {
   const nextYearsToControls = {}
 
-  let fromYear = controlsFromDate.year()
+  let fromYear = customDayjs(controlsFromDate).year()
   const toYear = customDayjs().utc().year()
   while (fromYear <= toYear) {
     nextYearsToControls[fromYear] = []

frontend/src/domain/shared_slices/Control.ts

@@ -3,16 +3,15 @@ import { createSlice } from '@reduxjs/toolkit'
 
 import type { MissionAction } from '@features/Mission/missionAction.types'
 import type { PayloadAction } from '@reduxjs/toolkit'
-import type { Dayjs } from 'dayjs'
 
 export type ControlState = {
-  controlsFromDate: Dayjs
+  controlsFromDate: string
   currentControlSummary: MissionAction.MissionControlsSummary | null
   loadingControls: boolean
   nextControlSummary: MissionAction.MissionControlsSummary | null
 }
 const INITIAL_STATE: ControlState = {
-  controlsFromDate: customDayjs().utc().subtract(5, 'year').startOf('year'),
+  controlsFromDate: customDayjs().utc().subtract(5, 'year').startOf('year').toISOString(),
   currentControlSummary: null,
   loadingControls: false,
   nextControlSummary: null
@@ -43,7 +42,7 @@ const controlSlice = createSlice({
     /**
      * Set the date since controls are fetched
      */
-    setControlFromDate(state, action: PayloadAction<Dayjs>) {
+    setControlFromDate(state, action: PayloadAction<string>) {
       state.controlsFromDate = action.payload
     },
 

frontend/src/features/MainWindow/components/MapButtons/FavoriteVessels/FavoriteVessel.tsx

@@ -48,7 +48,7 @@ export function FavoriteVessel({
   }
 
   return (
-    <Wrapper isLastItem={isLastItem}>
+    <Wrapper $isLastItem={isLastItem}>
       <CountryFlag countryCode={favorite.flagState} size={[20, 14]} />
       <VesselName data-cy="favorite-vessel-name" title={favorite.vesselName ?? undefined}>
         {favorite.vesselName}
@@ -126,12 +126,12 @@ const VesselName = styled.span`
 `
 
 const Wrapper = styled.li<{
-  isLastItem: boolean
+  $isLastItem: boolean
 }>`
   height: 36px;
   display: flex;
   align-items: center;
-  border-bottom: ${p => (p.isLastItem ? 'unset' : `1px solid ${p.theme.color.lightGray}`)};
+  border-bottom: ${p => (p.$isLastItem ? 'unset' : `1px solid ${p.theme.color.lightGray}`)};
   padding-left: 12px;
   padding-right: 10px;
 `

frontend/src/features/Reporting/components/VesselReportings/Archived/index.tsx

@@ -2,7 +2,7 @@ import { getVesselReportings } from '@features/Reporting/useCases/getVesselRepor
 import { Header, Zone } from '@features/Vessel/components/VesselSidebar/common_styles/common.style'
 import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
-import { Accent, Button, THEME } from '@mtes-mct/monitor-ui'
+import { Accent, Button, customDayjs, THEME } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
 import { YearReportings } from './YearReportings'
@@ -18,7 +18,7 @@ export function Archived() {
   const yearsToReportings = selectedVesselReportings?.archived
 
   const seeMore = () => {
-    const nextDate = archivedReportingsFromDate.subtract(1, 'year')
+    const nextDate = customDayjs(archivedReportingsFromDate).subtract(1, 'year').toISOString()
 
     dispatch(setArchivedReportingsFromDate(nextDate))
     dispatch(getVesselReportings(false))
@@ -44,7 +44,8 @@ export function Archived() {
         </List>
       ) : (
         <NoReporting>
-          Aucun signalement {!!archivedReportingsFromDate && `depuis ${archivedReportingsFromDate.get('year')}`}
+          Aucun signalement{' '}
+          {!!archivedReportingsFromDate && `depuis ${customDayjs(archivedReportingsFromDate).get('year')}`}
         </NoReporting>
       )}
       <SeeMoreBackground>

frontend/src/features/Reporting/components/VesselReportings/Summary/index.tsx

@@ -7,13 +7,11 @@ import styled from 'styled-components'
 export function Summary() {
   const archivedReportingsFromDate = useMainAppSelector(state => state.reporting.archivedReportingsFromDate)
   const summary = useMainAppSelector(state => state.reporting.selectedVesselReportings?.summary)
-  const yearsDepth = customDayjs().utc().get('year') - archivedReportingsFromDate.get('year') + 1
+  const yearsDepth = customDayjs().utc().get('year') - customDayjs(archivedReportingsFromDate).get('year') + 1
 
   return (
     <Zone data-cy="vessel-reporting-summary">
-      <Header>
-        Résumé des derniers signalements {archivedReportingsFromDate && <>({yearsDepth} dernières années)</>}
-      </Header>
+      <Header>Résumé des derniers signalements {yearsDepth && <>({yearsDepth} dernières années)</>}</Header>
       <Body>
         <Columns $isFirst>
           <IconColumn>

frontend/src/features/Reporting/slice.ts

@@ -9,10 +9,9 @@ import type {
   PendingAlertReporting
 } from '@features/Reporting/types'
 import type { PayloadAction } from '@reduxjs/toolkit'
-import type { Dayjs } from 'dayjs'
 
 export type ReportingState = {
-  archivedReportingsFromDate: Dayjs
+  archivedReportingsFromDate: string
   currentReportings: Array<InfractionSuspicionReporting | PendingAlertReporting>
   editedReporting: EditableReporting | undefined
   editedReportingInSideWindow: EditableReporting | undefined
@@ -21,7 +20,7 @@ export type ReportingState = {
   vesselIdentity: VesselIdentity | undefined
 }
 const INITIAL_STATE: ReportingState = {
-  archivedReportingsFromDate: customDayjs().utc().subtract(5, 'year').startOf('year'),
+  archivedReportingsFromDate: customDayjs().utc().subtract(5, 'year').startOf('year').toISOString(),
   currentReportings: [],
   editedReporting: undefined,
   editedReportingInSideWindow: undefined,
@@ -82,12 +81,8 @@ const reportingSlice = createSlice({
 
     /**
      * Set the date since archived reporting are fetched
-     * @function setArchivedReportingsFromDate
-     * @memberOf ReportingReducer
-     * @param {Object=} state
-     * @param {{payload: Date}} action - The "from" date
      */
-    setArchivedReportingsFromDate(state, action) {
+    setArchivedReportingsFromDate(state, action: PayloadAction<string>) {
       state.archivedReportingsFromDate = action.payload
     },
 

frontend/src/features/Reporting/useCases/getVesselReportings.ts

@@ -9,7 +9,7 @@ import { loadReporting, resetSelectedVesselReportings, setSelectedVesselReportin
 export const getVesselReportings = (isLoaderShowed: boolean) => async (dispatch, getState) => {
   const { selectedVesselIdentity } = getState().vessel
   const { archivedReportingsFromDate, isLoadingReporting } = getState().reporting
-  if (!selectedVesselIdentity || !archivedReportingsFromDate || isLoadingReporting) {
+  if (!selectedVesselIdentity || isLoadingReporting) {
     return
   }
 

frontend/src/features/SideWindow/Alert/AlertListAndReportingList/EditReporting.tsx

@@ -100,7 +100,7 @@ const Flag = styled.img<{
 }>`
   cursor: pointer;
   display: inline-block;
-  height: 14;
+  height: 14px;
   margin-top: 5px;
   vertical-align: middle;
 `

frontend/src/features/Vessel/components/VesselSidebar/Controls/ControlsSummary.tsx

@@ -11,21 +11,20 @@ import SeaSVG from '../../../../icons/Avarie_statut_navire_en_mer.svg?react'
 import { Header, Zone } from '../common_styles/common.style'
 
 import type { MissionAction } from '../../../../Mission/missionAction.types'
-import type { Dayjs } from 'dayjs'
 
 type ControlsResumeZoneProps = {
-  controlsFromDate: Dayjs
+  controlsFromDate: string
   lastControls: MissionAction.LastControls
   summary: MissionAction.MissionControlsSummary
 }
 export function ControlsSummary({ controlsFromDate, lastControls, summary }: ControlsResumeZoneProps) {
   const { controls, numberOfControlsWithSomeGearsSeized, numberOfControlsWithSomeSpeciesSeized, numberOfDiversions } =
     summary
-  const yearsDepth = customDayjs().utc().get('year') - controlsFromDate.get('year') + 1
+  const yearsDepth = customDayjs().utc().get('year') - customDayjs(controlsFromDate).get('year') + 1
 
   return (
     <Zone data-cy="vessel-controls-summary">
-      <Header>Derniers contrôles {controlsFromDate && <>({yearsDepth} dernières années)</>}</Header>
+      <Header>Derniers contrôles {yearsDepth && <>({yearsDepth} dernières années)</>}</Header>
       <Body>
         <InfractionsSummary
           numberOfControlsWithSomeGearsSeized={numberOfControlsWithSomeGearsSeized}

frontend/src/features/Vessel/components/VesselSidebar/Controls/YearsToControlList.tsx

@@ -1,3 +1,4 @@
+import { customDayjs } from '@mtes-mct/monitor-ui'
 import { useMemo } from 'react'
 import styled from 'styled-components'
 
@@ -6,10 +7,9 @@ import { COLORS } from '../../../../../constants/constants'
 import { Header, Zone } from '../common_styles/common.style'
 
 import type { MissionAction } from '../../../../Mission/missionAction.types'
-import type { Dayjs } from 'dayjs'
 
 type YearsToControlListProps = {
-  controlsFromDate: Dayjs
+  controlsFromDate: string
   yearsToControls: Record<number, MissionAction.MissionAction[]>
 }
 export function YearsToControlList({ controlsFromDate, yearsToControls }: YearsToControlListProps) {
@@ -31,7 +31,7 @@ export function YearsToControlList({ controlsFromDate, yearsToControls }: YearsT
           ))}
         </List>
       ) : (
-        <NoControls>Aucun contrôle {`depuis ${controlsFromDate.get('year')}`}</NoControls>
+        <NoControls>Aucun contrôle {`depuis ${customDayjs(controlsFromDate).get('year')}`}</NoControls>
       )}
     </Zone>
   )

frontend/src/features/Vessel/components/VesselSidebar/Controls/index.tsx

@@ -1,4 +1,5 @@
 import { FingerprintSpinner } from '@components/FingerprintSpinner'
+import { customDayjs } from '@mtes-mct/monitor-ui'
 import { useCallback, useEffect, useMemo } from 'react'
 import styled from 'styled-components'
 
@@ -58,7 +59,7 @@ export function Controls() {
   }
 
   const seeMore = useCallback(() => {
-    const nextDate = controlsFromDate.subtract(1, 'year')
+    const nextDate = customDayjs(controlsFromDate).subtract(1, 'year').toISOString()
 
     dispatch(setControlFromDate(nextDate))
   }, [dispatch, controlsFromDate])

frontend/src/features/VesselList/index.tsx

@@ -485,17 +485,17 @@ export function VesselList({ namespace }) {
               Aperçu sur la carte
             </PreviewButton>
             <BlackButton
+              $isLast={false}
               data-cy="save-filter-modal"
               disabled={hasNoFilter()}
-              isLast={false}
               onClick={() => saveFilter()}
             >
               Enregistrer le filtre
             </BlackButton>
             <BlackButton
+              $isLast
               data-cy="download-vessels-modal"
               disabled={!filteredVessels?.some(vessel => vessel.checked)}
-              isLast
               onClick={() => download()}
             >
               Télécharger le tableau
@@ -540,9 +540,9 @@ const PreviewButton = styled(SecondaryButton)`
 `
 
 const BlackButton = styled(PrimaryButton)<{
-  isLast: boolean
+  $isLast: boolean
 }>`
-  margin: 20px ${p => (p.isLast ? '20px' : '0')} 20px 10px;
+  margin: 20px ${p => (p.$isLast ? '20px' : '0')} 20px 10px;
   font-size: 13px;
   color: ${COLORS.gainsboro};
 `

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

@@ -11,14 +11,10 @@ import { COLORS } from '../../../constants/constants'
 import { monitorfishMap } from '../monitorfishMap'
 
 const FilterLayer = () => {
-  const { showedFilter, filterColor } = useSelector((state) => {
-    const _showedFilter = state.filter?.filters?.find(filter => filter.showed)
-    return {
-      showedFilter: _showedFilter,
-      filterColor: _showedFilter ? _showedFilter.color : null
-    }
-  })
-  const { zonesSelected } = useSelector(state => state.vesselList)
+  const filters = useSelector(state => state.filter.filters)
+  const zonesSelected = useSelector(state => state.vesselList.zonesSelected)
+
+  const showedFilter = filters?.find(filter => filter.showed)
   const currentDrawnFilterZone = zonesSelected && zonesSelected[0]?.feature
   const filterFeature = currentDrawnFilterZone || showedFilter?.filters?.zonesSelected[0]?.feature
 
@@ -48,7 +44,7 @@ const FilterLayer = () => {
         updateWhileInteracting: true,
         style: new Style({
           stroke: new Stroke({
-            color: filterColor,
+            color: showedFilter?.filterColor,
             width: 2,
             lineDash: [4, 8]
           })
@@ -78,12 +74,12 @@ const FilterLayer = () => {
   useEffect(() => {
     layerRef?.current.setStyle(new Style({
       stroke: new Stroke({
-        color: currentDrawnFilterZone ? COLORS.charcoal : filterColor,
+        color: currentDrawnFilterZone ? COLORS.charcoal : showedFilter?.filterColor,
         width: 2,
         lineDash: [4, 8]
       })
     }))
-  }, [filterColor, currentDrawnFilterZone])
+  }, [showedFilter?.filterColor, currentDrawnFilterZone])
 
   return null
 }