(null)
+
+ function makeFilter(key: FilterKey, label: string): Filter {
+ return {
+ key,
+ label,
+ selected: [],
+ items: getAllFilterOptions(key, booths)
+ }
+ }
+
+ const [filters, setFilters] = useState<{ [K in FilterKey]: Filter }>({
+ employments: makeFilter("employments", "Employments"),
+ industries: makeFilter("industries", "Industries")
+ })
+
+ function onFilterChange(filter: Filter, newSelection: FilterItem[]) {
+ const newFilters = {
+ ...filters,
+ [filter.key]: { ...filter, selected: newSelection }
+ }
+ setFilters(newFilters)
+ onChange(applyFilters(booths, Object.values(newFilters))) // do filtering and notify the parent
+ }
+
+ function onSearchChange(text: string) {
+ setSearchText(text)
+ if (text.trim() !== "") onChange(filterBySearch(booths, text))
+ else onChange(applyFilters(booths, Object.values(filters))) // apply filters again when input is cleared
+ }
+
+ return (
+
+ onSearchChange(e.target.value)}
+ onKeyDown={e => e.key === "Enter" && inputRef.current?.blur()}
+ />
+ {Object.values(filters).map(f => (
+ onFilterChange(f, selected)}>
+ ))}
+
+ )
+}
diff --git a/src/app/student/map/_components/Sidebar.tsx b/src/app/student/map/_components/Sidebar.tsx
index 36979da..36528a4 100644
--- a/src/app/student/map/_components/Sidebar.tsx
+++ b/src/app/student/map/_components/Sidebar.tsx
@@ -1,26 +1,28 @@
"use client"
-
-import { cn } from "@/lib/utils"
+import ExhibitorDetails from "@/app/student/_components/ExhibitorDetails"
+import { BoothListItem } from "@/app/student/map/_components/BoothListItem"
+import MapListFilteringHeader from "@/app/student/map/_components/MapListFilteringHeader"
+import { BoothID, BoothMap } from "@/app/student/map/lib/booths"
import { useScreenSize } from "@/components/shared/hooks/useScreenSize"
-import { Exhibitor } from "@/components/shared/hooks/api/useExhibitors"
-import { Drawer, DrawerContent, DrawerPortal } from "@/components/ui/drawer"
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
-import { useState, useRef } from "react"
import { Button } from "@/components/ui/button"
+import { Drawer, DrawerContent } from "@/components/ui/drawer"
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
+import { cn } from "@/lib/utils"
import { ChevronsLeft, ChevronsRight } from "lucide-react"
-import { BoothID, BoothMap } from "@/app/student/map/lib/booths"
-import ExhibitorDetails from "@/app/student/_components/ExhibitorDetails"
-
+import { useRef, useState } from "react"
export default function Sidebar({
boothsById,
- activeBoothId
+ activeBoothId,
+ onBoothClick
}: {
boothsById: BoothMap
activeBoothId: BoothID | null
+ onBoothClick: (boothId: BoothID) => void
}) {
const { width } = useScreenSize()
const smallScreen = width ? width <= 800 : false
-
+ const booths = Array.from(boothsById.values())
+ const [filteredBooths, setFilteredBooths] = useState(booths)
if (activeBoothId != null) {
const exhibitor = boothsById.get(activeBoothId)?.exhibitor
if (!exhibitor) {
@@ -35,21 +37,18 @@ export default function Sidebar({
)
}
-
return (
- Filters and stuff
-
- {Array.from(boothsById.values()).map(({ id, exhibitor }) => (
- -
- {exhibitor.name}
-
- ))}
-
+ Search for the booths
+
+
+
+ {filteredBooths.map(booth => (
+
+ ))}
)
}
-
function SidebarContainer({
smallScreen: isMobile,
children
@@ -59,7 +58,6 @@ function SidebarContainer({
}) {
const [open, setOpen] = useState(true)
const drawerRef = useRef(null)
-
if (isMobile) {
return (
)
}
-
return (