From eea19d43c2a6f5a14ed3bfe0d384147bd535e6f5 Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Tue, 18 Jun 2024 13:50:31 -0300 Subject: [PATCH] reloading user profile on update --- src/main/events/profile/update-profile.ts | 14 +++++---- src/renderer/src/declaration.d.ts | 2 +- src/renderer/src/hooks/use-user-details.ts | 27 ++++++++++++++++ src/renderer/src/pages/user/user-content.tsx | 4 +-- .../src/pages/user/user-edit-modal.tsx | 31 +++++++++++++------ src/renderer/src/pages/user/user.css.ts | 21 +++++++++++-- 6 files changed, 78 insertions(+), 21 deletions(-) diff --git a/src/main/events/profile/update-profile.ts b/src/main/events/profile/update-profile.ts index 2459d036..626f5215 100644 --- a/src/main/events/profile/update-profile.ts +++ b/src/main/events/profile/update-profile.ts @@ -3,8 +3,12 @@ import { HydraApi } from "@main/services/hydra-api"; import axios from "axios"; import fs from "node:fs"; import mime from "mime"; +import { UserProfile } from "@types"; -const patchUserProfile = (displayName: string, profileImageUrl?: string) => { +const patchUserProfile = async ( + displayName: string, + profileImageUrl?: string +) => { if (profileImageUrl) { return HydraApi.patch("/profile", { displayName, @@ -21,10 +25,9 @@ const updateProfile = async ( _event: Electron.IpcMainInvokeEvent, displayName: string, newProfileImagePath: string | null -): Promise => { +): Promise => { if (!newProfileImagePath) { - patchUserProfile(displayName); - return; + return (await patchUserProfile(displayName)).data; } const stats = fs.statSync(newProfileImagePath); @@ -51,8 +54,7 @@ const updateProfile = async ( return undefined; }); - console.log(profileImageUrl); - patchUserProfile(displayName, profileImageUrl); + return (await patchUserProfile(displayName, profileImageUrl)).data; }; registerEvent("updateProfile", updateProfile); diff --git a/src/renderer/src/declaration.d.ts b/src/renderer/src/declaration.d.ts index 53a57228..40fc708b 100644 --- a/src/renderer/src/declaration.d.ts +++ b/src/renderer/src/declaration.d.ts @@ -125,7 +125,7 @@ declare global { updateProfile: ( displayName: string, newProfileImagePath: string | null - ) => Promise; + ) => Promise; } interface Window { diff --git a/src/renderer/src/hooks/use-user-details.ts b/src/renderer/src/hooks/use-user-details.ts index fe4c0505..3a5ff515 100644 --- a/src/renderer/src/hooks/use-user-details.ts +++ b/src/renderer/src/hooks/use-user-details.ts @@ -47,11 +47,38 @@ export function useUserDetails() { }); }, [dispatch]); + const patchUser = useCallback( + async (displayName: string, imageProfileUrl: string | null) => { + return window.electron + .updateProfile(displayName, imageProfileUrl) + .then(async (userDetails) => { + if (userDetails) { + dispatch(setUserDetails(userDetails)); + + if (userDetails.profileImageUrl) { + const output = await average(userDetails.profileImageUrl, { + amount: 1, + format: "hex", + }); + + dispatch( + setProfileBackground( + `linear-gradient(135deg, ${darkenColor(output as string, 0.6)}, ${darkenColor(output as string, 0.7)})` + ) + ); + } + } + }); + }, + [dispatch] + ); + return { userDetails, updateUser, signOut, clearUser, + patchUser, profileBackground, }; } diff --git a/src/renderer/src/pages/user/user-content.tsx b/src/renderer/src/pages/user/user-content.tsx index 3fb7d04b..a0110872 100644 --- a/src/renderer/src/pages/user/user-content.tsx +++ b/src/renderer/src/pages/user/user-content.tsx @@ -26,8 +26,7 @@ export function UserContent({ }: ProfileContentProps) { const { t, i18n } = useTranslation("user_profile"); - const { userDetails, profileBackground, signOut, updateUser } = - useUserDetails(); + const { userDetails, profileBackground, signOut } = useUserDetails(); const [showEditProfileModal, setShowEditProfileModal] = useState(false); @@ -72,7 +71,6 @@ export function UserContent({ }; const handleUpdateUserProfile = async () => { - updateUser(); updateUserProfile(); }; diff --git a/src/renderer/src/pages/user/user-edit-modal.tsx b/src/renderer/src/pages/user/user-edit-modal.tsx index bba70366..71ae112f 100644 --- a/src/renderer/src/pages/user/user-edit-modal.tsx +++ b/src/renderer/src/pages/user/user-edit-modal.tsx @@ -1,10 +1,10 @@ import { Button, Modal, TextField } from "@renderer/components"; import { UserProfile } from "@types"; import * as styles from "./user.css"; -import { PersonIcon } from "@primer/octicons-react"; +import { PencilIcon, PersonIcon } from "@primer/octicons-react"; import { SPACING_UNIT } from "@renderer/theme.css"; import { useState } from "react"; -import { useToast } from "@renderer/hooks"; +import { useToast, useUserDetails } from "@renderer/hooks"; export interface UserEditProfileModalProps { userProfile: UserProfile; @@ -22,6 +22,9 @@ export const UserEditProfileModal = ({ const [displayName, setDisplayName] = useState(userProfile.displayName); const [newImagePath, setNewImagePath] = useState(null); const [newImageBase64, setNewImageBase64] = useState(null); + const [isSaving, setIsSaving] = useState(false); + + const { patchUser } = useUserDetails(); const { showSuccessToast, showErrorToast } = useToast(); @@ -48,16 +51,19 @@ export const UserEditProfileModal = ({ }; const handleSaveProfile = async () => { - window.electron - .updateProfile(displayName, newImagePath) + setIsSaving(true); + patchUser(displayName, newImagePath) .then(() => { updateUser(); setNewImagePath(null); - showSuccessToast("Sucesso"); + showSuccessToast("Salvo com sucesso"); onClose(); }) .catch(() => { - showErrorToast("Erro"); + showErrorToast("Tente novamente"); + }) + .finally(() => { + setIsSaving(false); }); }; return ( @@ -71,7 +77,7 @@ export const UserEditProfileModal = ({ justifyContent: "center", alignItems: "center", gap: `${SPACING_UNIT * 3}px`, - width: "300px", + width: "350px", }} > setDisplayName(e.target.value)} /> - diff --git a/src/renderer/src/pages/user/user.css.ts b/src/renderer/src/pages/user/user.css.ts index ceb74089..0f3ec142 100644 --- a/src/renderer/src/pages/user/user.css.ts +++ b/src/renderer/src/pages/user/user.css.ts @@ -38,19 +38,22 @@ export const profileAvatarContainer = style({ export const profileAvatarEditContainer = style({ width: "128px", height: "128px", - borderRadius: "50%", display: "flex", + borderRadius: "50%", justifyContent: "center", alignItems: "center", backgroundColor: vars.color.background, position: "relative", - overflow: "hidden", border: `solid 1px ${vars.color.border}`, boxShadow: "0px 0px 5px 0px rgba(0, 0, 0, 0.7)", + cursor: "pointer", }); export const profileAvatar = style({ height: "100%", + aspectRatio: 1, + borderRadius: "50%", + overflow: "hidden", objectFit: "cover", }); @@ -158,3 +161,17 @@ export const gameInformation = style({ export const profileHeaderSkeleton = style({ height: "200px", }); + +export const editProfileImageBadge = style({ + width: "28px", + height: "28px", + borderRadius: "50%", + display: "flex", + alignItems: "center", + justifyContent: "center", + backgroundColor: vars.color.muted, + position: "absolute", + bottom: "0px", + right: "0px", + zIndex: "1", +});