Rev 3530 | 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({ initialPage = 1, initialLimit = 10, apiUrl, initialParams = {} }) {
const [page, setPage] = useState(initialPage);
const [limit, setLimit] = useState(initialLimit);
// Creamos un nuevo objeto de parámetros que incluye la página y el límite
const currentParams = { ...initialParams, page, limit };
// Usamos nuestro useFetch hook
const { data, loading, error, refetch } = useFetch(apiUrl, { params: currentParams });
// Opcional: Estado para el total de elementos (si la API lo devuelve en la respuesta)
const [total, setTotal] = useState(0);
// Efecto para actualizar el total si los datos cambian (asumiendo que la API devuelve el total en la data o en headers)
// Esto dependerá de cómo tu API implemente la paginación y devuelva el total.
// Ejemplo asumiendo que 'totalCount' viene en los datos:
useEffect(() => {
if (data) {
setPage(data.current.page);
setTotal(data.total.count);
}
}, [data]);
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); // Resetear a la primera página al cambiar el límite
};
// No necesitamos una función de "fetch" explícita aquí,
// useFetch se encarga de hacer la petición cuando apiUrl o currentParams cambian.
return {
page,
limit,
data,
loading,
error,
total, // Opcional
nextPage,
prevPage,
goToPage,
setPageLimit,
refetch // Exponemos la función refetch de useFetch por si el componente la necesita
};
}