Skip to content

Commit

Permalink
🐛 fix pagination render of double ellipsis
Browse files Browse the repository at this point in the history
  • Loading branch information
MammaSonnim committed Jan 10, 2025
1 parent 9327cf0 commit 20b3958
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 8 deletions.
8 changes: 4 additions & 4 deletions app/lib/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,25 +48,25 @@ export const generatePagination = (currentPage: number, totalPages: number) => {
// If the current page is among the first 3 pages,
// show the first 3, an ellipsis, and the last 2 pages.
if (currentPage <= 3) {
return [1, 2, 3, '...', totalPages - 1, totalPages];
return [1, 2, 3, 'ellipsis-1', totalPages - 1, totalPages];
}

// If the current page is among the last 3 pages,
// show the first 2, an ellipsis, and the last 3 pages.
if (currentPage >= totalPages - 2) {
return [1, 2, '...', totalPages - 2, totalPages - 1, totalPages];
return [1, 2, 'ellipsis-2', totalPages - 2, totalPages - 1, totalPages];
}

// If the current page is somewhere in the middle,
// show the first page, an ellipsis, the current page and its neighbors,
// another ellipsis, and the last page.
return [
1,
'...',
'ellipsis-1',
currentPage - 1,
currentPage,
currentPage + 1,
'...',
'ellipsis-2',
totalPages,
];
};
9 changes: 5 additions & 4 deletions app/ui/invoices/pagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,18 @@ export default function Pagination({ totalPages }: { totalPages: number }) {
<div className="flex -space-x-px">
{allPages.map((page, index) => {
let position: 'first' | 'last' | 'single' | 'middle' | undefined;
const isEllipsis = String(page).startsWith('ellipsis');

if (index === 0) position = 'first';
if (index === allPages.length - 1) position = 'last';
if (allPages.length === 1) position = 'single';
if (page === '...') position = 'middle';
if (isEllipsis) position = 'middle';

return (
<PaginationNumber
key={page}
href={createPageURL(page)}
page={page}
key={page} // Unique keys are guaranteed
href={createPageURL(isEllipsis ? '#' : page)}
page={isEllipsis ? '...' : page}
position={position}
isActive={currentPage === page}
/>
Expand Down

0 comments on commit 20b3958

Please sign in to comment.