From e85f65a195b1b8a3f683f02af972ad1f7c0c4a67 Mon Sep 17 00:00:00 2001 From: Thomas Trompette Date: Wed, 24 Jan 2024 14:32:57 +0100 Subject: [PATCH] Build message threads (#3593) * Adding message thread component * Add state and mocks * Rename components and use local state for messages --------- Co-authored-by: Thomas Trompette --- ...BottomBar.tsx => EmailThreadBottomBar.tsx} | 0 ...ThreadHeader.tsx => EmailThreadHeader.tsx} | 11 +- .../emails/components/EmailThreadMessage.tsx | 56 +++++++++ .../components/EmailThreadMessageBody.tsx | 20 ++++ .../EmailThreadMessageBodyPreview.tsx | 23 ++++ .../components/EmailThreadMessageSender.tsx | 61 ++++++++++ ...readPreview.tsx => EmailThreadPreview.tsx} | 17 ++- .../{Threads.tsx => EmailThreads.tsx} | 37 ++++-- .../activities/emails/hooks/useEmailThread.ts | 21 ++++ .../emails/mocks/mockedEmailThreads.ts | 110 ++++++++++++++++++ .../components/RightDrawerEmailThread.tsx | 48 ++++++++ ...r.tsx => RightDrawerEmailThreadTopBar.tsx} | 2 +- .../components/RightDrawerThread.tsx | 29 ----- ... RightDrawerEmailThreadTopBar.stories.tsx} | 10 +- ...er.ts => useOpenEmailThreadRightDrawer.ts} | 4 +- .../emails/state/viewableEmailThreadState.ts | 8 ++ .../components/RightDrawerRouter.tsx | 10 +- .../right-drawer/types/RightDrawerPages.ts | 2 +- .../components/ShowPageRightContainer.tsx | 4 +- .../src/testing/mock-data/activities.ts | 2 +- 20 files changed, 404 insertions(+), 71 deletions(-) rename packages/twenty-front/src/modules/activities/emails/components/{ThreadBottomBar.tsx => EmailThreadBottomBar.tsx} (100%) rename packages/twenty-front/src/modules/activities/emails/components/{ThreadHeader.tsx => EmailThreadHeader.tsx} (90%) create mode 100644 packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx create mode 100644 packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx create mode 100644 packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBodyPreview.tsx create mode 100644 packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx rename packages/twenty-front/src/modules/activities/emails/components/{ThreadPreview.tsx => EmailThreadPreview.tsx} (88%) rename packages/twenty-front/src/modules/activities/emails/components/{Threads.tsx => EmailThreads.tsx} (70%) create mode 100644 packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts create mode 100644 packages/twenty-front/src/modules/activities/emails/mocks/mockedEmailThreads.ts create mode 100644 packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx rename packages/twenty-front/src/modules/activities/emails/right-drawer/components/{RightDrawerThreadTopBar.tsx => RightDrawerEmailThreadTopBar.tsx} (93%) delete mode 100644 packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerThread.tsx rename packages/twenty-front/src/modules/activities/emails/right-drawer/components/__stories__/{RightDrawerThreadTopBar.stories.tsx => RightDrawerEmailThreadTopBar.stories.tsx} (54%) rename packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/{useOpenThreadRightDrawer.ts => useOpenEmailThreadRightDrawer.ts} (83%) create mode 100644 packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadState.ts diff --git a/packages/twenty-front/src/modules/activities/emails/components/ThreadBottomBar.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadBottomBar.tsx similarity index 100% rename from packages/twenty-front/src/modules/activities/emails/components/ThreadBottomBar.tsx rename to packages/twenty-front/src/modules/activities/emails/components/EmailThreadBottomBar.tsx diff --git a/packages/twenty-front/src/modules/activities/emails/components/ThreadHeader.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx similarity index 90% rename from packages/twenty-front/src/modules/activities/emails/components/ThreadHeader.tsx rename to packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx index 8d8a2bb62..1e1e7471d 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/ThreadHeader.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx @@ -3,10 +3,11 @@ import styled from '@emotion/styled'; import { IconMail } from '@/ui/display/icon'; import { Tag } from '@/ui/display/tag/components/Tag'; import { beautifyPastDateRelativeToNow } from '~/utils/date-utils'; -interface ThreadHeaderProps { + +type EmailThreadHeaderProps = { subject: string; - lastMessageSentAt: Date; -} + lastMessageSentAt: string; +}; const StyledContainer = styled.div` align-items: flex-start; @@ -36,10 +37,10 @@ const StyledContent = styled.span` width: 100%; `; -export const ThreadHeader = ({ +export const EmailThreadHeader = ({ subject, lastMessageSentAt, -}: ThreadHeaderProps) => { +}: EmailThreadHeaderProps) => { return ( {}} /> diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx new file mode 100644 index 000000000..cc234a82e --- /dev/null +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx @@ -0,0 +1,56 @@ +import React, { useState } from 'react'; +import styled from '@emotion/styled'; + +import { EmailThreadMessageBody } from '@/activities/emails/components/EmailThreadMessageBody'; +import { EmailThreadMessageBodyPreview } from '@/activities/emails/components/EmailThreadMessageBodyPreview'; +import { EmailThreadMessageSender } from '@/activities/emails/components/EmailThreadMessageSender'; +import { MockedEmailUser } from '@/activities/emails/mocks/mockedEmailThreads'; + +const StyledThreadMessage = styled.div` + border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; + cursor: pointer; + display: flex; + flex-direction: column; + padding: ${({ theme }) => theme.spacing(4, 6)}; +`; + +const StyledThreadMessageHeader = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; + margin-bottom: ${({ theme }) => theme.spacing(2)}; +`; + +type EmailThreadMessageProps = { + id: string; + body: string; + sentAt: string; + from: MockedEmailUser; + to: MockedEmailUser[]; +}; + +export const EmailThreadMessage = ({ + body, + sentAt, + from, +}: EmailThreadMessageProps) => { + const { displayName, avatarUrl } = from; + const [isOpen, setIsOpen] = useState(false); + + return ( + setIsOpen(!isOpen)}> + + + + {isOpen ? ( + + ) : ( + + )} + + ); +}; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx new file mode 100644 index 000000000..cb48f07e9 --- /dev/null +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import styled from '@emotion/styled'; + +const StyledThreadMessageBody = styled.div` + color: ${({ theme }) => theme.font.color.primary}; + display: flex; + flex-direction: column; + margin-top: ${({ theme }) => theme.spacing(4)}; + white-space: pre-line; +`; + +type EmailThreadMessageBodyProps = { + body: string; +}; + +export const EmailThreadMessageBody = ({ + body, +}: EmailThreadMessageBodyProps) => { + return {body}; +}; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBodyPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBodyPreview.tsx new file mode 100644 index 000000000..80ec0742f --- /dev/null +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBodyPreview.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import styled from '@emotion/styled'; + +const StyledThreadMessageBodyPreview = styled.span` + color: ${({ theme }) => theme.font.color.tertiary}; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: ${({ theme }) => theme.font.size.sm}; +`; + +type EmailThreadMessageBodyPreviewProps = { + body: string; +}; + +export const EmailThreadMessageBodyPreview = ({ + body, +}: EmailThreadMessageBodyPreviewProps) => { + return ( + {body} + ); +}; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx new file mode 100644 index 000000000..0ebe0d66f --- /dev/null +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import styled from '@emotion/styled'; + +import { Avatar } from '@/users/components/Avatar'; +import { beautifyPastDateRelativeToNow } from '~/utils/date-utils'; + +const StyledEmailThreadMessageSender = styled.div` + display: flex; + justify-content: space-between; +`; + +const StyledEmailThreadMessageSenderUser = styled.div` + align-items: flex-start; + display: flex; +`; + +const StyledAvatar = styled(Avatar)` + margin: ${({ theme }) => theme.spacing(0, 1)}; +`; + +const StyledSenderName = styled.span` + font-size: ${({ theme }) => theme.font.size.sm}; + overflow: hidden; + text-overflow: ellipsis; +`; + +const StyledThreadMessageSentAt = styled.div` + align-items: flex-end; + display: flex; + color: ${({ theme }) => theme.font.color.tertiary}; + font-size: ${({ theme }) => theme.font.size.sm}; +`; + +type EmailThreadMessageSenderProps = { + displayName: string; + avatarUrl: string; + sentAt: string; +}; + +export const EmailThreadMessageSender = ({ + displayName, + avatarUrl, + sentAt, +}: EmailThreadMessageSenderProps) => { + return ( + + + + {displayName} + + + {beautifyPastDateRelativeToNow(sentAt)} + + + ); +}; diff --git a/packages/twenty-front/src/modules/activities/emails/components/ThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx similarity index 88% rename from packages/twenty-front/src/modules/activities/emails/components/ThreadPreview.tsx rename to packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx index af479fe62..cd87008bd 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/ThreadPreview.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx @@ -1,6 +1,5 @@ import styled from '@emotion/styled'; -import { useOpenThreadRightDrawer } from '@/activities/emails/right-drawer/hooks/useOpenThreadRightDrawer'; import { CardContent } from '@/ui/layout/card/components/CardContent'; import { Avatar } from '@/users/components/Avatar'; import { TimelineThread } from '~/generated/graphql'; @@ -78,19 +77,19 @@ const StyledReceivedAt = styled.div` padding: ${({ theme }) => theme.spacing(0, 1)}; `; -type ThreadPreviewProps = { +type EmailThreadPreviewProps = { divider?: boolean; thread: TimelineThread; + onClick: () => void; }; -export const ThreadPreview = ({ divider, thread }: ThreadPreviewProps) => { - const openMessageThreadRightDrawer = useOpenThreadRightDrawer(); - +export const EmailThreadPreview = ({ + divider, + thread, + onClick, +}: EmailThreadPreviewProps) => { return ( - openMessageThreadRightDrawer()} - divider={divider} - > + onClick()} divider={divider}> theme.font.color.light}; `; -export const Threads = ({ entity }: { entity: ActivityTargetableObject }) => { +export const EmailThreads = ({ + entity, +}: { + entity: ActivityTargetableObject; +}) => { + const { openEmailThread } = useEmailThread(); + const threadQuery = entity.targetObjectNameSingular === CoreObjectNameSingular.Person ? getTimelineThreadsFromPersonId @@ -49,12 +59,16 @@ export const Threads = ({ entity }: { entity: ActivityTargetableObject }) => { return; } - const timelineThreads: TimelineThread[] = - threads.data[ - entity.targetObjectNameSingular === CoreObjectNameSingular.Person - ? 'getTimelineThreadsFromPersonId' - : 'getTimelineThreadsFromCompanyId' - ]; + // To use once the id is returned by the query + + // const fetchedTimelineThreads: TimelineThread[] = + // threads.data[ + // entity.targetObjectNameSingular === CoreObjectNameSingular.Person + // ? 'getTimelineThreadsFromPersonId' + // : 'getTimelineThreadsFromCompanyId' + // ]; + + const timelineThreads = mockedEmailThreads; return ( @@ -72,11 +86,12 @@ export const Threads = ({ entity }: { entity: ActivityTargetableObject }) => { /> {timelineThreads && - timelineThreads.map((thread: TimelineThread, index: number) => ( - ( + openEmailThread(thread)} /> ))} diff --git a/packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts b/packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts new file mode 100644 index 000000000..07116c26d --- /dev/null +++ b/packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts @@ -0,0 +1,21 @@ +import { useRecoilState } from 'recoil'; + +import { MockedThread } from '@/activities/emails/mocks/mockedEmailThreads'; +import { useOpenEmailThreadRightDrawer } from '@/activities/emails/right-drawer/hooks/useOpenEmailThreadRightDrawer'; +import { viewableEmailThreadState } from '@/activities/emails/state/viewableEmailThreadState'; + +export const useEmailThread = () => { + const [, setViewableEmailThread] = useRecoilState(viewableEmailThreadState); + + const openEmailThredRightDrawer = useOpenEmailThreadRightDrawer(); + + const openEmailThread = (thread: MockedThread) => { + openEmailThredRightDrawer(); + + setViewableEmailThread(thread); + }; + + return { + openEmailThread, + }; +}; diff --git a/packages/twenty-front/src/modules/activities/emails/mocks/mockedEmailThreads.ts b/packages/twenty-front/src/modules/activities/emails/mocks/mockedEmailThreads.ts new file mode 100644 index 000000000..1de2452c6 --- /dev/null +++ b/packages/twenty-front/src/modules/activities/emails/mocks/mockedEmailThreads.ts @@ -0,0 +1,110 @@ +import { DateTime } from 'luxon'; + +import { Scalars, TimelineThread } from '~/generated/graphql'; + +export type MockedThread = { + id: string; +} & TimelineThread; + +export type MockedEmailUser = { + avatarUrl: string; + displayName: string; + workspaceMemberId?: string; + personId?: string; +}; + +export type MockedMessage = { + id: string; + from: MockedEmailUser; + to: MockedEmailUser[]; + subject: string; + body: string; + sentAt: string; +}; + +export const mockedEmailThreads: MockedThread[] = [ + { + __typename: 'TimelineThread', + id: '1', + body: 'This is a test email' as Scalars['String'], + numberOfMessagesInThread: 5 as Scalars['Float'], + read: true as Scalars['Boolean'], + receivedAt: new Date().toISOString() as Scalars['DateTime'], + senderName: 'Thom Trp' as Scalars['String'], + senderPictureUrl: '' as Scalars['String'], + subject: 'Test email' as Scalars['String'], + }, + { + __typename: 'TimelineThread', + id: '2', + body: 'This is a second test email' as Scalars['String'], + numberOfMessagesInThread: 5 as Scalars['Float'], + read: true as Scalars['Boolean'], + receivedAt: new Date().toISOString() as Scalars['DateTime'], + senderName: 'Coco Den' as Scalars['String'], + senderPictureUrl: '' as Scalars['String'], + subject: 'Test email number 2' as Scalars['String'], + }, +]; + +export const mockedMessagesByThread: Map = new Map([ + [ + '1', + Array.from({ length: 5 }).map((_, i) => ({ + id: `id${i + 1}`, + from: { + avatarUrl: '', + displayName: `User ${i + 1}`, + workspaceMemberId: `workspaceMemberId${i + 1}`, + personId: `personId${i + 1}`, + }, + to: [ + { + avatarUrl: 'https://favicon.twenty.com/qonto.com', + displayName: `User ${i + 2}`, + workspaceMemberId: `workspaceMemberId${i + 1}`, + personId: `personId${i + 2}`, + }, + ], + subject: `Subject ${i + 1}`, + body: `Body ${ + i + 1 + }. I am testing a very long body. I am adding more text. +I also want to test a new line. To see if it works. + +I am adding a new paragraph. + +Thomas`, + sentAt: DateTime.fromFormat('2021-03-12', 'yyyy-MM-dd').toISO() ?? '', + })), + ], + [ + '2', + Array.from({ length: 5 }).map((_, i) => ({ + id: `id${i + 10}`, + from: { + avatarUrl: '', + displayName: `Other user ${i + 1}`, + workspaceMemberId: `workspaceMemberId${i + 1}`, + personId: `personId${i + 1}`, + }, + to: [ + { + avatarUrl: 'https://favicon.twenty.com/qonto.com', + displayName: `Other user ${i + 2}`, + workspaceMemberId: `workspaceMemberId${i + 1}`, + personId: `personId${i + 2}`, + }, + ], + subject: `Subject ${i + 1}`, + body: `Body ${ + i + 1 + }. Hello, I am testing a very long body. I am adding more text. + +I am adding a new paragraph. + +Thomas`, + sentAt: DateTime.fromFormat('2021-03-12', 'yyyy-MM-dd').toISO() ?? '', + })), + ], +]); diff --git a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx new file mode 100644 index 000000000..995db3da6 --- /dev/null +++ b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx @@ -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 ( + + + {mockedMessages.map((message) => ( + + ))} + + ); +}; diff --git a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerThreadTopBar.tsx b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThreadTopBar.tsx similarity index 93% rename from packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerThreadTopBar.tsx rename to packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThreadTopBar.tsx index 7bc86eb9c..29e71fe6e 100644 --- a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerThreadTopBar.tsx +++ b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThreadTopBar.tsx @@ -10,7 +10,7 @@ const StyledTopBarWrapper = styled.div` display: flex; `; -export const RightDrawerThreadTopBar = () => { +export const RightDrawerEmailThreadTopBar = () => { const isMobile = useIsMobile(); return ( diff --git a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerThread.tsx b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerThread.tsx deleted file mode 100644 index b38a2d73b..000000000 --- a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerThread.tsx +++ /dev/null @@ -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 ( - - - - ); -}; diff --git a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/__stories__/RightDrawerThreadTopBar.stories.tsx b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/__stories__/RightDrawerEmailThreadTopBar.stories.tsx similarity index 54% rename from packages/twenty-front/src/modules/activities/emails/right-drawer/components/__stories__/RightDrawerThreadTopBar.stories.tsx rename to packages/twenty-front/src/modules/activities/emails/right-drawer/components/__stories__/RightDrawerEmailThreadTopBar.stories.tsx index 694fc8927..ebbfc80dc 100644 --- a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/__stories__/RightDrawerThreadTopBar.stories.tsx +++ b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/__stories__/RightDrawerEmailThreadTopBar.stories.tsx @@ -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 = { - title: 'Modules/Activities/Emails/RightDrawer/RightDrawerThreadTopBar', - component: RightDrawerThreadTopBar, +const meta: Meta = { + title: 'Modules/Activities/Emails/RightDrawer/RightDrawerEmailThreadTopBar', + component: RightDrawerEmailThreadTopBar, decorators: [ (Story) => (
@@ -21,6 +21,6 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = {}; diff --git a/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useOpenThreadRightDrawer.ts b/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useOpenEmailThreadRightDrawer.ts similarity index 83% rename from packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useOpenThreadRightDrawer.ts rename to packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useOpenEmailThreadRightDrawer.ts index f99982f39..e718d97d2 100644 --- a/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useOpenThreadRightDrawer.ts +++ b/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useOpenEmailThreadRightDrawer.ts @@ -3,12 +3,12 @@ import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDraw import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages'; import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; -export const useOpenThreadRightDrawer = () => { +export const useOpenEmailThreadRightDrawer = () => { const { openRightDrawer } = useRightDrawer(); const setHotkeyScope = useSetHotkeyScope(); return () => { setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false }); - openRightDrawer(RightDrawerPages.ViewThread); + openRightDrawer(RightDrawerPages.ViewEmailThread); }; }; diff --git a/packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadState.ts b/packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadState.ts new file mode 100644 index 000000000..b50ae5c84 --- /dev/null +++ b/packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadState.ts @@ -0,0 +1,8 @@ +import { atom } from 'recoil'; + +import { MockedThread } from '@/activities/emails/mocks/mockedEmailThreads'; + +export const viewableEmailThreadState = atom({ + key: 'viewableEmailThreadState', + default: null, +}); diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx index 610471ade..d35dc5781 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; -import { RightDrawerThread } from '@/activities/emails/right-drawer/components/RightDrawerThread'; -import { RightDrawerThreadTopBar } from '@/activities/emails/right-drawer/components/RightDrawerThreadTopBar'; +import { RightDrawerEmailThread } from '@/activities/emails/right-drawer/components/RightDrawerEmailThread'; +import { RightDrawerEmailThreadTopBar } from '@/activities/emails/right-drawer/components/RightDrawerEmailThreadTopBar'; import { RightDrawerCreateActivity } from '@/activities/right-drawer/components/create/RightDrawerCreateActivity'; import { RightDrawerEditActivity } from '@/activities/right-drawer/components/edit/RightDrawerEditActivity'; @@ -42,9 +42,9 @@ export const RightDrawerRouter = () => { page = ; topBar = ; break; - case RightDrawerPages.ViewThread: - page = ; - topBar = ; + case RightDrawerPages.ViewEmailThread: + page = ; + topBar = ; break; default: break; diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerPages.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerPages.ts index 4fdb5f921..e0028a7c5 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerPages.ts +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerPages.ts @@ -1,5 +1,5 @@ export enum RightDrawerPages { CreateActivity = 'create-activity', EditActivity = 'edit-activity', - ViewThread = 'view-thread', + ViewEmailThread = 'view-email-thread', } diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx index 852f1e370..7de352e05 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { Threads } from '@/activities/emails/components/Threads'; +import { EmailThreads } from '@/activities/emails/components/EmailThreads'; import { Attachments } from '@/activities/files/components/Attachments'; import { Notes } from '@/activities/notes/components/Notes'; import { ObjectTasks } from '@/activities/tasks/components/ObjectTasks'; @@ -115,7 +115,7 @@ export const ShowPageRightContainer = ({ {activeTabId === 'files' && ( )} - {activeTabId === 'emails' && } + {activeTabId === 'emails' && } ); }; diff --git a/packages/twenty-front/src/testing/mock-data/activities.ts b/packages/twenty-front/src/testing/mock-data/activities.ts index 423580a2d..8b3621d8d 100644 --- a/packages/twenty-front/src/testing/mock-data/activities.ts +++ b/packages/twenty-front/src/testing/mock-data/activities.ts @@ -212,7 +212,7 @@ export const mockedActivities: Array = [ }, ]; -export const mockedThreads: TimelineThread[] = [ +export const mockedEmailThreads: TimelineThread[] = [ { body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim nisi eu tellus dapibus, egestas placerat risus placerat. Praesent eget arcu consectetur, efficitur felis.', numberOfMessagesInThread: 4,