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>

  );

}