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