refacto: separate column per file

frontend/src/features/Dashboard/components/DashboardForm/Bookmark/index.tsx

@@ -0,0 +1,82 @@
+import { Accent, Button, Icon } from '@mtes-mct/monitor-ui'
+import styled from 'styled-components'
+
+import { scrollToSection } from '../Columns/utils'
+
+import type { RefObject } from 'react'
+
+export type BookmarkType = {
+  orientation?: 'top' | 'bottom'
+  ref: RefObject<HTMLDivElement>
+  title: string
+  visible: boolean
+}
+
+type BookmarkProps = {
+  bottomBookmarks: BookmarkType[]
+  columnWidth?: number
+  topBookmarks: BookmarkType[]
+}
+export function Bookmark({ bottomBookmarks, columnWidth, topBookmarks }: BookmarkProps) {
+  return (
+    <>
+      <Wrapper $left={columnWidth ?? 0}>
+        {topBookmarks.map(bookmark => (
+          <ButtonUp
+            key={bookmark.title}
+            accent={Accent.TERTIARY}
+            Icon={Icon.DoubleChevron}
+            onClick={() => scrollToSection(bookmark.ref)}
+          >
+            {bookmark.title}
+          </ButtonUp>
+        ))}
+      </Wrapper>
+      <BottomWrapper $left={columnWidth ?? 0}>
+        {bottomBookmarks.map(bookmark => (
+          <ButtonDown
+            key={bookmark.title}
+            accent={Accent.TERTIARY}
+            Icon={Icon.DoubleChevron}
+            onClick={() => scrollToSection(bookmark.ref)}
+          >
+            {bookmark.title}
+          </ButtonDown>
+        ))}
+      </BottomWrapper>
+    </>
+  )
+}
+
+export const ButtonDown = styled(Button)`
+  box-shadow: 0px 3px 6px ${p => p.theme.color.gainsboro};
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  gap: 24px;
+`
+
+export const ButtonUp = styled(ButtonDown)`
+  .Element-IconBox {
+    transform: rotate(180deg);
+  }
+`
+
+export const Wrapper = styled.div<{ $left: number }>`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+  font-weight: bold;
+  font-style: italic;
+  margin-left: ${({ $left }) => `${$left}`};
+  transform: translateX(-100%);
+  margin-top: -24px;
+  position: fixed;
+  box-shadow: 0px 3px 6px ${p => p.theme.color.gainsboro};
+  z-index: 1000;
+`
+
+export const BottomWrapper = styled(Wrapper)`
+  bottom: 66px;
+`

frontend/src/features/Dashboard/components/DashboardForm/Columns/FirstColumn.tsx

