diff options
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} |