diff --git a/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts b/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts index d65e78eb2..f15603815 100644 --- a/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts +++ b/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts @@ -1,22 +1,19 @@ import { useRecoilCallback } from 'recoil'; import { ActivityType } from '@/activities/types/Activity'; -import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; -import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; +import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; import { ActivityTargetableObject } from '../types/ActivityTargetableEntity'; import { useOpenCreateActivityDrawer } from './useOpenCreateActivityDrawer'; export const useOpenCreateActivityDrawerForSelectedRowIds = ( - recordTableScopeId: string, + recordTableId: string, ) => { const openCreateActivityDrawer = useOpenCreateActivityDrawer(); - const { selectedRowIdsScopeInjector } = getRecordTableScopeInjector(); - - const { injectSelectorSnapshotValueWithRecordTableScopeId } = - useRecordTableScopedStates(recordTableScopeId); + const { selectedRowIdsSelector } = useRecordTableStates(recordTableId); return useRecoilCallback( ({ snapshot }) => @@ -25,11 +22,10 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = ( objectNameSingular: string, relatedEntities?: ActivityTargetableObject[], ) => { - const selectedRowIds = - injectSelectorSnapshotValueWithRecordTableScopeId( - snapshot, - selectedRowIdsScopeInjector, - ); + const selectedRowIds = getSnapshotValue( + snapshot, + selectedRowIdsSelector, + ); let activityTargetableEntityArray: ActivityTargetableObject[] = selectedRowIds.map((id: string) => ({ @@ -48,10 +44,6 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = ( targetableObjects: activityTargetableEntityArray, }); }, - [ - injectSelectorSnapshotValueWithRecordTableScopeId, - openCreateActivityDrawer, - selectedRowIdsScopeInjector, - ], + [openCreateActivityDrawer, selectedRowIdsSelector], ); }; diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx index 2369ad225..a1c3e557b 100644 --- a/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx +++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx @@ -70,7 +70,7 @@ export const TaskGroups = ({ const openCreateActivity = useOpenCreateActivityDrawer(); const { activeTabIdState } = useTabList(TASKS_TAB_LIST_COMPONENT_ID); - const activeTabId = useRecoilValue(activeTabIdState); + const activeTabId = useRecoilValue(activeTabIdState()); if ( (activeTabId !== 'done' && diff --git a/packages/twenty-front/src/modules/object-record/components/RecordTableContainer.tsx b/packages/twenty-front/src/modules/object-record/components/RecordTableContainer.tsx index fb6d89b50..bf3428d8c 100644 --- a/packages/twenty-front/src/modules/object-record/components/RecordTableContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/components/RecordTableContainer.tsx @@ -57,7 +57,7 @@ export const RecordTableContainer = ({ const viewBarId = objectNamePlural ?? ''; const { setTableFilters, setTableSorts, setTableColumns } = useRecordTable({ - recordTableScopeId: recordTableId, + recordTableId, }); const updateEntity = ({ variables }: RecordUpdateHookParams) => { @@ -69,7 +69,7 @@ export const RecordTableContainer = ({ const handleImport = () => { const openImport = - recordTableId === 'companies' + objectNamePlural === 'companies' ? openCompanySpreadsheetImport : openPersonSpreadsheetImport; openImport(); @@ -104,9 +104,14 @@ export const RecordTableContainer = ({ }} /> - + { const { - // Todo: do not infer objectNamePlural from recordTableId - scopeId: objectNamePlural, setAvailableTableColumns, setOnEntityCountChange, setObjectMetadataConfig, - } = useRecordTable({ recordTableScopeId: recordTableId }); + setObjectNamePlural, + } = useRecordTable({ recordTableId }); + + useEffect(() => { + setObjectNamePlural(objectNamePlural); + }, [setObjectNamePlural, objectNamePlural]); const { objectNameSingular } = useObjectNameSingularFromPlural({ objectNamePlural, @@ -93,7 +98,8 @@ export const RecordTableEffect = ({ const { setActionBarEntries, setContextMenuEntries } = useRecordTableContextMenuEntries({ - recordTableScopeId: recordTableId, + objectNamePlural, + recordTableId, }); useEffect(() => { 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 1543a413e..bc8286cc7 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 @@ -5,24 +5,37 @@ import { renderHook } from '@testing-library/react'; import { RecoilRoot } from 'recoil'; import { useObjectRecordTable } from '@/object-record/hooks/useObjectRecordTable'; +import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope'; import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope'; +import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId'; -const recordTableScopeId = 'people'; +const recordTableId = 'people'; const onColumnsChange = jest.fn(); -const Wrapper = ({ children }: { children: ReactNode }) => ( - - - - {children} - - - -); +const ObjectNamePluralSetter = ({ children }: { children: ReactNode }) => { + const { setObjectNamePlural } = useRecordTable({ recordTableId }); + setObjectNamePlural('people'); + + return <>{children}; +}; + +const Wrapper = ({ children }: { children: ReactNode }) => { + return ( + + + + + {children} + + + + + ); +}; describe('useObjectRecordTable', () => { it('should skip fetch if currentWorkspace is undefined', async () => { diff --git a/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts b/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts index 7f112ec35..d815f3f44 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts @@ -5,16 +5,15 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural'; import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy'; import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter'; -import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; -import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { signInBackgroundMockCompanies } from '@/sign-in-background-mock/constants/signInBackgroundMockCompanies'; import { useFindManyRecords } from './useFindManyRecords'; export const useObjectRecordTable = () => { const { - scopeId: objectNamePlural, + objectNamePlural, setRecordTableData, setIsRecordTableInitialLoading, } = useRecordTable(); @@ -30,29 +29,12 @@ export const useObjectRecordTable = () => { }, ); - const { - tableFiltersScopeInjector, - tableSortsScopeInjector, - tableLastRowVisibleScopeInjector, - } = getRecordTableScopeInjector(); + const { tableFiltersState, tableSortsState, tableLastRowVisibleState } = + useRecordTableStates(); - const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates(); - - const tableFiltersState = injectStateWithRecordTableScopeId( - tableFiltersScopeInjector, - ); - - const tableSortsState = injectStateWithRecordTableScopeId( - tableSortsScopeInjector, - ); - - const tableLastRowVisibleState = injectStateWithRecordTableScopeId( - tableLastRowVisibleScopeInjector, - ); - - const tableFilters = useRecoilValue(tableFiltersState); - const tableSorts = useRecoilValue(tableSortsState); - const setLastRowVisible = useSetRecoilState(tableLastRowVisibleState); + const tableFilters = useRecoilValue(tableFiltersState()); + const tableSorts = useRecoilValue(tableSortsState()); + const setLastRowVisible = useSetRecoilState(tableLastRowVisibleState()); const requestFilters = turnObjectDropdownFilterIntoQueryFilter( tableFilters, diff --git a/packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx b/packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx index 501f52a8d..4ae15e6ed 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx +++ b/packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx @@ -8,10 +8,8 @@ import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObje import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords'; import { useExecuteQuickActionOnOneRecord } from '@/object-record/hooks/useExecuteQuickActionOnOneRecord'; -import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; -import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext'; -import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { IconCheckbox, IconClick, @@ -25,55 +23,37 @@ import { import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState'; import { contextMenuEntriesState } from '@/ui/navigation/context-menu/states/contextMenuEntriesState'; import { ContextMenuEntry } from '@/ui/navigation/context-menu/types/ContextMenuEntry'; -import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; +import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; type useRecordTableContextMenuEntriesProps = { - recordTableScopeId?: string; + objectNamePlural: string; + recordTableId: string; }; // TODO: refactor this export const useRecordTableContextMenuEntries = ( - props?: useRecordTableContextMenuEntriesProps, + props: useRecordTableContextMenuEntriesProps, ) => { - const scopeId = useAvailableScopeIdOrThrow( - RecordTableScopeInternalContext, - props?.recordTableScopeId, - ); - const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState); const setActionBarEntriesState = useSetRecoilState(actionBarEntriesState); - const { selectedRowIdsScopeInjector } = getRecordTableScopeInjector(); - - const { - injectSelectorWithRecordTableScopeId, - injectSelectorSnapshotValueWithRecordTableScopeId, - } = useRecordTableScopedStates(scopeId); - - const selectedRowIdsSelector = injectSelectorWithRecordTableScopeId( - selectedRowIdsScopeInjector, - ); + const { selectedRowIdsSelector } = useRecordTableStates(props?.recordTableId); const selectedRowIds = useRecoilValue(selectedRowIdsSelector); const { resetTableRowSelection } = useRecordTable({ - recordTableScopeId: scopeId, + recordTableId: props?.recordTableId, }); - const objectNamePlural = scopeId; - const { objectNameSingular } = useObjectNameSingularFromPlural({ - objectNamePlural, + objectNamePlural: props.objectNamePlural, }); const { createFavorite, favorites, deleteFavorite } = useFavorites(); const handleFavoriteButtonClick = useRecoilCallback(({ snapshot }) => () => { - const selectedRowIds = injectSelectorSnapshotValueWithRecordTableScopeId( - snapshot, - selectedRowIdsScopeInjector, - ); + const selectedRowIds = getSnapshotValue(snapshot, selectedRowIdsSelector); const selectedRowId = selectedRowIds.length === 1 ? selectedRowIds[0] : ''; @@ -107,31 +87,24 @@ export const useRecordTableContextMenuEntries = ( const handleDeleteClick = useRecoilCallback( ({ snapshot }) => async () => { - const rowIdsToDelete = - injectSelectorSnapshotValueWithRecordTableScopeId( - snapshot, - selectedRowIdsScopeInjector, - ); + const rowIdsToDelete = getSnapshotValue( + snapshot, + selectedRowIdsSelector, + ); resetTableRowSelection(); await deleteManyRecords(rowIdsToDelete); }, - [ - deleteManyRecords, - injectSelectorSnapshotValueWithRecordTableScopeId, - resetTableRowSelection, - selectedRowIdsScopeInjector, - ], + [deleteManyRecords, resetTableRowSelection, selectedRowIdsSelector], ); const handleExecuteQuickActionOnClick = useRecoilCallback( ({ snapshot }) => async () => { - const rowIdsToExecuteQuickActionOn = - injectSelectorSnapshotValueWithRecordTableScopeId( - snapshot, - selectedRowIdsScopeInjector, - ); + const rowIdsToExecuteQuickActionOn = getSnapshotValue( + snapshot, + selectedRowIdsSelector, + ); resetTableRowSelection(); await Promise.all( @@ -142,9 +115,8 @@ export const useRecordTableContextMenuEntries = ( }, [ executeQuickActionOnOneRecord, - injectSelectorSnapshotValueWithRecordTableScopeId, resetTableRowSelection, - selectedRowIdsScopeInjector, + selectedRowIdsSelector, ], ); @@ -152,8 +124,9 @@ export const useRecordTableContextMenuEntries = ( 'IS_QUICK_ACTIONS_ENABLED', ); - const openCreateActivityDrawer = - useOpenCreateActivityDrawerForSelectedRowIds(scopeId); + const openCreateActivityDrawer = useOpenCreateActivityDrawerForSelectedRowIds( + props.recordTableId, + ); return { setContextMenuEntries: useCallback(() => { diff --git a/packages/twenty-front/src/modules/object-record/record-table/action-bar/components/RecordTableActionBar.tsx b/packages/twenty-front/src/modules/object-record/record-table/action-bar/components/RecordTableActionBar.tsx index 4842bf591..eb203fad6 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/action-bar/components/RecordTableActionBar.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/action-bar/components/RecordTableActionBar.tsx @@ -1,7 +1,6 @@ import { useRecoilValue } from 'recoil'; -import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; -import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { ActionBar } from '@/ui/navigation/action-bar/components/ActionBar'; export const RecordTableActionBar = ({ @@ -9,14 +8,7 @@ export const RecordTableActionBar = ({ }: { recordTableId: string; }) => { - const { selectedRowIdsScopeInjector } = getRecordTableScopeInjector(); - - const { injectSelectorWithRecordTableScopeId } = - useRecordTableScopedStates(recordTableId); - - const selectedRowIdsSelector = injectSelectorWithRecordTableScopeId( - selectedRowIdsScopeInjector, - ); + const { selectedRowIdsSelector } = useRecordTableStates(recordTableId); const selectedRowIds = useRecoilValue(selectedRowIdsSelector); 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 048819b40..b0e878ab6 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,10 +1,13 @@ import { useContext } from 'react'; import styled from '@emotion/styled'; +import { useRecoilValue } from 'recoil'; import { RecordTableBody } from '@/object-record/record-table/components/RecordTableBody'; import { RecordTableBodyEffect } from '@/object-record/record-table/components/RecordTableBodyEffect'; import { RecordTableHeader } from '@/object-record/record-table/components/RecordTableHeader'; import { RecordTableRefContext } from '@/object-record/record-table/contexts/RecordTableRefContext'; +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; +import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope'; import { rgba } from '@/ui/theme/constants/colors'; const StyledTable = styled.table` @@ -95,17 +98,38 @@ const StyledTable = styled.table` `; type RecordTableProps = { + recordTableId: string; + onColumnsChange: (columns: any) => void; createRecord: () => void; }; -export const RecordTable = ({ createRecord }: RecordTableProps) => { +export const RecordTable = ({ + recordTableId, + onColumnsChange, + createRecord, +}: RecordTableProps) => { const recordTableRef = useContext(RecordTableRefContext); + const { scopeId, objectNamePluralState } = + useRecordTableStates(recordTableId); + + const objectNamePlural = useRecoilValue(objectNamePluralState()); return ( - - - - - + + <> + {objectNamePlural ? ( + + + + + + ) : ( + <> + )} + + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx index a3d3889a6..0fc0121bd 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx @@ -4,19 +4,12 @@ import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/com import { RecordTableRow } from '@/object-record/record-table/components/RecordTableRow'; import { RowIdContext } from '@/object-record/record-table/contexts/RowIdContext'; import { RowIndexContext } from '@/object-record/record-table/contexts/RowIndexContext'; -import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; -import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; export const RecordTableBody = () => { - const { tableRowIdsScopeInjector } = getRecordTableScopeInjector(); + const { tableRowIdsState } = useRecordTableStates(); - const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates(); - - const tableRowIdsState = injectStateWithRecordTableScopeId( - tableRowIdsScopeInjector, - ); - - const tableRowIds = useRecoilValue(tableRowIdsState); + const tableRowIds = useRecoilValue(tableRowIdsState()); return ( <> diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx index c5d2a26db..d3af3ac94 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx @@ -2,8 +2,7 @@ import { useEffect } from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; import { useObjectRecordTable } from '@/object-record/hooks/useObjectRecordTable'; -import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; -import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState'; export const RecordTableBodyEffect = () => { @@ -15,16 +14,10 @@ export const RecordTableBodyEffect = () => { loading, } = useObjectRecordTable(); - const { tableLastRowVisibleScopeInjector } = getRecordTableScopeInjector(); - - const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates(); - - const tableLastRowVisibleState = injectStateWithRecordTableScopeId( - tableLastRowVisibleScopeInjector, - ); + const { tableLastRowVisibleState } = useRecordTableStates(); const [tableLastRowVisible, setTableLastRowVisible] = useRecoilState( - tableLastRowVisibleState, + tableLastRowVisibleState(), ); const isFetchingMoreObjects = useRecoilValue( diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellContainer.tsx index 66338a68d..420b313ee 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellContainer.tsx @@ -1,8 +1,7 @@ import { useContext } from 'react'; import { useRecoilValue, useSetRecoilState } from 'recoil'; -import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; -import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope'; import { contextMenuIsOpenState } from '@/ui/navigation/context-menu/states/contextMenuIsOpenState'; import { contextMenuPositionState } from '@/ui/navigation/context-menu/states/contextMenuPositionState'; @@ -26,13 +25,9 @@ export const RecordTableCellContainer = ({ const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState); const currentRowId = useContext(RowIdContext); - const { objectMetadataConfigScopeInjector } = getRecordTableScopeInjector(); + const { objectMetadataConfigState } = useRecordTableStates(); - const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates(); - - const objectMetadataConfig = useRecoilValue( - injectStateWithRecordTableScopeId(objectMetadataConfigScopeInjector), - ); + const objectMetadataConfig = useRecoilValue(objectMetadataConfigState()); const { setCurrentRowSelected } = useCurrentRowSelected(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx index 37d11b13c..cd15893c2 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx @@ -3,13 +3,11 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; import { RecordTableHeaderCell } from '@/object-record/record-table/components/RecordTableHeaderCell'; -import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { IconPlus } from '@/ui/display/icon'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScrollWrapperScopedRef'; -import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates'; - import { RecordTableHeaderPlusButtonContent } from './RecordTableHeaderPlusButtonContent'; import { SelectAllCheckbox } from './SelectAllCheckbox'; @@ -58,18 +56,8 @@ export const RecordTableHeader = ({ }: { createRecord: () => void; }) => { - const { hiddenTableColumnsScopeInjector, visibleTableColumnsScopeInjector } = - getRecordTableScopeInjector(); - - const { injectSelectorWithRecordTableScopeId } = useRecordTableScopedStates(); - - const hiddenTableColumnsSelector = injectSelectorWithRecordTableScopeId( - hiddenTableColumnsScopeInjector, - ); - - const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId( - visibleTableColumnsScopeInjector, - ); + const { hiddenTableColumnsSelector, visibleTableColumnsSelector } = + useRecordTableStates(); const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx index aaf70d559..1d40becb5 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx @@ -3,13 +3,13 @@ import styled from '@emotion/styled'; import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil'; import { FieldMetadata } from '@/object-record/field/types/FieldMetadata'; -import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns'; import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; -import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { IconPlus } from '@/ui/display/icon'; import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer'; +import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown'; @@ -81,39 +81,17 @@ export const RecordTableHeaderCell = ({ createRecord: () => void; }) => { const { - resizeFieldOffsetScopeInjector, - tableColumnsScopeInjector, - tableColumnsByKeyScopeInjector, - visibleTableColumnsScopeInjector, - } = getRecordTableScopeInjector(); - - const { - injectStateWithRecordTableScopeId, - injectSelectorWithRecordTableScopeId, - injectSnapshotValueWithRecordTableScopeId, - } = useRecordTableScopedStates(); - - const resizeFieldOffsetState = injectStateWithRecordTableScopeId( - resizeFieldOffsetScopeInjector, - ); + resizeFieldOffsetState, + tableColumnsState, + tableColumnsByKeySelector, + visibleTableColumnsSelector, + } = useRecordTableStates(); const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState( - resizeFieldOffsetState, + resizeFieldOffsetState(), ); - const tableColumnsState = injectStateWithRecordTableScopeId( - tableColumnsScopeInjector, - ); - - const tableColumnsByKeySelector = injectSelectorWithRecordTableScopeId( - tableColumnsByKeyScopeInjector, - ); - - const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId( - visibleTableColumnsScopeInjector, - ); - - const tableColumns = useRecoilValue(tableColumnsState); + const tableColumns = useRecoilValue(tableColumnsState()); const tableColumnsByKey = useRecoilValue(tableColumnsByKeySelector); const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector); @@ -147,9 +125,9 @@ export const RecordTableHeaderCell = ({ async () => { if (!resizedFieldKey) return; - const resizeFieldOffset = injectSnapshotValueWithRecordTableScopeId( + const resizeFieldOffset = getSnapshotValue( snapshot, - resizeFieldOffsetScopeInjector, + resizeFieldOffsetState(), ); const nextWidth = Math.round( @@ -159,7 +137,7 @@ export const RecordTableHeaderCell = ({ ), ); - set(resizeFieldOffsetState, 0); + set(resizeFieldOffsetState(), 0); setInitialPointerPositionX(null); setResizedFieldKey(null); @@ -175,8 +153,6 @@ export const RecordTableHeaderCell = ({ }, [ resizedFieldKey, - injectSnapshotValueWithRecordTableScopeId, - resizeFieldOffsetScopeInjector, tableColumnsByKey, resizeFieldOffsetState, tableColumns, diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx index 6b54bb31b..f8f56c418 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { IconSettings } from '@/ui/display/icon'; import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; @@ -12,20 +12,13 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { FieldMetadata } from '../../field/types/FieldMetadata'; -import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates'; import { useTableColumns } from '../hooks/useTableColumns'; import { ColumnDefinition } from '../types/ColumnDefinition'; export const RecordTableHeaderPlusButtonContent = () => { const { closeDropdown } = useDropdown(); - const { hiddenTableColumnsScopeInjector } = getRecordTableScopeInjector(); - - const { injectSelectorWithRecordTableScopeId } = useRecordTableScopedStates(); - - const hiddenTableColumnsSelector = injectSelectorWithRecordTableScopeId( - hiddenTableColumnsScopeInjector, - ); + const { hiddenTableColumnsSelector } = useRecordTableStates(); const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx index cbb1241e6..6f74a8aa3 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx @@ -7,14 +7,16 @@ import { } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; type RecordTableInternalEffectProps = { + recordTableId: string; tableBodyRef: React.RefObject; }; export const RecordTableInternalEffect = ({ + recordTableId, tableBodyRef, }: RecordTableInternalEffectProps) => { const { leaveTableFocus, resetTableRowSelection, useMapKeyboardToSoftFocus } = - useRecordTable(); + useRecordTable({ recordTableId }); useMapKeyboardToSoftFocus(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx index 667b8a239..0cc051c94 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx @@ -4,11 +4,10 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; import { RecordTableCellContainer } from '@/object-record/record-table/components/RecordTableCellContainer'; -import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper'; import { ColumnContext } from '../contexts/ColumnContext'; -import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates'; import { useCurrentRowSelected } from '../record-table-row/hooks/useCurrentRowSelected'; import { CheckboxCell } from './CheckboxCell'; @@ -27,13 +26,7 @@ const StyledPlaceholder = styled.td` `; export const RecordTableRow = ({ rowId }: RecordTableRowProps) => { - const { visibleTableColumnsScopeInjector } = getRecordTableScopeInjector(); - - const { injectSelectorWithRecordTableScopeId } = useRecordTableScopedStates(); - - const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId( - visibleTableColumnsScopeInjector, - ); + const { visibleTableColumnsSelector } = useRecordTableStates(); const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx index c6f6f1371..744bf1df0 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx @@ -9,8 +9,7 @@ import { RecordTable } from '@/object-record/record-table/components/RecordTable import { RecordTableFirstColumnScrollObserver } from '@/object-record/record-table/components/RecordTableFirstColumnScrollObserver'; import { RecordTableRefContextWrapper } from '@/object-record/record-table/components/RecordTableRefContext'; import { EntityDeleteContext } from '@/object-record/record-table/contexts/EntityDeleteHookContext'; -import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; -import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { IconPlus } from '@/ui/display/icon'; import { Button } from '@/ui/input/button/components/Button'; import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; @@ -20,7 +19,6 @@ import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinit import { RecordUpdateContext } from '../contexts/EntityUpdateMutationHookContext'; import { useRecordTable } from '../hooks/useRecordTable'; -import { RecordTableScope } from '../scopes/RecordTableScope'; import { RecordTableInternalEffect } from './RecordTableInternalEffect'; @@ -68,6 +66,7 @@ const StyledTableContainer = styled.div` `; type RecordTableWithWrappersProps = { + objectNamePlural: string; recordTableId: string; viewBarId: string; updateRecordMutation: (params: any) => void; @@ -77,39 +76,23 @@ type RecordTableWithWrappersProps = { export const RecordTableWithWrappers = ({ updateRecordMutation, createRecord, + objectNamePlural, recordTableId, viewBarId, }: RecordTableWithWrappersProps) => { const tableBodyRef = useRef(null); - const { - numberOfTableRowsScopeInjector, - isRecordTableInitialLoadingScopeInjector, - } = getRecordTableScopeInjector(); + const { numberOfTableRowsState, isRecordTableInitialLoadingState } = + useRecordTableStates(recordTableId); - const { injectStateWithRecordTableScopeId } = - useRecordTableScopedStates(recordTableId); - - const numberOfTableRowsState = injectStateWithRecordTableScopeId( - numberOfTableRowsScopeInjector, - ); - - const isRecordTableInitialLoadingState = injectStateWithRecordTableScopeId( - isRecordTableInitialLoadingScopeInjector, - ); - - const numberOfTableRows = useRecoilValue(numberOfTableRowsState); + const numberOfTableRows = useRecoilValue(numberOfTableRowsState()); const isRecordTableInitialLoading = useRecoilValue( - isRecordTableInitialLoadingState, + isRecordTableInitialLoadingState(), ); - const { - scopeId: objectNamePlural, - resetTableRowSelection, - setRowSelectedState, - } = useRecordTable({ - recordTableScopeId: recordTableId, + const { resetTableRowSelection, setRowSelectedState } = useRecordTable({ + recordTableId, }); const { objectNameSingular } = useObjectNameSingularFromPlural({ @@ -127,50 +110,54 @@ export const RecordTableWithWrappers = ({ const { deleteOneRecord } = useDeleteOneRecord({ objectNameSingular }); return ( - (columns) => { - persistViewFields(mapColumnDefinitionsToViewFields(columns)); - })} - > - - - - - - - -
- - + + + + + + +
+ (columns) => { + persistViewFields( + mapColumnDefinitionsToViewFields(columns), + ); + })} + createRecord={createRecord} + /> + +
+ + {!isRecordTableInitialLoading && numberOfTableRows === 0 && ( + + + No {foundObjectMetadataItem?.namePlural} + + + Create one: + +
- - {!isRecordTableInitialLoading && numberOfTableRows === 0 && ( - - - No {foundObjectMetadataItem?.namePlural} - - - Create one: - -