live updates

frontend/src/pages/Friends.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import toast from 'react-hot-toast';
 import api from '../api';
 import { useClickOutside } from '../hooks/useClickOutside';
+import { useSocket } from '../SocketContext';
 
 export default function Friends() {
   const [friends, setFriends] = useState([]);
@@ -13,6 +14,7 @@ export default function Friends() {
   const [searchTimeout, setSearchTimeout] = useState(null);
   const [responding, setResponding] = useState(null);
   const [sending, setSending] = useState(null);
+  const { socket } = useSocket();
   const searchRef = useRef(null);
 
   useClickOutside(searchRef, () => setSearchResults([]));
@@ -21,6 +23,33 @@ export default function Friends() {
     loadData();
   }, []);
 
+  // Listen for real-time friend request events
+  useEffect(() => {
+    if (!socket) return;
+
+    const handleFriendRequest = (request) => {
+      toast.success(`👋 ${request.from_username} sent you a friend request`);
+      loadData(); // Refresh to show new request
+    };
+
+    const handleFriendResponse = (response) => {
+      if (response.status === 'accepted') {
+        toast.success(`🎉 ${response.friend_username} accepted your friend request!`);
+        loadData(); // Refresh friends list
+      } else {
+        toast(`${response.friend_username} declined your friend request`);
+      }
+    };
+
+    socket.on('friend:request', handleFriendRequest);
+    socket.on('friend:response', handleFriendResponse);
+
+    return () => {
+      socket.off('friend:request', handleFriendRequest);
+      socket.off('friend:response', handleFriendResponse);
+    };
+  }, [socket]);
+
   const loadData = async () => {
     try {
       const [friendsData, requestsData] = await Promise.all([