fix: buttons on friend request item

src/renderer/src/pages/user/user-add-friends-modal.tsx

@@ -25,13 +25,13 @@ export const UserAddFriendsModal = ({
   const { sendFriendRequest, updateFriendRequestState, friendRequests } =
     useUserDetails();
 
-  const { showSuccessToast, showErrorToast } = useToast();
+  const { showErrorToast } = useToast();
 
   const handleClickAddFriend = () => {
     setIsAddingFriend(true);
     sendFriendRequest(friendCode)
       .then(() => {
-        showSuccessToast(t("friend_request_sent"));
+        setFriendCode("");
       })
       .catch(() => {
         showErrorToast("Não foi possível enviar o pedido de amizade");
@@ -41,64 +41,41 @@ export const UserAddFriendsModal = ({
       });
   };
 
-  const handleClickFriend = (userId: string) => {
+  const handleClickRequest = (userId: string) => {
-    //onClose();
+    resetAndClose();
-    //navigate(`/user/${userId}`);
+    navigate(`/user/${userId}`);
   };
 
   const handleClickSeeProfile = () => {
-    onClose();
+    resetAndClose();
     navigate(`/user/${friendCode}`);
   };
 
-  const handleClickCancelFriendRequest = (
+  const handleClickCancelFriendRequest = (userId: string) => {
-    event: React.MouseEvent,
+    updateFriendRequestState(userId, "CANCEL").catch(() => {
-    userId: string
-  ) => {
-    updateFriendRequestState(userId, "CANCEL")
-      .then(() => {
-        console.log("sucesso");
-      })
-      .catch(() => {
       showErrorToast("Falha ao cancelar convite");
     });
   };
 
-  const handleClickAcceptFriendRequest = (
+  const handleClickAcceptFriendRequest = (userId: string) => {
-    event: React.MouseEvent,
-    userId: string
-  ) => {
     updateFriendRequestState(userId, "ACCEPTED").catch(() => {
       showErrorToast("Falha ao aceitar convite");
     });
   };
 
-  const handleClickRefuseFriendRequest = (
+  const handleClickRefuseFriendRequest = (userId: string) => {
-    event: React.MouseEvent,
-    userId: string
-  ) => {
-    event.preventDefault();
     updateFriendRequestState(userId, "REFUSED").catch(() => {
       showErrorToast("Falha ao recusar convite");
     });
   };
 
-  const resetModal = () => {
+  const resetAndClose = () => {
     setFriendCode("");
-  };
-
-  const cleanFormAndClose = () => {
-    resetModal();
     onClose();
   };
 
   return (
-    <>
+    <Modal visible={visible} title={t("add_friends")} onClose={resetAndClose}>
-      <Modal
-        visible={visible}
-        title={t("add_friends")}
-        onClose={cleanFormAndClose}
-      >
       <div
         style={{
           display: "flex",
@@ -161,13 +138,12 @@ export const UserAddFriendsModal = ({
                 onClickAcceptRequest={handleClickAcceptFriendRequest}
                 onClickCancelRequest={handleClickCancelFriendRequest}
                 onClickRefuseRequest={handleClickRefuseFriendRequest}
-                  onClickRequest={handleClickFriend}
+                onClickRequest={handleClickRequest}
               />
             );
           })}
         </div>
       </div>
     </Modal>
-    </>
   );
 };

src/renderer/src/pages/user/user-content.tsx

@@ -375,7 +375,7 @@ export function UserContent({
                     <button
                       key={friend.id}
                       className={cn(
-                        styles.friendListItem,
+                        styles.friendListContainer,
                         styles.profileContentBox
                       )}
                       onClick={() => handleOnClickFriend(friend.id)}

src/renderer/src/pages/user/user-friend-request.tsx

@@ -11,9 +11,9 @@ export interface UserFriendRequestProps {
   profileImageUrl: string | null;
   displayName: string;
   isRequestSent: boolean;
-  onClickCancelRequest: (event: React.MouseEvent, userId: string) => void;
+  onClickCancelRequest: (userId: string) => void;
-  onClickAcceptRequest: (event: React.MouseEvent, userId: string) => void;
+  onClickAcceptRequest: (userId: string) => void;
-  onClickRefuseRequest: (event: React.MouseEvent, userId: string) => void;
+  onClickRefuseRequest: (userId: string) => void;
   onClickRequest: (userId: string) => void;
 }
 
@@ -28,9 +28,10 @@ export const UserFriendRequest = ({
   onClickRequest,
 }: UserFriendRequestProps) => {
   return (
+    <div className={cn(styles.friendListContainer, styles.profileContentBox)}>
       <button
         type="button"
-      className={cn(styles.friendListItem, styles.profileContentBox)}
+        className={styles.friendListButton}
         onClick={() => onClickRequest(userId)}
       >
         <div className={styles.friendAvatarContainer}>
@@ -56,10 +57,13 @@ export const UserFriendRequest = ({
           <p className={styles.friendListDisplayName}>{displayName}</p>
           <small>{isRequestSent ? "Pedido enviado" : "Pedido recebido"}</small>
         </div>
+      </button>
+
+      <div style={{ position: "absolute", right: "8px" }}>
         {isRequestSent ? (
           <button
             className={styles.cancelRequestButton}
-          onClick={(e) => onClickCancelRequest(e, userId)}
+            onClick={() => onClickCancelRequest(userId)}
           >
             <XCircleIcon size={28} />
           </button>
@@ -67,18 +71,19 @@ export const UserFriendRequest = ({
           <>
             <button
               className={styles.acceptRequestButton}
-            onClick={(e) => onClickAcceptRequest(e, userId)}
+              onClick={() => onClickAcceptRequest(userId)}
             >
               <CheckCircleIcon size={28} />
             </button>
             <button
               className={styles.cancelRequestButton}
-            onClick={(e) => onClickRefuseRequest(e, userId)}
+              onClick={() => onClickRefuseRequest(userId)}
             >
               <XCircleIcon size={28} />
             </button>
           </>
         )}
-    </button>
+      </div>
+    </div>
   );
 };

src/renderer/src/pages/user/user.css.ts

@@ -178,21 +178,29 @@ export const gameListItem = style({
   },
 });
 
-export const friendListItem = style({
+export const friendListContainer = style({
-  color: vars.color.body,
-  display: "flex",
-  flexDirection: "row",
-  gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
   width: "100%",
   height: "54px",
-  padding: "0 8px",
   transition: "all ease 0.2s",
-  cursor: "pointer",
+  position: "relative",
   ":hover": {
     backgroundColor: "rgba(255, 255, 255, 0.15)",
   },
 });
 
+export const friendListButton = style({
+  display: "flex",
+  alignItems: "center",
+  position: "absolute",
+  cursor: "pointer",
+  height: "100%",
+  width: "100%",
+  flexDirection: "row",
+  color: vars.color.body,
+  gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
+  padding: "0 8px",
+});
+
 export const gameInformation = style({
   display: "flex",
   flexDirection: "column",