real time messaging

frontend/src/pages/Messages.tsx

@@ -3,11 +3,13 @@ import { useNavigate } from 'react-router-dom';
 import { Message, User } from '../types';
 import { messageAPI } from '../services/api';
 import { useAuth } from '../contexts/AuthContext';
+import { useSocket } from '../contexts/SocketContext';
 import ChatWindow from '../components/ChatWindow';
 
 const Messages: React.FC = () => {
   const navigate = useNavigate();
   const { user } = useAuth();
+  const { isConnected, onNewMessage } = useSocket();
   const [messages, setMessages] = useState<Message[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -18,6 +20,27 @@ const Messages: React.FC = () => {
     fetchMessages();
   }, []);
 
+  // Listen for new messages in real-time
+  useEffect(() => {
+    if (!isConnected) return;
+
+    const cleanup = onNewMessage((newMessage: Message) => {
+      // Only add if this is a received message (user is the receiver)
+      if (newMessage.receiverId === user?.id) {
+        setMessages((prevMessages) => {
+          // Check if message already exists (avoid duplicates)
+          if (prevMessages.some(m => m.id === newMessage.id)) {
+            return prevMessages;
+          }
+          // Add new message to the top of the inbox
+          return [newMessage, ...prevMessages];
+        });
+      }
+    });
+
+    return cleanup;
+  }, [isConnected, user?.id, onNewMessage]);
+
   const fetchMessages = async () => {
     try {
       const response = await messageAPI.getMessages();