From 909e288bec20b5362e999821c5d82a10c2b86a1a Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Sun, 21 Jul 2024 15:45:13 -0300
Subject: [PATCH] feat: background on profile page for other users profile

---
 src/renderer/src/helpers.ts                  | 12 +++++++++
 src/renderer/src/hooks/use-user-details.ts   | 13 +++-------
 src/renderer/src/pages/user/user-content.tsx | 26 +++++++++++++++-----
 3 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/renderer/src/helpers.ts b/src/renderer/src/helpers.ts
index d37612d4..182aef25 100644
--- a/src/renderer/src/helpers.ts
+++ b/src/renderer/src/helpers.ts
@@ -1,6 +1,7 @@
 import type { GameShop } from "@types";
 
 import Color from "color";
+import { average } from "color.js";
 
 export const steamUrlBuilder = {
   library: (objectID: string) =>
@@ -45,3 +46,14 @@ export const buildGameDetailsPath = (
 
 export const darkenColor = (color: string, amount: number, alpha: number = 1) =>
   new Color(color).darken(amount).alpha(alpha).toString();
+
+export const profileBackgroundFromProfileImage = async (
+  profileImageUrl: string
+) => {
+  const output = await average(profileImageUrl, {
+    amount: 1,
+    format: "hex",
+  });
+
+  return `linear-gradient(135deg, ${darkenColor(output as string, 0.6)}, ${darkenColor(output as string, 0.8, 0.7)})`;
+};
diff --git a/src/renderer/src/hooks/use-user-details.ts b/src/renderer/src/hooks/use-user-details.ts
index a0da950a..80ef8b4c 100644
--- a/src/renderer/src/hooks/use-user-details.ts
+++ b/src/renderer/src/hooks/use-user-details.ts
@@ -1,6 +1,4 @@
 import { useCallback } from "react";
-import { average } from "color.js";
-
 import { useAppDispatch, useAppSelector } from "./redux";
 import {
   setProfileBackground,
@@ -9,7 +7,7 @@ import {
   setFriendsModalVisible,
   setFriendsModalHidden,
 } from "@renderer/features";
-import { darkenColor } from "@renderer/helpers";
+import { profileBackgroundFromProfileImage } from "@renderer/helpers";
 import { FriendRequestAction, UserDetails } from "@types";
 import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 
@@ -42,12 +40,9 @@ export function useUserDetails() {
       dispatch(setUserDetails(userDetails));
 
       if (userDetails.profileImageUrl) {
-        const output = await average(userDetails.profileImageUrl, {
-          amount: 1,
-          format: "hex",
-        });
-
-        const profileBackground = `linear-gradient(135deg, ${darkenColor(output as string, 0.6)}, ${darkenColor(output as string, 0.8, 0.7)})`;
+        const profileBackground = await profileBackgroundFromProfileImage(
+          userDetails.profileImageUrl
+        );
         dispatch(setProfileBackground(profileBackground));
 
         window.localStorage.setItem(
diff --git a/src/renderer/src/pages/user/user-content.tsx b/src/renderer/src/pages/user/user-content.tsx
index e70335d8..cf332405 100644
--- a/src/renderer/src/pages/user/user-content.tsx
+++ b/src/renderer/src/pages/user/user-content.tsx
@@ -12,7 +12,11 @@ import {
   useUserDetails,
 } from "@renderer/hooks";
 import { useNavigate } from "react-router-dom";
-import { buildGameDetailsPath, steamUrlBuilder } from "@renderer/helpers";
+import {
+  buildGameDetailsPath,
+  profileBackgroundFromProfileImage,
+  steamUrlBuilder,
+} from "@renderer/helpers";
 import { PersonIcon, PlusIcon, TelescopeIcon } from "@primer/octicons-react";
 import { Button, Link } from "@renderer/components";
 import { UserEditProfileModal } from "./user-edit-modal";
@@ -41,6 +45,8 @@ export function UserContent({
   } = useUserDetails();
   const { showSuccessToast } = useToast();
 
+  const [profileContentBoxBackground, setProfileContentBoxBackground] =
+    useState<string | undefined>();
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
   const [showSignOutModal, setShowSignOutModal] = useState(false);
 
@@ -96,11 +102,19 @@ export function UserContent({
     if (isMe) updateFriendRequests();
   }, [isMe]);
 
-  const profileContentBoxBackground = useMemo(() => {
-    if (profileBackground) return profileBackground;
-    /* TODO: Render background colors for other users */
-    return undefined;
-  }, [profileBackground]);
+  useEffect(() => {
+    if (isMe && profileBackground) {
+      setProfileContentBoxBackground(profileBackground);
+    }
+
+    if (userProfile.profileImageUrl) {
+      profileBackgroundFromProfileImage(userProfile.profileImageUrl).then(
+        (profileBackground) => {
+          setProfileContentBoxBackground(profileBackground);
+        }
+      );
+    }
+  }, [profileBackground, isMe]);
 
   return (
     <>