diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx
index 59dcd5984..80d61943c 100644
--- a/web/src/pages/UserProfile.tsx
+++ b/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
(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 = () => {
{t("memo.fetching-data")}
- ) : isComplete ? (
+ ) : !nextPageTokenRef.current ? (
sortedMemos.length === 0 && (
diff --git a/web/src/store/v1/memo.ts b/web/src/store/v1/memo.ts
index f51e1a947..3a7254e2a 100644
--- a/web/src/store/v1/memo.ts
+++ b/web/src/store/v1/memo.ts
@@ -16,13 +16,13 @@ export const useMemoStore = create(
setState: (state: State) => set(state),
getState: () => get(),
fetchMemos: async (request: Partial) => {
- const { memos } = await memoServiceClient.listMemos(request);
+ const { memos, nextPageToken } = await memoServiceClient.listMemos(request);
const memoMap = get().memoMapById;
for (const memo of memos) {
memoMap[memo.id] = memo;
}
set({ memoMapById: memoMap });
- return memos;
+ return { memos, nextPageToken };
},
getOrFetchMemoById: async (id: number, options?: { skipCache?: boolean; skipStore?: boolean }) => {
const memoMap = get().memoMapById;