diff --git a/src/components/ShowcaseGallery.tsx b/src/components/ShowcaseGallery.tsx index 27dd866d..f7c88cdf 100644 --- a/src/components/ShowcaseGallery.tsx +++ b/src/components/ShowcaseGallery.tsx @@ -16,6 +16,7 @@ import { Button } from '~/ui' import { useCurrentUser } from '~/hooks/useCurrentUser' import { useLoginModal } from '~/contexts/LoginModalContext' import type { LibraryId } from '~/libraries' +import { PAGE_SIZE_OPTIONS } from '~/routes/showcase' export function ShowcaseGallery() { const navigate = useNavigate({ from: '/showcase/' }) @@ -24,11 +25,13 @@ export function ShowcaseGallery() { const currentUser = useCurrentUser() const { openLoginModal } = useLoginModal() + const pageSize = search.pageSize ?? 24 + const { data, isLoading } = useQuery( getApprovedShowcasesQueryOptions({ pagination: { page: search.page, - pageSize: 24, + pageSize, }, filters: { libraryIds: search.libraryIds, @@ -69,7 +72,7 @@ export function ShowcaseGallery() { // Snapshot previous values const previousShowcases = queryClient.getQueryData( getApprovedShowcasesQueryOptions({ - pagination: { page: search.page, pageSize: 24 }, + pagination: { page: search.page, pageSize }, filters: { libraryIds: search.libraryIds, useCases: search.useCases as ShowcaseUseCase[], @@ -113,7 +116,7 @@ export function ShowcaseGallery() { // Optimistically update showcase score queryClient.setQueryData( getApprovedShowcasesQueryOptions({ - pagination: { page: search.page, pageSize: 24 }, + pagination: { page: search.page, pageSize }, filters: { libraryIds: search.libraryIds, useCases: search.useCases as ShowcaseUseCase[], @@ -154,7 +157,7 @@ export function ShowcaseGallery() { if (context?.previousShowcases) { queryClient.setQueryData( getApprovedShowcasesQueryOptions({ - pagination: { page: search.page, pageSize: 24 }, + pagination: { page: search.page, pageSize }, filters: { libraryIds: search.libraryIds, useCases: search.useCases as ShowcaseUseCase[], @@ -251,6 +254,16 @@ export function ShowcaseGallery() { }) } + const handlePageSizeChange = (newPageSize: number) => { + navigate({ + search: (prev: typeof search) => ({ + ...prev, + pageSize: newPageSize, + page: 1, + }), + }) + } + const handleSearchChange = (q: string) => { navigate({ search: (prev: typeof search) => ({ @@ -358,12 +371,14 @@ export function ShowcaseGallery() { currentPage={search.page - 1} totalPages={data.pagination.totalPages} totalItems={data.pagination.total} - pageSize={24} + pageSize={pageSize} onPageChange={handlePageChange} - onPageSizeChange={() => {}} + onPageSizeChange={handlePageSizeChange} canGoPrevious={search.page > 1} canGoNext={search.page < data.pagination.totalPages} itemLabel="projects" + showPageSizeSelector + pageSizeOptions={[...PAGE_SIZE_OPTIONS]} /> )} diff --git a/src/routes/showcase/index.tsx b/src/routes/showcase/index.tsx index 3f8a3ef5..006b4d59 100644 --- a/src/routes/showcase/index.tsx +++ b/src/routes/showcase/index.tsx @@ -7,16 +7,20 @@ import { libraryIdSchema, showcaseUseCaseSchema } from '~/utils/schemas' const searchSchema = v.object({ page: v.optional(v.number(), 1), + pageSize: v.optional(v.number(), 24), libraryIds: v.optional(v.array(libraryIdSchema)), useCases: v.optional(v.array(showcaseUseCaseSchema)), hasSourceCode: v.optional(v.boolean()), q: v.optional(v.string()), }) +export const PAGE_SIZE_OPTIONS = [24, 48, 96, 192] as const + export const Route = createFileRoute('/showcase/')({ validateSearch: searchSchema, loaderDeps: ({ search }) => ({ page: search.page, + pageSize: search.pageSize, libraryIds: search.libraryIds, useCases: search.useCases, hasSourceCode: search.hasSourceCode, @@ -27,7 +31,7 @@ export const Route = createFileRoute('/showcase/')({ getApprovedShowcasesQueryOptions({ pagination: { page: deps.page, - pageSize: 24, + pageSize: deps.pageSize, }, filters: { libraryIds: deps.libraryIds,