refacto: Create component Menu

MTES-MCT · Sep 18, 2024 · a6d6b91 · a6d6b91
1 parent c95243e
commit a6d6b91
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 83 deletions.
diff --git a/frontend/src/components/Menu.tsx b/frontend/src/components/Menu.tsx
@@ -0,0 +1,95 @@
+import { Account } from '@features/Account/components/Account'
+import { ControlUnitListButton } from '@features/ControlUnit/components/ControlUnitListButton'
+import { DashboardMapButton } from '@features/Dashboard/components/DashboardMapButton'
+import { InterestPointMapButton } from '@features/InterestPoint/components/InterestPointMapButton'
+import { MeasurementMapButton } from '@features/map/tools/measurements/MeasurementMapButton'
+import { MissionsMenu } from '@features/missions/MissionsButton'
+import { ReportingsButton } from '@features/Reportings/components/ReportingsButton'
+import { SearchSemaphoreButton } from '@features/Semaphore/components/SearchSemaphoreButton'
+import { useAppSelector } from '@hooks/useAppSelector'
+import styled from 'styled-components'
+
+type MenuProps = {
+ isSuperUser: boolean
+}
+
+export function Menu({ isSuperUser }: MenuProps) {
+ const displaySearchSemaphoreButton = useAppSelector(state => state.global.displaySearchSemaphoreButton)
+
+ const displayInterestPoint = useAppSelector(state => state.global.displayInterestPoint)
+ const displayMeasurement = useAppSelector(state => state.global.displayMeasurement)
+ const displayMissionMenuButton = useAppSelector(state => state.global.displayMissionMenuButton)
+ const displayReportingsButton = useAppSelector(state => state.global.displayReportingsButton)
+ const displayAccountButton = useAppSelector(state => state.global.displayAccountButton)
+ const displayDashboard = useAppSelector(state => state.global.displayDashboard)
+ const isRightMenuControlUnitListButtonVisible = useAppSelector(
+ state => state.global.displayRightMenuControlUnitListButton
+ )
+ const hasFullHeightRightDialogOpen = useAppSelector(state => state.mainWindow.hasFullHeightRightDialogOpen)
+ const isRightMenuOpened = useAppSelector(state => state.mainWindow.isRightMenuOpened)
+
+ return (
+ <ButtonsWrapper $hasFullHeightRightDialogOpen={hasFullHeightRightDialogOpen} $isRightMenuOpened={isRightMenuOpened}>
+ {displayMissionMenuButton && isSuperUser && (
+ <li>
+ <MissionsMenu />
+ </li>
+ )}
+ {displayReportingsButton && isSuperUser && (
+ <li>
+ <ReportingsButton />
+ </li>
+ )}
+ {displaySearchSemaphoreButton && (
+ <li>
+ <SearchSemaphoreButton />
+ </li>
+ )}
+ {isRightMenuControlUnitListButtonVisible && isSuperUser && (
+ <li>
+ <ControlUnitListButton />
+ </li>
+ )}
+ {displayDashboard && isSuperUser && (
+ <li>
+ <DashboardMapButton />
+ </li>
+ )}
+
+ <ToolButtons>
+ {displayMeasurement && isSuperUser && <MeasurementMapButton />}
+ {displayInterestPoint && isSuperUser && (
+ <div>
+ <InterestPointMapButton />
+ </div>
+ )}
+ {displayAccountButton && (
+ <div>
+ <Account />
+ </div>
+ )}
+ </ToolButtons>
+ </ButtonsWrapper>
+ )
+}
+
+const ButtonsWrapper = styled.menu<{
+ $hasFullHeightRightDialogOpen: boolean
+ $isRightMenuOpened: boolean
+}>`
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ row-gap: 8px;
+ top: 82px;
+ right: ${p => (!p.$hasFullHeightRightDialogOpen || p.$isRightMenuOpened ? 10 : 0)}px;
+ transition: right 0.3s ease-out;
+ list-style: none;
+`
+
+const ToolButtons = styled.div`
+ margin-top: 24px;
+ display: flex;
+ flex-direction: column;
+ row-gap: 8px;
+`
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
@@ -1,11 +1,8 @@
-import { Account } from '@features/Account/components/Account'
-import { DashboardMapButton } from '@features/Dashboard/components/DashboardMapButton'
+import { Menu } from '@components/Menu'
 import { BannerStack } from '@features/MainWindow/components/BannerStack'
 import { AttachMissionToReportingModal } from '@features/Reportings/components/ReportingForm/AttachMission/AttachMissionToReportingModal'
 import { REPORTING_EVENT_UNSYNCHRONIZED_PROPERTIES } from '@features/Reportings/components/ReportingForm/constants'
 import { useListenReportingEventUpdates } from '@features/Reportings/components/ReportingForm/hooks/useListenReportingEventUpdates'
-import { ReportingsButton } from '@features/Reportings/components/ReportingsButton'
-import { SearchSemaphoreButton } from '@features/Semaphore/components/SearchSemaphoreButton'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useGetCurrentUserAuthorizationQueryOverride } from '@hooks/useGetCurrentUserAuthorizationQueryOverride'
 import { reportingActions } from 'domain/shared_slices/reporting'