@@ -0,0 +1,120 @@
+import {
+  getFilteredAmps,
+  getFilteredRegulatoryAreas,
+  getFilteredVigilanceAreas,
+  type DashboardType
+} from '@features/Dashboard/slice'
+import { Dashboard } from '@features/Dashboard/types'
+import { useAppSelector } from '@hooks/useAppSelector'
+import { useEffect, useRef, useState } from 'react'
+
+import { Amps } from '../Amps'
+import { Bookmark, type BookmarkType } from '../Bookmark'
+import { RegulatoryAreas } from '../RegulatoryAreas'
+import { useObserver } from '../useObserver'
+import { VigilanceAreas } from '../VigilanceAreas'
+import { BaseColumn } from './style'
+import { type ColumnProps } from './utils'
+
+import type { DashboardFilters } from '../slice'
+
+type FirstColumnProps = {
+  dashboard: DashboardType
+  filters: DashboardFilters | undefined
+} & ColumnProps
+export function FirstColumn({
+  className,
+  dashboard,
+  expandedAccordion,
+  filters,
+  isSelectedAccordionOpen,
+  onExpandedAccordionClick
+}: FirstColumnProps) {
+  const [isMount, setIsMount] = useState<boolean>(false)
+  const columnRef = useRef<HTMLDivElement>(null)
+  const regulatoryAreaRef = useRef<HTMLDivElement>(null)
+  const ampRef = useRef<HTMLDivElement>(null)
+  const vigilanceAreaRef = useRef<HTMLDivElement>(null)
+
+  const [regBookmark, setRegBookmark] = useState<BookmarkType>({
+    ref: regulatoryAreaRef,
+    title: 'Zones REG',
+    visible: false
+  })
+
+  const [ampBookmark, setAmpBookmark] = useState<BookmarkType>({ ref: ampRef, title: 'Zones AMP', visible: false })
+
+  const [vigilanceBookmark, setVigilanceBookmark] = useState<BookmarkType>({
+    ref: vigilanceAreaRef,
+    title: 'Zones de vigilance',
+    visible: false
+  })
+  const topBookmarks = [regBookmark, ampBookmark, vigilanceBookmark].filter(
+    bookmark => bookmark.visible && bookmark.orientation === 'top'
+  )
+  const bottomBookmarks = [regBookmark, ampBookmark, vigilanceBookmark].filter(
+    bookmark => bookmark.visible && bookmark.orientation === 'bottom'
+  )
+
+  const filteredAmps = useAppSelector(state => getFilteredAmps(state.dashboard, filters?.amps))
+  const filteredRegulatoryAreas = useAppSelector(state =>
+    getFilteredRegulatoryAreas(state.dashboard, filters?.regulatoryThemes)
+  )
+  const filteredVigilanceAreas = useAppSelector(state => getFilteredVigilanceAreas(state.dashboard, filters))
+
+  const [columnWidth, setColumnWidth] = useState<number | undefined>(undefined)
+
+  useObserver(columnRef, [
+    { ref: regulatoryAreaRef, setState: setRegBookmark, state: regBookmark },
+    { ref: ampRef, setState: setAmpBookmark, state: ampBookmark },
+    { ref: vigilanceAreaRef, setState: setVigilanceBookmark, state: vigilanceBookmark }
+  ])
+
+  useEffect(() => {
+    setIsMount(true)
+  }, [])
+
+  useEffect(() => {
+    if (isMount) {
+      setColumnWidth(columnRef.current?.clientWidth)
+    }
+  }, [isMount])
+
+  return (
+    <>
+      {isMount && (
+        <BaseColumn ref={columnRef} className={className}>
+          <Bookmark bottomBookmarks={bottomBookmarks} columnWidth={columnWidth} topBookmarks={topBookmarks} />
+          <RegulatoryAreas
+            ref={regulatoryAreaRef}
+            columnWidth={columnWidth ?? 0}
+            isExpanded={expandedAccordion === Dashboard.Block.REGULATORY_AREAS}
+            isSelectedAccordionOpen={isSelectedAccordionOpen}
+            regulatoryAreas={filteredRegulatoryAreas ?? []}
+            selectedRegulatoryAreaIds={dashboard.dashboard.regulatoryAreaIds}
+            setExpandedAccordion={() => onExpandedAccordionClick(Dashboard.Block.REGULATORY_AREAS)}
+          />
+
+          <Amps
+            ref={ampRef}
+            amps={filteredAmps ?? []}
+            columnWidth={columnWidth ?? 0}
+            isExpanded={expandedAccordion === Dashboard.Block.AMP}
+            isSelectedAccordionOpen={isSelectedAccordionOpen}
+            selectedAmpIds={dashboard.dashboard.ampIds}
+            setExpandedAccordion={() => onExpandedAccordionClick(Dashboard.Block.AMP)}
+          />
+          <VigilanceAreas
+            ref={vigilanceAreaRef}
+            columnWidth={columnWidth ?? 0}
+            isExpanded={expandedAccordion === Dashboard.Block.VIGILANCE_AREAS}
+            isSelectedAccordionOpen={isSelectedAccordionOpen}
+            selectedVigilanceAreaIds={dashboard.dashboard.vigilanceAreaIds}
+            setExpandedAccordion={() => onExpandedAccordionClick(Dashboard.Block.VIGILANCE_AREAS)}
+            vigilanceAreas={filteredVigilanceAreas ?? []}
+          />
+        </BaseColumn>
+      )}
+    </>
+  )
+}

