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/TimelineItem.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

(limited to 'Timeline/ClientApp/src/timeline/TimelineItem.tsx')

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"
+                />
               );
             }
           })()}
-- 
cgit v1.2.3


From 0fd5c2026e266a8bf5f120cdd21b4cd5a5bae755 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 10 Jun 2020 00:24:16 +0800
Subject: Rename.

---
 Timeline/ClientApp/src/timeline/Timeline.tsx               |  6 +++---
 Timeline/ClientApp/src/timeline/TimelineItem.tsx           |  9 ++++-----
 Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx | 14 +++++++-------
 3 files changed, 14 insertions(+), 15 deletions(-)

(limited to 'Timeline/ClientApp/src/timeline/TimelineItem.tsx')

diff --git a/Timeline/ClientApp/src/timeline/Timeline.tsx b/Timeline/ClientApp/src/timeline/Timeline.tsx
index a2c14815..f6ff8949 100644
--- a/Timeline/ClientApp/src/timeline/Timeline.tsx
+++ b/Timeline/ClientApp/src/timeline/Timeline.tsx
@@ -18,14 +18,14 @@ export interface TimelineProps {
   className?: string;
   posts: TimelinePostInfoEx[];
   onDelete: TimelineDeleteCallback;
-  onLoad?: () => void;
+  onResize?: () => void;
 }
 
 const Timeline: React.FC<TimelineProps> = (props) => {
   const user = useUser();
   const avatarVersion = useAvatarVersion();
 
-  const { posts, onDelete, onLoad } = props;
+  const { posts, onDelete, onResize } = props;
 
   const [indexShowDeleteButton, setIndexShowDeleteButton] = React.useState<
     number
@@ -84,7 +84,7 @@ const Timeline: React.FC<TimelineProps> = (props) => {
                 }
                 onClick={onItemClick}
                 avatarVersion={av}
-                onLoad={onLoad}
+                onResize={onResize}
               />
             );
           });
diff --git a/Timeline/ClientApp/src/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/timeline/TimelineItem.tsx
index b10e6aca..215c7b12 100644
--- a/Timeline/ClientApp/src/timeline/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelineItem.tsx
@@ -55,7 +55,7 @@ export interface TimelineItemProps {
   };
   onClick?: () => void;
   avatarVersion?: number;
-  onLoad?: () => void;
+  onResize?: () => void;
 }
 
 const TimelineItem: React.FC<TimelineItemProps> = (props) => {
@@ -63,8 +63,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
 
   const current = props.current === true;
 
-  const { more, onLoad 
-  } = props;
+  const { more, onResize } = props;
 
   const avatarUrl = useAvatarUrlWithGivenVersion(
     props.avatarVersion,
@@ -119,7 +118,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             className="float-right float-sm-left mx-2"
             to={'/users/' + props.post.author.username}
           >
-            <img onLoad={onLoad} src={avatarUrl} className="avatar rounded" />
+            <img onLoad={onResize} src={avatarUrl} className="avatar rounded" />
           </Link>
           {(() => {
             const { content } = props.post;
@@ -128,7 +127,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             } else {
               return (
                 <img
-                  onLoad={onLoad}
+                  onLoad={onResize}
                   src={content.url}
                   className="timeline-content-image"
                 />
diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
index cd9393c2..8fc3815b 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
@@ -68,17 +68,17 @@ export default function TimelinePageTemplateUI<
     }
   }, []);
 
-  const onLoadSubject = React.useMemo(() => new Subject(), []);
-  const triggerLoadEvent = React.useCallback(() => {
-    onLoadSubject.next(null);
-  }, [onLoadSubject]);
+  const resizeSubject = React.useMemo(() => new Subject(), []);
+  const triggerResizeEvent = React.useCallback(() => {
+    resizeSubject.next(null);
+  }, [resizeSubject]);
 
   React.useEffect(() => {
     let jumpToBottom = true;
     const timerTag = window.setTimeout(() => {
       jumpToBottom = false;
     }, 1000);
-    const subscription = onLoadSubject.subscribe(() => {
+    const subscription = resizeSubject.subscribe(() => {
       if (jumpToBottom)
         window.scrollTo(0, document.body.getBoundingClientRect().height);
     });
@@ -86,7 +86,7 @@ export default function TimelinePageTemplateUI<
       clearTimeout(timerTag);
       subscription.unsubscribe();
     };
-  }, [onLoadSubject, timeline, props.posts]);
+  }, [resizeSubject, timeline, props.posts]);
 
   const [cardHeight, setCardHeight] = React.useState<number>(0);
 
@@ -128,7 +128,7 @@ export default function TimelinePageTemplateUI<
             <Timeline
               posts={props.posts}
               onDelete={props.onDelete}
-              onLoad={triggerLoadEvent}
+              onResize={triggerResizeEvent}
             />
           );
           if (props.onPost != null) {
-- 
cgit v1.2.3