Rev 3530 | Rev 3603 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import { useEffect, useState } from 'react';
import { useFetch } from './useFetch';
export function usePagination(
url,
{ initialPage = 1, initialLimit = 10, initialParams = {} } = {}
) {
const [items, setItems] = useState([]);
const [page, setPage] = useState(initialPage);
const [totalPages, setTotalPages] = useState(0);
const [limit, setLimit] = useState(initialLimit);
const [params, setParams] = useState({ page, limit, ...initialParams });
const { data, loading, error, refetch } = useFetch(url, {
params
});
const nextPage = () => {
setPage((prevPage) => prevPage + 1);
};
const prevPage = () => {
setPage((prevPage) => Math.max(1, prevPage - 1));
};
const goToPage = (newPage) => {
setPage(newPage);
};
const setPageLimit = (newLimit) => {
setLimit(newLimit);
setPage(1);
};
const hasMore = page < totalPages;
useEffect(() => {
if (data) {
setItems((prevItems) => [...prevItems, ...data.current.items]);
setTotalPages(data.total.pages);
}
}, [data]);
useEffect(() => {
setParams({ ...initialParams, page, limit });
}, [page, limit]);
return {
items,
page,
limit,
error,
loading,
totalPages,
hasMore,
nextPage,
prevPage,
goToPage,
setPageLimit,
refetch
};
}