diff --git a/packages/twenty-front/src/modules/action-menu/states/actionMenuEntriesComponentSelector.ts b/packages/twenty-front/src/modules/action-menu/states/actionMenuEntriesComponentSelector.ts
index 921f97b38..9a87deb49 100644
--- a/packages/twenty-front/src/modules/action-menu/states/actionMenuEntriesComponentSelector.ts
+++ b/packages/twenty-front/src/modules/action-menu/states/actionMenuEntriesComponentSelector.ts
@@ -8,7 +8,7 @@ export const actionMenuEntriesComponentSelector = createComponentSelectorV2<
ActionMenuEntry[]
>({
key: 'actionMenuEntriesComponentSelector',
- instanceContext: ActionMenuComponentInstanceContext,
+ componentInstanceContext: ActionMenuComponentInstanceContext,
get:
({ instanceId }) =>
({ get }) =>
diff --git a/packages/twenty-front/src/modules/localization/utils/__tests__/formatTimeZoneLabel.test.ts b/packages/twenty-front/src/modules/localization/utils/__tests__/formatTimeZoneLabel.test.ts
index 64d53d898..ae60e98db 100644
--- a/packages/twenty-front/src/modules/localization/utils/__tests__/formatTimeZoneLabel.test.ts
+++ b/packages/twenty-front/src/modules/localization/utils/__tests__/formatTimeZoneLabel.test.ts
@@ -18,7 +18,7 @@ describe('formatTimeZoneLabel', () => {
it('should format the time zone label correctly when location is not included in the label', () => {
const ianaTimeZone = 'America/New_York';
- const expectedLabel = '(GMT-04:00) Eastern Daylight Time - New York';
+ const expectedLabel = '(GMT-05:00) Eastern Standard Time - New York';
const formattedLabel = formatTimeZoneLabel(ianaTimeZone);
diff --git a/packages/twenty-front/src/modules/object-record/hooks/__tests__/useObjectRecordTable.test.tsx b/packages/twenty-front/src/modules/object-record/hooks/__tests__/useObjectRecordTable.test.tsx
index 4cd4cdbff..58828525e 100644
--- a/packages/twenty-front/src/modules/object-record/hooks/__tests__/useObjectRecordTable.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/hooks/__tests__/useObjectRecordTable.test.tsx
@@ -4,8 +4,7 @@ import { ReactNode } from 'react';
import { mocks } from '@/auth/hooks/__mocks__/useAuth';
import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
-import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
const recordTableId = 'people';
@@ -24,12 +23,12 @@ const Wrapper = ({ children }: { children: ReactNode }) => {
return (
-
{children}
-
+
);
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
index 7b05d5874..e97dd2c59 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
@@ -1,5 +1,4 @@
import styled from '@emotion/styled';
-import { useContext } from 'react';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -11,7 +10,8 @@ import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/
import { useSelectFilter } from '@/object-record/object-filter-dropdown/hooks/useSelectFilter';
import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
@@ -21,6 +21,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-ui';
@@ -57,6 +58,8 @@ type ObjectFilterDropdownFilterSelectProps = {
export const ObjectFilterDropdownFilterSelect = ({
isAdvancedFilterButtonVisible,
}: ObjectFilterDropdownFilterSelectProps) => {
+ const { recordIndexId } = useContext(RecordIndexRootPropsContext);
+
const {
setObjectFilterDropdownSearchInput,
objectFilterDropdownSearchInputState,
@@ -78,15 +81,18 @@ export const ObjectFilterDropdownFilterSelect = ({
const availableFilterDefinitions = useRecoilComponentValueV2(
availableFilterDefinitionsComponentState,
);
- const { recordIndexId } = useContext(RecordIndexRootPropsContext);
- const { hiddenTableColumnsSelector, visibleTableColumnsSelector } =
- useRecordTableStates(recordIndexId);
- const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+ const visibleTableColumns = useRecoilComponentValueV2(
+ visibleTableColumnsComponentSelector,
+ recordIndexId,
+ );
const visibleColumnsIds = visibleTableColumns.map(
(column) => column.fieldMetadataId,
);
- const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector());
+ const hiddenTableColumns = useRecoilComponentValueV2(
+ hiddenTableColumnsComponentSelector,
+ recordIndexId,
+ );
const hiddenColumnIds = hiddenTableColumns.map(
(column) => column.fieldMetadataId,
);
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx
index df9044a82..16d060c53 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx
@@ -4,14 +4,13 @@ import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
import { MultipleFiltersDropdownButton } from '@/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton';
import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
import { within } from '@storybook/test';
-import { useSetRecoilState } from 'recoil';
import { ComponentDecorator } from 'twenty-ui';
import { FieldMetadataType } from '~/generated/graphql';
import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
@@ -30,9 +29,10 @@ const meta: Meta = {
instanceId,
);
- const { tableColumnsState } = useRecordTableStates(instanceId);
-
- const setTableColumns = useSetRecoilState(tableColumnsState);
+ const setTableColumns = useSetRecoilComponentStateV2(
+ tableColumnsComponentState,
+ instanceId,
+ );
setTableColumns([
{
@@ -91,15 +91,15 @@ const meta: Meta = {
- {} }}
+ {} }}
>
-
+
);
},
diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
index 4013db110..d6c04c398 100644
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
@@ -6,7 +6,8 @@ import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/co
import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useObjectSortDropdown';
import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope';
import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -15,6 +16,7 @@ import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/Styl
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { useContext } from 'react';
import { SORT_DIRECTIONS } from '../types/SortDirection';
@@ -77,6 +79,8 @@ export const ObjectSortDropdownButton = ({
resetSearchInput,
} = useObjectSortDropdown();
+ const { recordIndexId } = useContext(RecordIndexRootPropsContext);
+
const { isDropdownOpen } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
const handleButtonClick = () => {
@@ -94,15 +98,17 @@ export const ObjectSortDropdownButton = ({
const { getIcon } = useIcons();
- const { recordIndexId } = useContext(RecordIndexRootPropsContext);
- const { hiddenTableColumnsSelector, visibleTableColumnsSelector } =
- useRecordTableStates(recordIndexId);
-
- const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+ const visibleTableColumns = useRecoilComponentValueV2(
+ visibleTableColumnsComponentSelector,
+ recordIndexId,
+ );
const visibleColumnsIds = visibleTableColumns.map(
(column) => column.fieldMetadataId,
);
- const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector());
+ const hiddenTableColumns = useRecoilComponentValueV2(
+ hiddenTableColumnsComponentSelector,
+ recordIndexId,
+ );
const hiddenColumnIds = hiddenTableColumns.map(
(column) => column.fieldMetadataId,
);
diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx
index 638f5f8b4..0c73aff12 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx
@@ -1,5 +1,4 @@
import { useContext, useEffect } from 'react';
-import { useRecoilValue } from 'recoil';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
@@ -9,8 +8,13 @@ import { useHandleToggleColumnFilter } from '@/object-record/record-index/hooks/
import { useHandleToggleColumnSort } from '@/object-record/record-index/hooks/useHandleToggleColumnSort';
import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
+import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
+import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector';
+import { unselectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useSetRecordCountInCurrentView } from '@/views/hooks/useSetRecordCountInCurrentView';
+import { useRecoilValue } from 'recoil';
export const RecordIndexTableContainerEffect = () => {
const { recordIndexId, objectNameSingular } = useContext(
@@ -22,11 +26,8 @@ export const RecordIndexTableContainerEffect = () => {
const {
setAvailableTableColumns,
setOnEntityCountChange,
- selectedRowIdsSelector,
setOnToggleColumnFilter,
setOnToggleColumnSort,
- hasUserSelectedAllRowsState,
- unselectedRowIdsSelector,
} = useRecordTable({
recordTableId: recordIndexId,
});
@@ -78,9 +79,18 @@ export const RecordIndexTableContainerEffect = () => {
const setContextStoreTargetedRecords = useSetRecoilComponentStateV2(
contextStoreTargetedRecordsRuleComponentState,
);
- const hasUserSelectedAllRows = useRecoilValue(hasUserSelectedAllRowsState);
- const selectedRowIds = useRecoilValue(selectedRowIdsSelector());
- const unselectedRowIds = useRecoilValue(unselectedRowIdsSelector());
+ const hasUserSelectedAllRows = useRecoilComponentValueV2(
+ hasUserSelectedAllRowsComponentState,
+ recordIndexId,
+ );
+ const selectedRowIds = useRecoilComponentValueV2(
+ selectedRowIdsComponentSelector,
+ recordIndexId,
+ );
+ const unselectedRowIds = useRecoilComponentValueV2(
+ unselectedRowIdsComponentSelector,
+ recordIndexId,
+ );
const recordIndexFilters = useRecoilValue(recordIndexFiltersState);
diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleTrashColumnFilter.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleTrashColumnFilter.ts
index 31dac4ae7..157e06e14 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleTrashColumnFilter.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleTrashColumnFilter.ts
@@ -5,7 +5,8 @@ import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/u
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { isSoftDeleteFilterActiveComponentState } from '@/object-record/record-table/states/isSoftDeleteFilterActiveComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { useRecoilCallback } from 'recoil';
@@ -28,7 +29,12 @@ export const useHandleToggleTrashColumnFilter = ({
useColumnDefinitionsFromFieldMetadata(objectMetadataItem);
const { upsertCombinedViewFilter } = useUpsertCombinedViewFilters(viewBarId);
- const { isSoftDeleteActiveState } = useRecordTableStates(viewBarId);
+
+ const isSoftDeleteFilterActiveComponentRecoilState =
+ useRecoilComponentCallbackStateV2(
+ isSoftDeleteFilterActiveComponentState,
+ viewBarId,
+ );
const handleToggleTrashColumnFilter = useCallback(() => {
const trashFieldMetadata = objectMetadataItem.fields.find(
@@ -69,9 +75,9 @@ export const useHandleToggleTrashColumnFilter = ({
const toggleSoftDeleteFilterState = useRecoilCallback(
({ set }) =>
(currentState: boolean) => {
- set(isSoftDeleteActiveState, currentState);
+ set(isSoftDeleteFilterActiveComponentRecoilState, currentState);
},
- [isSoftDeleteActiveState],
+ [isSoftDeleteFilterActiveComponentRecoilState],
);
return {
handleToggleTrashColumnFilter,
diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts
index 92ec02909..a2b0e0348 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts
@@ -7,9 +7,12 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
import { computeViewRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeViewRecordGqlOperationFilter';
import { useRecordTableRecordGqlFields } from '@/object-record/record-index/hooks/useRecordTableRecordGqlFields';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
+import { tableFiltersComponentState } from '@/object-record/record-table/states/tableFiltersComponentState';
+import { tableSortsComponentState } from '@/object-record/record-table/states/tableSortsComponentState';
+import { tableViewFilterGroupsComponentState } from '@/object-record/record-table/states/tableViewFilterGroupsComponentState';
import { SIGN_IN_BACKGROUND_MOCK_COMPANIES } from '@/sign-in-background-mock/constants/SignInBackgroundMockCompanies';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { isNull } from '@sniptt/guards';
import { WorkspaceActivationStatus } from '~/generated/graphql';
@@ -21,12 +24,18 @@ export const useFindManyParams = (
objectNameSingular,
});
- const { tableFiltersState, tableSortsState, tableViewFilterGroupsState } =
- useRecordTableStates(recordTableId);
-
- const tableViewFilterGroups = useRecoilValue(tableViewFilterGroupsState);
- const tableFilters = useRecoilValue(tableFiltersState);
- const tableSorts = useRecoilValue(tableSortsState);
+ const tableViewFilterGroups = useRecoilComponentValueV2(
+ tableViewFilterGroupsComponentState,
+ recordTableId,
+ );
+ const tableFilters = useRecoilComponentValueV2(
+ tableFiltersComponentState,
+ recordTableId,
+ );
+ const tableSorts = useRecoilComponentValueV2(
+ tableSortsComponentState,
+ recordTableId,
+ );
const filter = computeViewRecordGqlOperationFilter(
tableFilters,
diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordTableRecordGqlFields.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordTableRecordGqlFields.ts
index 6e9661a12..ae0787744 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordTableRecordGqlFields.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordTableRecordGqlFields.ts
@@ -1,11 +1,10 @@
-import { useRecoilValue } from 'recoil';
-
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { getObjectMetadataIdentifierFields } from '@/object-metadata/utils/getObjectMetadataIdentifierFields';
import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { isDefined } from '~/utils/isDefined';
export const useRecordTableRecordGqlFields = ({
@@ -13,12 +12,12 @@ export const useRecordTableRecordGqlFields = ({
}: {
objectMetadataItem: ObjectMetadataItem;
}) => {
- const { visibleTableColumnsSelector } = useRecordTableStates();
-
const { imageIdentifierFieldMetadataItem, labelIdentifierFieldMetadataItem } =
getObjectMetadataIdentifierFields({ objectMetadataItem });
- const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+ const visibleTableColumns = useRecoilComponentValueV2(
+ visibleTableColumnsComponentSelector,
+ );
const identifierQueryFields: Record = {};
diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordData.ts b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordData.ts
index fe0878549..8ef63ca85 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordData.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordData.ts
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { isDefined } from '~/utils/isDefined';
@@ -15,6 +14,7 @@ import { useRecordBoardStates } from '@/object-record/record-board/hooks/interna
import { useFindManyParams } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
import { EXPORT_TABLE_DATA_DEFAULT_PAGE_SIZE } from '@/object-record/record-index/options/constants/ExportTableDataDefaultPageSize';
import { useRecordIndexOptionsForBoard } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { ViewType } from '@/views/types/ViewType';
@@ -61,8 +61,6 @@ export const useRecordData = ({
});
const [previousRecordCount, setPreviousRecordCount] = useState(0);
- const { visibleTableColumnsSelector } = useRecordTableStates(recordIndexId);
-
const { hiddenBoardFields } = useRecordIndexOptionsForBoard({
objectNameSingular: objectMetadataItem.nameSingular,
recordBoardId: recordIndexId,
@@ -74,7 +72,10 @@ export const useRecordData = ({
const hiddenKanbanFieldColumn = hiddenBoardFields.find(
(column) => column.metadata.fieldName === kanbanFieldMetadataName,
);
- const columns = useRecoilValue(visibleTableColumnsSelector());
+ const columns = useRecoilComponentValueV2(
+ visibleTableColumnsComponentSelector,
+ recordIndexId,
+ );
const contextStoreTargetedRecordsRule = useRecoilComponentValueV2(
contextStoreTargetedRecordsRuleComponentState,
diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForTable.ts b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForTable.ts
index e72bc7534..7e07284ed 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForTable.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForTable.ts
@@ -1,17 +1,21 @@
-import { useCallback } from 'react';
import { OnDragEndResponder } from '@hello-pangea/dnd';
-import { useRecoilValue } from 'recoil';
+import { useCallback } from 'react';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
+import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { moveArrayItem } from '~/utils/array/moveArrayItem';
export const useRecordIndexOptionsForTable = (recordTableId: string) => {
- const { hiddenTableColumnsSelector, visibleTableColumnsSelector } =
- useRecordTableStates(recordTableId);
-
- const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector());
- const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+ const hiddenTableColumns = useRecoilComponentValueV2(
+ hiddenTableColumnsComponentSelector,
+ recordTableId,
+ );
+ const visibleTableColumns = useRecoilComponentValueV2(
+ visibleTableColumnsComponentSelector,
+ recordTableId,
+ );
const { handleColumnVisibilityChange, handleColumnReorder } = useTableColumns(
{ recordTableId: recordTableId },
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
index f195b2b68..3efc8739f 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
@@ -1,14 +1,16 @@
import styled from '@emotion/styled';
import { isNonEmptyString, isNull } from '@sniptt/guards';
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { RecordTableContextProvider } from '@/object-record/record-table/components/RecordTableContextProvider';
import { RecordTableEmptyState } from '@/object-record/record-table/empty-state/components/RecordTableEmptyState';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { RecordTableBody } from '@/object-record/record-table/record-table-body/components/RecordTableBody';
import { RecordTableBodyEffect } from '@/object-record/record-table/record-table-body/components/RecordTableBodyEffect';
import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
-import { useRecoilValue } from 'recoil';
+import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
+import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
+import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
const StyledTable = styled.table`
border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -30,21 +32,20 @@ export const RecordTable = ({
objectNameSingular,
onColumnsChange,
}: RecordTableProps) => {
- const { scopeId } = useRecordTableStates(recordTableId);
-
- const {
- isRecordTableInitialLoadingState,
- tableRowIdsState,
- pendingRecordIdState,
- } = useRecordTableStates(recordTableId);
-
- const isRecordTableInitialLoading = useRecoilValue(
- isRecordTableInitialLoadingState,
+ const isRecordTableInitialLoading = useRecoilComponentValueV2(
+ isRecordTableInitialLoadingComponentState,
+ recordTableId,
);
- const tableRowIds = useRecoilValue(tableRowIdsState);
+ const tableRowIds = useRecoilComponentValueV2(
+ tableRowIdsComponentState,
+ recordTableId,
+ );
- const pendingRecordId = useRecoilValue(pendingRecordIdState);
+ const pendingRecordId = useRecoilComponentValueV2(
+ recordTablePendingRecordIdComponentState,
+ recordTableId,
+ );
const recordTableIsEmpty =
!isRecordTableInitialLoading &&
@@ -56,8 +57,8 @@ export const RecordTable = ({
}
return (
-
)}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableComponentInstance.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableComponentInstance.tsx
new file mode 100644
index 000000000..d200e62f1
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableComponentInstance.tsx
@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+
+import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
+
+import { RecordTableComponentInstanceEffect } from '@/object-record/record-table/components/RecordTableComponentInstanceEffect';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+
+type RecordTableComponentInstanceProps = {
+ children: ReactNode;
+ recordTableId: string;
+ onColumnsChange: (columns: ColumnDefinition[]) => void;
+};
+
+export const RecordTableComponentInstance = ({
+ children,
+ recordTableId,
+ onColumnsChange,
+}: RecordTableComponentInstanceProps) => {
+ return (
+
+
+ {children}
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/object-record/record-table/scopes/RecordTableScopeInitEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableComponentInstanceEffect.tsx
similarity index 80%
rename from packages/twenty-front/src/modules/object-record/record-table/scopes/RecordTableScopeInitEffect.tsx
rename to packages/twenty-front/src/modules/object-record/record-table/components/RecordTableComponentInstanceEffect.tsx
index 7daa68882..25c88181f 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/scopes/RecordTableScopeInitEffect.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableComponentInstanceEffect.tsx
@@ -4,14 +4,14 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
-type RecordTableScopeInitEffectProps = {
+type RecordTableComponentInstanceEffectProps = {
onColumnsChange: (columns: ColumnDefinition[]) => void;
onEntityCountChange?: (count: number) => void | Promise;
};
-export const RecordTableScopeInitEffect = ({
+export const RecordTableComponentInstanceEffect = ({
onColumnsChange,
-}: RecordTableScopeInitEffectProps) => {
+}: RecordTableComponentInstanceEffectProps) => {
const { setOnColumnsChange } = useRecordTable();
useEffect(() => {
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContextProvider.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContextProvider.tsx
index 8e827ae3e..5ad568dc0 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContextProvider.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContextProvider.tsx
@@ -1,10 +1,8 @@
import { ReactNode } from 'react';
-import { useRecoilValue } from 'recoil';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
import { useHandleContainerMouseEnter } from '@/object-record/record-table/hooks/internal/useHandleContainerMouseEnter';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useRecordTableMoveFocus } from '@/object-record/record-table/hooks/useRecordTableMoveFocus';
import { useCloseRecordTableCellV2 } from '@/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCellV2';
import { useMoveSoftFocusToCellOnHoverV2 } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2';
@@ -14,8 +12,10 @@ import {
} from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { useTriggerActionMenuDropdown } from '@/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown';
import { useUpsertRecord } from '@/object-record/record-table/record-table-cell/hooks/useUpsertRecord';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocusDirection';
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
export const RecordTableContextProvider = ({
viewBarId,
@@ -28,14 +28,13 @@ export const RecordTableContextProvider = ({
objectNameSingular: string;
children: ReactNode;
}) => {
- const { visibleTableColumnsSelector } = useRecordTableStates(recordTableId);
-
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
});
const { upsertRecord } = useUpsertRecord({
objectNameSingular,
+ recordTableId,
});
const handleUpsertRecord = ({
@@ -47,7 +46,7 @@ export const RecordTableContextProvider = ({
recordId: string;
fieldName: string;
}) => {
- upsertRecord(persistField, recordId, fieldName, recordTableId);
+ upsertRecord(persistField, recordId, fieldName);
};
const { openTableCell } = useOpenRecordTableCellV2(recordTableId);
@@ -90,7 +89,10 @@ export const RecordTableContextProvider = ({
recordTableId,
});
- const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+ const visibleTableColumns = useRecoilComponentValueV2(
+ visibleTableColumnsComponentSelector,
+ recordTableId,
+ );
return (
{
- const { tableRowIdsState } = useRecordTableStates();
-
- const tableRowIds = useRecoilValue(tableRowIdsState);
+ const tableRowIds = useRecoilComponentValueV2(tableRowIdsComponentState);
return (
<>
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx
index b03187cea..8846fc39f 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx
@@ -12,10 +12,10 @@ import {
useSetRecordValue,
} from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
import { ChipGeneratorsDecorator } from '~/testing/decorators/ChipGeneratorsDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
@@ -78,8 +78,8 @@ const meta: Meta = {
recordTableId: 'recordTableId',
}}
>
- {}}
>
-
+
);
diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyState.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyState.tsx
index 7ea1deb12..47988fbc5 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyState.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyState.tsx
@@ -4,22 +4,23 @@ import { RecordTableEmptyStateNoRecordAtAll } from '@/object-record/record-table
import { RecordTableEmptyStateNoRecordFoundForFilter } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordFoundForFilter';
import { RecordTableEmptyStateRemote } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateRemote';
import { RecordTableEmptyStateSoftDelete } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { isSoftDeleteFilterActiveComponentState } from '@/object-record/record-table/states/isSoftDeleteFilterActiveComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useContext } from 'react';
-import { useRecoilValue } from 'recoil';
export const RecordTableEmptyState = () => {
const { objectNameSingular, recordTableId, objectMetadataItem } =
useContext(RecordTableContext);
- const { isSoftDeleteActiveState } = useRecordTableStates(recordTableId);
-
const { totalCount } = useFindManyRecords({ objectNameSingular, limit: 1 });
const noRecordAtAll = totalCount === 0;
const isRemote = objectMetadataItem.isRemote;
- const isSoftDeleteActive = useRecoilValue(isSoftDeleteActiveState);
+ const isSoftDeleteActive = useRecoilComponentValueV2(
+ isSoftDeleteFilterActiveComponentState,
+ recordTableId,
+ );
if (isRemote) {
return ;
diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete.tsx
index a025916be..df31ce6a3 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete.tsx
@@ -4,10 +4,10 @@ import { useObjectLabel } from '@/object-metadata/hooks/useObjectLabel';
import { useHandleToggleTrashColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleTrashColumnFilter';
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
import { RecordTableEmptyStateDisplay } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { tableFiltersComponentState } from '@/object-record/record-table/states/tableFiltersComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useDeleteCombinedViewFilters } from '@/views/hooks/useDeleteCombinedViewFilters';
import { useContext } from 'react';
-import { useRecoilValue } from 'recoil';
export const RecordTableEmptyStateSoftDelete = () => {
const { objectMetadataItem, objectNameSingular, recordTableId } =
@@ -15,9 +15,11 @@ export const RecordTableEmptyStateSoftDelete = () => {
const { deleteCombinedViewFilter } =
useDeleteCombinedViewFilters(recordTableId);
- const { tableFiltersState } = useRecordTableStates(recordTableId);
- const tableFilters = useRecoilValue(tableFiltersState);
+ const tableFilters = useRecoilComponentValueV2(
+ tableFiltersComponentState,
+ recordTableId,
+ );
const { toggleSoftDeleteFilterState } = useHandleToggleTrashColumnFilter({
objectNameSingular,
diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordAtAll.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordAtAll.stories.tsx
index 0288c2560..b86d8c4f4 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordAtAll.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordAtAll.stories.tsx
@@ -1,7 +1,7 @@
import { Meta, StoryObj } from '@storybook/react';
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { RecordTableEmptyStateNoRecordAtAll } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordAtAll';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
import { ComponentDecorator } from 'twenty-ui';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
@@ -19,12 +19,12 @@ const meta: Meta = {
RecordTableDecorator,
(Story) => (
- {}}
>
-
+
),
],
diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordFoundForFilter.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordFoundForFilter.stories.tsx
index d46d99f58..fcb2ec8a3 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordFoundForFilter.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordFoundForFilter.stories.tsx
@@ -1,7 +1,7 @@
import { Meta, StoryObj } from '@storybook/react';
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { RecordTableEmptyStateNoRecordFoundForFilter } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordFoundForFilter';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
import { ComponentDecorator } from 'twenty-ui';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
@@ -20,12 +20,12 @@ const meta: Meta = {
RecordTableDecorator,
(Story) => (
- {}}
>
-
+
),
],
diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateRemote.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateRemote.stories.tsx
index 07155f840..f50744a49 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateRemote.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateRemote.stories.tsx
@@ -1,7 +1,7 @@
import { Meta, StoryObj } from '@storybook/react';
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { RecordTableEmptyStateRemote } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateRemote';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
import { ComponentDecorator } from 'twenty-ui';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
@@ -19,12 +19,12 @@ const meta: Meta = {
RecordTableDecorator,
(Story) => (
- {}}
>
-
+
),
],
diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx
index 85193da6b..0a1e6c66e 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx
@@ -1,7 +1,7 @@
import { Meta, StoryObj } from '@storybook/react';
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { RecordTableEmptyStateSoftDelete } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
import { ComponentDecorator } from 'twenty-ui';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
@@ -19,12 +19,12 @@ const meta: Meta = {
RecordTableDecorator,
(Story) => (
- {}}
>
-
+
),
],
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode.ts
index a9976aa05..e60a16a12 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode.ts
@@ -1,13 +1,20 @@
import { useRecoilCallback } from 'recoil';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
+import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
export const useCloseCurrentTableCellInEditMode = (recordTableId?: string) => {
- const {
- currentTableCellInEditModePositionState,
- isTableCellInEditModeFamilyState,
- } = useRecordTableStates(recordTableId);
+ const currentTableCellInEditModePositionState =
+ useRecoilComponentCallbackStateV2(
+ currentTableCellInEditModePositionComponentState,
+ recordTableId,
+ );
+ const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
+ isTableCellInEditModeComponentFamilyState,
+ recordTableId,
+ );
return useRecoilCallback(
({ set, snapshot }) => {
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useDisableSoftFocus.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useDisableSoftFocus.ts
index 2e1704dfa..90a5819f4 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useDisableSoftFocus.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useDisableSoftFocus.ts
@@ -1,14 +1,24 @@
import { useRecoilCallback } from 'recoil';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
+import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
+import { softFocusPositionComponentState } from '@/object-record/record-table/states/softFocusPositionComponentState';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
export const useDisableSoftFocus = (recordTableId?: string) => {
- const {
- softFocusPositionState,
- isSoftFocusActiveState,
- isSoftFocusOnTableCellFamilyState,
- } = useRecordTableStates(recordTableId);
+ const softFocusPositionState = useRecoilComponentCallbackStateV2(
+ softFocusPositionComponentState,
+ recordTableId,
+ );
+ const isSoftFocusActiveState = useRecoilComponentCallbackStateV2(
+ isSoftFocusActiveComponentState,
+ recordTableId,
+ );
+ const isSoftFocusOnTableCellFamilyState = useRecoilComponentCallbackStateV2(
+ isSoftFocusOnTableCellComponentFamilyState,
+ recordTableId,
+ );
return useRecoilCallback(
({ set, snapshot }) => {
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode.ts
index ecc422eec..96e1dfdbd 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode.ts
@@ -1,13 +1,20 @@
import { useRecoilCallback } from 'recoil';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
+import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
export const useGetIsSomeCellInEditModeState = (recordTableId?: string) => {
- const {
- currentTableCellInEditModePositionState,
- isTableCellInEditModeFamilyState,
- } = useRecordTableStates(recordTableId);
+ const currentTableCellInEditModePositionState =
+ useRecoilComponentCallbackStateV2(
+ currentTableCellInEditModePositionComponentState,
+ recordTableId,
+ );
+ const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
+ isTableCellInEditModeComponentFamilyState,
+ recordTableId,
+ );
return useRecoilCallback(
({ snapshot }) =>
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useHandleContainerMouseEnter.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useHandleContainerMouseEnter.ts
index 16b5f9235..6646f8b75 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useHandleContainerMouseEnter.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useHandleContainerMouseEnter.ts
@@ -6,10 +6,8 @@ import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/reco
import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
-import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
-import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
export type HandleContainerMouseEnterArgs = {
cellPosition: TableCellPosition;
@@ -20,24 +18,28 @@ export const useHandleContainerMouseEnter = ({
}: {
recordTableId: string;
}) => {
- const tableScopeId = getScopeIdFromComponentId(recordTableId);
-
const { moveSoftFocusToCell } =
useMoveSoftFocusToCellOnHoverV2(recordTableId);
+ const currentTableCellInEditModePositionState =
+ useRecoilComponentCallbackStateV2(
+ currentTableCellInEditModePositionComponentState,
+ recordTableId,
+ );
+
+ const isSoftFocusOnTableCellFamilyState = useRecoilComponentCallbackStateV2(
+ isSoftFocusOnTableCellComponentFamilyState,
+ recordTableId,
+ );
+
+ const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
+ isTableCellInEditModeComponentFamilyState,
+ recordTableId,
+ );
+
const handleContainerMouseEnter = useRecoilCallback(
({ snapshot, set }) =>
({ cellPosition }: HandleContainerMouseEnterArgs) => {
- const currentTableCellInEditModePositionState = extractComponentState(
- currentTableCellInEditModePositionComponentState,
- tableScopeId,
- );
-
- const isSoftFocusOnTableCellFamilyState = extractComponentFamilyState(
- isSoftFocusOnTableCellComponentFamilyState,
- tableScopeId,
- );
-
const isSoftFocusOnTableCell = getSnapshotValue(
snapshot,
isSoftFocusOnTableCellFamilyState(cellPosition),
@@ -48,11 +50,6 @@ export const useHandleContainerMouseEnter = ({
currentTableCellInEditModePositionState,
);
- const isTableCellInEditModeFamilyState = extractComponentFamilyState(
- isTableCellInEditModeComponentFamilyState,
- tableScopeId,
- );
-
const isSomeCellInEditMode = getSnapshotValue(
snapshot,
isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
@@ -63,7 +60,12 @@ export const useHandleContainerMouseEnter = ({
set(isSoftFocusUsingMouseState, true);
}
},
- [tableScopeId, moveSoftFocusToCell],
+ [
+ isSoftFocusOnTableCellFamilyState,
+ currentTableCellInEditModePositionState,
+ isTableCellInEditModeFamilyState,
+ moveSoftFocusToCell,
+ ],
);
return {
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts
index c202bd528..6fc94ed6f 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts
@@ -1,15 +1,19 @@
import { useRecoilCallback } from 'recoil';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
+import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useDisableSoftFocus } from './useDisableSoftFocus';
export const useLeaveTableFocus = (recordTableId?: string) => {
const disableSoftFocus = useDisableSoftFocus(recordTableId);
- const { isSoftFocusActiveState } = useRecordTableStates(recordTableId);
+ const isSoftFocusActiveState = useRecoilComponentCallbackStateV2(
+ isSoftFocusActiveComponentState,
+ recordTableId,
+ );
const resetTableRowSelection = useResetTableRowSelection(recordTableId);
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useMoveEditModeToCellPosition.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useMoveEditModeToCellPosition.ts
index 02e04a259..cdfd84235 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useMoveEditModeToCellPosition.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useMoveEditModeToCellPosition.ts
@@ -1,15 +1,22 @@
import { useRecoilCallback } from 'recoil';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
+import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { TableCellPosition } from '../../types/TableCellPosition';
export const useMoveEditModeToTableCellPosition = (recordTableId?: string) => {
- const {
- isTableCellInEditModeFamilyState,
- currentTableCellInEditModePositionState,
- } = useRecordTableStates(recordTableId);
+ const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
+ isTableCellInEditModeComponentFamilyState,
+ recordTableId,
+ );
+ const currentTableCellInEditModePositionState =
+ useRecoilComponentCallbackStateV2(
+ currentTableCellInEditModePositionComponentState,
+ recordTableId,
+ );
return useRecoilCallback(
({ set, snapshot }) => {
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts
deleted file mode 100644
index c51741aec..000000000
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
-import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
-import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
-import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState';
-import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
-import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
-import { isSoftDeleteFilterActiveComponentState } from '@/object-record/record-table/states/isSoftDeleteFilterActiveComponentState';
-import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
-import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
-import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
-import { numberOfTableRowsComponentState } from '@/object-record/record-table/states/numberOfTableRowsComponentState';
-import { onColumnsChangeComponentState } from '@/object-record/record-table/states/onColumnsChangeComponentState';
-import { onEntityCountChangeComponentState } from '@/object-record/record-table/states/onEntityCountChangeComponentState';
-import { onToggleColumnFilterComponentState } from '@/object-record/record-table/states/onToggleColumnFilterComponentState';
-import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';
-import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
-import { resizeFieldOffsetComponentState } from '@/object-record/record-table/states/resizeFieldOffsetComponentState';
-import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector';
-import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
-import { numberOfTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector';
-import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector';
-import { unselectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector';
-import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
-import { softFocusPositionComponentState } from '@/object-record/record-table/states/softFocusPositionComponentState';
-import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
-import { tableFiltersComponentState } from '@/object-record/record-table/states/tableFiltersComponentState';
-import { tableLastRowVisibleComponentState } from '@/object-record/record-table/states/tableLastRowVisibleComponentState';
-import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
-import { tableSortsComponentState } from '@/object-record/record-table/states/tableSortsComponentState';
-import { tableViewFilterGroupsComponentState } from '@/object-record/record-table/states/tableViewFilterGroupsComponentState';
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
-import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState';
-import { extractComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/extractComponentReadOnlySelector';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
-
-export const useRecordTableStates = (recordTableId?: string) => {
- const scopeId = useAvailableScopeIdOrThrow(
- RecordTableScopeInternalContext,
- getScopeIdOrUndefinedFromComponentId(recordTableId),
- );
-
- return {
- scopeId,
- availableTableColumnsState: extractComponentState(
- availableTableColumnsComponentState,
- scopeId,
- ),
- tableViewFilterGroupsState: extractComponentState(
- tableViewFilterGroupsComponentState,
- scopeId,
- ),
- tableFiltersState: extractComponentState(
- tableFiltersComponentState,
- scopeId,
- ),
- tableSortsState: extractComponentState(tableSortsComponentState, scopeId),
- tableColumnsState: extractComponentState(
- tableColumnsComponentState,
- scopeId,
- ),
- onToggleColumnFilterState: extractComponentState(
- onToggleColumnFilterComponentState,
- scopeId,
- ),
- onToggleColumnSortState: extractComponentState(
- onToggleColumnSortComponentState,
- scopeId,
- ),
- onColumnsChangeState: extractComponentState(
- onColumnsChangeComponentState,
- scopeId,
- ),
- onEntityCountChangeState: extractComponentState(
- onEntityCountChangeComponentState,
- scopeId,
- ),
- tableLastRowVisibleState: extractComponentState(
- tableLastRowVisibleComponentState,
- scopeId,
- ),
- softFocusPositionState: extractComponentState(
- softFocusPositionComponentState,
- scopeId,
- ),
- numberOfTableRowsState: extractComponentState(
- numberOfTableRowsComponentState,
- scopeId,
- ),
- currentTableCellInEditModePositionState: extractComponentState(
- currentTableCellInEditModePositionComponentState,
- scopeId,
- ),
- isTableCellInEditModeFamilyState: extractComponentFamilyState(
- isTableCellInEditModeComponentFamilyState,
- scopeId,
- ),
- isSoftDeleteActiveState: extractComponentState(
- isSoftDeleteFilterActiveComponentState,
- scopeId,
- ),
- isSoftFocusActiveState: extractComponentState(
- isSoftFocusActiveComponentState,
- scopeId,
- ),
- tableRowIdsState: extractComponentState(tableRowIdsComponentState, scopeId),
- isRecordTableInitialLoadingState: extractComponentState(
- isRecordTableInitialLoadingComponentState,
- scopeId,
- ),
- resizeFieldOffsetState: extractComponentState(
- resizeFieldOffsetComponentState,
- scopeId,
- ),
- isSoftFocusOnTableCellFamilyState: extractComponentFamilyState(
- isSoftFocusOnTableCellComponentFamilyState,
- scopeId,
- ),
- isRowSelectedFamilyState: extractComponentFamilyState(
- isRowSelectedComponentFamilyState,
- scopeId,
- ),
- hasUserSelectedAllRowsState: extractComponentState(
- hasUserSelectedAllRowsComponentState,
- scopeId,
- ),
- allRowsSelectedStatusSelector: extractComponentReadOnlySelector(
- allRowsSelectedStatusComponentSelector,
- scopeId,
- ),
- hiddenTableColumnsSelector: extractComponentReadOnlySelector(
- hiddenTableColumnsComponentSelector,
- scopeId,
- ),
- numberOfTableColumnsSelector: extractComponentReadOnlySelector(
- numberOfTableColumnsComponentSelector,
- scopeId,
- ),
- selectedRowIdsSelector: extractComponentReadOnlySelector(
- selectedRowIdsComponentSelector,
- scopeId,
- ),
- unselectedRowIdsSelector: extractComponentReadOnlySelector(
- unselectedRowIdsComponentSelector,
- scopeId,
- ),
- visibleTableColumnsSelector: extractComponentReadOnlySelector(
- visibleTableColumnsComponentSelector,
- scopeId,
- ),
- pendingRecordIdState: extractComponentState(
- recordTablePendingRecordIdComponentState,
- scopeId,
- ),
- };
-};
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts
index 58779a443..3dc9e1a1b 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts
@@ -1,16 +1,26 @@
import { useRecoilCallback } from 'recoil';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
+import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
+import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
export const useResetTableRowSelection = (recordTableId?: string) => {
- const {
- tableRowIdsState,
- isRowSelectedFamilyState,
- hasUserSelectedAllRowsState,
- } = useRecordTableStates(recordTableId);
+ const tableRowIdsState = useRecoilComponentCallbackStateV2(
+ tableRowIdsComponentState,
+ recordTableId,
+ );
+ const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
+ isRowSelectedComponentFamilyState,
+ recordTableId,
+ );
+ const hasUserSelectedAllRowsState = useRecoilComponentCallbackStateV2(
+ hasUserSelectedAllRowsComponentState,
+ recordTableId,
+ );
return useRecoilCallback(
({ snapshot, set }) =>
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts
index c76683e6a..38b8e75c2 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts
@@ -1,21 +1,31 @@
import { useRecoilCallback } from 'recoil';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
+import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector';
+import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
export const useSelectAllRows = (recordTableId?: string) => {
- const {
- allRowsSelectedStatusSelector,
- tableRowIdsState,
- isRowSelectedFamilyState,
- } = useRecordTableStates(recordTableId);
+ const allRowsSelectedStatusSelector = useRecoilComponentCallbackStateV2(
+ allRowsSelectedStatusComponentSelector,
+ recordTableId,
+ );
+ const tableRowIdsState = useRecoilComponentCallbackStateV2(
+ tableRowIdsComponentState,
+ recordTableId,
+ );
+ const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
+ isRowSelectedComponentFamilyState,
+ recordTableId,
+ );
const selectAllRows = useRecoilCallback(
({ set, snapshot }) =>
() => {
const allRowsSelectedStatus = getSnapshotValue(
snapshot,
- allRowsSelectedStatusSelector(),
+ allRowsSelectedStatusSelector,
);
const tableRowIds = getSnapshotValue(snapshot, tableRowIdsState);
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetAllRowSelectedState.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetAllRowSelectedState.ts
index 5df32d900..dd1695d9d 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetAllRowSelectedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetAllRowSelectedState.ts
@@ -1,9 +1,13 @@
import { useRecoilCallback } from 'recoil';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
export const useSetHasUserSelectedAllRows = (recordTableId?: string) => {
- const { hasUserSelectedAllRowsState } = useRecordTableStates(recordTableId);
+ const hasUserSelectedAllRowsState = useRecoilComponentCallbackStateV2(
+ hasUserSelectedAllRowsComponentState,
+ recordTableId,
+ );
return useRecoilCallback(
({ set }) =>
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts
index 3bb5dc6ea..4b23ac749 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts
@@ -1,9 +1,13 @@
import { useRecoilCallback } from 'recoil';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
+import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
+import { numberOfTableRowsComponentState } from '@/object-record/record-table/states/numberOfTableRowsComponentState';
+import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
type useSetRecordTableDataProps = {
@@ -15,12 +19,22 @@ export const useSetRecordTableData = ({
recordTableId,
onEntityCountChange,
}: useSetRecordTableDataProps) => {
- const {
- tableRowIdsState,
- numberOfTableRowsState,
- isRowSelectedFamilyState,
- hasUserSelectedAllRowsState,
- } = useRecordTableStates(recordTableId);
+ const tableRowIdsState = useRecoilComponentCallbackStateV2(
+ tableRowIdsComponentState,
+ recordTableId,
+ );
+ const numberOfTableRowsState = useRecoilComponentCallbackStateV2(
+ numberOfTableRowsComponentState,
+ recordTableId,
+ );
+ const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
+ isRowSelectedComponentFamilyState,
+ recordTableId,
+ );
+ const hasUserSelectedAllRowsState = useRecoilComponentCallbackStateV2(
+ hasUserSelectedAllRowsComponentState,
+ recordTableId,
+ );
return useRecoilCallback(
({ set, snapshot }) =>
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRowSelectedState.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRowSelectedState.ts
index 923121c84..dd7068782 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRowSelectedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRowSelectedState.ts
@@ -1,9 +1,13 @@
import { useRecoilCallback } from 'recoil';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
export const useSetRowSelectedState = (recordTableId?: string) => {
- const { isRowSelectedFamilyState } = useRecordTableStates(recordTableId);
+ const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
+ isRowSelectedComponentFamilyState,
+ recordTableId,
+ );
return useRecoilCallback(
({ set }) =>
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetSoftFocusPosition.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetSoftFocusPosition.ts
index edf8f7a90..5a2756216 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetSoftFocusPosition.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetSoftFocusPosition.ts
@@ -1,16 +1,26 @@
import { useRecoilCallback } from 'recoil';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
+import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
+import { softFocusPositionComponentState } from '@/object-record/record-table/states/softFocusPositionComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { TableCellPosition } from '../../types/TableCellPosition';
export const useSetSoftFocusPosition = (recordTableId?: string) => {
- const {
- softFocusPositionState,
- isSoftFocusActiveState,
- isSoftFocusOnTableCellFamilyState,
- } = useRecordTableStates(recordTableId);
+ const softFocusPositionState = useRecoilComponentCallbackStateV2(
+ softFocusPositionComponentState,
+ recordTableId,
+ );
+ const isSoftFocusActiveState = useRecoilComponentCallbackStateV2(
+ isSoftFocusActiveComponentState,
+ recordTableId,
+ );
+ const isSoftFocusOnTableCellFamilyState = useRecoilComponentCallbackStateV2(
+ isSoftFocusOnTableCellComponentFamilyState,
+ recordTableId,
+ );
return useRecoilCallback(
({ set, snapshot }) => {
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts
index 7233c053d..9408ed52e 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts
@@ -3,7 +3,6 @@ import { Key } from 'ts-key-enum';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { useGetIsSomeCellInEditModeState } from '@/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useSetHasUserSelectedAllRows } from '@/object-record/record-table/hooks/internal/useSetAllRowSelectedState';
import { useRecordTableMoveFocus } from '@/object-record/record-table/hooks/useRecordTableMoveFocus';
import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
@@ -16,6 +15,20 @@ import { useUpsertRecordFromState } from '../../hooks/useUpsertRecordFromState';
import { ColumnDefinition } from '../types/ColumnDefinition';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
+import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState';
+import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
+import { onColumnsChangeComponentState } from '@/object-record/record-table/states/onColumnsChangeComponentState';
+import { onEntityCountChangeComponentState } from '@/object-record/record-table/states/onEntityCountChangeComponentState';
+import { onToggleColumnFilterComponentState } from '@/object-record/record-table/states/onToggleColumnFilterComponentState';
+import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';
+import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
+import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
+import { tableFiltersComponentState } from '@/object-record/record-table/states/tableFiltersComponentState';
+import { tableLastRowVisibleComponentState } from '@/object-record/record-table/states/tableLastRowVisibleComponentState';
+import { tableSortsComponentState } from '@/object-record/record-table/states/tableSortsComponentState';
+import { tableViewFilterGroupsComponentState } from '@/object-record/record-table/states/tableViewFilterGroupsComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useDisableSoftFocus } from './internal/useDisableSoftFocus';
import { useLeaveTableFocus } from './internal/useLeaveTableFocus';
import { useResetTableRowSelection } from './internal/useResetTableRowSelection';
@@ -31,24 +44,10 @@ type useRecordTableProps = {
export const useRecordTable = (props?: useRecordTableProps) => {
const recordTableId = props?.recordTableId;
- const {
- scopeId,
- availableTableColumnsState,
- tableViewFilterGroupsState,
- tableFiltersState,
- tableSortsState,
- tableColumnsState,
- onEntityCountChangeState,
- onColumnsChangeState,
- isRecordTableInitialLoadingState,
- tableLastRowVisibleState,
- selectedRowIdsSelector,
- unselectedRowIdsSelector,
- onToggleColumnFilterState,
- onToggleColumnSortState,
- pendingRecordIdState,
- hasUserSelectedAllRowsState,
- } = useRecordTableStates(recordTableId);
+ const availableTableColumnsState = useRecoilComponentCallbackStateV2(
+ availableTableColumnsComponentState,
+ recordTableId,
+ );
const setAvailableTableColumns = useRecoilCallback(
({ snapshot, set }) =>
@@ -66,29 +65,58 @@ export const useRecordTable = (props?: useRecordTableProps) => {
[availableTableColumnsState],
);
- const setOnEntityCountChange = useSetRecoilState(onEntityCountChangeState);
-
- const setTableViewFilterGroups = useSetRecoilState(
- tableViewFilterGroupsState,
+ const setOnEntityCountChange = useSetRecoilComponentStateV2(
+ onEntityCountChangeComponentState,
+ recordTableId,
);
- const setTableFilters = useSetRecoilState(tableFiltersState);
-
- const setTableSorts = useSetRecoilState(tableSortsState);
-
- const setTableColumns = useSetRecoilState(tableColumnsState);
-
- const setOnColumnsChange = useSetRecoilState(onColumnsChangeState);
-
- const setOnToggleColumnFilter = useSetRecoilState(onToggleColumnFilterState);
- const setOnToggleColumnSort = useSetRecoilState(onToggleColumnSortState);
-
- const setIsRecordTableInitialLoading = useSetRecoilState(
- isRecordTableInitialLoadingState,
+ const setTableViewFilterGroups = useSetRecoilComponentStateV2(
+ tableViewFilterGroupsComponentState,
+ recordTableId,
);
- const setRecordTableLastRowVisible = useSetRecoilState(
- tableLastRowVisibleState,
+ const setTableFilters = useSetRecoilComponentStateV2(
+ tableFiltersComponentState,
+ recordTableId,
+ );
+
+ const setTableSorts = useSetRecoilComponentStateV2(
+ tableSortsComponentState,
+ recordTableId,
+ );
+
+ const setTableColumns = useSetRecoilComponentStateV2(
+ tableColumnsComponentState,
+ recordTableId,
+ );
+
+ const setOnColumnsChange = useSetRecoilComponentStateV2(
+ onColumnsChangeComponentState,
+ recordTableId,
+ );
+
+ const setOnToggleColumnFilter = useSetRecoilComponentStateV2(
+ onToggleColumnFilterComponentState,
+ recordTableId,
+ );
+ const setOnToggleColumnSort = useSetRecoilComponentStateV2(
+ onToggleColumnSortComponentState,
+ recordTableId,
+ );
+
+ const setIsRecordTableInitialLoading = useSetRecoilComponentStateV2(
+ isRecordTableInitialLoadingComponentState,
+ recordTableId,
+ );
+
+ const setRecordTableLastRowVisible = useSetRecoilComponentStateV2(
+ tableLastRowVisibleComponentState,
+ recordTableId,
+ );
+
+ const onColumnsChangeState = useRecoilComponentCallbackStateV2(
+ onColumnsChangeComponentState,
+ recordTableId,
);
const onColumnsChange = useRecoilCallback(
@@ -104,6 +132,11 @@ export const useRecordTable = (props?: useRecordTableProps) => {
[onColumnsChangeState],
);
+ const onEntityCountChangeState = useRecoilComponentCallbackStateV2(
+ onEntityCountChangeComponentState,
+ recordTableId,
+ );
+
const onEntityCountChange = useRecoilCallback(
({ snapshot }) =>
(count?: number) => {
@@ -202,10 +235,12 @@ export const useRecordTable = (props?: useRecordTableProps) => {
const isSomeCellInEditModeState =
useGetIsSomeCellInEditModeState(recordTableId);
- const setPendingRecordId = useSetRecoilState(pendingRecordIdState);
+ const setPendingRecordId = useSetRecoilComponentStateV2(
+ recordTablePendingRecordIdComponentState,
+ recordTableId,
+ );
return {
- scopeId,
onColumnsChange,
setAvailableTableColumns,
setTableViewFilterGroups,
@@ -229,12 +264,9 @@ export const useRecordTable = (props?: useRecordTableProps) => {
setRecordTableLastRowVisible,
setSoftFocusPosition,
isSomeCellInEditModeState,
- selectedRowIdsSelector,
- unselectedRowIdsSelector,
setHasUserSelectedAllRows,
setOnToggleColumnFilter,
setOnToggleColumnSort,
setPendingRecordId,
- hasUserSelectedAllRowsState,
};
};
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTableMoveFocus.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTableMoveFocus.ts
index 37eb8d27b..c6ef77252 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTableMoveFocus.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTableMoveFocus.ts
@@ -1,22 +1,22 @@
import { useRecoilCallback } from 'recoil';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocusDirection';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { numberOfTableRowsComponentState } from '@/object-record/record-table/states/numberOfTableRowsComponentState';
+import { numberOfTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector';
+import { softFocusPositionComponentState } from '@/object-record/record-table/states/softFocusPositionComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useSetSoftFocusPosition } from './internal/useSetSoftFocusPosition';
export const useRecordTableMoveFocus = (recordTableId?: string) => {
- const {
- scopeId,
- softFocusPositionState,
- numberOfTableRowsState,
- numberOfTableColumnsSelector,
- selectedRowIdsSelector,
- } = useRecordTableStates(recordTableId);
-
const setSoftFocusPosition = useSetSoftFocusPosition(recordTableId);
+ const softFocusPositionState = useRecoilComponentCallbackStateV2(
+ softFocusPositionComponentState,
+ recordTableId,
+ );
+
const moveUp = useRecoilCallback(
({ snapshot }) =>
() => {
@@ -39,6 +39,11 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => {
[softFocusPositionState, setSoftFocusPosition],
);
+ const numberOfTableRowsState = useRecoilComponentCallbackStateV2(
+ numberOfTableRowsComponentState,
+ recordTableId,
+ );
+
const moveDown = useRecoilCallback(
({ snapshot }) =>
() => {
@@ -66,6 +71,11 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => {
[numberOfTableRowsState, setSoftFocusPosition, softFocusPositionState],
);
+ const numberOfTableColumnsSelector = useRecoilComponentCallbackStateV2(
+ numberOfTableColumnsComponentSelector,
+ recordTableId,
+ );
+
const moveRight = useRecoilCallback(
({ snapshot }) =>
() => {
@@ -76,7 +86,7 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => {
const numberOfTableColumns = getSnapshotValue(
snapshot,
- numberOfTableColumnsSelector(),
+ numberOfTableColumnsSelector,
);
const numberOfTableRows = getSnapshotValue(
@@ -132,7 +142,7 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => {
const numberOfTableColumns = getSnapshotValue(
snapshot,
- numberOfTableColumnsSelector(),
+ numberOfTableColumnsSelector,
);
const currentColumnNumber = softFocusPosition.column;
@@ -187,13 +197,11 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => {
};
return {
- scopeId,
moveDown,
moveLeft,
moveRight,
moveUp,
setSoftFocusPosition,
- selectedRowIdsSelector,
moveFocus,
};
};
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts
index 894eca219..f972e41e9 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts
@@ -1,11 +1,13 @@
import { useCallback } from 'react';
-import { useRecoilValue } from 'recoil';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns';
+import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { ColumnDefinition } from '../types/ColumnDefinition';
type useRecordTableProps = {
@@ -17,16 +19,19 @@ export const useTableColumns = (props?: useRecordTableProps) => {
recordTableId: props?.recordTableId,
});
- const {
- availableTableColumnsState,
- tableColumnsState,
- visibleTableColumnsSelector,
- } = useRecordTableStates(props?.recordTableId);
+ const availableTableColumns = useRecoilComponentValueV2(
+ availableTableColumnsComponentState,
+ props?.recordTableId,
+ );
- const availableTableColumns = useRecoilValue(availableTableColumnsState);
-
- const tableColumns = useRecoilValue(tableColumnsState);
- const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+ const tableColumns = useRecoilComponentValueV2(
+ tableColumnsComponentState,
+ props?.recordTableId,
+ );
+ const visibleTableColumns = useRecoilComponentValueV2(
+ visibleTableColumnsComponentSelector,
+ props?.recordTableId,
+ );
const { handleColumnMove } = useMoveViewColumns();
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx
index c3adb621d..8084985a2 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx
@@ -1,20 +1,17 @@
-import { useRecoilValue } from 'recoil';
-
import { RecordTableRows } from '@/object-record/record-table/components/RecordTableRows';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { RecordTableBodyDragDropContext } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext';
import { RecordTableBodyDroppable } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppable';
import { RecordTableBodyLoading } from '@/object-record/record-table/record-table-body/components/RecordTableBodyLoading';
import { RecordTablePendingRow } from '@/object-record/record-table/record-table-row/components/RecordTablePendingRow';
+import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
+import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
export const RecordTableBody = () => {
- const { tableRowIdsState, isRecordTableInitialLoadingState } =
- useRecordTableStates();
+ const tableRowIds = useRecoilComponentValueV2(tableRowIdsComponentState);
- const tableRowIds = useRecoilValue(tableRowIdsState);
-
- const isRecordTableInitialLoading = useRecoilValue(
- isRecordTableInitialLoadingState,
+ const isRecordTableInitialLoading = useRecoilComponentValueV2(
+ isRecordTableInitialLoadingComponentState,
);
if (isRecordTableInitialLoading && tableRowIds.length === 0) {
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext.tsx
index ae3527145..64b33fb37 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext.tsx
@@ -1,12 +1,13 @@
-import { ReactNode, useContext } from 'react';
import { DragDropContext, DropResult } from '@hello-pangea/dnd';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { ReactNode, useContext } from 'react';
+import { useSetRecoilState } from 'recoil';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useComputeNewRowPosition } from '@/object-record/record-table/hooks/useComputeNewRowPosition';
import { isRemoveSortingModalOpenState } from '@/object-record/record-table/states/isRemoveSortingModalOpenState';
+import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
import { isDefined } from '~/utils/isDefined';
@@ -21,9 +22,7 @@ export const RecordTableBodyDragDropContext = ({
objectNameSingular,
});
- const { tableRowIdsState } = useRecordTableStates();
-
- const tableRowIds = useRecoilValue(tableRowIdsState);
+ const tableRowIds = useRecoilComponentValueV2(tableRowIdsComponentState);
const { currentViewWithCombinedFiltersAndSorts } =
useGetCurrentView(recordTableId);
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyEffect.tsx
index 506b186e7..f66b6643d 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyEffect.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyEffect.tsx
@@ -6,13 +6,14 @@ import { lastShowPageRecordIdState } from '@/object-record/record-field/states/l
import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
import { ROW_HEIGHT } from '@/object-record/record-table/constants/RowHeight';
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { hasRecordTableFetchedAllRecordsComponentStateV2 } from '@/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2';
import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
+import { tableLastRowVisibleComponentState } from '@/object-record/record-table/states/tableLastRowVisibleComponentState';
import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
import { useScrollLeftValue } from '@/ui/utilities/scroll/hooks/useScrollLeftValue';
import { useScrollTopValue } from '@/ui/utilities/scroll/hooks/useScrollTopValue';
-import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { isNonEmptyString } from '@sniptt/guards';
import { useScrollToPosition } from '~/hooks/useScrollToPosition';
@@ -35,14 +36,16 @@ export const RecordTableBodyEffect = () => {
isFetchingMoreRecordsFamilyState(queryStateIdentifier),
);
- const { tableLastRowVisibleState } = useRecordTableStates();
-
- const tableLastRowVisible = useRecoilValue(tableLastRowVisibleState);
+ const tableLastRowVisible = useRecoilComponentValueV2(
+ tableLastRowVisibleComponentState,
+ );
const scrollTop = useScrollTopValue('recordTableWithWrappers');
const setHasRecordTableFetchedAllRecordsComponents =
- useSetRecoilComponentState(hasRecordTableFetchedAllRecordsComponentStateV2);
+ useSetRecoilComponentStateV2(
+ hasRecordTableFetchedAllRecordsComponentStateV2,
+ );
// TODO: move this outside because it might cause way too many re-renders for other hooks
useEffect(() => {
@@ -59,7 +62,7 @@ export const RecordTableBodyEffect = () => {
const scrollLeft = useScrollLeftValue('recordTableWithWrappers');
- const setIsRecordTableScrolledLeft = useSetRecoilComponentState(
+ const setIsRecordTableScrolledLeft = useSetRecoilComponentStateV2(
isRecordTableScrolledLeftComponentState,
);
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader.tsx
index 4e15bb733..3ef7983c0 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader.tsx
@@ -7,7 +7,7 @@ import { GRAY_SCALE } from 'twenty-ui';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { hasRecordTableFetchedAllRecordsComponentStateV2 } from '@/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2';
import { RecordTableWithWrappersScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
const StyledText = styled.div`
align-items: center;
@@ -33,7 +33,7 @@ export const RecordTableBodyFetchMoreLoader = () => {
RecordTableWithWrappersScrollWrapperContext,
);
- const hasRecordTableFetchedAllRecordsComponents = useRecoilComponentValue(
+ const hasRecordTableFetchedAllRecordsComponents = useRecoilComponentValueV2(
hasRecordTableFetchedAllRecordsComponentStateV2,
);
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyLoading.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyLoading.tsx
index 8a80403de..a0309ba00 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyLoading.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyLoading.tsx
@@ -1,14 +1,14 @@
-import { useRecoilValue } from 'recoil';
-
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { RecordTableCellCheckbox } from '@/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox';
import { RecordTableCellGrip } from '@/object-record/record-table/record-table-cell/components/RecordTableCellGrip';
import { RecordTableCellLoading } from '@/object-record/record-table/record-table-cell/components/RecordTableCellLoading';
import { RecordTableTr } from '@/object-record/record-table/record-table-row/components/RecordTableTr';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
export const RecordTableBodyLoading = () => {
- const { visibleTableColumnsSelector } = useRecordTableStates();
- const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+ const visibleTableColumns = useRecoilComponentValueV2(
+ visibleTableColumnsComponentSelector,
+ );
return (
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellWrapper.tsx
index c552fa47b..f131b1409 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellWrapper.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellWrapper.tsx
@@ -1,18 +1,14 @@
import { useContext, useMemo } from 'react';
-import { useRecoilValue } from 'recoil';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { RecordTableCellFieldContextWrapper } from '@/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper';
-import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
-import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState';
+import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
export const RecordTableCellWrapper = ({
children,
@@ -23,11 +19,6 @@ export const RecordTableCellWrapper = ({
columnIndex: number;
children: React.ReactNode;
}) => {
- const tableScopeId = useAvailableScopeIdOrThrow(
- RecordTableScopeInternalContext,
- getScopeIdOrUndefinedFromComponentId(),
- );
-
const { rowIndex } = useContext(RecordTableRowContext);
const currentTableCellPosition: TableCellPosition = useMemo(
@@ -38,22 +29,14 @@ export const RecordTableCellWrapper = ({
[columnIndex, rowIndex],
);
- const isTableCellInEditModeFamilyState = extractComponentFamilyState(
+ const isInEditMode = useRecoilComponentFamilyValueV2(
isTableCellInEditModeComponentFamilyState,
- tableScopeId,
+ currentTableCellPosition,
);
- const isSoftFocusOnTableCellFamilyState = extractComponentFamilyState(
+ const hasSoftFocus = useRecoilComponentFamilyValueV2(
isSoftFocusOnTableCellComponentFamilyState,
- tableScopeId,
- );
-
- const isInEditMode = useRecoilValue(
- isTableCellInEditModeFamilyState(currentTableCellPosition),
- );
-
- const hasSoftFocus = useRecoilValue(
- isSoftFocusOnTableCellFamilyState(currentTableCellPosition),
+ currentTableCellPosition,
);
return (
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCloseRecordTableCell.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCloseRecordTableCell.test.tsx
index 18fe17ab0..f3ce01a01 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCloseRecordTableCell.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCloseRecordTableCell.test.tsx
@@ -1,19 +1,22 @@
import { act, renderHook } from '@testing-library/react';
-import { RecoilRoot, useRecoilValue } from 'recoil';
+import { RecoilRoot } from 'recoil';
import { textfieldDefinition } from '@/object-record/record-field/__mocks__/fieldDefinitions';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import {
recordTableCell,
recordTableRow,
} from '@/object-record/record-table/record-table-cell/hooks/__mocks__/cell';
import { useCloseRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCell';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
+import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
+import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
+import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
const setHotkeyScope = jest.fn();
@@ -22,12 +25,12 @@ jest.mock('@/ui/utilities/hotkey/hooks/useSetHotkeyScope', () => ({
}));
const onColumnsChange = jest.fn();
-const scopeId = 'scopeId';
+const recordTableId = 'scopeId';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
-
(
-
+
);
@@ -54,15 +57,12 @@ describe('useCloseRecordTableCell', () => {
it('should work as expected', async () => {
const { result } = renderHook(
() => {
- const {
- currentTableCellInEditModePositionState,
- isTableCellInEditModeFamilyState,
- } = useRecordTableStates();
- const currentTableCellInEditModePosition = useRecoilValue(
- currentTableCellInEditModePositionState,
+ const currentTableCellInEditModePosition = useRecoilComponentValueV2(
+ currentTableCellInEditModePositionComponentState,
);
- const isTableCellInEditMode = useRecoilValue(
- isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
+ const isTableCellInEditMode = useRecoilComponentFamilyValueV2(
+ isTableCellInEditModeComponentFamilyState,
+ currentTableCellInEditModePosition,
);
return {
...useCloseRecordTableCell(),
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCurrentTableCellEditMode.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCurrentTableCellEditMode.test.tsx
index fc8bf6467..47f024ace 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCurrentTableCellEditMode.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCurrentTableCellEditMode.test.tsx
@@ -1,22 +1,22 @@
import { act, renderHook, waitFor } from '@testing-library/react';
import { RecoilRoot } from 'recoil';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { useCurrentTableCellEditMode } from '../useCurrentTableCellEditMode';
const onColumnsChange = jest.fn();
-const scopeId = 'scopeId';
+const recordTableId = 'scopeId';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
-
{children}
-
+
);
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useIsSoftFocusOnCurrentTableCell.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useIsSoftFocusOnCurrentTableCell.test.tsx
index 5d913ca86..f3d4a89c3 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useIsSoftFocusOnCurrentTableCell.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useIsSoftFocusOnCurrentTableCell.test.tsx
@@ -1,6 +1,7 @@
import { renderHook } from '@testing-library/react';
import { RecoilRoot } from 'recoil';
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
import {
@@ -8,17 +9,19 @@ import {
recordTableRow,
} from '@/object-record/record-table/record-table-cell/hooks/__mocks__/cell';
import { useIsSoftFocusOnCurrentTableCell } from '@/object-record/record-table/record-table-cell/hooks/useIsSoftFocusOnCurrentTableCell';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
-
+
{children}
-
+
);
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx
index b79464165..c5ad3732c 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx
@@ -1,6 +1,7 @@
import { act, renderHook } from '@testing-library/react';
import { CallbackInterface, RecoilRoot } from 'recoil';
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
import {
@@ -8,24 +9,26 @@ import {
recordTableRow,
} from '@/object-record/record-table/record-table-cell/hooks/__mocks__/cell';
import { useMoveSoftFocusToCurrentCellOnHover } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
const mockSoftFocusPositionState = {
- key: 'softFocusPositionComponentState__{"scopeId":"scopeId"}',
+ key: 'softFocusPositionComponentState__{"instanceId":"scopeId"}',
};
const mockSoftFocusActiveState = {
- key: 'isSoftFocusActiveComponentState__{"scopeId":"scopeId"}',
+ key: 'isSoftFocusActiveComponentState__{"instanceId":"scopeId"}',
};
-const mockIsSoftFocusOnTableCellFamilyState = {
- key: 'isSoftFocusOnTableCellFamilyComponentState__{"familyKey":{"column":1,"row":0},"scopeId":"scopeId"}',
+const mockIsSoftFocusOnTableCellFamilyStateCurrentPosition = {
+ key: 'isSoftFocusOnTableCellComponentFamilyState__{"familyKey":{"column":1,"row":0},"instanceId":"scopeId"}',
+};
+const mockIsSoftFocusOnTableCellFamilyStateNewPosition = {
+ key: 'isSoftFocusOnTableCellComponentFamilyState__{"familyKey":{"column":3,"row":2},"instanceId":"scopeId"}',
};
const mockCurrentTableCellInEditModePositionState = {
- key: 'currentTableCellInEditModePositionComponentState__{"scopeId":"scopeId"}',
+ key: 'currentTableCellInEditModePositionComponentState__{"instanceId":"scopeId"}',
};
const mockIsTableCellInEditModeFamilyState = {
- key: 'isTableCellInEditModeFamilyComponentState__{"familyKey":{"column":1,"row":0},"scopeId":"scopeId"}',
+ key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":1,"row":0},"instanceId":"scopeId"}',
};
const mockCurrentHotKeyScopeState = {
key: 'currentHotkeyScopeState',
@@ -61,21 +64,6 @@ jest.mock('recoil', () => ({
) => (newPosition: TableCellPosition) => void,
) => callback(mockCallbackInterface),
}));
-jest.mock(
- '@/object-record/record-table/hooks/internal/useRecordTableStates',
- () => ({
- useRecordTableStates: () => ({
- softFocusPositionState: mockSoftFocusPositionState,
- isSoftFocusActiveState: mockSoftFocusActiveState,
- isSoftFocusOnTableCellFamilyState: () =>
- mockIsSoftFocusOnTableCellFamilyState,
- currentTableCellInEditModePositionState:
- mockCurrentTableCellInEditModePositionState,
- isTableCellInEditModeFamilyState: () =>
- mockIsTableCellInEditModeFamilyState,
- }),
- }),
-);
jest.mock('@/object-record/record-table/hooks/useRecordTable', () => ({
useRecordTable: () => ({
setSoftFocusPosition,
@@ -88,13 +76,16 @@ jest.mock('@/ui/utilities/hotkey/hooks/useSetHotkeyScope', () => ({
const Wrapper = ({ children }: { children: React.ReactNode }) => (
-
+
{children}
-
+
);
@@ -114,26 +105,36 @@ describe('useMoveSoftFocusToCurrentCellOnHover', () => {
result.current.moveSoftFocusToCurrentCellOnHover();
});
- expect(mockCallbackInterface.set).toHaveBeenCalledWith(
+ expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(
+ 1,
mockSoftFocusActiveState,
true,
);
- expect(mockCallbackInterface.set).toHaveBeenCalledWith(
- mockIsSoftFocusOnTableCellFamilyState,
+
+ expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(
+ 2,
+ mockIsSoftFocusOnTableCellFamilyStateCurrentPosition,
false,
);
- expect(mockCallbackInterface.set).toHaveBeenCalledWith(
+
+ expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(
+ 3,
mockSoftFocusPositionState,
{ column: 3, row: 2 },
);
- expect(mockCallbackInterface.set).toHaveBeenCalledWith(
- mockIsSoftFocusOnTableCellFamilyState,
+
+ expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(
+ 4,
+ mockIsSoftFocusOnTableCellFamilyStateNewPosition,
true,
);
- expect(mockCallbackInterface.set).toHaveBeenCalledWith(
+
+ expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(
+ 5,
mockSoftFocusActiveState,
true,
);
+
expect(setHotkeyScope).toHaveBeenCalledWith(
TableHotkeyScope.TableSoftFocus,
);
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSelectedTableCellEditMode.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSelectedTableCellEditMode.test.tsx
index 23b7e3b00..c0eb841e8 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSelectedTableCellEditMode.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSelectedTableCellEditMode.test.tsx
@@ -48,14 +48,14 @@ describe('useSelectedTableCellEditMode', () => {
expect(mockCallbackInterface.set).toHaveBeenCalledWith(
{
- key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":0,"row":0},"scopeId":"yourScopeId"}',
+ key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":0,"row":0},"instanceId":"yourScopeId"}',
},
false,
);
expect(mockCallbackInterface.set).toHaveBeenCalledWith(
{
- key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":5,"row":1},"scopeId":"yourScopeId"}',
+ key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":5,"row":1},"instanceId":"yourScopeId"}',
},
true,
);
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useUpsertRecord.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useUpsertRecord.test.tsx
index cf1819357..da537f801 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useUpsertRecord.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useUpsertRecord.test.tsx
@@ -39,15 +39,6 @@ const pendingRecordIdState = createState({
key: 'pendingRecordIdState',
defaultValue: null,
});
-jest.mock(
- '@/object-record/record-table/hooks/internal/useRecordTableStates',
- () => ({
- __esModule: true,
- useRecordTableStates: jest.fn(() => ({
- pendingRecordIdState: pendingRecordIdState,
- })),
- }),
-);
const createOneRecordMock = jest.fn();
const updateOneRecordMock = jest.fn();
@@ -98,7 +89,11 @@ describe('useUpsertRecord', () => {
it('calls update record if there is no pending record', async () => {
const { result } = renderHook(
- () => useUpsertRecord({ objectNameSingular: 'person' }),
+ () =>
+ useUpsertRecord({
+ objectNameSingular: 'person',
+ recordTableId: 'recordTableId',
+ }),
{
wrapper: ({ children }) =>
Wrapper({
@@ -114,7 +109,6 @@ describe('useUpsertRecord', () => {
updateOneRecordMock,
'recordId',
'name',
- 'recordTableId',
);
});
@@ -124,7 +118,11 @@ describe('useUpsertRecord', () => {
it('calls update record if pending record is empty', async () => {
const { result } = renderHook(
- () => useUpsertRecord({ objectNameSingular: 'person' }),
+ () =>
+ useUpsertRecord({
+ objectNameSingular: 'person',
+ recordTableId: 'recordTableId',
+ }),
{
wrapper: ({ children }) =>
Wrapper({
@@ -140,7 +138,6 @@ describe('useUpsertRecord', () => {
updateOneRecordMock,
'recordId',
'name',
- 'recordTableId',
);
});
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCell.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCell.ts
index 77f3ec4e3..36b32003b 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCell.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCell.ts
@@ -1,24 +1,26 @@
-import { useResetRecoilState } from 'recoil';
-
import { SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/SoftFocusClickOutsideListenerId';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
+import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { useResetRecoilState } from 'recoil';
import { useCloseCurrentTableCellInEditMode } from '../../hooks/internal/useCloseCurrentTableCellInEditMode';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
export const useCloseRecordTableCell = () => {
const setHotkeyScope = useSetHotkeyScope();
const { setDragSelectionStartEnabled } = useDragSelect();
- const { pendingRecordIdState } = useRecordTableStates();
const { toggleClickOutsideListener } = useClickOutsideListener(
SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID,
);
const closeCurrentTableCellInEditMode = useCloseCurrentTableCellInEditMode();
+ const pendingRecordIdState = useRecoilComponentCallbackStateV2(
+ recordTablePendingRecordIdComponentState,
+ );
const resetRecordTablePendingRecordId =
useResetRecoilState(pendingRecordIdState);
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCellV2.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCellV2.ts
index 3f1277212..204406f88 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCellV2.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCellV2.ts
@@ -1,26 +1,30 @@
import { useResetRecoilState } from 'recoil';
import { SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/SoftFocusClickOutsideListenerId';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
+import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useCloseCurrentTableCellInEditMode } from '../../hooks/internal/useCloseCurrentTableCellInEditMode';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
-export const useCloseRecordTableCellV2 = (recordTableScopeId: string) => {
+export const useCloseRecordTableCellV2 = (recordTableId: string) => {
const setHotkeyScope = useSetHotkeyScope();
const { setDragSelectionStartEnabled } = useDragSelect();
- const { pendingRecordIdState } = useRecordTableStates(recordTableScopeId);
const { toggleClickOutsideListener } = useClickOutsideListener(
SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID,
);
const closeCurrentTableCellInEditMode =
- useCloseCurrentTableCellInEditMode(recordTableScopeId);
+ useCloseCurrentTableCellInEditMode(recordTableId);
+ const pendingRecordIdState = useRecoilComponentCallbackStateV2(
+ recordTablePendingRecordIdComponentState,
+ recordTableId,
+ );
const resetRecordTablePendingRecordId =
useResetRecoilState(pendingRecordIdState);
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCurrentTableCellEditMode.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCurrentTableCellEditMode.ts
index 18ab1457d..fb4f77498 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCurrentTableCellEditMode.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCurrentTableCellEditMode.ts
@@ -1,10 +1,9 @@
import { useCallback } from 'react';
-import { useRecoilValue } from 'recoil';
-
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useMoveEditModeToTableCellPosition } from '../../hooks/internal/useMoveEditModeToCellPosition';
+import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
+import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
import { useCurrentTableCellPosition } from './useCurrentCellPosition';
export const useCurrentTableCellEditMode = () => {
@@ -12,10 +11,9 @@ export const useCurrentTableCellEditMode = () => {
const currentTableCellPosition = useCurrentTableCellPosition();
- const { isTableCellInEditModeFamilyState } = useRecordTableStates();
-
- const isCurrentTableCellInEditMode = useRecoilValue(
- isTableCellInEditModeFamilyState(currentTableCellPosition),
+ const isCurrentTableCellInEditMode = useRecoilComponentFamilyValueV2(
+ isTableCellInEditModeComponentFamilyState,
+ currentTableCellPosition,
);
const setCurrentTableCellInEditMode = useCallback(() => {
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useIsSoftFocusOnCurrentTableCell.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useIsSoftFocusOnCurrentTableCell.ts
index fcf78dc29..67605e093 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useIsSoftFocusOnCurrentTableCell.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useIsSoftFocusOnCurrentTableCell.ts
@@ -1,16 +1,13 @@
-import { useRecoilValue } from 'recoil';
-
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-
+import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
+import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
import { useCurrentTableCellPosition } from './useCurrentCellPosition';
export const useIsSoftFocusOnCurrentTableCell = () => {
const currentTableCellPosition = useCurrentTableCellPosition();
- const { isSoftFocusOnTableCellFamilyState } = useRecordTableStates();
-
- const isSoftFocusOnTableCell = useRecoilValue(
- isSoftFocusOnTableCellFamilyState(currentTableCellPosition),
+ const isSoftFocusOnTableCell = useRecoilComponentFamilyValueV2(
+ isSoftFocusOnTableCellComponentFamilyState,
+ currentTableCellPosition,
);
return isSoftFocusOnTableCell;
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2.ts
index 171f209bb..782535df7 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2.ts
@@ -1,20 +1,27 @@
import { useRecoilCallback } from 'recoil';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useSetSoftFocus } from '@/object-record/record-table/record-table-cell/hooks/useSetSoftFocus';
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
+import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
export const useMoveSoftFocusToCellOnHoverV2 = (recordTableId: string) => {
const setSoftFocus = useSetSoftFocus(recordTableId);
- const {
- currentTableCellInEditModePositionState,
- isTableCellInEditModeFamilyState,
- } = useRecordTableStates(recordTableId);
+ const currentTableCellInEditModePositionState =
+ useRecoilComponentCallbackStateV2(
+ currentTableCellInEditModePositionComponentState,
+ recordTableId,
+ );
+ const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
+ isTableCellInEditModeComponentFamilyState,
+ recordTableId,
+ );
const moveSoftFocusToCell = useRecoilCallback(
({ snapshot }) =>
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts
index 3d53b8d9b..d4d9e3a04 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts
@@ -1,20 +1,25 @@
import { useRecoilCallback } from 'recoil';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
+import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
+import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useSetSoftFocusOnCurrentTableCell } from './useSetSoftFocusOnCurrentTableCell';
export const useMoveSoftFocusToCurrentCellOnHover = () => {
const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell();
- const {
- currentTableCellInEditModePositionState,
- isTableCellInEditModeFamilyState,
- } = useRecordTableStates();
+ const currentTableCellInEditModePositionState =
+ useRecoilComponentCallbackStateV2(
+ currentTableCellInEditModePositionComponentState,
+ );
+ const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
+ isTableCellInEditModeComponentFamilyState,
+ );
return useRecoilCallback(
({ snapshot }) =>
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocus.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocus.ts
index 1d8a1dc54..ceda3e00d 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocus.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocus.ts
@@ -1,16 +1,20 @@
import { useRecoilCallback } from 'recoil';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useSetSoftFocusPosition } from '@/object-record/record-table/hooks/internal/useSetSoftFocusPosition';
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
export const useSetSoftFocus = (recordTableId?: string) => {
const setSoftFocusPosition = useSetSoftFocusPosition(recordTableId);
- const { isSoftFocusActiveState } = useRecordTableStates(recordTableId);
+ const isSoftFocusActiveState = useRecoilComponentCallbackStateV2(
+ isSoftFocusActiveComponentState,
+ recordTableId,
+ );
const setHotkeyScope = useSetHotkeyScope();
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown.ts
index 132f7adfa..9a6019866 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown.ts
@@ -5,10 +5,9 @@ import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-me
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
-import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
export const useTriggerActionMenuDropdown = ({
@@ -20,13 +19,16 @@ export const useTriggerActionMenuDropdown = ({
ActionMenuComponentInstanceContext,
);
+ const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
+ isRowSelectedComponentFamilyState,
+ recordTableId,
+ );
+
const triggerActionMenuDropdown = useRecoilCallback(
({ set, snapshot }) =>
(event: React.MouseEvent, recordId: string) => {
event.preventDefault();
- const tableScopeId = getScopeIdFromComponentId(recordTableId);
-
set(
extractComponentState(
recordIndexActionMenuDropdownPositionComponentState,
@@ -38,11 +40,6 @@ export const useTriggerActionMenuDropdown = ({
},
);
- const isRowSelectedFamilyState = extractComponentFamilyState(
- isRowSelectedComponentFamilyState,
- tableScopeId,
- );
-
const isRowSelected = getSnapshotValue(
snapshot,
isRowSelectedFamilyState(recordId),
@@ -66,7 +63,7 @@ export const useTriggerActionMenuDropdown = ({
set(isActionBarOpenState, false);
set(isActionMenuDropdownOpenState, true);
},
- [actionMenuInstanceId, recordTableId],
+ [actionMenuInstanceId, isRowSelectedFamilyState],
);
return { triggerActionMenuDropdown };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useUpsertRecord.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useUpsertRecord.ts
index b181f4d46..d1d454f93 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useUpsertRecord.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useUpsertRecord.ts
@@ -7,27 +7,29 @@ import { recordFieldInputDraftValueComponentSelector } from '@/object-record/rec
import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { extractComponentSelector } from '@/ui/utilities/state/component-state/utils/extractComponentSelector';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
import { isDefined } from '~/utils/isDefined';
export const useUpsertRecord = ({
objectNameSingular,
+ recordTableId,
}: {
objectNameSingular: string;
+ recordTableId: string;
}) => {
const { createOneRecord } = useCreateOneRecord({
objectNameSingular,
});
+ const recordTablePendingRecordIdState = useRecoilComponentCallbackStateV2(
+ recordTablePendingRecordIdComponentState,
+ recordTableId,
+ );
+
const upsertRecord = useRecoilCallback(
({ snapshot }) =>
- (
- persistField: () => void,
- recordId: string,
- fieldName: string,
- recordTableId: string,
- ) => {
+ (persistField: () => void, recordId: string, fieldName: string) => {
const objectMetadataItems = snapshot
.getLoadable(objectMetadataItemsState)
.getValue();
@@ -43,13 +45,6 @@ export const useUpsertRecord = ({
const labelIdentifierFieldMetadataItem =
getLabelIdentifierFieldMetadataItem(foundObjectMetadataItem);
- const tableScopeId = getScopeIdFromComponentId(recordTableId);
-
- const recordTablePendingRecordIdState = extractComponentState(
- recordTablePendingRecordIdComponentState,
- tableScopeId,
- );
-
const recordTablePendingRecordId = getSnapshotValue(
snapshot,
recordTablePendingRecordIdState,
@@ -75,7 +70,7 @@ export const useUpsertRecord = ({
persistField();
}
},
- [createOneRecord, objectNameSingular],
+ [createOneRecord, objectNameSingular, recordTablePendingRecordIdState],
);
return { upsertRecord };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHead.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHead.tsx
index c15a0917e..25490595e 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHead.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHead.tsx
@@ -4,8 +4,8 @@ import { MOBILE_VIEWPORT, useIcons } from 'twenty-ui';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { ColumnDefinition } from '../../types/ColumnDefinition';
type RecordTableColumnHeadProps = {
@@ -55,7 +55,7 @@ export const RecordTableColumnHead = ({
const { getIcon } = useIcons();
const Icon = getIcon(column.iconName);
- const isRecordTableScrolledLeft = useRecoilComponentValue(
+ const isRecordTableScrolledLeft = useRecoilComponentValueV2(
isRecordTableScrolledLeftComponentState,
);
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx
index 6065e45a1..ca64ae1ec 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx
@@ -1,4 +1,3 @@
-import { useRecoilValue } from 'recoil';
import {
IconArrowLeft,
IconArrowRight,
@@ -8,12 +7,15 @@ import {
} from 'twenty-ui';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { onToggleColumnFilterComponentState } from '@/object-record/record-table/states/onToggleColumnFilterComponentState';
+import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useTableColumns } from '../../hooks/useTableColumns';
import { ColumnDefinition } from '../../types/ColumnDefinition';
@@ -24,13 +26,9 @@ export type RecordTableColumnHeadDropdownMenuProps = {
export const RecordTableColumnHeadDropdownMenu = ({
column,
}: RecordTableColumnHeadDropdownMenuProps) => {
- const {
- visibleTableColumnsSelector,
- onToggleColumnFilterState,
- onToggleColumnSortState,
- } = useRecordTableStates();
-
- const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+ const visibleTableColumns = useRecoilComponentValueV2(
+ visibleTableColumnsComponentSelector,
+ );
const secondVisibleColumn = visibleTableColumns[1];
const canMove = column.isLabelIdentifier !== true;
@@ -67,8 +65,12 @@ export const RecordTableColumnHeadDropdownMenu = ({
handleColumnVisibilityChange(column);
};
- const onToggleColumnFilter = useRecoilValue(onToggleColumnFilterState);
- const onToggleColumnSort = useRecoilValue(onToggleColumnSortState);
+ const onToggleColumnFilter = useRecoilComponentValueV2(
+ onToggleColumnFilterComponentState,
+ );
+ const onToggleColumnSort = useRecoilComponentValueV2(
+ onToggleColumnSortComponentState,
+ );
const handleSortClick = () => {
closeDropdown();
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx
index b17b50a23..22da2e8c4 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx
@@ -1,12 +1,12 @@
import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
import { MOBILE_VIEWPORT } from 'twenty-ui';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { RecordTableHeaderCell } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCell';
import { RecordTableHeaderCheckboxColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn';
import { RecordTableHeaderDragDropColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn';
import { RecordTableHeaderLastColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
const StyledTableHead = styled.thead`
cursor: pointer;
@@ -75,9 +75,9 @@ export const RecordTableHeader = ({
}: {
objectMetadataNameSingular: string;
}) => {
- const { visibleTableColumnsSelector } = useRecordTableStates();
-
- const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+ const visibleTableColumns = useRecoilComponentValueV2(
+ visibleTableColumnsComponentSelector,
+ );
return (