getting user profile from api

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);

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]);

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 />
 

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";
 

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>

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>
+    </>
+  );
+};

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

@@ -0,0 +1,7 @@
+export const ProfileSkeleton = () => {
+  return (
+    <>
+      <p>Loading....</p>
+    </>
+  );
+};

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} />;
 };