fix: store column width into state

MTES-MCT · Oct 21, 2024 · ce3dee6 · ce3dee6
1 parent 17cf7d9
commit ce3dee6
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Amps/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Amps/index.tsx
@@ -50,7 +50,7 @@ export function Amps({
 
   return (
     <div>
-      {openPanel && <StyledPanel $marginLeft={columnWidth ?? 0} layerId={openPanel.id} />}
+      {openPanel && columnWidth && <StyledPanel $marginLeft={columnWidth} layerId={openPanel.id} />}
       <Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Zones AMP">
         <StyledLayerList
           $baseLayersLength={Object.values(ampsByLayerName).length}

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/DashboardForm.tsx b/frontend/src/features/Dashboard/components/DashboardForm/DashboardForm.tsx
@@ -32,9 +32,9 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
 
   const { data: controlUnits } = useGetControlUnitsQuery(undefined, RTK_DEFAULT_QUERY_OPTIONS)
   const activeControlUnits = useMemo(() => controlUnits?.filter(isNotArchived), [controlUnits])
+  const [firstColumnWidth, setFirstColumnWidth] = useState<number | undefined>(undefined)
 
   const firstColumnRef = useRef<HTMLDivElement>(null)
-  const firstColumnWidth = firstColumnRef.current?.clientWidth ?? 0
 
   const toolbarRef = useRef<HTMLDivElement>(null)
   const toolbarHeight = toolbarRef.current?.clientHeight ?? 0
@@ -70,6 +70,12 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
     }
   }
 
+  useEffect(() => {
+    if (isActive) {
+      setFirstColumnWidth(firstColumnRef.current?.clientWidth)
+    }
+  }, [isActive])
+
   useEffect(() => {
     // remove openedPanel on mount
     dispatch(dashboardActions.setDashboardPanel())
@@ -98,7 +104,7 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
           <Container>
             <Column ref={firstColumnRef} $filterHeight={toolbarHeight}>
               <RegulatoryAreas
-                columnWidth={firstColumnWidth}
+                columnWidth={firstColumnWidth ?? 0}
                 isExpanded={expandedAccordionFirstColumn === Dashboard.Block.REGULATORY_AREAS}
                 isSelectedAccordionOpen={previewSelectionFilter}
                 regulatoryAreas={dashboard.extractedArea?.regulatoryAreas}
@@ -108,14 +114,14 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
 
               <Amps
                 amps={dashboard.extractedArea?.amps}
-                columnWidth={firstColumnWidth}
+                columnWidth={firstColumnWidth ?? 0}
                 isExpanded={expandedAccordionFirstColumn === Dashboard.Block.AMP}
                 isSelectedAccordionOpen={previewSelectionFilter}
                 selectedAmpIds={dashboard.dashboard.amps}
                 setExpandedAccordion={() => handleAccordionClick(Dashboard.Block.AMP)}
               />
               <VigilanceAreas
-                columnWidth={firstColumnWidth}
+                columnWidth={firstColumnWidth ?? 0}
                 isExpanded={expandedAccordionFirstColumn === Dashboard.Block.VIGILANCE_AREAS}
                 isSelectedAccordionOpen={previewSelectionFilter}
                 selectedVigilanceAreaIds={dashboard.dashboard.vigilanceAreas}

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/index.tsx
@@ -50,7 +50,7 @@ export function RegulatoryAreas({
 
   return (
     <div>
-      {openPanel && <StyledPanel $marginLeft={columnWidth ?? 0} layerId={openPanel.id} />}
+      {openPanel && columnWidth && <StyledPanel $marginLeft={columnWidth} layerId={openPanel.id} />}
 
       <Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Zones réglementaires">
         <StyledLayerList

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/VigilanceAreas/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/VigilanceAreas/index.tsx
@@ -43,7 +43,7 @@ export function VigilanceAreas({
 
   return (
     <div>
-      {openPanel && <StyledPanel $marginLeft={columnWidth ?? 0} layerId={openPanel.id} />}
+      {openPanel && columnWidth && <StyledPanel $marginLeft={columnWidth} layerId={openPanel.id} />}
 
       <Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Zones de vigilance">
         <StyledLayerList

diff --git a/frontend/src/features/Dashboard/slice.ts b/frontend/src/features/Dashboard/slice.ts
@@ -208,6 +208,8 @@ export const dashboardSlice = createSlice({
 
       state.dashboards[id].regulatoryIdsToDisplay = []
       state.dashboards[id].ampIdsToDisplay = []
+      state.dashboards[id].reportingToDisplay = undefined
+      state.dashboards[id].openPanel = undefined
     },
     removeAllRegulatoryIdToDisplay(state) {
       const id = state.activeDashboardId