From c40fdd0eeb04622999c4d51f3ff5d32c598095c6 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 9 Jun 2020 17:54:41 +0800
Subject: fix(front): Attempt to fix scroll problem in timeline page.

---
 Timeline/ClientApp/src/timeline/Timeline.tsx       |  4 +++-
 Timeline/ClientApp/src/timeline/TimelineItem.tsx   | 12 +++++++---
 .../src/timeline/TimelinePageTemplate.tsx          |  9 --------
 .../src/timeline/TimelinePageTemplateUI.tsx        | 27 +++++++++++++++++++++-
 4 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/Timeline/ClientApp/src/timeline/Timeline.tsx b/Timeline/ClientApp/src/timeline/Timeline.tsx
index acc3ba0a..a2c14815 100644
--- a/Timeline/ClientApp/src/timeline/Timeline.tsx
+++ b/Timeline/ClientApp/src/timeline/Timeline.tsx
@@ -18,13 +18,14 @@ export interface TimelineProps {
   className?: string;
   posts: TimelinePostInfoEx[];
   onDelete: TimelineDeleteCallback;
+  onLoad?: () => void;
 }
 
 const Timeline: React.FC<TimelineProps> = (props) => {
   const user = useUser();
   const avatarVersion = useAvatarVersion();
 
-  const { posts, onDelete } = props;
+  const { posts, onDelete, onLoad } = props;
 
   const [indexShowDeleteButton, setIndexShowDeleteButton] = React.useState<
     number
@@ -83,6 +84,7 @@ const Timeline: React.FC<TimelineProps> = (props) => {
                 }
                 onClick={onItemClick}
                 avatarVersion={av}
+                onLoad={onLoad}
               />
             );
           });
diff --git a/Timeline/ClientApp/src/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/timeline/TimelineItem.tsx
index 7d488826..b10e6aca 100644
--- a/Timeline/ClientApp/src/timeline/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelineItem.tsx
@@ -55,6 +55,7 @@ export interface TimelineItemProps {
   };
   onClick?: () => void;
   avatarVersion?: number;
+  onLoad?: () => void;
 }
 
 const TimelineItem: React.FC<TimelineItemProps> = (props) => {
@@ -62,7 +63,8 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
 
   const current = props.current === true;
 
-  const { more } = props;
+  const { more, onLoad 
+  } = props;
 
   const avatarUrl = useAvatarUrlWithGivenVersion(
     props.avatarVersion,
@@ -117,7 +119,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             className="float-right float-sm-left mx-2"
             to={'/users/' + props.post.author.username}
           >
-            <img src={avatarUrl} className="avatar rounded" />
+            <img onLoad={onLoad} src={avatarUrl} className="avatar rounded" />
           </Link>
           {(() => {
             const { content } = props.post;
@@ -125,7 +127,11 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
               return content.text;
             } else {
               return (
-                <img src={content.url} className="timeline-content-image" />
+                <img
+                  onLoad={onLoad}
+                  src={content.url}
+                  className="timeline-content-image"
+                />
               );
             }
           })()}
diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx
index 2cfb4341..f8721985 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx
@@ -114,15 +114,6 @@ export default function TimelinePageTemplate<
     };
   }, [name, service, user, t, props.dataVersion, props.notFoundI18nKey]);
 
-  React.useEffect(() => {
-    if (posts != null) {
-      window.scrollTo(
-        0,
-        document.body.scrollHeight || document.documentElement.scrollHeight
-      );
-    }
-  }, [posts]);
-
   const closeDialog = React.useCallback((): void => {
     setDialog(null);
   }, []);
diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
index 6d834832..cd9393c2 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Spinner } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
+import { Subject } from 'rxjs';
 
 import { getAlertHost } from '../common/alert-service';
 
@@ -67,6 +68,26 @@ export default function TimelinePageTemplateUI<
     }
   }, []);
 
+  const onLoadSubject = React.useMemo(() => new Subject(), []);
+  const triggerLoadEvent = React.useCallback(() => {
+    onLoadSubject.next(null);
+  }, [onLoadSubject]);
+
+  React.useEffect(() => {
+    let jumpToBottom = true;
+    const timerTag = window.setTimeout(() => {
+      jumpToBottom = false;
+    }, 1000);
+    const subscription = onLoadSubject.subscribe(() => {
+      if (jumpToBottom)
+        window.scrollTo(0, document.body.getBoundingClientRect().height);
+    });
+    return () => {
+      clearTimeout(timerTag);
+      subscription.unsubscribe();
+    };
+  }, [onLoadSubject, timeline, props.posts]);
+
   const [cardHeight, setCardHeight] = React.useState<number>(0);
 
   const onCardHeightChange = React.useCallback((height: number) => {
@@ -104,7 +125,11 @@ export default function TimelinePageTemplateUI<
           );
         } else {
           timelineBody = (
-            <Timeline posts={props.posts} onDelete={props.onDelete} />
+            <Timeline
+              posts={props.posts}
+              onDelete={props.onDelete}
+              onLoad={triggerLoadEvent}
+            />
           );
           if (props.onPost != null) {
             timelineBody = (
-- 
cgit v1.2.3