notif sockets configure

Author: d-e-v-14

src/app/(app)/notifications/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { usePageReady } from "@/components/RouteChangeLoader";
 import { Bell, CheckCheck, Check } from 'lucide-react';
 import { getUser } from '@/api';
@@ -40,7 +40,8 @@ export default function NotificationsPage() {
   const [notifications, setNotifications] = useState<Notification[]>([]);
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState<"all" | "unread">("all");
-  const { markAsRead, markAllAsRead } = useNotifications();
+  const { notifications: realtimeNotifications, unreadCount: realtimeUnreadCount, markAsRead, markAllAsRead } = useNotifications();
+  const lastRealtimeNotificationCountRef = useRef(0);
   const [toast, setToast] = useState<{
     message: string;
     type: "info" | "success" | "error";
@@ -51,6 +52,13 @@ export default function NotificationsPage() {
     loadNotifications();
   }, []);
 
+  useEffect(() => {
+    if (realtimeNotifications.length > lastRealtimeNotificationCountRef.current) {
+      void loadNotifications();
+    }
+    lastRealtimeNotificationCountRef.current = realtimeNotifications.length;
+  }, [realtimeNotifications.length]);
+
   const loadNotifications = async () => {
     try {
       setLoading(true);
@@ -141,7 +149,10 @@ export default function NotificationsPage() {
       ? notifications.filter((n) => !n.is_read)
       : notifications;
 
-  const unreadCount = notifications.filter((n) => !n.is_read).length;
+  const unreadCount = Math.max(
+    notifications.filter((n) => !n.is_read).length,
+    realtimeUnreadCount
+  );
 
 
 

src/components/MentionNotifications.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Bell, X, Check, User, Users, AtSign } from 'lucide-react';
-import { useMentionNotifications } from '@/hooks/useMentionNotifications';
 
 interface MentionNotification {
   id: string;
@@ -39,16 +38,9 @@ export default function MentionNotifications({
   const [mentions, setMentions] = useState<MentionNotification[]>([]);
   const [loading, setLoading] = useState(false);
   const [filter, setFilter] = useState<'all' | 'unread'>('unread');
-  const {
-    fetchUnreadCount,
-    markMentionAsRead,
-    markAllMentionsAsRead,
-    socket,
-    unreadMentionsCount,
-  } = useMentionNotifications();
 
   // Fetch mentions
-  const fetchMentions = useCallback(async () => {
+  const fetchMentions = async () => {
     setLoading(true);
     try {
       const response = await fetch(`/api/mentions?unreadOnly=${filter === 'unread'}`, {
@@ -64,7 +56,7 @@ export default function MentionNotifications({
     } finally {
       setLoading(false);
     }
-  }, [filter]);
+  };
 
   // Mark mention as read
   const markAsRead = async (mentionId: string) => {
@@ -82,7 +74,6 @@ export default function MentionNotifications({
               : mention
           )
         );
-        await markMentionAsRead();
       }
     } catch (error) {
       console.error('Failed to mark mention as read:', error);
@@ -96,8 +87,6 @@ export default function MentionNotifications({
     for (const mention of unreadMentions) {
       await markAsRead(mention.id);
     }
-
-    await markAllMentionsAsRead();
   };
 
 
@@ -110,28 +99,8 @@ export default function MentionNotifications({
   useEffect(() => {
     if (isOpen) {
       fetchMentions();
-      void fetchUnreadCount();
     }
-  }, [isOpen, filter, fetchMentions, fetchUnreadCount]);
-
-  useEffect(() => {
-    if (!socket) return;
-
-    const refreshMentions = () => {
-      if (isOpen) {
-        fetchMentions();
-        void fetchUnreadCount();
-      }
-    };
-
-    socket.on('mention_notification', refreshMentions);
-    socket.on('mention_marked_read', refreshMentions);
-
-    return () => {
-      socket.off('mention_notification', refreshMentions);
-      socket.off('mention_marked_read', refreshMentions);
-    };
-  }, [socket, isOpen, fetchMentions, fetchUnreadCount]);
+  }, [isOpen, filter]);
 
   const getMentionIcon = (type: string) => {
     switch (type) {
@@ -166,8 +135,10 @@ export default function MentionNotifications({
           <div className="flex items-center space-x-3">
             <Bell className="text-blue-400" size={24} />
             <h2 className="text-xl font-semibold text-white">Mentions</h2>
-            {unreadMentionsCount > 0 && (
-              <span className="h-2.5 w-2.5 rounded-full bg-red-500" />
+            {mentions.filter(m => !m.is_read).length > 0 && (
+              <span className="bg-red-500 text-white text-xs px-2 py-1 rounded-full">
+                {mentions.filter(m => !m.is_read).length}
+              </span>
             )}
           </div>
 

src/components/MessageBubble.tsx

@@ -130,7 +130,7 @@ const MessageBubble: React.FC<MessageBubbleProps> = ({
         {/* Message Bubble */}
         <div
           className={`
-            px-4 py-2.5 w-fit max-w-full
+            px-4 py-2.5 w-fit max-w-72
             ${bubbleStyles}
             rounded-lg
             ${

src/components/NotificationBell.tsx

@@ -61,8 +61,12 @@ export default function NotificationBell({ className = "", onNavigateToMessage }
         title="Notifications"
       >
         <Bell size={20} />
+        
+        {/* Unread Count Badge */}
         {unreadCount > 0 && (
-          <span className="absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full bg-red-500 ring-2 ring-[#111214]" />
+          <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full min-w-[18px] h-[18px] flex items-center justify-center px-1">
+            {unreadCount > 99 ? '99+' : unreadCount}
+          </span>
         )}
       </button>
 

src/components/Sidebar.tsx

@@ -24,7 +24,6 @@ import { useEffect, useState } from "react";
 import { useNotifications } from "../hooks/useNotifications";
 import { useFriendNotifications } from "../contexts/FriendNotificationContext";
 import { useMessageNotifications } from "../contexts/MessageNotificationContext";
-import { createAuthSocket } from "@/socket";
 
 const navItems = [
   { label: "Servers", icon: Users, path: "/servers" },
@@ -42,7 +41,7 @@ export default function Sidebar() {
   const [error, setError] = useState<string | null>(null);
 
   // ✅ Get values directly from hooks (no refreshCount needed)
-  const { unreadCount, setUnreadCount } = useNotifications();
+  const { unreadCount } = useNotifications();
   const { friendRequestCount, refreshCount: refreshFriendCount } =
     useFriendNotifications();
   const { unreadMessageCount, refreshCount: refreshMessageCount } =
@@ -58,51 +57,6 @@ export default function Sidebar() {
     // Notifications page will handle its own refresh
   };
 
-  // ✅ WebSocket-based real-time updates
-  useEffect(() => {
-    if (!user?.id) return;
-
-    const socket = createAuthSocket(user.id);
-
-    // Listen for real-time notification events
-    socket.on("new_notification", (data?: { count?: number }) => {
-      console.log("📬 New notification received", data);
-
-      // If backend sends the new count, use it
-      if (data?.count !== undefined) {
-        setUnreadCount(data.count);
-      } else {
-        // Otherwise increment locally
-        setUnreadCount((prev) => prev + 1);
-      }
-    });
-
-    socket.on("new_message", () => {
-      console.log("💬 New message received");
-      // Message notifications context will handle its own update
-      refreshMessageCount?.();
-    });
-
-    socket.on("friend_request", () => {
-      console.log("👋 New friend request received");
-      refreshFriendCount?.();
-    });
-
-    socket.on("friend_request_accepted", () => {
-      console.log("✅ Friend request accepted");
-      refreshFriendCount?.();
-    });
-
-    // Cleanup on unmount
-    return () => {
-      socket.off("new_notification");
-      socket.off("new_message");
-      socket.off("friend_request");
-      socket.off("friend_request_accepted");
-      socket.disconnect();
-    };
-  }, [user?.id, setUnreadCount, refreshFriendCount, refreshMessageCount]);
-
   // ✅ Refresh counts when window regains focus
   useEffect(() => {
     const handleFocus = async () => {
@@ -164,12 +118,12 @@ export default function Sidebar() {
     >
       {/* Background */}
       <div
-        className="absolute inset-0 z-0 bg-no-repeat bg-cover opacity-90 border-r border-gray-800 pointer-events-none"
-      />
+  className="absolute inset-0 z-0 bg-no-repeat bg-cover opacity-90 border-r border-gray-800"
+/>
 
 
       {/* Content */}
-      <div className="relative flex flex-col h-full justify-between">
+      <div className="relative z-10 flex flex-col h-full justify-between">
         {/* Top Section */}
         <div>
           <div className="flex items-center justify-between p-4">
@@ -199,7 +153,6 @@ export default function Sidebar() {
             {navItems.map((item) => {
               const isActive = pathname === item.path;
               let notificationCount = 0;
-              const showDotOnly = item.label === "Notifications";
               if (item.label === "Notifications") {
                 notificationCount = unreadCount;
               } else if (item.label === "Messages") {
@@ -224,9 +177,7 @@ export default function Sidebar() {
                     <div className="relative">
                       <item.icon className="w-5 h-5" />
                       {/* Show notification badge with animation */}
-                      {notificationCount > 0 && showDotOnly ? (
-                        <span className="absolute -top-1 -right-1 h-2.5 w-2.5 rounded-full bg-red-500 ring-2 ring-[#111214] animate-pulse" />
-                      ) : notificationCount > 0 && (
+                      {notificationCount > 0 && (
                         <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full min-w-[16px] h-[16px] flex items-center justify-center px-1 font-bold animate-pulse">
                           {notificationCount > 99 ? "99+" : notificationCount}
                         </span>
@@ -239,7 +190,7 @@ export default function Sidebar() {
                   {collapsed && (
                     <div className="absolute left-full top-1/2 -translate-y-1/2 ml-2 z-20 px-3 py-1 text-sm text-white bg-black rounded shadow-lg opacity-0 group-hover:opacity-100 transition">
                       {item.label}
-                      {notificationCount > 0 && !showDotOnly && ` (${notificationCount})`}
+                      {notificationCount > 0 && ` (${notificationCount})`}
                     </div>
                   )}
                 </div>

src/contexts/FriendNotificationContext.tsx

@@ -1,6 +1,8 @@
 "use client";
-import { createContext, useContext, useEffect, useState, ReactNode, useCallback, useMemo } from 'react';
-import { fetchFriendRequests } from '@/api';
+import { createContext, useContext, useEffect, useState, ReactNode, useCallback, useMemo, useRef } from 'react';
+import { Socket } from 'socket.io-client';
+import { fetchFriendRequests, getUser } from '@/api';
+import { createAuthSocket } from '@/socket';
 
 interface FriendNotificationContextType {
   friendRequestCount: number;
@@ -17,8 +19,12 @@ const FriendNotificationContext = createContext<FriendNotificationContextType>({
 export function FriendNotificationProvider({ children }: { children: ReactNode }) {
   const [friendRequestCount, setFriendRequestCount] = useState(0);
   const [loading, setLoading] = useState(true);
+  const socketRef = useRef<Socket | null>(null);
+  const refreshInFlightRef = useRef(false);
 
   const refreshCount = useCallback(async () => {
+    if (refreshInFlightRef.current) return;
+    refreshInFlightRef.current = true;
     try {
       const requests = await fetchFriendRequests();
       setFriendRequestCount(requests.length);
@@ -28,6 +34,7 @@ export function FriendNotificationProvider({ children }: { children: ReactNode }
       setFriendRequestCount(0);
     } finally {
       setLoading(false);
+      refreshInFlightRef.current = false;
     }
   }, []);
 
@@ -36,6 +43,46 @@ export function FriendNotificationProvider({ children }: { children: ReactNode }
     refreshCount();
   }, [refreshCount]);
 
+  useEffect(() => {
+    let mounted = true;
+    let cleanupSocket: (() => void) | null = null;
+
+    const setupSocket = async () => {
+      try {
+        const user = await getUser();
+        if (!mounted || !user?.id) return;
+
+        const socket = createAuthSocket(user.id);
+        socketRef.current = socket;
+
+        const handleFriendEvent = () => {
+          void refreshCount();
+        };
+
+        socket.on('friend_request', handleFriendEvent);
+        socket.on('friend_request_accepted', handleFriendEvent);
+
+        cleanupSocket = () => {
+          socket.off('friend_request', handleFriendEvent);
+          socket.off('friend_request_accepted', handleFriendEvent);
+          socket.disconnect();
+          if (socketRef.current === socket) {
+            socketRef.current = null;
+          }
+        };
+      } catch (error) {
+        console.error('Failed to initialize friend notification socket:', error);
+      }
+    };
+
+    void setupSocket();
+
+    return () => {
+      mounted = false;
+      cleanupSocket?.();
+    };
+  }, [refreshCount]);
+
   const contextValue = useMemo(
     () => ({ friendRequestCount, loading, refreshCount }),
     [friendRequestCount, loading, refreshCount]