55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { EmailLoader } from '@/activities/emails/components/EmailLoader';
|
|
import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader';
|
|
import { EmailThreadHeader } from '@/activities/emails/components/EmailThreadHeader';
|
|
import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
|
|
import { useRightDrawerEmailThread } from '@/activities/emails/right-drawer/hooks/useRightDrawerEmailThread';
|
|
|
|
const StyledContainer = styled.div`
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
justify-content: flex-start;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
`;
|
|
|
|
export const RightDrawerEmailThread = () => {
|
|
const { thread, messages, fetchMoreMessages, loading } =
|
|
useRightDrawerEmailThread();
|
|
|
|
if (!thread) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<StyledContainer>
|
|
<EmailThreadHeader
|
|
subject={thread.subject}
|
|
lastMessageSentAt={thread.lastMessageReceivedAt}
|
|
/>
|
|
{loading ? (
|
|
<EmailLoader loadingText="Loading thread" />
|
|
) : (
|
|
<>
|
|
{messages.map((message) => (
|
|
<EmailThreadMessage
|
|
key={message.id}
|
|
participants={message.messageParticipants}
|
|
body={message.text}
|
|
sentAt={message.receivedAt}
|
|
/>
|
|
))}
|
|
<EmailThreadFetchMoreLoader
|
|
loading={loading}
|
|
onLastRowVisible={fetchMoreMessages}
|
|
/>
|
|
</>
|
|
)}
|
|
</StyledContainer>
|
|
);
|
|
};
|