94 lines
2.3 KiB
TypeScript
94 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { MessageCircle } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useSession } from "@/lib/hooks/use-session";
|
|
import { MessagesPanel } from "./MessagesPanel";
|
|
|
|
interface MessagesBellProps {
|
|
className?: string;
|
|
}
|
|
|
|
export function MessagesBell({ className }: MessagesBellProps) {
|
|
const { user } = useSession();
|
|
const [unreadUsersCount, setUnreadUsersCount] = useState(0);
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
// Buscar contagem de usuários únicos com mensagens não vistas
|
|
const fetchUnreadCount = async () => {
|
|
if (!user) return;
|
|
|
|
try {
|
|
const res = await fetch("/api/chats/unread-count", {
|
|
credentials: "include",
|
|
});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
setUnreadUsersCount(data.count);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("[CHAT-DEBUG] Erro ao buscar contagem de chats:", error);
|
|
}
|
|
};
|
|
|
|
// Polling automático a cada 30 segundos
|
|
useEffect(() => {
|
|
if (!user) return;
|
|
|
|
fetchUnreadCount();
|
|
|
|
const interval = setInterval(() => {
|
|
fetchUnreadCount();
|
|
}, 30000); // 30 segundos
|
|
|
|
return () => clearInterval(interval);
|
|
}, [user, fetchUnreadCount]);
|
|
|
|
// Atualizar contagem quando abrir/fechar
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
fetchUnreadCount();
|
|
}
|
|
}, [isOpen, fetchUnreadCount]);
|
|
|
|
// Marcar como visto quando abrir
|
|
const handleOpenChange = (open: boolean) => {
|
|
setIsOpen(open);
|
|
};
|
|
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={`relative ${className}`}
|
|
onClick={() => handleOpenChange(true)}
|
|
>
|
|
<MessageCircle className="h-5 w-5" />
|
|
{unreadUsersCount > 0 && (
|
|
<Badge
|
|
variant="destructive"
|
|
className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs rounded-full animate-pulse"
|
|
>
|
|
{unreadUsersCount > 99 ? "99+" : unreadUsersCount}
|
|
</Badge>
|
|
)}
|
|
</Button>
|
|
|
|
<MessagesPanel
|
|
open={isOpen}
|
|
onOpenChange={handleOpenChange}
|
|
onUnreadCountChange={setUnreadUsersCount}
|
|
/>
|
|
</>
|
|
);
|
|
}
|