forbidals

Back Back Up Advanced Editor

'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
}