From ea7b9e90c95ce0ad0a00b4b5661082c4e809130b Mon Sep 17 00:00:00 2001
From: Nabhag Motivaras <65061890+Nabhag8848@users.noreply.github.com>
Date: Sat, 31 Aug 2024 17:52:33 +0530
Subject: [PATCH] fix: EmailThreads and Calendar making one extra graphql
 requests even total records are fetched (#6814)

## ISSUE (BUG)
- Closes #5282

## Description
- [x] Email Threads Tab was making two graphql requests
**[GetTimelineThreadsFromCompanyId]** when navigating after a first
render of record page, once only, later it was making only one.
- [x] Similarly Calendar Tab
**[GetTimelineCalendarEventsFromCompanyId]**

### Before


https://github.com/user-attachments/assets/c234b7b4-fe7d-4655-92d6-0a6817fda6b5


### After


https://github.com/user-attachments/assets/80af33c7-b801-4377-a59a-47c43e0fecdd

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../activities/calendar/components/Calendar.tsx   | 15 +++++++++++++--
 .../activities/emails/components/EmailThreads.tsx | 12 +++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx b/packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx
index 5bc8afa21..360eccbbc 100644
--- a/packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx
@@ -63,7 +63,18 @@ export const Calendar = ({
       TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE,
     );
 
-  const { timelineCalendarEvents } = data?.[queryName] ?? {};
+  const { timelineCalendarEvents, totalNumberOfCalendarEvents } =
+    data?.[queryName] ?? {};
+  const hasMoreCalendarEvents =
+    timelineCalendarEvents && totalNumberOfCalendarEvents
+      ? timelineCalendarEvents?.length < totalNumberOfCalendarEvents
+      : false;
+
+  const handleLastRowVisible = async () => {
+    if (hasMoreCalendarEvents) {
+      await fetchMoreRecords();
+    }
+  };
 
   const {
     calendarEventsByDayTime,
@@ -134,7 +145,7 @@ export const Calendar = ({
         })}
         <CustomResolverFetchMoreLoader
           loading={isFetchingMore || firstQueryLoading}
-          onLastRowVisible={fetchMoreRecords}
+          onLastRowVisible={handleLastRowVisible}
         />
       </StyledContainer>
     </CalendarContext.Provider>
diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
index 53038755d..17f44524f 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
@@ -60,6 +60,16 @@ export const EmailThreads = ({
     );
 
   const { totalNumberOfThreads, timelineThreads } = data?.[queryName] ?? {};
+  const hasMoreTimelineThreads =
+    timelineThreads && totalNumberOfThreads
+      ? timelineThreads?.length < totalNumberOfThreads
+      : false;
+
+  const handleLastRowVisible = async () => {
+    if (hasMoreTimelineThreads) {
+      await fetchMoreRecords();
+    }
+  };
 
   if (firstQueryLoading) {
     return <SkeletonLoader />;
@@ -108,7 +118,7 @@ export const EmailThreads = ({
         )}
         <CustomResolverFetchMoreLoader
           loading={isFetchingMore || firstQueryLoading}
-          onLastRowVisible={fetchMoreRecords}
+          onLastRowVisible={handleLastRowVisible}
         />
       </Section>
     </StyledContainer>