diff --git a/packages/nextjs/components/Pagination.tsx b/packages/nextjs/components/Pagination.tsx index 3ecda9b..58331d7 100644 --- a/packages/nextjs/components/Pagination.tsx +++ b/packages/nextjs/components/Pagination.tsx @@ -2,6 +2,8 @@ import * as React from "react"; import { Pagination as BasePagination } from "shared-ui"; import Link from "next/link"; import classNames from "classnames"; +import { useRouter } from "next/router"; +import { stringify } from "querystring"; type PaginationProps = { pageCount: number; @@ -10,6 +12,7 @@ type PaginationProps = { }; export const Pagination = ({ onPageChange, pageCount = 1, currentPage = 1 }: PaginationProps) => { + const router = useRouter(); const handlePageChanged = (e: React.MouseEvent, page: number) => { if (onPageChange) { e.preventDefault(); @@ -22,6 +25,8 @@ export const Pagination = ({ onPageChange, pageCount = 1, currentPage = 1 }: Pag pageCount={pageCount} NextPreviousLink={Link} currentPage={currentPage} + currentHref={router.pathname} + search={stringify(router.query)} renderPaginationLink={({ page, href }) => ( void; NextPreviousLink: React.ElementType; renderPaginationLink: ({ page, href }: { page: number; href: string }) => JSX.Element; + currentHref: string; + search: string; }; export const Pagination = ({ @@ -16,18 +18,20 @@ export const Pagination = ({ currentPage = 1, renderPaginationLink, NextPreviousLink, + currentHref, + search, }: PaginationProps) => { - const url = new URL(window.location.href); - const params = new URLSearchParams(url.search); + const params = new URLSearchParams(search); const getUrlWithPage = (pageNum: number) => { params.set("page", pageNum.toString()); - return `${url.pathname}?${params}`; + const newUrl = `${currentHref}?${params}`; + return newUrl; }; const totalPages = Array.from({ length: pageCount }, (_item, index) => index + 1); - const prevUrl = currentPage <= 2 ? url.toString() : getUrlWithPage(currentPage - 1); - const nextUrl = currentPage >= pageCount ? url.toString() : getUrlWithPage(currentPage + 1); + const prevUrl = currentPage <= 2 ? currentHref : getUrlWithPage(currentPage - 1); + const nextUrl = currentPage >= pageCount ? currentHref : getUrlWithPage(currentPage + 1); return ( @@ -42,7 +46,7 @@ export const Pagination = ({
{totalPages.map((page) => - renderPaginationLink({ page, href: page === 1 ? url.toString() : getUrlWithPage(page) }) + renderPaginationLink({ page, href: page === 1 ? currentHref : getUrlWithPage(page) }) )}