Implemented the notification hooks

Author: KAMALDEEN333

frontend/components/notifications/NotificationBell.tsx

@@ -10,7 +10,7 @@ import { useMarkAllRead } from "@/lib/react-query/hooks/notifications/useMarkAll
 export default function NotificationBell() {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
-  const { data, isLoading, isError } = useGetNotifications(10);
+  const { data, isLoading, isError } = useGetNotifications(1, 10);
   const markAsRead = useMarkNotificationRead();
   const markAllAsRead = useMarkAllRead();
 

frontend/lib/react-query/hooks/notifications/useGetNotifications.ts

@@ -28,12 +28,13 @@ interface NotificationsResponse {
   unreadCount: number;
 }
 
-export const useGetNotifications = (limit = 10) => {
+export const useGetNotifications = (page = 1, limit = 10) => {
   return useQuery({
-    queryKey: queryKeys.notifications.list({ limit }),
+    queryKey: queryKeys.notifications.list({ page, limit }),
     queryFn: () =>
       apiClient.get<NotificationsResponse>(
-        `/notifications?limit=${limit}`
+        `/notifications?page=${page}&limit=${limit}`
       ),
+    staleTime: 30000, // 30 seconds
   });
 };

frontend/lib/react-query/hooks/notifications/useMarkAllRead.ts

@@ -9,33 +9,11 @@ export const useMarkAllRead = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async () => {
-      // Fetch all unread notifications
-      const response = await apiClient.get<{
-        message: string;
-        data: Array<{ id: string; isRead: boolean }>;
-        meta: { total: number; page: number; limit: number; totalPages: number };
-        unreadCount: number;
-      }>("/notifications?limit=100");
-
-      // Mark each unread notification as read
-      const unreadNotifications = response.data.filter(
-        (notification) => !notification.isRead
-      );
-
-      await Promise.all(
-        unreadNotifications.map((notification) =>
-          apiClient.patch(`/notifications/${notification.id}/read`)
-        )
-      );
-
-      return { markedCount: unreadNotifications.length };
-    },
-    onSuccess: (data) => {
+    mutationFn: () =>
+      apiClient.patch<{ message: string }>("/notifications/read-all"),
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: queryKeys.notifications.all });
-      if (data.markedCount > 0) {
-        toast.success(`Marked ${data.markedCount} notification(s) as read`);
-      }
+      toast.success("All notifications marked as read");
     },
     onError: (error: Error) => {
       toast.error(error.message || "Failed to mark all notifications as read");

frontend/lib/react-query/keys/queryKeys.ts

@@ -31,9 +31,9 @@ export const queryKeys = {
 
     /**
      * Paginated list key.
-     * @example queryKeys.notifications.list({ limit: 10 })
+     * @example queryKeys.notifications.list({ page: 1, limit: 10 })
      */
-    list: (params: { limit?: number }) =>
+    list: (params: { page?: number; limit?: number }) =>
       ["notifications", "list", params] as const,
   },
 };