Introduce ComponentState (#4386)

* Proof of concept ComponentState * Migrate to createState and createFamilyState * Refactor * Fix * Fix tests * Fix lint * Fix tests * Re-enable coverage
2024-03-09 11:31:00 +01:00
parent 17511be0cf
commit 86c0f311f5
451 changed files with 1718 additions and 2557 deletions
--- a/packages/twenty-front/src/modules/activities/comment/stories/Comment.stories.tsx
+++ b/packages/twenty-front/src/modules/activities/comment/stories/Comment.stories.tsx
@ -11,7 +11,7 @@ import { Comment } from '../Comment';
 import { mockComment, mockCommentWithLongValues } from './mock-comment';

 const CommentSetterEffect = () => {
-  const setViewableActivity = useSetRecoilState(viewableActivityIdState);
+  const setViewableActivity = useSetRecoilState(viewableActivityIdState());

  useEffect(() => {
    setViewableActivity('test-id');
--- a/packages/twenty-front/src/modules/activities/comment/stories/CommentHeader.stories.tsx
+++ b/packages/twenty-front/src/modules/activities/comment/stories/CommentHeader.stories.tsx
@ -13,7 +13,7 @@ import { CommentHeader } from '../CommentHeader';
 import { mockComment, mockCommentWithLongValues } from './mock-comment';

 const CommentHeaderSetterEffect = () => {
-  const setViewableActivity = useSetRecoilState(viewableActivityIdState);
+  const setViewableActivity = useSetRecoilState(viewableActivityIdState());

  useEffect(() => {
    setViewableActivity('test-id');
--- a/packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx
@ -118,7 +118,7 @@ export const ActivityBodyEditor = ({
  );

  const [canCreateActivity, setCanCreateActivity] = useRecoilState(
-    canCreateActivityState,
+    canCreateActivityState(),
  );

  const slashMenuItems = getSlashMenu();
--- a/packages/twenty-front/src/modules/activities/components/ActivityComments.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityComments.tsx
@ -61,7 +61,7 @@ export const ActivityComments = ({
    objectNameSingular: CoreObjectNameSingular.Comment,
  });

-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());

  const { records: comments } = useFindManyRecords({
    objectNameSingular: CoreObjectNameSingular.Comment,
--- a/packages/twenty-front/src/modules/activities/components/ActivityEditorEffect.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityEditorEffect.tsx
@ -29,15 +29,15 @@ export const ActivityEditorEffect = ({
    ({ snapshot, set }) =>
      () => {
        const isUpsertingActivityInDB = snapshot
-          .getLoadable(isUpsertingActivityInDBState)
+          .getLoadable(isUpsertingActivityInDBState())
          .getValue();

        const canCreateActivity = snapshot
-          .getLoadable(canCreateActivityState)
+          .getLoadable(canCreateActivityState())
          .getValue();

        const isActivityInCreateMode = snapshot
-          .getLoadable(isActivityInCreateModeState)
+          .getLoadable(isActivityInCreateModeState())
          .getValue();

        const activityFromStore = snapshot
@ -71,7 +71,7 @@ export const ActivityEditorEffect = ({
            deleteActivityFromCache(activity);
          }

-          set(isActivityInCreateModeState, false);
+          set(isActivityInCreateModeState(), false);
        } else if (isNonNullable(activity)) {
          if (
            activity.title !== activityTitle ||
--- a/packages/twenty-front/src/modules/activities/components/ActivityTitle.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityTitle.tsx
@ -71,7 +71,7 @@ export const ActivityTitle = ({ activityId }: ActivityTitleProps) => {
  const activity = activityInStore as Activity;

  const [canCreateActivity, setCanCreateActivity] = useRecoilState(
-    canCreateActivityState,
+    canCreateActivityState(),
  );

  const { upsertActivity } = useUpsertActivity();
--- a/packages/twenty-front/src/modules/activities/emails/hooks/internal/useEmailThreadStates.ts
+++ b/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,
+    ),
  };
 };
--- a/packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts
+++ b/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();
--- 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
@ -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({
--- a/packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageComponentState.ts
+++ b/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 },
+  });
--- a/packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageStateScopeMap.ts
+++ b/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 },
-  });
--- a/packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadIdState.ts
+++ b/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,
 });
--- a/packages/twenty-front/src/modules/activities/files/hooks/useUploadAttachmentFile.tsx
+++ b/packages/twenty-front/src/modules/activities/files/hooks/useUploadAttachmentFile.tsx
@ -10,7 +10,7 @@ import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { FileFolder, useUploadFileMutation } from '~/generated/graphql';

 export const useUploadAttachmentFile = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
  const [uploadFile] = useUploadFileMutation();

  const { createOneRecord: createOneAttachment } =
--- a/packages/twenty-front/src/modules/activities/hooks/tests/useActivityConnectionUtils.test.tsx
+++ b/packages/twenty-front/src/modules/activities/hooks/tests/useActivityConnectionUtils.test.tsx
@ -58,7 +58,7 @@ describe('useActivityConnectionUtils', () => {
        <RecoilRoot
          initializeState={(snapshot) => {
            snapshot.set(
-              objectMetadataItemsState,
+              objectMetadataItemsState(),
              getObjectMetadataItemsMock(),
            );
          }}
@ -86,7 +86,7 @@ describe('useActivityConnectionUtils', () => {
        <RecoilRoot
          initializeState={(snapshot) => {
            snapshot.set(
-              objectMetadataItemsState,
+              objectMetadataItemsState(),
              getObjectMetadataItemsMock(),
            );
          }}
--- a/packages/twenty-front/src/modules/activities/hooks/useActivityTargetObjectRecords.ts
+++ b/packages/twenty-front/src/modules/activities/hooks/useActivityTargetObjectRecords.ts
@ -14,7 +14,7 @@ export const useActivityTargetObjectRecords = ({
 }: {
  activityId: string;
 }) => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState());

  const { records: activityTargets, loading: loadingActivityTargets } =
    useFindManyRecords<ActivityTarget>({
--- a/packages/twenty-front/src/modules/activities/hooks/useCreateActivityInCache.ts
+++ b/packages/twenty-front/src/modules/activities/hooks/useCreateActivityInCache.ts
@ -27,7 +27,7 @@ export const useCreateActivityInCache = () => {
      objectNameSingular: CoreObjectNameSingular.Activity,
    });

-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());

  const { record: currentWorkspaceMemberRecord } = useFindOneRecord({
    objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
--- a/packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts
+++ b/packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts
@ -1,4 +1,4 @@
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useSetRecoilState } from 'recoil';

 import { activityIdInDrawerState } from '@/activities/states/activityIdInDrawerState';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
@ -12,9 +12,9 @@ export const useOpenActivityRightDrawer = () => {
  const { openRightDrawer, isRightDrawerOpen, rightDrawerPage } =
    useRightDrawer();
  const [viewableActivityId, setViewableActivityId] = useRecoilState(
-    viewableActivityIdState,
+    viewableActivityIdState(),
  );
-  const [, setActivityIdInDrawer] = useRecoilState(activityIdInDrawerState);
+  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState());
  const setHotkeyScope = useSetHotkeyScope();

  return (activityId: string) => {
--- a/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts
+++ b/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts
@ -23,21 +23,23 @@ export const useOpenCreateActivityDrawer = () => {

  const { createActivityInCache } = useCreateActivityInCache();

-  const [, setActivityTargetableEntityArray] = useRecoilState(
-    activityTargetableEntityArrayState,
+  const setActivityTargetableEntityArray = useSetRecoilState(
+    activityTargetableEntityArrayState(),
  );
-  const [, setViewableActivityId] = useRecoilState(viewableActivityIdState);
+  const setViewableActivityId = useSetRecoilState(viewableActivityIdState());

-  const setIsCreatingActivity = useSetRecoilState(isActivityInCreateModeState);
+  const setIsCreatingActivity = useSetRecoilState(
+    isActivityInCreateModeState(),
+  );

  const setTemporaryActivityForEditor = useSetRecoilState(
-    temporaryActivityForEditorState,
+    temporaryActivityForEditorState(),
  );

-  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState);
+  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState());

  const [, setIsUpsertingActivityInDB] = useRecoilState(
-    isUpsertingActivityInDBState,
+    isUpsertingActivityInDBState(),
  );

  const openCreateActivityDrawer = async ({
--- a/packages/twenty-front/src/modules/activities/hooks/useUpsertActivity.ts
+++ b/packages/twenty-front/src/modules/activities/hooks/useUpsertActivity.ts
@ -21,7 +21,7 @@ import { isNonNullable } from '~/utils/isNonNullable';
 // TODO: create a generic way to have records only in cache for create mode and delete them afterwards ?
 export const useUpsertActivity = () => {
  const [isActivityInCreateMode, setIsActivityInCreateMode] = useRecoilState(
-    isActivityInCreateModeState,
+    isActivityInCreateModeState(),
  );

  const { updateOneRecord: updateOneActivity } = useUpdateOneRecord<Activity>({
@ -31,10 +31,10 @@ export const useUpsertActivity = () => {
  const { createActivityInDB } = useCreateActivityInDB();

  const [, setIsUpsertingActivityInDB] = useRecoilState(
-    isUpsertingActivityInDBState,
+    isUpsertingActivityInDBState(),
  );

-  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState);
+  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState());

  const objectShowPageTargetableObject = useRecoilValue(
    objectShowPageTargetableObjectState,
--- a/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx
+++ b/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx
@ -34,7 +34,9 @@ export const ActivityTargetInlineCellEditMode = ({
  activity,
  activityTargetWithTargetRecords,
 }: ActivityTargetInlineCellEditModeProps) => {
-  const [isActivityInCreateMode] = useRecoilState(isActivityInCreateModeState);
+  const [isActivityInCreateMode] = useRecoilState(
+    isActivityInCreateModeState(),
+  );

  const selectedTargetObjectIds = activityTargetWithTargetRecords.map(
    (activityTarget) => ({
--- a/packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx
+++ b/packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx
@ -36,13 +36,13 @@ const StyledButtonContainer = styled.div`
 `;

 export const ActivityActionBar = () => {
-  const viewableActivityId = useRecoilValue(viewableActivityIdState);
-  const activityIdInDrawer = useRecoilValue(activityIdInDrawerState);
+  const viewableActivityId = useRecoilValue(viewableActivityIdState());
+  const activityIdInDrawer = useRecoilValue(activityIdInDrawerState());

  const activityTargetableEntityArray = useRecoilValue(
-    activityTargetableEntityArrayState,
+    activityTargetableEntityArrayState(),
  );
-  const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
+  const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState());
  const { deleteOneRecord: deleteOneActivity } = useDeleteOneRecord({
    objectNameSingular: CoreObjectNameSingular.Activity,
  });
@ -54,13 +54,15 @@ export const ActivityActionBar = () => {
  );

  const [temporaryActivityForEditor, setTemporaryActivityForEditor] =
-    useRecoilState(temporaryActivityForEditorState);
+    useRecoilState(temporaryActivityForEditorState());

  const { deleteActivityFromCache } = useDeleteActivityFromCache();

-  const [isActivityInCreateMode] = useRecoilState(isActivityInCreateModeState);
+  const [isActivityInCreateMode] = useRecoilState(
+    isActivityInCreateModeState(),
+  );
  const [isUpsertingActivityInDB] = useRecoilState(
-    isUpsertingActivityInDBState,
+    isUpsertingActivityInDBState(),
  );

  const objectShowPageTargetableObject = useRecoilValue(
--- a/packages/twenty-front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx
+++ b/packages/twenty-front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx
@ -5,7 +5,7 @@ import { viewableActivityIdState } from '@/activities/states/viewableActivityIdS
 import { RightDrawerActivity } from '../RightDrawerActivity';

 export const RightDrawerCreateActivity = () => {
-  const viewableActivityId = useRecoilValue(viewableActivityIdState);
+  const viewableActivityId = useRecoilValue(viewableActivityIdState());

  return (
    <>
--- a/packages/twenty-front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx
+++ b/packages/twenty-front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx
@ -5,7 +5,7 @@ import { viewableActivityIdState } from '@/activities/states/viewableActivityIdS
 import { RightDrawerActivity } from '../RightDrawerActivity';

 export const RightDrawerEditActivity = () => {
-  const viewableActivityId = useRecoilValue(viewableActivityIdState);
+  const viewableActivityId = useRecoilValue(viewableActivityIdState());

  return (
    <>
--- a/packages/twenty-front/src/modules/activities/states/activityBodyFamilyState.ts
+++ b/packages/twenty-front/src/modules/activities/states/activityBodyFamilyState.ts
@ -1,9 +1,9 @@
-import { atomFamily } from 'recoil';
+import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';

-export const activityBodyFamilyState = atomFamily<
+export const activityBodyFamilyState = createFamilyState<
  string,
  { activityId: string }
 >({
  key: 'activityBodyFamilyState',
-  default: '',
+  defaultValue: '',
 });
--- a/packages/twenty-front/src/modules/activities/states/activityIdInDrawerState.ts
+++ b/packages/twenty-front/src/modules/activities/states/activityIdInDrawerState.ts
@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const activityIdInDrawerState = atom<string | null>({
+export const activityIdInDrawerState = createState<string | null>({
  key: 'activityIdInDrawerState',
-  default: null,
+  defaultValue: null,
 });
--- a/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts
+++ b/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts
@ -1,10 +1,10 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

 import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';

-export const activityTargetableEntityArrayState = atom<
+export const activityTargetableEntityArrayState = createState<
  ActivityTargetableObject[]
 >({
  key: 'activities/targetable-entity-array',
-  default: [],
+  defaultValue: [],
 });
--- a/packages/twenty-front/src/modules/activities/states/activityTitleFamilyState.ts
+++ b/packages/twenty-front/src/modules/activities/states/activityTitleFamilyState.ts
@ -1,9 +1,9 @@
-import { atomFamily } from 'recoil';
+import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';

-export const activityTitleFamilyState = atomFamily<
+export const activityTitleFamilyState = createFamilyState<
  string,
  { activityId: string }
 >({
  key: 'activityTitleFamilyState',
-  default: '',
+  defaultValue: '',
 });
--- a/packages/twenty-front/src/modules/activities/states/activityTitleHasBeenSetFamilyState.ts
+++ b/packages/twenty-front/src/modules/activities/states/activityTitleHasBeenSetFamilyState.ts
@ -1,9 +1,9 @@
-import { atomFamily } from 'recoil';
+import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';

-export const activityTitleHasBeenSetFamilyState = atomFamily<
+export const activityTitleHasBeenSetFamilyState = createFamilyState<
  boolean,
  { activityId: string }
 >({
  key: 'activityTitleHasBeenSetFamilyState',
-  default: false,
+  defaultValue: false,
 });
--- a/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts
+++ b/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts
@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const canCreateActivityState = atom<boolean>({
+export const canCreateActivityState = createState<boolean>({
  key: 'canCreateActivityState',
-  default: false,
+  defaultValue: false,
 });
--- a/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts
+++ b/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts
@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const isActivityInCreateModeState = atom<boolean>({
+export const isActivityInCreateModeState = createState<boolean>({
  key: 'isActivityInCreateModeState',
-  default: false,
+  defaultValue: false,
 });
--- a/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts
+++ b/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts
@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const isUpsertingActivityInDBState = atom<boolean>({
+export const isUpsertingActivityInDBState = createState<boolean>({
  key: 'isUpsertingActivityInDBState',
-  default: false,
+  defaultValue: false,
 });
--- a/packages/twenty-front/src/modules/activities/states/targetableObjectsInDrawerState.ts
+++ b/packages/twenty-front/src/modules/activities/states/targetableObjectsInDrawerState.ts
@ -1,8 +1,9 @@
-import { atom } from 'recoil';
-
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const targetableObjectsInDrawerState = atom<ActivityTargetableObject[]>({
+export const targetableObjectsInDrawerState = createState<
+  ActivityTargetableObject[]
+>({
  key: 'targetableObjectsInDrawerState',
-  default: [],
+  defaultValue: [],
 });
--- a/packages/twenty-front/src/modules/activities/states/temporaryActivityForEditorState.ts
+++ b/packages/twenty-front/src/modules/activities/states/temporaryActivityForEditorState.ts
@ -1,8 +1,8 @@
-import { atom } from 'recoil';
-
 import { ActivityForEditor } from '@/activities/types/ActivityForEditor';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const temporaryActivityForEditorState = atom<ActivityForEditor | null>({
-  key: 'temporaryActivityForEditorState',
-  default: null,
-});
+export const temporaryActivityForEditorState =
+  createState<ActivityForEditor | null>({
+    key: 'temporaryActivityForEditorState',
+    defaultValue: null,
+  });
--- a/packages/twenty-front/src/modules/activities/states/viewableActivityIdState.ts
+++ b/packages/twenty-front/src/modules/activities/states/viewableActivityIdState.ts
@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const viewableActivityIdState = atom<string | null>({
+export const viewableActivityIdState = createState<string | null>({
  key: 'activities/viewable-activity-id',
-  default: null,
+  defaultValue: null,
 });
--- a/packages/twenty-front/src/modules/activities/tasks/components/CurrentUserDueTaskCountEffect.tsx
+++ b/packages/twenty-front/src/modules/activities/tasks/components/CurrentUserDueTaskCountEffect.tsx
@ -9,10 +9,10 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { parseDate } from '~/utils/date-utils';

 export const CurrentUserDueTaskCountEffect = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());

  const [currentUserDueTaskCount, setCurrentUserDueTaskCount] = useRecoilState(
-    currentUserDueTaskCountState,
+    currentUserDueTaskCountState(),
  );

  const { records: tasks } = useFindManyRecords({
--- a/packages/twenty-front/src/modules/activities/tasks/hooks/useCurrentUserDueTaskCount.ts
+++ b/packages/twenty-front/src/modules/activities/tasks/hooks/useCurrentUserDueTaskCount.ts
@ -7,7 +7,7 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { parseDate } from '~/utils/date-utils';

 export const useCurrentUserTaskCount = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());

  const { records: tasks } = useFindManyRecords({
    objectNameSingular: CoreObjectNameSingular.Activity,
--- a/packages/twenty-front/src/modules/activities/tasks/states/currentUserTaskCountState.ts
+++ b/packages/twenty-front/src/modules/activities/tasks/states/currentUserTaskCountState.ts
@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const currentUserDueTaskCountState = atom<number>({
-  default: 0,
+export const currentUserDueTaskCountState = createState<number>({
+  defaultValue: 0,
  key: 'currentUserDueTaskCountState',
 });
--- a/packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx
@ -33,7 +33,7 @@ export const Timeline = ({
  targetableObject: ActivityTargetableObject;
 }) => {
  const { initialized, noActivities } = useRecoilValue(
-    timelineActivitiesNetworkingState,
+    timelineActivitiesNetworkingState(),
  );

  const showEmptyState = noActivities;
--- a/packages/twenty-front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx
@ -26,7 +26,7 @@ const StyledScrollWrapper = styled(ScrollWrapper)``;

 export const TimelineItemsContainer = () => {
  const timelineActivitiesForGroup = useRecoilValue(
-    timelineActivitiesForGroupState,
+    timelineActivitiesForGroupState(),
  );

  const groupedActivities = groupActivitiesByMonth(timelineActivitiesForGroup);
--- a/packages/twenty-front/src/modules/activities/timeline/components/TimelineQueryEffect.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline/components/TimelineQueryEffect.tsx
@ -35,10 +35,10 @@ export const TimelineQueryEffect = ({
  });

  const [timelineActivitiesNetworking, setTimelineActivitiesNetworking] =
-    useRecoilState(timelineActivitiesNetworkingState);
+    useRecoilState(timelineActivitiesNetworkingState());

  const [timelineActivitiesForGroup, setTimelineActivitiesForGroup] =
-    useRecoilState(timelineActivitiesForGroupState);
+    useRecoilState(timelineActivitiesForGroupState());

  useEffect(() => {
    if (!isNonNullable(targetableObject)) {
--- a/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesFamilyState.ts
+++ b/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesFamilyState.ts
@ -1,11 +1,10 @@
-import { atomFamily } from 'recoil';
-
 import { Activity } from '@/activities/types/Activity';
+import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';

-export const timelineActivitiesFammilyState = atomFamily<
+export const timelineActivitiesFammilyState = createFamilyState<
  Activity | null,
  string
 >({
  key: 'timelineActivitiesFammilyState',
-  default: null,
+  defaultValue: null,
 });
--- a/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesForGroupState.ts
+++ b/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesForGroupState.ts
@ -1,10 +1,9 @@
-import { atom } from 'recoil';
-
 import { ActivityForActivityGroup } from '@/activities/timeline/utils/groupActivitiesByMonth';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const timelineActivitiesForGroupState = atom<ActivityForActivityGroup[]>(
-  {
-    key: 'timelineActivitiesForGroupState',
-    default: [],
-  },
-);
+export const timelineActivitiesForGroupState = createState<
+  ActivityForActivityGroup[]
+>({
+  key: 'timelineActivitiesForGroupState',
+  defaultValue: [],
+});
--- a/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesNetworkingState.ts
+++ b/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesNetworkingState.ts
@ -1,11 +1,11 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const timelineActivitiesNetworkingState = atom<{
+export const timelineActivitiesNetworkingState = createState<{
  initialized: boolean;
  noActivities: boolean;
 }>({
  key: 'timelineActivitiesNetworkingState',
-  default: {
+  defaultValue: {
    initialized: false,
    noActivities: false,
  },
--- a/packages/twenty-front/src/modules/activities/timeline/states/timelineActivityFirstLevelFamilySelector.ts
+++ b/packages/twenty-front/src/modules/activities/timeline/states/timelineActivityFirstLevelFamilySelector.ts
@ -1,11 +1,10 @@
-import { atomFamily } from 'recoil';
-
 import { Activity } from '@/activities/types/Activity';
+import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';

-export const timelineActivityWithoutTargetsFamilyState = atomFamily<
+export const timelineActivityWithoutTargetsFamilyState = createFamilyState<
  Pick<Activity, 'id' | 'title' | 'createdAt' | 'author' | 'type'> | null,
  string
 >({
  key: 'timelineActivityFirstLevelFamilySelector',
-  default: null,
+  defaultValue: null,
 });