Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3599 Rev 3603
Línea 1... Línea 1...
1 
import { useEffect, useState, useCallback, useMemo } from 'react';
 1 
import { useEffect, useState, useCallback, useMemo } from 'react';
Línea 2... Línea 2...
2 
 
 2 
 
Línea -... Línea 3...
- 
 
 3 
import { useFetch } from './useFetch';
- 
 
 4 
 
- 
 
 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
3 
import { useFetch } from './useFetch';
 158 
 * Maneja la paginación automática al hacer scroll
4 
 
 159 
 */
5 
export function usePagination(
 160 
export function usePagination(
6 
  url,
 161 
  url,
7 
  {
 162 
  {
8 
    initialPage = 1,
 163 
    initialPage = 1,
9 
    initialLimit = 10,
 164 
    initialLimit = 20,
10 
    initialParams = {},
 165 
    initialParams = {},
11 
    enableInfiniteScroll = false,
 166 
    resetOnUrlChange = true,
12 
    resetOnUrlChange = true
 167 
    autoLoadFirstPage = true
13 
  } = {}
 168 
  } = {}
14 
) {
 169 
) {
15 
  const [items, setItems] = useState([]);
 170 
  const [items, setItems] = useState([]);
Línea 21... Línea 176...
21 
 
 176 
 
22 
  const { data, loading, error, refetch } = useFetch(url, {
 177 
  const { data, loading, error, refetch } = useFetch(url, {
23 
    params
 178 
    params
Línea 24... Línea 179...
24 
  });
 179 
  });
25 
 
 180 
 
26 
  // Memoized pagination state
 181 
  // Memoized pagination state for infinite scroll
27 
  const paginationState = useMemo(
 182 
  const paginationState = useMemo(
28 
    () => ({
 183 
    () => ({
29 
      page,
 184 
      page,
30 
      limit,
 185 
      limit,
31 
      totalPages,
 186 
      totalPages,
32 
      totalItems,
 187 
      totalItems,
33 
      hasMore: page < totalPages,
 188 
      hasMore: page < totalPages,
34 
      hasPrevious: page > 1,
 - 
 
35 
      isFirstPage: page === 1,
 189 
      isLoading: loading,
36 
      isLastPage: page === totalPages
 190 
      error
37 
    }),
 191 
    }),
Línea 38... Línea 192...
38 
    [page, limit, totalPages, totalItems]
 192 
    [page, limit, totalPages, totalItems, loading, error]
39 
  );
 193 
  );
40 
 
 194 
 
41 
  // Optimized page navigation functions
 195 
  // Load next page for infinite scroll
42 
  const nextPage = useCallback(() => {
 196 
  const nextPage = useCallback(() => {
43 
    if (paginationState.hasMore) {
 197 
    if (paginationState.hasMore && !loading) {
44 
      setPage((prevPage) => prevPage + 1);
 - 
 
45 
    }
 - 
 
46 
  }, [paginationState.hasMore]);
 - 
 
47 
 
 - 
 
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) {
 - 
 
57 
        setPage(newPage);
 - 
 
58 
      }
 - 
 
59 
    },
 - 
 
60 
    [totalPages]
 - 
 
61 
  );
 - 
 
62 
 
 - 
 
63 
  const setPageLimit = useCallback((newLimit) => {
 - 
 
64 
    if (newLimit > 0) {
 - 
 
65 
      setLimit(newLimit);
 - 
 
Línea -... Línea 198...
- 
 
 198 
      setPage((prevPage) => prevPage + 1);
66 
      setPage(1);
 199 
    }
67 
    }
 200 
  }, [paginationState.hasMore, loading]);
68 
  }, []);
 201 
 
69 
 
 202 
  // Reset pagination when URL changes
