feat: handle login from deeplink

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

@@ -1,38 +1,25 @@
-import { useEffect, useState } from "react";
+import { useContext } 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";
+import { userAuthContext } from "@renderer/context/user-auth/user-auth.context";
+import * as styles from "./sidebar.css";
 
 export function SidebarProfile() {
   const navigate = useNavigate();
 
-  const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
-  const [isUserProfileLoading, setIsUserProfileLoading] = useState(true);
+  const { userAuth, isLoading } = useContext(userAuthContext);
 
   const handleClickProfile = () => {
-    navigate(`/user/${userProfile!.id}`);
+    navigate(`/user/${userAuth!.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);
-      }
+  if (isLoading) return null;
 
-      setIsUserProfileLoading(false);
-    });
-  }, []);
-
-  if (isUserProfileLoading) return null;
-
-  if (userProfile == null) {
+  if (userAuth == null) {
     return (
       <>
         <button
@@ -60,11 +47,11 @@ export function SidebarProfile() {
         onClick={handleClickProfile}
       >
         <div className={styles.profileAvatar}>
-          {userProfile.profileImageUrl ? (
+          {userAuth.profileImageUrl ? (
             <img
               className={styles.profileAvatar}
-              src={userProfile.profileImageUrl}
-              alt={userProfile.displayName}
+              src={userAuth.profileImageUrl}
+              alt={userAuth.displayName}
             />
           ) : (
             <PersonIcon />
@@ -72,7 +59,7 @@ export function SidebarProfile() {
         </div>
 
         <div className={styles.profileButtonInformation}>
-          <p style={{ fontWeight: "bold" }}>{userProfile.displayName}</p>
+          <p style={{ fontWeight: "bold" }}>{userAuth.displayName}</p>
         </div>
       </button>
     </>

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

@@ -14,6 +14,7 @@ import { buildGameDetailsPath } from "@renderer/helpers";
 
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { SidebarProfile } from "./sidebar-profile";
+import { UserAuthContextProvider } from "@renderer/context/user-auth/user-auth.context";
 
 const SIDEBAR_MIN_WIDTH = 200;
 const SIDEBAR_INITIAL_WIDTH = 250;
@@ -154,7 +155,9 @@ export function Sidebar() {
           maxWidth: sidebarWidth,
         }}
       >
-        <SidebarProfile />
+        <UserAuthContextProvider>
+          <SidebarProfile />
+        </UserAuthContextProvider>
 
         <div
           className={styles.content({

src/renderer/src/context/user-auth/user-auth.context.tsx

@@ -0,0 +1,73 @@
+import { createContext, useEffect, useState } from "react";
+import { UserAuthContext } from "./user-auth.context.types";
+import { UserAuth } from "@types";
+
+export const userAuthContext = createContext<UserAuthContext>({
+  userAuth: null,
+  isLoading: false,
+  signout: async () => {},
+  updateMe: async () => {},
+});
+
+const { Provider } = userAuthContext;
+export const { Consumer: UserAuthContextConsumer } = userAuthContext;
+
+export interface UserAuthContextProps {
+  children: React.ReactNode;
+}
+
+export function UserAuthContextProvider({ children }: UserAuthContextProps) {
+  const [userAuth, setUserAuth] = useState<UserAuth | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const updateMe = () => {
+    setIsLoading(true);
+
+    return window.electron
+      .getMe()
+      .then((user) => {
+        setUserAuth(user);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    updateMe();
+  }, []);
+
+  useEffect(() => {
+    const listeners = [
+      window.electron.onSignIn(() => {
+        updateMe();
+      }),
+      window.electron.onSignOut(() => {
+        setUserAuth(null);
+      }),
+    ];
+
+    return () => {
+      listeners.forEach((unsubscribe) => unsubscribe());
+    };
+  }, []);
+
+  const signout = () => {
+    return window.electron.signout().finally(() => {
+      setUserAuth(null);
+    });
+  };
+
+  return (
+    <Provider
+      value={{
+        userAuth,
+        signout,
+        updateMe,
+        isLoading,
+      }}
+    >
+      {children}
+    </Provider>
+  );
+}

src/renderer/src/context/user-auth/user-auth.context.types.ts

@@ -0,0 +1,8 @@
+import { UserAuth } from "@types";
+
+export interface UserAuthContext {
+  userAuth: UserAuth | null;
+  isLoading: boolean;
+  updateMe: () => Promise<void>;
+  signout: () => Promise<void>;
+}

src/renderer/src/declaration.d.ts

@@ -112,8 +112,15 @@ declare global {
     checkForUpdates: () => Promise<boolean>;
     restartAndInstallUpdate: () => Promise<void>;
 
+    /* Authg */
+    signout: () => Promise<void>;
+    onSignIn: (cb: () => void) => () => Electron.IpcRenderer;
+    onSignOut: (cb: () => void) => () => Electron.IpcRenderer;
+
+    /* User */
+    getUser: (username: string) => Promise<UserProfile | null>;
+
     /* Profile */
-    getUserProfile: (username: string) => Promise<UserProfile | null>;
     getMe: () => Promise<UserProfile | null>;
   }
 

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

@@ -2,7 +2,7 @@ import { ProfileGame, UserProfile } from "@types";
 import cn from "classnames";
 import * as styles from "./user.css";
 import { SPACING_UNIT, vars } from "@renderer/theme.css";
-import { useMemo } from "react";
+import { useContext, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { useDate } from "@renderer/hooks";
@@ -10,6 +10,7 @@ import { useNavigate } from "react-router-dom";
 import { buildGameDetailsPath } from "@renderer/helpers";
 import { PersonIcon } from "@primer/octicons-react";
 import { Button } from "@renderer/components";
+import { userAuthContext } from "@renderer/context/user-auth/user-auth.context";
 
 const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
 export interface ProfileContentProps {
@@ -19,6 +20,8 @@ export interface ProfileContentProps {
 export const UserContent = ({ userProfile }: ProfileContentProps) => {
   const { t, i18n } = useTranslation("user_profile");
 
+  const { userAuth, signout } = useContext(userAuthContext);
+
   const navigate = useNavigate();
 
   const numberFormatter = useMemo(() => {
@@ -50,6 +53,11 @@ export const UserContent = ({ userProfile }: ProfileContentProps) => {
     navigate(buildGameDetailsPath(game));
   };
 
+  const handleSignout = async () => {
+    await signout();
+    navigate("/");
+  };
+
   return (
     <>
       <section
@@ -72,15 +80,19 @@ export const UserContent = ({ userProfile }: ProfileContentProps) => {
           <h2 style={{ fontWeight: "bold" }}>{userProfile.displayName}</h2>
         </div>
 
-        <div style={{ flex: 1, display: "flex", justifyContent: "end" }}>
-          <Button theme="danger">Sair da conta</Button>
-        </div>
+        {userAuth && userAuth.id == userProfile.id && (
+          <div style={{ flex: 1, display: "flex", justifyContent: "end" }}>
+            <Button theme="danger" onClick={handleSignout}>
+              {t("sign_out")}
+            </Button>
+          </div>
+        )}
       </section>
 
       <div className={styles.profileContent}>
         <div className={styles.profileGameSection}>
           <div>
-            <h2>Atividade</h2>
+            <h2>{t("activity")}</h2>
           </div>
           <div
             style={{
@@ -130,7 +142,7 @@ export const UserContent = ({ userProfile }: ProfileContentProps) => {
               gap: `${SPACING_UNIT * 2}px`,
             }}
           >
-            <h2>Games</h2>
+            <h2>{t("games")}</h2>
 
             <div
               style={{
@@ -143,7 +155,7 @@ export const UserContent = ({ userProfile }: ProfileContentProps) => {
               {userProfile.libraryGames.length}
             </h3>
           </div>
-          <small>Tempo total de jogo: {formatPlayTime()}</small>
+          <small>{t("total_play_time", { amount: formatPlayTime() })}</small>
           <div
             style={{
               display: "grid",

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

@@ -5,7 +5,10 @@ export const UserSkeleton = () => {
   return (
     <>
       <Skeleton className={styles.profileHeaderSkeleton} />
-      <Skeleton width={135} />
+      <div className={styles.profileContent}>
+        <Skeleton height={140} style={{ flex: 1 }} />
+        <Skeleton width={300} className={styles.contentSidebar} />
+      </div>
     </>
   );
 };

src/renderer/src/pages/user/user.tsx

@@ -8,6 +8,7 @@ import { UserContent } from "./user-content";
 import { SkeletonTheme } from "react-loading-skeleton";
 import { vars } from "@renderer/theme.css";
 import * as styles from "./user.css";
+import { UserAuthContextProvider } from "@renderer/context/user-auth/user-auth.context";
 
 export const User = () => {
   const { username } = useParams();
@@ -16,7 +17,7 @@ export const User = () => {
   const dispatch = useAppDispatch();
 
   useEffect(() => {
-    window.electron.getUserProfile(username!).then((userProfile) => {
+    window.electron.getUser(username!).then((userProfile) => {
       if (userProfile) {
         dispatch(setHeaderTitle(userProfile.displayName));
         setUserProfile(userProfile);
@@ -25,14 +26,16 @@ export const User = () => {
   }, [dispatch, username]);
 
   return (
-    <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
-      <div className={styles.wrapper}>
-        {userProfile ? (
-          <UserContent userProfile={userProfile} />
-        ) : (
-          <UserSkeleton />
-        )}
-      </div>
-    </SkeletonTheme>
+    <UserAuthContextProvider>
+      <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
+        <div className={styles.wrapper}>
+          {userProfile ? (
+            <UserContent userProfile={userProfile} />
+          ) : (
+            <UserSkeleton />
+          )}
+        </div>
+      </SkeletonTheme>
+    </UserAuthContextProvider>
   );
 };