sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-10-07 05:01:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: remove pagination if there is only 1 page 🔧

Browse Source
This commit is contained in:
i701
2025-09-20 14:09:12 +05:00
parent c041c2e7d7
commit 43b8e22196
1 changed files with 86 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
components/pagination.tsx
View File

@@ -1,109 +1,113 @@
"use client"; "use client";
import { Button } from "@/components/ui/button";
import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"; import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation"; import { useRouter, useSearchParams } from "next/navigation";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
type PaginationProps = { type PaginationProps = {
totalPages: number; totalPages: number;
currentPage: number; currentPage: number;
maxVisible?: number; maxVisible?: number;
}; };
export default function Pagination({ export default function Pagination({
totalPages, totalPages,
currentPage, currentPage,
maxVisible = 4, maxVisible = 4,
}: PaginationProps) { }: PaginationProps) {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const activePage = searchParams.get("page") ?? 1; const activePage = searchParams.get("page") ?? 1;
const router = useRouter(); const router = useRouter();
const [queryParams, setQueryParams] = useState<{ [key: string]: string }>({}); const [queryParams, setQueryParams] = useState<{ [key: string]: string }>({});
useEffect(() => { useEffect(() => {
const params = Object.fromEntries( const params = Object.fromEntries(
Array.from(searchParams.entries()).filter(([key]) => key !== "page"), Array.from(searchParams.entries()).filter(([key]) => key !== "page"),
); );
setQueryParams(params); setQueryParams(params);
}, [searchParams]); }, [searchParams]);
useEffect(() => { useEffect(() => {
if (!searchParams.has("page")) { if (!searchParams.has("page")) {
router.replace(`?page=1${IncludeQueries()}`); router.replace(`?page=1${IncludeQueries()}`);
} }
}); });
function IncludeQueries() { function IncludeQueries() {
return Object.entries(queryParams) return Object.entries(queryParams)
.map(([key, value]) => `&${key}=${value}`) .map(([key, value]) => `&${key}=${value}`)
.join(""); .join("");
} }
const generatePageNumbers = (): (number | string)[] => { const generatePageNumbers = (): (number | string)[] => {
const halfVisible = Math.floor(maxVisible / 2); const halfVisible = Math.floor(maxVisible / 2);
let startPage = Math.max(currentPage - halfVisible, 1); let startPage = Math.max(currentPage - halfVisible, 1);
const endPage = Math.min(startPage + maxVisible - 1, totalPages); const endPage = Math.min(startPage + maxVisible - 1, totalPages);
if (endPage - startPage + 1 < maxVisible) { if (endPage - startPage + 1 < maxVisible) {
startPage = Math.max(endPage - maxVisible + 1, 1); startPage = Math.max(endPage - maxVisible + 1, 1);
} }
const pageNumbers: (number | string)[] = []; const pageNumbers: (number | string)[] = [];
if (startPage > 1) { if (startPage > 1) {
pageNumbers.push(1); pageNumbers.push(1);
if (startPage > 2) pageNumbers.push("..."); if (startPage > 2) pageNumbers.push("...");
} }
for (let i = startPage; i <= endPage; i++) { for (let i = startPage; i <= endPage; i++) {
pageNumbers.push(i); pageNumbers.push(i);
} }
if (endPage < totalPages) { if (endPage < totalPages) {
if (endPage < totalPages - 1) pageNumbers.push("..."); if (endPage < totalPages - 1) pageNumbers.push("...");
pageNumbers.push(totalPages); pageNumbers.push(totalPages);
} }
return pageNumbers; return pageNumbers;
}; };
const pageNumbers = generatePageNumbers(); const pageNumbers = generatePageNumbers();
return ( if (totalPages <= 1) {
<div className="flex items-center justify-center space-x-2 my-4"> return null;
{currentPage > 1 && ( }
<Link href={`?page=${Number(currentPage) - 1}${IncludeQueries()}`}>
<Button variant="secondary" className="flex items-center gap-2">
<ArrowLeftIcon className="h-4 w-4" />
</Button>
</Link>
)}
{pageNumbers.map((page) => ( return (
<React.Fragment key={`${page}`}> <div className="flex items-center justify-center space-x-2 my-4">
{typeof page === "number" ? ( {currentPage > 1 && (
<Link href={`?page=${page}${IncludeQueries()}`}> <Link href={`?page=${Number(currentPage) - 1}${IncludeQueries()}`}>
<Button <Button variant="secondary" className="flex items-center gap-2">
variant={Number(activePage) === page ? "default" : "outline"} <ArrowLeftIcon className="h-4 w-4" />
> </Button>
{page} </Link>
</Button> )}
</Link>
) : (
<span className="px-2">...</span>
)}
</React.Fragment>
))}
{currentPage < totalPages && ( {pageNumbers.map((page) => (
<Link href={`?page=${Number(currentPage) + 1}${IncludeQueries()}`}> <React.Fragment key={`${page}`}>
<Button variant="secondary" className="flex items-center gap-2"> {typeof page === "number" ? (
<ArrowRightIcon className="h-4 w-4" /> <Link href={`?page=${page}${IncludeQueries()}`}>
</Button> <Button
</Link> variant={Number(activePage) === page ? "default" : "outline"}
)} >
</div> {page}
); </Button>
</Link>
) : (
<span className="px-2">...</span>
)}
</React.Fragment>
))}
{currentPage < totalPages && (
<Link href={`?page=${Number(currentPage) + 1}${IncludeQueries()}`}>
<Button variant="secondary" className="flex items-center gap-2">
<ArrowRightIcon className="h-4 w-4" />
</Button>
</Link>
)}
</div>
);
} }