From 6947a71a68a5454d86e5495430d85e6cfd927e71 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 3 Jun 2021 18:28:56 +0800
Subject: fix: Don't know this is No.which attemp to fix scroll to top bug.

---
 .../views/timeline-common/TimelinePagedPostListView.tsx  | 16 +++++-----------
 .../src/app/views/timeline-common/TimelinePostView.tsx   | 11 +++++++----
 2 files changed, 12 insertions(+), 15 deletions(-)

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

diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
index 69fd9207..37f02a82 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
@@ -1,8 +1,9 @@
 import React from "react";
-import { fromEvent } from "rxjs";
 
 import { HttpTimelinePostInfo } from "@/http/timeline";
 
+import useScrollToTop from "@/utilities/useScrollToTop";
+
 import TimelinePostListView from "./TimelinePostListView";
 
 export interface TimelinePagedPostListViewProps {
@@ -25,16 +26,9 @@ const TimelinePagedPostListView: React.FC<TimelinePagedPostListViewProps> = (
       : posts.slice(-lastViewCount);
   }, [posts, lastViewCount]);
 
-  React.useEffect(() => {
-    if (lastViewCount < posts.length) {
-      const subscription = fromEvent(window, "scroll").subscribe(() => {
-        if (window.scrollY === 0) {
-          setLastViewCount(lastViewCount + 10);
-        }
-      });
-      return () => subscription.unsubscribe();
-    }
-  }, [lastViewCount, posts]);
+  useScrollToTop(() => {
+    setLastViewCount(lastViewCount + 10);
+  }, lastViewCount < posts.length);
 
   return (
     <TimelinePostListView
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
index c9fec919..2f778ab1 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
@@ -28,15 +28,18 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
     React.useState<boolean>(false);
   const [deleteDialog, setDeleteDialog] = React.useState<boolean>(false);
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const cardRef = React.useRef<HTMLDivElement>(null!);
+  const cardRef = React.useRef<HTMLDivElement>(null);
   React.useEffect(() => {
     const cardIntersectionObserver = new IntersectionObserver(([e]) => {
       if (e.intersectionRatio > 0) {
-        cardRef.current.style.animationName = "timeline-post-enter";
+        if (cardRef.current != null) {
+          cardRef.current.style.animationName = "timeline-post-enter";
+        }
       }
     });
-    cardIntersectionObserver.observe(cardRef.current);
+    if (cardRef.current) {
+      cardIntersectionObserver.observe(cardRef.current);
+    }
 
     return () => {
       cardIntersectionObserver.disconnect();
-- 
cgit v1.2.3