- {Object.entries(groupedNotifications).map(([date, dateNotifications]) => (
-
-
-
- {date}
-
-
-
- {dateNotifications.map(notification => (
- {
- if (onMarkAsRead) {
- onMarkAsRead(notification.id);
- }
- if (onNotificationClick) {
- onNotificationClick(notification);
- }
- }}
- showUnreadIndicator={true}
- />
- ))}
-
-
- ))}
+
+ {SECTION_CONFIG.map(section => {
+ const sectionItems = groupedNotifications[section.key];
+
+ return (
+
+
+
+ {section.title}
+
+
+
+ {sectionItems.length === 0 ? (
+
+
+ {section.emptyTitle}
+
+
+ {section.emptyDescription}
+
+
+ {sectionItems.map(notification => (
+
+ {
+ if (onMarkAsRead) {
+ onMarkAsRead(notification.id);
+ }
+ if (onNotificationClick) {
+ onNotificationClick(notification);
+ }
+ }}
+ showUnreadIndicator={true}
+ disableNavigation={true}
+ />
+
+ ))}
+
+
+ )}
+
+ );
+ })}
);
};
diff --git a/components/providers/notification-provider.tsx b/components/providers/notification-provider.tsx
new file mode 100644
index 00000000..bea01341
--- /dev/null
+++ b/components/providers/notification-provider.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { authClient } from '@/lib/auth-client';
+import {
+ useNotifications,
+ type UseNotificationsReturn,
+} from '@/hooks/useNotifications';
+import { useNotificationPolling } from '@/hooks/use-notification-polling';
+
+const NotificationContext = createContext
(null);
+
+export function NotificationProvider({ children }: { children: ReactNode }) {
+ const { data: session } = authClient.useSession();
+ const userId = session?.user?.id;
+
+ const notificationsHook = useNotifications({
+ userId,
+ limit: 50,
+ autoFetch: Boolean(userId),
+ });
+
+ useNotificationPolling(notificationsHook, {
+ interval: 30000,
+ enabled: Boolean(userId),
+ });
+
+ const value = useMemo(() => notificationsHook, [notificationsHook]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useNotificationCenter(): UseNotificationsReturn {
+ const context = useContext(NotificationContext);
+ if (!context) {
+ throw new Error(
+ 'useNotificationCenter must be used within a NotificationProvider'
+ );
+ }
+ return context;
+}
diff --git a/hooks/use-notification-polling.ts b/hooks/use-notification-polling.ts
index 210c1294..68ac2052 100644
--- a/hooks/use-notification-polling.ts
+++ b/hooks/use-notification-polling.ts
@@ -6,15 +6,11 @@ interface UseNotificationPollingOptions {
enabled?: boolean;
}
-/**
- * Hook to poll for new notifications at a specified interval
- * Only polls when component is mounted and enabled is true
- */
export const useNotificationPolling = (
notificationsHook: UseNotificationsReturn,
options: UseNotificationPollingOptions = {}
): void => {
- const { interval = 900000000000000, enabled = false } = options;
+ const { interval = 30000, enabled = false } = options;
const intervalRef = useRef | null>(null);
const { refetch } = notificationsHook;
@@ -23,11 +19,8 @@ export const useNotificationPolling = (
return;
}
- // Poll for new notifications at specified interval
intervalRef.current = setInterval(() => {
- refetch().catch(() => {
- // Silently fail polling errors to avoid disrupting UX
- });
+ refetch().catch(() => {});
}, interval);
return () => {
diff --git a/hooks/useNotifications.ts b/hooks/useNotifications.ts
index e9eb1812..8542a355 100644
--- a/hooks/useNotifications.ts
+++ b/hooks/useNotifications.ts
@@ -4,6 +4,7 @@ import { getNotifications } from '@/lib/api/notifications';
import { Notification } from '@/types/notifications';
interface UseNotificationsOptions {
+ userId?: string;
page?: number;
limit?: number;
autoFetch?: boolean;
@@ -28,14 +29,16 @@ export interface UseNotificationsReturn {
export function useNotifications(
input?: string | UseNotificationsOptions
): UseNotificationsReturn {
- // Handle overloaded arguments
- const userId = typeof input === 'string' ? input : undefined;
+ const userId =
+ typeof input === 'string' ? input : (input?.userId as string | undefined);
const options = typeof input === 'object' ? input : {};
const { page: initialPage = 1, limit = 10, autoFetch = true } = options;
+ const shouldConnectSocket = Boolean(userId);
const { socket, isConnected } = useSocket({
namespace: '/notifications',
userId,
+ autoConnect: shouldConnectSocket,
});
const [notifications, setNotifications] = useState([]);
@@ -45,7 +48,6 @@ export function useNotifications(
const [total, setTotal] = useState(0);
const [currentPage, setCurrentPage] = useState(initialPage);
- // Fetch notifications with pagination
const fetchNotifications = useCallback(async () => {
try {
setLoading(true);
@@ -53,7 +55,6 @@ export function useNotifications(
const response = await getNotifications(currentPage, limit);
if (response && Array.isArray(response.notifications)) {
- // Sort notifications by createdAt desc to ensure correct order
const sorted = [...response.notifications].sort(
(a, b) =>
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
@@ -71,27 +72,33 @@ export function useNotifications(
}
}, [currentPage, limit]);
- // Initial fetch
useEffect(() => {
if (autoFetch) {
fetchNotifications();
}
}, [fetchNotifications, autoFetch]);
- // Request initial unread count when socket connects
+ useEffect(() => {
+ if (!userId) {
+ setNotifications([]);
+ setUnreadCount(0);
+ setTotal(0);
+ setError(null);
+ setLoading(false);
+ }
+ }, [userId]);
+
useEffect(() => {
if (socket && isConnected) {
socket.emit('get-unread-count');
}
}, [socket, isConnected]);
- // Set up event listeners
useEffect(() => {
if (!socket) {
return;
}
- // Listen for new notifications
const handleNotification = (notification: any) => {
const normalizedNotification: Notification = {
...notification,
@@ -103,15 +110,11 @@ export function useNotifications(
};
setNotifications(prev => {
- // Avoid duplicates
const exists = prev.some(n => n.id === normalizedNotification.id);
if (exists) {
return prev;
}
- // Add new notification and resort
- // Note: For pagination, real-time updates might be tricky.
- // We typically add it to the top if we are on page 1.
if (currentPage === 1) {
return [normalizedNotification, ...prev];
}
@@ -120,12 +123,10 @@ export function useNotifications(
setUnreadCount(prev => prev + 1);
};
- // Listen for unread count updates
const handleUnreadCount = (data: { count: number }) => {
setUnreadCount(data.count);
};
- // Listen for notification updates
const handleNotificationUpdated = (data: any) => {
const id = data.notificationId || data.id || data._id;
if (id) {
@@ -135,7 +136,6 @@ export function useNotifications(
}
};
- // Listen for all notifications read
const handleAllRead = () => {
setNotifications(prev => prev.map(notif => ({ ...notif, read: true })));
setUnreadCount(0);
@@ -161,10 +161,20 @@ export function useNotifications(
}, [socket, currentPage]);
const markAsRead = (notificationId: string) => {
+ const didChangeUnread = notifications.some(
+ notification => notification.id === notificationId && !notification.read
+ );
setNotifications(prev =>
- prev.map(n => (n.id === notificationId ? { ...n, read: true } : n))
+ prev.map(n => {
+ if (n.id === notificationId) {
+ return { ...n, read: true };
+ }
+ return n;
+ })
);
- setUnreadCount(prev => Math.max(0, prev - 1));
+ if (didChangeUnread) {
+ setUnreadCount(prev => Math.max(0, prev - 1));
+ }
if (socket && isConnected) {
socket.emit('mark-read', { notificationId });
@@ -172,11 +182,24 @@ export function useNotifications(
};
const markNotificationAsRead = async (ids: string[]) => {
- // Optimistic
+ const unreadNotificationIds = new Set(
+ notifications.filter(notification => !notification.read).map(n => n.id)
+ );
+ const changedUnreadCount = ids.filter(id =>
+ unreadNotificationIds.has(id)
+ ).length;
+
setNotifications(prev =>
- prev.map(n => (ids.includes(n.id) ? { ...n, read: true } : n))
+ prev.map(n => {
+ if (ids.includes(n.id)) {
+ return { ...n, read: true };
+ }
+ return n;
+ })
);
- // Note: unread count update is approximate here, ideally we wait for socket update
+ if (changedUnreadCount > 0) {
+ setUnreadCount(prev => Math.max(0, prev - changedUnreadCount));
+ }
if (socket && isConnected) {
ids.forEach(id => socket.emit('mark-read', { notificationId: id }));