Proyectos de Subversion LeadersLinked - SPA

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

import { useApi, useFetch } from '@shared/hooks';
import { getMessages } from '@inmail/services';

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

export function InmailPage() {
  const [selectedConversation, setSelectedConversation] = useState(null);

  const { data: conversations, loading } = useFetch('/inmail');
  const { data: messages, loading: loadingMessages, execute: fetchMessages } = useApi(getMessages);

  useEffect(() => {
    if (selectedConversation) {
      fetchMessages(selectedConversation.messages_link);
    }
  }, [selectedConversation]);

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

  return (
    <Grid container spacing={2}>
      <Grid item xs={12} md={3}>
        <ConversationsList
          conversations={conversations}
          onSelectConversation={setSelectedConversation}
        />
      </Grid>
      <Grid item xs={12} md={9}>
        {loadingMessages ? (
          <Spinner />
        ) : (
          <>
            {messages.map((message) => (
              <Typography key={message.uuid}>{JSON.stringify(message)}</Typography>
            ))}
          </>
        )}
      </Grid>
    </Grid>
  );
}