Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3603 Rev 3604
Línea 1... Línea 1...
1 
import { useEffect, useState, useCallback, useMemo } from 'react';
 1 
import { useEffect, useState, useCallback } from 'react';
Línea 2... Línea 2...
2 
 
 2 
 
- 
 
 3 
import { useApi } from './useApi';
- 
 
 4 
import { getMessages } from '@inmail/services';
Línea 3... Línea 5...
3 
import { useFetch } from './useFetch';
 5 
import { useInfinityScroll } from './useInfinityScroll';
4 
 
 6 
 
5 
/* const paginationResponseExample = {
 7 
/* const paginationResponseExample = {
6 
  success: true,
 8 
  success: true,
Línea 151... Línea 153...
151 
    firstItemNumber: 1,
 153 
    firstItemNumber: 1,
152 
    lastItemNumber: 7
 154 
    lastItemNumber: 7
153 
  }
 155 
  }
154 
}; */
 156 
}; */
Línea 155... Línea -...
155 
 
 - 
 
156 
/**
 - 
 
157 
 * Hook optimizado para infinite scroll
 - 
 
158 
 * Maneja la paginación automática al hacer scroll
 - 
 
159 
 */
 157 
 
160 
export function usePagination(
 - 
 
161 
  url,
 - 
 
162 
  {
 - 
 
163 
    initialPage = 1,
 - 
 
164 
    initialLimit = 20,
 - 
 
165 
    initialParams = {},
 - 
 
166 
    resetOnUrlChange = true,
 - 
 
167 
    autoLoadFirstPage = true
 - 
 
168 
  } = {}
 - 
 
169 
) {
 158 
export function usePagination(url) {
170 
  const [items, setItems] = useState([]);
 159 
  const [items, setItems] = useState([]);
171 
  const [page, setPage] = useState(initialPage);
 160 
  const [page, setPage] = useState(1);
172 
  const [totalPages, setTotalPages] = useState(0);
 - 
 
173 
  const [totalItems, setTotalItems] = useState(0);
 - 
 
174 
  const [limit, setLimit] = useState(initialLimit);
 - 
 
Línea 175... Línea 161...
175 
  const [params, setParams] = useState({ page, limit, ...initialParams });
 161 
  const [totalPages, setTotalPages] = useState(1);
- 
 
 162 
 
176 
 
 163 
  const { data, error, execute, loading } = useApi(getMessages);
- 
 
 164 
  const { lastElementRef } = useInfinityScroll({
- 
 
 165 
    isLoading: loading,
177 
  const { data, loading, error, refetch } = useFetch(url, {
 166 
    hasMore: page < totalPages,
Línea 178... Línea -...
178 
    params
 - 
 
179 
  });
 - 
 
180 
 
 - 
 
181 
  // Memoized pagination state for infinite scroll
 - 
 
182 
  const paginationState = useMemo(
 - 
 
183 
    () => ({
 - 
 
184 
      page,
 - 
 
185 
      limit,
 - 
 
186 
      totalPages,
 - 
 
187 
      totalItems,
 - 
 
188 
      hasMore: page < totalPages,
 - 
 
189 
      isLoading: loading,
 - 
 
190 
      error
 - 
 
191 
    }),
 - 
 
192 
    [page, limit, totalPages, totalItems, loading, error]
 - 
 
193 
  );
 167 
    onIntersect: nextPage
194 
 
 168 
  });
195 
  // Load next page for infinite scroll
 169 
 
196 
  const nextPage = useCallback(() => {
 170 
  const nextPage = useCallback(() => {
197 
    if (paginationState.hasMore && !loading) {
 171 
    if (page < totalPages && !loading) {
Línea 198... Línea -...
198 
      setPage((prevPage) => prevPage + 1);
 - 
 
199 
    }
 172 
      setPage((prevPage) => prevPage + 1);
200 
  }, [paginationState.hasMore, loading]);
 - 
 
201 
 
 173 
    }
202 
  // Reset pagination when URL changes
 174 
  }, [page, totalPages, loading]);
203 
  const resetPagination = useCallback(() => {
 175 
 
204 
    setPage(initialPage);
 176 
  const resetPagination = useCallback(() => {
Línea 205... Línea -...
205 
    setItems([]);
 - 
 
206 
    setTotalPages(0);
 177 
    setItems([]);
207 
    setTotalItems(0);
 - 
 
208 
  }, [initialPage]);
 - 
 
209 
 
 178 
    setPage(1);
210 
  // Update params when page or limit changes
 179 
    setTotalPages(1);
211 
  useEffect(() => {
 180 
  }, []);
212 
    setParams((prevParams) => ({
 181 
 
Línea 213... Línea -...
213 
      ...prevParams,
 - 
 
214 
      page,
 182 
  useEffect(() => {
215 
      limit
 - 
 
216 
    }));
 183 
    if (url) {
217 
  }, [page, limit]);
 184 
      execute(`${url}?page=${page}`);
218 
 
 - 
 
Línea 219... Línea -...
219 
  // Reset pagination when URL changes (if enabled)
 - 
 
220 
  useEffect(() => {
 185 
    }
221 
    if (resetOnUrlChange && url) {
 186 
  }, [page, url]);
222 
      resetPagination();
 - 
 
223 
    }
 - 
 
224 
  }, [url, resetOnUrlChange, resetPagination]);
 - 
 
225 
 
 - 
 
226 
  // Handle data updates with infinite scroll logic
 - 
 
227 
  useEffect(() => {
 - 
 
228 
    if (data) {
 - 
 
229 
      let newItems = [];
 - 
 
230 
      let pages = 0;
 - 
 
231 
      let items = 0;
 - 
 
232 
 
 - 
 
233 
      // Handle different response structures
 - 
 
234 
      if (data?.current?.items) {
 - 
 
235 
        // Structure: { current: { items: [] }, total: { pages, items } }
 - 
 
236 
        newItems = data.current.items;
 - 
 
237 
        pages = data.total?.pages || 0;
 - 
 
238 
        items = data.total?.items || 0;
 - 
 
239 
      } else if (data?.data && Array.isArray(data.data)) {
 - 
 
240 
        // Structure: { data: [], pagination: { ... } }
 - 
 
241 
        newItems = data.data;
 - 
 
242 
        pages = data.pagination?.pageCount || data.pagination?.last || 0;
 - 
 
243 
        items = data.pagination?.totalItemCount || 0;
 - 
 
244 
      } else if (Array.isArray(data)) {
 - 
 
245 
        // Structure: direct array
 - 
 
246 
        newItems = data;
 - 
 
247 
        pages = 1;
 - 
 
248 
        items = data.length;
 - 
 
249 
      } else if (data?.items && Array.isArray(data.items)) {
 187 
 
250 
        // Structure: { items: [], pagination: { ... } }
 - 
 
251 
        newItems = data.items;
 188 
  useEffect(() => {
252 
        pages = data.pagination?.pageCount || data.pagination?.last || 0;
 189 
    resetPagination();
253 
        items = data.pagination?.totalItemCount || 0;
 190 
  }, [url]);
254 
      }
 - 
 
255 
 
 191 
 
256 
      setItems((prevItems) => {
 192 
  useEffect(() => {
257 
        // For infinite scroll, always append new items
 193 
    if (data) {
Línea 258... Línea 194...
258 
        if (page > 1) {
 194 
      setItems((prevItems) => {
259 
          return [...prevItems, ...newItems];
 - 
 
260 
        } else {
 195 
        if (page > 1) {
261 
          // First page, replace items
 196 
          return [...prevItems, ...data.current.items];
Línea 262... Línea -...
262 
          return newItems;
 - 
 
263 
        }
 - 
 
264 
      });
 - 
 
265 
 
 - 
 
266 
      setTotalPages(pages);
 - 
 
267 
      setTotalItems(items);
 - 
 
268 
    }
 - 
 
269 
  }, [data, page]);
 197 
        } else {
270 
 
 - 
 
271 
  // Auto-load first page if enabled and URL is provided
 198 
          return data.current.items;
272 
  useEffect(() => {
 199 
        }
273 
    if (autoLoadFirstPage && url && page === 1 && items.length === 0) {
 200 
      });
- 
 
 201 
 
274 
      // The useFetch hook will automatically load the data
 202 
      setTotalPages(data.total.pages);
275 
    }
 203 
    }
276 
  }, [url, autoLoadFirstPage, page, items.length]);
 204 
  }, [data, page]);
277 
 
 - 
 
278 
  return {
 205 
 
279 
    // Data
 206 
  return {