feat: web notification hooks

ayush00git · ayush00git · commit e1e7b76f1c7c · 2025-12-30T00:00:19.000+05:30
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/tnc-logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>tnc</title>
+    <title>TNC-The Nerds Community</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/public/notification.mp3 b/frontend/public/notification.mp3
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -7,8 +7,26 @@ import ForgotPassword from "./Pages/ForgotPassword";
 import VerifyEmail from "./Pages/VerifyEmail";
 import ResetPassword from "./Pages/ResetPassword";
 import HomePage from "./Pages/HomePage";
+import { useEffect, useState } from "react";
+import { useGlobalNotifications } from "./hooks/useGlobalNotifications";
 
 function App() {
+  const [currentUser, setCurrentUser] = useState<{ _id: string } | null>(null);
+  const { setCurrentRoom } = useGlobalNotifications(currentUser?._id || null);
+
+  // Load current user from localStorage
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem("authUser");
+      if (raw) {
+        const parsed = JSON.parse(raw);
+        setCurrentUser({ _id: parsed._id });
+      }
+    } catch (error) {
+      console.error("Failed to load user:", error);
+    }
+  }, []);
+
   return (
     <>
       <Routes>
@@ -17,8 +35,8 @@ function App() {
         <Route path="/login" element={<LoginPage />} />
         <Route path="/forgot-password" element={<ForgotPassword />} />
         <Route path="/join-room" element={<JoinActiveRoom />} />
-        <Route path="/room" element={<ChatInterface />} />
-        <Route path="/room/:roomId" element={<ChatInterface />} />
+        <Route path="/room" element={<ChatInterface setCurrentRoom={setCurrentRoom} />} />
+        <Route path="/room/:roomId" element={<ChatInterface setCurrentRoom={setCurrentRoom} />} />
         <Route path="/verify-email" element={<VerifyEmail />} />
         <Route path="/reset-password" element={<ResetPassword />} />
       </Routes>
diff --git a/frontend/src/Pages/ChatInterface.tsx b/frontend/src/Pages/ChatInterface.tsx
@@ -3,7 +3,11 @@ import RoomSidebar from "../components/RoomSidebar";
 import ChatWindow from "../components/ChatWindow";
 import { useParams } from "react-router-dom";
 
-export default function ChatInterface() {
+interface ChatInterfaceProps {
+  setCurrentRoom: (roomId: string | null) => void;
+}
+
+export default function ChatInterface({ setCurrentRoom }: ChatInterfaceProps) {
   const { roomId } = useParams<{ roomId: string }>();
   const [isMobileSidebarOpen, setIsMobileSidebarOpen] = React.useState(false);
 
@@ -16,6 +20,7 @@ export default function ChatInterface() {
       <ChatWindow
         roomId={roomId}
         onOpenSidebar={() => setIsMobileSidebarOpen(true)}
+        setCurrentRoom={setCurrentRoom}
       />
     </div>
   );
diff --git a/frontend/src/components/ChatWindow.tsx b/frontend/src/components/ChatWindow.tsx
@@ -20,6 +20,7 @@ import CodeModal from "./CodeModal";
 import ImageModal from "./ImageModal";
 import { socket } from "../services/socket";
 import axios from "axios";
+import { useBrowserNotifications } from "../hooks/useBrowserNotifications";
 
 // --- Types ---
 interface User {
@@ -59,6 +60,7 @@ interface RoomDetails {
 interface ChatWindowProps {
   roomId?: string;
   onOpenSidebar?: () => void;
+  setCurrentRoom: (roomId: string | null) => void;
 }
 
 // --- Mock Database (used for fallback) ---
@@ -181,7 +183,7 @@ const MemberModal = ({
   );
 };
 
-export default function ChatWindow({ roomId, onOpenSidebar }: ChatWindowProps) {
+export default function ChatWindow({ roomId, onOpenSidebar, setCurrentRoom }: ChatWindowProps) {
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(true);
   const [activeRoom, setActiveRoom] = useState<RoomDetails | null>(null);
@@ -203,6 +205,9 @@ export default function ChatWindow({ roomId, onOpenSidebar }: ChatWindowProps) {
 
   const [showOptionsMenu, setShowOptionsMenu] = useState(false);
 
+  // Browser notifications
+  const { permission, requestPermission, showNotification } = useBrowserNotifications();
+
   const allMembers = useMemo(() => {
     const members: User[] = activeRoom?.members ? [...activeRoom.members] : [];
     if (currentUser && !members.find((m) => m.id === currentUser.id)) {
@@ -317,6 +322,22 @@ export default function ChatWindow({ roomId, onOpenSidebar }: ChatWindowProps) {
     }
   }, []);
 
+  // Request notification permission on mount
+  useEffect(() => {
+    if (permission === 'default') {
+      requestPermission();
+    }
+  }, [permission, requestPermission]);
+
+  // Track current room for global notifications
+  useEffect(() => {
+    if (activeRoom?._id) {
+      setCurrentRoom(activeRoom._id);
+    } else {
+      setCurrentRoom(null);
+    }
+  }, [activeRoom, setCurrentRoom]);
+
   // Fetch Room & Messages
   useEffect(() => {
     if (!roomId) {
@@ -415,6 +436,16 @@ export default function ChatWindow({ roomId, onOpenSidebar }: ChatWindowProps) {
             newMessages[existingIndex] = formattedMsg;
             return newMessages;
           }
+        } else {
+          // Message from another user - show browser notification
+          const senderName = newMessage.sender?.name || "Someone";
+          const messagePreview = newMessage.text || "Sent an image";
+
+          showNotification(`${senderName} in #${activeRoom?.title || 'Chat'}`, {
+            body: messagePreview,
+            tag: activeRoom?._id || 'chat',
+            data: { roomId: activeRoom?._id, roomTitle: activeRoom?.title },
+          });
         }
         return [...prev, formattedMsg];
       });
diff --git a/frontend/src/components/HeroSection.tsx b/frontend/src/components/HeroSection.tsx
@@ -28,9 +28,9 @@ export default function HeroSection() {
                     </div>
 
                     <h1 className="text-5xl md:text-7xl font-bold text-white tracking-tight mb-6 animate-in fade-in slide-in-from-bottom-6 duration-700">
-                        The Network for <br />
+                        The Nerds <br />
                         <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">
-                            Creative Developers
+                            Community
                         </span>
                     </h1>
 
diff --git a/frontend/src/hooks/useBrowserNotifications.ts b/frontend/src/hooks/useBrowserNotifications.ts
@@ -0,0 +1,46 @@
+import { useState, useEffect, useCallback } from 'react';
+
+export function useBrowserNotifications() {
+    const [permission, setPermission] = useState<NotificationPermission>('default');
+
+    useEffect(() => {
+        // Check if browser supports notifications
+        if ('Notification' in window) {
+            setPermission(Notification.permission);
+        }
+    }, []);
+
+    const requestPermission = useCallback(async () => {
+        if (!('Notification' in window)) {
+            console.log('This browser does not support notifications');
+            return 'denied';
+        }
+
+        const result = await Notification.requestPermission();
+        setPermission(result);
+        return result;
+    }, []);
+
+    const showNotification = useCallback((title: string, options?: NotificationOptions) => {
+        if (Notification.permission === 'granted') {
+            const notification = new Notification(title, {
+                icon: '/tnc-logo.png',
+                badge: '/tnc-logo.png',
+                ...options,
+            });
+
+            // Auto-close after 5 seconds
+            setTimeout(() => notification.close(), 5000);
+
+            return notification;
+        }
+        return null;
+    }, []);
+
+    return {
+        permission,
+        requestPermission,
+        showNotification,
+        isSupported: 'Notification' in window,
+    };
+}
diff --git a/frontend/src/hooks/useGlobalNotifications.ts b/frontend/src/hooks/useGlobalNotifications.ts
@@ -0,0 +1,100 @@
+import { useEffect, useRef } from 'react';
+import { socket } from '../services/socket';
+import { useBrowserNotifications } from './useBrowserNotifications';
+import { useNotificationSound } from './useNotificationSound';
+
+interface UserRoom {
+    _id: string;
+    title: string;
+    roomId: string;
+}
+
+export function useGlobalNotifications(userId: string | null) {
+    const { showNotification, requestPermission } = useBrowserNotifications();
+    const { playSound } = useNotificationSound();
+    const userRoomsRef = useRef<UserRoom[]>([]);
+    const currentRoomRef = useRef<string | null>(null);
+
+    // Set current room (to avoid notifying when user is actively in that room)
+    const setCurrentRoom = (roomId: string | null) => {
+        currentRoomRef.current = roomId;
+    };
+
+    useEffect(() => {
+        if (!userId) return;
+
+        // Request notification permission
+        requestPermission();
+
+        // Fetch user's rooms and join them via socket
+        const fetchAndJoinRooms = async () => {
+            try {
+                const response = await fetch('/api/room/joined', {
+                    credentials: 'include',
+                });
+
+                if (response.ok) {
+                    const data = await response.json();
+                    const rooms: UserRoom[] = data.rooms;
+                    userRoomsRef.current = rooms;
+
+                    // Connect socket if not already connected
+                    if (!socket.connected) {
+                        socket.connect();
+                    }
+
+                    // Join all user's rooms
+                    rooms.forEach((room) => {
+                        socket.emit('join_room', { room: room._id, userId });
+                    });
+
+                    console.log(`[Global Notifications] Joined ${rooms.length} rooms`);
+                }
+            } catch (error) {
+                console.error('[Global Notifications] Failed to fetch rooms:', error);
+            }
+        };
+
+        fetchAndJoinRooms();
+
+        // Listen for messages from ALL rooms
+        const handleGlobalMessage = (message: any) => {
+            const senderId = message.sender?._id || message.sender;
+            const roomId = message.room;
+
+            // Don't notify if:
+            // 1. Message is from current user
+            // 2. User is currently viewing this room
+            if (senderId === userId || roomId === currentRoomRef.current) {
+                return;
+            }
+
+            // Find room info
+            const room = userRoomsRef.current.find((r) => r._id === roomId);
+            const roomTitle = room?.title || 'Chat';
+            const senderName = message.sender?.name || 'Someone';
+            const messageText = message.text || 'Sent an image';
+
+            // Play sound
+            playSound();
+
+            // Show browser notification
+            showNotification(`${senderName} in #${roomTitle}`, {
+                body: messageText,
+                icon: '/tnc-logo.png',
+                tag: roomId,
+                data: { roomId, roomTitle },
+            });
+        };
+
+        socket.on('receive_message', handleGlobalMessage);
+        socket.on('received_message', handleGlobalMessage);
+
+        return () => {
+            socket.off('receive_message', handleGlobalMessage);
+            socket.off('received_message', handleGlobalMessage);
+        };
+    }, [userId, showNotification, playSound, requestPermission]);
+
+    return { setCurrentRoom };
+}
diff --git a/frontend/src/hooks/useNotificationSound.ts b/frontend/src/hooks/useNotificationSound.ts
@@ -0,0 +1,56 @@
+import { useCallback, useRef, useEffect } from 'react';
+
+export function useNotificationSound() {
+    const audioRef = useRef<HTMLAudioElement | null>(null);
+    const isEnabledRef = useRef(false);
+
+    // Initialize audio element
+    const initAudio = useCallback(() => {
+        if (!audioRef.current) {
+            audioRef.current = new Audio('/notification.mp3');
+            audioRef.current.volume = 0.9;
+        }
+    }, []);
+
+    // Enable audio on first user interaction
+    useEffect(() => {
+        const enableAudio = () => {
+            if (!isEnabledRef.current) {
+                initAudio();
+                // Play and immediately pause to "unlock" audio
+                audioRef.current?.play().then(() => {
+                    audioRef.current?.pause();
+                    audioRef.current!.currentTime = 0;
+                    isEnabledRef.current = true;
+                }).catch(() => {
+                    // Ignore errors during initialization
+                });
+            }
+        };
+
+        // Listen for any user interaction
+        document.addEventListener('click', enableAudio, { once: true });
+        document.addEventListener('keydown', enableAudio, { once: true });
+
+        return () => {
+            document.removeEventListener('click', enableAudio);
+            document.removeEventListener('keydown', enableAudio);
+        };
+    }, [initAudio]);
+
+    const playSound = useCallback(() => {
+        initAudio();
+
+        if (audioRef.current) {
+            // Reset to start if already playing
+            audioRef.current.currentTime = 0;
+
+            // Play the sound
+            audioRef.current.play().catch(() => {
+                // Silently fail if audio can't play
+            });
+        }
+    }, [initAudio]);
+
+    return { playSound };
+}
