From c035e16298011c366fe42f40a1709c5509a3114c Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Mon, 15 Feb 2021 01:35:41 +0800
Subject: fix: Timeline highlight and bookmark buttom no reaction.

---
 .../timeline-common/TimelinePageCardTemplate.tsx   | 64 ++++++++++++++--------
 .../app/views/timeline-common/timeline-common.sass |  8 ---
 2 files changed, 42 insertions(+), 30 deletions(-)

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx
index 921f1390..49cbe791 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx
@@ -49,6 +49,21 @@ 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 (
@@ -66,23 +81,25 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
           <div className="text-right mt-2">
             <i
               className={clsx(
-                timeline.isHighlight ? "bi-star-fill" : "bi-star",
+                isHighlight ? "bi-star-fill" : "bi-star",
                 "icon-button text-yellow mr-3"
               )}
               onClick={
-                user != null &&
-                user.hasHighlightTimelineAdministrationPermission
+                user?.hasHighlightTimelineAdministrationPermission
                   ? () => {
                       getHttpHighlightClient()
-                        [timeline.isHighlight ? "delete" : "put"](timeline.name)
-                        .catch(() => {
-                          pushAlert({
-                            message: timeline.isHighlight
-                              ? "timeline.removeHighlightFail"
-                              : "timeline.addHighlightFail",
-                            type: "danger",
-                          });
-                        });
+                        [isHighlight ? "delete" : "put"](timeline.name)
+                        .then(
+                          () => setOverrideIsHighlight(!isHighlight),
+                          () => {
+                            pushAlert({
+                              message: timeline.isHighlight
+                                ? "timeline.removeHighlightFail"
+                                : "timeline.addHighlightFail",
+                              type: "danger",
+                            });
+                          }
+                        );
                     }
                   : undefined
               }
@@ -90,20 +107,23 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
             {user != null ? (
               <i
                 className={clsx(
-                  timeline.isBookmark ? "bi-bookmark-fill" : "bi-bookmark",
+                  isBookmark ? "bi-bookmark-fill" : "bi-bookmark",
                   "icon-button text-yellow mr-3"
                 )}
                 onClick={() => {
                   getHttpBookmarkClient()
-                    [timeline.isBookmark ? "delete" : "put"](timeline.name)
-                    .catch(() => {
-                      pushAlert({
-                        message: timeline.isBookmark
-                          ? "timeline.removeBookmarkFail"
-                          : "timeline.addBookmarkFail",
-                        type: "danger",
-                      });
-                    });
+                    [isBookmark ? "delete" : "put"](timeline.name)
+                    .then(
+                      () => setOverrideIsBookmark(!isBookmark),
+                      () => {
+                        pushAlert({
+                          message: timeline.isBookmark
+                            ? "timeline.removeBookmarkFail"
+                            : "timeline.addBookmarkFail",
+                          type: "danger",
+                        });
+                      }
+                    );
                 }}
               />
             ) : null}
diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
index 1a7bfc3b..31404d8c 100644
--- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass
+++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
@@ -170,11 +170,3 @@ $timeline-line-color-current: #36c2e6
   top: 56px
   right: 0
   margin: 0.5em
-
-.timeline-container
-  display: flex
-  justify-content: center
-
-  .timeline
-    max-width: 80em
-    flex-grow: 1
-- 
cgit v1.2.3