fix: Move open state up

armada-ths · Nov 17, 2024 · a72fe68 · a72fe68
1 parent d0ea033
commit a72fe68
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/src/app/student/map/_components/MainView.tsx b/src/app/student/map/_components/MainView.tsx
@@ -75,12 +75,15 @@ export default function MainView({
     Array.from(boothsById.values())
   )
   const [editorMode, setEditorMode] = useState(false)
+  const [drawerOpen, setDrawerOpen] = useState(false)
 
   return (
     <div className="relative flex h-full w-full">
       {!editorMode ? (
         <>
           <Sidebar
+            open={drawerOpen}
+            setOpen={setDrawerOpen}
             boothsById={boothsById}
             setActiveBoothId={setActiveBoothId}
             activeDrawerBoothId={activeDrawerBoothId}
@@ -98,6 +101,8 @@ export default function MainView({
               location={location}
               activeBoothId={activeBoothId}
               setActiveBoothId={setActiveBoothId}
+              setActiveDrawerBoothId={setActiveDrawerBoothId}
+              openDrawer={() => setDrawerOpen(true)}
               hoveredBoothId={hoveredBoothId}
               setHoveredBoothId={setHoveredBoothId}
               filteredBoothIds={filteredBooths.map(booth => booth.id)}

diff --git a/src/app/student/map/_components/MapComponent.tsx b/src/app/student/map/_components/MapComponent.tsx
@@ -34,19 +34,23 @@ export function MapComponent({
   location,
   activeBoothId,
   setActiveBoothId,
+  setActiveDrawerBoothId,
   hoveredBoothId,
   setHoveredBoothId,
   initialView,
-  filteredBoothIds
+  filteredBoothIds,
+  openDrawer
 }: {
   boothsById: BoothMap
   location: Location
-  activeBoothId: BoothID | null
   hoveredBoothId: BoothID | null
+  activeBoothId: BoothID | null
   setActiveBoothId: (id: BoothID | null) => void
+  setActiveDrawerBoothId: (id: BoothID | null) => void
   setHoveredBoothId: (id: BoothID | null) => void
   initialView: { longitude: number; latitude: number; zoom: number }
   filteredBoothIds: BoothID[]
+  openDrawer: () => void
 }) {
   const searchParams = useSearchParams()
 
@@ -139,6 +143,8 @@ export function MapComponent({
     const feature = e.features?.[0] as GeoJsonBooth | undefined // no other features for now
     if (feature) {
       setActiveBoothId(feature.properties.id)
+      setActiveDrawerBoothId(feature.properties.id)
+      openDrawer()
     } else {
       setActiveBoothId(null) // outside click
     }

diff --git a/src/app/student/map/_components/Sidebar.tsx b/src/app/student/map/_components/Sidebar.tsx
@@ -54,7 +54,9 @@ export default function Sidebar({
   setHoveredBoothId,
   currentLocation,
   filteredBooths,
-  setFilteredBooths
+  setFilteredBooths,
+  open,
+  setOpen
 }: {
   boothsById: BoothMap
   setActiveDrawerBoothId: (id: BoothID | null) => void
@@ -65,10 +67,11 @@ export default function Sidebar({
   currentLocation: LocationId
   filteredBooths: Booth[]
   setFilteredBooths: (booths: Booth[]) => void
+  open: boolean
+  setOpen: (open: boolean) => void
 }) {
   const { width } = useScreenSize()
   const smallScreen = width ? width <= 800 : false
-  const [open, setOpen] = useState<boolean>(false)
   const [showFilters, setShowFilters] = useState(false)
 
   const searchInputRef = useRef<HTMLInputElement>(null)