feat: create useNotifications hook (#220)

Author: Hestia-Arc

app/providers.tsx

@@ -3,6 +3,13 @@
 import { SessionProvider } from 'next-auth/react';
 import { ReactNode } from 'react';
 import { AuthProvider } from '@/components/providers/auth-provider';
+import { NotificationProvider } from 'react-notification-core';
+import {
+  mockFetchNotifications,
+  mockMarkAsRead,
+  mockMarkAllAsRead,
+  mockDeleteNotification,
+} from '@/lib/mock';
 
 interface ProvidersProps {
   children: ReactNode;
@@ -11,7 +18,21 @@ interface ProvidersProps {
 export function Providers({ children }: ProvidersProps) {
   return (
     <SessionProvider>
-      <AuthProvider>{children}</AuthProvider>
+      <AuthProvider>
+        <NotificationProvider
+          fetchNotifications={mockFetchNotifications}
+          onMarkAsRead={mockMarkAsRead}
+          onMarkAllAsRead={mockMarkAllAsRead}
+          onDeleteNotification={mockDeleteNotification}
+          fetchOptions={{
+            retryCount: 2,
+            retryDelay: 1000,
+            timeout: 5000,
+          }}
+        >
+          {children}
+        </NotificationProvider>
+      </AuthProvider>
     </SessionProvider>
   );
 }

hooks/use-notifications.ts

@@ -0,0 +1,25 @@
+import { useNotifications as useCoreNotifications } from 'react-notification-core';
+
+export function useNotifications() {
+  const {
+    notifications,
+    unreadCount,
+    markAsRead,
+    markAllAsRead,
+    deleteNotification,
+    refreshNotifications,
+    isLoading,
+    error,
+  } = useCoreNotifications();
+
+  return {
+    notifications,
+    unreadCount,
+    markAsRead,
+    markAllAsRead,
+    deleteNotification,
+    refreshNotifications,
+    isLoading,
+    error,
+  };
+}

lib/mock.ts

@@ -1,4 +1,6 @@
 import { Project } from '@/types/project';
+import type { Notification } from "react-notification-core"
+
 
 export const mockProjects: Project[] = [
   {
@@ -108,3 +110,72 @@ export const mockCampaignDetails = {
   ],
   status: 'validated',
 };
+
+
+
+const mockNotifications: Notification[] = [
+  
+  {
+    id: "1",
+    title: "New feature available",
+    message: "Check out our new dashboard features.",
+    timestamp: new Date(Date.now() - 60 * 60 * 1000),
+    read: true,
+    type: "info",
+  },
+  {
+    id: "2",
+    title: "Action required",
+    message: "Please verify your email address.",
+    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
+    read: false,
+    type: "warning",
+  },
+  {
+    id: "3",
+    title: "Payment successful",
+    message: "Your subscription has been renewed.",
+    timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
+    read: true,
+    type: "success",
+  },
+  {
+    id: "4",
+    title: "Login attempt",
+    message: "A new login was detected from an unknown device.",
+    timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
+    read: false,
+    type: "error",
+  },
+]
+
+let notifications = [...mockNotifications]
+
+// Mock API functions
+export async function mockFetchNotifications(): Promise<Notification[]> {
+  await new Promise((resolve) => setTimeout(resolve, 500))
+
+  // Simulate occasional errors (1 in 10 chance)
+  if (Math.random() < 0.1) {
+    throw new Error("Failed to fetch notifications")
+  }
+
+  return [...notifications]
+}
+
+export async function mockMarkAsRead(id: string): Promise<void> {
+  await new Promise((resolve) => setTimeout(resolve, 300))
+  notifications = notifications.map((notification) =>
+    notification.id === id ? { ...notification, read: true } : notification,
+  )
+}
+
+export async function mockMarkAllAsRead(): Promise<void> {
+  await new Promise((resolve) => setTimeout(resolve, 300))
+  notifications = notifications.map((notification) => ({ ...notification, read: true }))
+}
+
+export async function mockDeleteNotification(id: string): Promise<void> {
+  await new Promise((resolve) => setTimeout(resolve, 300))
+  notifications = notifications.filter((notification) => notification.id !== id)
+}

package-lock.json

@@ -76,6 +76,7 @@
     "react-day-picker": "^9.8.0",
     "react-dom": "19.1.0",
     "react-hook-form": "^7.62.0",
+    "react-notification-core": "^1.0.5",
     "react-resizable-panels": "^3.0.3",
     "recharts": "^2.15.4",
     "sonner": "^2.0.6",