marco.pms.web/src/hooks/usePagination.js

40 lines
1.2 KiB
JavaScript

import { useState, useMemo,useEffect } from "react";
const usePagination = (data, itemsPerPage) => {
const [currentPage, setCurrentPage] = useState(1);
// const totalPages = Math.ceil(data?.length / itemsPerPage);
// add this new line
const totalPages = useMemo(() => {
return Math.ceil((data?.length || 0) / itemsPerPage);
}, [data?.length, itemsPerPage]);
useEffect(() => {
if (currentPage > totalPages && totalPages > 0) {
setCurrentPage(1);
} else if (!data || data.length === 0) {
setCurrentPage(1);
} else if (currentPage === 0 && totalPages > 0) {
setCurrentPage(1);
}
}, [data, totalPages, currentPage]);
const currentItems = useMemo(() => {
const startIndex = (currentPage - 1) * itemsPerPage;
// return data?.slice(startIndex, startIndex + itemsPerPage);
return data?.slice(startIndex, startIndex + itemsPerPage) || [];
}, [data, currentPage, itemsPerPage]);
const paginate = (pageNumber) => {
if (pageNumber < 1 || pageNumber > totalPages) return;
setCurrentPage(pageNumber);
};
return { currentPage, totalPages, currentItems, paginate,setCurrentPage };
};
export default usePagination;