feat: finish ui for modal showing pending requests

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

@@ -26,7 +26,7 @@ export const UserAddFriendsModal = ({
 
   const navigate = useNavigate();
 
-  const { userDetails, sendFriendRequest } = useUserDetails();
+  const { sendFriendRequest } = useUserDetails();
 
   const { showSuccessToast, showErrorToast } = useToast();
 
@@ -51,21 +51,17 @@ export const UserAddFriendsModal = ({
   useEffect(() => {
     setPendingRequests([
       {
-        AId: "abcd1234",
-        ADisplayName: "Punheta Master 123",
-        AProfileImageUrl:
+        userId: "abcd1234",
+        displayName: "Punheta Master 123",
+        profileImageUrl:
           "https://cdn.discordapp.com/avatars/1239959140785455295/4aff4b901c7a9f5f814b4379b6cfd58a.webp",
-        BId: "BMmNRmP3",
-        BDisplayName: "Hydra",
-        BProfileImageUrl: null,
+        type: "RECEIVED",
       },
       {
-        AId: "BMmNRmP3",
-        ADisplayName: "Hydra",
-        AProfileImageUrl: null,
-        BId: "12345678",
-        BDisplayName: "Deyvis0n",
-        BProfileImageUrl: null,
+        userId: "12345678",
+        displayName: "Deyvis0n",
+        profileImageUrl: null,
+        type: "SENT",
       },
     ]);
   }, []);
@@ -154,29 +150,13 @@ export const UserAddFriendsModal = ({
           >
             <h3>Pendentes</h3>
             {pendingRequests.map((request) => {
-              if (request.AId === userDetails?.id) {
               return (
                 <UserFriendPendingRequest
-                    key={request.AId}
-                    displayName={request.BDisplayName}
-                    isRequestSent={true}
-                    profileImageUrl={request.BProfileImageUrl}
-                    userId={request.BId}
-                    onClickAcceptRequest={handleClickAcceptFriendRequest}
-                    onClickCancelRequest={handleClickCancelFriendRequest}
-                    onClickRefuseRequest={handleClickRefuseFriendRequest}
-                    onClickRequest={handleClickFriend}
-                  />
-                );
-              }
-
-              return (
-                <UserFriendPendingRequest
-                  key={request.BId}
-                  displayName={request.ADisplayName}
-                  isRequestSent={false}
-                  profileImageUrl={request.AProfileImageUrl}
-                  userId={request.AId}
+                  key={request.userId}
+                  displayName={request.displayName}
+                  isRequestSent={request.type === "SENT"}
+                  profileImageUrl={request.profileImageUrl}
+                  userId={request.userId}
                   onClickAcceptRequest={handleClickAcceptFriendRequest}
                   onClickCancelRequest={handleClickCancelFriendRequest}
                   onClickRefuseRequest={handleClickRefuseFriendRequest}

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

@@ -1,5 +1,9 @@
-import { CheckCircleIcon, XCircleIcon } from "@primer/octicons-react";
-import { SPACING_UNIT, vars } from "@renderer/theme.css";
+import {
+  CheckCircleIcon,
+  PersonIcon,
+  XCircleIcon,
+} from "@primer/octicons-react";
+import { SPACING_UNIT } from "@renderer/theme.css";
 import * as styles from "./user.css";
 import cn from "classnames";
 
@@ -30,16 +34,20 @@ export const UserFriendPendingRequest = ({
       className={cn(styles.friendListItem, styles.profileContentBox)}
       onClick={() => onClickRequest(userId)}
       style={{
-        display: "flex",
-        flexDirection: "row",
-        gap: `${SPACING_UNIT}px`,
-        alignItems: "center",
+        padding: "8px",
       }}
     >
+      <div className={styles.pendingFriendRequestAvatarContainer}>
+        {profileImageUrl ? (
           <img
-        style={{ width: "32px", borderRadius: "50%" }}
-        src={profileImageUrl || ""}
+            className={styles.profileAvatar}
+            alt={displayName}
+            src={profileImageUrl}
           />
+        ) : (
+          <PersonIcon size={24} />
+        )}
+      </div>
       <div
         style={{
           display: "flex",
@@ -55,10 +63,10 @@ export const UserFriendPendingRequest = ({
       </div>
       {isRequestSent ? (
         <button
-          style={{ color: vars.color.body }}
+          className={styles.cancelRequestButton}
           onClick={() => onClickCancelRequest(userId)}
         >
-          <XCircleIcon size={28} className={styles.cancelRequestButton} />
+          <XCircleIcon size={28} />
         </button>
       ) : (
         <>

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

@@ -35,6 +35,20 @@ export const profileAvatarContainer = style({
   zIndex: 1,
 });
 
+export const pendingFriendRequestAvatarContainer = style({
+  width: "32px",
+  height: "32px",
+  borderRadius: "50%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: vars.color.background,
+  overflow: "hidden",
+  border: `solid 1px ${vars.color.border}`,
+  boxShadow: "0px 0px 5px 0px rgba(0, 0, 0, 0.7)",
+  zIndex: 1,
+});
+
 export const profileAvatarEditContainer = style({
   width: "128px",
   height: "128px",
@@ -53,8 +67,6 @@ export const profileAvatarEditContainer = style({
 export const profileAvatar = style({
   height: "100%",
   width: "100%",
-  borderRadius: "50%",
-  overflow: "hidden",
   objectFit: "cover",
 });
 

src/types/index.ts

@@ -276,12 +276,10 @@ export interface UserFriend {
 }
 
 export interface PendingFriendRequest {
-  AId: string;
-  ADisplayName: string;
-  AProfileImageUrl: string | null;
-  BId: string;
-  BDisplayName: string;
-  BProfileImageUrl: string | null;
+  userId: string;
+  displayName: string;
+  profileImageUrl: string | null;
+  type: "SENT" | "RECEIVED";
 }
 
 export interface UserProfile {