feat: loading from me endpoint and updating sidebar profile

src/renderer/src/components/sidebar/sidebar-profile.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { type UserProfile } from "@types";
+import * as styles from "./sidebar.css";
+import { PersonIcon } from "@primer/octicons-react";
+
+export function SidebarProfile() {
+  const navigate = useNavigate();
+
+  const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
+  const [isUserProfileLoading, setIsUserProfileLoading] = useState(true);
+
+  const handleClickProfile = () => {
+    navigate(`/profile/${userProfile!.id}`);
+  };
+
+  const handleClickLogin = () => {
+    window.electron.openExternal("https://losbroxas.org");
+  };
+
+  useEffect(() => {
+    setIsUserProfileLoading(true);
+    window.electron.isUserLoggedIn().then(async (isLoggedIn) => {
+      if (isLoggedIn) {
+        const userProfile = await window.electron.getMe();
+        setUserProfile(userProfile);
+      }
+
+      setIsUserProfileLoading(false);
+    });
+  }, []);
+
+  if (isUserProfileLoading) return null;
+
+  if (userProfile == null) {
+    return (
+      <>
+        <button
+          type="button"
+          className={styles.profileButton}
+          onClick={handleClickLogin}
+        >
+          <div className={styles.profileAvatar}>
+            <PersonIcon />
+          </div>
+
+          <div className={styles.profileButtonInformation}>
+            <p style={{ fontWeight: "bold" }}>Fazer login</p>
+          </div>
+        </button>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className={styles.profileButton}
+        onClick={handleClickProfile}
+      >
+        <div className={styles.profileAvatar}>
+          {userProfile.profileImageUrl ? (
+            <img
+              className={styles.profileAvatar}
+              src={userProfile.profileImageUrl}
+              alt={userProfile.displayName}
+            />
+          ) : (
+            <PersonIcon />
+          )}
+        </div>
+
+        <div className={styles.profileButtonInformation}>
+          <p style={{ fontWeight: "bold" }}>{userProfile.displayName}</p>
+        </div>
+      </button>
+    </>
+  );
+}

src/renderer/src/components/sidebar/sidebar.tsx

@@ -13,7 +13,7 @@ import * as styles from "./sidebar.css";
 import { buildGameDetailsPath } from "@renderer/helpers";
 
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
-import { PersonIcon } from "@primer/octicons-react";
+import { SidebarProfile } from "./sidebar-profile";
 
 const SIDEBAR_MIN_WIDTH = 200;
 const SIDEBAR_INITIAL_WIDTH = 250;
@@ -143,10 +143,6 @@ export function Sidebar() {
     }
   };
 
-  const handleClickProfile = () => {
-    navigate("/profile/olejRejN");
-  };
-
   return (
     <>
       <aside
@@ -158,22 +154,7 @@ export function Sidebar() {
           maxWidth: sidebarWidth,
         }}
       >
-        <button
-          type="button"
-          className={styles.profileButton}
-          onClick={handleClickProfile}
-        >
-          <div className={styles.profileAvatar}>
-            <PersonIcon />
-
-            <div className={styles.statusBadge} />
-          </div>
-
-          <div className={styles.profileButtonInformation}>
-            <p style={{ fontWeight: "bold" }}>hydra</p>
-            <p style={{ fontSize: 12 }}>Jogando ABC</p>
-          </div>
-        </button>
+        <SidebarProfile />
 
         <div
           className={styles.content({

src/renderer/src/declaration.d.ts

@@ -97,6 +97,7 @@ declare global {
     /* Misc */
     openExternal: (src: string) => Promise<void>;
     getVersion: () => Promise<string>;
+    isUserLoggedIn: () => Promise<boolean>;
     ping: () => string;
     getDefaultDownloadsPath: () => Promise<string>;
     showOpenDialog: (
@@ -113,6 +114,7 @@ declare global {
 
     /* Profile */
     getUserProfile: (username: string) => Promise<UserProfile | null>;
+    getMe: () => Promise<UserProfile | null>;
   }
 
   interface Window {

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

@@ -9,6 +9,7 @@ import { useDate } from "@renderer/hooks";
 import { useNavigate } from "react-router-dom";
 import { buildGameDetailsPath } from "@renderer/helpers";
 import { PersonIcon } from "@primer/octicons-react";
+import { Button } from "@renderer/components";
 
 const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
 export interface ProfileContentProps {
@@ -70,6 +71,10 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
         <div className={styles.profileInformation}>
           <h2 style={{ fontWeight: "bold" }}>{userProfile.displayName}</h2>
         </div>
+
+        <div style={{ flex: 1, display: "flex", justifyContent: "end" }}>
+          <Button theme="danger">Sair da conta</Button>
+        </div>
       </section>
 
       <div className={styles.profileContent}>