feat: Add basic pagination to searchBookmarks tRPC

4 files changed, 42 insertions, 17 deletions

diff --git a/apps/mobile/app/dashboard/search.tsx b/apps/mobile/app/dashboard/search.tsx
index 884345e7..de3d0f46 100644
--- a/apps/mobile/app/dashboard/search.tsx
+++ b/apps/mobile/app/dashboard/search.tsx
@@ -17,10 +17,15 @@ export default function Search() {
 
   const onRefresh = api.useUtils().bookmarks.searchBookmarks.invalidate;
 
-  const { data, error, refetch, isPending } =
-    api.bookmarks.searchBookmarks.useQuery(
+  const { data, error, refetch, isPending, fetchNextPage, isFetchingNextPage } =
+    api.bookmarks.searchBookmarks.useInfiniteQuery(
       { text: query },
-      { placeholderData: keepPreviousData },
+      {
+        placeholderData: keepPreviousData,
+        gcTime: 0,
+        initialCursor: null,
+        getNextPageParam: (lastPage) => lastPage.nextCursor,
+      },
     );
 
   if (error) {
@@ -45,7 +50,9 @@ export default function Search() {
       {!data && <FullPageSpinner />}
       {data && (
         <BookmarkList
-          bookmarks={data.bookmarks}
+          bookmarks={data.pages.flatMap((p) => p.bookmarks)}
+          fetchNextPage={fetchNextPage}
+          isFetchingNextPage={isFetchingNextPage}
           onRefresh={onRefresh}
           isRefreshing={isPending}
         />
diff --git a/apps/web/app/dashboard/search/page.tsx b/apps/web/app/dashboard/search/page.tsx
index a239550c..beae73b8 100644
--- a/apps/web/app/dashboard/search/page.tsx
+++ b/apps/web/app/dashboard/search/page.tsx
@@ -6,12 +6,18 @@ import { FullPageSpinner } from "@/components/ui/full-page-spinner";
 import { useBookmarkSearch } from "@/lib/hooks/bookmark-search";
 
 function SearchComp() {
-  const { data } = useBookmarkSearch();
+  const { data, hasNextPage, fetchNextPage, isFetchingNextPage } =
+    useBookmarkSearch();
 
   return (
     <div className="flex flex-col gap-3">
       {data ? (
-        <BookmarksGrid bookmarks={data.bookmarks} />
+        <BookmarksGrid
+          hasNextPage={hasNextPage}
+          fetchNextPage={fetchNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+          bookmarks={data.pages.flatMap((b) => b.bookmarks)}
+        />
       ) : (
         <FullPageSpinner />
       )}
diff --git a/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx
index bc6cd6db..d18eeb1b 100644
--- a/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx
+++ b/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx
@@ -38,7 +38,7 @@ export default function UpdatableBookmarksGrid({
     <BookmarksGrid
       bookmarks={data!.pages.flatMap((b) => b.bookmarks)}
       hasNextPage={hasNextPage}
-      fetchNextPage={() => fetchNextPage()}
+      fetchNextPage={fetchNextPage}
       isFetchingNextPage={isFetchingNextPage}
       showEditorCard={showEditorCard}
     />
diff --git a/apps/web/lib/hooks/bookmark-search.ts b/apps/web/lib/hooks/bookmark-search.ts
index ffdf402d..9890ac6f 100644
--- a/apps/web/lib/hooks/bookmark-search.ts
+++ b/apps/web/lib/hooks/bookmark-search.ts
@@ -50,16 +50,25 @@ export function useDoBookmarkSearch() {
 export function useBookmarkSearch() {
   const { searchQuery } = useSearchQuery();
 
-  const { data, isPending, isPlaceholderData, error } =
-    api.bookmarks.searchBookmarks.useQuery(
-      {
-        text: searchQuery,
-      },
-      {
-        placeholderData: keepPreviousData,
-        gcTime: 0,
-      },
-    );
+  const {
+    data,
+    isPending,
+    isPlaceholderData,
+    error,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = api.bookmarks.searchBookmarks.useInfiniteQuery(
+    {
+      text: searchQuery,
+    },
+    {
+      placeholderData: keepPreviousData,
+      gcTime: 0,
+      initialCursor: null,
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    },
+  );
 
   if (error) {
     throw error;
@@ -71,5 +80,8 @@ export function useBookmarkSearch() {
     data,
     isPending,
     isPlaceholderData,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
   };
 }