Introduce ComponentState (#4386)

* Proof of concept ComponentState

* Migrate to createState and createFamilyState

* Refactor

* Fix

* Fix tests

* Fix lint

* Fix tests

* Re-enable coverage

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

@@ -1,7 +1,7 @@
-import { emailThreadsPageStateScopeMap } from '@/activities/emails/state/emailThreadsPageStateScopeMap';
+import { emailThreadsPageComponentState } from '@/activities/emails/state/emailThreadsPageComponentState';
 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';
+import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 
 type useEmailThreadStatesProps = {
   emailThreadScopeId?: string;
@@ -17,6 +17,9 @@ export const useEmailThreadStates = ({
 
   return {
     scopeId,
-    getEmailThreadsPageState: getState(emailThreadsPageStateScopeMap, scopeId),
+    getEmailThreadsPageState: extractComponentState(
+      emailThreadsPageComponentState,
+      scopeId,
+    ),
   };
 };

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

@@ -1,11 +1,11 @@
-import { useRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 
 import { useOpenEmailThreadRightDrawer } from '@/activities/emails/right-drawer/hooks/useOpenEmailThreadRightDrawer';
 import { viewableEmailThreadIdState } from '@/activities/emails/state/viewableEmailThreadIdState';
 
 export const useEmailThread = () => {
-  const [, setViewableEmailThreadId] = useRecoilState(
-    viewableEmailThreadIdState,
+  const setViewableEmailThreadId = useSetRecoilState(
+    viewableEmailThreadIdState(),
   );
 
   const openEmailThredRightDrawer = useOpenEmailThreadRightDrawer();

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

@@ -9,7 +9,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 
 export const useRightDrawerEmailThread = () => {
-  const viewableEmailThreadId = useRecoilValue(viewableEmailThreadIdState);
+  const viewableEmailThreadId = useRecoilValue(viewableEmailThreadIdState());
 
   const apolloClient = useApolloClient();
   const thread = apolloClient.readFragment({

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

@@ -0,0 +1,12 @@
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export type EmailThreadsPageType = {
+  pageNumber: number;
+  hasNextPage: boolean;
+};
+
+export const emailThreadsPageComponentState =
+  createComponentState<EmailThreadsPageType>({
+    key: 'emailThreadsPageComponentState',
+    defaultValue: { pageNumber: 1, hasNextPage: true },
+  });

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

@@ -1,12 +0,0 @@
-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 },
-  });

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

@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const viewableEmailThreadIdState = atom<string | null>({
+export const viewableEmailThreadIdState = createState<string | null>({
   key: 'viewableEmailThreadIdState',
-  default: null,
+  defaultValue: null,
 });