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ímiteconst currentParams = { ...initialParams, page, limit };// Usamos nuestro useFetch hookconst { 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, // OpcionalnextPage,prevPage,goToPage,setPageLimit,refetch // Exponemos la función refetch de useFetch por si el componente la necesita};}