[Tech] Amélioration des renders (#2811)

## Linked issues - Suppression de destruct de selectors (filtrer la PR avec les fichiers `.tsx`) - Lint des fichiers .js ---- - [ ] Tests E2E (Cypress)
MTES-MCT · Jan 11, 2024 · 7674acc · 7674acc
2 parents b9cc34a + 19553ec
commit 7674acc
Show file tree

Hide file tree

Showing 93 changed files with 871 additions and 750 deletions.
diff --git a/frontend/src/api/APIWorker.tsx b/frontend/src/api/APIWorker.tsx
@@ -29,10 +29,14 @@ export const THIRTY_SECONDS = 30 * 1000
 export function APIWorker() {
   const dispatch = useMainAppDispatch()
   const isSuperUser = useIsSuperUser()
-  const { selectedVesselIdentity, vesselSidebarTab } = useMainAppSelector(state => state.vessel)
+  const selectedVesselIdentity = useMainAppSelector(state => state.vessel.selectedVesselIdentity)
+  const vesselSidebarTab = useMainAppSelector(state => state.vessel.vesselSidebarTab)
   const sideWindow = useMainAppSelector(state => state.sideWindow)
-  const { openedBeaconMalfunctionInKanban, vesselBeaconMalfunctionsResumeAndHistory } = useMainAppSelector(
-    state => state.beaconMalfunction
+  const openedBeaconMalfunctionInKanban = useMainAppSelector(
+    state => state.beaconMalfunction.openedBeaconMalfunctionInKanban
+  )
+  const vesselBeaconMalfunctionsResumeAndHistory = useMainAppSelector(
+    state => state.beaconMalfunction.vesselBeaconMalfunctionsResumeAndHistory
   )
 
   const sideWindowInterval = useRef<NodeJS.Timer>()

diff --git a/frontend/src/constants/constants.js b/frontend/src/constants/constants.js
@@ -1,20 +1,31 @@
 export const COLORS = {
-  white: '#FFFFFF',
-  gainsboro: '#E5E5EB',
-  lightGray: '#CCCFD6',
+  // TODO Remove this color.
+  blue: '#0A18DF',
+
   charcoal: '#3B4559',
-  slateGray: '#707785',
+
   cultured: '#F7F7FA',
-  mediumSeaGreen: '#29b361',
+
+  gainsboro: '#E5E5EB',
+
   gunMetal: '#282F3E',
+
+  lightGray: '#CCCFD6',
+
   maximumRed: '#E1000F',
-  // TODO Remove this color.
-  blue: '#0A18DF',
+
+  mediumSeaGreen: '#29b361',
+
+  opal: '#a5bcc0',
+
+  white: '#FFFFFF',
+
+  powderBlue: '#9ED7D9',
+
+  slateGray: '#707785',
   // TODO Remove this color (it's used as hex and not constant).
   titleBottomBorder: '#E0E0E0',
-  powderBlue: '#9ED7D9',
-  wheat: '#edd6a4',
-  opal: '#a5bcc0'
+  wheat: '#edd6a4'
 }
 
 export const HIT_PIXEL_TO_TOLERANCE = 10

diff --git a/frontend/src/domain/entities/estimatedPosition.js b/frontend/src/domain/entities/estimatedPosition.js
@@ -1,12 +1,13 @@
-import { transform } from 'ol/proj'
-import { OPENLAYERS_PROJECTION, WSG84_PROJECTION } from './map/constants'
 import Feature from 'ol/Feature'
-import { LayerProperties } from './layers/constants'
 import LineString from 'ol/geom/LineString'
 import Point from 'ol/geom/Point'
+import { transform } from 'ol/proj'
+
+import { LayerProperties } from './layers/constants'
+import { OPENLAYERS_PROJECTION, WSG84_PROJECTION } from './map/constants'
+import { Vessel } from './vessel/vessel'
 import { COLORS } from '../../constants/constants'
 import { theme } from '../../ui/theme'
-import { Vessel } from './vessel/vessel'
 
 class EstimatedPosition {
   static colorProperty = 'color'
@@ -25,25 +26,26 @@ class EstimatedPosition {
    * }} options
    * @returns [lineFeature, circleFeature] - array containing 2 features: one for the line, one for the point symbolising the last position
    */
-  static getFeatures (vessel, options) {
-    const {
-      longitude,
-      latitude,
-      estimatedCurrentLongitude,
-      estimatedCurrentLatitude,
-      dateTime
-    } = vessel.vesselProperties
+  static getFeatures(vessel, options) {
+    const { dateTime, estimatedCurrentLatitude, estimatedCurrentLongitude, latitude, longitude } =
+      vessel.vesselProperties
 
-    if (!longitude || !latitude || !estimatedCurrentLongitude || !estimatedCurrentLatitude) return null
+    if (!longitude || !latitude || !estimatedCurrentLongitude || !estimatedCurrentLatitude) {
+      return null
+    }
 
     const currentCoordinates = transform([longitude, latitude], WSG84_PROJECTION, OPENLAYERS_PROJECTION)
-    const estimatedCoordinates = transform([estimatedCurrentLongitude, estimatedCurrentLatitude], WSG84_PROJECTION, OPENLAYERS_PROJECTION)
+    const estimatedCoordinates = transform(
+      [estimatedCurrentLongitude, estimatedCurrentLatitude],
+      WSG84_PROJECTION,
+      OPENLAYERS_PROJECTION
+    )
     const vesselCompositeIdentifier = vessel.vesselFeatureId.replace(`${LayerProperties.VESSELS_POINTS.code}:`, '')
 
     const estimatedPositionObject = {
+      dateTime,
       latitude: estimatedCurrentLatitude,
-      longitude: estimatedCurrentLongitude,
-      dateTime: dateTime
+      longitude: estimatedCurrentLongitude
     }
 
     const features = []
@@ -60,20 +62,20 @@ class EstimatedPosition {
     const opacity = Vessel.getVesselOpacity(dateTime, options.vesselIsHidden, options.vesselIsOpacityReduced)
 
     const lineFeature = new Feature({
-      geometry: new LineString([currentCoordinates, estimatedCoordinates]),
       color: lineColor,
-      opacity,
-      isHidden: options.hideNonSelectedVessels
+      geometry: new LineString([currentCoordinates, estimatedCoordinates]),
+      isHidden: options.hideNonSelectedVessels,
+      opacity
     })
     lineFeature.estimatedPosition = estimatedPositionObject
     lineFeature.setId(`${LayerProperties.VESSEL_ESTIMATED_POSITION.code}:${vesselCompositeIdentifier}`)
 
     const circleFeature = new Feature({
+      color: vesselColor,
       geometry: new Point(estimatedCoordinates),
       isCircle: true,
-      color: vesselColor,
-      opacity,
-      isHidden: options.hideNonSelectedVessels
+      isHidden: options.hideNonSelectedVessels,
+      opacity
     })
     circleFeature.estimatedPosition = estimatedPositionObject
     circleFeature.setId(`${LayerProperties.VESSEL_ESTIMATED_POSITION.code}:circle:${vesselCompositeIdentifier}`)
@@ -84,6 +86,4 @@ class EstimatedPosition {
   }
 }
 
-export {
-  EstimatedPosition
-}
+export { EstimatedPosition }
diff --git a/frontend/src/domain/entities/global.js b/frontend/src/domain/entities/global.js
@@ -1,5 +1,5 @@
 export const LeftBoxOpened = {
-  REGULATIONS: 'REGULATIONS',
   FAVORITE_VESSELS: 'FAVORITE_VESSELS',
-  MISSIONS: 'MISSIONS'
+  MISSIONS: 'MISSIONS',
+  REGULATIONS: 'REGULATIONS'
 }
diff --git a/frontend/src/domain/entities/interestPointLine.js b/frontend/src/domain/entities/interestPointLine.js
@@ -10,7 +10,7 @@ export class InterestPointLine {
    * @param {string[]} toCoordinates - The [longitude, latitude] of the overlay position
    * @param {string} featureId - The feature identifier
    */
-  static getFeature (fromCoordinates, toCoordinates, featureId) {
+  static getFeature(fromCoordinates, toCoordinates, featureId) {
     const interestPointLineFeature = new Feature({
       geometry: new LineString([fromCoordinates, toCoordinates])
     })
@@ -20,7 +20,7 @@ export class InterestPointLine {
     return interestPointLineFeature
   }
 
-  static getFeatureId (uuid) {
+  static getFeatureId(uuid) {
     return `${uuid}:line`
   }
 }
diff --git a/frontend/src/domain/entities/interestPoints.js b/frontend/src/domain/entities/interestPoints.js
@@ -1,27 +1,25 @@
 export const interestPointType = {
   CONTROL_ENTITY: 'CONTROL_ENTITY',
-  FISHING_VESSEL: 'FISHING_VESSEL',
   FISHING_GEAR: 'FISHING_GEAR',
+  FISHING_VESSEL: 'FISHING_VESSEL',
   OTHER: 'OTHER'
 }
 
 export const INTEREST_POINT_STYLE = 150
 
-export function coordinatesOrTypeAreModified (drawingFeatureToUpdate, interestPointBeingDrawed) {
+export function coordinatesOrTypeAreModified(drawingFeatureToUpdate, interestPointBeingDrawed) {
   return (
     !isNaN(drawingFeatureToUpdate.getGeometry().getCoordinates()[0]) &&
     !isNaN(drawingFeatureToUpdate.getGeometry().getCoordinates()[1]) &&
     !isNaN(interestPointBeingDrawed.coordinates[0]) &&
-    !isNaN(interestPointBeingDrawed.coordinates[1])
-  ) &&
-    (
-      drawingFeatureToUpdate.getGeometry().getCoordinates()[0] !== interestPointBeingDrawed.coordinates[0] ||
+    !isNaN(interestPointBeingDrawed.coordinates[1]) &&
+    (drawingFeatureToUpdate.getGeometry().getCoordinates()[0] !== interestPointBeingDrawed.coordinates[0] ||
       drawingFeatureToUpdate.getGeometry().getCoordinates()[1] !== interestPointBeingDrawed.coordinates[1] ||
-      drawingFeatureToUpdate.getProperties().type !== interestPointBeingDrawed.type
-    )
+      drawingFeatureToUpdate.getProperties().type !== interestPointBeingDrawed.type)
+  )
 }
 
-export function coordinatesAreModified (feature, previousFeature) {
+export function coordinatesAreModified(feature, previousFeature) {
   return (
     feature &&
     previousFeature &&
@@ -30,10 +28,8 @@ export function coordinatesAreModified (feature, previousFeature) {
     !isNaN(feature.coordinates[0]) &&
     !isNaN(feature.coordinates[1]) &&
     !isNaN(previousFeature.coordinates[0]) &&
-    !isNaN(previousFeature.coordinates[1])
-  ) &&
-  (
-    feature.coordinates[0] !== previousFeature.coordinates[0] ||
-    feature.coordinates[1] !== previousFeature.coordinates[1]
+    !isNaN(previousFeature.coordinates[1]) &&
+    (feature.coordinates[0] !== previousFeature.coordinates[0] ||
+      feature.coordinates[1] !== previousFeature.coordinates[1])
   )
 }
diff --git a/frontend/src/domain/entities/mission/hooks/useGetFilteredMissionsQuery.ts b/frontend/src/domain/entities/mission/hooks/useGetFilteredMissionsQuery.ts
@@ -19,7 +19,8 @@ export const useGetFilteredMissionsQuery = (): {
   missions: MissionWithActions[]
   missionsSeaFrontFiltered: MissionWithActions[]
 } => {
-  const { listFilterValues, listSeaFront } = useMainAppSelector(state => state.mission)
+  const listFilterValues = useMainAppSelector(state => state.mission.listFilterValues)
+  const listSeaFront = useMainAppSelector(state => state.mission.listSeaFront)
 
   const filteredSeaFronts = useMemo(() => SEA_FRONT_GROUP_SEA_FRONTS[listSeaFront], [listSeaFront])
 

diff --git a/frontend/src/domain/use_cases/beaconMalfunction/getAllBeaconMalfunctions.js b/frontend/src/domain/use_cases/beaconMalfunction/getAllBeaconMalfunctions.js
@@ -1,14 +1,16 @@
-import { setError } from '../../shared_slices/Global'
-import { setBeaconMalfunctions } from '../../shared_slices/BeaconMalfunction'
 import { getAllBeaconMalfunctionsFromAPI } from '../../../api/beaconMalfunction'
+import { setBeaconMalfunctions } from '../../shared_slices/BeaconMalfunction'
+import { setError } from '../../shared_slices/Global'
 
 const getAllBeaconMalfunctions = () => dispatch => {
-  getAllBeaconMalfunctionsFromAPI().then(beaconMalfunctions => {
-    dispatch(setBeaconMalfunctions(beaconMalfunctions))
-  }).catch(error => {
-    console.error(error)
-    dispatch(setError(error))
-  })
+  getAllBeaconMalfunctionsFromAPI()
+    .then(beaconMalfunctions => {
+      dispatch(setBeaconMalfunctions(beaconMalfunctions))
+    })
+    .catch(error => {
+      console.error(error)
+      dispatch(setError(error))
+    })
 }
 
 export default getAllBeaconMalfunctions
diff --git a/frontend/src/domain/use_cases/beaconMalfunction/openBeaconMalfunction.js b/frontend/src/domain/use_cases/beaconMalfunction/openBeaconMalfunction.js
@@ -1,6 +1,6 @@
-import { setError } from '../../shared_slices/Global'
-import { setOpenedBeaconMalfunction } from '../../shared_slices/BeaconMalfunction'
 import { getBeaconMalfunctionFromAPI } from '../../../api/beaconMalfunction'
+import { setOpenedBeaconMalfunction } from '../../shared_slices/BeaconMalfunction'
+import { setError } from '../../shared_slices/Global'
 
 /**
  * Open a single beacon malfunction
@@ -10,24 +10,32 @@ import { getBeaconMalfunctionFromAPI } from '../../../api/beaconMalfunction'
  */
 const openBeaconMalfunction = (beaconMalfunction, isFromUserAction) => (dispatch, getState) => {
   const previousBeaconMalfunction = getState().beaconMalfunction.openedBeaconMalfunction
-  dispatch(setOpenedBeaconMalfunction({
-    beaconMalfunction: beaconMalfunction,
-    showTab: isFromUserAction
-  }))
-
-  getBeaconMalfunctionFromAPI(beaconMalfunction.beaconMalfunction?.id).then(beaconMalfunctionWithDetails => {
-    dispatch(setOpenedBeaconMalfunction({
-      beaconMalfunction: beaconMalfunctionWithDetails,
-      showTab: isFromUserAction
-    }))
-  }).catch(error => {
-    console.error(error)
-    dispatch(setError(error))
-    dispatch(setOpenedBeaconMalfunction({
-      beaconMalfunction: previousBeaconMalfunction,
+  dispatch(
+    setOpenedBeaconMalfunction({
+      beaconMalfunction,
       showTab: isFromUserAction
-    }))
-  })
+    })
+  )
+
+  getBeaconMalfunctionFromAPI(beaconMalfunction.beaconMalfunction?.id)
+    .then(beaconMalfunctionWithDetails => {
+      dispatch(
+        setOpenedBeaconMalfunction({
+          beaconMalfunction: beaconMalfunctionWithDetails,
+          showTab: isFromUserAction
+        })
+      )
+    })
+    .catch(error => {
+      console.error(error)
+      dispatch(setError(error))
+      dispatch(
+        setOpenedBeaconMalfunction({
+          beaconMalfunction: previousBeaconMalfunction,
+          showTab: isFromUserAction
+        })
+      )
+    })
 }
 
 export default openBeaconMalfunction
diff --git a/frontend/src/domain/use_cases/beaconMalfunction/saveBeaconMalfunctionCommentFromKanban.js b/frontend/src/domain/use_cases/beaconMalfunction/saveBeaconMalfunctionCommentFromKanban.js
@@ -1,10 +1,10 @@
-import { setError } from '../../shared_slices/Global'
+import { saveBeaconMalfunctionCommentFromAPI } from '../../../api/beaconMalfunction'
 import {
   setOpenedBeaconMalfunction,
   setOpenedBeaconMalfunctionsInKanban,
   updateVesselBeaconMalfunctionsResumeAndHistory
 } from '../../shared_slices/BeaconMalfunction'
-import { saveBeaconMalfunctionCommentFromAPI } from '../../../api/beaconMalfunction'
+import { setError } from '../../shared_slices/Global'
 
 /**
  * Save a new comment to a beacon malfunction
@@ -13,35 +13,40 @@ import { saveBeaconMalfunctionCommentFromAPI } from '../../../api/beaconMalfunct
  * @param {string} comment
  */
 const saveBeaconMalfunctionCommentFromKanban = (beaconMalfunctionId, comment) => (dispatch, getState) => {
-  const userType = getState().global.userType
+  const { userType } = getState().global
   const newCommentInput = {
     comment,
     userType
   }
-  const beaconMalfunctionToUpdateIsOpenedAsCurrentVesselMalfunction = getState().beaconMalfunction
-    .vesselBeaconMalfunctionsResumeAndHistory?.current?.beaconMalfunction?.id === beaconMalfunctionId
-  const beaconMalfunctionToUpdateIsOpened = getState().beaconMalfunction
-    .openedBeaconMalfunction?.beaconMalfunction?.id === beaconMalfunctionId
-  const beaconMalfunctionToUpdateIsOpenedInKanban = getState().beaconMalfunction
-    .openedBeaconMalfunctionInKanban?.beaconMalfunction?.id === beaconMalfunctionId
+  const beaconMalfunctionToUpdateIsOpenedAsCurrentVesselMalfunction =
+    getState().beaconMalfunction.vesselBeaconMalfunctionsResumeAndHistory?.current?.beaconMalfunction?.id ===
+    beaconMalfunctionId
+  const beaconMalfunctionToUpdateIsOpened =
+    getState().beaconMalfunction.openedBeaconMalfunction?.beaconMalfunction?.id === beaconMalfunctionId
+  const beaconMalfunctionToUpdateIsOpenedInKanban =
+    getState().beaconMalfunction.openedBeaconMalfunctionInKanban?.beaconMalfunction?.id === beaconMalfunctionId
 
-  return saveBeaconMalfunctionCommentFromAPI(beaconMalfunctionId, newCommentInput).then(beaconMalfunctionWithDetails => {
-    if (beaconMalfunctionToUpdateIsOpened) {
-      dispatch(setOpenedBeaconMalfunction({
-        beaconMalfunction: beaconMalfunctionWithDetails,
-        showTab: false
-      }))
-    }
-    if (beaconMalfunctionToUpdateIsOpenedInKanban) {
-      dispatch(setOpenedBeaconMalfunctionsInKanban(beaconMalfunctionWithDetails))
-    }
-    if (beaconMalfunctionToUpdateIsOpenedAsCurrentVesselMalfunction) {
-      dispatch(updateVesselBeaconMalfunctionsResumeAndHistory(beaconMalfunctionWithDetails))
-    }
-  }).catch(error => {
-    console.error(error)
-    dispatch(setError(error))
-  })
+  return saveBeaconMalfunctionCommentFromAPI(beaconMalfunctionId, newCommentInput)
+    .then(beaconMalfunctionWithDetails => {
+      if (beaconMalfunctionToUpdateIsOpened) {
+        dispatch(
+          setOpenedBeaconMalfunction({
+            beaconMalfunction: beaconMalfunctionWithDetails,
+            showTab: false
+          })
+        )
+      }
+      if (beaconMalfunctionToUpdateIsOpenedInKanban) {
+        dispatch(setOpenedBeaconMalfunctionsInKanban(beaconMalfunctionWithDetails))
+      }
+      if (beaconMalfunctionToUpdateIsOpenedAsCurrentVesselMalfunction) {
+        dispatch(updateVesselBeaconMalfunctionsResumeAndHistory(beaconMalfunctionWithDetails))
+      }
+    })
+    .catch(error => {
+      console.error(error)
+      dispatch(setError(error))
+    })
 }
 
 export default saveBeaconMalfunctionCommentFromKanban