From 5cb57bd5b3f17a5c0439e3abe97bf19d0d3c49e1 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Fri, 16 Aug 2024 12:16:22 -0300
Subject: [PATCH] feat: show friend code

---
 .../user-friend-modal/user-friend-modal.tsx   | 64 ++++++++++++++-----
 1 file changed, 48 insertions(+), 16 deletions(-)

diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx
index abc26270..452191aa 100644
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx
@@ -1,10 +1,11 @@
 import { Button, Modal } from "@renderer/components";
-import { SPACING_UNIT } from "@renderer/theme.css";
-import { useEffect, useState } from "react";
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UserFriendModalAddFriend } from "./user-friend-modal-add-friend";
-import { useUserDetails } from "@renderer/hooks";
+import { useToast, useUserDetails } from "@renderer/hooks";
 import { UserFriendModalList } from "./user-friend-modal-list";
+import { CopyIcon } from "@primer/octicons-react";
 
 export enum UserFriendModalTab {
   FriendsList,
@@ -32,6 +33,8 @@ export const UserFriendModal = ({
     initialTab || UserFriendModalTab.FriendsList
   );
 
+  const { showSuccessToast } = useToast();
+
   const { userDetails } = useUserDetails();
   const isMe = userDetails?.id == userId;
 
@@ -53,6 +56,11 @@ export const UserFriendModal = ({
     return <></>;
   };
 
+  const copyToClipboard = useCallback(() => {
+    navigator.clipboard.writeText(userDetails!.id);
+    showSuccessToast("Código de amigo copiado");
+  }, [userDetails, showSuccessToast]);
+
   return (
     <Modal visible={visible} title={t("friends")} onClose={onClose}>
       <div
@@ -64,19 +72,43 @@ export const UserFriendModal = ({
         }}
       >
         {isMe && (
-          <section style={{ display: "flex", gap: `${SPACING_UNIT}px` }}>
-            {tabs.map((tab, index) => {
-              return (
-                <Button
-                  key={tab}
-                  theme={index === currentTab ? "primary" : "outline"}
-                  onClick={() => setCurrentTab(index)}
-                >
-                  {tab}
-                </Button>
-              );
-            })}
-          </section>
+          <>
+            <div
+              style={{
+                display: "flex",
+                gap: `${SPACING_UNIT}px`,
+                alignItems: "center",
+              }}
+            >
+              <p>Meu código de amigo: </p>
+              <button
+                style={{
+                  color: vars.color.body,
+                  cursor: "pointer",
+                  display: "flex",
+                  gap: `${SPACING_UNIT / 2}px`,
+                  alignItems: "center",
+                }}
+                onClick={copyToClipboard}
+              >
+                <h3>{userDetails.id}</h3>
+                <CopyIcon />
+              </button>
+            </div>
+            <section style={{ display: "flex", gap: `${SPACING_UNIT}px` }}>
+              {tabs.map((tab, index) => {
+                return (
+                  <Button
+                    key={tab}
+                    theme={index === currentTab ? "primary" : "outline"}
+                    onClick={() => setCurrentTab(index)}
+                  >
+                    {tab}
+                  </Button>
+                );
+              })}
+            </section>
+          </>
         )}
         {renderTab()}
       </div>