Build infinite scroll for email threads (#3666)

* Use recoil state for page info

* Remove memoization

* Remove right drawer fetch more loader

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>

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

@@ -1,11 +1,16 @@
+import { useState } from 'react';
 import { useQuery } from '@apollo/client';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
 
 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 { getTimelineThreadsFromCompanyId } from '@/activities/emails/queries/getTimelineThreadsFromCompanyId';
 import { getTimelineThreadsFromPersonId } from '@/activities/emails/queries/getTimelineThreadsFromPersonId';
+import {
+  emailThreadsPageState,
+  EmailThreadsPageType,
+} from '@/activities/emails/state/emailThreadsPageState';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import {
@@ -15,13 +20,19 @@ import {
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Card } from '@/ui/layout/card/components/Card';
 import { Section } from '@/ui/layout/section/components/Section';
-import { TimelineThread } from '~/generated/graphql';
+import { FetchMoreLoader } from '@/ui/utilities/loading-state/components/FetchMoreLoader';
+import {
+  GetTimelineThreadsFromPersonIdQueryVariables,
+  TimelineThread,
+} from '~/generated/graphql';
 
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(6)};
   padding: ${({ theme }) => theme.spacing(6, 6, 2)};
+  height: 100%;
+  overflow: auto;
 `;
 
 const StyledH1Title = styled(H1Title)`
@@ -39,42 +50,75 @@ export const EmailThreads = ({
   entity: ActivityTargetableObject;
 }) => {
   const { openEmailThread } = useEmailThread();
-
   const { enqueueSnackBar } = useSnackBar();
 
-  const threadQuery =
+  const [emailThreadsPage, setEmailThreadsPage] =
+    useRecoilState<EmailThreadsPageType>(emailThreadsPageState);
+
+  const [isFetchingMoreEmails, setIsFetchingMoreEmails] = useState(false);
+
+  const [threadQuery, queryName] =
     entity.targetObjectNameSingular === CoreObjectNameSingular.Person
-      ? getTimelineThreadsFromPersonId
-      : getTimelineThreadsFromCompanyId;
+      ? [getTimelineThreadsFromPersonId, 'getTimelineThreadsFromPersonId']
+      : [getTimelineThreadsFromCompanyId, 'getTimelineThreadsFromCompanyId'];
 
   const threadQueryVariables = {
     ...(entity.targetObjectNameSingular === CoreObjectNameSingular.Person
       ? { personId: entity.id }
       : { companyId: entity.id }),
     page: 1,
-    pageSize: TIMELINE_THREADS_DEFAULT_PAGE_SIZE,
-  };
+    pageSize: 10,
+  } as GetTimelineThreadsFromPersonIdQueryVariables;
 
-  const threads = useQuery(threadQuery, {
+  const { data, loading, fetchMore, error } = useQuery(threadQuery, {
     variables: threadQueryVariables,
   });
 
-  if (threads.error) {
-    enqueueSnackBar(threads.error.message || 'Error loading email threads', {
+  const fetchMoreRecords = async () => {
+    if (emailThreadsPage.hasNextPage && !isFetchingMoreEmails) {
+      setIsFetchingMoreEmails(true);
+
+      await fetchMore({
+        variables: {
+          ...threadQueryVariables,
+          page: emailThreadsPage.pageNumber + 1,
+        },
+        updateQuery: (prev, { fetchMoreResult }) => {
+          if (!fetchMoreResult || !fetchMoreResult?.[queryName].length) {
+            setEmailThreadsPage((emailThreadsPage) => ({
+              ...emailThreadsPage,
+              hasNextPage: false,
+            }));
+            return prev;
+          }
+
+          return {
+            [queryName]: [
+              ...(prev?.[queryName] ?? []),
+              ...(fetchMoreResult?.[queryName] ?? []),
+            ],
+          };
+        },
+      });
+      setEmailThreadsPage((emailThreadsPage) => ({
+        ...emailThreadsPage,
+        pageNumber: emailThreadsPage.pageNumber + 1,
+      }));
+      setIsFetchingMoreEmails(false);
+    }
+  };
+
+  if (error) {
+    enqueueSnackBar(error.message || 'Error loading email threads', {
       variant: 'error',
     });
   }
 
-  if (threads.loading) {
+  if (loading) {
     return;
   }
 
-  const timelineThreads: TimelineThread[] =
-    threads?.data?.[
-      entity.targetObjectNameSingular === CoreObjectNameSingular.Person
-        ? 'getTimelineThreadsFromPersonId'
-        : 'getTimelineThreadsFromCompanyId'
-    ] ?? [];
+  const timelineThreads: TimelineThread[] = data?.[queryName] ?? [];
 
   return (
     <StyledContainer>
@@ -98,6 +142,10 @@ export const EmailThreads = ({
             />
           ))}
         </Card>
+        <FetchMoreLoader
+          loading={isFetchingMoreEmails}
+          onLastRowVisible={fetchMoreRecords}
+        />
       </Section>
     </StyledContainer>
   );