Tech - Nettoyage des states redux

adrs/0007-side_window_rework.md

@@ -0,0 +1,59 @@
+# Refonte de la deuxième fenêtre (`SideWindow`)
+
+Date: 2024-09-25
+
+## Statut
+
+Résolu
+
+## Contexte
+
+Nous utilisons la libairie react-new-window dans monitor-ui.
+
+Le ticket [#3211](https://github.com/MTES-MCT/monitorfish/issues/3211) est impactant pour les utilisateurs : il empêche le clic dans un `<Select/>` après avoir scrollé dans une liste. 
+
+Le bug est reproductible seulement dans `window.open()`, avec notre implémentation de `NewWindow`.
+
+Il provient de la librairie `react-window`, utilisée par `rsuite`: [`react-window` désactive `pointer-events` lors du scroll](https://github.com/bvaughn/react-window/issues/128)
+
+> Les portals semblent plus adaptés aux scénarios simples dans un seul contexte DOM, tandis que l'approche avec BroadcastChannel et une nouvelle URL semble plus robuste pour des interfaces complexes réparties sur plusieurs fenêtres.
+
+## Option 1 - React portal
+
+Nous avions copié la libairie `react-new-window` dans [monitor-ui](https://github.com/MTES-MCT/monitor-ui/blob/d1294389097d528637c481ada8ea9ad1514f2640/src/components/NewWindow.tsx#L44) :
+- Utilise `ReactDOM.createPortal()`
+- Copie de tous les styles à la main
+
+Avantages :
+1. Chargement rapide: Un React Portal vous permet d'injecter un composant dans une autre partie du DOM sans quitter l'application principale, ce qui permet de ne pas re-charger les assets de l'application.
+2. Sans communication interfenêtres : Pas besoin d'utiliser des mécanismes complexes de synchronisation, tout se passe dans la même instance de React.
+
+Inconvénients :
+1. Il y a des bugs d'affichages (notamment sur des `<Select />` contenant beaucoup d'éléments) 
+2. Si la première fenêtre est supprimée, la deuxième est orpheline (clic impossible)
+
+## Option 2 - Nouvelle fenêtre synchronisée avec `BroadcastChannel`
+
+Implémentation dans cette PR : https://github.com/MTES-MCT/monitorfish/pull/3668
+
+Avantages :
+1. Séparation claire des responsabilités : Chaque fenêtre a son propre cycle de vie et son propre DOM, ce qui rend la gestion des deux interfaces plus propre et modulaire.
+2. Communication efficace : BroadcastChannel est conçu pour la synchronisation des états entre différentes fenêtres, ce qui permet une synchronisation rapide et efficace sans prop drilling ou complexité supplémentaire.
+
+Inconvénients :
+1. Complexité de la gestion de l’état : Il est nécessaire de gérer la logique de synchronisation entre les fenêtres manuellement, ce qui peut introduire des erreurs si les états deviennent désynchronisés.
+2. Temps de chargement : Ouvrir une nouvelle URL nécessite un chargement complet d’une nouvelle page, ce qui augmente le temps de réponse initial par rapport à un React Portal.
+3. `RTK Query` ne peut pas être synchronisé avec `BroadcastChannel`, à cause des objets passés non-sérialisables. Cela induit:
+   - Une multiplication des requêtes APIs (dans la side window et main window) lorsqu'il y a un refraichissement demander par une action redux
+   - Une dé-synchronisation des states RTK lorsque des refaichissement passent directement par des hooks RTK et non pas par des actions redux
+4. Il faut limiter le nombre de fenêtres pour éviter:
+   - Une deuxième fenêtre MainWindow peut penser avoir un état (stocké dans redux), mais n'a pas l'état RTK correspondant
+   - Une troisième fenêtre SideWindow ne sera pas synchronisée avec la deuxième fenêtre SideWindow ; cela peut avoir des impacts lors de modifications par APIs 
+
+## Décision
+
+Nous allons rester sur l'option 1 et fixer le bug avec : https://github.com/MTES-MCT/monitor-ui/pull/1382
+
+## Conséquences
+
+Nous n'allons pas changer de méthode pour lancer une side-window.

adrs/adrs.iml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

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;
 `