From 8816b7fb3181722d4d3819f25d07e7356091277e Mon Sep 17 00:00:00 2001 From: Thomas Trompette Date: Fri, 2 Feb 2024 14:41:00 +0100 Subject: [PATCH] Fetch viewable thread from apollo cache (#3783) Co-authored-by: Thomas Trompette --- .../emails/components/EmailThreads.tsx | 2 +- .../activities/emails/hooks/useEmailThread.ts | 11 ++-- .../components/RightDrawerEmailThread.tsx | 47 +++------------ .../hooks/useRightDrawerEmailThread.ts | 58 +++++++++++++++++++ .../state/viewableEmailThreadIdState.ts | 6 ++ .../emails/state/viewableEmailThreadState.ts | 8 --- 6 files changed, 80 insertions(+), 52 deletions(-) create mode 100644 packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useRightDrawerEmailThread.ts create mode 100644 packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadIdState.ts delete mode 100644 packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadState.ts 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 c24bf6e7e..acde03676 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx +++ b/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)} /> ))} diff --git a/packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts b/packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts index af5631a16..a0e9bbc85 100644 --- a/packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts +++ b/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 { TimelineThread } from '~/generated/graphql'; +import { viewableEmailThreadIdState } from '@/activities/emails/state/viewableEmailThreadIdState'; 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 { diff --git a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx index 0bcc8fa6b..a59741d15 100644 --- a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx +++ b/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 { EmailThreadMessage as EmailThreadMessageType } from '@/activities/emails/types/EmailThreadMessage'; -import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; -import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; +import { useRightDrawerEmailThread } from '@/activities/emails/right-drawer/hooks/useRightDrawerEmailThread'; 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 { - records: messages, - loading: firstQueryLoading, - fetchMoreRecords, - } = useFindManyRecords({ - 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) { + if (!thread) { return null; } return ( - {firstQueryLoading ? ( + {loading ? ( ) : ( <> @@ -73,7 +44,7 @@ export const RightDrawerEmailThread = () => { /> ))} diff --git a/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useRightDrawerEmailThread.ts b/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useRightDrawerEmailThread.ts new file mode 100644 index 000000000..1dbce6e00 --- /dev/null +++ b/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({ + 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, + }; +}; diff --git a/packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadIdState.ts b/packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadIdState.ts new file mode 100644 index 000000000..73b4a3b89 --- /dev/null +++ b/packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadIdState.ts @@ -0,0 +1,6 @@ +import { atom } from 'recoil'; + +export const viewableEmailThreadIdState = atom({ + key: 'viewableEmailThreadIdState', + default: null, +}); diff --git a/packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadState.ts b/packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadState.ts deleted file mode 100644 index d514958f5..000000000 --- a/packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadState.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { atom } from 'recoil'; - -import { TimelineThread } from '~/generated/graphql'; - -export const viewableEmailThreadState = atom({ - key: 'viewableEmailThreadState', - default: null, -});