54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { useState, useRef, useEffect } from "react";
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { Bell } from "lucide-react";
|
|
import { getUnreadCount } from "../api/notifications";
|
|
import NotificationDropdown from "./NotificationDropdown";
|
|
|
|
export default function NotificationBell() {
|
|
const [open, setOpen] = useState(false);
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const queryClient = useQueryClient();
|
|
|
|
const { data } = useQuery({
|
|
queryKey: ["notifications", "unread-count"],
|
|
queryFn: getUnreadCount,
|
|
refetchInterval: 30000, // Poll every 30 seconds
|
|
});
|
|
|
|
const count = data?.unread_count ?? 0;
|
|
|
|
// Close dropdown on outside click
|
|
useEffect(() => {
|
|
function handleClick(e: MouseEvent) {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) {
|
|
setOpen(false);
|
|
}
|
|
}
|
|
document.addEventListener("mousedown", handleClick);
|
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
}, []);
|
|
|
|
return (
|
|
<div ref={ref} className="relative">
|
|
<button
|
|
onClick={() => {
|
|
setOpen(!open);
|
|
if (!open) {
|
|
queryClient.invalidateQueries({ queryKey: ["notifications"] });
|
|
}
|
|
}}
|
|
className="relative rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-800 hover:text-white"
|
|
>
|
|
<Bell className="h-5 w-5" />
|
|
{count > 0 && (
|
|
<span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white">
|
|
{count > 99 ? "99+" : count}
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
{open && <NotificationDropdown onClose={() => setOpen(false)} />}
|
|
</div>
|
|
);
|
|
}
|