frontend/src/features/Dashboard/components/DashboardForm/Columns/SecondColumn.tsx

@@ -0,0 +1,92 @@
+import { getFilteredReportings, type DashboardType } from '@features/Dashboard/slice'
+import { Dashboard } from '@features/Dashboard/types'
+import { useAppSelector } from '@hooks/useAppSelector'
+import { useEffect, useRef, useState } from 'react'
+
+import { Bookmark, type BookmarkType } from '../Bookmark'
+import { Reportings } from '../Reportings'
+import { getReportingFilters } from '../slice'
+import { TerritorialPressure } from '../TerritorialPressure'
+import { useObserver } from '../useObserver'
+import { BaseColumn } from './style'
+import { type ColumnProps } from './utils'
+
+type SecondColumnProps = {
+  dashboardForm: [string, DashboardType]
+} & ColumnProps
+export function SecondColumn({
+  className,
+  dashboardForm: [key, dashboard],
+  expandedAccordion,
+  isSelectedAccordionOpen,
+  onExpandedAccordionClick
+}: SecondColumnProps) {
+  const [isMount, setIsMount] = useState<boolean>(false)
+  const reportingFilters = useAppSelector(state => getReportingFilters(state.dashboardFilters, key))
+  const filteredReportings = useAppSelector(state => getFilteredReportings(state.dashboard, reportingFilters))
+
+  const columnRef = useRef<HTMLDivElement>(null)
+  const territorialPressureRef = useRef<HTMLDivElement>(null)
+  const reportingRef = useRef<HTMLDivElement>(null)
+
+  const [territorialPressionBookmark, setTerritorialPressionBookmark] = useState<BookmarkType>({
+    ref: territorialPressureRef,
+    title: 'Pression territoriale',
+    visible: false
+  })
+
+  const [reportingBookmark, setReportingBookmark] = useState<BookmarkType>({
+    ref: reportingRef,
+    title: 'Signalements',
+    visible: false
+  })
+
+  const topBookmarks = [territorialPressionBookmark, reportingBookmark].filter(
+    bookmark => bookmark.visible && bookmark.orientation === 'top'
+  )
+  const bottomBookmarks = [territorialPressionBookmark].filter(
+    bookmark => bookmark.visible && bookmark.orientation === 'bottom'
+  )
+
+  const [columnWidth, setColumnWidth] = useState<number | undefined>(undefined)
+
+  useObserver(columnRef, [
+    { ref: territorialPressureRef, setState: setTerritorialPressionBookmark, state: territorialPressionBookmark },
+    { ref: reportingRef, setState: setReportingBookmark, state: reportingBookmark }
+  ])
+
+  useEffect(() => {
+    setIsMount(true)
+  }, [])
+
+  useEffect(() => {
+    if (isMount) {
+      setColumnWidth(columnRef.current?.clientWidth)
+    }
+  }, [isMount])
+
+  return (
+    <>
+      {isMount && (
+        <BaseColumn ref={columnRef} className={className}>
+          <Bookmark bottomBookmarks={bottomBookmarks} columnWidth={columnWidth} topBookmarks={topBookmarks} />
+
+          <TerritorialPressure
+            ref={territorialPressureRef}
+            isExpanded={expandedAccordion === Dashboard.Block.TERRITORIAL_PRESSURE}
+            setExpandedAccordion={() => onExpandedAccordionClick(Dashboard.Block.TERRITORIAL_PRESSURE)}
+          />
+
+          <Reportings
+            ref={reportingRef}
+            isExpanded={expandedAccordion === Dashboard.Block.REPORTINGS}
+            isSelectedAccordionOpen={isSelectedAccordionOpen}
+            reportings={filteredReportings ?? []}
+            selectedReportingIds={dashboard.dashboard.reportingIds}
+            setExpandedAccordion={() => onExpandedAccordionClick(Dashboard.Block.REPORTINGS)}
+          />
+        </BaseColumn>
+      )}
+    </>
+  )
+}