trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: keep url search params when using pagination

Browse source
This commit is contained in:
trafficlunar 2025-05-04 22:55:25 +01:00
parent 70d033b26d
commit 2290c993ef
1 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/mii-list/pagination.tsx
View file

@ -14,6 +14,12 @@ export default function Pagination({ lastPage }: Props) {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const page = Number(searchParams.get("page") ?? 1); const page = Number(searchParams.get("page") ?? 1);
const createPageUrl = (pageNumber: number) => {
const params = new URLSearchParams(searchParams);
params.set("page", pageNumber.toString());
return `/?${params.toString()}`;
};
const numbers = useMemo(() => { const numbers = useMemo(() => {
const result = []; const result = [];
@ -30,7 +36,7 @@ export default function Pagination({ lastPage }: Props) {
<div className="flex justify-center items-center w-full mt-8"> <div className="flex justify-center items-center w-full mt-8">
{/* Go to first page */} {/* Go to first page */}
<Link <Link
href={page === 1 ? "#" : "/?page=1"} href={page === 1 ? "#" : createPageUrl(1)}
aria-disabled={page === 1} aria-disabled={page === 1}
tabIndex={page === 1 ? -1 : undefined} tabIndex={page === 1 ? -1 : undefined}
className={`pill button !bg-orange-100 !p-0.5 aspect-square text-2xl ${ className={`pill button !bg-orange-100 !p-0.5 aspect-square text-2xl ${
@ -42,7 +48,7 @@ export default function Pagination({ lastPage }: Props) {
{/* Previous page */} {/* Previous page */}
<Link <Link
href={page === 1 ? "#" : `/?page=${page - 1}`} href={page === 1 ? "#" : createPageUrl(page - 1)}
aria-disabled={page === 1} aria-disabled={page === 1}
tabIndex={page === 1 ? -1 : undefined} tabIndex={page === 1 ? -1 : undefined}
className={`pill !bg-orange-100 !p-0.5 aspect-square text-2xl ${page === 1 ? "pointer-events-none opacity-50" : "hover:!bg-orange-400"}`} className={`pill !bg-orange-100 !p-0.5 aspect-square text-2xl ${page === 1 ? "pointer-events-none opacity-50" : "hover:!bg-orange-400"}`}
@ -55,7 +61,7 @@ export default function Pagination({ lastPage }: Props) {
{numbers.map((number) => ( {numbers.map((number) => (
<Link <Link
key={number} key={number}
href={`/?page=${number}`} href={createPageUrl(number)}
aria-current={number === page ? "page" : undefined} aria-current={number === page ? "page" : undefined}
className={`pill !p-0 w-8 h-8 text-center !rounded-md ${number == page ? "!bg-orange-400" : "!bg-orange-100 hover:!bg-orange-400"}`} className={`pill !p-0 w-8 h-8 text-center !rounded-md ${number == page ? "!bg-orange-400" : "!bg-orange-100 hover:!bg-orange-400"}`}
> >
@ -66,7 +72,7 @@ export default function Pagination({ lastPage }: Props) {
{/* Next page */} {/* Next page */}
<Link <Link
href={page === lastPage ? "#" : `/?page=${page + 1}`} href={page === lastPage ? "#" : createPageUrl(page + 1)}
aria-disabled={page === lastPage} aria-disabled={page === lastPage}
tabIndex={page === lastPage ? -1 : undefined} tabIndex={page === lastPage ? -1 : undefined}
className={`pill button !bg-orange-100 !p-0.5 aspect-square text-2xl ${ className={`pill button !bg-orange-100 !p-0.5 aspect-square text-2xl ${
@ -78,7 +84,7 @@ export default function Pagination({ lastPage }: Props) {
{/* Go to last page */} {/* Go to last page */}
<Link <Link
href={page === lastPage ? "#" : `/?page=${lastPage}`} href={page === lastPage ? "#" : createPageUrl(lastPage)}
aria-disabled={page === lastPage} aria-disabled={page === lastPage}
tabIndex={page === lastPage ? -1 : undefined} tabIndex={page === lastPage ? -1 : undefined}
className={`pill button !bg-orange-100 !p-0.5 aspect-square text-2xl ${ className={`pill button !bg-orange-100 !p-0.5 aspect-square text-2xl ${