refactor

frontend/src/pages/Friends.jsx

@@ -1,5 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
+import toast from 'react-hot-toast';
 import api from '../api';
+import { useClickOutside } from '../hooks/useClickOutside';
 
 export default function Friends() {
   const [friends, setFriends] = useState([]);
@@ -9,6 +11,11 @@ export default function Friends() {
   const [searchResults, setSearchResults] = useState([]);
   const [loading, setLoading] = useState(true);
   const [searchTimeout, setSearchTimeout] = useState(null);
+  const [responding, setResponding] = useState(null);
+  const [sending, setSending] = useState(null);
+  const searchRef = useRef(null);
+
+  useClickOutside(searchRef, () => setSearchResults([]));
 
   useEffect(() => {
     loadData();
@@ -57,22 +64,29 @@ export default function Friends() {
   };
 
   const handleSendRequest = async (userId) => {
+    setSending(userId);
     try {
       await api.sendFriendRequest(userId);
       setSearchQuery('');
       setSearchResults([]);
-      alert('Friend request sent!');
+      toast.success('Friend request sent!');
     } catch (err) {
-      alert('Failed to send request: ' + err.message);
+      toast.error('Failed to send request: ' + err.message);
+    } finally {
+      setSending(null);
     }
   };
 
   const handleRespond = async (requestId, status) => {
+    setResponding(requestId);
     try {
       await api.respondToFriendRequest(requestId, status);
+      toast.success(status === 'accepted' ? 'Friend request accepted!' : 'Friend request declined');
       await loadData();
     } catch (err) {
-      alert('Failed to respond: ' + err.message);
+      toast.error('Failed to respond: ' + err.message);
+    } finally {
+      setResponding(null);
     }
   };
 
@@ -86,7 +100,7 @@ export default function Friends() {
         <h1 style={{ marginBottom: '2rem' }}>Friends</h1>
 
         {/* Search */}
-        <div className="card" style={{ marginBottom: '2rem', position: 'relative' }}>
+        <div className="card" style={{ marginBottom: '2rem', position: 'relative' }} ref={searchRef}>
           <h3 style={{ marginBottom: '1rem' }}>Add Friends</h3>
           <input
             type="text"
@@ -127,8 +141,9 @@ export default function Friends() {
                   <button
                     className="btn btn-primary btn-sm"
                     onClick={() => handleSendRequest(user.id)}
+                    disabled={sending === user.id}
                   >
-                    Add Friend
+                    {sending === user.id ? 'Sending...' : 'Add Friend'}
                   </button>
                 </div>
               ))}
@@ -151,14 +166,16 @@ export default function Friends() {
                     <button
                       className="btn btn-success btn-sm"
                       onClick={() => handleRespond(req.id, 'accepted')}
+                      disabled={responding === req.id}
                     >
-                      Accept
+                      {responding === req.id ? '...' : 'Accept'}
                     </button>
                     <button
                       className="btn btn-danger btn-sm"
                       onClick={() => handleRespond(req.id, 'rejected')}
+                      disabled={responding === req.id}
                     >
-                      Reject
+                      {responding === req.id ? '...' : 'Reject'}
                     </button>
                   </div>
                 </div>