From f80246109aa3712d5251af4a13f0fa9ec22b59a6 Mon Sep 17 00:00:00 2001
From: MIGHTY1o1 <shubhagarwalcse@gmail.com>
Date: Wed, 9 Oct 2024 20:19:30 +0530
Subject: [PATCH] add sent button logic

---
 client/src/pages/Friends/Friends.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/Friends/Friends.tsx b/client/src/pages/Friends/Friends.tsx
index 8705e579..948fda25 100644
--- a/client/src/pages/Friends/Friends.tsx
+++ b/client/src/pages/Friends/Friends.tsx
@@ -30,6 +30,8 @@ const FriendsSearch: React.FC = () => {
     const [friendToRemove, setFriendToRemove] = useState("")
     const { user } = useAuth()
     const navigate = useNavigate()
+    const [loading, setLoading] = useState(false)
+    const [sent, setSent] = useState(false)
 
     const {
         useGetFriends,
@@ -64,8 +66,11 @@ const FriendsSearch: React.FC = () => {
     }
 
     const handleSendRequest = (friendUserName: string) => {
+        if (sent) return; // Prevent sending duplicate requests
+        setLoading(true); // Show loading spinner while sending
         sendFriendRequestMutation.mutate(friendUserName, {
             onSuccess: () => {
+                setSent(true); // Mark as "Sent"
                 toast.success("Friend request sent successfully.")
             },
             onError: (error) => {
@@ -78,6 +83,9 @@ const FriendsSearch: React.FC = () => {
 
                 toast.error("Failed to send friend request. Please try again.")
             },
+            onSettled: () => {
+                setLoading(false); // Hide loader after request
+            }
         })
     }
 
@@ -359,11 +367,13 @@ const FriendsSearch: React.FC = () => {
                                             </div>
                                             <Button
                                             onClick={() => handleSendRequest(user.userName)}
+                                            disabled={loading || sent}
                                             size="sm"
                                             className="p-2 sm:p-3 md:p-4 lg:p-5 rounded-md"
                                             aria-label="Send Friend Request"
                                             >
-                                            <UserPlus className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 lg:w-7 lg:h-7" />
+                                            {/* <UserPlus className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 lg:w-7 lg:h-7" /> */}
+                                            {loading ? "Sending..." : (sent ? "Sent" : "Send Request")}
                                         </Button>
                                         </motion.li>
                                     ))}