Refactor Views by cleaning the code, relying on apolloCache and improving performances (#4516)

* Wip refactoring view

* Post merge conflicts

* Fix review

* Add create view capability

* Fix create object missing view

* Fix tests

packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx

@@ -102,7 +102,7 @@ export const CalendarEventRow = ({
   className,
 }: CalendarEventRowProps) => {
   const theme = useTheme();
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const { displayCurrentEventCursor = false } = useContext(CalendarContext);
   const { openCalendarEventRightDrawer } = useOpenCalendarEventRightDrawer();
 

packages/twenty-front/src/modules/activities/calendar/right-drawer/components/RightDrawerCalendarEvent.tsx

@@ -9,10 +9,10 @@ import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRe
 
 export const RightDrawerCalendarEvent = () => {
   const { setRecords } = useSetRecordInStore();
-  const calendarEventId = useRecoilValue(viewableCalendarEventIdState());
+  const viewableCalendarEventId = useRecoilValue(viewableCalendarEventIdState);
   const { record: calendarEvent } = useFindOneRecord<CalendarEvent>({
     objectNameSingular: CoreObjectNameSingular.CalendarEvent,
-    objectRecordId: calendarEventId ?? '',
+    objectRecordId: viewableCalendarEventId ?? '',
     onCompleted: (record) => setRecords([record]),
   });
 

packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/__tests__/useOpenCalendarEventRightDrawer.test.tsx

@@ -9,9 +9,9 @@ describe('useOpenCalendarEventRightDrawer', () => {
   it('opens the right drawer with the calendar event', () => {
     const { result } = renderHook(
       () => {
-        const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState());
+        const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
         const viewableCalendarEventId = useRecoilValue(
-          viewableCalendarEventIdState(),
+          viewableCalendarEventIdState,
         );
         return {
           ...useOpenCalendarEventRightDrawer(),

packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/useOpenCalendarEventRightDrawer.ts

@@ -10,7 +10,7 @@ export const useOpenCalendarEventRightDrawer = () => {
   const { openRightDrawer } = useRightDrawer();
   const setHotkeyScope = useSetHotkeyScope();
   const setViewableCalendarEventId = useSetRecoilState(
-    viewableCalendarEventIdState(),
+    viewableCalendarEventIdState,
   );
 
   const openCalendarEventRightDrawer = (calendarEventId: string) => {

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');

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');

packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx

@@ -116,7 +116,7 @@ export const ActivityBodyEditor = ({
   );
 
   const [canCreateActivity, setCanCreateActivity] = useRecoilState(
-    canCreateActivityState(),
+    canCreateActivityState,
   );
 
   const [uploadFile] = useUploadFileMutation();
@@ -339,7 +339,7 @@ export const ActivityBodyEditor = ({
       if (
         isDefined(currentBlockContent) &&
         isArray(currentBlockContent) &&
-        currentBlockContent[0] &&
+        isDefined(currentBlockContent[0]) &&
         currentBlockContent[0].type === 'text'
       ) {
         // Text block case

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,

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 (isDefined(activity)) {
           if (
             activity.title !== activityTitle ||

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();

packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx

@@ -122,7 +122,7 @@ export const EmailThreadPreview = ({
           isSameEventThanRightDrawerClose(event.nativeEvent);
 
         const emailThreadIdWhenEmailThreadWasClosed = snapshot
-          .getLoadable(emailThreadIdWhenEmailThreadWasClosedState())
+          .getLoadable(emailThreadIdWhenEmailThreadWasClosedState)
           .getValue();
 
         const canOpen =

packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx

@@ -58,12 +58,12 @@ export const EmailThreads = ({
 }) => {
   const { enqueueSnackBar } = useSnackBar();
 
-  const { getEmailThreadsPageState } = useEmailThreadStates({
+  const { emailThreadsPageState } = useEmailThreadStates({
     emailThreadScopeId: getScopeIdFromComponentId(entity.id),
   });
 
   const [emailThreadsPage, setEmailThreadsPage] = useRecoilState(
-    getEmailThreadsPageState(),
+    emailThreadsPageState,
   );
 
   const [isFetchingMoreEmails, setIsFetchingMoreEmails] = useState(false);

packages/twenty-front/src/modules/activities/emails/hooks/__tests__/useEmailThread.test.tsx

@@ -12,9 +12,9 @@ describe('useEmailThread', () => {
     const { result } = renderHook(
       () => {
         const emailThread = useEmailThread();
-        const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState());
+        const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
         const viewableEmailThreadId = useRecoilValue(
-          viewableEmailThreadIdState(),
+          viewableEmailThreadIdState,
         );
 
         return { ...emailThread, isRightDrawerOpen, viewableEmailThreadId };
@@ -38,10 +38,10 @@ describe('useEmailThread', () => {
       () => {
         const emailThread = useEmailThread();
         const [isRightDrawerOpen, setIsRightDrawerOpen] = useRecoilState(
-          isRightDrawerOpenState(),
+          isRightDrawerOpenState,
         );
         const [viewableEmailThreadId, setViewableEmailThreadId] =
-          useRecoilState(viewableEmailThreadIdState());
+          useRecoilState(viewableEmailThreadIdState);
 
         return {
           ...emailThread,

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

@@ -30,7 +30,7 @@ describe('useEmailThreadStates hook', () => {
     );
 
     expect(result.current.scopeId).toBe(mockScopeId);
-    expect(result.current.getEmailThreadsPageState).toBe(
+    expect(result.current.emailThreadsPageState).toBe(
       mockGetEmailThreadsPageState,
     );
   });

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

@@ -17,7 +17,7 @@ export const useEmailThreadStates = ({
 
   return {
     scopeId,
-    getEmailThreadsPageState: extractComponentState(
+    emailThreadsPageState: extractComponentState(
       emailThreadsPageComponentState,
       scopeId,
     ),

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

@@ -13,21 +13,21 @@ export const useEmailThread = () => {
     ({ snapshot, set }) =>
       (threadId: string) => {
         const isRightDrawerOpen = snapshot
-          .getLoadable(isRightDrawerOpenState())
+          .getLoadable(isRightDrawerOpenState)
           .getValue();
 
         const viewableEmailThreadId = snapshot
-          .getLoadable(viewableEmailThreadIdState())
+          .getLoadable(viewableEmailThreadIdState)
           .getValue();
 
         if (isRightDrawerOpen && viewableEmailThreadId === threadId) {
-          set(viewableEmailThreadIdState(), null);
+          set(viewableEmailThreadIdState, null);
           closeRightDrawer();
           return;
         }
 
         openEmailThredRightDrawer();
-        set(viewableEmailThreadIdState(), threadId);
+        set(viewableEmailThreadIdState, threadId);
       },
     [closeRightDrawer, openEmailThredRightDrawer],
   );

packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx

@@ -34,7 +34,7 @@ export const RightDrawerEmailThread = () => {
     callbackFunction: useRecoilCallback(
       ({ set }) =>
         () => {
-          set(emailThreadIdWhenEmailThreadWasClosedState(), thread.id);
+          set(emailThreadIdWhenEmailThreadWasClosedState, thread.id);
         },
       [thread],
     ),

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/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 } =

packages/twenty-front/src/modules/activities/hooks/__tests__/useActivities.test.tsx

@@ -201,7 +201,7 @@ describe('useActivities', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState(),
+          currentWorkspaceMemberState,
         );
 
         const activities = useActivities({

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

packages/twenty-front/src/modules/activities/hooks/__tests__/useActivityTargetObjectRecords.test.tsx

@@ -186,10 +186,10 @@ describe('useActivityTargetObjectRecords', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState(),
+          currentWorkspaceMemberState,
         );
         const setObjectMetadataItems = useSetRecoilState(
-          objectMetadataItemsState(),
+          objectMetadataItemsState,
         );
 
         const { activityTargetObjectRecords, loadingActivityTargets } =

packages/twenty-front/src/modules/activities/hooks/__tests__/useActivityTargetsForTargetableObject.test.tsx

@@ -102,7 +102,7 @@ describe('useActivityTargetsForTargetableObject', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState(),
+          currentWorkspaceMemberState,
         );
 
         const res = useActivityTargetsForTargetableObject({

packages/twenty-front/src/modules/activities/hooks/__tests__/useAttachRelationInBothDirections.test.tsx

@@ -29,10 +29,10 @@ describe('useAttachRelationInBothDirections', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState(),
+          currentWorkspaceMemberState,
         );
         const setObjectMetadataItems = useSetRecoilState(
-          objectMetadataItemsState(),
+          objectMetadataItemsState,
         );
 
         const res = useAttachRelationInBothDirections();

packages/twenty-front/src/modules/activities/hooks/__tests__/useCreateActivityInCache.test.tsx

@@ -59,10 +59,10 @@ describe('useCreateActivityInCache', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState(),
+          currentWorkspaceMemberState,
         );
         const setObjectMetadataItems = useSetRecoilState(
-          objectMetadataItemsState(),
+          objectMetadataItemsState,
         );
 
         const res = useCreateActivityInCache();

packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenActivityRightDrawer.test.tsx

@@ -18,8 +18,8 @@ describe('useOpenActivityRightDrawer', () => {
     const { result } = renderHook(
       () => {
         const openActivityRightDrawer = useOpenActivityRightDrawer();
-        const viewableActivityId = useRecoilValue(viewableActivityIdState());
-        const activityIdInDrawer = useRecoilValue(activityIdInDrawerState());
+        const viewableActivityId = useRecoilValue(viewableActivityIdState);
+        const activityIdInDrawer = useRecoilValue(activityIdInDrawerState);
         return {
           openActivityRightDrawer,
           activityIdInDrawer,

packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenCreateActivityDrawer.test.tsx

@@ -28,10 +28,10 @@ describe('useOpenCreateActivityDrawer', () => {
     const { result } = renderHook(
       () => {
         const openActivityRightDrawer = useOpenCreateActivityDrawer();
-        const viewableActivityId = useRecoilValue(viewableActivityIdState());
-        const activityIdInDrawer = useRecoilValue(activityIdInDrawerState());
+        const viewableActivityId = useRecoilValue(viewableActivityIdState);
+        const activityIdInDrawer = useRecoilValue(activityIdInDrawerState);
         const setObjectMetadataItems = useSetRecoilState(
-          objectMetadataItemsState(),
+          objectMetadataItemsState,
         );
         return {
           openActivityRightDrawer,

packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenCreateActivityDrawerForSelectedRowIds.test.tsx

@@ -41,10 +41,10 @@ describe('useOpenCreateActivityDrawerForSelectedRowIds', () => {
       () => {
         const openCreateActivityDrawerForSelectedRowIds =
           useOpenCreateActivityDrawerForSelectedRowIds(recordTableId);
-        const viewableActivityId = useRecoilValue(viewableActivityIdState());
-        const activityIdInDrawer = useRecoilValue(activityIdInDrawerState());
+        const viewableActivityId = useRecoilValue(viewableActivityIdState);
+        const activityIdInDrawer = useRecoilValue(activityIdInDrawerState);
         const setObjectMetadataItems = useSetRecoilState(
-          objectMetadataItemsState(),
+          objectMetadataItemsState,
         );
         const scopeId = `${recordTableId}-scope`;
         const setTableRowIds = useSetRecoilState(

packages/twenty-front/src/modules/activities/hooks/__tests__/useUpsertActivity.test.tsx

@@ -105,7 +105,7 @@ describe('useUpsertActivity', () => {
       () => {
         const res = useUpsertActivity();
         const setIsActivityInCreateMode = useSetRecoilState(
-          isActivityInCreateModeState(),
+          isActivityInCreateModeState,
         );
 
         return { ...res, setIsActivityInCreateMode };
@@ -134,7 +134,7 @@ describe('useUpsertActivity', () => {
       () => {
         const res = useUpsertActivity();
         const setIsActivityInCreateMode = useSetRecoilState(
-          isActivityInCreateModeState(),
+          isActivityInCreateModeState,
         );
         const setObjectShowPageTargetableObject = useSetRecoilState(
           objectShowPageTargetableObjectState,

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

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,

packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts

@@ -12,9 +12,9 @@ export const useOpenActivityRightDrawer = () => {
   const { openRightDrawer, isRightDrawerOpen, rightDrawerPage } =
     useRightDrawer();
   const [viewableActivityId, setViewableActivityId] = useRecoilState(
-    viewableActivityIdState(),
+    viewableActivityIdState,
   );
-  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState());
+  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState);
   const setHotkeyScope = useSetHotkeyScope();
 
   return (activityId: string) => {

packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts

@@ -24,22 +24,20 @@ export const useOpenCreateActivityDrawer = () => {
   const { createActivityInCache } = useCreateActivityInCache();
 
   const setActivityTargetableEntityArray = useSetRecoilState(
-    activityTargetableEntityArrayState(),
+    activityTargetableEntityArrayState,
   );
-  const setViewableActivityId = useSetRecoilState(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 ({

packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts

@@ -14,7 +14,7 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = (
 ) => {
   const openCreateActivityDrawer = useOpenCreateActivityDrawer();
 
-  const { getSelectedRowIdsSelector } = useRecordTableStates(recordTableId);
+  const { selectedRowIdsSelector } = useRecordTableStates(recordTableId);
 
   return useRecoilCallback(
     ({ snapshot }) =>
@@ -25,7 +25,7 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = (
       ) => {
         const selectedRowIds = getSnapshotValue(
           snapshot,
-          getSelectedRowIdsSelector(),
+          selectedRowIdsSelector(),
         );
 
         let activityTargetableObjectArray: ActivityTargetableObject[] =
@@ -59,6 +59,6 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = (
           targetableObjects: activityTargetableObjectArray,
         });
       },
-    [openCreateActivityDrawer, getSelectedRowIdsSelector],
+    [selectedRowIdsSelector, openCreateActivityDrawer],
   );
 };

packages/twenty-front/src/modules/activities/hooks/useUpsertActivity.ts

@@ -21,7 +21,7 @@ import { isDefined } from '~/utils/isDefined';
 // 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,

packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx

@@ -34,9 +34,7 @@ export const ActivityTargetInlineCellEditMode = ({
   activity,
   activityTargetWithTargetRecords,
 }: ActivityTargetInlineCellEditModeProps) => {
-  const [isActivityInCreateMode] = useRecoilState(
-    isActivityInCreateModeState(),
-  );
+  const [isActivityInCreateMode] = useRecoilState(isActivityInCreateModeState);
 
   const selectedTargetObjectIds = activityTargetWithTargetRecords.map(
     (activityTarget) => ({

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,15 +54,13 @@ 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(

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

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

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

packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -48,8 +48,8 @@ export const TaskGroups = ({
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 
-  const { getActiveTabIdState } = useTabList(TASKS_TAB_LIST_COMPONENT_ID);
-  const activeTabId = useRecoilValue(getActiveTabIdState());
+  const { activeTabIdState } = useTabList(TASKS_TAB_LIST_COMPONENT_ID);
+  const activeTabId = useRecoilValue(activeTabIdState);
 
   if (!initialized) {
     return <></>;

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,

packages/twenty-front/src/modules/activities/tasks/hooks/useTasks.ts

@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from 'react';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { DateTime } from 'luxon';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { useActivities } from '@/activities/hooks/useActivities';
 import { currentCompletedTaskQueryVariablesState } from '@/activities/tasks/states/currentCompletedTaskQueryVariablesState';
@@ -23,10 +23,12 @@ export const useTasks = ({
   targetableObjects,
   filterDropdownId,
 }: UseTasksProps) => {
-  const { selectedFilter } = useFilterDropdown({
+  const { selectedFilterState } = useFilterDropdown({
     filterDropdownId,
   });
 
+  const selectedFilter = useRecoilValue(selectedFilterState);
+
   const assigneeIdFilter = useMemo(
     () =>
       selectedFilter

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;

packages/twenty-front/src/modules/activities/timeline/components/TimelineCreateButtonGroup.tsx

@@ -16,8 +16,8 @@ export const TimelineCreateButtonGroup = ({
 }: {
   targetableObject: ActivityTargetableObject;
 }) => {
-  const { getActiveTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
-  const setActiveTabId = useSetRecoilState(getActiveTabIdState());
+  const { activeTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
+  const setActiveTabId = useSetRecoilState(activeTabIdState);
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 

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);

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 (!isDefined(targetableObject)) {