Proyectos de Subversion LeadersLinked - SPA

import { useEffect, useState, useCallback } from 'react';

import { useApi } from './useApi';
import { getMessages } from '@inmail/services';
import { useInfinityScroll } from './useInfinityScroll';

/* const paginationResponseExample = {
  success: true,
  data: [
    {
      uuid: 'b18afb55-d40e-4fd9-95a6-324a7f45e57f',
      sender_name: 'Cesa Managment Solution',
      sender_image:
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      sender_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      receiver_name: 'Santiago Olivera',
      receiver_image:
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      receiver_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
      side: 'right',
      message: '',
      type: 'image',
      filename:
        'https://dev-services.leaderslinked.com/storage/b18afb55-d40e-4fd9-95a6-324a7f45e57f',
      date: 'hace 1 año',
      url_abuse_report:
        'https://dev-services.leaderslinked.com/helpers/abuse-report/message/b18afb55-d40e-4fd9-95a6-324a7f45e57f'
    },
    {
      uuid: 'c3b3c887-9f88-4a36-a7c8-c417f5da80ff',
      sender_name: 'Cesa Managment Solution',
      sender_image:
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      sender_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      receiver_name: 'Santiago Olivera',
      receiver_image:
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      receiver_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
      side: 'right',
      message: 'Buenas tardes',
      type: 'text',
      filename: '',
      date: 'hace 1 año',
      url_abuse_report:
        'https://dev-services.leaderslinked.com/helpers/abuse-report/message/c3b3c887-9f88-4a36-a7c8-c417f5da80ff'
    },
    {
      uuid: '59120c84-335f-424c-8990-db51ae7bd673',
      sender_name: 'Santiago Olivera',
      sender_image:
        'https://dev-services.leaderslinked.com/storage/e85129fa-18eb-4149-8640-fea9ae916cdc',
      sender_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
      receiver_name: 'Cesa Managment Solution',
      receiver_image:
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      receiver_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      side: 'left',
      message: '',
      type: 'image',
      filename:
        'https://dev-services.leaderslinked.com/storage/59120c84-335f-424c-8990-db51ae7bd673',
      date: 'hace 1 año',
      url_abuse_report: ''
    },
    {
      uuid: '71c1356d-b5dc-413a-8f8e-ed087f99b6e3',
      sender_name: 'Santiago Olivera',
      sender_image:
        'https://dev-services.leaderslinked.com/storage/e85129fa-18eb-4149-8640-fea9ae916cdc',
      sender_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
      receiver_name: 'Cesa Managment Solution',
      receiver_image:
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      receiver_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      side: 'left',
      message: 'buenas tardes',
      type: 'text',
      filename: '',
      date: 'hace 1 año',
      url_abuse_report: ''
    },
    {
      uuid: 'c484b564-3d69-42bf-b6c4-12dfa6230614',
      sender_name: 'Santiago Olivera',
      sender_image:
        'https://dev-services.leaderslinked.com/storage/e85129fa-18eb-4149-8640-fea9ae916cdc',
      sender_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
      receiver_name: 'Cesa Managment Solution',
      receiver_image:
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      receiver_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      side: 'left',
      message: 'Test',
      type: 'text',
      filename: '',
      date: 'hace 1 año',
      url_abuse_report: ''
    },
    {
      uuid: 'f29723fd-dc2a-4b06-8c8e-e0e0cfe36cd1',
      sender_name: 'Cesa Managment Solution',
      sender_image:
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      sender_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      receiver_name: 'Santiago Olivera',
      receiver_image:
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      receiver_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
      side: 'right',
      message:
        'buenas tardes\r\n\r\nbuenas tardesbuenas tardes\r\n\r\nbuenas tardesbuenas tardes\r\n\r\nbuenas tardesbuenas tardesbuenas tardes',
      type: 'document',
      filename:
        'https://dev-services.leaderslinked.com/storage/f29723fd-dc2a-4b06-8c8e-e0e0cfe36cd1',
      date: 'hace 1 año',
      url_abuse_report:
        'https://dev-services.leaderslinked.com/helpers/abuse-report/message/f29723fd-dc2a-4b06-8c8e-e0e0cfe36cd1'
    },
    {
      uuid: '86453fcf-ac3b-4228-9007-9dbf100976ef',
      sender_name: 'Cesa Managment Solution',
      sender_image:
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      sender_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      receiver_name: 'Santiago Olivera',
      receiver_image:
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
      receiver_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
      side: 'right',
      message:
        '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,',
      type: 'image',
      filename:
        'https://dev-services.leaderslinked.com/storage/86453fcf-ac3b-4228-9007-9dbf100976ef',
      date: 'hace 1 año',
      url_abuse_report:
        'https://dev-services.leaderslinked.com/helpers/abuse-report/message/86453fcf-ac3b-4228-9007-9dbf100976ef'
    }
  ],
  pagination: {
    pageCount: 1,
    itemCountPerPage: 10,
    first: 1,
    current: 1,
    last: 1,
    pagesInRange: {
      1: 1
    },
    firstPageInRange: 1,
    lastPageInRange: 1,
    currentItemCount: 7,
    totalItemCount: 7,
    firstItemNumber: 1,
    lastItemNumber: 7
  }
}; */

export function usePagination(url) {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);

  const { data, error, execute, loading } = useApi(getMessages);

  const nextPage = useCallback(() => {
    console.log('Intersecting');
    if (page < totalPages && !loading) {
      console.log('Cambio de pagina');
      setPage((prevPage) => prevPage + 1);
    }
  }, [page, totalPages, loading]);

  const { elementRef } = useInfinityScroll({
    onIntersect: nextPage
  });

  const resetPagination = useCallback(() => {
    setItems([]);
    setPage(1);
    setTotalPages(1);
  }, []);

  useEffect(() => {
    if (url) {
      console.log('Fetching data:', `${url}?page=${page}`);
      execute(`${url}?page=${page}`);
    }
  }, [page, url]);

  useEffect(() => {
    resetPagination();
  }, [url]);

  useEffect(() => {
    if (data) {
      setItems((prevItems) => {
        if (page > 1) {
          return [...prevItems, ...data.current.items];
        } else {
          return data.current.items;
        }
      });

      setTotalPages(data.total.pages);
    }
  }, [data, page]);

  return {
    items,
    loading,
    error,
    elementRef,
    execute,
    nextPage,
    resetPagination
  };
}