feat: show friends component

src/locales/en/translation.json

@@ -257,6 +257,7 @@
     "request_received": "Request received",
     "accept_request": "Accept request",
     "ignore_request": "Ignore request",
-    "cancel_request": "Cancel request"
+    "cancel_request": "Cancel request",
+    "undo_friendship": "Undo friendship"
   }
 }

src/locales/pt/translation.json

@@ -257,6 +257,7 @@
     "request_received": "Pedido recebido",
     "accept_request": "Aceitar pedido",
     "ignore_request": "Ignorar pedido",
-    "cancel_request": "Cancelar pedido"
+    "cancel_request": "Cancelar pedido",
+    "undo_friendship": "Desfazer amizade"
   }
 }

src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx

@@ -8,35 +8,90 @@ import cn from "classnames";
 import { SPACING_UNIT } from "@renderer/theme.css";
 import { useTranslation } from "react-i18next";
 
-export interface UserFriendRequestProps {
+export interface UserFriendItemProps {
   userId: string;
   profileImageUrl: string | null;
   displayName: string;
-  isRequestSent: boolean;
+  type: "SENT" | "RECEIVED" | "ACCEPTED";
   onClickCancelRequest: (userId: string) => void;
   onClickAcceptRequest: (userId: string) => void;
   onClickRefuseRequest: (userId: string) => void;
-  onClickRequest: (userId: string) => void;
+  onClickItem: (userId: string) => void;
 }
 
-export const UserFriendRequest = ({
+export const UserFriendItem = ({
   userId,
   profileImageUrl,
   displayName,
-  isRequestSent,
+  type,
   onClickCancelRequest,
   onClickAcceptRequest,
   onClickRefuseRequest,
-  onClickRequest,
+  onClickItem,
-}: UserFriendRequestProps) => {
+}: UserFriendItemProps) => {
   const { t } = useTranslation("user_profile");
 
+  const getRequestDescription = () => {
+    if (type === null) return null;
+
+    return (
+      <small>
+        {type == "SENT" ? t("request_sent") : t("request_received")}
+      </small>
+    );
+  };
+
+  const getRequestActions = () => {
+    if (type === "SENT") {
+      return (
+        <button
+          className={styles.cancelRequestButton}
+          onClick={() => onClickCancelRequest(userId)}
+          title={t("cancel_request")}
+        >
+          <XCircleIcon size={28} />
+        </button>
+      );
+    }
+
+    if (type === "RECEIVED") {
+      return (
+        <>
+          <button
+            className={styles.acceptRequestButton}
+            onClick={() => onClickAcceptRequest(userId)}
+            title={t("accept_request")}
+          >
+            <CheckCircleIcon size={28} />
+          </button>
+          <button
+            className={styles.cancelRequestButton}
+            onClick={() => onClickRefuseRequest(userId)}
+            title={t("ignore_request")}
+          >
+            <XCircleIcon size={28} />
+          </button>
+        </>
+      );
+    }
+
+    return (
+      <button
+        className={styles.cancelRequestButton}
+        onClick={() => onClickCancelRequest(userId)}
+        title={t("undo_friendship")}
+      >
+        <XCircleIcon size={28} />
+      </button>
+    );
+  };
+
   return (
     <div className={cn(styles.friendListContainer, styles.profileContentBox)}>
       <button
         type="button"
         className={styles.friendListButton}
-        onClick={() => onClickRequest(userId)}
+        onClick={() => onClickItem(userId)}
       >
         <div className={styles.friendAvatarContainer}>
           {profileImageUrl ? (
@@ -59,9 +114,7 @@ export const UserFriendRequest = ({
           }}
         >
           <p className={styles.friendListDisplayName}>{displayName}</p>
-          <small>
+          {getRequestDescription()}
-            {isRequestSent ? t("request_sent") : t("request_received")}
-          </small>
         </div>
       </button>
 
@@ -73,32 +126,7 @@ export const UserFriendRequest = ({
           gap: `${SPACING_UNIT}px`,
         }}
       >
-        {isRequestSent ? (
+        {getRequestActions()}
-          <button
-            className={styles.cancelRequestButton}
-            onClick={() => onClickCancelRequest(userId)}
-            title={t("cancel_request")}
-          >
-            <XCircleIcon size={28} />
-          </button>
-        ) : (
-          <>
-            <button
-              className={styles.acceptRequestButton}
-              onClick={() => onClickAcceptRequest(userId)}
-              title={t("accept_request")}
-            >
-              <CheckCircleIcon size={28} />
-            </button>
-            <button
-              className={styles.cancelRequestButton}
-              onClick={() => onClickRefuseRequest(userId)}
-              title={t("ignore_request")}
-            >
-              <XCircleIcon size={28} />
-            </button>
-          </>
-        )}
       </div>
     </div>
   );

src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx

@@ -4,7 +4,7 @@ import { SPACING_UNIT } from "@renderer/theme.css";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { UserFriendRequest } from "./user-friend-request";
+import { UserFriendItem } from "./user-friend-item";
 
 export interface UserFriendModalAddFriendProps {
   closeModal: () => void;
@@ -121,16 +121,16 @@ export const UserFriendModalAddFriend = ({
         <h3>Pendentes</h3>
         {friendRequests.map((request) => {
           return (
-            <UserFriendRequest
+            <UserFriendItem
               key={request.id}
               displayName={request.displayName}
-              isRequestSent={request.type === "SENT"}
+              type={request.type}
               profileImageUrl={request.profileImageUrl}
               userId={request.id}
               onClickAcceptRequest={handleAcceptFriendRequest}
               onClickCancelRequest={handleCancelFriendRequest}
               onClickRefuseRequest={handleRefuseFriendRequest}
-              onClickRequest={handleClickRequest}
+              onClickItem={handleClickRequest}
             />
           );
         })}

src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx

@@ -1,13 +1,22 @@
+import { SPACING_UNIT } from "@renderer/theme.css";
 import { UserFriend } from "@types";
 import { useEffect, useState } from "react";
+import { UserFriendItem } from "./user-friend-item";
+import { useNavigate } from "react-router-dom";
 
 export interface UserFriendModalListProps {
   userId: string;
+  closeModal: () => void;
 }
 
 const pageSize = 12;
 
-export const UserFriendModalList = ({ userId }: UserFriendModalListProps) => {
+export const UserFriendModalList = ({
+  userId,
+  closeModal,
+}: UserFriendModalListProps) => {
+  const navigate = useNavigate();
+
   const [page, setPage] = useState(0);
   const [maxPage, setMaxPage] = useState(0);
   const [friends, setFriends] = useState<UserFriend[]>([]);
@@ -34,7 +43,34 @@ export const UserFriendModalList = ({ userId }: UserFriendModalListProps) => {
     loadNextPage();
   }, [userId]);
 
-  return friends.map((friend) => {
+  const handleClickFriend = (userId: string) => {
-    return <p key={friend.id}>{friend.displayName}</p>;
+    closeModal();
-  });
+    navigate(`/user/${userId}`);
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: `${SPACING_UNIT * 2}px`,
+      }}
+    >
+      {friends.map((friend) => {
+        return (
+          <UserFriendItem
+            userId={friend.id}
+            displayName={friend.displayName}
+            profileImageUrl={friend.profileImageUrl}
+            onClickAcceptRequest={() => {}}
+            onClickCancelRequest={() => {}}
+            onClickRefuseRequest={() => {}}
+            onClickItem={handleClickFriend}
+            type={"ACCEPTED"}
+            key={friend.id}
+          />
+        );
+      })}
+    </div>
+  );
 };

src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx

@@ -43,7 +43,7 @@ export const UserFriendModal = ({
 
   const renderTab = () => {
     if (currentTab == UserFriendModalTab.FriendsList) {
-      return <UserFriendModalList userId={userId} />;
+      return <UserFriendModalList userId={userId} closeModal={onClose} />;
     }
 
     if (currentTab == UserFriendModalTab.AddFriend) {