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/right-drawer/components/RightDrawerEmailThread.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { useCallback } 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 { RightDrawerEmailThreadFetchMoreLoader } from '@/activities/emails/right-drawer/components/RightDrawerEmailThreadFetchMoreLoader';
 import { viewableEmailThreadState } from '@/activities/emails/state/viewableEmailThreadState';
 import { EmailThreadMessage as EmailThreadMessageType } from '@/activities/emails/types/EmailThreadMessage';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { FetchMoreLoader } from '@/ui/utilities/loading-state/components/FetchMoreLoader';
 
 const StyledContainer = styled.div`
   box-sizing: border-box;
@@ -26,9 +26,10 @@ export const RightDrawerEmailThread = () => {
   const {
     records: messages,
     loading,
-    fetchMoreRecords: fetchMoreMessages,
+    fetchMoreRecords,
   } = useFindManyRecords<EmailThreadMessageType>({
     depth: 3,
+    limit: 10,
     filter: {
       messageThreadId: {
         eq: viewableEmailThread?.id,
@@ -42,6 +43,12 @@ export const RightDrawerEmailThread = () => {
     useRecordsWithoutConnection: true,
   });
 
+  const fetchMoreMessages = useCallback(() => {
+    if (!loading) {
+      fetchMoreRecords();
+    }
+  }, [fetchMoreRecords, loading]);
+
   if (!viewableEmailThread) {
     return null;
   }
@@ -60,10 +67,7 @@ export const RightDrawerEmailThread = () => {
           sentAt={message.receivedAt}
         />
       ))}
-      <RightDrawerEmailThreadFetchMoreLoader
-        loading={loading}
-        fetchMoreMessages={fetchMoreMessages}
-      />
+      <FetchMoreLoader loading={loading} onLastRowVisible={fetchMoreMessages} />
     </StyledContainer>
   );
 };

packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThreadFetchMoreLoader.tsx

@@ -1,26 +0,0 @@
-import { useRecoilCallback } from 'recoil';
-
-import { FetchMoreLoader } from '@/ui/utilities/loading-state/components/FetchMoreLoader';
-
-type RightDrawerEmailThreadFetchMoreLoaderProps = {
-  loading: boolean;
-  fetchMoreMessages: () => void;
-};
-
-export const RightDrawerEmailThreadFetchMoreLoader = ({
-  loading,
-  fetchMoreMessages,
-}: RightDrawerEmailThreadFetchMoreLoaderProps) => {
-  const onLastRowVisible = useRecoilCallback(
-    () => async () => {
-      if (!loading) {
-        fetchMoreMessages();
-      }
-    },
-    [fetchMoreMessages, loading],
-  );
-
-  return (
-    <FetchMoreLoader loading={loading} onLastRowVisible={onLastRowVisible} />
-  );
-};