Use scoped recoil state for email thread page (#3699)

Use scoped recoild state for email thread page

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

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<EmailThreadsPageType>(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 {

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),
+  };
+};

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

@@ -1,11 +0,0 @@
-import { atom } from 'recoil';
-
-export type EmailThreadsPageType = {
-  pageNumber: number;
-  hasNextPage: boolean;
-};
-
-export const emailThreadsPageState = atom<EmailThreadsPageType>({
-  key: 'EmailThreadsPageState',
-  default: { pageNumber: 1, hasNextPage: true },
-});

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<EmailThreadsPageType>({
+    key: 'emailThreadsPageStateScopeMap',
+    defaultValue: { pageNumber: 1, hasNextPage: true },
+  });