Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3533 Rev 3599
Línea 1... Línea 1...
1 
import { useEffect, useState } from 'react';
 1 
import { useEffect, useState, useCallback, useMemo } 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(
- 
 
 6 
  url,
- 
 
 7 
  {
5 
export function usePagination(
 8 
    initialPage = 1,
- 
 
 9 
    initialLimit = 10,
- 
 
 10 
    initialParams = {},
- 
 
 11 
    enableInfiniteScroll = false,
6 
  url,
 12 
    resetOnUrlChange = true
7 
  { initialPage = 1, initialLimit = 10, initialParams = {} } = {}
 13 
  } = {}
8 
) {
 14 
) {
9 
  const [items, setItems] = useState([]);
 15 
  const [items, setItems] = useState([]);
- 
 
 16 
  const [page, setPage] = useState(initialPage);
10 
  const [page, setPage] = useState(initialPage);
 17 
  const [totalPages, setTotalPages] = useState(0);
11 
  const [totalPages, setTotalPages] = useState(0);
 18 
  const [totalItems, setTotalItems] = useState(0);
Línea 12... Línea 19...
12 
  const [limit, setLimit] = useState(initialLimit);
 19 
  const [limit, setLimit] = useState(initialLimit);
13 
  const [params, setParams] = useState({ page, limit, ...initialParams });
 20 
  const [params, setParams] = useState({ page, limit, ...initialParams });
14 
 
 21 
 
Línea -... Línea 22...
- 
 
 22 
  const { data, loading, error, refetch } = useFetch(url, {
15 
  const { data, loading, error, refetch } = useFetch(url, {
 23 
    params
- 
 
 24 
  });
- 
 
 25 
 
- 
 
 26 
  // Memoized pagination state
- 
 
 27 
  const paginationState = useMemo(
- 
 
 28 
    () => ({
- 
 
 29 
      page,
- 
 
 30 
      limit,
- 
 
 31 
      totalPages,
16 
    params
 32 
      totalItems,
- 
 
 33 
      hasMore: page < totalPages,
- 
 
 34 
      hasPrevious: page > 1,
17 
  });
 35 
      isFirstPage: page === 1,
18 
 
 36 
      isLastPage: page === totalPages
- 
 
 37 
    }),
19 
  const nextPage = () => {
 38 
    [page, limit, totalPages, totalItems]
- 
 
 39 
  );
20 
    setPage((prevPage) => prevPage + 1);
 40 
 
21 
  };
 41 
  // Optimized page navigation functions
- 
 
 42 
  const nextPage = useCallback(() => {
Línea 22... Línea 43...
22 
 
 43 
    if (paginationState.hasMore) {
- 
 
 44 
      setPage((prevPage) => prevPage + 1);
23 
  const prevPage = () => {
 45 
    }
24 
    setPage((prevPage) => Math.max(1, prevPage - 1));
 46 
  }, [paginationState.hasMore]);
- 
 
 47 
 
Línea -... Línea 48...
- 
 
 48 
  const prevPage = useCallback(() => {
- 
 
 49 
    if (paginationState.hasPrevious) {
- 
 
 50 
      setPage((prevPage) => prevPage - 1);
- 
 
 51 
    }
- 
 
 52 
  }, [paginationState.hasPrevious]);
- 
 
 53 
 
- 
 
 54 
  const goToPage = useCallback(
- 
 
 55 
    (newPage) => {
- 
 
 56 
      if (newPage >= 1 && newPage <= totalPages) {
25 
  };
 57 
        setPage(newPage);
- 
 
 58 
      }
26 
 
 59 
    },
27 
  const goToPage = (newPage) => {
 60 
    [totalPages]
28 
    setPage(newPage);
 61 
  );
- 
 
 62 
 
Línea -... Línea 63...
- 
 
 63 
  const setPageLimit = useCallback((newLimit) => {
29 
  };
 64 
    if (newLimit > 0) {
- 
 
 65 
      setLimit(newLimit);
- 
 
 66 
      setPage(1);
- 
 
 67 
    }
- 
 
 68 
  }, []);
- 
 
 69 
 
- 
 
 70 
  const resetPagination = useCallback(() => {
- 
 
 71 
    setPage(initialPage);
- 
 
 72 
    setItems([]);
Línea -... Línea 73...
- 
 
 73 
    setTotalPages(0);
30 
 
 74 
    setTotalItems(0);
31 
  const setPageLimit = (newLimit) => {
 75 
  }, [initialPage]);
- 
 
 76 
 
- 
 
 77 
  const updateParams = useCallback((newParams) => {
- 
 
 78 
    setParams((prevParams) => ({ ...prevParams, ...newParams }));
- 
 
 79 
  }, []);
- 
 
 80 
 
- 
 
 81 
  // Handle data updates with flexible structure support
- 
 
 82 
  useEffect(() => {
- 
 
 83 
    if (data) {
- 
 
 84 
      let newItems = [];
- 
 
 85 
      let pages = 0;
- 
 
 86 
      let items = 0;
- 
 
 87 
 
- 
 
 88 
      // Handle different response structures
- 
 
 89 
      if (data?.current?.items) {
- 
 
 90 
        // Structure: { current: { items: [] }, total: { pages: number, items: number } }
- 
 
 91 
        newItems = data.current.items;
- 
 
 92 
        pages = data.total?.pages || 0;
- 
 
 93 
        items = data.total?.items || 0;
- 
 
 94 
      } else if (data?.data && Array.isArray(data.data)) {
- 
 
 95 
        // Structure: { data: [], pagination: { ... } }
- 
 
 96 
        newItems = data.data;
- 
 
 97 
        pages = data.pagination?.pageCount || data.pagination?.last || 0;
- 
 
 98 
        items = data.pagination?.totalItemCount || 0;
- 
 
 99 
      } else if (Array.isArray(data)) {
- 
 
 100 
        // Structure: direct array
- 
 
 101 
        newItems = data;
- 
 
 102 
        pages = 1;
- 
 
 103 
        items = data.length;
- 
 
 104 
      } else if (data?.items && Array.isArray(data.items)) {
- 
 
 105 
        // Structure: { items: [], pagination: { ... } }
32 
    setLimit(newLimit);
 106 
        newItems = data.items;
- 
 
 107 
        pages = data.pagination?.pageCount || data.pagination?.last || 0;
- 
 
 108 
        items = data.pagination?.totalItemCount || 0;
- 
 
 109 
      }
- 
 
 110 
 
- 
 
 111 
      setItems((prevItems) => {
- 
 
 112 
        if (enableInfiniteScroll && page > 1) {
33 
    setPage(1);
 113 
          // For infinite scroll, append new items
- 
 
 114 
          return [...prevItems, ...newItems];
34 
  };
 115 
        } else {
35 
 
 116 
          // For regular pagination, replace items
Línea -... Línea 117...
- 
 
 117 
          return newItems;
36 
  const hasMore = page < totalPages;
 118 
        }
37 
 
 119 
      });
- 
 
 120 
 
- 
 
 121 
      setTotalPages(pages);
- 
 
 122 
      setTotalItems(items);
- 
 
 123 
    }
38 
  useEffect(() => {
 124 
  }, [data, page, enableInfiniteScroll]);
Línea -... Línea 125...
- 
 
 125 
 
- 
 
 126 
  // Update params when page or limit changes
- 
 
 127 
  useEffect(() => {
- 
 
 128 
    setParams((prevParams) => ({
- 
 
 129 
      ...prevParams,
- 
 
 130 
      page,
- 
 
 131 
      limit
39 
    if (data) {
 132 
    }));
- 
 
 133 
  }, [page, limit]);
40 
      setItems((prevItems) => [...prevItems, ...data.current.items]);
 134 
 
41 
      setTotalPages(data.total.pages);
 135 
  // Reset pagination when URL changes (if enabled)
42 
    }
 136 
  useEffect(() => {
43 
  }, [data]);
 137 
    if (resetOnUrlChange) {
44 
 
 138 
      resetPagination();
45 
  useEffect(() => {
 139 
    }
- 
 
 140 
  }, [url, resetOnUrlChange, resetPagination]);
46 
    setParams({ ...initialParams, page, limit });
 141 
 
47 
  }, [page, limit]);
 142 
  return {
48 
 
 143 
    // Data
49 
  return {
 144 
    items,
50 
    items,
 145 
    ...paginationState,
- 
 
 146 
 
- 
 
 147 
    // Loading and error states
51 
    page,
 148 
    loading,
52 
    limit,
 149 
    error,
53 
    error,
 150