@@ -17,17 +14,13 @@ import styled from 'styled-components'
 
 import { ReportingContext } from '../domain/shared_slices/Global'
 import { ControlUnitDialog } from '../features/ControlUnit/components/ControlUnitDialog'
-import { ControlUnitListButton } from '../features/ControlUnit/components/ControlUnitListButton'
 import { Healthcheck } from '../features/healthcheck/Healthcheck'
-import { InterestPointMapButton } from '../features/InterestPoint/components/InterestPointMapButton'
 import { LayersSidebar } from '../features/layersSelector'
 import { LocateOnMap } from '../features/LocateOnMap'
 import { Map } from '../features/map'
 import { DrawModal } from '../features/map/draw/DrawModal'
 import { RightMenuOnHoverArea } from '../features/map/shared/RightMenuOnHoverArea'
-import { MeasurementMapButton } from '../features/map/tools/measurements/MeasurementMapButton'
 import { AttachReportingToMissionModal } from '../features/missions/MissionForm/AttachReporting/AttachReportingToMissionModal'
-import { MissionsMenu } from '../features/missions/MissionsButton'
 import { Reportings } from '../features/Reportings'
 import { SideWindowLauncher } from '../features/SideWindow/SideWindowLauncher'
 import { useAppSelector } from '../hooks/useAppSelector'
@@ -40,23 +33,13 @@ export function HomePage() {
  const isSuperUser = useMemo(() => user?.isSuperUser, [user])
 
  const displayDrawModal = useAppSelector(state => state.global.displayDrawModal)
- const displayInterestPoint = useAppSelector(state => state.global.displayInterestPoint)
  const displayLocateOnMap = useAppSelector(state => state.global.displayLocateOnMap)
- const displayMeasurement = useAppSelector(state => state.global.displayMeasurement)
- const displayMissionMenuButton = useAppSelector(state => state.global.displayMissionMenuButton)
- const displayReportingsButton = useAppSelector(state => state.global.displayReportingsButton)
- const displayAccountButton = useAppSelector(state => state.global.displayAccountButton)
- const displayDashboard = useAppSelector(state => state.global.displayDashboard)
- const isRightMenuControlUnitListButtonVisible = useAppSelector(
- state => state.global.displayRightMenuControlUnitListButton
- )
- const displaySearchSemaphoreButton = useAppSelector(state => state.global.displaySearchSemaphoreButton)
+
  const isControlUnitDialogVisible = useAppSelector(state => state.global.isControlUnitDialogVisible)
 
  const selectedMissions = useAppSelector(state => state.missionForms.missions)
  const reportings = useAppSelector(state => state.reporting.reportings)
- const hasFullHeightRightDialogOpen = useAppSelector(state => state.mainWindow.hasFullHeightRightDialogOpen)
- const isRightMenuOpened = useAppSelector(state => state.mainWindow.isRightMenuOpened)
+
  const reportingEvent = useListenReportingEventUpdates()
 
  const hasAtLeastOneMissionFormDirty = useMemo(
@@ -112,50 +95,8 @@ export function HomePage() {
  {displayLocateOnMap && <LocateOnMap />}
  {isControlUnitDialogVisible && isSuperUser && <ControlUnitDialog />}
 
- <ButtonsWrapper
- $hasFullHeightRightDialogOpen={hasFullHeightRightDialogOpen}
- $isRightMenuOpened={isRightMenuOpened}
- >
- {displayMissionMenuButton && isSuperUser && (
- <div>
- <MissionsMenu />
- </div>
- )}
- {displayReportingsButton && isSuperUser && (
- <div>
- <ReportingsButton />
- </div>
- )}
- {displaySearchSemaphoreButton && (
- <div>
- <SearchSemaphoreButton />
- </div>
- )}
- {isRightMenuControlUnitListButtonVisible && isSuperUser && (
- <div>
- <ControlUnitListButton />
- </div>
- )}
- {displayDashboard && isSuperUser && (
- <div>
- <DashboardMapButton />
- </div>
- )}
-
- <ToolButtons>
- {displayMeasurement && isSuperUser && <MeasurementMapButton />}
- {displayInterestPoint && isSuperUser && (
- <div>
- <InterestPointMapButton />
- </div>
- )}
- {displayAccountButton && (
- <div>
- <Account />
- </div>
- )}
- </ToolButtons>
- </ButtonsWrapper>
+ <Menu isSuperUser={isSuperUser} />
+
  <Reportings key="reportings-on-map" context={ReportingContext.MAP} />
 
  <ToastContainer containerId="map" />
@@ -173,22 +114,3 @@ const Wrapper = styled.div`
  overflow-y: hidden;
  overflow-x: hidden;
 `
-const ButtonsWrapper = styled.div<{
- $hasFullHeightRightDialogOpen: boolean
- $isRightMenuOpened: boolean
-}>`
- position: absolute;
- display: flex;
- flex-direction: column;
- row-gap: 8px;
- top: 82px;
- right: ${p => (!p.$hasFullHeightRightDialogOpen || p.$isRightMenuOpened ? 10 : 0)}px;
- transition: right 0.3s ease-out;
-`
-
-const ToolButtons = styled.div`
- margin-top: 24px;
- display: flex;
- flex-direction: column;
- row-gap: 8px;
-`