3263 modify timeline messagingservice to allow the frontend to get multiple participants in a thread (#3611)

* wip

* wip

* add pagination

* wip

* wip

* wip

* update resolver

* wip

* wip

* endpoint is working but there is still work to do

* merge main

* wip

* subject is now first subject

* number of messages is working

* improving query

* fix bug

* fix bug

* added parameter

* pagination introduced a bug

* pagination is working

* fix type

* improve typing

* improve typing

* fix bug

* add displayName

* display displayName in the frontend

* move entities

* fix

* generate metadata

* add avatarUrl

* modify after comments on PR

* updates

* remove email mocks

* remove console log

* move files

* remove mock

* use constant

* use constant

* use fragments

* remove console.log

* generate

* changes made

* update DTO

* generate

packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx

@@ -92,20 +92,22 @@ export const EmailThreadPreview = ({
     <StyledCardContent onClick={() => onClick()} divider={divider}>
       <StyledHeading unread={!thread.read}>
         <StyledAvatar
-          avatarUrl={thread.senderPictureUrl}
-          placeholder={thread.senderName}
+          avatarUrl={thread.firstParticipant.avatarUrl}
+          placeholder={thread.firstParticipant.displayName}
           type="rounded"
         />
-        <StyledSenderName>{thread.senderName}</StyledSenderName>
+        <StyledSenderName>
+          {thread.firstParticipant.displayName}
+        </StyledSenderName>
         <StyledThreadCount>{thread.numberOfMessagesInThread}</StyledThreadCount>
       </StyledHeading>
 
       <StyledSubjectAndBody>
         <StyledSubject unread={!thread.read}>{thread.subject}</StyledSubject>
-        <StyledBody>{thread.body}</StyledBody>
+        <StyledBody>{thread.lastMessageBody}</StyledBody>
       </StyledSubjectAndBody>
       <StyledReceivedAt>
-        {formatToHumanReadableDate(thread.receivedAt)}
+        {formatToHumanReadableDate(thread.lastMessageReceivedAt)}
       </StyledReceivedAt>
     </StyledCardContent>
   );

packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx

@@ -2,11 +2,8 @@ import { useQuery } from '@apollo/client';
 import styled from '@emotion/styled';
 
 import { EmailThreadPreview } from '@/activities/emails/components/EmailThreadPreview';
+import { TIMELINE_THREADS_DEFAULT_PAGE_SIZE } from '@/activities/emails/constants/messaging.constants';
 import { useEmailThread } from '@/activities/emails/hooks/useEmailThread';
-import {
-  mockedEmailThreads,
-  MockedThread,
-} from '@/activities/emails/mocks/mockedEmailThreads';
 import { getTimelineThreadsFromCompanyId } from '@/activities/emails/queries/getTimelineThreadsFromCompanyId';
 import { getTimelineThreadsFromPersonId } from '@/activities/emails/queries/getTimelineThreadsFromPersonId';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
@@ -17,6 +14,7 @@ import {
 } from '@/ui/display/typography/components/H1Title';
 import { Card } from '@/ui/layout/card/components/Card';
 import { Section } from '@/ui/layout/section/components/Section';
+import { TimelineThread } from '~/generated/graphql';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -46,10 +44,13 @@ export const EmailThreads = ({
       ? getTimelineThreadsFromPersonId
       : getTimelineThreadsFromCompanyId;
 
-  const threadQueryVariables =
-    entity.targetObjectNameSingular === CoreObjectNameSingular.Person
+  const threadQueryVariables = {
+    ...(entity.targetObjectNameSingular === CoreObjectNameSingular.Person
       ? { personId: entity.id }
-      : { companyId: entity.id };
+      : { companyId: entity.id }),
+    page: 1,
+    pageSize: TIMELINE_THREADS_DEFAULT_PAGE_SIZE,
+  };
 
   const threads = useQuery(threadQuery, {
     variables: threadQueryVariables,
@@ -59,16 +60,12 @@ export const EmailThreads = ({
     return;
   }
 
-  // To use once the id is returned by the query
-
-  // const fetchedTimelineThreads: TimelineThread[] =
-  //   threads.data[
-  //     entity.targetObjectNameSingular === CoreObjectNameSingular.Person
-  //       ? 'getTimelineThreadsFromPersonId'
-  //       : 'getTimelineThreadsFromCompanyId'
-  //   ];
-
-  const timelineThreads = mockedEmailThreads;
+  const timelineThreads: TimelineThread[] =
+    threads.data[
+      entity.targetObjectNameSingular === CoreObjectNameSingular.Person
+        ? 'getTimelineThreadsFromPersonId'
+        : 'getTimelineThreadsFromCompanyId'
+    ];
 
   return (
     <StyledContainer>
@@ -77,16 +74,14 @@ export const EmailThreads = ({
           title={
             <>
               Inbox{' '}
-              <StyledEmailCount>
-                {timelineThreads && timelineThreads.length}
-              </StyledEmailCount>
+              <StyledEmailCount>{timelineThreads?.length}</StyledEmailCount>
             </>
           }
           fontColor={H1TitleFontColor.Primary}
         />
         <Card>
           {timelineThreads &&
-            timelineThreads.map((thread: MockedThread, index: number) => (
+            timelineThreads.map((thread: TimelineThread, index: number) => (
               <EmailThreadPreview
                 key={index}
                 divider={index < timelineThreads.length - 1}