Subscribe to notifications

GET /api/notifications/subscribe?token=YOUR_ACCESS_TOKEN

{
  "type": "connected",
  "message": "Notification stream connected."
}

{
  "type": "order_update",
  "title": "Order Accepted ✅",
  "message": "Your payment was confirmed and the store has accepted your order.",
  "data": {
    "orderId": "507f1f77bcf86cd799439011",
    "orderNumber": "CB20240115001",
    "status": "accepted"
  }
}

{
  "type": "order_update",
  "title": "Order Ready for Pickup 🔔",
  "message": "Your order is ready! Head to the store and show the OTP to collect it.",
  "data": {
    "orderId": "507f1f77bcf86cd799439011",
    "orderNumber": "CB20240115001",
    "status": "ready",
    "otp": "123456"
  }
}

// Get your access token from localStorage or your auth state
const accessToken = localStorage.getItem('accessToken');

// Create EventSource connection
const eventSource = new EventSource(
  `https://api.campusbite.com/api/notifications/subscribe?token=${accessToken}`
);

// Handle connection opened
eventSource.addEventListener('open', () => {
  console.log('SSE connection established');
});

// Handle incoming messages
eventSource.addEventListener('message', (event) => {
  const notification = JSON.parse(event.data);
  console.log('Notification received:', notification);
  
  if (notification.type === 'order_update') {
    // Update UI with order status change
    updateOrderStatus(notification.data);
    
    // Show notification to user
    showNotification(notification.title, notification.message);
    
    // If order is ready, display OTP
    if (notification.data.status === 'ready' && notification.data.otp) {
      displayOtp(notification.data.otp);
    }
  }
});

// Handle errors
eventSource.addEventListener('error', (error) => {
  console.error('SSE error:', error);
  
  // EventSource will automatically try to reconnect
  // Close if you want to stop reconnection attempts
  // eventSource.close();
});

// Close connection when user logs out or navigates away
function cleanup() {
  eventSource.close();
}

import { useEffect, useState } from 'react';

function useNotifications(accessToken) {
  const [notifications, setNotifications] = useState([]);
  const [connected, setConnected] = useState(false);

  useEffect(() => {
    if (!accessToken) return;

    const eventSource = new EventSource(
      `${import.meta.env.VITE_API_URL}/api/notifications/subscribe?token=${accessToken}`
    );

    eventSource.addEventListener('open', () => {
      setConnected(true);
    });

    eventSource.addEventListener('message', (event) => {
      const notification = JSON.parse(event.data);
      setNotifications((prev) => [notification, ...prev]);
    });

    eventSource.addEventListener('error', () => {
      setConnected(false);
    });

    return () => {
      eventSource.close();
    };
  }, [accessToken]);

  return { notifications, connected };
}