feature: Implemente pagination support

5 files changed, 39 insertions, 16 deletions

diff --git a/apps/web/app/dashboard/lists/[listId]/page.tsx b/apps/web/app/dashboard/lists/[listId]/page.tsx
index b9a26053..a8ba4feb 100644
--- a/apps/web/app/dashboard/lists/[listId]/page.tsx
+++ b/apps/web/app/dashboard/lists/[listId]/page.tsx
@@ -43,7 +43,7 @@ export default async function ListPage({
       <hr />
       <BookmarksGrid
         query={{ listId: list.id, archived: false }}
-        bookmarks={bookmarks.bookmarks}
+        bookmarks={bookmarks}
       />
     </div>
   );
diff --git a/apps/web/app/dashboard/search/page.tsx b/apps/web/app/dashboard/search/page.tsx
index 38099c18..62d42a43 100644
--- a/apps/web/app/dashboard/search/page.tsx
+++ b/apps/web/app/dashboard/search/page.tsx
@@ -24,7 +24,7 @@ function SearchComp() {
       {data ? (
         <BookmarksGrid
           query={{ ids: data.bookmarks.map((b) => b.id) }}
-          bookmarks={data.bookmarks}
+          bookmarks={data}
         />
       ) : (
         <Loading />
diff --git a/apps/web/app/dashboard/tags/[tagName]/page.tsx b/apps/web/app/dashboard/tags/[tagName]/page.tsx
index dee29c5e..f06062c3 100644
--- a/apps/web/app/dashboard/tags/[tagName]/page.tsx
+++ b/apps/web/app/dashboard/tags/[tagName]/page.tsx
@@ -38,7 +38,7 @@ export default async function TagPage({
     <div className="container flex flex-col gap-3">
       <span className="pt-4 text-2xl">{tagName}</span>
       <hr />
-      <BookmarksGrid query={query} bookmarks={bookmarks.bookmarks} />
+      <BookmarksGrid query={query} bookmarks={bookmarks} />
     </div>
   );
 }
diff --git a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
index 601b1627..96e5c067 100644
--- a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
+++ b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
@@ -35,7 +35,7 @@ export default async function Bookmarks({
       {showDivider && <hr />}
       <BookmarksGrid
         query={query}
-        bookmarks={bookmarks.bookmarks}
+        bookmarks={bookmarks}
         showEditorCard={showEditorCard}
       />
     </div>
diff --git a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
index 644991bb..b689a192 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useMemo } from "react";
+import { ActionButton } from "@/components/ui/action-button";
 import { api } from "@/lib/trpc";
 import tailwindConfig from "@/tailwind.config";
 import { Slot } from "@radix-ui/react-slot";
@@ -10,6 +11,7 @@ import resolveConfig from "tailwindcss/resolveConfig";
 import type {
   ZBookmark,
   ZGetBookmarksRequest,
+  ZGetBookmarksResponse,
 } from "@hoarder/trpc/types/bookmarks";
 
 import EditorCard from "./EditorCard";
@@ -55,24 +57,45 @@ export default function BookmarksGrid({
   showEditorCard = false,
 }: {
   query: ZGetBookmarksRequest;
-  bookmarks: ZBookmark[];
+  bookmarks: ZGetBookmarksResponse;
   showEditorCard?: boolean;
+  itemsPerPage?: number;
 }) {
-  const { data } = api.bookmarks.getBookmarks.useQuery(query, {
-    initialData: { bookmarks: initialBookmarks },
-  });
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+    api.bookmarks.getBookmarks.useInfiniteQuery(query, {
+      initialData: () => ({
+        pages: [initialBookmarks],
+        pageParams: [query.cursor],
+      }),
+      initialCursor: null,
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    });
+
   const breakpointConfig = useMemo(() => getBreakpointConfig(), []);
-  if (data.bookmarks.length == 0) {
+  const bookmarks = data!.pages.flatMap((b) => b.bookmarks);
+  if (bookmarks.length == 0) {
     return <p>No bookmarks</p>;
   }
   return (
-    <Masonry className="flex gap-4" breakpointCols={breakpointConfig}>
-      {showEditorCard && (
-        <BookmarkCard>
-          <EditorCard />
-        </BookmarkCard>
+    <>
+      <Masonry className="flex gap-4" breakpointCols={breakpointConfig}>
+        {showEditorCard && (
+          <BookmarkCard>
+            <EditorCard />
+          </BookmarkCard>
+        )}
+        {bookmarks.map((b) => renderBookmark(b))}
+      </Masonry>
+      {hasNextPage && (
+        <ActionButton
+          loading={isFetchingNextPage}
+          onClick={() => fetchNextPage()}
+          className="mx-auto w-min"
+          variant="ghost"
+        >
+          Load More
+        </ActionButton>
       )}
-      {data.bookmarks.map((b) => renderBookmark(b))}
-    </Masonry>
+    </>
   );
 }