feat: Add basic pagination to searchBookmarks tRPC

3 files changed, 31 insertions, 13 deletions

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,
   };
 }