File "useForegroundNotifications.ts"

Full Path: /home/trinadezambia/public_html/student_panel/src/lib/api/teacher/useForegroundNotifications.ts
File size: 3.1 KB
MIME-type: text/x-java
Charset: utf-8

'use client';
/**
 * React Hook for Foreground Notifications
 *
 * This hook sets up a listener for FCM messages when the app is open (foreground).
 * When a message is received, it displays a browser notification.
 */

import { useEffect } from 'react';
import {
  initializeFirebase,
  onForegroundMessage,
  FirebaseMessagePayload,
} from './init';

/**
 * Hook to handle foreground notifications
 *
 * This hook automatically:
 * 1. Initializes Firebase messaging
 * 2. Listens for incoming messages while app is open
 * 3. Displays browser notifications for foreground messages
 * 4. Handles notification clicks to redirect users
 *
 * Usage: Call this hook once in your main layout/dashboard component
 */
export function useForegroundNotifications(
  onNotificationReceived?: (payload: FirebaseMessagePayload) => void
) {
  useEffect(() => {
    let unsubscribe: (() => void) | undefined;

    // Setup function
    async function setupForegroundNotifications() {
      try {
        // Initialize Firebase first
        await initializeFirebase();
        // console.log('[FCM] Firebase initialized for foreground notifications');

        // Check if permission is granted
        if (Notification.permission !== 'granted') {
          // console.log(
          //   '[FCM] Notification permission not granted. Foreground notifications will not work.'
          // );
          return;
        }

        // Set up the message listener
        // This will be called whenever a message arrives while app is open
        // Store the unsubscribe function for cleanup
        const unsub = onForegroundMessage((payload: FirebaseMessagePayload) => {
          // Call the callback if provided
          if (onNotificationReceived) {
            onNotificationReceived(payload);
          }

          // Note: Notification display logic is now handled in PushNotification.jsx
          // via the callback and notificationHelper.ts to ensure it works
          // even if this specific listener doesn't fire (e.g. via SW postMessage)
        });

        // Store unsubscribe function if it exists
        if (unsub) {
          unsubscribe = unsub;
        }

        // console.log('[FCM] ✅ Foreground notification handler setup complete');
      } catch (error) {
        console.error(
          '[FCM] ❌ Error setting up foreground notifications:',
          error
        );
      }
    }

    // Run setup
    if (typeof window !== 'undefined' && 'Notification' in window) {
      setupForegroundNotifications();
    } else {
      // console.warn(
      //   '[FCM] Browser does not support notifications - foreground notifications disabled'
      // );
    }

    // Cleanup function - properly unsubscribe from Firebase messaging
    return () => {
      if (unsubscribe) {
        // console.log('[FCM] Cleaning up foreground notification handler');
        unsubscribe(); // Call the unsubscribe function
        // console.log('[FCM] ✅ Foreground notification listener removed');
      }
    };
  }, [onNotificationReceived]); // Re-run if callback changes

  // This hook doesn't return anything
  // It just sets up the listener in the background
}