import { useState, useRef, useEffect } from "react"; import { useNavigate, useLocation, matchPath } from "react-router-dom"; import { useQuery } from "@tanstack/react-query"; import { listBands } from "../api/bands"; import { getInitials } from "../utils"; export function TopBar() { const navigate = useNavigate(); const location = useLocation(); const [dropdownOpen, setDropdownOpen] = useState(false); const dropdownRef = useRef(null); const { data: bands } = useQuery({ queryKey: ["bands"], queryFn: listBands }); // Derive active band from URL const bandMatch = matchPath("/bands/:bandId/*", location.pathname) ?? matchPath("/bands/:bandId", location.pathname); const activeBandId = bandMatch?.params?.bandId ?? null; const activeBand = bands?.find((b) => b.id === activeBandId) ?? null; // Close dropdown on outside click useEffect(() => { if (!dropdownOpen) return; function handleClick(e: MouseEvent) { if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) { setDropdownOpen(false); } } document.addEventListener("mousedown", handleClick); return () => document.removeEventListener("mousedown", handleClick); }, [dropdownOpen]); return (
{dropdownOpen && bands && (
{bands.map((band) => ( ))}
)}
); }