admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Build message threads (#3593)

Browse Source 
* Adding message thread component

* Add state and mocks

* Rename components and use local state for messages

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
This commit is contained in:
Thomas Trompette
2024-01-24 14:32:57 +01:00
committed by GitHub
parent afc36c7329
commit e85f65a195
20 changed files with 404 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx Normal file
View File

@ -0,0 +1,48 @@
import React from 'react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { EmailThreadHeader } from '@/activities/emails/components/EmailThreadHeader';
import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
import { mockedMessagesByThread } from '@/activities/emails/mocks/mockedEmailThreads';
import { viewableEmailThreadState } from '@/activities/emails/state/viewableEmailThreadState';
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 viewableEmailThread = useRecoilValue(viewableEmailThreadState);
if (!viewableEmailThread) {
return null;
}
const mockedMessages =
mockedMessagesByThread.get(viewableEmailThread.id) ?? [];
return (
<StyledContainer>
<EmailThreadHeader
subject={viewableEmailThread.subject}
lastMessageSentAt={viewableEmailThread.receivedAt}
/>
{mockedMessages.map((message) => (
<EmailThreadMessage
key={message.id}
id={message.id}
from={message.from}
to={message.to}
body={message.body}
sentAt={message.sentAt}
/>
))}
</StyledContainer>
);
};

2
packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerThreadTopBar.tsx → packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThreadTopBar.tsx
View File

@ -10,7 +10,7 @@ const StyledTopBarWrapper = styled.div`
display: flex;
`;
export const RightDrawerThreadTopBar = () => {
export const RightDrawerEmailThreadTopBar = () => {
const isMobile = useIsMobile();
return (

29
packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerThread.tsx
View File

@ -1,29 +0,0 @@
import React from 'react';
import styled from '@emotion/styled';
import { ThreadHeader } from '@/activities/emails/components/ThreadHeader';
const StyledContainer = styled.div`
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
overflow-y: auto;
position: relative;
`;
export const RightDrawerThread = () => {
const mockedThread = {
subject: 'Tes with long subject, very long subject, very long subject',
receivedAt: new Date(),
};
return (
<StyledContainer>
<ThreadHeader
subject={mockedThread.subject}
lastMessageSentAt={mockedThread.receivedAt}
/>
</StyledContainer>
);
};

10
packages/twenty-front/src/modules/activities/emails/right-drawer/components/__stories__/RightDrawerThreadTopBar.stories.tsx → packages/twenty-front/src/modules/activities/emails/right-drawer/components/__stories__/RightDrawerEmailThreadTopBar.stories.tsx
View File

@ -1,12 +1,12 @@
import { Meta, StoryObj } from '@storybook/react';
import { RightDrawerThreadTopBar } from '@/activities/emails/right-drawer/components/RightDrawerThreadTopBar';
import { RightDrawerEmailThreadTopBar } from '@/activities/emails/right-drawer/components/RightDrawerEmailThreadTopBar';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
const meta: Meta<typeof RightDrawerThreadTopBar> = {
title: 'Modules/Activities/Emails/RightDrawer/RightDrawerThreadTopBar',
component: RightDrawerThreadTopBar,
const meta: Meta<typeof RightDrawerEmailThreadTopBar> = {
title: 'Modules/Activities/Emails/RightDrawer/RightDrawerEmailThreadTopBar',
component: RightDrawerEmailThreadTopBar,
decorators: [
(Story) => (
<div style={{ width: '500px' }}>
@ -21,6 +21,6 @@ const meta: Meta<typeof RightDrawerThreadTopBar> = {
};
export default meta;
type Story = StoryObj<typeof RightDrawerThreadTopBar>;
type Story = StoryObj<typeof RightDrawerEmailThreadTopBar>;
export const Default: Story = {};