2 files changed, 16 insertions, 13 deletions
diff --git a/FrontEnd/src/app/views/user/UserInfoCard.tsx b/FrontEnd/src/app/views/user/UserInfoCard.tsx
index 01d2c096..24b7b979 100644
--- a/FrontEnd/src/app/views/user/UserInfoCard.tsx
+++ b/FrontEnd/src/app/views/user/UserInfoCard.tsx
@@ -1,12 +1,10 @@
 import React from "react";
 
-import { useAvatar } from "@/services/user";
-
-import BlobImage from "../common/BlobImage";
 import TimelineCardTemplate, {
   TimelineCardTemplateProps,
 } from "../timeline-common/TimelineCardTemplate";
 import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
+import UserAvatar from "../common/user/UserAvatar";
 
 export type PersonalTimelineManageItem = "avatar" | "nickname";
 
@@ -16,8 +14,6 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
   const { timeline, operations } = props;
   const { onManage, onMember } = operations;
 
-  const avatar = useAvatar(timeline?.owner?.username);
-
   return (
     <TimelineCardTemplate
       infoArea={
@@ -27,8 +23,8 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
             <small className="ml-3 text-secondary">{timeline.name}</small>
           </h3>
           <div className="align-middle">
-            <BlobImage
-              blob={avatar}
+            <UserAvatar
+              username={timeline.owner.username}
               className="avatar small rounded-circle mr-3"
             />
             {timeline.owner.nickname}
diff --git a/FrontEnd/src/app/views/user/index.tsx b/FrontEnd/src/app/views/user/index.tsx
index bb986178..9b5acbba 100644
--- a/FrontEnd/src/app/views/user/index.tsx
+++ b/FrontEnd/src/app/views/user/index.tsx
@@ -1,10 +1,9 @@
 import React, { useState } from "react";
 import { useParams } from "react-router";
 
-import { userInfoService } from "@/services/user";
+import { getHttpUserClient } from "@/http/user";
 
 import TimelinePageTemplate from "../timeline-common/TimelinePageTemplate";
-
 import UserPageUI from "./UserPageUI";
 import { PersonalTimelineManageItem } from "./UserInfoCard";
 import ChangeNicknameDialog from "./ChangeNicknameDialog";
@@ -15,6 +14,8 @@ const UserPage: React.FC = (_) => {
 
   const [dialog, setDialog] = useState<null | PersonalTimelineManageItem>(null);
 
+  const [reloadKey, setReloadKey] = React.useState<number>(0);
+
   let dialogElement: React.ReactElement | undefined;
 
   const closeDialog = (): void => setDialog(null);
@@ -24,9 +25,10 @@ const UserPage: React.FC = (_) => {
       <ChangeNicknameDialog
         open
         close={closeDialog}
-        onProcess={(newNickname) =>
-          userInfoService.setNickname(username, newNickname)
-        }
+        onProcess={async (newNickname) => {
+          await getHttpUserClient().patch(username, { nickname: newNickname });
+          setReloadKey(reloadKey + 1);
+        }}
       />
     );
   } else if (dialog === "avatar") {
@@ -34,7 +36,10 @@ const UserPage: React.FC = (_) => {
       <ChangeAvatarDialog
         open
         close={closeDialog}
-        process={(file) => userInfoService.setAvatar(username, file)}
+        process={async (file) => {
+          await getHttpUserClient().putAvatar(username, file);
+          setReloadKey(reloadKey + 1);
+        }}
       />
     );
   }
@@ -46,6 +51,8 @@ const UserPage: React.FC = (_) => {
         UiComponent={UserPageUI}
         onManage={(item) => setDialog(item)}
         notFoundI18nKey="timeline.userNotExist"
+        reloadKey={reloadKey}
+        onReload={() => setReloadKey(reloadKey + 1)}
       />
       {dialogElement}
     </>