From c7a3813b8c64152e91fdd0f99e8f0baf0fef4678 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 13 Feb 2021 21:55:47 +0800
Subject: ...

---
 .../views/timeline-common/TimelinePageTemplateUI.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

(limited to 'FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx')

diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index d133bd34..7fcf2d52 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -4,7 +4,7 @@ import { Spinner } from "react-bootstrap";
 
 import { getAlertHost } from "@/services/alert";
 
-import { HttpTimelineInfo } from "@/http/timeline";
+import { HttpTimelineInfo, HttpTimelinePostInfo } from "@/http/timeline";
 
 import Timeline from "./Timeline";
 import TimelinePostEdit from "./TimelinePostEdit";
@@ -47,10 +47,20 @@ export default function TimelinePageTemplateUI<TManageItems>(
 
   const { t } = useTranslation();
 
+  const scrollToBottom = React.useCallback(() => {
+    window.scrollTo(0, document.body.scrollHeight);
+  }, []);
+
   const [bottomSpaceHeight, setBottomSpaceHeight] = React.useState<number>(0);
 
   const [timelineReloadKey, setTimelineReloadKey] = React.useState<number>(0);
-  const reloadTimeline = (): void => setTimelineReloadKey((old) => old + 1);
+
+  const [newPosts, setNewPosts] = React.useState<HttpTimelinePostInfo[]>([]);
+
+  const reloadTimeline = (): void => {
+    setTimelineReloadKey((old) => old + 1);
+    setNewPosts([]);
+  };
 
   const onPostEditHeightChange = React.useCallback((height: number): void => {
     setBottomSpaceHeight(height);
@@ -129,6 +139,8 @@ export default function TimelinePageTemplateUI<TManageItems>(
             timelineName={timeline.name}
             reloadKey={timelineReloadKey}
             onReload={reloadTimeline}
+            additionalPosts={newPosts}
+            onLoad={scrollToBottom}
           />
         </div>
         {timeline.postable ? (
@@ -141,7 +153,9 @@ export default function TimelinePageTemplateUI<TManageItems>(
               className="fixed-bottom"
               timeline={timeline}
               onHeightChange={onPostEditHeightChange}
-              onPosted={reloadTimeline}
+              onPosted={(newPost) => {
+                setNewPosts((old) => [...old, newPost]);
+              }}
             />
           </>
         ) : null}
-- 
cgit v1.2.3