[feat] cleanup & refacto

frontend/src/domain/shared_slices/InterestPoint.ts

@@ -6,18 +6,18 @@ import type { InterestPoint, NewInterestPoint } from '../../features/InterestPoi
 
 interface InterestPointState {
   interestPointBeingDrawed: NewInterestPoint | null
+  interestPointToDelete: string | null
   interestPoints: InterestPoint[]
   isDrawing: boolean
   isEditing: boolean
-  triggerInterestPointFeatureDeletion: string | null
 }
 
 const INITIAL_STATE: InterestPointState = {
   interestPointBeingDrawed: null,
   interestPoints: [],
+  interestPointToDelete: null,
   isDrawing: false,
-  isEditing: false,
-  triggerInterestPointFeatureDeletion: null
+  isEditing: false
 }
 
 const persistConfig = {
@@ -46,7 +46,7 @@ const interestPointSlice = createSlice({
      */
     deleteInterestPointBeingDrawed(state) {
       if (state.interestPointBeingDrawed && !!state.interestPointBeingDrawed.uuid) {
-        state.triggerInterestPointFeatureDeletion = state.interestPointBeingDrawed.uuid
+        state.interestPointToDelete = state.interestPointBeingDrawed.uuid
       }
       state.interestPointBeingDrawed = null
     },
@@ -81,14 +81,13 @@ const interestPointSlice = createSlice({
      */
     removeInterestPoint(state, action: PayloadAction<string>) {
       state.interestPoints = state.interestPoints.filter(interestPoint => interestPoint.uuid !== action.payload)
-      state.isEditing = false
     },
 
     /**
      * Reset the trigger of the interest point deletion feature currently showed
      */
-    resetInterestPointFeatureDeletion(state) {
-      state.triggerInterestPointFeatureDeletion = null
+    resetInterestPointToDelete(state) {
+      state.interestPointToDelete = null
     },
 
     /**
@@ -133,7 +132,7 @@ export const {
   editInterestPoint,
   endInterestPointDraw,
   removeInterestPoint,
-  resetInterestPointFeatureDeletion,
+  resetInterestPointToDelete,
   updateInterestPointBeingDrawed,
   updateInterestPointKeyBeingDrawed
 } = interestPointSlice.actions

frontend/src/features/coordinates/DDCoordinatesInput.tsx

@@ -106,12 +106,4 @@ const Error = styled.span`
 const Body = styled.div`
   font-size: 13px;
   text-align: left;
-
-  input {
-    background: ${p => p.theme.color.gainsboro};
-    border: none;
-    height: 27px;
-    margin-top: 7px;
-    padding-left: 8px;
-  }
 `

frontend/src/features/coordinates/DMDCoordinatesInput.tsx

@@ -118,11 +118,6 @@ const Body = styled.div`
   text-align: left;
 
   input {
-    background: ${p => p.theme.color.gainsboro};
-    border: none;
-    height: 27px;
-    margin-top: 7px;
-    padding-left: 8px;
     width: 200px;
   }
 `

frontend/src/features/coordinates/DMSCoordinatesInput.tsx

@@ -49,11 +49,6 @@ const Body = styled.div`
   text-align: left;
 
   input {
-    background: ${p => p.theme.color.gainsboro};
-    border: none;
-    height: 27px;
-    margin-top: 7px;
-    padding-left: 8px;
     width: 200px;
   }
 `

frontend/src/features/map/controls/MapCoordinatesBox.tsx

@@ -79,18 +79,16 @@ export function MapCoordinatesBox({ map }: BaseMapChildrenProps) {
         <Header data-cy="coordinates-selection" onClick={() => setCoordinatesSelectionIsOpen(false)}>
           Unités des coordonnées
         </Header>
-        <RadioContainer>
-          <MultiRadio
-            data-cy="coordinates-radio"
-            isInline
-            isLabelHidden
-            label="Unités des coordonnées"
-            name="coordinatesRadio"
-            onChange={selectCordinatesFormat}
-            options={COORDINATES_OPTIONS}
-            value={coordinatesFormat}
-          />
-        </RadioContainer>
+        <StyledMultiRadio
+          data-cy="coordinates-radio"
+          isInline
+          isLabelHidden
+          label="Unités des coordonnées"
+          name="coordinatesRadio"
+          onChange={selectCordinatesFormat}
+          options={COORDINATES_OPTIONS}
+          value={coordinatesFormat}
+        />
       </CoordinatesTypeSelection>
       <Coordinates onClick={() => setCoordinatesSelectionIsOpen(!coordinatesSelectionIsOpen)}>
         {getShowedCoordinates(coordinates, coordinatesFormat)} ({coordinatesFormat})
@@ -112,11 +110,11 @@ const getShowedCoordinates = (coordinates, coordinatesFormat) => {
 const StyledCoordinatesContainer = styled.div`
   z-index: 2;
 `
-const RadioContainer = styled.div`
+const StyledMultiRadio = styled(MultiRadio)`
   padding: 12px;
 `
 
-const Header = styled.span`
+const Header = styled.header`
   background-color: ${p => p.theme.color.charcoal};
   color: ${p => p.theme.color.gainsboro};
   padding: 5px 0;

frontend/src/features/map/layers/InterestPointLayer.tsx

@@ -9,7 +9,7 @@ import { getLength } from 'ol/sphere'
 import { useCallback, useEffect, useRef, useState, type MutableRefObject } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 
-import { POIStyle, getInterestPointStyle } from './styles/interestPoint.style'
+import { POIStyle, getInterestPointStyle, getLinesStyle } from './styles/interestPoint.style'
 import { InterestPointLine } from '../../../domain/entities/interestPointLine'
 import { coordinatesAreModified, coordinatesOrTypeAreModified } from '../../../domain/entities/interestPoints'
 import { Layers } from '../../../domain/entities/layers/constants'
@@ -20,7 +20,7 @@ import {
   editInterestPoint,
   endInterestPointDraw,
   removeInterestPoint,
-  resetInterestPointFeatureDeletion,
+  resetInterestPointToDelete,
   updateInterestPointBeingDrawed,
   updateInterestPointKeyBeingDrawed
 } from '../../../domain/shared_slices/InterestPoint'
@@ -44,27 +44,18 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
   const dispatch = useAppDispatch()
   const displayInterestPointLayer = useAppSelector(state => state.global.displayInterestPointLayer)
 
-  const { interestPointBeingDrawed, interestPoints, isDrawing, isEditing, triggerInterestPointFeatureDeletion } =
-    useAppSelector(state => state.interestPoint)
+  const { interestPointBeingDrawed, interestPoints, interestPointToDelete, isDrawing, isEditing } = useAppSelector(
+    state => state.interestPoint
+  )
 
   const [drawObject, setDrawObject] = useState<Draw>()
 
-  const [interestPointToCoordinates, setInterestPointToCoordinates] = useState(new Map())
+  const [interestsPointsToCoordinate, setInterestsPointsToCoordinate] = useState(new Map())
   const previousInterestPointBeingDrawed = usePrevious<NewInterestPoint | null>(interestPointBeingDrawed)
   const deleteInterestPoint = useCallback(
     (uuid: string) => {
-      const feature = interestPointVectorSourceRef.current.getFeatureById(uuid)
-      if (feature) {
-        interestPointVectorSourceRef.current.removeFeature(feature)
-        interestPointVectorSourceRef.current.changed()
-      }
-
-      const featureLine = interestPointVectorSourceRef.current.getFeatureById(InterestPointLine.getFeatureId(uuid))
-      if (featureLine) {
-        interestPointVectorSourceRef.current.removeFeature(featureLine)
-        interestPointVectorSourceRef.current.changed()
-      }
-
+      removePoint(uuid)
+      removeLine(uuid)
       dispatch(removeInterestPoint(uuid))
     },
     [dispatch]
@@ -73,27 +64,17 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
     (uuid: string | number, coordinates: Coordinate, nextCoordinates: Coordinate, offset: any) => {
       const featureId = InterestPointLine.getFeatureId(uuid)
 
-      if (interestPointToCoordinates.has(featureId)) {
-        const existingLabelLineFeature = interestPointVectorSourceRef.current.getFeatureById(featureId)
-        const interestPointFeature = interestPointVectorSourceRef.current.getFeatureById(uuid)
-
-        if (existingLabelLineFeature) {
-          const geometry = interestPointFeature?.getGeometry()
-          if (geometry) {
-            existingLabelLineFeature.setGeometry(new LineString([nextCoordinates, geometry.getFlatCoordinates()]))
-          }
-        }
+      if (interestsPointsToCoordinate.has(featureId)) {
+        updateLineFromExistingFeature(featureId, uuid, nextCoordinates)
       } else {
-        const interestPointLineFeature = InterestPointLine.getFeature(coordinates, nextCoordinates, featureId)
-
-        interestPointVectorSourceRef.current.addFeature(interestPointLineFeature)
+        addLineToFeature(coordinates, nextCoordinates, featureId)
       }
 
-      const nextVesselToCoordinates = interestPointToCoordinates
-      interestPointToCoordinates.set(featureId, { coordinates: nextCoordinates, offset })
-      setInterestPointToCoordinates(nextVesselToCoordinates)
+      const nextFeatureToCoordinates = interestsPointsToCoordinate
+      interestsPointsToCoordinate.set(featureId, { coordinates: nextCoordinates, offset })
+      setInterestsPointsToCoordinate(nextFeatureToCoordinates)
     },
-    [interestPointToCoordinates]
+    [interestsPointsToCoordinate]
   )
 
   const modifyInterestPoint = useCallback(
@@ -112,7 +93,8 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
     new VectorLayer({
       renderBuffer: 7,
       source: interestPointVectorSourceRef.current,
-      style: (feature, resolution) => getInterestPointStyle(feature?.getId()?.toString()?.includes('line'), resolution),
+      style: (feature, resolution) =>
+        shouldStyledLines(feature) ? getLinesStyle() : getInterestPointStyle(resolution),
       updateWhileAnimating: true,
       updateWhileInteracting: true,
       zIndex: Layers.INTEREST_POINT.zIndex
@@ -237,11 +219,11 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
   }, [dispatch, drawObject, interestPointBeingDrawed])
 
   useEffect(() => {
-    if (triggerInterestPointFeatureDeletion) {
-      deleteInterestPoint(triggerInterestPointFeatureDeletion)
-      resetInterestPointFeatureDeletion()
+    if (interestPointToDelete) {
+      deleteInterestPoint(interestPointToDelete)
+      resetInterestPointToDelete()
     }
-  }, [deleteInterestPoint, triggerInterestPointFeatureDeletion])
+  }, [deleteInterestPoint, interestPointToDelete])
 
   useEffect(() => {
     function modifyFeatureWhenCoordinatesOrTypeModified() {
@@ -293,8 +275,8 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
 
         if (distance > 10) {
           const featureId = InterestPointLine.getFeatureId(interestPointBeingDrawed.uuid)
-          if (interestPointToCoordinates.has(featureId)) {
-            interestPointToCoordinates.delete(featureId)
+          if (interestsPointsToCoordinate.has(featureId)) {
+            interestsPointsToCoordinate.delete(featureId)
             const feature = interestPointVectorSourceRef.current.getFeatureById(featureId)
             if (feature && !!interestPointBeingDrawed.coordinates) {
               feature.setGeometry(
@@ -307,7 +289,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
     }
 
     initLineWhenInterestPointCoordinatesModified()
-  }, [interestPointBeingDrawed, interestPointToCoordinates, previousInterestPointBeingDrawed])
+  }, [interestPointBeingDrawed, interestsPointsToCoordinate, previousInterestPointBeingDrawed])
 
   useEffect(() => {
     interestPointVectorLayer.current.setVisible(displayInterestPointLayer)
@@ -346,4 +328,42 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
       ) : null}
     </div>
   )
+
+  function shouldStyledLines(feature) {
+    return feature?.getId()?.toString()?.includes('line')
+  }
+
+  function addLineToFeature(coordinates: Coordinate, nextCoordinates: Coordinate, featureId: string) {
+    const interestPointLineFeature = InterestPointLine.getFeature(coordinates, nextCoordinates, featureId)
+
+    interestPointVectorSourceRef.current.addFeature(interestPointLineFeature)
+  }
+
+  function updateLineFromExistingFeature(featureId: string, uuid: string | number, nextCoordinates: Coordinate) {
+    const existingLabelLineFeature = interestPointVectorSourceRef.current.getFeatureById(featureId)
+    const interestPointFeature = interestPointVectorSourceRef.current.getFeatureById(uuid)
+
+    if (existingLabelLineFeature) {
+      const geometry = interestPointFeature?.getGeometry()
+      if (geometry) {
+        existingLabelLineFeature.setGeometry(new LineString([nextCoordinates, geometry.getFlatCoordinates()]))
+      }
+    }
+  }
+
+  function removeLine(uuid: string) {
+    const featureLine = interestPointVectorSourceRef.current.getFeatureById(InterestPointLine.getFeatureId(uuid))
+    if (featureLine) {
+      interestPointVectorSourceRef.current.removeFeature(featureLine)
+      interestPointVectorSourceRef.current.changed()
+    }
+  }
+
+  function removePoint(uuid: string) {
+    const feature = interestPointVectorSourceRef.current.getFeatureById(uuid)
+    if (feature) {
+      interestPointVectorSourceRef.current.removeFeature(feature)
+      interestPointVectorSourceRef.current.changed()
+    }
+  }
 }

frontend/src/features/map/layers/styles/interestPoint.style.ts

@@ -19,7 +19,7 @@ export const getIconStyle = (resolution: number) =>
     zIndex: INTEREST_POINT_STYLE_ZINDEX
   })
 
-export const getStrokeStyles = () => [
+export const getLinesStyle = () => [
   new Style({
     stroke: new Stroke({
       color: THEME.color.slateGray,
@@ -29,13 +29,7 @@ export const getStrokeStyles = () => [
   })
 ]
 
-export const getInterestPointStyle = (shouldStyleStroke: boolean | undefined, resolution: number) => {
-  if (shouldStyleStroke) {
-    return getStrokeStyles()
-  }
-
-  return getIconStyle(resolution)
-}
+export const getInterestPointStyle = (resolution: number) => getIconStyle(resolution)
 
 export const POIStyle = new Style({
   image: new CircleStyle({

frontend/src/features/map/overlays/InterestPointOverlay.tsx

@@ -184,7 +184,7 @@ export function InterestPointOverlay({
   )
 }
 
-const Body = styled.div`
+const Body = styled.p`
   padding: 10px;
   font-size: 13px;
   font-weight: 500;
@@ -214,7 +214,7 @@ const WrapperToBeKeptForDOMManagement = styled.div`
   z-index: 300;
 `
 
-const InterestPointOverlayElement = styled.div`
+const InterestPointOverlayElement = styled.section`
   background: ${p => p.theme.color.white};
   cursor: grabbing;
   width: 183px;