feat: add guest notification center

resources/js/guest/context/NotificationCenterContext.tsx

@@ -1,52 +1,214 @@
 import React from 'react';
 import { useUploadQueue } from '../queue/hooks';
 import type { QueueItem } from '../queue/queue';
+import {
+  dismissGuestNotification,
+  fetchGuestNotifications,
+  markGuestNotificationRead,
+  type GuestNotificationItem,
+} from '../services/notificationApi';
 
-type NotificationCenterValue = {
+export type NotificationCenterValue = {
+  notifications: GuestNotificationItem[];
+  unreadCount: number;
   queueItems: QueueItem[];
   queueCount: number;
-  inviteCount: number;
   totalCount: number;
   loading: boolean;
-  refreshQueue: () => Promise<void>;
+  refresh: () => Promise<void>;
+  markAsRead: (id: number) => Promise<void>;
+  dismiss: (id: number) => Promise<void>;
   eventToken: string;
 };
 
 const NotificationCenterContext = React.createContext<NotificationCenterValue | null>(null);
 
-export function NotificationCenterProvider({
-  eventToken,
-  children,
-}: {
-  eventToken: string;
-  children: React.ReactNode;
-}) {
-  const { items, loading, refresh } = useUploadQueue();
+export function NotificationCenterProvider({ eventToken, children }: { eventToken: string; children: React.ReactNode }) {
+  const { items, loading: queueLoading, refresh: refreshQueue } = useUploadQueue();
+  const [notifications, setNotifications] = React.useState<GuestNotificationItem[]>([]);
+  const [unreadCount, setUnreadCount] = React.useState(0);
+  const [loadingNotifications, setLoadingNotifications] = React.useState(true);
+  const etagRef = React.useRef<string | null>(null);
+  const fetchLockRef = React.useRef(false);
 
   const queueCount = React.useMemo(
     () => items.filter((item) => item.status !== 'done').length,
-    [items],
+    [items]
   );
 
-  const value = React.useMemo<NotificationCenterValue>(
-    () => ({
-      queueItems: items,
-      queueCount,
-      inviteCount: 0,
-      totalCount: queueCount,
-      loading,
-      refreshQueue: refresh,
-      eventToken,
-    }),
-    [items, queueCount, loading, refresh, eventToken],
+  const loadNotifications = React.useCallback(
+    async (options: { silent?: boolean } = {}) => {
+      if (!eventToken) {
+        if (!options.silent) {
+          setLoadingNotifications(false);
+        }
+        return;
+      }
+
+      if (fetchLockRef.current) {
+        return;
+      }
+
+      fetchLockRef.current = true;
+      if (!options.silent) {
+        setLoadingNotifications(true);
+      }
+
+      try {
+        const result = await fetchGuestNotifications(eventToken, etagRef.current);
+        if (!result.notModified) {
+          setNotifications(result.notifications);
+          setUnreadCount(result.unreadCount);
+        }
+        etagRef.current = result.etag;
+      } catch (error) {
+        console.error('Failed to load guest notifications', error);
+        if (!options.silent) {
+          setNotifications([]);
+          setUnreadCount(0);
+        }
+      } finally {
+        fetchLockRef.current = false;
+        if (!options.silent) {
+          setLoadingNotifications(false);
+        }
+      }
+    },
+    [eventToken]
   );
 
+  React.useEffect(() => {
+    setNotifications([]);
+    setUnreadCount(0);
+    etagRef.current = null;
+
+    if (!eventToken) {
+      setLoadingNotifications(false);
+      return;
+    }
+
+    setLoadingNotifications(true);
+    void loadNotifications();
+  }, [eventToken, loadNotifications]);
+
+  React.useEffect(() => {
+    if (!eventToken) {
+      return;
+    }
+
+    const interval = window.setInterval(() => {
+      void loadNotifications({ silent: true });
+    }, 90000);
+
+    return () => window.clearInterval(interval);
+  }, [eventToken, loadNotifications]);
+
+  const markAsRead = React.useCallback(
+    async (id: number) => {
+      if (!eventToken) {
+        return;
+      }
+
+      let decremented = false;
+      setNotifications((prev) =>
+        prev.map((item) => {
+          if (item.id !== id) {
+            return item;
+          }
+
+          if (item.status === 'new') {
+            decremented = true;
+          }
+
+          return {
+            ...item,
+            status: 'read',
+            readAt: new Date().toISOString(),
+          };
+        })
+      );
+
+      if (decremented) {
+        setUnreadCount((prev) => Math.max(0, prev - 1));
+      }
+
+      try {
+        await markGuestNotificationRead(eventToken, id);
+      } catch (error) {
+        console.error('Failed to mark notification as read', error);
+        void loadNotifications({ silent: true });
+      }
+    },
+    [eventToken, loadNotifications]
+  );
+
+  const dismiss = React.useCallback(
+    async (id: number) => {
+      if (!eventToken) {
+        return;
+      }
+
+      let decremented = false;
+      setNotifications((prev) =>
+        prev.map((item) => {
+          if (item.id !== id) {
+            return item;
+          }
+
+          if (item.status === 'new') {
+            decremented = true;
+          }
+
+          return {
+            ...item,
+            status: 'dismissed',
+            dismissedAt: new Date().toISOString(),
+          };
+        })
+      );
+
+      if (decremented) {
+        setUnreadCount((prev) => Math.max(0, prev - 1));
+      }
+
+      try {
+        await dismissGuestNotification(eventToken, id);
+      } catch (error) {
+        console.error('Failed to dismiss notification', error);
+        void loadNotifications({ silent: true });
+      }
+    },
+    [eventToken, loadNotifications]
+  );
+
+  const refresh = React.useCallback(async () => {
+    await Promise.all([loadNotifications(), refreshQueue()]);
+  }, [loadNotifications, refreshQueue]);
+
+  const loading = loadingNotifications || queueLoading;
+  const totalCount = unreadCount + queueCount;
+
+  const value: NotificationCenterValue = {
+    notifications,
+    unreadCount,
+    queueItems: items,
+    queueCount,
+    totalCount,
+    loading,
+    refresh,
+    markAsRead,
+    dismiss,
+    eventToken,
+  };
+
   return (
-    <NotificationCenterContext.Provider value={value}>{children}</NotificationCenterContext.Provider>
+    <NotificationCenterContext.Provider value={value}>
+      {children}
+    </NotificationCenterContext.Provider>
   );
 }
 
-export function useNotificationCenter() {
+export function useNotificationCenter(): NotificationCenterValue {
   const ctx = React.useContext(NotificationCenterContext);
   if (!ctx) {
     throw new Error('useNotificationCenter must be used within NotificationCenterProvider');
@@ -54,6 +216,6 @@ export function useNotificationCenter() {
   return ctx;
 }
 
-export function useOptionalNotificationCenter() {
+export function useOptionalNotificationCenter(): NotificationCenterValue | null {
   return React.useContext(NotificationCenterContext);
 }