Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3599 | Rev 3604 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3599 stevensc 1 
import { useEffect, useState, useCallback, useMemo } from 'react';
3511 stevensc 2 
 
3 
import { useFetch } from './useFetch';
4 
 
3603 stevensc 5 
/* const paginationResponseExample = {
6 
  success: true,
7 
  data: [
8 
    {
9 
      uuid: 'b18afb55-d40e-4fd9-95a6-324a7f45e57f',
10 
      sender_name: 'Cesa Managment Solution',
11 
      sender_image:
12 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
13 
      sender_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
14 
      receiver_name: 'Santiago Olivera',
15 
      receiver_image:
16 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
17 
      receiver_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
18 
      side: 'right',
19 
      message: '',
20 
      type: 'image',
21 
      filename:
22 
        'https://dev-services.leaderslinked.com/storage/b18afb55-d40e-4fd9-95a6-324a7f45e57f',
23 
      date: 'hace 1 año',
24 
      url_abuse_report:
25 
        'https://dev-services.leaderslinked.com/helpers/abuse-report/message/b18afb55-d40e-4fd9-95a6-324a7f45e57f'
26 
    },
27 
    {
28 
      uuid: 'c3b3c887-9f88-4a36-a7c8-c417f5da80ff',
29 
      sender_name: 'Cesa Managment Solution',
30 
      sender_image:
31 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
32 
      sender_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
33 
      receiver_name: 'Santiago Olivera',
34 
      receiver_image:
35 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
36 
      receiver_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
37 
      side: 'right',
38 
      message: 'Buenas tardes',
39 
      type: 'text',
40 
      filename: '',
41 
      date: 'hace 1 año',
42 
      url_abuse_report:
43 
        'https://dev-services.leaderslinked.com/helpers/abuse-report/message/c3b3c887-9f88-4a36-a7c8-c417f5da80ff'
44 
    },
45 
    {
46 
      uuid: '59120c84-335f-424c-8990-db51ae7bd673',
47 
      sender_name: 'Santiago Olivera',
48 
      sender_image:
49 
        'https://dev-services.leaderslinked.com/storage/e85129fa-18eb-4149-8640-fea9ae916cdc',
50 
      sender_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
51 
      receiver_name: 'Cesa Managment Solution',
52 
      receiver_image:
53 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
54 
      receiver_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
55 
      side: 'left',
56 
      message: '',
57 
      type: 'image',
58 
      filename:
59 
        'https://dev-services.leaderslinked.com/storage/59120c84-335f-424c-8990-db51ae7bd673',
60 
      date: 'hace 1 año',
61 
      url_abuse_report: ''
62 
    },
63 
    {
64 
      uuid: '71c1356d-b5dc-413a-8f8e-ed087f99b6e3',
65 
      sender_name: 'Santiago Olivera',
66 
      sender_image:
67 
        'https://dev-services.leaderslinked.com/storage/e85129fa-18eb-4149-8640-fea9ae916cdc',
68 
      sender_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
69 
      receiver_name: 'Cesa Managment Solution',
70 
      receiver_image:
71 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
72 
      receiver_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
73 
      side: 'left',
74 
      message: 'buenas tardes',
75 
      type: 'text',
76 
      filename: '',
77 
      date: 'hace 1 año',
78 
      url_abuse_report: ''
79 
    },
80 
    {
81 
      uuid: 'c484b564-3d69-42bf-b6c4-12dfa6230614',
82 
      sender_name: 'Santiago Olivera',
83 
      sender_image:
84 
        'https://dev-services.leaderslinked.com/storage/e85129fa-18eb-4149-8640-fea9ae916cdc',
85 
      sender_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
86 
      receiver_name: 'Cesa Managment Solution',
87 
      receiver_image:
88 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
89 
      receiver_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
90 
      side: 'left',
91 
      message: 'Test',
92 
      type: 'text',
93 
      filename: '',
94 
      date: 'hace 1 año',
95 
      url_abuse_report: ''
96 
    },
97 
    {
98 
      uuid: 'f29723fd-dc2a-4b06-8c8e-e0e0cfe36cd1',
99 
      sender_name: 'Cesa Managment Solution',
100 
      sender_image:
101 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
102 
      sender_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
103 
      receiver_name: 'Santiago Olivera',
104 
      receiver_image:
105 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
106 
      receiver_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
107 
      side: 'right',
108 
      message:
109 
        'buenas tardes\r\n\r\nbuenas tardesbuenas tardes\r\n\r\nbuenas tardesbuenas tardes\r\n\r\nbuenas tardesbuenas tardesbuenas tardes',
110 
      type: 'document',
111 
      filename:
112 
        'https://dev-services.leaderslinked.com/storage/f29723fd-dc2a-4b06-8c8e-e0e0cfe36cd1',
113 
      date: 'hace 1 año',
114 
      url_abuse_report:
115 
        'https://dev-services.leaderslinked.com/helpers/abuse-report/message/f29723fd-dc2a-4b06-8c8e-e0e0cfe36cd1'
116 
    },
117 
    {
118 
      uuid: '86453fcf-ac3b-4228-9007-9dbf100976ef',
119 
      sender_name: 'Cesa Managment Solution',
120 
      sender_image:
121 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
122 
      sender_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
123 
      receiver_name: 'Santiago Olivera',
124 
      receiver_image:
125 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
126 
      receiver_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
127 
      side: 'right',
128 
      message:
129 
        'hola,hola,hola,hola,hola,hola,hola,\r\nhola,hola,hola,\r\n\r\nhola,hola,\r\nhola,hola,hola,\r\n\r\nhola,hola,hola,',
130 
      type: 'image',
131 
      filename:
132 
        'https://dev-services.leaderslinked.com/storage/86453fcf-ac3b-4228-9007-9dbf100976ef',
133 
      date: 'hace 1 año',
134 
      url_abuse_report:
135 
        'https://dev-services.leaderslinked.com/helpers/abuse-report/message/86453fcf-ac3b-4228-9007-9dbf100976ef'
136 
    }
137 
  ],
138 
  pagination: {
139 
    pageCount: 1,
140 
    itemCountPerPage: 10,
141 
    first: 1,
142 
    current: 1,
143 
    last: 1,
144 
    pagesInRange: {
145 
      1: 1
146 
    },
147 
    firstPageInRange: 1,
148 
    lastPageInRange: 1,
149 
    currentItemCount: 7,
150 
    totalItemCount: 7,
151 
    firstItemNumber: 1,
152 
    lastItemNumber: 7
153 
  }
154 
}; */
155 
 
