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 <thomast@twenty.com>
2024-01-24 14:32:57 +01:00
parent afc36c7329
commit e85f65a195
20 changed files with 404 additions and 71 deletions
--- a/packages/twenty-front/src/modules/activities/emails/mocks/mockedEmailThreads.ts
+++ 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<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() ?? '',
+    })),
+  ],
+]);