From b8895afc0a0eb1bc7edf19a790e4fd7f0db7b7a4 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Tue, 11 Jun 2024 23:05:05 -0300
Subject: [PATCH] getting user profile from api

---
 src/main/events/profile/get-user-profile.ts   |  8 +++---
 src/renderer/src/components/header/header.tsx |  1 +
 .../src/components/sidebar/sidebar.tsx        | 10 ++++++-
 src/renderer/src/declaration.d.ts             |  1 +
 src/renderer/src/main.tsx                     |  2 ++
 .../src/pages/profile/profile-content.tsx     | 16 ++++++++++++
 .../src/pages/profile/profile-skeleton.tsx    |  7 +++++
 src/renderer/src/pages/profile/profile.tsx    | 26 +++++++++++++------
 8 files changed, 57 insertions(+), 14 deletions(-)
 create mode 100644 src/renderer/src/pages/profile/profile-content.tsx
 create mode 100644 src/renderer/src/pages/profile/profile-skeleton.tsx

diff --git a/src/main/events/profile/get-user-profile.ts b/src/main/events/profile/get-user-profile.ts
index aa915f0e..018d0ef1 100644
--- a/src/main/events/profile/get-user-profile.ts
+++ b/src/main/events/profile/get-user-profile.ts
@@ -1,17 +1,15 @@
-import axios from "axios";
 import { registerEvent } from "../register-event";
 import { userProfileSchema } from "../helpers/validators";
 import { logger } from "@main/services";
+import { HydraApi } from "@main/services/hydra-api";
 
 const getUserProfile = async (
   _event: Electron.IpcMainInvokeEvent,
   username: string
 ) => {
-  return axios
-    .get(`${process.env.API_URL}/profile/${username}`)
+  return HydraApi.get(`/profile/${username}`)
     .then((response) => {
       const profile = userProfileSchema.parse(response.data);
-      console.log(profile);
       return profile;
     })
     .catch((err) => {
@@ -20,4 +18,4 @@ const getUserProfile = async (
     });
 };
 
-registerEvent("getUserProfiel", getUserProfile);
+registerEvent("getUserProfile", getUserProfile);
diff --git a/src/renderer/src/components/header/header.tsx b/src/renderer/src/components/header/header.tsx
index 046a6a4f..8b3ac2fa 100644
--- a/src/renderer/src/components/header/header.tsx
+++ b/src/renderer/src/components/header/header.tsx
@@ -39,6 +39,7 @@ export function Header({ onSearch, onClear, search }: HeaderProps) {
 
   const title = useMemo(() => {
     if (location.pathname.startsWith("/game")) return headerTitle;
+    if (location.pathname.startsWith("/profile")) return headerTitle;
     if (location.pathname.startsWith("/search")) return t("search_results");
 
     return t(pathTitle[location.pathname]);
diff --git a/src/renderer/src/components/sidebar/sidebar.tsx b/src/renderer/src/components/sidebar/sidebar.tsx
index 897d6b18..62f71a7c 100644
--- a/src/renderer/src/components/sidebar/sidebar.tsx
+++ b/src/renderer/src/components/sidebar/sidebar.tsx
@@ -143,6 +143,10 @@ export function Sidebar() {
     }
   };
 
+  const handleClickProfile = () => {
+    navigate("/profile/brownie");
+  };
+
   return (
     <>
       <aside
@@ -154,7 +158,11 @@ export function Sidebar() {
           maxWidth: sidebarWidth,
         }}
       >
-        <button type="button" className={styles.profileButton}>
+        <button
+          type="button"
+          className={styles.profileButton}
+          onClick={handleClickProfile}
+        >
           <div className={styles.profileAvatar}>
             <PersonIcon />
 
diff --git a/src/renderer/src/declaration.d.ts b/src/renderer/src/declaration.d.ts
index 8867baba..52535306 100644
--- a/src/renderer/src/declaration.d.ts
+++ b/src/renderer/src/declaration.d.ts
@@ -13,6 +13,7 @@ import type {
   StartGameDownloadPayload,
   RealDebridUser,
   DownloadSource,
+  UserProfile,
 } from "@types";
 import type { DiskSpace } from "check-disk-space";
 
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
index a457592e..de3f2d72 100644
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@@ -27,6 +27,7 @@ import {
 import { store } from "./store";
 
 import * as resources from "@locales";
+import { Profile } from "./pages/profile/profile";
 
 i18n
   .use(LanguageDetector)
@@ -54,6 +55,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
             <Route path="/game/:shop/:objectID" Component={GameDetails} />
             <Route path="/search" Component={SearchResults} />
             <Route path="/settings" Component={Settings} />
+            <Route path="profile/:username" Component={Profile} />
           </Route>
         </Routes>
       </HashRouter>
diff --git a/src/renderer/src/pages/profile/profile-content.tsx b/src/renderer/src/pages/profile/profile-content.tsx
new file mode 100644
index 00000000..08a459b5
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-content.tsx
@@ -0,0 +1,16 @@
+import { UserProfile } from "@types";
+import { useTranslation } from "react-i18next";
+
+export interface ProfileContentProps {
+  userProfile: UserProfile;
+}
+
+export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
+  const { t } = useTranslation("profile");
+
+  return (
+    <>
+      <p>{userProfile.username}</p>
+    </>
+  );
+};
diff --git a/src/renderer/src/pages/profile/profile-skeleton.tsx b/src/renderer/src/pages/profile/profile-skeleton.tsx
new file mode 100644
index 00000000..1e6783fa
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-skeleton.tsx
@@ -0,0 +1,7 @@
+export const ProfileSkeleton = () => {
+  return (
+    <>
+      <p>Loading....</p>
+    </>
+  );
+};
diff --git a/src/renderer/src/pages/profile/profile.tsx b/src/renderer/src/pages/profile/profile.tsx
index e9becfb7..6541cb7a 100644
--- a/src/renderer/src/pages/profile/profile.tsx
+++ b/src/renderer/src/pages/profile/profile.tsx
@@ -1,17 +1,27 @@
 import { UserProfile } from "@types";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
+import { setHeaderTitle } from "@renderer/features";
+import { useAppDispatch } from "@renderer/hooks";
+import { ProfileSkeleton } from "./profile-skeleton";
+import { ProfileContent } from "./profile-content";
 
 export const Profile = () => {
   const { username } = useParams();
   const [userProfile, setUserProfile] = useState<UserProfile>();
 
-  const { t } = useTranslation("profile");
+  const dispatch = useAppDispatch();
 
-  return (
-    <>
-      <p>Tela do usuarioooooooo</p>
-    </>
-  );
+  useEffect(() => {
+    window.electron.getUserProfile(username!).then((userProfile) => {
+      if (userProfile) {
+        dispatch(setHeaderTitle(userProfile.username));
+        setUserProfile(userProfile);
+      }
+    });
+  }, [dispatch]);
+
+  if (!userProfile) return <ProfileSkeleton />;
+
+  return <ProfileContent userProfile={userProfile} />;
 };