refacto: Create Weather and Comments component - refacto props

MTES-MCT · Oct 14, 2024 · 178d63b · 178d63b
1 parent 065d322
commit 178d63b
Show file tree

Hide file tree

Showing 19 changed files with 221 additions and 217 deletions.
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Amps/Layer.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Amps/Layer.tsx
@@ -3,7 +3,6 @@ import { dashboardActions } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
 import { LayerLegend } from '@features/layersSelector/utils/LayerLegend.style'
 import { LayerSelector } from '@features/layersSelector/utils/LayerSelector.style'
-import { useAppSelector } from '@hooks/useAppSelector'
 import { Accent, Icon, IconButton, OPENLAYERS_PROJECTION, THEME, WSG84_PROJECTION } from '@mtes-mct/monitor-ui'
 import { setFitToExtent } from 'domain/shared_slices/Map'
 import { Projection, transformExtent } from 'ol/proj'
@@ -14,18 +13,15 @@ import { MonitorEnvLayers } from '../../../../../domain/entities/layers/constant
 import { useAppDispatch } from '../../../../../hooks/useAppDispatch'
 
 type AmpLayerProps = {
-  dashboardId: string
+  isPinned?: boolean
   isSelected: boolean
   layerId: number
 }
 
-export function Layer({ dashboardId, isSelected, layerId }: AmpLayerProps) {
+export function Layer({ isPinned = false, isSelected, layerId }: AmpLayerProps) {
   const dispatch = useAppDispatch()
   const ref = createRef<HTMLSpanElement>()
 
-  const selectedAmps = useAppSelector(state => state.dashboard.dashboards?.[dashboardId]?.dashboard.amps)
-
-  const isZoneSelected = selectedAmps?.includes(layerId)
   const { layer } = useGetAMPsQuery(undefined, {
     selectFromResult: result => ({
       layer: result?.currentData?.entities[layerId]
@@ -36,7 +32,7 @@ export function Layer({ dashboardId, isSelected, layerId }: AmpLayerProps) {
     e.stopPropagation()
 
     const payload = { itemIds: [layerId], type: Dashboard.Block.AMP }
-    if (isZoneSelected) {
+    if (isPinned) {
       dispatch(dashboardActions.removeItems(payload))
       dispatch(dashboardActions.removeAmpIdToDisplay(layerId))
     } else {
@@ -84,9 +80,9 @@ export function Layer({ dashboardId, isSelected, layerId }: AmpLayerProps) {
         ) : (
           <IconButton
             accent={Accent.TERTIARY}
-            color={isZoneSelected ? THEME.color.blueGray : THEME.color.slateGray}
+            color={isPinned ? THEME.color.blueGray : THEME.color.slateGray}
             data-cy="regulatory-zone-check"
-            Icon={isZoneSelected ? Icon.PinFilled : Icon.Pin}
+            Icon={isPinned ? Icon.PinFilled : Icon.Pin}
             onClick={handleSelectZone}
             title="Sélectionner la zone"
           />

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Amps/ListLayerGroup.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Amps/ListLayerGroup.tsx
@@ -13,19 +13,18 @@ import styled from 'styled-components'
 import { Layer } from './Layer'
 
 type ResultListLayerGroupProps = {
-  dashboardId: string
   groupName: string
   isSelected?: boolean
   layerIds: number[]
+  selectedAmpIds: number[]
 }
-export function ListLayerGroup({ dashboardId, groupName, isSelected = false, layerIds }: ResultListLayerGroupProps) {
+export function ListLayerGroup({ groupName, isSelected = false, layerIds, selectedAmpIds }: ResultListLayerGroupProps) {
   const dispatch = useAppDispatch()
   const [zonesAreOpen, setZonesAreOpen] = useState(false)
 
   const totalNumberOfZones = useAppSelector(state => getNumberOfAMPByGroupName(state, groupName))
 
-  const selectedLayerIds = useAppSelector(state => state.dashboard.dashboards?.[dashboardId]?.dashboard.amps)
-  const zonesSelected = intersection(selectedLayerIds, layerIds)
+  const zonesSelected = intersection(selectedAmpIds, layerIds)
   const allTopicZonesAreChecked = zonesSelected?.length === layerIds?.length
 
   const handleCheckAllZones = e => {
@@ -80,7 +79,7 @@ export function ListLayerGroup({ dashboardId, groupName, isSelected = false, lay
       </StyledGroupWrapper>
       <LayerSelector.SubGroup isOpen={zonesAreOpen} length={layerIds?.length}>
         {layerIds?.map(layerId => (
-          <Layer key={layerId} dashboardId={dashboardId} isSelected={isSelected} layerId={layerId} />
+          <Layer key={layerId} isPinned={selectedAmpIds.includes(layerId)} isSelected={isSelected} layerId={layerId} />
         ))}
       </LayerSelector.SubGroup>
     </>

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Amps/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Amps/index.tsx
@@ -7,39 +7,40 @@ import { groupBy } from 'lodash'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 
-import { ListLayerGroup } from './ListLayerGroup'
-import { AmpPanel } from './Panel'
 import { Accordion } from '../Accordion'
 import { SelectedAccordion } from '../SelectedAccordion'
+import { ListLayerGroup } from './ListLayerGroup'
+import { AmpPanel } from './Panel'
 
 import type { AMPFromAPI } from 'domain/entities/AMPs'
 
 type AmpsProps = {
   amps: AMPFromAPI[] | undefined
   columnWidth: number
-  dashboardId: string
   isExpanded: boolean
   isSelectedAccordionOpen: boolean
+  selectedAmpIds: number[]
   setExpandedAccordion: () => void
 }
 export function Amps({
   amps,
   columnWidth,
-  dashboardId,
   isExpanded,
   isSelectedAccordionOpen,
+  selectedAmpIds,
   setExpandedAccordion
 }: AmpsProps) {
   const openPanel = useAppSelector(state => getOpenedPanel(state.dashboard, Dashboard.Block.AMP))
 
-  const selectedLayerIds = useAppSelector(state => state.dashboard.dashboards?.[dashboardId]?.dashboard.amps)
   const [isExpandedSelectedAccordion, setExpandedSelectedAccordion] = useState(false)
 
   const filteredAmps = useAppSelector(state => getFilteredAmps(state.dashboard))
   const ampsByLayerName = groupBy(filteredAmps, r => r.name)
 
-  const selectedAmpIds = amps?.filter(({ id }) => selectedLayerIds?.includes(id))
-  const selectedAmpByLayerName = groupBy(selectedAmpIds, r => r.name)
+  const selectedAmpByLayerName = groupBy(
+    amps?.filter(({ id }) => selectedAmpIds.includes(id)),
+    r => r.name
+  )
 
   useEffect(() => {
     if (isSelectedAccordionOpen) {
@@ -62,21 +63,21 @@ export function Amps({
             return (
               <ListLayerGroup
                 key={layerGroupName}
-                dashboardId={dashboardId}
                 groupName={layerGroupName}
                 layerIds={layersId}
+                selectedAmpIds={selectedAmpIds}
               />
             )
           })}
         </StyledLayerList>
       </Accordion>
       <SelectedAccordion
         isExpanded={isExpandedSelectedAccordion}
-        isReadOnly={selectedLayerIds?.length === 0}
+        isReadOnly={selectedAmpIds.length === 0}
         setExpandedAccordion={() => setExpandedSelectedAccordion(!isExpandedSelectedAccordion)}
-        title={`${selectedLayerIds?.length ?? 0} ${pluralize('zone', selectedLayerIds?.length ?? 0)} ${pluralize(
+        title={`${selectedAmpIds.length} ${pluralize('zone', selectedAmpIds.length)} ${pluralize(
           'sélectionnée',
-          selectedLayerIds?.length ?? 0
+          selectedAmpIds.length
         )}`}
       >
         {Object.entries(selectedAmpByLayerName).map(([layerGroupName, layerIdsInGroup]) => {
@@ -85,10 +86,10 @@ export function Amps({
           return (
             <ListLayerGroup
               key={layerGroupName}
-              dashboardId={dashboardId}
               groupName={layerGroupName}
               isSelected
               layerIds={layersId}
+              selectedAmpIds={selectedAmpIds}
             />
           )
         })}

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Comments/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Comments/index.tsx
@@ -0,0 +1,29 @@
+import { dashboardActions } from '@features/Dashboard/slice'
+import { useAppDispatch } from '@hooks/useAppDispatch'
+import { Textarea } from '@mtes-mct/monitor-ui'
+import styled from 'styled-components'
+
+import { Accordion } from '../Accordion'
+
+type CommentsProps = {
+  comments: string | undefined
+  isExpanded: boolean
+  setExpandedAccordion: () => void
+}
+
+export function Comments({ comments, isExpanded, setExpandedAccordion }: CommentsProps) {
+  const dispatch = useAppDispatch()
+
+  const updateComments = (value: string | undefined) => {
+    dispatch(dashboardActions.setComments(value))
+  }
+
+  return (
+    <Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Commentaires">
+      <StyledTextarea isLabelHidden label="Commentaires" name="comments" onChange={updateComments} value={comments} />
+    </Accordion>
+  )
+}
+const StyledTextarea = styled(Textarea)`
+  padding: 16px 24px;
+`