chore: update list memos request

web/src/pages/UserProfile.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@mui/joy";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useParams } from "react-router-dom";
 import Empty from "@/components/Empty";
@@ -25,7 +25,7 @@ const UserProfile = () => {
   const memoStore = useMemoStore();
   const memoList = useMemoList();
   const [isRequesting, setIsRequesting] = useState(true);
-  const [isComplete, setIsComplete] = useState(false);
+  const nextPageTokenRef = useRef<string | undefined>(undefined);
   const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
   const sortedMemos = memoList.value
     .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime))
@@ -54,7 +54,7 @@ const UserProfile = () => {
       return;
     }
 
-    memoList.reset();
+    nextPageTokenRef.current = undefined;
     fetchMemos();
   }, [user, tagQuery, textQuery]);
 
@@ -76,12 +76,12 @@ const UserProfile = () => {
     }
     setIsRequesting(true);
     const data = await memoStore.fetchMemos({
+      pageSize: DEFAULT_MEMO_LIMIT,
       filter: filters.join(" && "),
-      limit: DEFAULT_MEMO_LIMIT,
-      offset: memoList.size(),
+      pageToken: nextPageTokenRef.current,
     });
     setIsRequesting(false);
-    setIsComplete(data.length < DEFAULT_MEMO_LIMIT);
+    nextPageTokenRef.current = data.nextPageToken;
   };
 
   return (
@@ -112,7 +112,7 @@ const UserProfile = () => {
                 <div className="flex flex-col justify-start items-center w-full my-4">
                   <p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
                 </div>
-              ) : isComplete ? (
+              ) : !nextPageTokenRef.current ? (
                 sortedMemos.length === 0 && (
                   <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
                     <Empty />