real time messaging

frontend/src/components/Navbar.tsx

@@ -1,16 +1,19 @@
 import React, { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
-import { rentalAPI } from "../services/api";
+import { useSocket } from "../contexts/SocketContext";
+import { rentalAPI, messageAPI } from "../services/api";
 
 const Navbar: React.FC = () => {
   const { user, logout, openAuthModal } = useAuth();
+  const { onNewMessage, onMessageRead } = useSocket();
   const navigate = useNavigate();
   const [searchFilters, setSearchFilters] = useState({
     search: "",
     location: "",
   });
   const [pendingRequestsCount, setPendingRequestsCount] = useState(0);
+  const [unreadMessagesCount, setUnreadMessagesCount] = useState(0);
 
   // Fetch pending rental requests count when user logs in
   useEffect(() => {
@@ -41,6 +44,46 @@ const Navbar: React.FC = () => {
     };
   }, [user]);
 
+  // Fetch unread messages count when user logs in
+  useEffect(() => {
+    const fetchUnreadCount = async () => {
+      if (user) {
+        try {
+          const response = await messageAPI.getUnreadCount();
+          setUnreadMessagesCount(response.data.count);
+        } catch (error) {
+          console.error("Failed to fetch unread message count:", error);
+        }
+      } else {
+        setUnreadMessagesCount(0);
+      }
+    };
+
+    fetchUnreadCount();
+  }, [user]);
+
+  // Listen for real-time message updates via socket
+  useEffect(() => {
+    if (!user) return;
+
+    // Listen for new messages
+    const cleanupNewMessage = onNewMessage((message: any) => {
+      if (message.receiverId === user.id) {
+        setUnreadMessagesCount((prev) => prev + 1);
+      }
+    });
+
+    // Listen for messages being read
+    const cleanupMessageRead = onMessageRead(() => {
+      setUnreadMessagesCount((prev) => Math.max(0, prev - 1));
+    });
+
+    return () => {
+      cleanupNewMessage();
+      cleanupMessageRead();
+    };
+  }, [user, onNewMessage, onMessageRead]);
+
   const handleLogout = () => {
     logout();
     navigate("/");
@@ -155,7 +198,7 @@ const Navbar: React.FC = () => {
                           aria-expanded="false"
                         >
                           <span style={{ display: "flex", alignItems: "center", position: "relative" }}>
-                            {pendingRequestsCount > 0 && (
+                            {(pendingRequestsCount > 0 || unreadMessagesCount > 0) && (
                               <span
                                 style={{
                                   position: "absolute",
@@ -177,7 +220,7 @@ const Navbar: React.FC = () => {
                                   zIndex: 1,
                                 }}
                               >
-                                {pendingRequestsCount}
+                                {pendingRequestsCount + unreadMessagesCount}
                               </span>
                             )}
                             <i className="bi bi-person-circle me-1"></i>
@@ -224,6 +267,11 @@ const Navbar: React.FC = () => {
                           <li>
                             <Link className="dropdown-item" to="/messages">
                               <i className="bi bi-envelope me-2"></i>Messages
+                              {unreadMessagesCount > 0 && (
+                                <span className="badge bg-danger rounded-pill ms-2">
+                                  {unreadMessagesCount}
+                                </span>
+                              )}
                             </Link>
                           </li>
                           <li>