Fetch viewable thread from apollo cache (#3783)

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

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

@@ -185,7 +185,7 @@ export const EmailThreads = ({
                 key={index}
                 divider={index < timelineThreads.length - 1}
                 thread={thread}
-                onClick={() => openEmailThread(thread)}
+                onClick={() => openEmailThread(thread.id)}
               />
             ))}
           </Card>

packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts

@@ -1,18 +1,19 @@
 import { useRecoilState } from 'recoil';
 
 import { useOpenEmailThreadRightDrawer } from '@/activities/emails/right-drawer/hooks/useOpenEmailThreadRightDrawer';
-import { viewableEmailThreadState } from '@/activities/emails/state/viewableEmailThreadState';
+import { viewableEmailThreadIdState } from '@/activities/emails/state/viewableEmailThreadIdState';
-import { TimelineThread } from '~/generated/graphql';
 
 export const useEmailThread = () => {
-  const [, setViewableEmailThread] = useRecoilState(viewableEmailThreadState);
+  const [, setViewableEmailThreadId] = useRecoilState(
+    viewableEmailThreadIdState,
+  );
 
   const openEmailThredRightDrawer = useOpenEmailThreadRightDrawer();
 
-  const openEmailThread = (thread: TimelineThread) => {
+  const openEmailThread = (threadId: string) => {
     openEmailThredRightDrawer();
 
-    setViewableEmailThread(thread);
+    setViewableEmailThreadId(threadId);
   };
 
   return {

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

@@ -1,15 +1,11 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
 
 import { EmailLoader } from '@/activities/emails/components/EmailLoader';
 import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader';
 import { EmailThreadHeader } from '@/activities/emails/components/EmailThreadHeader';
 import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
-import { viewableEmailThreadState } from '@/activities/emails/state/viewableEmailThreadState';
+import { useRightDrawerEmailThread } from '@/activities/emails/right-drawer/hooks/useRightDrawerEmailThread';
-import { EmailThreadMessage as EmailThreadMessageType } from '@/activities/emails/types/EmailThreadMessage';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 
 const StyledContainer = styled.div`
   box-sizing: border-box;
@@ -22,45 +18,20 @@ const StyledContainer = styled.div`
 `;
 
 export const RightDrawerEmailThread = () => {
-  const viewableEmailThread = useRecoilValue(viewableEmailThreadState);
+  const { thread, messages, fetchMoreMessages, loading } =
+    useRightDrawerEmailThread();
 
-  const {
+  if (!thread) {
-    records: messages,
-    loading: firstQueryLoading,
-    fetchMoreRecords,
-  } = useFindManyRecords<EmailThreadMessageType>({
-    depth: 3,
-    limit: 10,
-    filter: {
-      messageThreadId: {
-        eq: viewableEmailThread?.id,
-      },
-    },
-    objectNameSingular: CoreObjectNameSingular.Message,
-    orderBy: {
-      receivedAt: 'AscNullsLast',
-    },
-    skip: !viewableEmailThread,
-    useRecordsWithoutConnection: true,
-  });
-
-  const fetchMoreMessages = useCallback(() => {
-    if (!firstQueryLoading) {
-      fetchMoreRecords();
-    }
-  }, [fetchMoreRecords, firstQueryLoading]);
-
-  if (!viewableEmailThread) {
     return null;
   }
 
   return (
     <StyledContainer>
       <EmailThreadHeader
-        subject={viewableEmailThread.subject}
+        subject={thread.subject}
-        lastMessageSentAt={viewableEmailThread.lastMessageReceivedAt}
+        lastMessageSentAt={thread.lastMessageReceivedAt}
       />
-      {firstQueryLoading ? (
+      {loading ? (
         <EmailLoader loadingText="Loading thread" />
       ) : (
         <>
@@ -73,7 +44,7 @@ export const RightDrawerEmailThread = () => {
             />
           ))}
           <EmailThreadFetchMoreLoader
-            loading={firstQueryLoading}
+            loading={loading}
             onLastRowVisible={fetchMoreMessages}
           />
         </>

packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useRightDrawerEmailThread.ts

@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+import { useApolloClient } from '@apollo/client';
+import gql from 'graphql-tag';
+import { useRecoilValue } from 'recoil';
+
+import { viewableEmailThreadIdState } from '@/activities/emails/state/viewableEmailThreadIdState';
+import { EmailThreadMessage as EmailThreadMessageType } from '@/activities/emails/types/EmailThreadMessage';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+
+export const useRightDrawerEmailThread = () => {
+  const viewableEmailThreadId = useRecoilValue(viewableEmailThreadIdState);
+
+  const apolloClient = useApolloClient();
+  const thread = apolloClient.readFragment({
+    id: `TimelineThread:${viewableEmailThreadId}`,
+    fragment: gql`
+      fragment timelineThread on TimelineThread {
+        id
+        subject
+        lastMessageReceivedAt
+      }
+    `,
+  });
+
+  const {
+    records: messages,
+    loading,
+    fetchMoreRecords,
+  } = useFindManyRecords<EmailThreadMessageType>({
+    depth: 3,
+    limit: 10,
+    filter: {
+      messageThreadId: {
+        eq: viewableEmailThreadId || '',
+      },
+    },
+    objectNameSingular: CoreObjectNameSingular.Message,
+    orderBy: {
+      receivedAt: 'AscNullsLast',
+    },
+    skip: !viewableEmailThreadId,
+    useRecordsWithoutConnection: true,
+  });
+
+  const fetchMoreMessages = useCallback(() => {
+    if (!loading) {
+      fetchMoreRecords();
+    }
+  }, [fetchMoreRecords, loading]);
+
+  return {
+    thread,
+    messages,
+    loading,
+    fetchMoreMessages,
+  };
+};

packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadIdState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const viewableEmailThreadIdState = atom<string | null>({
+  key: 'viewableEmailThreadIdState',
+  default: null,
+});

packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadState.ts

@@ -1,8 +0,0 @@
-import { atom } from 'recoil';
-
-import { TimelineThread } from '~/generated/graphql';
-
-export const viewableEmailThreadState = atom<TimelineThread | null>({
-  key: 'viewableEmailThreadState',
-  default: null,
-});