Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import { Grid, Box, Typography } from '@mui/material';

import { useFetch, usePagination } from '@shared/hooks';

import { Spinner } from '@shared/components';
import { ConversationsList, MessagesList } from '@inmail/components';

const messagesResponse = {
  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 InmailPage() {
  const [selectedConversation, setSelectedConversation] = useState(null);

  const { data: conversations, loading } = useFetch('/email');
  const {
    items: messages,
    loading: loadingMessages,
    nextPage,
    hasMore
  } = usePagination(selectedConversation?.messages_url, {
    enableInfiniteScroll: true
  });

  // Para demostración, usar datos de prueba cuando no hay conversación seleccionada
  const displayMessages = selectedConversation ? messages : messagesResponse.data;
  const displayLoading = selectedConversation ? loadingMessages : false;

  if (loading || !conversations) {
    return <Spinner />;
  }

  return (
    <Grid container spacing={2} sx={{ height: 'calc(100vh - 100px)' }}>
      <Grid item xs={12} md={3}>
        <ConversationsList
          conversations={conversations}
          onSelectConversation={setSelectedConversation}
        />
      </Grid>
      <Grid item xs={12} md={9}>
        <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
          {selectedConversation && (
            <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
              <Typography variant='h6'>Conversación con {selectedConversation.name}</Typography>
            </Box>
          )}
          <Box sx={{ flex: 1, overflow: 'hidden' }}>
            <MessagesList
              messages={displayMessages}
              onLoadMore={nextPage}
              loading={displayLoading}
              hasMore={hasMore}
            />
          </Box>
        </Box>
      </Grid>
    </Grid>
  );
}