fix: Don't know this is No.which attemp to fix scroll to top bug.

2 files changed, 12 insertions, 15 deletions

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();