updates

Frontend/src/components/notifications/InAppNotificationBell.tsx

@@ -1,23 +1,102 @@
-import React, { useState, useEffect } from 'react';
-import { Bell, X } from 'lucide-react';
+import React, { useState, useEffect, useRef } from 'react';
+import { Bell } from 'lucide-react';
 import { toast } from 'react-toastify';
 import notificationService, { Notification } from '../../services/api/notificationService';
 import { formatDate } from '../../utils/format';
+import useAuthStore from '../../store/useAuthStore';
 
 const InAppNotificationBell: React.FC = () => {
+  const { isAuthenticated, token, isLoading } = useAuthStore();
   const [notifications, setNotifications] = useState<Notification[]>([]);
   const [unreadCount, setUnreadCount] = useState(0);
   const [showDropdown, setShowDropdown] = useState(false);
   const [loading, setLoading] = useState(false);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const [isInitialized, setIsInitialized] = useState(false);
 
-  useEffect(() => {
-    loadNotifications();
-    // Poll for new notifications every 30 seconds
-    const interval = setInterval(loadNotifications, 30000);
-    return () => clearInterval(interval);
+  // Wait for auth to initialize before checking
+  React.useEffect(() => {
+    // Small delay to ensure auth store is initialized
+    const timer = setTimeout(() => {
+      setIsInitialized(true);
+    }, 100);
+    return () => clearTimeout(timer);
   }, []);
 
+  // Helper to check if user is actually authenticated (has valid token)
+  const isUserAuthenticated = (): boolean => {
+    // Don't check if still initializing
+    if (isLoading || !isInitialized) {
+      return false;
+    }
+    // Check both store state and localStorage to ensure consistency
+    const hasToken = !!(token || localStorage.getItem('token'));
+    return !!(isAuthenticated && hasToken);
+  };
+
+  useEffect(() => {
+    // Clear any existing interval first
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+
+    // Early return if not authenticated - don't set up polling at all
+    if (!isUserAuthenticated()) {
+      setNotifications([]);
+      setUnreadCount(0);
+      return;
+    }
+
+    // Only proceed if we have both authentication state and token
+    const currentToken = token || localStorage.getItem('token');
+    if (!currentToken) {
+      setNotifications([]);
+      setUnreadCount(0);
+      return;
+    }
+
+    // Load notifications immediately
+    loadNotifications();
+    
+    // Poll for new notifications every 30 seconds, but only if authenticated
+    intervalRef.current = setInterval(() => {
+      // Re-check authentication on each poll
+      const stillAuthenticated = isUserAuthenticated();
+      const stillHasToken = !!(token || localStorage.getItem('token'));
+      
+      if (stillAuthenticated && stillHasToken) {
+        loadNotifications();
+      } else {
+        // Clear interval and state if user becomes unauthenticated
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = null;
+        }
+        setNotifications([]);
+        setUnreadCount(0);
+      }
+    }, 30000);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [isAuthenticated, token]);
+
   const loadNotifications = async () => {
+    // Don't make API call if user is not authenticated or doesn't have a token
+    // Double-check both store state and localStorage
+    const hasToken = !!(token || localStorage.getItem('token'));
+    if (!isAuthenticated || !hasToken) {
+      // Clear state if not authenticated
+      setNotifications([]);
+      setUnreadCount(0);
+      return;
+    }
+
     try {
       const response = await notificationService.getMyNotifications({
         status: 'delivered',
@@ -57,6 +136,11 @@ const InAppNotificationBell: React.FC = () => {
     }
   };
 
+  // Don't render if still initializing, not authenticated, or doesn't have a token
+  if (isLoading || !isInitialized || !isUserAuthenticated()) {
+    return null;
+  }
+
   return (
     <div className="relative">
       <button