Skip to content

Commit

Permalink
pagination re-design (#440)
Browse files Browse the repository at this point in the history
Co-authored-by: Bananayosostene <[email protected]>
  • Loading branch information
Bananayosostene and Bananayosostene authored Sep 6, 2024
1 parent 7bd03d3 commit 9aa1eca
Show file tree
Hide file tree
Showing 4 changed files with 220 additions and 43 deletions.
46 changes: 24 additions & 22 deletions src/components/DataPagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,32 +18,34 @@ function DataPagination({
}: any) {
/* istanbul ignore next */
return (
<div className='font-serif'>
<div className="font-serif">
{pageOptions.length >= 0 && (
<table className="w-full mt-2">
<tfoot className="w-full py-2">
<tr className="w-full py-2">
<td colSpan={columnLength}>
<div className="w-full justify-center flex mx-auto flex-row items-center overflow-x-auto">
<button
type="button"
aria-label='left-arrow'
className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
<ArrowCircleLeftIcon className="w-5" fontSize="sm" />
</button>{' '}
<button
type="button"
aria-label='right-arrow'
onClick={() => nextPage()}
disabled={!canNextPage}
className="page mx-2 text-white rounded-circle font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
>
<ArrowCircleRightIcon className="w-5" fontSize="sm" />
</button>{' '}
<div className="flex flex-row justify-center w-full sm:text-[12px] items-center ">
<div className="w-full justify-between flex mx-auto flex-row items-center">
<div className="flex">
<button
type="button"
aria-label="left-arrow"
className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
<ArrowCircleLeftIcon className="w-5" fontSize="sm" />
</button>{' '}
<button
type="button"
aria-label="right-arrow"
onClick={() => nextPage()}
disabled={!canNextPage}
className="page mx-2 text-white rounded-circle font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
>
<ArrowCircleRightIcon className="w-5" fontSize="sm" />
</button>{' '}
</div>
<div className="lg:flex flex-row justify-center w-1/3 sm:text-[12px] items-center">
<span className="inline-block mx-2">
Page{' '}
<strong>
Expand Down Expand Up @@ -72,7 +74,7 @@ function DataPagination({
/>
</span>{' '}
<select
className="px-1/2 font-raleway rounded-md border border-primary dark:bg-primary"
className="px-1/2 font-raleway rounded-md border border-dark dark:bg-primary focus:outline-none"
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
style={{ height: '30px', border: 'solid 0.1rem #9e85f5' }}
Expand Down
42 changes: 31 additions & 11 deletions src/components/TraineeAttendance.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -138,43 +138,63 @@ const TraineeAttendance: React.FC = () => {
<button
onClick={prevPage}
data-testid="prev"
className={`page flex text-white h-12 w-12 items-center justify-center border-solid cursor-pointer bg-transparent ${page === 1 && 'disabled'
}`}
className={`page flex h-12 w-12 items-center justify-center border-solid ${
page === 1
? 'cursor-not-allowed bg-primary text-white' // Adjust to a suitable color for disabled state
: 'cursor-pointer bg-primary text-white'
}`}
disabled={page === 1}
>
&larr;
</button>
<button
onClick={() => setPage(1)}
data-testid="page1"
className={`page flex text-white h-12 w-12 items-center justify-center border-solid cursor-pointer bg-transparent ${page === 1 && 'disabled'
}`}
className={`page flex h-12 w-12 items-center justify-center border-solid ${
page === 1
? 'cursor-not-allowed bg-white text-black' // Adjust to a suitable color for disabled state
: 'cursor-pointer bg-primary text-white'
}`}
disabled={page === 1}
>
1
</button>
{gaps.paginationGroup.map((el) => (
<button
onClick={() => setPage(el)}
data-testid="page2"
data-testid="page"
key={el}
className={`page flex text-white h-12 w-12 items-center justify-center border-solid cursor-pointer bg-transparent ${page === el ? 'active' : ''
}`}
className={`page flex h-12 w-12 items-center justify-center border-solid ${
page === el
? 'cursor-not-allowed bg-white text-black' // Adjust to a suitable color for disabled state
: 'cursor-pointer bg-white text-black'
}`}
disabled={page === el}
>
{el}
</button>
))}
<button
onClick={() => setPage(totalPages)}
data-testid="page3"
className={`page flex text-white h-12 w-12 items-center justify-center border-solid cursor-pointer bg-transparent ${page === totalPages && 'disabled'
}`}
className={`page flex h-12 w-12 items-center justify-center border-solid ${
page === totalPages
? 'cursor-not-allowed bg-white text-black' // Adjust to a suitable color for disabled state
: 'cursor-pointer bg-primary text-white'
}`}
disabled={page === totalPages}
>
{totalPages}
</button>
<button
onClick={nextPage}
data-testid="next"
className={`page flex text-white h-12 w-12 items-center justify-center border-solid cursor-pointer bg-transparent ${page === totalPages && 'disabled'
}`}
className={`page flex h-12 w-12 items-center justify-center border-solid ${
page === totalPages
? 'cursor-not-allowed bg-primary text-white' // Adjust to a suitable color for disabled state
: 'cursor-pointer bg-primary text-white'
}`}
disabled={page === totalPages}
>
&rarr;
</button>
Expand Down
37 changes: 27 additions & 10 deletions src/components/TraineePerformance.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -292,19 +292,26 @@ function TraineePerfomance() {
onClick={prevPage}
data-testid="prev"
type="button"
className={`page flex text-white h-12 w-12 items-center justify-center border-solid cursor-pointer bg-transparent ${
page === 1 && 'disabled'
className={`page flex h-12 w-12 items-center justify-center border-solid ${
page === 1
? 'cursor-not-allowed bg-primary text-white' // Adjust to a suitable color for disabled state
: 'cursor-pointer bg-primary text-white'
}`}
disabled={page === 1}
>
&larr;
</button>

<button
onClick={() => setPage(1)}
data-testid="page1"
type="button"
className={`page flex text-white h-12 w-12 items-center justify-center border-solid cursor-pointer bg-transparent ${
page === 1 && 'disabled'
className={`page flex h-12 w-12 items-center justify-center border-solid ${
page === 1
? 'cursor-not-allowed bg-white text-black' // Adjust to a suitable color for disabled state
: 'cursor-pointer bg-primary text-white'
}`}
disabled={page === 1}
>
1
</button>
Expand All @@ -314,9 +321,12 @@ function TraineePerfomance() {
data-testid="page"
key={el}
type="button"
className={`page flex text-white h-12 w-12 items-center justify-center border-solid cursor-pointer bg-transparent ${
page === el ? 'active' : ''
className={`page flex h-12 w-12 items-center justify-center border-solid ${
page === el
? 'cursor-not-allowed bg-white text-black' // Adjust to a suitable color for disabled state
: 'cursor-pointer bg-white text-black'
}`}
disabled={page === el}
>
{el}
</button>
Expand All @@ -325,19 +335,26 @@ function TraineePerfomance() {
onClick={() => setPage(totalPages)}
data-testid="page3"
type="button"
className={`page flex text-white h-12 w-12 items-center justify-center border-solid cursor-pointer bg-transparent ${
page === totalPages && 'disabled'
className={`page flex h-12 w-12 items-center justify-center border-solid ${
page === totalPages
? 'cursor-not-allowed bg-white text-black' // Adjust to a suitable color for disabled state
: 'cursor-pointer bg-primary text-white'
}`}
disabled={page === totalPages}
>
{totalPages}
</button>

<button
onClick={nextPage}
data-testid="next"
type="button"
className={`page flex text-white h-12 w-12 items-center justify-center border-solid cursor-pointer bg-transparent ${
page === totalPages && 'disabled'
className={`page flex h-12 w-12 items-center justify-center border-solid ${
page === totalPages
? 'cursor-not-allowed bg-primary text-white' // Adjust to a suitable color for disabled state
: 'cursor-pointer bg-primary text-white'
}`}
disabled={page === totalPages}
>
&rarr;
</button>
Expand Down
138 changes: 138 additions & 0 deletions src/components/tests/Pagiantion.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
import { renderHook, act } from '@testing-library/react';
import Pagination from '../../components/Pagination';

describe('Pagination', () => {
test('initializes with correct values', () => {
const { result } = renderHook(() =>
Pagination({ contentPerPage: 10, count: 100 }),
);

expect(result.current.totalPages).toBe(10);
expect(result.current.page).toBe(1);
expect(result.current.firstContentIndex).toBe(0);
expect(result.current.lastContentIndex).toBe(10);
});

test('changes page correctly', () => {
const { result } = renderHook(() =>
Pagination({ contentPerPage: 10, count: 100 }),
);

act(() => {
result.current.nextPage();
});

expect(result.current.page).toBe(2);
expect(result.current.firstContentIndex).toBe(10);
expect(result.current.lastContentIndex).toBe(20);

act(() => {
result.current.prevPage();
});

expect(result.current.page).toBe(1);
expect(result.current.firstContentIndex).toBe(0);
expect(result.current.lastContentIndex).toBe(10);
});

test('does not go below page 1', () => {
const { result } = renderHook(() =>
Pagination({ contentPerPage: 10, count: 100 }),
);

act(() => {
result.current.prevPage();
});

expect(result.current.page).toBe(1);
});

test('does not go above max pages', () => {
const { result } = renderHook(() =>
Pagination({ contentPerPage: 10, count: 100 }),
);

act(() => {
result.current.setPage(10);
result.current.nextPage();
});

expect(result.current.page).toBe(10);
});

test('setPage works correctly', () => {
const { result } = renderHook(() =>
Pagination({ contentPerPage: 10, count: 100 }),
);

act(() => {
result.current.setPage(5);
});

expect(result.current.page).toBe(5);
expect(result.current.firstContentIndex).toBe(40);
expect(result.current.lastContentIndex).toBe(50);
});

test('handles edge cases in setPage', () => {
const { result } = renderHook(() =>
Pagination({ contentPerPage: 10, count: 100 }),
);

act(() => {
result.current.setPage(0);
});

expect(result.current.page).toBe(1);

act(() => {
result.current.setPage(11);
});

expect(result.current.page).toBe(10);
});

test('calculates gaps correctly', () => {
const { result } = renderHook(() =>
Pagination({ contentPerPage: 10, count: 100 }),
);

expect(result.current.gaps).toEqual({
before: false,
paginationGroup: [2, 3, 4],
after: true,
});

act(() => {
result.current.setPage(5);
});

expect(result.current.gaps).toEqual({
before: true,
paginationGroup: [4, 5, 6],
after: true,
});

act(() => {
result.current.setPage(10);
});

expect(result.current.gaps).toEqual({
before: true,
paginationGroup: [7, 8, 9], // Adjusted to match component output
after: false,
});
});
test('handles small number of pages', () => {
const { result } = renderHook(() =>
Pagination({ contentPerPage: 10, count: 30 }),
);

expect(result.current.totalPages).toBe(3);
expect(result.current.gaps).toEqual({
before: false,
paginationGroup: [2], // Adjusted to match component output
after: false,
});
});
});

0 comments on commit 9aa1eca

Please sign in to comment.