156 
/**
157 
 * Hook optimizado para infinite scroll
158 
 * Maneja la paginación automática al hacer scroll
159 
 */
3530 stevensc 160 
export function usePagination(
161 
  url,
3599 stevensc 162 
  {
163 
    initialPage = 1,
3603 stevensc 164 
    initialLimit = 20,
3599 stevensc 165 
    initialParams = {},
3603 stevensc 166 
    resetOnUrlChange = true,
167 
    autoLoadFirstPage = true
3599 stevensc 168 
  } = {}
3530 stevensc 169 
) {
3529 stevensc 170 
  const [items, setItems] = useState([]);
3511 stevensc 171 
  const [page, setPage] = useState(initialPage);
3529 stevensc 172 
  const [totalPages, setTotalPages] = useState(0);
3599 stevensc 173 
  const [totalItems, setTotalItems] = useState(0);
3511 stevensc 174 
  const [limit, setLimit] = useState(initialLimit);
3530 stevensc 175 
  const [params, setParams] = useState({ page, limit, ...initialParams });
3511 stevensc 176 
 
3529 stevensc 177 
  const { data, loading, error, refetch } = useFetch(url, {
178 
    params
179 
  });
3511 stevensc 180 
 
3603 stevensc 181 
  // Memoized pagination state for infinite scroll
3599 stevensc 182 
  const paginationState = useMemo(
183 
    () => ({
184 
      page,
185 
      limit,
186 
      totalPages,
187 
      totalItems,
188 
      hasMore: page < totalPages,
3603 stevensc 189 
      isLoading: loading,
190 
      error
3599 stevensc 191 
    }),
3603 stevensc 192 
    [page, limit, totalPages, totalItems, loading, error]
3599 stevensc 193 
  );
3511 stevensc 194 
 
3603 stevensc 195 
  // Load next page for infinite scroll
3599 stevensc 196 
  const nextPage = useCallback(() => {
3603 stevensc 197 
    if (paginationState.hasMore && !loading) {
3599 stevensc 198 
      setPage((prevPage) => prevPage + 1);
199 
    }
3603 stevensc 200 
  }, [paginationState.hasMore, loading]);
3511 stevensc 201 
 
3603 stevensc 202 
  // Reset pagination when URL changes
3599 stevensc 203 
  const resetPagination = useCallback(() => {
204 
    setPage(initialPage);
205 
    setItems([]);
206 
    setTotalPages(0);
207 
    setTotalItems(0);
208 
  }, [initialPage]);
209 
 
3603 stevensc 210 
  // Update params when page or limit changes
211 
  useEffect(() => {
212 
    setParams((prevParams) => ({
213 
      ...prevParams,
214 
      page,
215 
      limit
216 
    }));
217 
  }, [page, limit]);
3599 stevensc 218 
 
3603 stevensc 219 
  // Reset pagination when URL changes (if enabled)
3529 stevensc 220 
  useEffect(() => {
3603 stevensc 221 
    if (resetOnUrlChange && url) {
222 
      resetPagination();
223 
    }
224 
  }, [url, resetOnUrlChange, resetPagination]);
225 
 
226 
  // Handle data updates with infinite scroll logic
227 
  useEffect(() => {
3529 stevensc 228 
    if (data) {
3599 stevensc 229 
      let newItems = [];
230 
      let pages = 0;
231 
      let items = 0;
232 
 
233 
      // Handle different response structures
234 
      if (data?.current?.items) {
3603 stevensc 235 
        // Structure: { current: { items: [] }, total: { pages, items } }
3599 stevensc 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)) {
250 
        // Structure: { items: [], pagination: { ... } }
251 
        newItems = data.items;
252 
        pages = data.pagination?.pageCount || data.pagination?.last || 0;
253 
        items = data.pagination?.totalItemCount || 0;
254 
      }
255 
 
256 
      setItems((prevItems) => {
3603 stevensc 257 
        // For infinite scroll, always append new items
258 
        if (page > 1) {
3599 stevensc 259 
          return [...prevItems, ...newItems];
260 
        } else {
3603 stevensc 261 
          // First page, replace items
3599 stevensc 262 
          return newItems;
263 
        }
264 
      });
265 
 
266 
      setTotalPages(pages);
267 
      setTotalItems(items);
3529 stevensc 268 
    }
3603 stevensc 269 
  }, [data, page]);
3529 stevensc 270 
 
3603 stevensc 271 
  // Auto-load first page if enabled and URL is provided
3529 stevensc 272 
  useEffect(() => {
3603 stevensc 273 
    if (autoLoadFirstPage && url && page === 1 && items.length === 0) {
274 
      // The useFetch hook will automatically load the data
3599 stevensc 275 
    }
3603 stevensc 276 
  }, [url, autoLoadFirstPage, page, items.length]);
3599 stevensc 277 
 
3511 stevensc 278 
  return {
3599 stevensc 279 
    // Data
3529 stevensc 280 
    items,
3599 stevensc 281 
    ...paginationState,
282 
 
283 
    // Actions
3511 stevensc 284 
    nextPage,
3599 stevensc 285 
    resetPagination,
3529 stevensc 286 
    refetch
3511 stevensc 287 
  };
288 
}