Migrate record table to scope map (#3363)

* Migrate record table to scope map

* Update record scope id to record id

* Remove todos and fix edit mode

* Fix perf

* Fix tests

* Fix tests

---------

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

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

@@ -1,22 +1,19 @@
 import { useRecoilCallback } from 'recoil';
 
 import { ActivityType } from '@/activities/types/Activity';
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';
 
 import { useOpenCreateActivityDrawer } from './useOpenCreateActivityDrawer';
 
 export const useOpenCreateActivityDrawerForSelectedRowIds = (
-  recordTableScopeId: string,
+  recordTableId: string,
 ) => {
   const openCreateActivityDrawer = useOpenCreateActivityDrawer();
 
-  const { selectedRowIdsScopeInjector } = getRecordTableScopeInjector();
+  const { selectedRowIdsSelector } = useRecordTableStates(recordTableId);
-
-  const { injectSelectorSnapshotValueWithRecordTableScopeId } =
-    useRecordTableScopedStates(recordTableScopeId);
 
   return useRecoilCallback(
     ({ snapshot }) =>
@@ -25,11 +22,10 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = (
         objectNameSingular: string,
         relatedEntities?: ActivityTargetableObject[],
       ) => {
-        const selectedRowIds =
+        const selectedRowIds = getSnapshotValue(
-          injectSelectorSnapshotValueWithRecordTableScopeId(
+          snapshot,
-            snapshot,
+          selectedRowIdsSelector,
-            selectedRowIdsScopeInjector,
+        );
-          );
 
         let activityTargetableEntityArray: ActivityTargetableObject[] =
           selectedRowIds.map((id: string) => ({
@@ -48,10 +44,6 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = (
           targetableObjects: activityTargetableEntityArray,
         });
       },
-    [
+    [openCreateActivityDrawer, selectedRowIdsSelector],
-      injectSelectorSnapshotValueWithRecordTableScopeId,
-      openCreateActivityDrawer,
-      selectedRowIdsScopeInjector,
-    ],
   );
 };

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

@@ -70,7 +70,7 @@ export const TaskGroups = ({
   const openCreateActivity = useOpenCreateActivityDrawer();
 
   const { activeTabIdState } = useTabList(TASKS_TAB_LIST_COMPONENT_ID);
-  const activeTabId = useRecoilValue(activeTabIdState);
+  const activeTabId = useRecoilValue(activeTabIdState());
 
   if (
     (activeTabId !== 'done' &&

packages/twenty-front/src/modules/object-record/components/RecordTableContainer.tsx

@@ -57,7 +57,7 @@ export const RecordTableContainer = ({
   const viewBarId = objectNamePlural ?? '';
 
   const { setTableFilters, setTableSorts, setTableColumns } = useRecordTable({
-    recordTableScopeId: recordTableId,
+    recordTableId,
   });
 
   const updateEntity = ({ variables }: RecordUpdateHookParams) => {
@@ -69,7 +69,7 @@ export const RecordTableContainer = ({
 
   const handleImport = () => {
     const openImport =
-      recordTableId === 'companies'
+      objectNamePlural === 'companies'
         ? openCompanySpreadsheetImport
         : openPersonSpreadsheetImport;
     openImport();
@@ -104,9 +104,14 @@ export const RecordTableContainer = ({
           }}
         />
       </SpreadsheetImportProvider>
-      <RecordTableEffect recordTableId={recordTableId} viewBarId={viewBarId} />
+      <RecordTableEffect
+        objectNamePlural={objectNamePlural}
+        recordTableId={recordTableId}
+        viewBarId={viewBarId}
+      />
       <RecordTableWithWrappers
         recordTableId={recordTableId}
+        objectNamePlural={objectNamePlural}
         viewBarId={viewBarId}
         updateRecordMutation={updateEntity}
         createRecord={createRecord}

packages/twenty-front/src/modules/object-record/components/RecordTableEffect.tsx

@@ -10,19 +10,24 @@ import { useViewBar } from '@/views/hooks/useViewBar';
 import { ViewType } from '@/views/types/ViewType';
 
 export const RecordTableEffect = ({
+  objectNamePlural,
   recordTableId,
   viewBarId,
 }: {
+  objectNamePlural: string;
   recordTableId: string;
   viewBarId: string;
 }) => {
   const {
-    // Todo: do not infer objectNamePlural from recordTableId
-    scopeId: objectNamePlural,
     setAvailableTableColumns,
     setOnEntityCountChange,
     setObjectMetadataConfig,
-  } = useRecordTable({ recordTableScopeId: recordTableId });
+    setObjectNamePlural,
+  } = useRecordTable({ recordTableId });
+
+  useEffect(() => {
+    setObjectNamePlural(objectNamePlural);
+  }, [setObjectNamePlural, objectNamePlural]);
 
   const { objectNameSingular } = useObjectNameSingularFromPlural({
     objectNamePlural,
@@ -93,7 +98,8 @@ export const RecordTableEffect = ({
 
   const { setActionBarEntries, setContextMenuEntries } =
     useRecordTableContextMenuEntries({
-      recordTableScopeId: recordTableId,
+      objectNamePlural,
+      recordTableId,
     });
 
   useEffect(() => {

packages/twenty-front/src/modules/object-record/hooks/__tests__/useObjectRecordTable.test.tsx

@@ -5,24 +5,37 @@ import { renderHook } from '@testing-library/react';
 import { RecoilRoot } from 'recoil';
 
 import { useObjectRecordTable } from '@/object-record/hooks/useObjectRecordTable';
+import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
+import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
 
-const recordTableScopeId = 'people';
+const recordTableId = 'people';
 const onColumnsChange = jest.fn();
 
-const Wrapper = ({ children }: { children: ReactNode }) => (
+const ObjectNamePluralSetter = ({ children }: { children: ReactNode }) => {
-  <RecoilRoot>
+  const { setObjectNamePlural } = useRecordTable({ recordTableId });
-    <RecordTableScope
+  setObjectNamePlural('people');
-      recordTableScopeId={recordTableScopeId}
+
-      onColumnsChange={onColumnsChange}
+  return <>{children}</>;
-    >
+};
-      <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+
-        <MockedProvider addTypename={false}>{children}</MockedProvider>
+const Wrapper = ({ children }: { children: ReactNode }) => {
-      </SnackBarProviderScope>
+  return (
-    </RecordTableScope>
+    <RecoilRoot>
-  </RecoilRoot>
+      <ObjectNamePluralSetter>
-);
+        <RecordTableScope
+          recordTableScopeId={getScopeIdFromComponentId(recordTableId) ?? ''}
+          onColumnsChange={onColumnsChange}
+        >
+          <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+            <MockedProvider addTypename={false}>{children}</MockedProvider>
+          </SnackBarProviderScope>
+        </RecordTableScope>
+      </ObjectNamePluralSetter>
+    </RecoilRoot>
+  );
+};
 
 describe('useObjectRecordTable', () => {
   it('should skip fetch if currentWorkspace is undefined', async () => {

packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts

@@ -5,16 +5,15 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
 import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { signInBackgroundMockCompanies } from '@/sign-in-background-mock/constants/signInBackgroundMockCompanies';
 
 import { useFindManyRecords } from './useFindManyRecords';
 
 export const useObjectRecordTable = () => {
   const {
-    scopeId: objectNamePlural,
+    objectNamePlural,
     setRecordTableData,
     setIsRecordTableInitialLoading,
   } = useRecordTable();
@@ -30,29 +29,12 @@ export const useObjectRecordTable = () => {
     },
   );
 
-  const {
+  const { tableFiltersState, tableSortsState, tableLastRowVisibleState } =
-    tableFiltersScopeInjector,
+    useRecordTableStates();
-    tableSortsScopeInjector,
-    tableLastRowVisibleScopeInjector,
-  } = getRecordTableScopeInjector();
 
-  const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates();
+  const tableFilters = useRecoilValue(tableFiltersState());
-
+  const tableSorts = useRecoilValue(tableSortsState());
-  const tableFiltersState = injectStateWithRecordTableScopeId(
+  const setLastRowVisible = useSetRecoilState(tableLastRowVisibleState());
-    tableFiltersScopeInjector,
-  );
-
-  const tableSortsState = injectStateWithRecordTableScopeId(
-    tableSortsScopeInjector,
-  );
-
-  const tableLastRowVisibleState = injectStateWithRecordTableScopeId(
-    tableLastRowVisibleScopeInjector,
-  );
-
-  const tableFilters = useRecoilValue(tableFiltersState);
-  const tableSorts = useRecoilValue(tableSortsState);
-  const setLastRowVisible = useSetRecoilState(tableLastRowVisibleState);
 
   const requestFilters = turnObjectDropdownFilterIntoQueryFilter(
     tableFilters,

packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx

@@ -8,10 +8,8 @@ import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObje
 import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState';
 import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
 import { useExecuteQuickActionOnOneRecord } from '@/object-record/hooks/useExecuteQuickActionOnOneRecord';
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
-import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import {
   IconCheckbox,
   IconClick,
@@ -25,55 +23,37 @@ import {
 import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
 import { contextMenuEntriesState } from '@/ui/navigation/context-menu/states/contextMenuEntriesState';
 import { ContextMenuEntry } from '@/ui/navigation/context-menu/types/ContextMenuEntry';
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 
 type useRecordTableContextMenuEntriesProps = {
-  recordTableScopeId?: string;
+  objectNamePlural: string;
+  recordTableId: string;
 };
 
 // TODO: refactor this
 export const useRecordTableContextMenuEntries = (
-  props?: useRecordTableContextMenuEntriesProps,
+  props: useRecordTableContextMenuEntriesProps,
 ) => {
-  const scopeId = useAvailableScopeIdOrThrow(
-    RecordTableScopeInternalContext,
-    props?.recordTableScopeId,
-  );
-
   const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
   const setActionBarEntriesState = useSetRecoilState(actionBarEntriesState);
 
-  const { selectedRowIdsScopeInjector } = getRecordTableScopeInjector();
+  const { selectedRowIdsSelector } = useRecordTableStates(props?.recordTableId);
-
-  const {
-    injectSelectorWithRecordTableScopeId,
-    injectSelectorSnapshotValueWithRecordTableScopeId,
-  } = useRecordTableScopedStates(scopeId);
-
-  const selectedRowIdsSelector = injectSelectorWithRecordTableScopeId(
-    selectedRowIdsScopeInjector,
-  );
 
   const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
 
   const { resetTableRowSelection } = useRecordTable({
-    recordTableScopeId: scopeId,
+    recordTableId: props?.recordTableId,
   });
 
-  const objectNamePlural = scopeId;
-
   const { objectNameSingular } = useObjectNameSingularFromPlural({
-    objectNamePlural,
+    objectNamePlural: props.objectNamePlural,
   });
 
   const { createFavorite, favorites, deleteFavorite } = useFavorites();
 
   const handleFavoriteButtonClick = useRecoilCallback(({ snapshot }) => () => {
-    const selectedRowIds = injectSelectorSnapshotValueWithRecordTableScopeId(
+    const selectedRowIds = getSnapshotValue(snapshot, selectedRowIdsSelector);
-      snapshot,
-      selectedRowIdsScopeInjector,
-    );
 
     const selectedRowId = selectedRowIds.length === 1 ? selectedRowIds[0] : '';
 
@@ -107,31 +87,24 @@ export const useRecordTableContextMenuEntries = (
   const handleDeleteClick = useRecoilCallback(
     ({ snapshot }) =>
       async () => {
-        const rowIdsToDelete =
+        const rowIdsToDelete = getSnapshotValue(
-          injectSelectorSnapshotValueWithRecordTableScopeId(
+          snapshot,
-            snapshot,
+          selectedRowIdsSelector,
-            selectedRowIdsScopeInjector,
+        );
-          );
 
         resetTableRowSelection();
         await deleteManyRecords(rowIdsToDelete);
       },
-    [
+    [deleteManyRecords, resetTableRowSelection, selectedRowIdsSelector],
-      deleteManyRecords,
-      injectSelectorSnapshotValueWithRecordTableScopeId,
-      resetTableRowSelection,
-      selectedRowIdsScopeInjector,
-    ],
   );
 
   const handleExecuteQuickActionOnClick = useRecoilCallback(
     ({ snapshot }) =>
       async () => {
-        const rowIdsToExecuteQuickActionOn =
+        const rowIdsToExecuteQuickActionOn = getSnapshotValue(
-          injectSelectorSnapshotValueWithRecordTableScopeId(
+          snapshot,
-            snapshot,
+          selectedRowIdsSelector,
-            selectedRowIdsScopeInjector,
+        );
-          );
 
         resetTableRowSelection();
         await Promise.all(
@@ -142,9 +115,8 @@ export const useRecordTableContextMenuEntries = (
       },
     [
       executeQuickActionOnOneRecord,
-      injectSelectorSnapshotValueWithRecordTableScopeId,
       resetTableRowSelection,
-      selectedRowIdsScopeInjector,
+      selectedRowIdsSelector,
     ],
   );
 
@@ -152,8 +124,9 @@ export const useRecordTableContextMenuEntries = (
     'IS_QUICK_ACTIONS_ENABLED',
   );
 
-  const openCreateActivityDrawer =
+  const openCreateActivityDrawer = useOpenCreateActivityDrawerForSelectedRowIds(
-    useOpenCreateActivityDrawerForSelectedRowIds(scopeId);
+    props.recordTableId,
+  );
 
   return {
     setContextMenuEntries: useCallback(() => {

packages/twenty-front/src/modules/object-record/record-table/action-bar/components/RecordTableActionBar.tsx

@@ -1,7 +1,6 @@
 import { useRecoilValue } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { ActionBar } from '@/ui/navigation/action-bar/components/ActionBar';
 
 export const RecordTableActionBar = ({
@@ -9,14 +8,7 @@ export const RecordTableActionBar = ({
 }: {
   recordTableId: string;
 }) => {
-  const { selectedRowIdsScopeInjector } = getRecordTableScopeInjector();
+  const { selectedRowIdsSelector } = useRecordTableStates(recordTableId);
-
-  const { injectSelectorWithRecordTableScopeId } =
-    useRecordTableScopedStates(recordTableId);
-
-  const selectedRowIdsSelector = injectSelectorWithRecordTableScopeId(
-    selectedRowIdsScopeInjector,
-  );
 
   const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
 

packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx

@@ -1,10 +1,13 @@
 import { useContext } from 'react';
 import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
 
 import { RecordTableBody } from '@/object-record/record-table/components/RecordTableBody';
 import { RecordTableBodyEffect } from '@/object-record/record-table/components/RecordTableBodyEffect';
 import { RecordTableHeader } from '@/object-record/record-table/components/RecordTableHeader';
 import { RecordTableRefContext } from '@/object-record/record-table/contexts/RecordTableRefContext';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
 import { rgba } from '@/ui/theme/constants/colors';
 
 const StyledTable = styled.table`
@@ -95,17 +98,38 @@ const StyledTable = styled.table`
 `;
 
 type RecordTableProps = {
+  recordTableId: string;
+  onColumnsChange: (columns: any) => void;
   createRecord: () => void;
 };
 
-export const RecordTable = ({ createRecord }: RecordTableProps) => {
+export const RecordTable = ({
+  recordTableId,
+  onColumnsChange,
+  createRecord,
+}: RecordTableProps) => {
   const recordTableRef = useContext(RecordTableRefContext);
+  const { scopeId, objectNamePluralState } =
+    useRecordTableStates(recordTableId);
+
+  const objectNamePlural = useRecoilValue(objectNamePluralState());
 
   return (
-    <StyledTable ref={recordTableRef} className="entity-table-cell">
+    <RecordTableScope
-      <RecordTableHeader createRecord={createRecord} />
+      recordTableScopeId={scopeId}
-      <RecordTableBodyEffect />
+      onColumnsChange={onColumnsChange}
-      <RecordTableBody />
+    >
-    </StyledTable>
+      <>
+        {objectNamePlural ? (
+          <StyledTable ref={recordTableRef} className="entity-table-cell">
+            <RecordTableHeader createRecord={createRecord} />
+            <RecordTableBodyEffect />
+            <RecordTableBody />
+          </StyledTable>
+        ) : (
+          <></>
+        )}
+      </>
+    </RecordTableScope>
   );
 };

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx

@@ -4,19 +4,12 @@ import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/com
 import { RecordTableRow } from '@/object-record/record-table/components/RecordTableRow';
 import { RowIdContext } from '@/object-record/record-table/contexts/RowIdContext';
 import { RowIndexContext } from '@/object-record/record-table/contexts/RowIndexContext';
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 
 export const RecordTableBody = () => {
-  const { tableRowIdsScopeInjector } = getRecordTableScopeInjector();
+  const { tableRowIdsState } = useRecordTableStates();
 
-  const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates();
+  const tableRowIds = useRecoilValue(tableRowIdsState());
-
-  const tableRowIdsState = injectStateWithRecordTableScopeId(
-    tableRowIdsScopeInjector,
-  );
-
-  const tableRowIds = useRecoilValue(tableRowIdsState);
 
   return (
     <>

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx

@@ -2,8 +2,7 @@ import { useEffect } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { useObjectRecordTable } from '@/object-record/hooks/useObjectRecordTable';
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
 
 export const RecordTableBodyEffect = () => {
@@ -15,16 +14,10 @@ export const RecordTableBodyEffect = () => {
     loading,
   } = useObjectRecordTable();
 
-  const { tableLastRowVisibleScopeInjector } = getRecordTableScopeInjector();
+  const { tableLastRowVisibleState } = useRecordTableStates();
-
-  const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates();
-
-  const tableLastRowVisibleState = injectStateWithRecordTableScopeId(
-    tableLastRowVisibleScopeInjector,
-  );
 
   const [tableLastRowVisible, setTableLastRowVisible] = useRecoilState(
-    tableLastRowVisibleState,
+    tableLastRowVisibleState(),
   );
 
   const isFetchingMoreObjects = useRecoilValue(

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellContainer.tsx

@@ -1,8 +1,7 @@
 import { useContext } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { contextMenuIsOpenState } from '@/ui/navigation/context-menu/states/contextMenuIsOpenState';
 import { contextMenuPositionState } from '@/ui/navigation/context-menu/states/contextMenuPositionState';
@@ -26,13 +25,9 @@ export const RecordTableCellContainer = ({
   const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
   const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
   const currentRowId = useContext(RowIdContext);
-  const { objectMetadataConfigScopeInjector } = getRecordTableScopeInjector();
+  const { objectMetadataConfigState } = useRecordTableStates();
 
-  const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates();
+  const objectMetadataConfig = useRecoilValue(objectMetadataConfigState());
-
-  const objectMetadataConfig = useRecoilValue(
-    injectStateWithRecordTableScopeId(objectMetadataConfigScopeInjector),
-  );
 
   const { setCurrentRowSelected } = useCurrentRowSelected();
 

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx

@@ -3,13 +3,11 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { RecordTableHeaderCell } from '@/object-record/record-table/components/RecordTableHeaderCell';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { IconPlus } from '@/ui/display/icon';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScrollWrapperScopedRef';
 
-import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
-
 import { RecordTableHeaderPlusButtonContent } from './RecordTableHeaderPlusButtonContent';
 import { SelectAllCheckbox } from './SelectAllCheckbox';
 
@@ -58,18 +56,8 @@ export const RecordTableHeader = ({
 }: {
   createRecord: () => void;
 }) => {
-  const { hiddenTableColumnsScopeInjector, visibleTableColumnsScopeInjector } =
+  const { hiddenTableColumnsSelector, visibleTableColumnsSelector } =
-    getRecordTableScopeInjector();
+    useRecordTableStates();
-
-  const { injectSelectorWithRecordTableScopeId } = useRecordTableScopedStates();
-
-  const hiddenTableColumnsSelector = injectSelectorWithRecordTableScopeId(
-    hiddenTableColumnsScopeInjector,
-  );
-
-  const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId(
-    visibleTableColumnsScopeInjector,
-  );
 
   const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);
 

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx

@@ -3,13 +3,13 @@ import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
 
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { IconPlus } from '@/ui/display/icon';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown';
 
@@ -81,39 +81,17 @@ export const RecordTableHeaderCell = ({
   createRecord: () => void;
 }) => {
   const {
-    resizeFieldOffsetScopeInjector,
+    resizeFieldOffsetState,
-    tableColumnsScopeInjector,
+    tableColumnsState,
-    tableColumnsByKeyScopeInjector,
+    tableColumnsByKeySelector,
-    visibleTableColumnsScopeInjector,
+    visibleTableColumnsSelector,
-  } = getRecordTableScopeInjector();
+  } = useRecordTableStates();
-
-  const {
-    injectStateWithRecordTableScopeId,
-    injectSelectorWithRecordTableScopeId,
-    injectSnapshotValueWithRecordTableScopeId,
-  } = useRecordTableScopedStates();
-
-  const resizeFieldOffsetState = injectStateWithRecordTableScopeId(
-    resizeFieldOffsetScopeInjector,
-  );
 
   const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState(
-    resizeFieldOffsetState,
+    resizeFieldOffsetState(),
   );
 
-  const tableColumnsState = injectStateWithRecordTableScopeId(
+  const tableColumns = useRecoilValue(tableColumnsState());
-    tableColumnsScopeInjector,
-  );
-
-  const tableColumnsByKeySelector = injectSelectorWithRecordTableScopeId(
-    tableColumnsByKeyScopeInjector,
-  );
-
-  const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId(
-    visibleTableColumnsScopeInjector,
-  );
-
-  const tableColumns = useRecoilValue(tableColumnsState);
   const tableColumnsByKey = useRecoilValue(tableColumnsByKeySelector);
   const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
 
@@ -147,9 +125,9 @@ export const RecordTableHeaderCell = ({
       async () => {
         if (!resizedFieldKey) return;
 
-        const resizeFieldOffset = injectSnapshotValueWithRecordTableScopeId(
+        const resizeFieldOffset = getSnapshotValue(
           snapshot,
-          resizeFieldOffsetScopeInjector,
+          resizeFieldOffsetState(),
         );
 
         const nextWidth = Math.round(
@@ -159,7 +137,7 @@ export const RecordTableHeaderCell = ({
           ),
         );
 
-        set(resizeFieldOffsetState, 0);
+        set(resizeFieldOffsetState(), 0);
         setInitialPointerPositionX(null);
         setResizedFieldKey(null);
 
@@ -175,8 +153,6 @@ export const RecordTableHeaderCell = ({
       },
     [
       resizedFieldKey,
-      injectSnapshotValueWithRecordTableScopeId,
-      resizeFieldOffsetScopeInjector,
       tableColumnsByKey,
       resizeFieldOffsetState,
       tableColumns,

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { IconSettings } from '@/ui/display/icon';
 import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -12,20 +12,13 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 import { FieldMetadata } from '../../field/types/FieldMetadata';
-import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
 import { useTableColumns } from '../hooks/useTableColumns';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
 export const RecordTableHeaderPlusButtonContent = () => {
   const { closeDropdown } = useDropdown();
 
-  const { hiddenTableColumnsScopeInjector } = getRecordTableScopeInjector();
+  const { hiddenTableColumnsSelector } = useRecordTableStates();
-
-  const { injectSelectorWithRecordTableScopeId } = useRecordTableScopedStates();
-
-  const hiddenTableColumnsSelector = injectSelectorWithRecordTableScopeId(
-    hiddenTableColumnsScopeInjector,
-  );
 
   const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);
 

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx

@@ -7,14 +7,16 @@ import {
 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 type RecordTableInternalEffectProps = {
+  recordTableId: string;
   tableBodyRef: React.RefObject<HTMLDivElement>;
 };
 
 export const RecordTableInternalEffect = ({
+  recordTableId,
   tableBodyRef,
 }: RecordTableInternalEffectProps) => {
   const { leaveTableFocus, resetTableRowSelection, useMapKeyboardToSoftFocus } =
-    useRecordTable();
+    useRecordTable({ recordTableId });
 
   useMapKeyboardToSoftFocus();
 

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx

@@ -4,11 +4,10 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { RecordTableCellContainer } from '@/object-record/record-table/components/RecordTableCellContainer';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper';
 
 import { ColumnContext } from '../contexts/ColumnContext';
-import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
 import { useCurrentRowSelected } from '../record-table-row/hooks/useCurrentRowSelected';
 
 import { CheckboxCell } from './CheckboxCell';
@@ -27,13 +26,7 @@ const StyledPlaceholder = styled.td`
 `;
 
 export const RecordTableRow = ({ rowId }: RecordTableRowProps) => {
-  const { visibleTableColumnsScopeInjector } = getRecordTableScopeInjector();
+  const { visibleTableColumnsSelector } = useRecordTableStates();
-
-  const { injectSelectorWithRecordTableScopeId } = useRecordTableScopedStates();
-
-  const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId(
-    visibleTableColumnsScopeInjector,
-  );
 
   const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
 

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx

@@ -9,8 +9,7 @@ import { RecordTable } from '@/object-record/record-table/components/RecordTable
 import { RecordTableFirstColumnScrollObserver } from '@/object-record/record-table/components/RecordTableFirstColumnScrollObserver';
 import { RecordTableRefContextWrapper } from '@/object-record/record-table/components/RecordTableRefContext';
 import { EntityDeleteContext } from '@/object-record/record-table/contexts/EntityDeleteHookContext';
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { IconPlus } from '@/ui/display/icon';
 import { Button } from '@/ui/input/button/components/Button';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
@@ -20,7 +19,6 @@ import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinit
 
 import { RecordUpdateContext } from '../contexts/EntityUpdateMutationHookContext';
 import { useRecordTable } from '../hooks/useRecordTable';
-import { RecordTableScope } from '../scopes/RecordTableScope';
 
 import { RecordTableInternalEffect } from './RecordTableInternalEffect';
 
@@ -68,6 +66,7 @@ const StyledTableContainer = styled.div`
 `;
 
 type RecordTableWithWrappersProps = {
+  objectNamePlural: string;
   recordTableId: string;
   viewBarId: string;
   updateRecordMutation: (params: any) => void;
@@ -77,39 +76,23 @@ type RecordTableWithWrappersProps = {
 export const RecordTableWithWrappers = ({
   updateRecordMutation,
   createRecord,
+  objectNamePlural,
   recordTableId,
   viewBarId,
 }: RecordTableWithWrappersProps) => {
   const tableBodyRef = useRef<HTMLDivElement>(null);
 
-  const {
+  const { numberOfTableRowsState, isRecordTableInitialLoadingState } =
-    numberOfTableRowsScopeInjector,
+    useRecordTableStates(recordTableId);
-    isRecordTableInitialLoadingScopeInjector,
-  } = getRecordTableScopeInjector();
 
-  const { injectStateWithRecordTableScopeId } =
+  const numberOfTableRows = useRecoilValue(numberOfTableRowsState());
-    useRecordTableScopedStates(recordTableId);
-
-  const numberOfTableRowsState = injectStateWithRecordTableScopeId(
-    numberOfTableRowsScopeInjector,
-  );
-
-  const isRecordTableInitialLoadingState = injectStateWithRecordTableScopeId(
-    isRecordTableInitialLoadingScopeInjector,
-  );
-
-  const numberOfTableRows = useRecoilValue(numberOfTableRowsState);
 
   const isRecordTableInitialLoading = useRecoilValue(
-    isRecordTableInitialLoadingState,
+    isRecordTableInitialLoadingState(),
   );
 
-  const {
+  const { resetTableRowSelection, setRowSelectedState } = useRecordTable({
-    scopeId: objectNamePlural,
+    recordTableId,
-    resetTableRowSelection,
-    setRowSelectedState,
-  } = useRecordTable({
-    recordTableScopeId: recordTableId,
   });
 
   const { objectNameSingular } = useObjectNameSingularFromPlural({
@@ -127,50 +110,54 @@ export const RecordTableWithWrappers = ({
   const { deleteOneRecord } = useDeleteOneRecord({ objectNameSingular });
 
   return (
-    <RecordTableScope
+    <EntityDeleteContext.Provider value={deleteOneRecord}>
-      recordTableScopeId={recordTableId}
+      <ScrollWrapper>
-      onColumnsChange={useRecoilCallback(() => (columns) => {
+        <RecordTableRefContextWrapper>
-        persistViewFields(mapColumnDefinitionsToViewFields(columns));
+          <RecordTableFirstColumnScrollObserver />
-      })}
+          <RecordUpdateContext.Provider value={updateRecordMutation}>
-    >
+            <StyledTableWithHeader>
-      <EntityDeleteContext.Provider value={deleteOneRecord}>
+              <StyledTableContainer>
-        <ScrollWrapper>
+                <div ref={tableBodyRef}>
-          <RecordTableRefContextWrapper>
+                  <RecordTable
-            <RecordTableFirstColumnScrollObserver />
+                    recordTableId={recordTableId}
-            <RecordUpdateContext.Provider value={updateRecordMutation}>
+                    onColumnsChange={useRecoilCallback(() => (columns) => {
-              <StyledTableWithHeader>
+                      persistViewFields(
-                <StyledTableContainer>
+                        mapColumnDefinitionsToViewFields(columns),
-                  <div ref={tableBodyRef}>
+                      );
-                    <RecordTable createRecord={createRecord} />
+                    })}
-                    <DragSelect
+                    createRecord={createRecord}
-                      dragSelectable={tableBodyRef}
+                  />
-                      onDragSelectionStart={resetTableRowSelection}
+                  <DragSelect
-                      onDragSelectionChange={setRowSelectedState}
+                    dragSelectable={tableBodyRef}
+                    onDragSelectionStart={resetTableRowSelection}
+                    onDragSelectionChange={setRowSelectedState}
+                  />
+                </div>
+                <RecordTableInternalEffect
+                  recordTableId={recordTableId}
+                  tableBodyRef={tableBodyRef}
+                />
+                {!isRecordTableInitialLoading && numberOfTableRows === 0 && (
+                  <StyledObjectEmptyContainer>
+                    <StyledEmptyObjectTitle>
+                      No {foundObjectMetadataItem?.namePlural}
+                    </StyledEmptyObjectTitle>
+                    <StyledEmptyObjectSubTitle>
+                      Create one:
+                    </StyledEmptyObjectSubTitle>
+                    <Button
+                      Icon={IconPlus}
+                      title={`Add a ${foundObjectMetadataItem?.nameSingular}`}
+                      variant={'secondary'}
+                      onClick={createRecord}
                     />
-                  </div>
+                  </StyledObjectEmptyContainer>
-                  <RecordTableInternalEffect tableBodyRef={tableBodyRef} />
+                )}
-                  {!isRecordTableInitialLoading && numberOfTableRows === 0 && (
+              </StyledTableContainer>
-                    <StyledObjectEmptyContainer>
+            </StyledTableWithHeader>
-                      <StyledEmptyObjectTitle>
+          </RecordUpdateContext.Provider>
-                        No {foundObjectMetadataItem?.namePlural}
+        </RecordTableRefContextWrapper>
-                      </StyledEmptyObjectTitle>
+      </ScrollWrapper>
-                      <StyledEmptyObjectSubTitle>
+    </EntityDeleteContext.Provider>
-                        Create one:
-                      </StyledEmptyObjectSubTitle>
-                      <Button
-                        Icon={IconPlus}
-                        title={`Add a ${foundObjectMetadataItem?.nameSingular}`}
-                        variant={'secondary'}
-                        onClick={createRecord}
-                      />
-                    </StyledObjectEmptyContainer>
-                  )}
-                </StyledTableContainer>
-              </StyledTableWithHeader>
-            </RecordUpdateContext.Provider>
-          </RecordTableRefContextWrapper>
-        </ScrollWrapper>
-      </EntityDeleteContext.Provider>
-    </RecordTableScope>
   );
 };

packages/twenty-front/src/modules/object-record/record-table/components/SelectAllCheckbox.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { Checkbox } from '@/ui/input/components/Checkbox';
 
 import { useRecordTable } from '../hooks/useRecordTable';
@@ -17,16 +16,9 @@ const StyledContainer = styled.div`
 `;
 
 export const SelectAllCheckbox = () => {
-  const { allRowsSelectedStatusScopeInjector } = getRecordTableScopeInjector();
+  const { allRowsSelectedStatusSelector } = useRecordTableStates();
 
-  const { injectSelectorWithRecordTableScopeId } = useRecordTableScopedStates();
+  const allRowsSelectedStatus = useRecoilValue(allRowsSelectedStatusSelector);
-
-  const allRowsSelectedStatusScopedSelector =
-    injectSelectorWithRecordTableScopeId(allRowsSelectedStatusScopeInjector);
-
-  const allRowsSelectedStatus = useRecoilValue(
-    allRowsSelectedStatusScopedSelector,
-  );
   const { selectAllRows } = useRecordTable();
 
   const checked = allRowsSelectedStatus === 'all';

packages/twenty-front/src/modules/object-record/record-table/context-menu/components/RecordTableContextMenu.tsx

@@ -1,7 +1,6 @@
 import { useRecoilValue } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { ContextMenu } from '@/ui/navigation/context-menu/components/ContextMenu';
 
 export const RecordTableContextMenu = ({
@@ -9,14 +8,7 @@ export const RecordTableContextMenu = ({
 }: {
   recordTableId: string;
 }) => {
-  const { selectedRowIdsScopeInjector } = getRecordTableScopeInjector();
+  const { selectedRowIdsSelector } = useRecordTableStates(recordTableId);
-
-  const { injectSelectorWithRecordTableScopeId } =
-    useRecordTableScopedStates(recordTableId);
-
-  const selectedRowIdsSelector = injectSelectorWithRecordTableScopeId(
-    selectedRowIdsScopeInjector,
-  );
 
   const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
 

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode.ts

@@ -1,42 +1,28 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
-export const useCloseCurrentTableCellInEditMode = (
+export const useCloseCurrentTableCellInEditMode = (recordTableId?: string) => {
-  recordTableScopeId: string,
-) => {
   const {
-    currentTableCellInEditModePositionScopeInjector,
+    currentTableCellInEditModePositionState,
-    isTableCellInEditModeScopeInjector,
+    isTableCellInEditModeFamilyState,
-  } = getRecordTableScopeInjector();
+  } = useRecordTableStates(recordTableId);
-
-  const {
-    injectSnapshotValueWithRecordTableScopeId,
-    injectFamilyStateWithRecordTableScopeId,
-  } = useRecordTableScopedStates(recordTableScopeId);
 
   return useRecoilCallback(
     ({ set, snapshot }) => {
       return async () => {
-        const currentTableCellInEditModePosition =
+        const currentTableCellInEditModePosition = getSnapshotValue(
-          injectSnapshotValueWithRecordTableScopeId(
+          snapshot,
-            snapshot,
+          currentTableCellInEditModePositionState(),
-            currentTableCellInEditModePositionScopeInjector,
-          );
-
-        const isTableCellInEditMode = injectFamilyStateWithRecordTableScopeId(
-          isTableCellInEditModeScopeInjector,
         );
 
-        set(isTableCellInEditMode(currentTableCellInEditModePosition), false);
+        set(
+          isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
+          false,
+        );
       };
     },
-    [
+    [currentTableCellInEditModePositionState, isTableCellInEditModeFamilyState],
-      currentTableCellInEditModePositionScopeInjector,
-      injectFamilyStateWithRecordTableScopeId,
-      injectSnapshotValueWithRecordTableScopeId,
-      isTableCellInEditModeScopeInjector,
-    ],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useDisableSoftFocus.ts

@@ -1,50 +1,32 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
-export const useDisableSoftFocus = (recordTableScopeId: string) => {
+export const useDisableSoftFocus = (recordTableId?: string) => {
   const {
-    softFocusPositionScopeInjector,
+    softFocusPositionState,
-    isSoftFocusActiveScopeInjector,
+    isSoftFocusActiveState,
-    isSoftFocusOnTableCellScopeInjector,
+    isSoftFocusOnTableCellFamilyState,
-  } = getRecordTableScopeInjector();
+  } = useRecordTableStates(recordTableId);
-
-  const {
-    injectStateWithRecordTableScopeId,
-    injectSnapshotValueWithRecordTableScopeId,
-    injectFamilyStateWithRecordTableScopeId,
-  } = useRecordTableScopedStates(recordTableScopeId);
 
   return useRecoilCallback(
     ({ set, snapshot }) => {
       return () => {
-        const currentPosition = injectSnapshotValueWithRecordTableScopeId(
+        const currentPosition = getSnapshotValue(
           snapshot,
-          softFocusPositionScopeInjector,
+          softFocusPositionState(),
         );
 
-        const isSoftFocusActiveState = injectStateWithRecordTableScopeId(
+        set(isSoftFocusActiveState(), false);
-          isSoftFocusActiveScopeInjector,
-        );
-
-        const isSoftFocusOnTableCellFamilyState =
-          injectFamilyStateWithRecordTableScopeId(
-            isSoftFocusOnTableCellScopeInjector,
-          );
-
-        set(isSoftFocusActiveState, false);
 
         set(isSoftFocusOnTableCellFamilyState(currentPosition), false);
       };
     },
     [
-      injectFamilyStateWithRecordTableScopeId,
+      isSoftFocusActiveState,
-      injectSnapshotValueWithRecordTableScopeId,
+      isSoftFocusOnTableCellFamilyState,
-      injectStateWithRecordTableScopeId,
+      softFocusPositionState,
-      isSoftFocusActiveScopeInjector,
-      isSoftFocusOnTableCellScopeInjector,
-      softFocusPositionScopeInjector,
     ],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode.ts

@@ -1,45 +1,28 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
-export const useGetIsSomeCellInEditMode = (recordTableScopeId: string) => {
+export const useGetIsSomeCellInEditMode = (recordTableId?: string) => {
   const {
-    currentTableCellInEditModePositionScopeInjector,
+    currentTableCellInEditModePositionState,
-    isTableCellInEditModeScopeInjector,
+    isTableCellInEditModeFamilyState,
-  } = getRecordTableScopeInjector();
+  } = useRecordTableStates(recordTableId);
-
-  const {
-    injectSnapshotValueWithRecordTableScopeId,
-    injectFamilySnapshotValueWithRecordTableScopeId,
-  } = useRecordTableScopedStates(recordTableScopeId);
 
   return useRecoilCallback(
     ({ snapshot }) =>
       () => {
-        const currentTableCellInEditModePosition =
+        const currentTableCellInEditModePosition = getSnapshotValue(
-          injectSnapshotValueWithRecordTableScopeId(
+          snapshot,
-            snapshot,
+          currentTableCellInEditModePositionState(),
-            currentTableCellInEditModePositionScopeInjector,
+        );
-          );
 
-        const isSomeCellInEditModeFamilyState =
+        const isSomeCellInEditMode = isTableCellInEditModeFamilyState(
-          injectFamilySnapshotValueWithRecordTableScopeId(
-            snapshot,
-            isTableCellInEditModeScopeInjector,
-          );
-
-        const isSomeCellInEditMode = isSomeCellInEditModeFamilyState(
           currentTableCellInEditModePosition,
         );
 
         return isSomeCellInEditMode;
       },
-    [
+    [currentTableCellInEditModePositionState, isTableCellInEditModeFamilyState],
-      currentTableCellInEditModePositionScopeInjector,
-      injectFamilySnapshotValueWithRecordTableScopeId,
-      injectSnapshotValueWithRecordTableScopeId,
-      isTableCellInEditModeScopeInjector,
-    ],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts

@@ -1,30 +1,27 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 
 import { useCloseCurrentTableCellInEditMode } from './useCloseCurrentTableCellInEditMode';
 import { useDisableSoftFocus } from './useDisableSoftFocus';
 
-export const useLeaveTableFocus = (recordTableScopeId: string) => {
+export const useLeaveTableFocus = (recordTableId?: string) => {
-  const disableSoftFocus = useDisableSoftFocus(recordTableScopeId);
+  const disableSoftFocus = useDisableSoftFocus(recordTableId);
   const closeCurrentCellInEditMode =
-    useCloseCurrentTableCellInEditMode(recordTableScopeId);
+    useCloseCurrentTableCellInEditMode(recordTableId);
 
-  const { isSoftFocusActiveScopeInjector } = getRecordTableScopeInjector();
+  const { isSoftFocusActiveState } = useRecordTableStates(recordTableId);
-
-  const { injectSnapshotValueWithRecordTableScopeId } =
-    useRecordTableScopedStates(recordTableScopeId);
 
   return useRecoilCallback(
     ({ snapshot }) =>
       () => {
-        const isSoftFocusActive = injectSnapshotValueWithRecordTableScopeId(
+        const isSoftFocusActive = getSnapshotValue(
           snapshot,
-          isSoftFocusActiveScopeInjector,
+          isSoftFocusActiveState(),
         );
 
         const currentHotkeyScope = snapshot
@@ -42,11 +39,6 @@ export const useLeaveTableFocus = (recordTableScopeId: string) => {
         closeCurrentCellInEditMode();
         disableSoftFocus();
       },
-    [
+    [closeCurrentCellInEditMode, disableSoftFocus, isSoftFocusActiveState],
-      closeCurrentCellInEditMode,
-      disableSoftFocus,
-      injectSnapshotValueWithRecordTableScopeId,
-      isSoftFocusActiveScopeInjector,
-    ],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useMoveEditModeToCellPosition.ts

@@ -1,59 +1,34 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 import { TableCellPosition } from '../../types/TableCellPosition';
 
-export const useMoveEditModeToTableCellPosition = (
+export const useMoveEditModeToTableCellPosition = (recordTableId?: string) => {
-  recordTableScopeId: string,
-) => {
   const {
-    isTableCellInEditModeScopeInjector,
+    isTableCellInEditModeFamilyState,
-    currentTableCellInEditModePositionScopeInjector,
+    currentTableCellInEditModePositionState,
-  } = getRecordTableScopeInjector();
+  } = useRecordTableStates(recordTableId);
-
-  const {
-    injectStateWithRecordTableScopeId,
-    injectSnapshotValueWithRecordTableScopeId,
-    injectFamilyStateWithRecordTableScopeId,
-  } = useRecordTableScopedStates(recordTableScopeId);
 
   return useRecoilCallback(
     ({ set, snapshot }) => {
       return (newPosition: TableCellPosition) => {
-        const currentTableCellInEditModePosition =
+        const currentTableCellInEditModePosition = getSnapshotValue(
-          injectSnapshotValueWithRecordTableScopeId(
+          snapshot,
-            snapshot,
+          currentTableCellInEditModePositionState(),
-            currentTableCellInEditModePositionScopeInjector,
+        );
-          );
-
-        const currentTableCellInEditModePositionState =
-          injectStateWithRecordTableScopeId(
-            currentTableCellInEditModePositionScopeInjector,
-          );
-
-        const isTableCellInEditModeFamilyState =
-          injectFamilyStateWithRecordTableScopeId(
-            isTableCellInEditModeScopeInjector,
-          );
 
         set(
           isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
           false,
         );
 
-        set(currentTableCellInEditModePositionState, newPosition);
+        set(currentTableCellInEditModePositionState(), newPosition);
 
         set(isTableCellInEditModeFamilyState(newPosition), true);
       };
     },
-    [
+    [currentTableCellInEditModePositionState, isTableCellInEditModeFamilyState],
-      currentTableCellInEditModePositionScopeInjector,
-      injectFamilyStateWithRecordTableScopeId,
-      injectSnapshotValueWithRecordTableScopeId,
-      injectStateWithRecordTableScopeId,
-      isTableCellInEditModeScopeInjector,
-    ],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts

@@ -0,0 +1,112 @@
+import { isRowSelectedFamilyStateScopeMap } from '@/object-record/record-table/record-table-row/states/isRowSelectedFamilyStateScopeMap';
+import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
+import { availableTableColumnsStateScopeMap } from '@/object-record/record-table/states/availableTableColumnsStateScopeMap';
+import { currentTableCellInEditModePositionStateScopeMap } from '@/object-record/record-table/states/currentTableCellInEditModePositionStateScopeMap';
+import { isRecordTableInitialLoadingStateScopeMap } from '@/object-record/record-table/states/isRecordTableInitialLoadingStateScopeMap';
+import { isSoftFocusActiveStateScopeMap } from '@/object-record/record-table/states/isSoftFocusActiveStateScopeMap';
+import { isSoftFocusOnTableCellFamilyStateScopeMap } from '@/object-record/record-table/states/isSoftFocusOnTableCellFamilyStateScopeMap';
+import { isTableCellInEditModeFamilyStateScopeMap } from '@/object-record/record-table/states/isTableCellInEditModeFamilyStateScopeMap';
+import { numberOfTableRowsStateScopeMap } from '@/object-record/record-table/states/numberOfTableRowsStateScopeMap';
+import { objectMetadataConfigStateScopeMap } from '@/object-record/record-table/states/objectMetadataConfigStateScopeMap';
+import { objectNamePluralStateScopeMap } from '@/object-record/record-table/states/objectNamePluralStateScopeMap';
+import { onColumnsChangeStateScopeMap } from '@/object-record/record-table/states/onColumnsChangeStateScopeMap';
+import { onEntityCountChangeStateScopeMap } from '@/object-record/record-table/states/onEntityCountChangeStateScopeMap';
+import { resizeFieldOffsetStateScopeMap } from '@/object-record/record-table/states/resizeFieldOffsetStateScopeMap';
+import { allRowsSelectedStatusSelectorScopeMap } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusSelectorScopeMap';
+import { hiddenTableColumnsSelectorScopeMap } from '@/object-record/record-table/states/selectors/hiddenTableColumnsSelectorScopeMap';
+import { numberOfTableColumnsSelectorScopeMap } from '@/object-record/record-table/states/selectors/numberOfTableColumnsSelectorScopeMap';
+import { selectedRowIdsSelectorScopeMap } from '@/object-record/record-table/states/selectors/selectedRowIdsSelectorScopeMap';
+import { tableColumnsByKeySelectorScopeMap } from '@/object-record/record-table/states/selectors/tableColumnsByKeySelectorScopeMap';
+import { visibleTableColumnsSelectorScopeMap } from '@/object-record/record-table/states/selectors/visibleTableColumnsSelectorScopeMap';
+import { softFocusPositionStateScopeMap } from '@/object-record/record-table/states/softFocusPositionStateScopeMap';
+import { tableColumnsStateScopeMap } from '@/object-record/record-table/states/tableColumnsStateScopeMap';
+import { tableFiltersStateScopeMap } from '@/object-record/record-table/states/tableFiltersStateScopeMap';
+import { tableLastRowVisibleStateScopeMap } from '@/object-record/record-table/states/tableLastRowVisibleStateScopeMap';
+import { tableRowIdsStateScopeMap } from '@/object-record/record-table/states/tableRowIdsStateScopeMap';
+import { tableSortsStateScopeMap } from '@/object-record/record-table/states/tableSortsStateScopeMap';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+import { getFamilyState } from '@/ui/utilities/recoil-scope/utils/getFamilyState';
+import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
+import { getSelector } from '@/ui/utilities/recoil-scope/utils/getSelector';
+import { getState } from '@/ui/utilities/recoil-scope/utils/getState';
+
+export const useRecordTableStates = (recordTableId?: string) => {
+  const scopeId = useAvailableScopeIdOrThrow(
+    RecordTableScopeInternalContext,
+    getScopeIdFromComponentId(recordTableId),
+  );
+
+  return {
+    scopeId,
+    availableTableColumnsState: getState(
+      availableTableColumnsStateScopeMap,
+      scopeId,
+    ),
+    tableFiltersState: getState(tableFiltersStateScopeMap, scopeId),
+    tableSortsState: getState(tableSortsStateScopeMap, scopeId),
+    tableColumnsState: getState(tableColumnsStateScopeMap, scopeId),
+    objectMetadataConfigState: getState(
+      objectMetadataConfigStateScopeMap,
+      scopeId,
+    ),
+    objectNamePluralState: getState(objectNamePluralStateScopeMap, scopeId),
+    onColumnsChangeState: getState(onColumnsChangeStateScopeMap, scopeId),
+    onEntityCountChangeState: getState(
+      onEntityCountChangeStateScopeMap,
+      scopeId,
+    ),
+    tableLastRowVisibleState: getState(
+      tableLastRowVisibleStateScopeMap,
+      scopeId,
+    ),
+    softFocusPositionState: getState(softFocusPositionStateScopeMap, scopeId),
+    numberOfTableRowsState: getState(numberOfTableRowsStateScopeMap, scopeId),
+    currentTableCellInEditModePositionState: getState(
+      currentTableCellInEditModePositionStateScopeMap,
+      scopeId,
+    ),
+    isTableCellInEditModeFamilyState: getFamilyState(
+      isTableCellInEditModeFamilyStateScopeMap,
+      scopeId,
+    ),
+    isSoftFocusActiveState: getState(isSoftFocusActiveStateScopeMap, scopeId),
+    isSoftFocusOnTableCellFamilyState: getFamilyState(
+      isSoftFocusOnTableCellFamilyStateScopeMap,
+      scopeId,
+    ),
+    tableRowIdsState: getState(tableRowIdsStateScopeMap, scopeId),
+    isRowSelectedFamilyState: getFamilyState(
+      isRowSelectedFamilyStateScopeMap,
+      scopeId,
+    ),
+    isRecordTableInitialLoadingState: getState(
+      isRecordTableInitialLoadingStateScopeMap,
+      scopeId,
+    ),
+    resizeFieldOffsetState: getState(resizeFieldOffsetStateScopeMap, scopeId),
+    allRowsSelectedStatusSelector: getSelector(
+      allRowsSelectedStatusSelectorScopeMap,
+      scopeId,
+    ),
+    hiddenTableColumnsSelector: getSelector(
+      hiddenTableColumnsSelectorScopeMap,
+      scopeId,
+    ),
+    numberOfTableColumnsSelector: getSelector(
+      numberOfTableColumnsSelectorScopeMap,
+      scopeId,
+    ),
+    selectedRowIdsSelector: getSelector(
+      selectedRowIdsSelectorScopeMap,
+      scopeId,
+    ),
+    tableColumnsByKeySelector: getSelector(
+      tableColumnsByKeySelectorScopeMap,
+      scopeId,
+    ),
+    visibleTableColumnsSelector: getSelector(
+      visibleTableColumnsSelectorScopeMap,
+      scopeId,
+    ),
+  };
+};

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts

@@ -1,37 +1,21 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
-export const useResetTableRowSelection = (recordTableScopeId: string) => {
+export const useResetTableRowSelection = (recordTableId?: string) => {
-  const { tableRowIdsScopeInjector, isRowSelectedScopeInjector } =
+  const { tableRowIdsState, isRowSelectedFamilyState } =
-    getRecordTableScopeInjector();
+    useRecordTableStates(recordTableId);
-
-  const {
-    injectSnapshotValueWithRecordTableScopeId,
-    injectFamilyStateWithRecordTableScopeId,
-  } = useRecordTableScopedStates(recordTableScopeId);
 
   return useRecoilCallback(
     ({ snapshot, set }) =>
       () => {
-        const tableRowIds = injectSnapshotValueWithRecordTableScopeId(
+        const tableRowIds = getSnapshotValue(snapshot, tableRowIdsState());
-          snapshot,
-          tableRowIdsScopeInjector,
-        );
-
-        const isRowSelectedFamilyState =
-          injectFamilyStateWithRecordTableScopeId(isRowSelectedScopeInjector);
 
         for (const rowId of tableRowIds) {
           set(isRowSelectedFamilyState(rowId), false);
         }
       },
-    [
+    [isRowSelectedFamilyState, tableRowIdsState],
-      injectFamilyStateWithRecordTableScopeId,
-      injectSnapshotValueWithRecordTableScopeId,
-      isRowSelectedScopeInjector,
-      tableRowIdsScopeInjector,
-    ],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts

@@ -1,37 +1,24 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
-export const useSelectAllRows = (recordTableScopeId: string) => {
+export const useSelectAllRows = (recordTableId?: string) => {
   const {
-    allRowsSelectedStatusScopeInjector,
+    allRowsSelectedStatusSelector,
-    tableRowIdsScopeInjector,
+    tableRowIdsState,
-    isRowSelectedScopeInjector,
+    isRowSelectedFamilyState,
-  } = getRecordTableScopeInjector();
+  } = useRecordTableStates(recordTableId);
-
-  const {
-    injectSnapshotValueWithRecordTableScopeId,
-    injectSelectorSnapshotValueWithRecordTableScopeId,
-    injectFamilyStateWithRecordTableScopeId,
-  } = useRecordTableScopedStates(recordTableScopeId);
 
   const selectAllRows = useRecoilCallback(
     ({ set, snapshot }) =>
       () => {
-        const allRowsSelectedStatus =
+        const allRowsSelectedStatus = getSnapshotValue(
-          injectSelectorSnapshotValueWithRecordTableScopeId(
-            snapshot,
-            allRowsSelectedStatusScopeInjector,
-          );
-
-        const tableRowIds = injectSnapshotValueWithRecordTableScopeId(
           snapshot,
-          tableRowIdsScopeInjector,
+          allRowsSelectedStatusSelector,
         );
 
-        const isRowSelectedFamilyState =
+        const tableRowIds = getSnapshotValue(snapshot, tableRowIdsState());
-          injectFamilyStateWithRecordTableScopeId(isRowSelectedScopeInjector);
 
         if (
           allRowsSelectedStatus === 'none' ||
@@ -46,14 +33,7 @@ export const useSelectAllRows = (recordTableScopeId: string) => {
           }
         }
       },
-    [
+    [allRowsSelectedStatusSelector, isRowSelectedFamilyState, tableRowIdsState],
-      allRowsSelectedStatusScopeInjector,
-      injectFamilyStateWithRecordTableScopeId,
-      injectSelectorSnapshotValueWithRecordTableScopeId,
-      injectSnapshotValueWithRecordTableScopeId,
-      isRowSelectedScopeInjector,
-      tableRowIdsScopeInjector,
-    ],
   );
 
   return {

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts

@@ -1,29 +1,24 @@
 import { useRecoilCallback } from 'recoil';
 
 import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState';
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 type useSetRecordTableDataProps = {
-  recordTableScopeId: string;
+  recordTableId?: string;
   onEntityCountChange: (entityCount: number) => void;
 };
 
 export const useSetRecordTableData = ({
-  recordTableScopeId,
+  recordTableId,
   onEntityCountChange,
 }: useSetRecordTableDataProps) => {
-  const resetTableRowSelection = useResetTableRowSelection(recordTableScopeId);
+  const resetTableRowSelection = useResetTableRowSelection(recordTableId);
 
-  const { tableRowIdsScopeInjector, numberOfTableRowsScopeInjector } =
+  const { tableRowIdsState, numberOfTableRowsState } =
-    getRecordTableScopeInjector();
+    useRecordTableStates(recordTableId);
-
-  const {
-    injectStateWithRecordTableScopeId,
-    injectSnapshotValueWithRecordTableScopeId,
-  } = useRecordTableScopedStates(recordTableScopeId);
 
   return useRecoilCallback(
     ({ set, snapshot }) =>
@@ -38,37 +33,24 @@ export const useSetRecordTableData = ({
             set(entityFieldsFamilyState(entity.id), entity);
           }
         }
-        const currentRowIds = injectSnapshotValueWithRecordTableScopeId(
+        const currentRowIds = getSnapshotValue(snapshot, tableRowIdsState());
-          snapshot,
-          tableRowIdsScopeInjector,
-        );
 
         const entityIds = newEntityArray.map((entity) => entity.id);
 
-        const tableRowIdsState = injectStateWithRecordTableScopeId(
-          tableRowIdsScopeInjector,
-        );
-
         if (!isDeeplyEqual(currentRowIds, entityIds)) {
-          set(tableRowIdsState, entityIds);
+          set(tableRowIdsState(), entityIds);
         }
 
         resetTableRowSelection();
 
-        const numberOfTableRowsState = injectStateWithRecordTableScopeId(
+        set(numberOfTableRowsState(), entityIds.length);
-          numberOfTableRowsScopeInjector,
-        );
-
-        set(numberOfTableRowsState, entityIds.length);
         onEntityCountChange(entityIds.length);
       },
     [
-      injectSnapshotValueWithRecordTableScopeId,
+      numberOfTableRowsState,
-      injectStateWithRecordTableScopeId,
-      numberOfTableRowsScopeInjector,
       onEntityCountChange,
       resetTableRowSelection,
-      tableRowIdsScopeInjector,
+      tableRowIdsState,
     ],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRowSelectedState.ts

@@ -1,17 +1,9 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 
-export const useSetRowSelectedState = (recordTableScopeId: string) => {
+export const useSetRowSelectedState = (recordTableId?: string) => {
-  const { isRowSelectedScopeInjector } = getRecordTableScopeInjector();
+  const { isRowSelectedFamilyState } = useRecordTableStates(recordTableId);
-
-  const { injectFamilyStateWithRecordTableScopeId } =
-    useRecordTableScopedStates(recordTableScopeId);
-
-  const isRowSelectedFamilyState = injectFamilyStateWithRecordTableScopeId(
-    isRowSelectedScopeInjector,
-  );
 
   return useRecoilCallback(({ set }) => (rowId: string, selected: boolean) => {
     set(isRowSelectedFamilyState(rowId), selected);

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetSoftFocusPosition.ts

@@ -1,60 +1,38 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 import { TableCellPosition } from '../../types/TableCellPosition';
 
-export const useSetSoftFocusPosition = (recordTableScopeId: string) => {
+export const useSetSoftFocusPosition = (recordTableId?: string) => {
   const {
-    softFocusPositionScopeInjector,
+    softFocusPositionState,
-    isSoftFocusActiveScopeInjector,
+    isSoftFocusActiveState,
-    isSoftFocusOnTableCellScopeInjector,
+    isSoftFocusOnTableCellFamilyState,
-  } = getRecordTableScopeInjector();
+  } = useRecordTableStates(recordTableId);
-
-  const {
-    injectStateWithRecordTableScopeId,
-    injectSnapshotValueWithRecordTableScopeId,
-    injectFamilyStateWithRecordTableScopeId,
-  } = useRecordTableScopedStates(recordTableScopeId);
 
   return useRecoilCallback(
     ({ set, snapshot }) => {
       return (newPosition: TableCellPosition) => {
-        const currentPosition = injectSnapshotValueWithRecordTableScopeId(
+        const currentPosition = getSnapshotValue(
           snapshot,
-          softFocusPositionScopeInjector,
+          softFocusPositionState(),
         );
 
-        const isSoftFocusActiveState = injectStateWithRecordTableScopeId(
+        set(isSoftFocusActiveState(), true);
-          isSoftFocusActiveScopeInjector,
-        );
-
-        const isSoftFocusOnTableCellFamilyState =
-          injectFamilyStateWithRecordTableScopeId(
-            isSoftFocusOnTableCellScopeInjector,
-          );
-
-        const softFocusPositionState = injectStateWithRecordTableScopeId(
-          softFocusPositionScopeInjector,
-        );
-
-        set(isSoftFocusActiveState, true);
 
         set(isSoftFocusOnTableCellFamilyState(currentPosition), false);
 
-        set(softFocusPositionState, newPosition);
+        set(softFocusPositionState(), newPosition);
 
         set(isSoftFocusOnTableCellFamilyState(newPosition), true);
       };
     },
     [
-      injectFamilyStateWithRecordTableScopeId,
+      softFocusPositionState,
-      injectSnapshotValueWithRecordTableScopeId,
+      isSoftFocusActiveState,
-      injectStateWithRecordTableScopeId,
+      isSoftFocusOnTableCellFamilyState,
-      isSoftFocusActiveScopeInjector,
-      isSoftFocusOnTableCellScopeInjector,
-      softFocusPositionScopeInjector,
     ],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts

@@ -1,24 +1,19 @@
-import { useRecoilCallback, useSetRecoilState } from 'recoil';
+import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 import { useGetIsSomeCellInEditMode } from '@/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode';
-import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 import { FieldMetadata } from '../../field/types/FieldMetadata';
 import { useUpsertRecordFromState } from '../../hooks/useUpsertRecordFromState';
-import { onEntityCountChangeScopedState } from '../states/onEntityCountChangeScopedState';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 import { TableHotkeyScope } from '../types/TableHotkeyScope';
 
 import { useDisableSoftFocus } from './internal/useDisableSoftFocus';
 import { useLeaveTableFocus } from './internal/useLeaveTableFocus';
-import { useRecordTableScopedStates } from './internal/useRecordTableScopedStates';
 import { useResetTableRowSelection } from './internal/useResetTableRowSelection';
 import { useSelectAllRows } from './internal/useSelectAllRows';
 import { useSetRecordTableData } from './internal/useSetRecordTableData';
@@ -26,121 +21,107 @@ import { useSetRowSelectedState } from './internal/useSetRowSelectedState';
 import { useSetSoftFocusPosition } from './internal/useSetSoftFocusPosition';
 
 type useRecordTableProps = {
-  recordTableScopeId?: string;
+  recordTableId?: string;
 };
 
 export const useRecordTable = (props?: useRecordTableProps) => {
-  const scopeId = useAvailableScopeIdOrThrow(
+  const recordTableId = props?.recordTableId;
-    RecordTableScopeInternalContext,
-    props?.recordTableScopeId,
-  );
 
   const {
-    injectStateWithRecordTableScopeId,
+    scopeId,
-    injectSnapshotValueWithRecordTableScopeId,
+    availableTableColumnsState,
-    injectSelectorSnapshotValueWithRecordTableScopeId,
+    tableFiltersState,
-  } = useRecordTableScopedStates(scopeId);
+    tableSortsState,
-
+    tableColumnsState,
-  const {
+    objectMetadataConfigState,
-    availableTableColumnsScopeInjector,
+    onEntityCountChangeState,
-    tableFiltersScopeInjector,
+    softFocusPositionState,
-    tableSortsScopeInjector,
+    numberOfTableRowsState,
-    tableColumnsScopeInjector,
+    onColumnsChangeState,
-    objectMetadataConfigScopeInjector,
+    isRecordTableInitialLoadingState,
-    onEntityCountScopeInjector,
+    tableLastRowVisibleState,
-    softFocusPositionScopeInjector,
+    numberOfTableColumnsSelector,
-    numberOfTableRowsScopeInjector,
+    selectedRowIdsSelector,
-    numberOfTableColumnsScopeInjector,
+    objectNamePluralState,
-    onColumnsChangeScopeInjector,
+  } = useRecordTableStates(recordTableId);
-    isRecordTableInitialLoadingScopeInjector,
-    tableLastRowVisibleScopeInjector,
-  } = getRecordTableScopeInjector();
 
   const setAvailableTableColumns = useSetRecoilState(
-    injectStateWithRecordTableScopeId(availableTableColumnsScopeInjector),
+    availableTableColumnsState(),
   );
 
-  const setOnEntityCountChange = useSetRecoilState(
+  const setOnEntityCountChange = useSetRecoilState(onEntityCountChangeState());
-    injectStateWithRecordTableScopeId(onEntityCountScopeInjector),
+
-  );
+  const setTableFilters = useSetRecoilState(tableFiltersState());
-  const setTableFilters = useSetRecoilState(
+
-    injectStateWithRecordTableScopeId(tableFiltersScopeInjector),
-  );
   const setObjectMetadataConfig = useSetRecoilState(
-    injectStateWithRecordTableScopeId(objectMetadataConfigScopeInjector),
+    objectMetadataConfigState(),
   );
 
-  const setTableSorts = useSetRecoilState(
+  const setTableSorts = useSetRecoilState(tableSortsState());
-    injectStateWithRecordTableScopeId(tableSortsScopeInjector),
-  );
 
-  const setTableColumns = useSetRecoilState(
+  const setTableColumns = useSetRecoilState(tableColumnsState());
-    injectStateWithRecordTableScopeId(tableColumnsScopeInjector),
-  );
 
-  const setOnColumnsChange = useSetRecoilState(
+  const setOnColumnsChange = useSetRecoilState(onColumnsChangeState());
-    injectStateWithRecordTableScopeId(onColumnsChangeScopeInjector),
-  );
 
   const setIsRecordTableInitialLoading = useSetRecoilState(
-    injectStateWithRecordTableScopeId(isRecordTableInitialLoadingScopeInjector),
+    isRecordTableInitialLoadingState(),
   );
 
   const setRecordTableLastRowVisible = useSetRecoilState(
-    injectStateWithRecordTableScopeId(tableLastRowVisibleScopeInjector),
+    tableLastRowVisibleState(),
+  );
+
+  const [objectNamePlural, setObjectNamePlural] = useRecoilState(
+    objectNamePluralState(),
   );
 
   const onColumnsChange = useRecoilCallback(
     ({ snapshot }) =>
       (columns: ColumnDefinition<FieldMetadata>[]) => {
-        const onColumnsChange = injectSnapshotValueWithRecordTableScopeId(
+        const onColumnsChange = getSnapshotValue(
           snapshot,
-          onColumnsChangeScopeInjector,
+          onColumnsChangeState(),
         );
 
         onColumnsChange?.(columns);
       },
-    [injectSnapshotValueWithRecordTableScopeId, onColumnsChangeScopeInjector],
+    [onColumnsChangeState],
   );
 
   const onEntityCountChange = useRecoilCallback(
     ({ snapshot }) =>
       (count: number) => {
-        const onEntityCountChangeState = getScopedStateDeprecated(
-          onEntityCountChangeScopedState,
-          scopeId,
-        );
         const onEntityCountChange = getSnapshotValue(
           snapshot,
-          onEntityCountChangeState,
+          onEntityCountChangeState(),
         );
 
         onEntityCountChange?.(count);
       },
-    [scopeId],
+    [onEntityCountChangeState],
   );
 
   const setRecordTableData = useSetRecordTableData({
-    recordTableScopeId: scopeId,
+    recordTableId,
     onEntityCountChange,
   });
 
-  const leaveTableFocus = useLeaveTableFocus(scopeId);
+  const leaveTableFocus = useLeaveTableFocus(recordTableId);
 
-  const setRowSelectedState = useSetRowSelectedState(scopeId);
+  const setRowSelectedState = useSetRowSelectedState(recordTableId);
 
-  const resetTableRowSelection = useResetTableRowSelection(scopeId);
+  const resetTableRowSelection = useResetTableRowSelection(recordTableId);
 
   const upsertRecordTableItem = useUpsertRecordFromState();
 
-  const setSoftFocusPosition = useSetSoftFocusPosition(scopeId);
+  const setSoftFocusPosition = useSetSoftFocusPosition(recordTableId);
 
   const moveUp = useRecoilCallback(
     ({ snapshot }) =>
       () => {
-        const softFocusPosition = injectSnapshotValueWithRecordTableScopeId(
+        const softFocusPosition = getSnapshotValue(
           snapshot,
-          softFocusPositionScopeInjector,
+          softFocusPositionState(),
         );
 
         let newRowNumber = softFocusPosition.row - 1;
@@ -154,24 +135,20 @@ export const useRecordTable = (props?: useRecordTableProps) => {
           row: newRowNumber,
         });
       },
-    [
+    [setSoftFocusPosition, softFocusPositionState],
-      injectSnapshotValueWithRecordTableScopeId,
-      setSoftFocusPosition,
-      softFocusPositionScopeInjector,
-    ],
   );
 
   const moveDown = useRecoilCallback(
     ({ snapshot }) =>
       () => {
-        const softFocusPosition = injectSnapshotValueWithRecordTableScopeId(
+        const softFocusPosition = getSnapshotValue(
           snapshot,
-          softFocusPositionScopeInjector,
+          softFocusPositionState(),
         );
 
-        const numberOfTableRows = injectSnapshotValueWithRecordTableScopeId(
+        const numberOfTableRows = getSnapshotValue(
           snapshot,
-          numberOfTableRowsScopeInjector,
+          numberOfTableRowsState(),
         );
 
         let newRowNumber = softFocusPosition.row + 1;
@@ -185,31 +162,25 @@ export const useRecordTable = (props?: useRecordTableProps) => {
           row: newRowNumber,
         });
       },
-    [
+    [numberOfTableRowsState, setSoftFocusPosition, softFocusPositionState],
-      injectSnapshotValueWithRecordTableScopeId,
-      numberOfTableRowsScopeInjector,
-      setSoftFocusPosition,
-      softFocusPositionScopeInjector,
-    ],
   );
 
   const moveRight = useRecoilCallback(
     ({ snapshot }) =>
       () => {
-        const softFocusPosition = injectSnapshotValueWithRecordTableScopeId(
+        const softFocusPosition = getSnapshotValue(
           snapshot,
-          softFocusPositionScopeInjector,
+          softFocusPositionState(),
         );
 
-        const numberOfTableColumns =
+        const numberOfTableColumns = getSnapshotValue(
-          injectSelectorSnapshotValueWithRecordTableScopeId(
-            snapshot,
-            numberOfTableColumnsScopeInjector,
-          );
-
-        const numberOfTableRows = injectSnapshotValueWithRecordTableScopeId(
           snapshot,
-          numberOfTableRowsScopeInjector,
+          numberOfTableColumnsSelector,
+        );
+
+        const numberOfTableRows = getSnapshotValue(
+          snapshot,
+          numberOfTableRowsState(),
         );
         const currentColumnNumber = softFocusPosition.column;
         const currentRowNumber = softFocusPosition.row;
@@ -242,28 +213,25 @@ export const useRecordTable = (props?: useRecordTableProps) => {
         }
       },
     [
-      injectSelectorSnapshotValueWithRecordTableScopeId,
+      softFocusPositionState,
-      injectSnapshotValueWithRecordTableScopeId,
+      numberOfTableColumnsSelector,
-      numberOfTableColumnsScopeInjector,
+      numberOfTableRowsState,
-      numberOfTableRowsScopeInjector,
       setSoftFocusPosition,
-      softFocusPositionScopeInjector,
     ],
   );
 
   const moveLeft = useRecoilCallback(
     ({ snapshot }) =>
       () => {
-        const softFocusPosition = injectSnapshotValueWithRecordTableScopeId(
+        const softFocusPosition = getSnapshotValue(
           snapshot,
-          softFocusPositionScopeInjector,
+          softFocusPositionState(),
         );
 
-        const numberOfTableColumns =
+        const numberOfTableColumns = getSnapshotValue(
-          injectSelectorSnapshotValueWithRecordTableScopeId(
+          snapshot,
-            snapshot,
+          numberOfTableColumnsSelector,
-            numberOfTableColumnsScopeInjector,
+        );
-          );
 
         const currentColumnNumber = softFocusPosition.column;
         const currentRowNumber = softFocusPosition.row;
@@ -293,16 +261,14 @@ export const useRecordTable = (props?: useRecordTableProps) => {
         }
       },
     [
-      injectSelectorSnapshotValueWithRecordTableScopeId,
+      softFocusPositionState,
-      injectSnapshotValueWithRecordTableScopeId,
+      numberOfTableColumnsSelector,
-      numberOfTableColumnsScopeInjector,
       setSoftFocusPosition,
-      softFocusPositionScopeInjector,
     ],
   );
 
   const useMapKeyboardToSoftFocus = () => {
-    const disableSoftFocus = useDisableSoftFocus(scopeId);
+    const disableSoftFocus = useDisableSoftFocus(recordTableId);
     const setHotkeyScope = useSetHotkeyScope();
 
     useScopedHotkeys(
@@ -355,9 +321,9 @@ export const useRecordTable = (props?: useRecordTableProps) => {
     );
   };
 
-  const { selectAllRows } = useSelectAllRows(scopeId);
+  const { selectAllRows } = useSelectAllRows(recordTableId);
 
-  const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode(scopeId);
+  const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode(recordTableId);
 
   return {
     scopeId,
@@ -384,5 +350,8 @@ export const useRecordTable = (props?: useRecordTableProps) => {
     setRecordTableLastRowVisible,
     setSoftFocusPosition,
     getIsSomeCellInEditMode,
+    selectedRowIdsSelector,
+    objectNamePlural,
+    setObjectNamePlural,
   };
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts

@@ -2,55 +2,30 @@ import { useCallback } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
-import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
 import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
-import { useRecordTableScopedStates } from './internal/useRecordTableScopedStates';
-
 type useRecordTableProps = {
-  recordTableScopeId?: string;
+  recordTableId?: string;
 };
 
 export const useTableColumns = (props?: useRecordTableProps) => {
-  const scopeId = useAvailableScopeIdOrThrow(
-    RecordTableScopeInternalContext,
-    props?.recordTableScopeId,
-  );
   const { onColumnsChange, setTableColumns } = useRecordTable({
-    recordTableScopeId: scopeId,
+    recordTableId: props?.recordTableId,
   });
 
   const {
-    injectStateWithRecordTableScopeId,
+    availableTableColumnsState,
-    injectSelectorWithRecordTableScopeId,
+    tableColumnsState,
-  } = useRecordTableScopedStates(scopeId);
+    visibleTableColumnsSelector,
+  } = useRecordTableStates(props?.recordTableId);
 
-  const {
+  const availableTableColumns = useRecoilValue(availableTableColumnsState());
-    availableTableColumnsScopeInjector,
-    tableColumnsScopeInjector,
-    visibleTableColumnsScopeInjector,
-  } = getRecordTableScopeInjector();
 
-  const availableTableColumnsState = injectStateWithRecordTableScopeId(
+  const tableColumns = useRecoilValue(tableColumnsState());
-    availableTableColumnsScopeInjector,
-  );
-
-  const tableColumnsState = injectStateWithRecordTableScopeId(
-    tableColumnsScopeInjector,
-  );
-
-  const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId(
-    visibleTableColumnsScopeInjector,
-  );
-
-  const availableTableColumns = useRecoilValue(availableTableColumnsState);
-
-  const tableColumns = useRecoilValue(tableColumnsState);
   const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
 
   const { handleColumnMove } = useMoveViewColumns();

packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx

@@ -4,8 +4,7 @@ import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 import { TableOptionsDropdownId } from '@/object-record/record-table/constants/TableOptionsDropdownId';
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { IconChevronLeft, IconFileImport, IconTag } from '@/ui/display/icon';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput';
@@ -43,25 +42,14 @@ export const TableOptionsDropdownContent = ({
 
   const viewEditInputRef = useRef<HTMLInputElement>(null);
 
-  const { hiddenTableColumnsScopeInjector, visibleTableColumnsScopeInjector } =
+  const { hiddenTableColumnsSelector, visibleTableColumnsSelector } =
-    getRecordTableScopeInjector();
+    useRecordTableStates(recordTableId);
-
-  const { injectSelectorWithRecordTableScopeId } =
-    useRecordTableScopedStates(recordTableId);
-
-  const hiddenTableColumnsSelector = injectSelectorWithRecordTableScopeId(
-    hiddenTableColumnsScopeInjector,
-  );
-
-  const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId(
-    visibleTableColumnsScopeInjector,
-  );
 
   const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);
   const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
 
   const { handleColumnVisibilityChange, handleColumnReorder } = useTableColumns(
-    { recordTableScopeId: recordTableId },
+    { recordTableId },
   );
 
   const handleSelectMenu = (option: TableOptionsMenu) => {

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCurrentTableCellEditMode.ts

@@ -1,31 +1,20 @@
 import { useCallback } from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 
 import { useMoveEditModeToTableCellPosition } from '../../hooks/internal/useMoveEditModeToCellPosition';
 
 import { useCurrentTableCellPosition } from './useCurrentCellPosition';
 
 export const useCurrentTableCellEditMode = () => {
-  const { scopeId } = useRecordTable();
+  const moveEditModeToTableCellPosition = useMoveEditModeToTableCellPosition();
-
-  const moveEditModeToTableCellPosition =
-    useMoveEditModeToTableCellPosition(scopeId);
 
   const currentTableCellPosition = useCurrentTableCellPosition();
 
-  const { isTableCellInEditModeScopeInjector } = getRecordTableScopeInjector();
+  const { isTableCellInEditModeFamilyState } = useRecordTableStates();
 
-  const { injectFamilyStateWithRecordTableScopeId } =
+  const isCurrentTableCellInEditMode = useRecoilValue(
-    useRecordTableScopedStates();
-
-  const isTableCellInEditModeFamilyState =
-    injectFamilyStateWithRecordTableScopeId(isTableCellInEditModeScopeInjector);
-
-  const [isCurrentTableCellInEditMode] = useRecoilState(
     isTableCellInEditModeFamilyState(currentTableCellPosition),
   );
 

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useIsSoftFocusOnCurrentTableCell.ts

@@ -1,24 +1,16 @@
 import { useRecoilValue } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 
 import { useCurrentTableCellPosition } from './useCurrentCellPosition';
 
 export const useIsSoftFocusOnCurrentTableCell = () => {
   const currentTableCellPosition = useCurrentTableCellPosition();
 
-  const { isSoftFocusOnTableCellScopeInjector } = getRecordTableScopeInjector();
+  const { isSoftFocusOnTableCellFamilyState } = useRecordTableStates();
-
-  const { injectFamilyStateWithRecordTableScopeId } =
-    useRecordTableScopedStates();
-
-  const isSoftFocusActiveFamilyState = injectFamilyStateWithRecordTableScopeId(
-    isSoftFocusOnTableCellScopeInjector,
-  );
 
   const isSoftFocusOnTableCell = useRecoilValue(
-    isSoftFocusActiveFamilyState(currentTableCellPosition),
+    isSoftFocusOnTableCellFamilyState(currentTableCellPosition),
   );
 
   return isSoftFocusOnTableCell;

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts

@@ -1,8 +1,8 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 
@@ -12,26 +12,17 @@ export const useMoveSoftFocusToCurrentCellOnHover = () => {
   const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell();
 
   const {
-    currentTableCellInEditModePositionScopeInjector,
+    currentTableCellInEditModePositionState,
-    isTableCellInEditModeScopeInjector,
+    isTableCellInEditModeFamilyState,
-  } = getRecordTableScopeInjector();
+  } = useRecordTableStates();
-
-  const {
-    injectSnapshotValueWithRecordTableScopeId,
-    injectFamilyStateWithRecordTableScopeId,
-  } = useRecordTableScopedStates();
-
-  const isTableCellInEditModeFamilyState =
-    injectFamilyStateWithRecordTableScopeId(isTableCellInEditModeScopeInjector);
 
   return useRecoilCallback(
     ({ snapshot }) =>
       () => {
-        const currentTableCellInEditModePosition =
+        const currentTableCellInEditModePosition = getSnapshotValue(
-          injectSnapshotValueWithRecordTableScopeId(
+          snapshot,
-            snapshot,
+          currentTableCellInEditModePositionState(),
-            currentTableCellInEditModePositionScopeInjector,
+        );
-          );
 
         const isSomeCellInEditMode = snapshot
           .getLoadable(
@@ -58,8 +49,7 @@ export const useMoveSoftFocusToCurrentCellOnHover = () => {
         }
       },
     [
-      currentTableCellInEditModePositionScopeInjector,
+      currentTableCellInEditModePositionState,
-      injectSnapshotValueWithRecordTableScopeId,
       isTableCellInEditModeFamilyState,
       setSoftFocusOnCurrentTableCell,
     ],

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocus.ts

@@ -1,9 +1,8 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
@@ -11,13 +10,7 @@ import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 export const useSetSoftFocus = () => {
   const { setSoftFocusPosition } = useRecordTable();
 
-  const { isSoftFocusActiveScopeInjector } = getRecordTableScopeInjector();
+  const { isSoftFocusActiveState } = useRecordTableStates();
-
-  const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates();
-
-  const isSoftFocusActiveState = injectStateWithRecordTableScopeId(
-    isSoftFocusActiveScopeInjector,
-  );
 
   const setHotkeyScope = useSetHotkeyScope();
 
@@ -26,7 +19,7 @@ export const useSetSoftFocus = () => {
       (newPosition: TableCellPosition) => {
         setSoftFocusPosition(newPosition);
 
-        set(isSoftFocusActiveState, true);
+        set(isSoftFocusActiveState(), true);
 
         setHotkeyScope(TableHotkeyScope.TableSoftFocus);
       },

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTableCell.ts

@@ -8,12 +8,11 @@ import { useIsFieldEmpty } from '@/object-record/field/hooks/useIsFieldEmpty';
 import { entityFieldInitialValueFamilyState } from '@/object-record/field/states/entityFieldInitialValueFamilyState';
 import { FieldInitialValue } from '@/object-record/field/types/FieldInitialValue';
 import { EntityDeleteContext } from '@/object-record/record-table/contexts/EntityDeleteHookContext';
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
 import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
@@ -27,15 +26,10 @@ export const DEFAULT_CELL_SCOPE: HotkeyScope = {
 };
 
 export const useTableCell = () => {
-  const { scopeId: recordTableScopeId } = useRecordTable();
+  const { objectMetadataConfigState, tableRowIdsState } =
+    useRecordTableStates();
 
-  const { objectMetadataConfigScopeInjector } = getRecordTableScopeInjector();
+  const objectMetadataConfig = useRecoilValue(objectMetadataConfigState());
-
-  const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates();
-
-  const objectMetadataConfig = useRecoilValue(
-    injectStateWithRecordTableScopeId(objectMetadataConfigScopeInjector),
-  );
 
   const basePathToShowPage = objectMetadataConfig?.basePathToShowPage;
 
@@ -43,8 +37,7 @@ export const useTableCell = () => {
   const setHotkeyScope = useSetHotkeyScope();
   const { setDragSelectionStartEnabled } = useDragSelect();
 
-  const closeCurrentTableCellInEditMode =
+  const closeCurrentTableCellInEditMode = useCloseCurrentTableCellInEditMode();
-    useCloseCurrentTableCellInEditMode(recordTableScopeId);
 
   const customCellHotkeyScope = useContext(CellHotkeyScopeContext);
 
@@ -66,12 +59,8 @@ export const useTableCell = () => {
     }),
   );
 
-  const { tableRowIdsScopeInjector } = getRecordTableScopeInjector();
-
   const deleteRow = useRecoilCallback(({ snapshot }) => async () => {
-    const tableRowIds = snapshot
+    const tableRowIds = getSnapshotValue(snapshot, tableRowIdsState());
-      .getLoadable(tableRowIdsScopeInjector(recordTableScopeId))
-      .getValue();
 
     await deleteOneRecord(tableRowIds[0]);
   });

packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useCurrentRowSelected.ts

@@ -1,24 +1,15 @@
 import { useContext } from 'react';
 import { useRecoilCallback, useRecoilValue } from 'recoil';
 
-import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 import { RowIdContext } from '../../contexts/RowIdContext';
 
 export const useCurrentRowSelected = () => {
   const currentRowId = useContext(RowIdContext);
 
-  const { isRowSelectedScopeInjector } = getRecordTableScopeInjector();
+  const { isRowSelectedFamilyState } = useRecordTableStates();
-
-  const {
-    injectFamilyStateWithRecordTableScopeId,
-    injectFamilySnapshotValueWithRecordTableScopeId,
-  } = useRecordTableScopedStates();
-
-  const isRowSelectedFamilyState = injectFamilyStateWithRecordTableScopeId(
-    isRowSelectedScopeInjector,
-  );
 
   const isRowSelected = useRecoilValue(
     isRowSelectedFamilyState(currentRowId ?? ''),
@@ -29,10 +20,10 @@ export const useCurrentRowSelected = () => {
       (newSelectedState: boolean) => {
         if (!currentRowId) return;
 
-        const isRowSelected = injectFamilySnapshotValueWithRecordTableScopeId(
+        const isRowSelected = getSnapshotValue(
           snapshot,
-          isRowSelectedScopeInjector,
+          isRowSelectedFamilyState(currentRowId),
-        )(currentRowId);
+        );
 
         if (newSelectedState && !isRowSelected) {
           set(isRowSelectedFamilyState(currentRowId), true);
@@ -40,12 +31,7 @@ export const useCurrentRowSelected = () => {
           set(isRowSelectedFamilyState(currentRowId), false);
         }
       },
-    [
+    [currentRowId, isRowSelectedFamilyState],
-      currentRowId,
-      injectFamilySnapshotValueWithRecordTableScopeId,
-      isRowSelectedFamilyState,
-      isRowSelectedScopeInjector,
-    ],
   );
 
   return {

packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedFamilyStateScopeMap.ts

@@ -1,9 +1,9 @@
 import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';
 
-export const isRowSelectedScopedFamilyState = createFamilyStateScopeMap<
+export const isRowSelectedFamilyStateScopeMap = createFamilyStateScopeMap<
   boolean,
   string
 >({
-  key: 'isRowSelectedFamilyState',
+  key: 'isRowSelectedFamilyStateScopeMap',
   defaultValue: false,
 });

packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsStateScopeMap.ts

@@ -3,9 +3,9 @@ import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createSta
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
-export const availableTableColumnsScopedState = createStateScopeMap<
+export const availableTableColumnsStateScopeMap = createStateScopeMap<
   ColumnDefinition<FieldMetadata>[]
 >({
-  key: 'availableTableColumnsScopedState',
+  key: 'availableTableColumnsStateScopeMap',
   defaultValue: [],
 });

packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionStateScopeMap.ts

@@ -2,9 +2,9 @@ import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createSta
 
 import { TableCellPosition } from '../types/TableCellPosition';
 
-export const currentTableCellInEditModePositionScopedState =
+export const currentTableCellInEditModePositionStateScopeMap =
   createStateScopeMap<TableCellPosition>({
-    key: 'currentTableCellInEditModePositionScopedState',
+    key: 'currentTableCellInEditModePositionStateScopeMap',
     defaultValue: {
       row: 0,
       column: 1,

packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingStateScopeMap.ts

@@ -1,7 +1,7 @@
 import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const isRecordTableInitialLoadingScopedState =
+export const isRecordTableInitialLoadingStateScopeMap =
   createStateScopeMap<boolean>({
-    key: 'isRecordTableInitialLoadingScopedState',
+    key: 'isRecordTableInitialLoadingStateScopeMap',
     defaultValue: true,
   });

packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveScopedState.ts

@@ -1,6 +0,0 @@
-import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
-
-export const isSoftFocusActiveScopedState = createStateScopeMap<boolean>({
-  key: 'isSoftFocusActiveScopedState',
-  defaultValue: false,
-});

packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveStateScopeMap.ts

@@ -1,6 +1,6 @@
 import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const tableLastRowVisibleScopedState = createStateScopeMap<boolean>({
+export const isSoftFocusActiveStateScopeMap = createStateScopeMap<boolean>({
-  key: 'tableLastRowVisibleScopedState',
+  key: 'isSoftFocusActiveStateScopeMap',
   defaultValue: false,
 });

packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellFamilyStateScopeMap.ts

@@ -0,0 +1,9 @@
+import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';
+
+import { TableCellPosition } from '../types/TableCellPosition';
+
+export const isSoftFocusOnTableCellFamilyStateScopeMap =
+  createFamilyStateScopeMap<boolean, TableCellPosition>({
+    key: 'isSoftFocusOnTableCellFamilyStateScopeMap',
+    defaultValue: false,
+  });

packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeFamilyStateScopeMap.ts

@@ -2,8 +2,8 @@ import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/cre
 
 import { TableCellPosition } from '../types/TableCellPosition';
 
-export const isSoftFocusOnTableCellScopedFamilyState =
+export const isTableCellInEditModeFamilyStateScopeMap =
   createFamilyStateScopeMap<boolean, TableCellPosition>({
-    key: 'isSoftFocusOnTableCellScopedFamilyState',
+    key: 'isTableCellInEditModeFamilyStateScopeMap',
     defaultValue: false,
   });

packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeScopedFamilyState.ts

@@ -1,11 +0,0 @@
-import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';
-
-import { TableCellPosition } from '../types/TableCellPosition';
-
-export const isTableCellInEditModeScopedFamilyState = createFamilyStateScopeMap<
-  boolean,
-  TableCellPosition
->({
-  key: 'isTableCellInEditModeScopedFamilyState',
-  defaultValue: false,
-});

packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsStateScopeMap.ts

@@ -1,6 +1,6 @@
 import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const numberOfTableRowsScopedState = createStateScopeMap<number>({
+export const numberOfTableRowsStateScopeMap = createStateScopeMap<number>({
-  key: 'numberOfTableRowsScopedState',
+  key: 'numberOfTableRowsStateScopeMap',
   defaultValue: 0,
 });

packages/twenty-front/src/modules/object-record/record-table/states/objectMetadataConfigStateScopeMap.ts

@@ -1,8 +1,8 @@
 import { ObjectMetadataConfig } from '@/object-record/record-table/types/ObjectMetadataConfig';
 import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const objectMetadataConfigScopedState =
+export const objectMetadataConfigStateScopeMap =
   createStateScopeMap<ObjectMetadataConfig | null>({
-    key: 'objectMetadataConfigScopedState',
+    key: 'objectMetadataConfigStateScopeMap',
     defaultValue: null,
   });

packages/twenty-front/src/modules/object-record/record-table/states/objectNamePluralStateScopeMap.ts

@@ -0,0 +1,6 @@
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
+
+export const objectNamePluralStateScopeMap = createStateScopeMap<string>({
+  key: 'objectNamePlural',
+  defaultValue: '',
+});

packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeStateScopeMap.ts

@@ -3,9 +3,9 @@ import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createSta
 import { FieldMetadata } from '../../field/types/FieldMetadata';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
-export const onColumnsChangeScopedState = createStateScopeMap<
+export const onColumnsChangeStateScopeMap = createStateScopeMap<
   ((columns: ColumnDefinition<FieldMetadata>[]) => void) | undefined
 >({
-  key: 'onColumnsChangeScopedState',
+  key: 'onColumnsChangeStateScopeMap',
   defaultValue: undefined,
 });

packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeStateScopeMap.ts

@@ -1,8 +1,8 @@
 import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const onEntityCountChangeScopedState = createStateScopeMap<
+export const onEntityCountChangeStateScopeMap = createStateScopeMap<
   ((entityCount: number) => void) | undefined
 >({
-  key: 'onEntityCountChangeScopedState',
+  key: 'onEntityCountChangeStateScopeMap',
   defaultValue: undefined,
 });

packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetStateScopeMap.ts

@@ -1,6 +1,6 @@
 import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const resizeFieldOffsetScopedState = createStateScopeMap<number>({
+export const resizeFieldOffsetStateScopeMap = createStateScopeMap<number>({
-  key: 'resizeFieldOffsetScopedState',
+  key: 'resizeFieldOffsetStateScopeMap',
   defaultValue: 0,
 });

packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusSelectorScopeMap.ts

@@ -1,19 +1,19 @@
 import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
 
 import { AllRowsSelectedStatus } from '../../types/AllRowSelectedStatus';
-import { numberOfTableRowsScopedState } from '../numberOfTableRowsScopedState';
+import { numberOfTableRowsStateScopeMap } from '../numberOfTableRowsStateScopeMap';
 
-import { selectedRowIdsScopedSelector } from './selectedRowIdsScopedSelector';
+import { selectedRowIdsSelectorScopeMap } from './selectedRowIdsSelectorScopeMap';
 
-export const allRowsSelectedStatusScopedSelector =
+export const allRowsSelectedStatusSelectorScopeMap =
   createSelectorScopeMap<AllRowsSelectedStatus>({
-    key: 'allRowsSelectedStatusScopedSelector',
+    key: 'allRowsSelectedStatusSelectorScopeMap',
     get:
       ({ scopeId }) =>
       ({ get }) => {
-        const numberOfRows = get(numberOfTableRowsScopedState({ scopeId }));
+        const numberOfRows = get(numberOfTableRowsStateScopeMap({ scopeId }));
 
-        const selectedRowIds = get(selectedRowIdsScopedSelector({ scopeId }));
+        const selectedRowIds = get(selectedRowIdsSelectorScopeMap({ scopeId }));
 
         const numberOfSelectedRows = selectedRowIds.length;
 

packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsSelectorScopeMap.ts

@@ -1,17 +1,17 @@
 import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
 
-import { availableTableColumnsScopedState } from '../availableTableColumnsScopedState';
+import { availableTableColumnsStateScopeMap } from '../availableTableColumnsStateScopeMap';
-import { tableColumnsScopedState } from '../tableColumnsScopedState';
+import { tableColumnsStateScopeMap } from '../tableColumnsStateScopeMap';
 
-export const hiddenTableColumnsScopedSelector = createSelectorScopeMap({
+export const hiddenTableColumnsSelectorScopeMap = createSelectorScopeMap({
-  key: 'hiddenTableColumnsScopedSelector',
+  key: 'hiddenTableColumnsSelectorScopeMap',
   get:
     ({ scopeId }) =>
     ({ get }) => {
-      const columns = get(tableColumnsScopedState({ scopeId }));
+      const columns = get(tableColumnsStateScopeMap({ scopeId }));
       const columnKeys = columns.map(({ fieldMetadataId }) => fieldMetadataId);
       const otherAvailableColumns = get(
-        availableTableColumnsScopedState({ scopeId }),
+        availableTableColumnsStateScopeMap({ scopeId }),
       ).filter(({ fieldMetadataId }) => !columnKeys.includes(fieldMetadataId));
 
       return [

packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsScopedSelector.ts

@@ -1,11 +0,0 @@
-import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
-
-import { tableColumnsScopedState } from '../tableColumnsScopedState';
-
-export const numberOfTableColumnsScopedSelector = createSelectorScopeMap({
-  key: 'numberOfTableColumnsScopedSelector',
-  get:
-    ({ scopeId }) =>
-    ({ get }) =>
-      get(tableColumnsScopedState({ scopeId })).length,
-});

packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsSelectorScopeMap.ts

@@ -0,0 +1,11 @@
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
+
+import { tableColumnsStateScopeMap } from '../tableColumnsStateScopeMap';
+
+export const numberOfTableColumnsSelectorScopeMap = createSelectorScopeMap({
+  key: 'numberOfTableColumnsSelectorScopeMap',
+  get:
+    ({ scopeId }) =>
+    ({ get }) =>
+      get(tableColumnsStateScopeMap({ scopeId })).length,
+});

packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsScopedSelector.ts

@@ -1,23 +0,0 @@
-import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
-
-import { isRowSelectedScopedFamilyState } from '../../record-table-row/states/isRowSelectedScopedFamilyState';
-import { tableRowIdsScopedState } from '../tableRowIdsScopedState';
-
-export const selectedRowIdsScopedSelector = createSelectorScopeMap<string[]>({
-  key: 'selectedRowIdsScopedSelector',
-  get:
-    ({ scopeId }) =>
-    ({ get }) => {
-      const rowIds = get(tableRowIdsScopedState({ scopeId }));
-
-      return rowIds.filter(
-        (rowId) =>
-          get(
-            isRowSelectedScopedFamilyState({
-              scopeId,
-              familyKey: rowId,
-            }),
-          ) === true,
-      );
-    },
-});

packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsSelectorScopeMap.ts

@@ -0,0 +1,23 @@
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
+
+import { isRowSelectedFamilyStateScopeMap } from '../../record-table-row/states/isRowSelectedFamilyStateScopeMap';
+import { tableRowIdsStateScopeMap } from '../tableRowIdsStateScopeMap';
+
+export const selectedRowIdsSelectorScopeMap = createSelectorScopeMap<string[]>({
+  key: 'selectedRowIdsSelectorScopeMap',
+  get:
+    ({ scopeId }) =>
+    ({ get }) => {
+      const rowIds = get(tableRowIdsStateScopeMap({ scopeId }));
+
+      return rowIds.filter(
+        (rowId) =>
+          get(
+            isRowSelectedFamilyStateScopeMap({
+              scopeId,
+              familyKey: rowId,
+            }),
+          ) === true,
+      );
+    },
+});

packages/twenty-front/src/modules/object-record/record-table/states/selectors/tableColumnsByKeySelectorScopeMap.ts

@@ -2,14 +2,14 @@ import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
 import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
 
 import { ColumnDefinition } from '../../types/ColumnDefinition';
-import { tableColumnsScopedState } from '../tableColumnsScopedState';
+import { tableColumnsStateScopeMap } from '../tableColumnsStateScopeMap';
 
-export const tableColumnsByKeyScopedSelector = createSelectorScopeMap({
+export const tableColumnsByKeySelectorScopeMap = createSelectorScopeMap({
-  key: 'tableColumnsByKeyScopedSelector',
+  key: 'tableColumnsByKeySelectorScopeMap',
   get:
     ({ scopeId }) =>
     ({ get }) =>
-      get(tableColumnsScopedState({ scopeId })).reduce<
+      get(tableColumnsStateScopeMap({ scopeId })).reduce<
         Record<string, ColumnDefinition<FieldMetadata>>
       >(
         (result, column) => ({ ...result, [column.fieldMetadataId]: column }),

packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsSelectorScopeMap.ts

@@ -1,16 +1,16 @@
 import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
 
-import { availableTableColumnsScopedState } from '../availableTableColumnsScopedState';
+import { availableTableColumnsStateScopeMap } from '../availableTableColumnsStateScopeMap';
-import { tableColumnsScopedState } from '../tableColumnsScopedState';
+import { tableColumnsStateScopeMap } from '../tableColumnsStateScopeMap';
 
-export const visibleTableColumnsScopedSelector = createSelectorScopeMap({
+export const visibleTableColumnsSelectorScopeMap = createSelectorScopeMap({
-  key: 'visibleTableColumnsScopedSelector',
+  key: 'visibleTableColumnsSelectorScopeMap',
   get:
     ({ scopeId }) =>
     ({ get }) => {
-      const columns = get(tableColumnsScopedState({ scopeId }));
+      const columns = get(tableColumnsStateScopeMap({ scopeId }));
       const availableColumnKeys = get(
-        availableTableColumnsScopedState({ scopeId }),
+        availableTableColumnsStateScopeMap({ scopeId }),
       ).map(({ fieldMetadataId }) => fieldMetadataId);
 
       return [...columns]

packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionStateScopeMap.ts

@@ -2,9 +2,9 @@ import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createSta
 
 import { TableCellPosition } from '../types/TableCellPosition';
 
-export const softFocusPositionScopedState =
+export const softFocusPositionStateScopeMap =
   createStateScopeMap<TableCellPosition>({
-    key: 'softFocusPositionScopedState',
+    key: 'softFocusPositionStateScopeMap',
     defaultValue: {
       row: 0,
       column: 1,

packages/twenty-front/src/modules/object-record/record-table/states/tableColumnsStateScopeMap.ts

@@ -3,9 +3,9 @@ import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createSta
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
-export const tableColumnsScopedState = createStateScopeMap<
+export const tableColumnsStateScopeMap = createStateScopeMap<
   ColumnDefinition<FieldMetadata>[]
 >({
-  key: 'tableColumnsScopedState',
+  key: 'tableColumnsStateScopeMap',
   defaultValue: [],
 });

packages/twenty-front/src/modules/object-record/record-table/states/tableFiltersStateScopeMap.ts

@@ -2,7 +2,7 @@ import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createSta
 
 import { Filter } from '../../object-filter-dropdown/types/Filter';
 
-export const tableFiltersScopedState = createStateScopeMap<Filter[]>({
+export const tableFiltersStateScopeMap = createStateScopeMap<Filter[]>({
-  key: 'tableFiltersScopedState',
+  key: 'tableFiltersStateScopeMap',
   defaultValue: [],
 });

packages/twenty-front/src/modules/object-record/record-table/states/tableLastRowVisibleStateScopeMap.ts

@@ -0,0 +1,6 @@
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
+
+export const tableLastRowVisibleStateScopeMap = createStateScopeMap<boolean>({
+  key: 'tableLastRowVisibleStateScopeMap',
+  defaultValue: false,
+});

packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsStateScopeMap.ts

@@ -1,6 +1,6 @@
 import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const tableRowIdsScopedState = createStateScopeMap<string[]>({
+export const tableRowIdsStateScopeMap = createStateScopeMap<string[]>({
-  key: 'tableRowIdsScopedState',
+  key: 'tableRowIdsStateScopeMap',
   defaultValue: [],
 });

packages/twenty-front/src/modules/object-record/record-table/states/tableSortsStateScopeMap.ts

@@ -2,7 +2,7 @@ import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createSta
 
 import { Sort } from '../../object-sort-dropdown/types/Sort';
 
-export const tableSortsScopedState = createStateScopeMap<Sort[]>({
+export const tableSortsStateScopeMap = createStateScopeMap<Sort[]>({
-  key: 'tableSortsScopedState',
+  key: 'tableSortsStateScopeMap',
   defaultValue: [],
 });

packages/twenty-front/src/modules/object-record/record-table/utils/getRecordTableScopeInjector.ts

@@ -1,145 +0,0 @@
-import { isRowSelectedScopedFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedScopedFamilyState';
-import { currentTableCellInEditModePositionScopedState } from '@/object-record/record-table/states/currentTableCellInEditModePositionScopedState';
-import { isRecordTableInitialLoadingScopedState } from '@/object-record/record-table/states/isRecordTableInitialLoadingScopedState';
-import { isSoftFocusActiveScopedState } from '@/object-record/record-table/states/isSoftFocusActiveScopedState';
-import { isSoftFocusOnTableCellScopedFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellScopedFamilyState';
-import { isTableCellInEditModeScopedFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeScopedFamilyState';
-import { numberOfTableRowsScopedState } from '@/object-record/record-table/states/numberOfTableRowsScopedState';
-import { objectMetadataConfigScopedState } from '@/object-record/record-table/states/objectMetadataConfigScopedState';
-import { resizeFieldOffsetScopedState } from '@/object-record/record-table/states/resizeFieldOffsetScopedState';
-import { allRowsSelectedStatusScopedSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusScopedSelector';
-import { numberOfTableColumnsScopedSelector } from '@/object-record/record-table/states/selectors/numberOfTableColumnsScopedSelector';
-import { selectedRowIdsScopedSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsScopedSelector';
-import { softFocusPositionScopedState } from '@/object-record/record-table/states/softFocusPositionScopedState';
-import { tableLastRowVisibleScopedState } from '@/object-record/record-table/states/tableLastRowVisibleScopedState';
-import { tableRowIdsScopedState } from '@/object-record/record-table/states/tableRowIdsScopedState';
-import { getFamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector';
-import { getScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector';
-import { getSelectorScopeInjector } from '@/ui/utilities/recoil-scope/utils/getSelectorScopeInjector';
-
-import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState';
-import { onColumnsChangeScopedState } from '../states/onColumnsChangeScopedState';
-import { onEntityCountChangeScopedState } from '../states/onEntityCountChangeScopedState';
-import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
-import { tableColumnsByKeyScopedSelector } from '../states/selectors/tableColumnsByKeyScopedSelector';
-import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
-import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
-import { tableFiltersScopedState } from '../states/tableFiltersScopedState';
-import { tableSortsScopedState } from '../states/tableSortsScopedState';
-
-export const getRecordTableScopeInjector = () => {
-  const availableTableColumnsScopeInjector = getScopeInjector(
-    availableTableColumnsScopedState,
-  );
-
-  const tableFiltersScopeInjector = getScopeInjector(tableFiltersScopedState);
-
-  const tableSortsScopeInjector = getScopeInjector(tableSortsScopedState);
-
-  const tableColumnsScopeInjector = getScopeInjector(tableColumnsScopedState);
-
-  const objectMetadataConfigScopeInjector = getScopeInjector(
-    objectMetadataConfigScopedState,
-  );
-
-  const tableColumnsByKeyScopeInjector = getSelectorScopeInjector(
-    tableColumnsByKeyScopedSelector,
-  );
-
-  const hiddenTableColumnsScopeInjector = getSelectorScopeInjector(
-    hiddenTableColumnsScopedSelector,
-  );
-
-  const visibleTableColumnsScopeInjector = getSelectorScopeInjector(
-    visibleTableColumnsScopedSelector,
-  );
-
-  const onColumnsChangeScopeInjector = getScopeInjector(
-    onColumnsChangeScopedState,
-  );
-
-  const onEntityCountScopeInjector = getScopeInjector(
-    onEntityCountChangeScopedState,
-  );
-
-  const tableLastRowVisibleScopeInjector = getScopeInjector(
-    tableLastRowVisibleScopedState,
-  );
-
-  const softFocusPositionScopeInjector = getScopeInjector(
-    softFocusPositionScopedState,
-  );
-
-  const numberOfTableRowsScopeInjector = getScopeInjector(
-    numberOfTableRowsScopedState,
-  );
-
-  const numberOfTableColumnsScopeInjector = getSelectorScopeInjector(
-    numberOfTableColumnsScopedSelector,
-  );
-
-  const currentTableCellInEditModePositionScopeInjector = getScopeInjector(
-    currentTableCellInEditModePositionScopedState,
-  );
-
-  const isTableCellInEditModeScopeInjector = getFamilyScopeInjector(
-    isTableCellInEditModeScopedFamilyState,
-  );
-
-  const isSoftFocusActiveScopeInjector = getScopeInjector(
-    isSoftFocusActiveScopedState,
-  );
-
-  const isSoftFocusOnTableCellScopeInjector = getFamilyScopeInjector(
-    isSoftFocusOnTableCellScopedFamilyState,
-  );
-
-  const tableRowIdsScopeInjector = getScopeInjector(tableRowIdsScopedState);
-
-  const isRowSelectedScopeInjector = getFamilyScopeInjector(
-    isRowSelectedScopedFamilyState,
-  );
-
-  const allRowsSelectedStatusScopeInjector = getSelectorScopeInjector(
-    allRowsSelectedStatusScopedSelector,
-  );
-
-  const selectedRowIdsScopeInjector = getSelectorScopeInjector(
-    selectedRowIdsScopedSelector,
-  );
-
-  const isRecordTableInitialLoadingScopeInjector = getScopeInjector(
-    isRecordTableInitialLoadingScopedState,
-  );
-
-  const resizeFieldOffsetScopeInjector = getScopeInjector(
-    resizeFieldOffsetScopedState,
-  );
-
-  return {
-    availableTableColumnsScopeInjector,
-    tableFiltersScopeInjector,
-    tableSortsScopeInjector,
-    tableColumnsScopeInjector,
-    objectMetadataConfigScopeInjector,
-    tableColumnsByKeyScopeInjector,
-    hiddenTableColumnsScopeInjector,
-    visibleTableColumnsScopeInjector,
-    onColumnsChangeScopeInjector,
-    onEntityCountScopeInjector,
-    tableLastRowVisibleScopeInjector,
-    softFocusPositionScopeInjector,
-    numberOfTableRowsScopeInjector,
-    numberOfTableColumnsScopeInjector,
-    currentTableCellInEditModePositionScopeInjector,
-    isTableCellInEditModeScopeInjector,
-    isSoftFocusActiveScopeInjector,
-    isSoftFocusOnTableCellScopeInjector,
-    tableRowIdsScopeInjector,
-    isRowSelectedScopeInjector,
-    allRowsSelectedStatusScopeInjector,
-    selectedRowIdsScopeInjector,
-    isRecordTableInitialLoadingScopeInjector,
-    resizeFieldOffsetScopeInjector,
-  };
-};

packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx

@@ -14,7 +14,8 @@ const StyledContainer = styled.div`
 `;
 
 export const SignInBackgroundMockContainer = () => {
-  const recordTableId = 'companies';
+  const objectNamePlural = 'companies';
+  const recordTableId = 'Sign-up-mock-record-table-id';
   const viewBarId = 'companies-mock';
 
   return (
@@ -27,10 +28,12 @@ export const SignInBackgroundMockContainer = () => {
         optionsDropdownScopeId={TableOptionsDropdownId}
       />
       <SignInBackgroundMockContainerEffect
+        objectNamePlural={objectNamePlural}
         recordTableId={recordTableId}
         viewId={viewBarId}
       />
       <RecordTableWithWrappers
+        objectNamePlural={objectNamePlural}
         recordTableId={recordTableId}
         viewBarId={viewBarId}
         createRecord={() => {}}

packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx

@@ -16,23 +16,24 @@ import { ViewType } from '@/views/types/ViewType';
 import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
 
 type SignInBackgroundMockContainerEffectProps = {
+  objectNamePlural: string;
   recordTableId: string;
   viewId: string;
 };
 
 export const SignInBackgroundMockContainerEffect = ({
+  objectNamePlural,
   recordTableId,
   viewId,
 }: SignInBackgroundMockContainerEffectProps) => {
   const {
-    scopeId: objectNamePlural,
     setAvailableTableColumns,
     setOnEntityCountChange,
     setRecordTableData,
     setTableColumns,
     setObjectMetadataConfig,
   } = useRecordTable({
-    recordTableScopeId: recordTableId,
+    recordTableId,
   });
 
   const { objectNameSingular } = useObjectNameSingularFromPlural({
@@ -90,7 +91,8 @@ export const SignInBackgroundMockContainerEffect = ({
 
   const { setActionBarEntries, setContextMenuEntries } =
     useRecordTableContextMenuEntries({
-      recordTableScopeId: recordTableId,
+      objectNamePlural,
+      recordTableId,
     });
 
   useEffect(() => {

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useInternalHotkeyScopeManagement.test.tsx

@@ -27,7 +27,7 @@ describe('useInternalHotkeyScopeManagement', () => {
         const { dropdownHotkeyScopeState } = useDropdownStates({
           dropdownScopeId,
         });
-        const dropdownHotkeyScope = useRecoilValue(dropdownHotkeyScopeState);
+        const dropdownHotkeyScope = useRecoilValue(dropdownHotkeyScopeState());
         return { dropdownHotkeyScope };
       },
       {

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts

@@ -18,12 +18,14 @@ export const useDropdown = (dropdownId?: string) => {
     goBackToPreviousHotkeyScope,
   } = usePreviousHotkeyScope();
 
-  const [dropdownHotkeyScope] = useRecoilState(dropdownHotkeyScopeState);
+  const [dropdownHotkeyScope] = useRecoilState(dropdownHotkeyScopeState());
 
-  const [dropdownWidth, setDropdownWidth] = useRecoilState(dropdownWidthState);
+  const [dropdownWidth, setDropdownWidth] =
+    useRecoilState(dropdownWidthState());
 
-  const [isDropdownOpen, setIsDropdownOpen] =
+  const [isDropdownOpen, setIsDropdownOpen] = useRecoilState(
-    useRecoilState(isDropdownOpenState);
+    isDropdownOpenState(),
+  );
 
   const closeDropdown = () => {
     goBackToPreviousHotkeyScope();

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useInternalHotkeyScopeManagement.ts

@@ -15,7 +15,7 @@ export const useInternalHotkeyScopeManagement = ({
   const { dropdownHotkeyScopeState } = useDropdownStates({ dropdownScopeId });
 
   const [dropdownHotkeyScope, setDropdownHotkeyScope] = useRecoilState(
-    dropdownHotkeyScopeState,
+    dropdownHotkeyScopeState(),
   );
 
   useEffect(() => {

packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/__tests__/useSelectableList.test.ts

@@ -21,7 +21,7 @@ describe('useSelectableList', () => {
           selectableListScopeId,
         });
 
-        const selectableItemIds = useRecoilValue(selectableItemIdsState);
+        const selectableItemIds = useRecoilValue(selectableItemIdsState());
 
         return {
           setSelectableItemIds,
@@ -51,8 +51,9 @@ describe('useSelectableList', () => {
           selectableListScopeId,
         });
 
-        const [selectedItemId, setSelectedItemId] =
+        const [selectedItemId, setSelectedItemId] = useRecoilState(
-          useRecoilState(selectedItemIdState);
+          selectedItemIdState(),
+        );
 
         return {
           resetSelectedItem,

packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.tsx

@@ -39,10 +39,13 @@ export const useSelectableListHotKeys = (
   const handleSelect = useRecoilCallback(
     ({ snapshot, set }) =>
       (direction: Direction) => {
-        const selectedItemId = getSnapshotValue(snapshot, selectedItemIdState);
+        const selectedItemId = getSnapshotValue(
+          snapshot,
+          selectedItemIdState(),
+        );
         const selectableItemIds = getSnapshotValue(
           snapshot,
-          selectableItemIdsState,
+          selectableItemIdsState(),
         );
 
         const currentPosition = findPosition(selectableItemIds, selectedItemId);
@@ -103,7 +106,7 @@ export const useSelectableListHotKeys = (
         if (selectedItemId !== nextId) {
           if (nextId) {
             set(isSelectedItemIdSelector(nextId), true);
-            set(selectedItemIdState, nextId);
+            set(selectedItemIdState(), nextId);
           }
 
           if (selectedItemId) {
@@ -134,11 +137,11 @@ export const useSelectableListHotKeys = (
         () => {
           const selectedItemId = getSnapshotValue(
             snapshot,
-            selectedItemIdState,
+            selectedItemIdState(),
           );
           const onEnter = getSnapshotValue(
             snapshot,
-            selectableListOnEnterState,
+            selectableListOnEnterState(),
           );
 
           if (selectedItemId) {

packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts

@@ -13,12 +13,12 @@ export const useSelectableList = (selectableListId?: string) => {
     selectableListScopeId: selectableListId,
   });
 
-  const setSelectableItemIds = useSetRecoilState(selectableItemIdsState);
+  const setSelectableItemIds = useSetRecoilState(selectableItemIdsState());
   const setSelectableListOnEnter = useSetRecoilState(
-    selectableListOnEnterState,
+    selectableListOnEnterState(),
   );
 
-  const resetSelectedItemIdState = useResetRecoilState(selectedItemIdState);
+  const resetSelectedItemIdState = useResetRecoilState(selectedItemIdState());
 
   const resetSelectedItem = () => {
     resetSelectedItemIdState();

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -58,7 +58,7 @@ export const ShowPageRightContainer = ({
   const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED');
 
   const { activeTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
-  const activeTabId = useRecoilValue(activeTabIdState);
+  const activeTabId = useRecoilValue(activeTabIdState());
 
   if (!targetableObject) return <></>;
 

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

@@ -36,7 +36,7 @@ export const TabList = ({ tabs, tabListId }: TabListProps) => {
 
   const { activeTabIdState, setActiveTabId } = useTabList(tabListId);
 
-  const activeTabId = useRecoilValue(activeTabIdState);
+  const activeTabId = useRecoilValue(activeTabIdState());
 
   React.useEffect(() => {
     setActiveTabId(initialActiveTabId);

packages/twenty-front/src/modules/ui/layout/tab/hooks/useTabList.ts

@@ -7,7 +7,7 @@ export const useTabList = (tabListId?: string) => {
     tabListScopeId: `${tabListId}-scope`,
   });
 
-  const setActiveTabId = useSetRecoilState(activeTabIdState);
+  const setActiveTabId = useSetRecoilState(activeTabIdState());
 
   return {
     activeTabIdState,

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId.ts

@@ -0,0 +1,2 @@
+export const getScopeIdFromComponentId = (componentId?: string) =>
+  componentId ? `${componentId}-scope` : undefined;

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelector.ts

@@ -0,0 +1,12 @@
+import { RecoilValueReadOnly } from 'recoil';
+
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
+
+export const getSelector = <StateType>(
+  stateScopeMap: (
+    stateScopeMapKey: StateScopeMapKey,
+  ) => RecoilValueReadOnly<StateType>,
+  scopeId: string,
+) => {
+  return stateScopeMap({ scopeId });
+};

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getState.ts

@@ -6,5 +6,5 @@ export const getState = <StateType>(
   stateScopeMap: (stateScopeMapKey: StateScopeMapKey) => RecoilState<StateType>,
   scopeId: string,
 ) => {
-  return stateScopeMap({ scopeId });
+  return () => stateScopeMap({ scopeId });
 };