70 
  const resetPagination = useCallback(() => {
 203 
  const resetPagination = useCallback(() => {
71 
    setPage(initialPage);
 204 
    setPage(initialPage);
Línea 72... Línea 205...
72 
    setItems([]);
 205 
    setItems([]);
- 
 
 206 
    setTotalPages(0);
73 
    setTotalPages(0);
 207 
    setTotalItems(0);
- 
 
 208 
  }, [initialPage]);
- 
 
 209 
 
- 
 
 210 
  // Update params when page or limit changes
74 
    setTotalItems(0);
 211 
  useEffect(() => {
- 
 
 212 
    setParams((prevParams) => ({
Línea -... Línea 213...
- 
 
 213 
      ...prevParams,
- 
 
 214 
      page,
- 
 
 215 
      limit
- 
 
 216 
    }));
- 
 
 217 
  }, [page, limit]);
- 
 
 218 
 
- 
 
 219 
  // Reset pagination when URL changes (if enabled)
75 
  }, [initialPage]);
 220 
  useEffect(() => {
76 
 
 221 
    if (resetOnUrlChange && url) {
77 
  const updateParams = useCallback((newParams) => {
 222 
      resetPagination();
78 
    setParams((prevParams) => ({ ...prevParams, ...newParams }));
 223 
    }
79 
  }, []);
 224 
  }, [url, resetOnUrlChange, resetPagination]);
80 
 
 225 
 
Línea 81... Línea 226...
81 
  // Handle data updates with flexible structure support
 226 
  // Handle data updates with infinite scroll logic
82 
  useEffect(() => {
 227 
  useEffect(() => {
83 
    if (data) {
 228 
    if (data) {
84 
      let newItems = [];
 229 
      let newItems = [];
85 
      let pages = 0;
 230 
      let pages = 0;
86 
      let items = 0;
 231 
      let items = 0;
87 
 
 232 
 
88 
      // Handle different response structures
 233 
      // Handle different response structures
Línea 107... Línea 252...
107 
        pages = data.pagination?.pageCount || data.pagination?.last || 0;
 252 
        pages = data.pagination?.pageCount || data.pagination?.last || 0;
108 
        items = data.pagination?.totalItemCount || 0;
 253 
        items = data.pagination?.totalItemCount || 0;
109 
      }
 254 
      }
Línea 110... Línea 255...
110 
 
 255 
 
111 
      setItems((prevItems) => {
 256 
      setItems((prevItems) => {
112 
        if (enableInfiniteScroll && page > 1) {
 257 
        // For infinite scroll, always append new items
113 
          // For infinite scroll, append new items
 258 
        if (page > 1) {
114 
          return [...prevItems, ...newItems];
 259 
          return [...prevItems, ...newItems];
115 
        } else {
 260 
        } else {
116 
          // For regular pagination, replace items
 261 
          // First page, replace items
117 
          return newItems;
 262 
          return newItems;
118 
        }
 263 
        }
Línea 119... Línea 264...
119 
      });
 264 
      });
120 
 
 265 
 
121 
      setTotalPages(pages);
 266 
      setTotalPages(pages);
122 
      setTotalItems(items);
 267 
      setTotalItems(items);
Línea 123... Línea 268...
123 
    }
 268 
    }
124 
  }, [data, page, enableInfiniteScroll]);
 269 
  }, [data, page]);
125 
 
 270 
 
126 
  // Update params when page or limit changes
 - 
 
127 
  useEffect(() => {
 - 
 
128 
    setParams((prevParams) => ({
 - 
 
129 
      ...prevParams,
 - 
 
130 
      page,
 - 
 
131 
      limit
 - 
 
132 
    }));
 271 
  // Auto-load first page if enabled and URL is provided
133 
  }, [page, limit]);
 - 
 
134 
 
 - 
 
135 
  // Reset pagination when URL changes (if enabled)
 - 
 
136 
  useEffect(() => {
 272 
  useEffect(() => {
137 
    if (resetOnUrlChange) {
 273 
    if (autoLoadFirstPage && url && page === 1 && items.length === 0) {
Línea 138... Línea 274...
138 
      resetPagination();
 274 
      // The useFetch hook will automatically load the data
139 
    }
 275 
    }
140 
  }, [url, resetOnUrlChange, resetPagination]);
 276 
  }, [url, autoLoadFirstPage, page, items.length]);
141 
 
 277 
 
Línea 142... Línea -...
142 
  return {
 - 
 
143 
    // Data
 - 
 
144 
    items,
 - 
 
145 
    ...paginationState,
 - 
 
146 
 
 278 
  return {
147 
    // Loading and error states
 279 
    // Data
148 
    loading,
 - 
 
149 
    error,
 - 
 
150 
 
 - 
 
151 
    // Actions
 280 
    items,
152 
    nextPage,
 - 
 
153 
    prevPage,
 281 
    ...paginationState,
154 
    goToPage,
 282 
 
155 
    setPageLimit,
 283 
    // Actions