From b98f85d8a7966fb56da444a6d2be8c9a2805a301 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= <jnuno.carrilho@gmail.com>
Date: Mon, 1 May 2023 06:26:15 +0100
Subject: [PATCH] feat: add infinite scroll for memos (#1614)

Add infinite scroll for memos on home
---
 web/src/components/MemoList.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/web/src/components/MemoList.tsx b/web/src/components/MemoList.tsx
index c5c81e00..af6bfb57 100644
--- a/web/src/components/MemoList.tsx
+++ b/web/src/components/MemoList.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useFilterStore, useMemoStore, useShortcutStore, useUserStore } from "@/store/module";
@@ -86,6 +86,8 @@ const MemoList = () => {
   unpinnedMemos.sort(memoSort);
   const sortedMemos = pinnedMemos.concat(unpinnedMemos).filter((m) => m.rowStatus === "NORMAL");
 
+  const statusRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     memoStore
       .fetchMemos()
@@ -116,7 +118,21 @@ const MemoList = () => {
     if (sortedMemos.length < DEFAULT_MEMO_LIMIT) {
       handleFetchMoreClick();
     }
-  }, [isFetching, isComplete, filter, sortedMemos.length]);
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        handleFetchMoreClick();
+        observer.unobserve(entry.target);
+      }
+    });
+    if (statusRef?.current) {
+      observer.observe(statusRef.current);
+    }
+    return () => {
+      if (statusRef?.current) {
+        observer.unobserve(statusRef.current);
+      }
+    };
+  }, [isFetching, isComplete, filter, sortedMemos.length, statusRef]);
 
   const handleFetchMoreClick = async () => {
     try {
@@ -142,7 +158,7 @@ const MemoList = () => {
           <p className="status-text">{t("memo.fetching-data")}</p>
         </div>
       ) : (
-        <div className="status-text-container">
+        <div ref={statusRef} className="status-text-container">
           <p className="status-text">
             {isComplete ? (
               sortedMemos.length === 0 ? (