Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3511 | Rev 3530 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3511 Rev 3529
Línea 1... Línea 1...
1 
import { useEffect, useState } from 'react';
 1 
import { useEffect, useState } from 'react';
Línea 2... Línea 2...
2 
 
 2 
 
Línea 3... Línea 3...
3 
import { useFetch } from './useFetch';
 3 
import { useFetch } from './useFetch';
- 
 
 4 
 
4 
 
 5 
export function usePagination(url, { initialPage = 1, initialLimit = 10, initialParams = {} }) {
- 
 
 6 
  const [items, setItems] = useState([]);
5 
export function usePagination({ initialPage = 1, initialLimit = 10, apiUrl, initialParams = {} }) {
 7 
  const [page, setPage] = useState(initialPage);
- 
 
 8 
  const [totalPages, setTotalPages] = useState(0);
Línea 6... Línea -...
6 
  const [page, setPage] = useState(initialPage);
 - 
 
7 
  const [limit, setLimit] = useState(initialLimit);
 - 
 
8 
 
 - 
 
9 
  // Creamos un nuevo objeto de parámetros que incluye la página y el límite
 - 
 
10 
  const currentParams = { ...initialParams, page, limit };
 9 
  const [limit, setLimit] = useState(initialLimit);
11 
 
 - 
 
12 
  // Usamos nuestro useFetch hook
 - 
 
13 
  const { data, loading, error, refetch } = useFetch(apiUrl, { params: currentParams });
 - 
 
14 
 
 - 
 
15 
  // Opcional: Estado para el total de elementos (si la API lo devuelve en la respuesta)
 - 
 
16 
  const [total, setTotal] = useState(0);
 - 
 
17 
 
 - 
 
18 
  // Efecto para actualizar el total si los datos cambian (asumiendo que la API devuelve el total en la data o en headers)
 - 
 
19 
  // Esto dependerá de cómo tu API implemente la paginación y devuelva el total.
 10 
  const [params, setParams] = useState({ ...initialParams, page, limit });
20 
  // Ejemplo asumiendo que 'totalCount' viene en los datos:
 - 
 
21 
  useEffect(() => {
 - 
 
22 
    if (data) {
 11 
 
23 
      setPage(data.current.page);
 - 
 
Línea 24... Línea 12...
24 
      setTotal(data.total.count);
 12 
  const { data, loading, error, refetch } = useFetch(url, {
25 
    }
 13 
    params
26 
  }, [data]);
 14 
  });
Línea 37... Línea 25...
37 
    setPage(newPage);
 25 
    setPage(newPage);
38 
  };
 26 
  };
Línea 39... Línea 27...
39 
 
 27 
 
40 
  const setPageLimit = (newLimit) => {
 28 
  const setPageLimit = (newLimit) => {
41 
    setLimit(newLimit);
 29 
    setLimit(newLimit);
42 
    setPage(1); // Resetear a la primera página al cambiar el límite
 30 
    setPage(1);
Línea -... Línea 31...
- 
 
 31 
  };
- 
 
 32 
 
- 
 
 33 
  const hasMore = page < totalPages;
- 
 
 34 
 
43 
  };
 35 
  useEffect(() => {
- 
 
 36 
    if (data) {
- 
 
 37 
      setItems(data.current.items);
- 
 
 38 
      setTotalPages(data.total.pages);
- 
 
 39 
    }
- 
 
 40 
  }, [data]);
44 
 
 41 
 
- 
 
 42 
  useEffect(() => {
Línea 45... Línea 43...
45 
  // No necesitamos una función de "fetch" explícita aquí,
 43 
    setParams({ ...initialParams, page, limit });
- 
 
 44 
  }, [page, limit]);
46 
  // useFetch se encarga de hacer la petición cuando apiUrl o currentParams cambian.
 45 
 
47 
 
 46 
  return {
48 
  return {
 - 
 
49 
    page,
 - 
 
50 
    limit,
 47 
    items,
- 
 
 48 
    page,
51 
    data,
 49 
    limit,
- 
 
 50 
    error,
52 
    loading,
 51 
    loading,
53 
    error,
 52 
    totalPages,
54 
    total, // Opcional
 53 
    hasMore,
55 
    nextPage,
 54 
    nextPage,
56 
    prevPage,
 55 
    prevPage,
57 
    goToPage,
 56 
    goToPage,
58 
    setPageLimit,
 57 
    setPageLimit,