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 1edc77b4d..816b63219 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx @@ -6,13 +6,10 @@ import { useRecoilState } from 'recoil'; import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader'; import { EmailThreadPreview } from '@/activities/emails/components/EmailThreadPreview'; import { TIMELINE_THREADS_DEFAULT_PAGE_SIZE } from '@/activities/emails/constants/messaging.constants'; +import { useEmailThreadStates } from '@/activities/emails/hooks/internal/useEmailThreadStates'; 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 { @@ -22,6 +19,7 @@ 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 { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId'; import { GetTimelineThreadsFromPersonIdQueryVariables, TimelineThread, @@ -54,8 +52,13 @@ export const EmailThreads = ({ const { openEmailThread } = useEmailThread(); const { enqueueSnackBar } = useSnackBar(); - const [emailThreadsPage, setEmailThreadsPage] = - useRecoilState(emailThreadsPageState); + const { getEmailThreadsPageState } = useEmailThreadStates({ + emailThreadScopeId: getScopeIdFromComponentId(entity.id), + }); + + const [emailThreadsPage, setEmailThreadsPage] = useRecoilState( + getEmailThreadsPageState(), + ); const [isFetchingMoreEmails, setIsFetchingMoreEmails] = useState(false); @@ -91,7 +94,14 @@ export const EmailThreads = ({ ...emailThreadsPage, hasNextPage: false, })); - return prev; + return { + [queryName]: { + ...prev?.[queryName], + timelineThreads: [ + ...(prev?.[queryName]?.timelineThreads ?? []), + ], + }, + }; } return { diff --git a/packages/twenty-front/src/modules/activities/emails/hooks/internal/useEmailThreadStates.ts b/packages/twenty-front/src/modules/activities/emails/hooks/internal/useEmailThreadStates.ts new file mode 100644 index 000000000..dc40a314d --- /dev/null +++ b/packages/twenty-front/src/modules/activities/emails/hooks/internal/useEmailThreadStates.ts @@ -0,0 +1,22 @@ +import { emailThreadsPageStateScopeMap } from '@/activities/emails/state/emailThreadsPageStateScopeMap'; +import { TabListScopeInternalContext } from '@/ui/layout/tab/scopes/scope-internal-context/TabListScopeInternalContext'; +import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; +import { getState } from '@/ui/utilities/recoil-scope/utils/getState'; + +type useEmailThreadStatesProps = { + emailThreadScopeId?: string; +}; + +export const useEmailThreadStates = ({ + emailThreadScopeId, +}: useEmailThreadStatesProps) => { + const scopeId = useAvailableScopeIdOrThrow( + TabListScopeInternalContext, + emailThreadScopeId, + ); + + return { + scopeId, + getEmailThreadsPageState: getState(emailThreadsPageStateScopeMap, scopeId), + }; +}; diff --git a/packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageState.ts b/packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageState.ts deleted file mode 100644 index 641cf92bb..000000000 --- a/packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageState.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { atom } from 'recoil'; - -export type EmailThreadsPageType = { - pageNumber: number; - hasNextPage: boolean; -}; - -export const emailThreadsPageState = atom({ - key: 'EmailThreadsPageState', - default: { pageNumber: 1, hasNextPage: true }, -}); diff --git a/packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageStateScopeMap.ts b/packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageStateScopeMap.ts new file mode 100644 index 000000000..f7761acc7 --- /dev/null +++ b/packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageStateScopeMap.ts @@ -0,0 +1,12 @@ +import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; + +export type EmailThreadsPageType = { + pageNumber: number; + hasNextPage: boolean; +}; + +export const emailThreadsPageStateScopeMap = + createStateScopeMap({ + key: 'emailThreadsPageStateScopeMap', + defaultValue: { pageNumber: 1, hasNextPage: true }, + });