...

3 files changed, 9 insertions, 10 deletions

diff --git a/FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx
index 0d3199d6..f472c16a 100644
--- a/FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx
+++ b/FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useHistory } from "react-router";
 import { Trans } from "react-i18next";
 
-import { timelineService } from "@/services/timeline";
+import { getHttpTimelineClient } from "@/http/timeline";
 
 import OperationDialog from "../common/OperationDialog";
 
@@ -43,7 +43,7 @@ const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {
         }
       }}
       onProcess={() => {
-        return timelineService.deleteTimeline(name).toPromise();
+        return getHttpTimelineClient().deleteTimeline(name);
       }}
       onSuccessAndClose={() => {
         history.replace("/");
diff --git a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
index 920f504d..63da6f3c 100644
--- a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
+++ b/FrontEnd/src/app/views/timeline/TimelineInfoCard.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 OrdinaryTimelineManageItem = "delete";
 
@@ -16,8 +14,6 @@ const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
   const { timeline, operations } = props;
   const { onManage, onMember } = operations;
 
-  const avatar = useAvatar(timeline?.owner?.username);
-
   return (
     <TimelineCardTemplate
       infoArea={
@@ -27,8 +23,8 @@ const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (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/timeline/index.tsx b/FrontEnd/src/app/views/timeline/index.tsx
index 225a1a59..8048dd12 100644
--- a/FrontEnd/src/app/views/timeline/index.tsx
+++ b/FrontEnd/src/app/views/timeline/index.tsx
@@ -7,12 +7,13 @@ import TimelinePageUI from "./TimelinePageUI";
 import { OrdinaryTimelineManageItem } from "./TimelineInfoCard";
 import TimelineDeleteDialog from "./TimelineDeleteDialog";
 
-const TimelinePage: React.FC = (_) => {
+const TimelinePage: React.FC = () => {
   const { name } = useParams<{ name: string }>();
 
   const [dialog, setDialog] = React.useState<OrdinaryTimelineManageItem | null>(
     null
   );
+  const [reloadKey, setReloadKey] = React.useState<number>(0);
 
   let dialogElement: React.ReactElement | undefined;
   if (dialog === "delete") {
@@ -28,6 +29,8 @@ const TimelinePage: React.FC = (_) => {
         UiComponent={TimelinePageUI}
         onManage={(item) => setDialog(item)}
         notFoundI18nKey="timeline.timelineNotExist"
+        reloadKey={reloadKey}
+        onReload={() => setReloadKey(reloadKey + 1)}
       />
       {dialogElement}
     </>