48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useEffect, useState } from 'react';
|
||
|
|
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||
|
|
|
||
|
|
import { useSocket } from '@/providers/socket-provider';
|
||
|
|
import { apiFetch } from '@/lib/api/client';
|
||
|
|
|
||
|
|
export function useNotifications() {
|
||
|
|
const socket = useSocket();
|
||
|
|
const queryClient = useQueryClient();
|
||
|
|
const [unreadCount, setUnreadCount] = useState(0);
|
||
|
|
|
||
|
|
// Initial unread count
|
||
|
|
const { data } = useQuery<{ count: number }>({
|
||
|
|
queryKey: ['notifications', 'unread-count'],
|
||
|
|
queryFn: () => apiFetch('/api/v1/notifications/unread-count'),
|
||
|
|
staleTime: 30_000,
|
||
|
|
});
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (data) setUnreadCount(data.count);
|
||
|
|
}, [data]);
|
||
|
|
|
||
|
|
// Socket listeners
|
||
|
|
useEffect(() => {
|
||
|
|
if (!socket) return;
|
||
|
|
|
||
|
|
const handleNew = () => {
|
||
|
|
queryClient.invalidateQueries({ queryKey: ['notifications'] });
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleCount = (payload: { count: number }) => {
|
||
|
|
setUnreadCount(payload.count);
|
||
|
|
};
|
||
|
|
|
||
|
|
socket.on('notification:new' as any, handleNew);
|
||
|
|
socket.on('notification:unreadCount' as any, handleCount);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
socket.off('notification:new' as any, handleNew);
|
||
|
|
socket.off('notification:unreadCount' as any, handleCount);
|
||
|
|
};
|
||
|
|
}, [socket, queryClient]);
|
||
|
|
|
||
|
|
return { unreadCount };
|
||
|
|
}
|