fix: Fix reload logic.

3 files changed, 28 insertions, 55 deletions

diff --git a/FrontEnd/src/app/views/timeline-common/Timeline.tsx b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
index d40f8e94..3f2cbfb5 100644
--- a/FrontEnd/src/app/views/timeline-common/Timeline.tsx
+++ b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
@@ -42,9 +42,11 @@ const Timeline: React.FC<TimelineProps> = (props) => {
   >("loading");
 
   React.useEffect(() => {
-    let subscribe = true;
-
     setPosts("loading");
+  }, [timelineName]);
+
+  React.useEffect(() => {
+    let subscribe = true;
 
     void getHttpTimelineClient()
       .listPost(timelineName)
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx
index 49cbe791..13b823bf 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx
@@ -49,21 +49,6 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  const [overrideIsHighlight, setOverrideIsHighlight] = React.useState<
-    boolean | null
-  >(null);
-  const [overrideIsBookmark, setOverrideIsBookmark] = React.useState<
-    boolean | null
-  >(null);
-
-  const isHighlight = overrideIsHighlight ?? timeline.isHighlight;
-  const isBookmark = overrideIsBookmark ?? timeline.isBookmark;
-
-  React.useEffect(() => {
-    setOverrideIsHighlight(null);
-    setOverrideIsBookmark(null);
-  }, [timeline]);
-
   const user = useUser();
 
   return (
@@ -81,25 +66,22 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
           <div className="text-right mt-2">
             <i
               className={clsx(
-                isHighlight ? "bi-star-fill" : "bi-star",
+                timeline.isHighlight ? "bi-star-fill" : "bi-star",
                 "icon-button text-yellow mr-3"
               )}
               onClick={
                 user?.hasHighlightTimelineAdministrationPermission
                   ? () => {
                       getHttpHighlightClient()
-                        [isHighlight ? "delete" : "put"](timeline.name)
-                        .then(
-                          () => setOverrideIsHighlight(!isHighlight),
-                          () => {
-                            pushAlert({
-                              message: timeline.isHighlight
-                                ? "timeline.removeHighlightFail"
-                                : "timeline.addHighlightFail",
-                              type: "danger",
-                            });
-                          }
-                        );
+                        [timeline.isHighlight ? "delete" : "put"](timeline.name)
+                        .then(onReload, () => {
+                          pushAlert({
+                            message: timeline.isHighlight
+                              ? "timeline.removeHighlightFail"
+                              : "timeline.addHighlightFail",
+                            type: "danger",
+                          });
+                        });
                     }
                   : undefined
               }
@@ -107,23 +89,20 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
             {user != null ? (
               <i
                 className={clsx(
-                  isBookmark ? "bi-bookmark-fill" : "bi-bookmark",
+                  timeline.isBookmark ? "bi-bookmark-fill" : "bi-bookmark",
                   "icon-button text-yellow mr-3"
                 )}
                 onClick={() => {
                   getHttpBookmarkClient()
-                    [isBookmark ? "delete" : "put"](timeline.name)
-                    .then(
-                      () => setOverrideIsBookmark(!isBookmark),
-                      () => {
-                        pushAlert({
-                          message: timeline.isBookmark
-                            ? "timeline.removeBookmarkFail"
-                            : "timeline.addBookmarkFail",
-                          type: "danger",
-                        });
-                      }
-                    );
+                    [timeline.isBookmark ? "delete" : "put"](timeline.name)
+                    .then(onReload, () => {
+                      pushAlert({
+                        message: timeline.isBookmark
+                          ? "timeline.removeBookmarkFail"
+                          : "timeline.addBookmarkFail",
+                        type: "danger",
+                      });
+                    });
                 }}
               />
             ) : null}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
index 62204ca8..704e51fb 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -3,11 +3,7 @@ import { useTranslation } from "react-i18next";
 import { Container, Spinner } from "react-bootstrap";
 
 import { HttpNetworkError, HttpNotFoundError } from "@/http/common";
-import {
-  getHttpTimelineClient,
-  HttpTimelineInfo,
-  HttpTimelinePostInfo,
-} from "@/http/timeline";
+import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline";
 
 import { getAlertHost } from "@/services/alert";
 
@@ -41,7 +37,9 @@ const TimelinePageTemplate: React.FC<TimelinePageTemplateProps> = (props) => {
 
   React.useEffect(() => {
     setTimeline("loading");
+  }, [timelineName]);
 
+  React.useEffect(() => {
     let subscribe = true;
     void getHttpTimelineClient()
       .getTimeline(timelineName)
@@ -77,11 +75,8 @@ const TimelinePageTemplate: React.FC<TimelinePageTemplateProps> = (props) => {
 
   const [timelineReloadKey, setTimelineReloadKey] = React.useState<number>(0);
 
-  const [newPosts, setNewPosts] = React.useState<HttpTimelinePostInfo[]>([]);
-
   const reloadTimeline = (): void => {
     setTimelineReloadKey((old) => old + 1);
-    setNewPosts([]);
   };
 
   const onPostEditHeightChange = React.useCallback((height: number): void => {
@@ -154,7 +149,6 @@ const TimelinePageTemplate: React.FC<TimelinePageTemplateProps> = (props) => {
             timelineName={timeline.name}
             reloadKey={timelineReloadKey}
             onReload={reloadTimeline}
-            additionalPosts={newPosts}
             onLoad={scrollToBottom}
           />
         </Container>
@@ -168,9 +162,7 @@ const TimelinePageTemplate: React.FC<TimelinePageTemplateProps> = (props) => {
               className="fixed-bottom"
               timeline={timeline}
               onHeightChange={onPostEditHeightChange}
-              onPosted={(newPost) => {
-                setNewPosts((old) => [...old, newPost]);
-              }}
+              onPosted={reloadTimeline}
             />
           </>
         ) : null}