Add state and mocks

twentyhq · Jan 24, 2024 · dd68e85 · dd68e85
1 parent 0063d3e
commit dd68e85
Show file tree

Hide file tree

Showing 8 changed files with 193 additions and 88 deletions.
diff --git a/packages/twenty-front/src/modules/activities/emails/components/MessageThread.tsx b/packages/twenty-front/src/modules/activities/emails/components/MessageThread.tsx
@@ -5,30 +5,30 @@ import { useRecoilState } from 'recoil';
 import { MessageThreadBody } from '@/activities/emails/components/MessageThreadBody';
 import { MessageThreadBodyPreview } from '@/activities/emails/components/MessageThreadBodyPreview';
 import { MessageThreadSender } from '@/activities/emails/components/MessageThreadSender';
-import { EmailUser } from '@/activities/emails/right-drawer/components/RightDrawerThread';
+import { MockedEmailUser } from '@/activities/emails/mocks/mockedThreads';
 import { viewableMessageThreadIdsFamilyState } from '@/activities/emails/state/viewableMessageThreadIdsFamilyState';
 
 const StyledMessageThread = styled.div`
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  padding: 16px 24px;
+  padding: ${({ theme }) => theme.spacing(4, 6)};
 `;
 
 const StyledMessageThreadHeader = styled.div`
   display: flex;
   flex-direction: column;
-  padding-bottom: 8px;
   justify-content: space-between;
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
 `;
 
 type MessageThreadProps = {
   id: string;
   body: string;
   sentAt: string;
-  from: EmailUser;
-  to: EmailUser[];
+  from: MockedEmailUser;
+  to: MockedEmailUser[];
 };
 
 export const MessageThread = ({

diff --git a/packages/twenty-front/src/modules/activities/emails/components/ThreadHeader.tsx b/packages/twenty-front/src/modules/activities/emails/components/ThreadHeader.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 ThreadHeaderProps = {
   subject: string;
-  lastMessageSentAt: Date;
-}
+  lastMessageSentAt: string;
+};
 
 const StyledContainer = styled.div`
   align-items: flex-start;

diff --git a/packages/twenty-front/src/modules/activities/emails/components/ThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/ThreadPreview.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';
@@ -81,16 +80,16 @@ const StyledReceivedAt = styled.div`
 type ThreadPreviewProps = {
   divider?: boolean;
   thread: TimelineThread;
+  onClick: () => void;
 };
 
-export const ThreadPreview = ({ divider, thread }: ThreadPreviewProps) => {
-  const openMessageThreadRightDrawer = useOpenThreadRightDrawer();
-
+export const ThreadPreview = ({
+  divider,
+  thread,
+  onClick,
+}: ThreadPreviewProps) => {
   return (
-    <StyledCardContent
-      onClick={() => openMessageThreadRightDrawer()}
-      divider={divider}
-    >
+    <StyledCardContent onClick={() => onClick()} divider={divider}>
       <StyledHeading unread={!thread.read}>
         <StyledAvatar
           avatarUrl={thread.senderPictureUrl}

diff --git a/packages/twenty-front/src/modules/activities/emails/components/Threads.tsx b/packages/twenty-front/src/modules/activities/emails/components/Threads.tsx
@@ -2,6 +2,11 @@ import { useQuery } from '@apollo/client';
 import styled from '@emotion/styled';
 
 import { ThreadPreview } from '@/activities/emails/components/ThreadPreview';
+import { useThread } from '@/activities/emails/hooks/useThread';
+import {
+  MockedThread,
+  mockedThreads,
+} from '@/activities/emails/mocks/mockedThreads';
 import { getTimelineThreadsFromCompanyId } from '@/activities/emails/queries/getTimelineThreadsFromCompanyId';
 import { getTimelineThreadsFromPersonId } from '@/activities/emails/queries/getTimelineThreadsFromPersonId';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
@@ -12,7 +17,6 @@ import {
 } from '@/ui/display/typography/components/H1Title';
 import { Card } from '@/ui/layout/card/components/Card';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Scalars, TimelineThread } from '~/generated/graphql';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -31,6 +35,8 @@ const StyledEmailCount = styled.span`
 `;
 
 export const Threads = ({ entity }: { entity: ActivityTargetableObject }) => {
+  const { openThread } = useThread();
+
   const threadQuery =
     entity.targetObjectNameSingular === CoreObjectNameSingular.Person
       ? getTimelineThreadsFromPersonId
@@ -49,31 +55,17 @@ export const Threads = ({ entity }: { entity: ActivityTargetableObject }) => {
     return;
   }
 
-  const fetchedTimelineThreads: 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 testTimelineThreads: TimelineThread[] = [
-    {
-      __typename: 'TimelineThread',
-      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:
-        'https://favicon.twenty.com/qonto.com' as Scalars['String'],
-      subject: 'Test email' as Scalars['String'],
-    },
-  ];
+  const timelineThreads = mockedThreads;
 
-  const timelineThreads =
-    fetchedTimelineThreads.length > 0
-      ? fetchedTimelineThreads
-      : testTimelineThreads;
   return (
     <StyledContainer>
       <Section>
@@ -90,11 +82,12 @@ export const Threads = ({ entity }: { entity: ActivityTargetableObject }) => {
         />
         <Card>
           {timelineThreads &&
-            timelineThreads.map((thread: TimelineThread, index: number) => (
+            timelineThreads.map((thread: MockedThread, index: number) => (
               <ThreadPreview
                 key={index}
                 divider={index < timelineThreads.length - 1}
                 thread={thread}
+                onClick={() => openThread(thread)}
               />
             ))}
         </Card>

diff --git a/packages/twenty-front/src/modules/activities/emails/hooks/useThread.ts b/packages/twenty-front/src/modules/activities/emails/hooks/useThread.ts
@@ -0,0 +1,31 @@
+import { useRecoilState, useResetRecoilState } from 'recoil';
+
+import { MockedThread } from '@/activities/emails/mocks/mockedThreads';
+import { useOpenThreadRightDrawer } from '@/activities/emails/right-drawer/hooks/useOpenThreadRightDrawer';
+import { viewableMessageThreadIdsFamilyState } from '@/activities/emails/state/viewableMessageThreadIdsFamilyState';
+import { viewableThreadState } from '@/activities/emails/state/viewableThreadState';
+
+export const useThread = () => {
+  const [viewableThread, setViewableThread] =
+    useRecoilState(viewableThreadState);
+
+  const resetViewableMessageThread = useResetRecoilState(
+    viewableMessageThreadIdsFamilyState(viewableThread?.id ?? ''),
+  );
+
+  const openThredRightDrawer = useOpenThreadRightDrawer();
+
+  const openThread = (thread: MockedThread) => {
+    if (viewableThread?.id !== thread.id) {
+      resetViewableMessageThread();
+    }
+
+    openThredRightDrawer();
+
+    setViewableThread(thread);
+  };
+
+  return {
+    openThread,
+  };
+};
diff --git a/packages/twenty-front/src/modules/activities/emails/mocks/mockedThreads.ts b/packages/twenty-front/src/modules/activities/emails/mocks/mockedThreads.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 mockedThreads: 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<string, MockedMessage[]> = 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/.../twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerThread.tsx b/.../twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerThread.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { DateTime } from 'luxon';
+import { useRecoilValue } from 'recoil';
 
 import { MessageThread } from '@/activities/emails/components/MessageThread';
 import { ThreadHeader } from '@/activities/emails/components/ThreadHeader';
+import { mockedMessagesByThread } from '@/activities/emails/mocks/mockedThreads';
+import { viewableThreadState } from '@/activities/emails/state/viewableThreadState';
 
 const StyledContainer = styled.div`
   box-sizing: border-box;
@@ -15,59 +17,20 @@ const StyledContainer = styled.div`
   position: relative;
 `;
 
-export type EmailUser = {
-  avatarUrl: string;
-  displayName: string;
-  workspaceMemberId?: string;
-  personId?: string;
-};
-
-export type Message = {
-  id: string;
-  from: EmailUser;
-  to: EmailUser[];
-  subject: string;
-  body: string;
-  sentAt: string;
-};
-
 export const RightDrawerThread = () => {
-  const mockedThread = {
-    subject: 'Tes with long subject, very long subject, very long subject',
-    receivedAt: new Date(),
-  };
-
-  const mockedMessages: Message[] = 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.
+  const viewableThread = useRecoilValue(viewableThreadState);
 
-I am adding a new paragraph.
+  if (!viewableThread) {
+    return null;
+  }
 
-Thomas`,
-    sentAt: DateTime.fromFormat('2021-03-12', 'yyyy-MM-dd').toISO() ?? '',
-  }));
+  const mockedMessages = mockedMessagesByThread.get(viewableThread.id) ?? [];
 
   return (
     <StyledContainer>
       <ThreadHeader
-        subject={mockedThread.subject}
-        lastMessageSentAt={mockedThread.receivedAt}
+        subject={viewableThread.subject}
+        lastMessageSentAt={viewableThread.receivedAt}
       />
       {mockedMessages.map((message) => (
         <MessageThread

diff --git a/packages/twenty-front/src/modules/activities/emails/state/viewableThreadState.ts b/packages/twenty-front/src/modules/activities/emails/state/viewableThreadState.ts
@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+
+import { MockedThread } from '@/activities/emails/mocks/mockedThreads';
+
+export const viewableThreadState = atom<MockedThread | null>({
+  key: 'viewableThreadState',
+  default: null,
+});