diff options
Diffstat (limited to 'FrontEnd/src')
| -rw-r--r-- | FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx | 64 | ||||
| -rw-r--r-- | FrontEnd/src/app/views/timeline-common/timeline-common.sass | 8 |
2 files changed, 42 insertions, 30 deletions
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 |