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,
    loading: loadingMessages,
    lastElementRef
  } = usePagination(selectedConversation?.messages_url);

  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={messages}
              loading={loadingMessages}
              lastElementRef={lastElementRef}
            />
          </Box>
        </Box>
      </Grid>
    </Grid>
  );
}