From 353e5d6374c77a2744590a5bfd3329672009b281 Mon Sep 17 00:00:00 2001 From: Mohamed Bassem Date: Sun, 22 Dec 2024 16:17:22 +0000 Subject: feat: Add basic pagination to searchBookmarks tRPC --- apps/web/app/dashboard/search/page.tsx | 10 +++++-- .../dashboard/bookmarks/UpdatableBookmarksGrid.tsx | 2 +- apps/web/lib/hooks/bookmark-search.ts | 32 +++++++++++++++------- 3 files changed, 31 insertions(+), 13 deletions(-) (limited to 'apps/web') 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 (
{data ? ( - + b.bookmarks)} + /> ) : ( )} 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({ 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, }; } -- cgit v1.2.3-70-g09d2