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 ( diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx index 393dfd5f0..f2cc2a0d7 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx @@ -1,21 +1,24 @@ import styled from '@emotion/styled'; import { useCallback, useMemo, useState } from 'react'; -import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilCallback } from 'recoil'; import { IconPlus, LightIconButton } from 'twenty-ui'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { useCreateNewTableRecord } from '@/object-record/record-table/hooks/useCreateNewTableRecords'; import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns'; import { RecordTableColumnHeadWithDropdown } from '@/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown'; import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState'; +import { resizeFieldOffsetComponentState } from '@/object-record/record-table/states/resizeFieldOffsetComponentState'; +import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState'; import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; -import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; +import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; +import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { mapArrayToObject } from '~/utils/array/mapArrayToObject'; const COLUMN_MIN_WIDTH = 104; @@ -96,17 +99,19 @@ export const RecordTableHeaderCell = ({ column: ColumnDefinition; objectMetadataNameSingular: string; }) => { - const { resizeFieldOffsetState, tableColumnsState } = useRecordTableStates(); - const { objectMetadataItem } = useObjectMetadataItem({ objectNameSingular: objectMetadataNameSingular, }); - const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState( - resizeFieldOffsetState, + const resizeFieldOffsetState = useRecoilComponentCallbackStateV2( + resizeFieldOffsetComponentState, ); - const tableColumns = useRecoilValue(tableColumnsState); + const [resizeFieldOffset, setResizeFieldOffset] = useRecoilComponentStateV2( + resizeFieldOffsetComponentState, + ); + + const tableColumns = useRecoilComponentValueV2(tableColumnsComponentState); const tableColumnsByKey = useMemo( () => mapArrayToObject(tableColumns, ({ fieldMetadataId }) => fieldMetadataId), @@ -181,7 +186,7 @@ export const RecordTableHeaderCell = ({ onMouseUp: handleResizeHandlerEnd, }); - const isRecordTableScrolledLeft = useRecoilComponentValue( + const isRecordTableScrolledLeft = useRecoilComponentValueV2( isRecordTableScrolledLeftComponentState, ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx index 3a053fe92..6cb3894da 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; -import { useRecoilValue } from 'recoil'; -import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; +import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { Checkbox } from 'twenty-ui'; const StyledContainer = styled.div` @@ -23,9 +23,9 @@ const StyledColumnHeaderCell = styled.th` `; export const RecordTableHeaderCheckboxColumn = () => { - const { allRowsSelectedStatusSelector } = useRecordTableStates(); - - const allRowsSelectedStatus = useRecoilValue(allRowsSelectedStatusSelector()); + const allRowsSelectedStatus = useRecoilComponentValueV2( + allRowsSelectedStatusComponentSelector, + ); const { selectAllRows, resetTableRowSelection, setHasUserSelectedAllRows } = useRecordTable(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx index 9cf9df75c..9b20a28c6 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx @@ -1,14 +1,14 @@ import { Theme } from '@emotion/react'; import styled from '@emotion/styled'; import { useContext } from 'react'; -import { useRecoilValue } from 'recoil'; import { IconPlus, ThemeContext } from 'twenty-ui'; import { HIDDEN_TABLE_COLUMN_DROPDOWN_ID } from '@/object-record/record-table/constants/HiddenTableColumnDropdownId'; -import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { RecordTableHeaderPlusButtonContent } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent'; +import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScrollWrapperScopedRef'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; const StyledPlusIconHeaderCell = styled.th<{ theme: Theme; @@ -58,9 +58,9 @@ export const RecordTableHeaderLastColumn = () => { (scrollWrapper.ref.current?.clientWidth ?? 0) < (scrollWrapper.ref.current?.scrollWidth ?? 0); - const { hiddenTableColumnsSelector } = useRecordTableStates(); - - const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector()); + const hiddenTableColumns = useRecoilComponentValueV2( + hiddenTableColumnsComponentSelector, + ); return ( { const { objectMetadataItem } = useContext(RecordTableContext); const { closeDropdown } = useDropdown(); - const { hiddenTableColumnsSelector } = useRecordTableStates(); - - const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector()); + const hiddenTableColumns = useRecoilComponentValueV2( + hiddenTableColumnsComponentSelector, + ); const { getIcon } = useIcons(); const { handleColumnVisibilityChange } = useTableColumns(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableCellsEmpty.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableCellsEmpty.tsx index 2df7a27f4..3186f8657 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableCellsEmpty.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableCellsEmpty.tsx @@ -1,15 +1,16 @@ import { useContext } from 'react'; -import { useRecoilValue } from 'recoil'; -import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd'; import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext'; -import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; +import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd'; +import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; export const RecordTableCellsEmpty = () => { const { isSelected } = useContext(RecordTableRowContext); - const { visibleTableColumnsSelector } = useRecordTableStates(); - const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector()); + const visibleTableColumns = useRecoilComponentValueV2( + visibleTableColumnsComponentSelector, + ); return visibleTableColumns.map((column) => ( diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableCellsVisible.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableCellsVisible.tsx index f72311160..081247b2d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableCellsVisible.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableCellsVisible.tsx @@ -1,17 +1,18 @@ import { useContext } from 'react'; -import { useRecoilValue } from 'recoil'; import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext'; -import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { RecordTableCell } from '@/object-record/record-table/record-table-cell/components/RecordTableCell'; import { RecordTableCellWrapper } from '@/object-record/record-table/record-table-cell/components/RecordTableCellWrapper'; import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd'; +import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; export const RecordTableCellsVisible = () => { const { isDragging, isSelected } = useContext(RecordTableRowContext); - const { visibleTableColumnsSelector } = useRecordTableStates(); - const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector()); + const visibleTableColumns = useRecoilComponentValueV2( + visibleTableColumnsComponentSelector, + ); const tableColumnsAfterFirst = visibleTableColumns.slice(1); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTablePendingRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTablePendingRow.tsx index addf2d747..a49784e7a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTablePendingRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTablePendingRow.tsx @@ -1,11 +1,11 @@ -import { useRecoilValue } from 'recoil'; - -import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow'; +import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; export const RecordTablePendingRow = () => { - const { pendingRecordIdState } = useRecordTableStates(); - const pendingRecordId = useRecoilValue(pendingRecordIdState); + const pendingRecordId = useRecoilComponentValueV2( + recordTablePendingRecordIdComponentState, + ); if (!pendingRecordId) return <>; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx index ef0b399fd..311c1d5df 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx @@ -2,15 +2,15 @@ import { useTheme } from '@emotion/react'; import { Draggable } from '@hello-pangea/dnd'; import { ReactNode, useContext, useEffect } from 'react'; import { useInView } from 'react-intersection-observer'; -import { useRecoilValue } from 'recoil'; import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage'; import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext'; import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext'; import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext'; -import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { RecordTableTr } from '@/object-record/record-table/record-table-row/components/RecordTableTr'; +import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; import { RecordTableWithWrappersScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts'; +import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2'; export const RecordTableRowWrapper = ({ recordId, @@ -28,8 +28,10 @@ export const RecordTableRowWrapper = ({ const theme = useTheme(); - const { isRowSelectedFamilyState } = useRecordTableStates(); - const currentRowSelected = useRecoilValue(isRowSelectedFamilyState(recordId)); + const currentRowSelected = useRecoilComponentFamilyValueV2( + isRowSelectedComponentFamilyState, + recordId, + ); const scrollWrapperRef = useContext( RecordTableWithWrappersScrollWrapperContext, diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useSetCurrentRowSelected.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useSetCurrentRowSelected.ts index e719330f7..76effd043 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useSetCurrentRowSelected.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useSetCurrentRowSelected.ts @@ -2,13 +2,16 @@ import { useContext } from 'react'; import { useRecoilCallback } from 'recoil'; import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext'; -import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; +import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; +import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; export const useSetCurrentRowSelected = () => { const { recordId } = useContext(RecordTableRowContext); - const { isRowSelectedFamilyState } = useRecordTableStates(); + const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2( + isRowSelectedComponentFamilyState, + ); const setCurrentRowSelected = useRecoilCallback( ({ set, snapshot }) => diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState.ts index 2d19afefa..aff1aa0bb 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState.ts @@ -1,7 +1,9 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; export const hasUserSelectedAllRowsComponentState = - createComponentState({ + createComponentStateV2({ key: 'hasUserSelectedAllRowsFamilyState', defaultValue: false, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState.ts index 803921f1e..d4f48c395 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState.ts @@ -1,9 +1,11 @@ -import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilyStateV2'; -export const isRowSelectedComponentFamilyState = createComponentFamilyState< +export const isRowSelectedComponentFamilyState = createComponentFamilyStateV2< boolean, string >({ key: 'isRowSelectedComponentFamilyState', defaultValue: false, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/scopes/RecordTableScope.tsx b/packages/twenty-front/src/modules/object-record/record-table/scopes/RecordTableScope.tsx deleted file mode 100644 index 63ead4b8a..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/scopes/RecordTableScope.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { ReactNode } from 'react'; - -import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; - -import { RecordTableScopeInternalContext } from './scope-internal-context/RecordTableScopeInternalContext'; -import { RecordTableScopeInitEffect } from './RecordTableScopeInitEffect'; - -type RecordTableScopeProps = { - children: ReactNode; - recordTableScopeId: string; - onColumnsChange: (columns: ColumnDefinition[]) => void; -}; - -export const RecordTableScope = ({ - children, - recordTableScopeId, - onColumnsChange, -}: RecordTableScopeProps) => { - return ( - - - {children} - - ); -}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext.ts b/packages/twenty-front/src/modules/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext.ts deleted file mode 100644 index 1665e2b96..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext'; -import { RecoilComponentStateKey } from '@/ui/utilities/state/component-state/types/RecoilComponentStateKey'; - -import { ColumnDefinition } from '../../types/ColumnDefinition'; - -// TODO: separate scope contexts from event contexts -type RecordTableScopeInternalContextProps = RecoilComponentStateKey & { - onColumnsChange: (columns: ColumnDefinition[]) => void; -}; - -export const RecordTableScopeInternalContext = - createScopeInternalContext(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsComponentState.ts index d7fcfa072..f0eca841c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsComponentState.ts @@ -1,11 +1,13 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; import { ColumnDefinition } from '../types/ColumnDefinition'; -export const availableTableColumnsComponentState = createComponentState< +export const availableTableColumnsComponentState = createComponentStateV2< ColumnDefinition[] >({ key: 'availableTableColumnsComponentState', defaultValue: [], + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/context/RecordTableComponentInstanceContext.ts b/packages/twenty-front/src/modules/object-record/record-table/states/context/RecordTableComponentInstanceContext.ts new file mode 100644 index 000000000..689e25fbc --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/context/RecordTableComponentInstanceContext.ts @@ -0,0 +1,13 @@ +import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; + +import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2'; +import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext'; +import { ColumnDefinition } from '../../types/ColumnDefinition'; + +// TODO: separate scope contexts from event contexts +type RecordTableComponentInstanceContextProps = ComponentStateKeyV2 & { + onColumnsChange: (columns: ColumnDefinition[]) => void; +}; + +export const RecordTableComponentInstanceContext = + createComponentInstanceContext(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionComponentState.ts index 88616eb1b..77adc75b2 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionComponentState.ts @@ -1,12 +1,13 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; - +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; import { TableCellPosition } from '../types/TableCellPosition'; export const currentTableCellInEditModePositionComponentState = - createComponentState({ + createComponentStateV2({ key: 'currentTableCellInEditModePositionComponentState', defaultValue: { row: 0, column: 1, }, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2.ts b/packages/twenty-front/src/modules/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2.ts index a30216912..8ce87c358 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2.ts @@ -1,9 +1,9 @@ -import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext'; -import { createComponentStateV2_alpha } from '@/ui/utilities/state/component-state/utils/createComponentStateV2Alpha'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; export const hasRecordTableFetchedAllRecordsComponentStateV2 = - createComponentStateV2_alpha({ + createComponentStateV2({ key: 'hasRecordTableFetchedAllRecordsComponentStateV2', - componentContext: RecordTableScopeInternalContext, + componentInstanceContext: RecordTableComponentInstanceContext, defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingComponentState.ts index 01d7f280d..4960f1ead 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingComponentState.ts @@ -1,7 +1,9 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; export const isRecordTableInitialLoadingComponentState = - createComponentState({ + createComponentStateV2({ key: 'isRecordTableInitialLoadingComponentState', defaultValue: true, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableScrolledLeftComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableScrolledLeftComponentState.ts index a11aa2eb7..e8bbbe3e0 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableScrolledLeftComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableScrolledLeftComponentState.ts @@ -1,9 +1,9 @@ -import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext'; -import { createComponentStateV2_alpha } from '@/ui/utilities/state/component-state/utils/createComponentStateV2Alpha'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; export const isRecordTableScrolledLeftComponentState = - createComponentStateV2_alpha({ + createComponentStateV2({ key: 'isRecordTableScrolledLeftComponentState', - componentContext: RecordTableScopeInternalContext, + componentInstanceContext: RecordTableComponentInstanceContext, defaultValue: true, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftDeleteFilterActiveComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftDeleteFilterActiveComponentState.ts index 58b236c95..24fbfa680 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftDeleteFilterActiveComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftDeleteFilterActiveComponentState.ts @@ -1,7 +1,9 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; export const isSoftDeleteFilterActiveComponentState = - createComponentState({ + createComponentStateV2({ key: 'isSoftDeleteFilterActiveComponentState', defaultValue: false, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveComponentState.ts index a9b726ddf..a077573b2 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveComponentState.ts @@ -1,6 +1,8 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; -export const isSoftFocusActiveComponentState = createComponentState({ +export const isSoftFocusActiveComponentState = createComponentStateV2({ key: 'isSoftFocusActiveComponentState', defaultValue: false, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState.ts index dd9023404..57ee967a2 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState.ts @@ -1,9 +1,10 @@ -import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; - +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilyStateV2'; import { TableCellPosition } from '../types/TableCellPosition'; export const isSoftFocusOnTableCellComponentFamilyState = - createComponentFamilyState({ + createComponentFamilyStateV2({ key: 'isSoftFocusOnTableCellComponentFamilyState', defaultValue: false, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeComponentFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeComponentFamilyState.ts index e049c0349..ec71ea571 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeComponentFamilyState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeComponentFamilyState.ts @@ -1,9 +1,10 @@ -import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; - +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilyStateV2'; import { TableCellPosition } from '../types/TableCellPosition'; export const isTableCellInEditModeComponentFamilyState = - createComponentFamilyState({ + createComponentFamilyStateV2({ key: 'isTableCellInEditModeComponentFamilyState', defaultValue: false, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsComponentState.ts index 2e6340e6d..d2f6ccc75 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsComponentState.ts @@ -1,6 +1,8 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; -export const numberOfTableRowsComponentState = createComponentState({ +export const numberOfTableRowsComponentState = createComponentStateV2({ key: 'numberOfTableRowsComponentState', defaultValue: 0, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeComponentState.ts index b157eb071..a3635dcc4 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeComponentState.ts @@ -1,10 +1,12 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; -export const onColumnsChangeComponentState = createComponentState< +export const onColumnsChangeComponentState = createComponentStateV2< ((columns: ColumnDefinition[]) => void) | undefined >({ key: 'onColumnsChangeComponentState', defaultValue: undefined, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeComponentState.ts index 1a88ecfc0..b86124523 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeComponentState.ts @@ -1,8 +1,10 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; -export const onEntityCountChangeComponentState = createComponentState< +export const onEntityCountChangeComponentState = createComponentStateV2< ((entityCount?: number) => void) | undefined >({ key: 'onEntityCountChangeComponentState', defaultValue: undefined, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/onToggleColumnFilterComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/onToggleColumnFilterComponentState.ts index 75a602331..c0e0a972b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/onToggleColumnFilterComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/onToggleColumnFilterComponentState.ts @@ -1,8 +1,10 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; -export const onToggleColumnFilterComponentState = createComponentState< +export const onToggleColumnFilterComponentState = createComponentStateV2< ((fieldMetadataId: string) => void) | undefined >({ key: 'onToggleColumnFilterComponentState', defaultValue: undefined, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/onToggleColumnSortComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/onToggleColumnSortComponentState.ts index 73f0a924a..50dfe3e98 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/onToggleColumnSortComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/onToggleColumnSortComponentState.ts @@ -1,8 +1,10 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; -export const onToggleColumnSortComponentState = createComponentState< +export const onToggleColumnSortComponentState = createComponentStateV2< ((fieldMetadataId: string) => void) | undefined >({ key: 'onToggleColumnSortComponentState', defaultValue: undefined, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/recordTablePendingRecordIdComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/recordTablePendingRecordIdComponentState.ts index 4e594933f..4923567c3 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/recordTablePendingRecordIdComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/recordTablePendingRecordIdComponentState.ts @@ -1,8 +1,10 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; -export const recordTablePendingRecordIdComponentState = createComponentState< +export const recordTablePendingRecordIdComponentState = createComponentStateV2< string | null >({ key: 'recordTablePendingRecordIdState', defaultValue: null, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetComponentState.ts index 9e2700f45..08edc1cea 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetComponentState.ts @@ -1,6 +1,8 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; -export const resizeFieldOffsetComponentState = createComponentState({ +export const resizeFieldOffsetComponentState = createComponentStateV2({ key: 'resizeFieldOffsetComponentState', defaultValue: 0, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector.ts index 6ce6b42ff..77b3d91f0 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector.ts @@ -1,19 +1,23 @@ import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector'; import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState'; -import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; import { AllRowsSelectedStatus } from '../../types/AllRowSelectedStatus'; export const allRowsSelectedStatusComponentSelector = - createComponentReadOnlySelector({ + createComponentSelectorV2({ key: 'allRowsSelectedStatusComponentSelector', + componentInstanceContext: RecordTableComponentInstanceContext, get: - ({ scopeId }) => + ({ instanceId }) => ({ get }) => { - const tableRowIds = get(tableRowIdsComponentState({ scopeId })); + const tableRowIds = get( + tableRowIdsComponentState.atomFamily({ instanceId }), + ); const selectedRowIds = get( - selectedRowIdsComponentSelector({ scopeId }), + selectedRowIdsComponentSelector.selectorFamily({ instanceId }), ); const numberOfSelectedRows = selectedRowIds.length; diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector.ts index c6692670d..9afb7ce46 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector.ts @@ -1,38 +1,41 @@ import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState'; -import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector'; +import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; import { mapArrayToObject } from '~/utils/array/mapArrayToObject'; -export const hiddenTableColumnsComponentSelector = - createComponentReadOnlySelector({ - key: 'hiddenTableColumnsComponentSelector', - get: - ({ scopeId }) => - ({ get }) => { - const tableColumns = get(tableColumnsComponentState({ scopeId })); - const availableColumns = get( - availableTableColumnsComponentState({ scopeId }), - ); - const tableColumnsByKey = mapArrayToObject( - tableColumns, - ({ fieldMetadataId }) => fieldMetadataId, - ); +export const hiddenTableColumnsComponentSelector = createComponentSelectorV2({ + key: 'hiddenTableColumnsComponentSelector', + componentInstanceContext: RecordTableComponentInstanceContext, + get: + ({ instanceId }) => + ({ get }) => { + const tableColumns = get( + tableColumnsComponentState.atomFamily({ instanceId }), + ); + const availableColumns = get( + availableTableColumnsComponentState.atomFamily({ instanceId }), + ); + const tableColumnsByKey = mapArrayToObject( + tableColumns, + ({ fieldMetadataId }) => fieldMetadataId, + ); - const hiddenColumns = availableColumns - .filter( - ({ fieldMetadataId }) => - !tableColumnsByKey[fieldMetadataId]?.isVisible, - ) - .map((availableColumn) => { - const { fieldMetadataId } = availableColumn; - const existingTableColumn = tableColumnsByKey[fieldMetadataId]; + const hiddenColumns = availableColumns + .filter( + ({ fieldMetadataId }) => + !tableColumnsByKey[fieldMetadataId]?.isVisible, + ) + .map((availableColumn) => { + const { fieldMetadataId } = availableColumn; + const existingTableColumn = tableColumnsByKey[fieldMetadataId]; - return { - ...(existingTableColumn || availableColumn), - isVisible: false, - }; - }); + return { + ...(existingTableColumn || availableColumn), + isVisible: false, + }; + }); - return hiddenColumns; - }, - }); + return hiddenColumns; + }, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector.ts index 83754490c..aa65f35ee 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector.ts @@ -1,11 +1,12 @@ +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState'; -import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector'; +import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; -export const numberOfTableColumnsComponentSelector = - createComponentReadOnlySelector({ - key: 'numberOfTableColumnsComponentSelector', - get: - ({ scopeId }) => - ({ get }) => - get(tableColumnsComponentState({ scopeId })).length, - }); +export const numberOfTableColumnsComponentSelector = createComponentSelectorV2({ + key: 'numberOfTableColumnsComponentSelector', + componentInstanceContext: RecordTableComponentInstanceContext, + get: + ({ instanceId }) => + ({ get }) => + get(tableColumnsComponentState.atomFamily({ instanceId })).length, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsComponentSelector.ts index 3a3a020c8..9f99a82cd 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsComponentSelector.ts @@ -1,21 +1,23 @@ import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState'; -import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector'; +import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; -export const selectedRowIdsComponentSelector = createComponentReadOnlySelector< +export const selectedRowIdsComponentSelector = createComponentSelectorV2< string[] >({ key: 'selectedRowIdsComponentSelector', + componentInstanceContext: RecordTableComponentInstanceContext, get: - ({ scopeId }) => + ({ instanceId }) => ({ get }) => { - const rowIds = get(tableRowIdsComponentState({ scopeId })); + const rowIds = get(tableRowIdsComponentState.atomFamily({ instanceId })); return rowIds.filter( (rowId) => get( - isRowSelectedComponentFamilyState({ - scopeId, + isRowSelectedComponentFamilyState.atomFamily({ + instanceId, familyKey: rowId, }), ) === true, diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector.ts index 37621eacc..3f1a8c997 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector.ts @@ -1,23 +1,26 @@ import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState'; -import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector'; +import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; -export const unselectedRowIdsComponentSelector = - createComponentReadOnlySelector({ - key: 'unselectedRowIdsComponentSelector', - get: - ({ scopeId }) => - ({ get }) => { - const rowIds = get(tableRowIdsComponentState({ scopeId })); +export const unselectedRowIdsComponentSelector = createComponentSelectorV2< + string[] +>({ + key: 'unselectedRowIdsComponentSelector', + componentInstanceContext: RecordTableComponentInstanceContext, + get: + ({ instanceId }) => + ({ get }) => { + const rowIds = get(tableRowIdsComponentState.atomFamily({ instanceId })); - return rowIds.filter( - (rowId) => - get( - isRowSelectedComponentFamilyState({ - scopeId, - familyKey: rowId, - }), - ) === false, - ); - }, - }); + return rowIds.filter( + (rowId) => + get( + isRowSelectedComponentFamilyState.atomFamily({ + instanceId, + familyKey: rowId, + }), + ) === false, + ); + }, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector.ts index fc58195ca..8c47eb7e0 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector.ts @@ -1,15 +1,19 @@ +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState'; -import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector'; +import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; -export const visibleTableColumnsComponentSelector = - createComponentReadOnlySelector({ - key: 'visibleTableColumnsComponentSelector', - get: - ({ scopeId }) => - ({ get }) => { - const columns = get(tableColumnsComponentState({ scopeId })); - return columns - .filter((column) => column.isVisible) - .sort((columnA, columnB) => columnA.position - columnB.position); - }, - }); +export const visibleTableColumnsComponentSelector = createComponentSelectorV2({ + key: 'visibleTableColumnsComponentSelector', + componentInstanceContext: RecordTableComponentInstanceContext, + get: + ({ instanceId }) => + ({ get }) => { + const columns = get( + tableColumnsComponentState.atomFamily({ instanceId }), + ); + + return columns + .filter((column) => column.isVisible) + .sort((columnA, columnB) => columnA.position - columnB.position); + }, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionComponentState.ts index 212b581cc..c59f2cd1f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionComponentState.ts @@ -1,12 +1,13 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; - +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; import { TableCellPosition } from '../types/TableCellPosition'; export const softFocusPositionComponentState = - createComponentState({ + createComponentStateV2({ key: 'softFocusPositionComponentState', defaultValue: { row: 0, column: 1, }, + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableColumnsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableColumnsComponentState.ts index 8c89c2972..af7b3c8ef 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/tableColumnsComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableColumnsComponentState.ts @@ -1,11 +1,13 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; import { ColumnDefinition } from '../types/ColumnDefinition'; -export const tableColumnsComponentState = createComponentState< +export const tableColumnsComponentState = createComponentStateV2< ColumnDefinition[] >({ key: 'tableColumnsComponentState', defaultValue: [], + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableFiltersComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableFiltersComponentState.ts index d19698d0f..cc3848d4d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/tableFiltersComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableFiltersComponentState.ts @@ -1,8 +1,9 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { Filter } from '@/object-record/object-filter-dropdown/types/Filter'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; -import { Filter } from '../../object-filter-dropdown/types/Filter'; - -export const tableFiltersComponentState = createComponentState({ +export const tableFiltersComponentState = createComponentStateV2({ key: 'tableFiltersComponentState', defaultValue: [], + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableLastRowVisibleComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableLastRowVisibleComponentState.ts index 371cd72d6..83495913e 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/tableLastRowVisibleComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableLastRowVisibleComponentState.ts @@ -1,6 +1,9 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; -export const tableLastRowVisibleComponentState = createComponentState({ - key: 'tableLastRowVisibleComponentState', - defaultValue: false, -}); +export const tableLastRowVisibleComponentState = + createComponentStateV2({ + key: 'tableLastRowVisibleComponentState', + defaultValue: false, + componentInstanceContext: RecordTableComponentInstanceContext, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsComponentState.ts index 5350c7f44..c91989791 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsComponentState.ts @@ -1,6 +1,8 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; -export const tableRowIdsComponentState = createComponentState({ +export const tableRowIdsComponentState = createComponentStateV2({ key: 'tableRowIdsComponentState', defaultValue: [], + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableSortsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableSortsComponentState.ts index e36730a28..8f1d82158 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/tableSortsComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableSortsComponentState.ts @@ -1,8 +1,9 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; - +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; import { Sort } from '../../object-sort-dropdown/types/Sort'; -export const tableSortsComponentState = createComponentState({ +export const tableSortsComponentState = createComponentStateV2({ key: 'tableSortsComponentState', defaultValue: [], + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableViewFilterGroupsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableViewFilterGroupsComponentState.ts index 137a91375..c3f13977b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/tableViewFilterGroupsComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableViewFilterGroupsComponentState.ts @@ -1,9 +1,11 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; import { ViewFilterGroup } from '@/views/types/ViewFilterGroup'; -export const tableViewFilterGroupsComponentState = createComponentState< +export const tableViewFilterGroupsComponentState = createComponentStateV2< ViewFilterGroup[] >({ key: 'tableViewFilterGroupsComponentState', defaultValue: [], + componentInstanceContext: RecordTableComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates.ts b/packages/twenty-front/src/modules/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates.ts index 34bc3f77a..e20da80f1 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates.ts +++ b/packages/twenty-front/src/modules/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates.ts @@ -1,14 +1,14 @@ -import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; import { getRelationPickerScopedStates } from '@/object-record/relation-picker/utils/getRelationPickerScopedStates'; -import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; +import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; export const useRelationPickerScopedStates = (args?: { relationPickerScopedId?: string; }) => { const { relationPickerScopedId } = args ?? {}; - const scopeId = useAvailableScopeIdOrThrow( - RecordTableScopeInternalContext, + const scopeId = useAvailableComponentInstanceIdOrThrow( + RecordTableComponentInstanceContext, relationPickerScopedId, ); diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelectorV2.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelectorV2.ts index 352bff92f..8f08559d7 100644 --- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelectorV2.ts +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelectorV2.ts @@ -1,3 +1,5 @@ +/* eslint-disable no-redeclare */ +/* eslint-disable prefer-arrow/prefer-arrow-functions */ import { selectorFamily } from 'recoil'; import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext'; @@ -9,19 +11,32 @@ import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter'; import { SelectorSetter } from '@/ui/utilities/state/types/SelectorSetter'; import { isDefined } from 'twenty-ui'; -export const createComponentSelectorV2 = ({ +export function createComponentSelectorV2(options: { + key: string; + get: SelectorGetter; + componentInstanceContext: ComponentInstanceStateContext | null; +}): ComponentReadOnlySelectorV2; + +export function createComponentSelectorV2(options: { + key: string; + get: SelectorGetter; + set: SelectorSetter; + componentInstanceContext: ComponentInstanceStateContext | null; +}): ComponentSelectorV2; + +export function createComponentSelectorV2({ key, get, set, - instanceContext, + componentInstanceContext, }: { key: string; get: SelectorGetter; set?: SelectorSetter; - instanceContext: ComponentInstanceStateContext | null; -}): ComponentSelectorV2 | ComponentReadOnlySelectorV2 => { - if (isDefined(instanceContext)) { - globalComponentInstanceContextMap.set(key, instanceContext); + componentInstanceContext: ComponentInstanceStateContext | null; +}): ComponentSelectorV2 | ComponentReadOnlySelectorV2 { + if (isDefined(componentInstanceContext)) { + globalComponentInstanceContextMap.set(key, componentInstanceContext); } if (isDefined(set)) { @@ -44,4 +59,4 @@ export const createComponentSelectorV2 = ({ }), } satisfies ComponentReadOnlySelectorV2; } -}; +} diff --git a/packages/twenty-front/src/utils/format/__tests__/formatDate.test.ts b/packages/twenty-front/src/utils/format/__tests__/formatDate.test.ts index 64d884676..2dbffb8bf 100644 --- a/packages/twenty-front/src/utils/format/__tests__/formatDate.test.ts +++ b/packages/twenty-front/src/utils/format/__tests__/formatDate.test.ts @@ -25,6 +25,6 @@ describe('formatToHumanReadableTime', () => { const date = new Date('2022-01-01T12:30:00Z'); const result = formatToHumanReadableTime(date, 'UTC'); - expect(['12:30 PM', '12:30 PM']).toContain(result); + expect(['12:30 PM', '12:30 PM', '12:30 p.m.']).toContain(result); }); });