summaryrefslogtreecommitdiff
path: root/src/hooks
diff options
context:
space:
mode:
Diffstat (limited to 'src/hooks')
-rw-r--r--src/hooks/use-pagination.test.ts53
-rw-r--r--src/hooks/use-pagination.tsx5
2 files changed, 57 insertions, 1 deletions
diff --git a/src/hooks/use-pagination.test.ts b/src/hooks/use-pagination.test.ts
new file mode 100644
index 0000000..ba70f5e
--- /dev/null
+++ b/src/hooks/use-pagination.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, test } from 'vitest';
+import { usePagination } from './use-pagination';
+
+describe('usePagination', () => {
+ test('returns all pages when total pages are less than display limit', () => {
+ const result = usePagination({
+ currentPage: 2,
+ totalPages: 4,
+ paginationItemsToDisplay: 5,
+ });
+
+ expect(result.pages).toEqual([1, 2, 3, 4]);
+ expect(result.showLeftEllipsis).toBe(false);
+ expect(result.showRightEllipsis).toBe(false);
+ });
+
+ test('shows only right ellipsis near the start of the range', () => {
+ const result = usePagination({
+ currentPage: 1,
+ totalPages: 10,
+ paginationItemsToDisplay: 5,
+ });
+
+ expect(result.pages).toEqual([1, 2, 3, 4]);
+ expect(result.showLeftEllipsis).toBe(false);
+ expect(result.showRightEllipsis).toBe(true);
+ });
+
+ test('shows both ellipses around middle pages', () => {
+ const result = usePagination({
+ currentPage: 5,
+ totalPages: 10,
+ paginationItemsToDisplay: 5,
+ });
+
+ expect(result.pages).toEqual([4, 5, 6]);
+ expect(result.showLeftEllipsis).toBe(true);
+ expect(result.showRightEllipsis).toBe(true);
+ });
+
+ test('shows only left ellipsis near the end of the range', () => {
+ const result = usePagination({
+ currentPage: 10,
+ totalPages: 10,
+ paginationItemsToDisplay: 5,
+ });
+
+ expect(result.pages).toEqual([7, 8, 9, 10]);
+ expect(result.showLeftEllipsis).toBe(true);
+ expect(result.showRightEllipsis).toBe(false);
+ });
+});
+
diff --git a/src/hooks/use-pagination.tsx b/src/hooks/use-pagination.tsx
index d009cd4..40ed979 100644
--- a/src/hooks/use-pagination.tsx
+++ b/src/hooks/use-pagination.tsx
@@ -15,8 +15,11 @@ export function usePagination({
totalPages,
paginationItemsToDisplay,
}: UsePaginationProps): UsePaginationReturn {
- const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;
+ const shouldTruncate = totalPages > paginationItemsToDisplay;
+ const showLeftEllipsis =
+ shouldTruncate && currentPage - 1 > paginationItemsToDisplay / 2;
const showRightEllipsis =
+ shouldTruncate &&
totalPages - currentPage + 1 > paginationItemsToDisplay / 2;
function calculatePaginationRange(): number[] {