-
Notifications
You must be signed in to change notification settings - Fork 0
/
PaginationContainer.jsx
60 lines (56 loc) · 1.7 KB
/
PaginationContainer.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import { useLoaderData, useLocation, useNavigate } from 'react-router-dom';
const PaginationContainer = () => {
const { meta } = useLoaderData();
const { pageCount, page } = meta.pagination;
const pages = Array.from({ length: pageCount }, (_, index) => {
return index + 1;
});
const { search, pathname } = useLocation();
const navigate = useNavigate();
const handlePageChange = (pageNumber) => {
const searchParams = new URLSearchParams(search);
searchParams.set('page', pageNumber);
navigate(`${pathname}?${searchParams.toString()}`);
};
if (pageCount < 2) return null;
return (
<div className='mt-16 flex justify-end'>
<div className='join'>
<button
className='btn btn-xs sm:btn-md join-item'
onClick={() => {
let prevPage = page - 1;
if (prevPage < 1) prevPage = pageCount;
handlePageChange(prevPage);
}}
>
Prev
</button>
{pages.map((pageNumber) => {
return (
<button
key={pageNumber}
onClick={() => handlePageChange(pageNumber)}
className={`btn btn-xs sm:btn-md border-none join-item ${
pageNumber === page ? 'bg-base-300 border-base-300 ' : ''
}`}
>
{pageNumber}
</button>
);
})}
<button
className='btn btn-xs sm:btn-md join-item'
onClick={() => {
let nextPage = page + 1;
if (nextPage > pageCount) nextPage = 1;
handlePageChange(nextPage);
}}
>
Next
</button>
</div>
</div>
);
};
export default PaginationContainer;