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';

export function InmailPage() {

  const [selectedConversation, setSelectedConversation] = useState(null);

  const { data: conversations, loading } = useFetch('/email');

  const {

    items: messages,

    isLoading: loadingMessages,

    hasMore,

    nextPage

  } = usePagination(selectedConversation?.messages_url, {

    resetOnUrlChange: true,

    autoLoadFirstPage: true

  });

  // Para demostración, usar datos de prueba cuando no hay conversación seleccionada

  const displayMessages = selectedConversation && messages;

  const displayLoading = selectedConversation && loadingMessages;

  const displayHasMore = selectedConversation && hasMore;

  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={displayHasMore}

            />

          </Box>

        </Box>

      </Grid>

    </Grid>

  );

}