fix: auto fetch more (#2472)

* fix: auto fetch more

* feat: use union type

web/src/components/Memo.tsx

@@ -43,13 +43,20 @@ const Memo: React.FC<Props> = (props: Props) => {
   const [displayTime, setDisplayTime] = useState<string>(getRelativeTimeString(memo.displayTs));
   const memoContainerRef = useRef<HTMLDivElement>(null);
   const readonly = memo.creatorUsername !== user?.username;
-  const creator = userV1Store.getUserByUsername(memo.creatorUsername);
+  const [creator, setCreator] = useState(userV1Store.getUserByUsername(memo.creatorUsername));
   const referenceRelations = memo.relationList.filter((relation) => relation.type === "REFERENCE");
   const commentRelations = memo.relationList.filter((relation) => relation.relatedMemoId === memo.id && relation.type === "COMMENT");
 
   // Prepare memo creator.
   useEffect(() => {
-    userV1Store.getOrFetchUserByUsername(memo.creatorUsername);
+    if (creator) return;
+
+    const fn = async () => {
+      const user = await userV1Store.getOrFetchUserByUsername(memo.creatorUsername);
+      setCreator(user);
+    };
+
+    fn();
   }, [memo.creatorUsername]);
 
   // Update display time string.
@@ -68,30 +75,23 @@ const Memo: React.FC<Props> = (props: Props) => {
 
   // Lazy rendering.
   useEffect(() => {
-    if (shouldRender) {
-      return;
-    }
+    if (shouldRender) return;
+    if (!memoContainerRef.current) return;
+
+    const observer = new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting) return;
+      observer.disconnect();
 
-    const root = document.body.querySelector("#root");
-    if (root) {
-      const checkShouldRender = () => {
-        if (root.scrollTop + window.innerHeight > (memoContainerRef.current?.offsetTop || 0)) {
       setShouldRender(true);
-          root.removeEventListener("scroll", checkShouldRender);
-          return true;
-        }
-      };
+    });
+    observer.observe(memoContainerRef.current);
 
-      if (checkShouldRender()) {
-        return;
-      }
-      root.addEventListener("scroll", checkShouldRender);
-    }
+    return () => observer.disconnect();
   }, [lazyRendering, filterStore.state]);
 
   if (!shouldRender) {
     // Render a placeholder to occupy the space.
-    return <div className={`w-full h-32 !bg-transparent ${"memos-" + memo.id}`} ref={memoContainerRef}></div>;
+    return <div className={`w-full h-32 !bg-transparent ${"memos-" + memo.id}`} ref={memoContainerRef} />;
   }
 
   const handleGotoMemoDetailPage = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -299,7 +299,9 @@ const Memo: React.FC<Props> = (props: Props) => {
                   <Tooltip title={"Creator"} placement="top">
                     <span className="flex flex-row justify-start items-center">
                       <UserAvatar className="!w-5 !h-auto mr-1" avatarUrl={creator.avatarUrl} />
-                      <span className="text-sm text-gray-600 max-w-[8em] truncate dark:text-gray-400">{creator.nickname}</span>
+                      <span className="text-sm text-gray-600 max-w-[8em] truncate dark:text-gray-400">
+                        {creator.nickname || creator.username}
+                      </span>
                     </span>
                   </Tooltip>
                 </Link>

web/src/components/MemoList.tsx

-import { useEffect, useState } from "react";
+import { useEffect, useRef } from "react";
 import { toast } from "react-hot-toast";
 import { useParams } from "react-router-dom";
+import MemoFilter from "@/components/MemoFilter";
 import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
 import { getTimeStampByDate } from "@/helpers/datetime";
 import useCurrentUser from "@/hooks/useCurrentUser";
@@ -16,14 +17,14 @@ const MemoList: React.FC = () => {
   const memoStore = useMemoStore();
   const filterStore = useFilterStore();
   const filter = filterStore.state;
-  const { memos } = memoStore.state;
-  const [isFetching, setIsFetching] = useState<boolean>(true);
-  const [isComplete, setIsComplete] = useState<boolean>(false);
+  const { loadingStatus, memos } = memoStore.state;
   const user = useCurrentUser();
   const { tag: tagQuery, duration, text: textQuery, visibility } = filter;
   const showMemoFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || textQuery || visibility);
   const username = params.username || user?.username || "";
 
+  const fetchMoreRef = useRef<HTMLSpanElement>(null);
+
   const shownMemos = (
     showMemoFilter
       ? memos.filter((memo) => {
@@ -74,74 +75,48 @@ const MemoList: React.FC = () => {
   const sortedMemos = pinnedMemos.concat(unpinnedMemos).filter((m) => m.rowStatus === "NORMAL");
 
   useEffect(() => {
-    memoStore
-      .fetchMemos(username)
-      .then((fetchedMemos) => {
-        if (fetchedMemos.length < DEFAULT_MEMO_LIMIT) {
-          setIsComplete(true);
-        } else {
-          setIsComplete(false);
-        }
-        setIsFetching(false);
-      })
-      .catch((error) => {
-        console.error(error);
-        toast.error(error.response.data.message);
-      });
-  }, [user?.username]);
-
-  useEffect(() => {
-    const pageWrapper = document.body.querySelector(".page-wrapper");
-    if (pageWrapper) {
-      pageWrapper.scrollTo(0, 0);
+    const root = document.body.querySelector("#root");
+    if (root) {
+      root.scrollTo(0, 0);
     }
   }, [filter]);
 
   useEffect(() => {
-    if (isFetching || isComplete) {
-      return;
-    }
-    if (sortedMemos.length < DEFAULT_MEMO_LIMIT) {
-      handleFetchMoreClick();
-      return;
-    }
+    if (!fetchMoreRef.current) return;
+
     const observer = new IntersectionObserver(([entry]) => {
-      if (entry.isIntersecting) {
+      if (!entry.isIntersecting) return;
+      observer.disconnect();
       handleFetchMoreClick();
-        observer.unobserve(entry.target);
-      }
     });
-  }, [isFetching, isComplete, filter, sortedMemos.length]);
+    observer.observe(fetchMoreRef.current);
+
+    return () => observer.disconnect();
+  }, [loadingStatus]);
 
   const handleFetchMoreClick = async () => {
     try {
-      setIsFetching(true);
-      const fetchedMemos = await memoStore.fetchMemos(username, DEFAULT_MEMO_LIMIT, memos.length);
-      if (fetchedMemos.length < DEFAULT_MEMO_LIMIT) {
-        setIsComplete(true);
-      } else {
-        setIsComplete(false);
-      }
-      setIsFetching(false);
+      await memoStore.fetchMemos(username, DEFAULT_MEMO_LIMIT, memos.length);
     } catch (error: any) {
-      console.error(error);
       toast.error(error.response.data.message);
     }
   };
 
   return (
     <div className="flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll pb-28 hide-scrollbar">
+      <MemoFilter />
       {sortedMemos.map((memo) => (
-        <Memo key={`${memo.id}-${memo.displayTs}`} memo={memo} lazyRendering showVisibility showPinnedStyle />
+        <Memo key={memo.id} memo={memo} lazyRendering showVisibility showPinnedStyle />
       ))}
-      {isFetching ? (
+
+      {loadingStatus === "fetching" ? (
         <div className="flex flex-col justify-start items-center w-full mt-2 mb-1">
           <p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
         </div>
       ) : (
         <div className="flex flex-col justify-start items-center w-full my-6">
           <div className="text-sm text-gray-400 italic">
-            {isComplete ? (
+            {loadingStatus === "complete" ? (
               sortedMemos.length === 0 && (
                 <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
                   <Empty />
@@ -149,11 +124,9 @@ const MemoList: React.FC = () => {
                 </div>
               )
             ) : (
-              <>
-                <span className="cursor-pointer hover:text-green-600" onClick={handleFetchMoreClick}>
+              <span ref={fetchMoreRef} className="cursor-pointer hover:text-green-600" onClick={handleFetchMoreClick}>
                 {t("memo.fetch-more")}
               </span>
-              </>
             )}
           </div>
         </div>

web/src/pages/Explore.tsx

-import { useEffect, useState } from "react";
+import { useEffect, useRef } from "react";
 import { toast } from "react-hot-toast";
-import { useLocation } from "react-router-dom";
 import Empty from "@/components/Empty";
 import Memo from "@/components/Memo";
 import MemoFilter from "@/components/MemoFilter";
 import MobileHeader from "@/components/MobileHeader";
 import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
-import useLoading from "@/hooks/useLoading";
 import { TAG_REG } from "@/labs/marked/parser";
 import { useFilterStore, useMemoStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 
 const Explore = () => {
   const t = useTranslate();
-  const location = useLocation();
   const filterStore = useFilterStore();
   const memoStore = useMemoStore();
   const filter = filterStore.state;
-  const { memos } = memoStore.state;
-  const [isComplete, setIsComplete] = useState<boolean>(false);
-  const loadingState = useLoading();
-
+  const { loadingStatus, memos } = memoStore.state;
   const { tag: tagQuery, text: textQuery } = filter;
   const showMemoFilter = Boolean(tagQuery || textQuery);
+  const fetchMoreRef = useRef<HTMLSpanElement>(null);
 
   const fetchedMemos = showMemoFilter
     ? memos.filter((memo) => {
@@ -58,30 +53,22 @@ const Explore = () => {
     .sort((mi, mj) => mj.displayTs - mi.displayTs);
 
   useEffect(() => {
-    memoStore
-      .fetchAllMemos(DEFAULT_MEMO_LIMIT, 0)
-      .then((fetchedMemos) => {
-        if (fetchedMemos.length < DEFAULT_MEMO_LIMIT) {
-          setIsComplete(true);
-        }
-        loadingState.setFinish();
-      })
-      .catch((error) => {
-        console.error(error);
-        toast.error(error.response.data.message);
+    if (!fetchMoreRef.current) return;
+
+    const observer = new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting) return;
+      observer.disconnect();
+      handleFetchMoreClick();
     });
-  }, [location]);
+    observer.observe(fetchMoreRef.current);
+
+    return () => observer.disconnect();
+  }, [loadingStatus]);
 
   const handleFetchMoreClick = async () => {
     try {
-      const fetchedMemos = await memoStore.fetchAllMemos(DEFAULT_MEMO_LIMIT, memos.length);
-      if (fetchedMemos.length < DEFAULT_MEMO_LIMIT) {
-        setIsComplete(true);
-      } else {
-        setIsComplete(false);
-      }
+      await memoStore.fetchAllMemos(DEFAULT_MEMO_LIMIT, memos.length);
     } catch (error: any) {
-      console.error(error);
       toast.error(error.response.data.message);
     }
   };
@@ -89,26 +76,35 @@ const Explore = () => {
   return (
     <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
-      {!loadingState.isLoading && (
       <div className="relative w-full h-auto flex flex-col justify-start items-start">
         <MemoFilter />
-          {sortedMemos.map((memo) => {
-            return <Memo key={`${memo.id}-${memo.displayTs}`} memo={memo} />;
-          })}
-          {isComplete ? (
+        {sortedMemos.map((memo) => (
+          <Memo key={memo.id} memo={memo} lazyRendering />
+        ))}
+
+        {loadingStatus === "fetching" ? (
+          <div className="flex flex-col justify-start items-center w-full mt-2 mb-1">
+            <p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
+          </div>
+        ) : (
+          <div className="flex flex-col justify-start items-center w-full my-6">
+            <div className="text-sm text-gray-400 italic">
+              {loadingStatus === "complete" ? (
                 sortedMemos.length === 0 && (
-              <div className="w-full mt-16 mb-8 flex flex-col justify-center items-center italic">
+                  <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
                     <Empty />
                     <p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
                   </div>
                 )
               ) : (
-            <p className="m-auto text-center mt-4 italic cursor-pointer text-gray-500 hover:text-green-600" onClick={handleFetchMoreClick}>
+                <span ref={fetchMoreRef} className="cursor-pointer hover:text-green-600" onClick={handleFetchMoreClick}>
                   {t("memo.fetch-more")}
-            </p>
+                </span>
               )}
             </div>
+          </div>
         )}
+      </div>
     </section>
   );
 };

web/src/pages/Home.tsx

 import HomeSidebar from "@/components/HomeSidebar";
 import MemoEditor from "@/components/MemoEditor";
-import MemoFilter from "@/components/MemoFilter";
 import MemoList from "@/components/MemoList";
 import MobileHeader from "@/components/MobileHeader";
 
@@ -9,10 +8,7 @@ const Home = () => {
     <div className="@container w-full flex flex-row justify-start items-start">
       <div className="w-full px-4 @lg:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
         <MobileHeader />
-        <div className="w-full h-auto flex flex-col justify-start items-start bg-zinc-100 dark:bg-zinc-800 rounded-lg">
         <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
-          <MemoFilter />
-        </div>
         <MemoList />
       </div>
       <HomeSidebar />

web/src/store/module/memo.ts

@@ -2,7 +2,7 @@ import { omit } from "lodash-es";
 import * as api from "@/helpers/api";
 import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
 import store, { useAppSelector } from "../";
-import { createMemo, deleteMemo, patchMemo, upsertMemos } from "../reducer/memo";
+import { updateLoadingStatus, createMemo, deleteMemo, patchMemo, upsertMemos } from "../reducer/memo";
 import { useMemoCacheStore } from "../v1";
 
 export const convertResponseModelMemo = (memo: Memo): Memo => {
@@ -40,12 +40,17 @@ export const useMemoStore = () => {
       if (username) {
         memoFind.creatorUsername = username;
       }
+
+      store.dispatch(updateLoadingStatus("fetching"));
       const { data } = await api.getMemoList(memoFind);
       const fetchedMemos = data.map((m) => convertResponseModelMemo(m));
       store.dispatch(upsertMemos(fetchedMemos));
+      store.dispatch(updateLoadingStatus(fetchedMemos.length === limit ? "incomplete" : "complete"));
+
       for (const m of fetchedMemos) {
         memoCacheStore.setMemoCache(m);
       }
+
       return fetchedMemos;
     },
     fetchAllMemos: async (limit = DEFAULT_MEMO_LIMIT, offset?: number) => {
@@ -54,9 +59,12 @@ export const useMemoStore = () => {
         limit,
         offset,
       };
+
+      store.dispatch(updateLoadingStatus("fetching"));
       const { data } = await api.getAllMemos(memoFind);
       const fetchedMemos = data.map((m) => convertResponseModelMemo(m));
       store.dispatch(upsertMemos(fetchedMemos));
+      store.dispatch(updateLoadingStatus(fetchedMemos.length === limit ? "incomplete" : "complete"));
 
       for (const m of fetchedMemos) {
         memoCacheStore.setMemoCache(m);

web/src/store/reducer/memo.ts

 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { uniqBy } from "lodash-es";
 
+type LoadingStatus = "incomplete" | "fetching" | "complete";
+
 interface State {
+  loadingStatus: LoadingStatus;
   memos: Memo[];
 }
 
 const memoSlice = createSlice({
   name: "memo",
   initialState: {
+    loadingStatus: "incomplete",
     memos: [],
   } as State,
   reducers: {
+    updateLoadingStatus: (state, action: PayloadAction<LoadingStatus>) => {
+      return {
+        ...state,
+        loadingStatus: action.payload,
+      };
+    },
     upsertMemos: (state, action: PayloadAction<Memo[]>) => {
       return {
         ...state,
@@ -51,6 +61,6 @@ const memoSlice = createSlice({
   },
 });
 
-export const { upsertMemos, createMemo, patchMemo, deleteMemo } = memoSlice.actions;
+export const { updateLoadingStatus, upsertMemos, createMemo, patchMemo, deleteMemo } = memoSlice.actions;
 
 export default memoSlice.reducer;