feat: update with user endpoint changes

src/main/events/helpers/validators.ts

@@ -15,16 +15,16 @@ export const downloadSourceSchema = z.object({
 
 const gamesArray = z.array(
   z.object({
-    id: z.number(),
+    id: z.string().length(8),
     objectId: z.string().max(255),
-    playTimeInMilliseconds: z.number().int(),
+    playTimeInSeconds: z.number().int(),
     shop: z.enum(["steam", "epic"]),
     lastTimePlayed: z.coerce.date().nullable(),
   })
 );
 
 export const userProfileSchema = z.object({
-  username: z.string(),
+  displayName: z.string(),
   libraryGames: gamesArray,
   recentGames: gamesArray,
 });

src/main/events/profile/get-user-profile.ts

@@ -12,7 +12,7 @@ const getUserProfile = async (
   username: string
 ): Promise<UserProfile | null> => {
   try {
-    const response = await HydraApi.get(`/profile/${username}`);
+    const response = await HydraApi.get(`/user/${username}`);
     const profile = userProfileSchema.parse(response.data);
 
     const recentGames = await Promise.all(

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

@@ -144,7 +144,7 @@ export function Sidebar() {
   };
 
   const handleClickProfile = () => {
-    navigate("/profile/zamitto");
+    navigate("/profile/pmbk5ezJ");
   };
 
   return (

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

@@ -12,13 +12,13 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
     <>
       <section className={styles.profileContentBox}>
         <img
-          alt={userProfile.username + " profile image"}
+          alt={userProfile.displayName + " profile image"}
           className={styles.profileAvatar}
           src="https://cdn.losbroxas.org/3918aa27-9b96-4fdf-b066-4c545d6667ab.png"
         />
 
         <div className={styles.profileInformation}>
-          <h3 style={{ fontWeight: "bold" }}>{userProfile.username}</h3>
+          <h2 style={{ fontWeight: "bold" }}>{userProfile.displayName}</h2>
         </div>
       </section>
 
@@ -51,14 +51,18 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
           >
             {userProfile.recentGames.map((game) => {
               return (
-                <div key={game.objectID}>
+                <div key={game.objectID} className={styles.feedItem}>
                   <img
+                    className={styles.gameIcon}
                     src={game.iconUrl}
                     width={50}
                     height={50}
                     alt={"Icon for " + game.title}
                   />
-                  <p>{game.title}</p>
+                  <div className={styles.gameInformation}>
+                    <p>{game.title}</p>
+                    <p>há 3 horas</p>
+                  </div>
                 </div>
               );
             })}
@@ -92,14 +96,18 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
           >
             {userProfile.libraryGames.map((game) => {
               return (
-                <div key={game.objectID}>
+                <div key={game.objectID} className={styles.gameListItem}>
                   <img
+                    className={styles.gameIcon}
                     src={game.iconUrl}
                     width={50}
                     height={50}
                     alt={"Icon for " + game.title}
                   />
-                  <p>{game.title}</p>
+                  <div className={styles.gameInformation}>
+                    <p>{game.title}</p>
+                    <p>Jogou por 10 horas</p>
+                  </div>
                 </div>
               );
             })}

src/renderer/src/pages/profile/profile.css.tsx

@@ -36,10 +36,6 @@ export const profileInformation = style({
   alignItems: "flex-start",
 });
 
-export const profileHeaderSkeleton = style({
-  height: "200px",
-});
-
 export const profileContent = style({
   display: "flex",
   flexDirection: "row",
@@ -70,3 +66,37 @@ export const contentSidebar = style({
     },
   },
 });
+
+export const gameIcon = style({
+  width: "48px",
+  height: "48px",
+  borderRadius: "50%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  position: "relative",
+});
+
+export const feedItem = style({
+  display: "flex",
+  flexDirection: "row",
+  gap: `${SPACING_UNIT}px`,
+  width: "100%",
+});
+
+export const gameListItem = style({
+  display: "flex",
+  flexDirection: "row",
+  gap: `${SPACING_UNIT}px`,
+  width: "100%",
+});
+
+export const gameInformation = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+});
+
+export const profileHeaderSkeleton = style({
+  height: "200px",
+});

src/renderer/src/pages/profile/profile.tsx

@@ -18,7 +18,7 @@ export const Profile = () => {
   useEffect(() => {
     window.electron.getUserProfile(username!).then((userProfile) => {
       if (userProfile) {
-        dispatch(setHeaderTitle(userProfile.username));
+        dispatch(setHeaderTitle(userProfile.displayName));
         setUserProfile(userProfile);
       }
     });

src/types/index.ts

@@ -243,7 +243,7 @@ export interface RealDebridUser {
 }
 
 export interface UserProfile {
-  username: string;
+  displayName: string;
   libraryGames: ProfileGame[];
   recentGames: ProfileGame[];
 }