diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx index 7d81562fc..6b285ca4f 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx @@ -20,7 +20,7 @@ export const AttachmentDropdown = ({ }: AttachmentDropdownProps) => { const dropdownScopeId = `${scopeKey}-settings-field-active-action-dropdown`; - const { closeDropdown } = useDropdown({ dropdownScopeId }); + const { closeDropdown } = useDropdown(dropdownScopeId); const handleDownload = () => { onDownload(); diff --git a/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts b/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts index c5bc22f18..b950b7a6f 100644 --- a/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts +++ b/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts @@ -1,7 +1,8 @@ import { useRecoilCallback } from 'recoil'; import { ActivityType } from '@/activities/types/Activity'; -import { selectedRowIdsSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsSelector'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { ActivityTargetableEntity, @@ -10,9 +11,16 @@ import { import { useOpenCreateActivityDrawer } from './useOpenCreateActivityDrawer'; -export const useOpenCreateActivityDrawerForSelectedRowIds = () => { +export const useOpenCreateActivityDrawerForSelectedRowIds = ( + recordTableScopeId: string, +) => { const openCreateActivityDrawer = useOpenCreateActivityDrawer(); + const { selectedRowIdsScopeInjector } = getRecordTableScopeInjector(); + + const { injectSelectorSnapshotValueWithRecordTableScopeId } = + useRecordTableScopedStates(recordTableScopeId); + return useRecoilCallback( ({ snapshot }) => ( @@ -20,9 +28,12 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = () => { entityType: ActivityTargetableEntityType, relatedEntities?: ActivityTargetableEntity[], ) => { - const selectedRowIds = snapshot - .getLoadable(selectedRowIdsSelector) - .getValue(); + const selectedRowIds = + injectSelectorSnapshotValueWithRecordTableScopeId( + snapshot, + selectedRowIdsScopeInjector, + ); + let activityTargetableEntityArray: ActivityTargetableEntity[] = selectedRowIds.map((id: string) => ({ type: entityType, @@ -37,6 +48,10 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = () => { targetableEntities: activityTargetableEntityArray, }); }, - [openCreateActivityDrawer], + [ + injectSelectorSnapshotValueWithRecordTableScopeId, + openCreateActivityDrawer, + selectedRowIdsScopeInjector, + ], ); }; diff --git a/packages/twenty-front/src/modules/activities/timeline/utils/__tests__/groupActivitiesByMonth.test.ts b/packages/twenty-front/src/modules/activities/timeline/utils/__tests__/groupActivitiesByMonth.test.ts index 9223f0fd3..3be8f3dd7 100644 --- a/packages/twenty-front/src/modules/activities/timeline/utils/__tests__/groupActivitiesByMonth.test.ts +++ b/packages/twenty-front/src/modules/activities/timeline/utils/__tests__/groupActivitiesByMonth.test.ts @@ -13,10 +13,10 @@ describe('groupActivitiesByMonth', () => { expect(grouped[0].items).toHaveLength(1); expect(grouped[1].items).toHaveLength(1); - expect(grouped[0].year).toBe(2023); + expect(grouped[0].year).toBe(new Date().getFullYear()); expect(grouped[1].year).toBe(2023); - expect(grouped[0].month).toBe(11); + expect(grouped[0].month).toBe(new Date().getMonth()); expect(grouped[1].month).toBe(3); }); }); diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts index 89e9a33b9..0d2978c7d 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts +++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts @@ -23,7 +23,7 @@ export const useCommandMenu = () => { const openCommandMenu = () => { setIsCommandMenuOpened(true); - setHotkeyScopeAndMemorizePreviousScope(AppHotkeyScope.CommandMenu); + setHotkeyScopeAndMemorizePreviousScope(AppHotkeyScope.CommandMenuOpen); }; const closeCommandMenu = () => { 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 0045a4620..fb6d89b50 100644 --- a/packages/twenty-front/src/modules/object-record/components/RecordTableContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/components/RecordTableContainer.tsx @@ -28,9 +28,11 @@ const StyledContainer = styled.div` `; export const RecordTableContainer = ({ + recordTableId, objectNamePlural, createRecord, }: { + recordTableId: string; objectNamePlural: string; createRecord: () => void; }) => { @@ -52,7 +54,6 @@ export const RecordTableContainer = ({ const { openPersonSpreadsheetImport } = useSpreadsheetPersonImport(); const { openCompanySpreadsheetImport } = useSpreadsheetCompanyImport(); - const recordTableId = objectNamePlural ?? ''; const viewBarId = objectNamePlural ?? ''; const { setTableFilters, setTableSorts, setTableColumns } = useRecordTable({ diff --git a/packages/twenty-front/src/modules/object-record/components/RecordTablePage.tsx b/packages/twenty-front/src/modules/object-record/components/RecordTablePage.tsx index 8aa454760..57c078632 100644 --- a/packages/twenty-front/src/modules/object-record/components/RecordTablePage.tsx +++ b/packages/twenty-front/src/modules/object-record/components/RecordTablePage.tsx @@ -61,6 +61,8 @@ export const RecordTablePage = () => { await createOneObject?.({}); }; + const recordTableId = objectNamePlural ?? ''; + return ( { - - + + ); 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 900a6f28c..7f112ec35 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts @@ -7,13 +7,17 @@ import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter'; import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; -import { isRecordTableInitialLoadingState } from '@/object-record/record-table/states/isRecordTableInitialLoadingState'; +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, setRecordTableData } = useRecordTable(); + const { + scopeId: objectNamePlural, + setRecordTableData, + setIsRecordTableInitialLoading, + } = useRecordTable(); const currentWorkspace = useRecoilValue(currentWorkspaceState); const { objectNameSingular } = useObjectNameSingularFromPlural({ @@ -25,8 +29,26 @@ export const useObjectRecordTable = () => { objectNameSingular, }, ); - const { tableFiltersState, tableSortsState, tableLastRowVisibleState } = - useRecordTableScopedStates(); + + const { + tableFiltersScopeInjector, + tableSortsScopeInjector, + tableLastRowVisibleScopeInjector, + } = getRecordTableScopeInjector(); + + const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates(); + + const tableFiltersState = injectStateWithRecordTableScopeId( + tableFiltersScopeInjector, + ); + + const tableSortsState = injectStateWithRecordTableScopeId( + tableSortsScopeInjector, + ); + + const tableLastRowVisibleState = injectStateWithRecordTableScopeId( + tableLastRowVisibleScopeInjector, + ); const tableFilters = useRecoilValue(tableFiltersState); const tableSorts = useRecoilValue(tableSortsState); @@ -42,10 +64,6 @@ export const useObjectRecordTable = () => { foundObjectMetadataItem?.fields ?? [], ); - const setIsRecordTableInitialLoading = useSetRecoilState( - isRecordTableInitialLoadingState, - ); - const { records, loading, fetchMoreRecords, queryStateIdentifier } = useFindManyRecords({ objectNameSingular, 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 748a7871d..70737f1f8 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx +++ b/packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx @@ -8,9 +8,10 @@ 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 { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext'; -import { selectedRowIdsSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsSelector'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { IconCheckbox, IconHeart, @@ -41,12 +42,25 @@ export const useRecordTableContextMenuEntries = ( const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState); const setActionBarEntriesState = useSetRecoilState(actionBarEntriesState); + const { selectedRowIdsScopeInjector } = getRecordTableScopeInjector(); + + const { + injectSelectorWithRecordTableScopeId, + injectSelectorSnapshotValueWithRecordTableScopeId, + } = useRecordTableScopedStates(scopeId); + + const selectedRowIdsSelector = injectSelectorWithRecordTableScopeId( + selectedRowIdsScopeInjector, + ); + const selectedRowIds = useRecoilValue(selectedRowIdsSelector); - const { scopeId: objectNamePlural, resetTableRowSelection } = useRecordTable({ + const { resetTableRowSelection } = useRecordTable({ recordTableScopeId: scopeId, }); + const objectNamePlural = scopeId; + const { objectNameSingular } = useObjectNameSingularFromPlural({ objectNamePlural, }); @@ -61,9 +75,10 @@ export const useRecordTableContextMenuEntries = ( : 'Custom'; const handleFavoriteButtonClick = useRecoilCallback(({ snapshot }) => () => { - const selectedRowIds = snapshot - .getLoadable(selectedRowIdsSelector) - .getValue(); + const selectedRowIds = injectSelectorSnapshotValueWithRecordTableScopeId( + snapshot, + selectedRowIdsScopeInjector, + ); const selectedRowId = selectedRowIds.length === 1 ? selectedRowIds[0] : ''; @@ -97,22 +112,31 @@ export const useRecordTableContextMenuEntries = ( const handleDeleteClick = useRecoilCallback( ({ snapshot }) => async () => { - const rowIdsToDelete = snapshot - .getLoadable(selectedRowIdsSelector) - .getValue(); + const rowIdsToDelete = + injectSelectorSnapshotValueWithRecordTableScopeId( + snapshot, + selectedRowIdsScopeInjector, + ); resetTableRowSelection(); await deleteManyRecords(rowIdsToDelete); }, - [deleteManyRecords, resetTableRowSelection], + [ + deleteManyRecords, + injectSelectorSnapshotValueWithRecordTableScopeId, + resetTableRowSelection, + selectedRowIdsScopeInjector, + ], ); const handleExecuteQuickActionOnClick = useRecoilCallback( ({ snapshot }) => async () => { - const rowIdsToExecuteQuickActionOn = snapshot - .getLoadable(selectedRowIdsSelector) - .getValue(); + const rowIdsToExecuteQuickActionOn = + injectSelectorSnapshotValueWithRecordTableScopeId( + snapshot, + selectedRowIdsScopeInjector, + ); resetTableRowSelection(); await Promise.all( @@ -121,7 +145,12 @@ export const useRecordTableContextMenuEntries = ( }), ); }, - [executeQuickActionOnOneRecord, resetTableRowSelection], + [ + executeQuickActionOnOneRecord, + injectSelectorSnapshotValueWithRecordTableScopeId, + resetTableRowSelection, + selectedRowIdsScopeInjector, + ], ); const dataExecuteQuickActionOnmentEnabled = useIsFeatureEnabled( @@ -129,7 +158,7 @@ export const useRecordTableContextMenuEntries = ( ); const openCreateActivityDrawer = - useOpenCreateActivityDrawerForSelectedRowIds(); + useOpenCreateActivityDrawerForSelectedRowIds(scopeId); return { setContextMenuEntries: useCallback(() => { diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx index ec62fa845..b1347ed39 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx @@ -12,9 +12,7 @@ type AddObjectFilterFromDetailsButtonProps = { export const AddObjectFilterFromDetailsButton = ({ filterDropdownId, }: AddObjectFilterFromDetailsButtonProps) => { - const { toggleDropdown } = useDropdown({ - dropdownScopeId: ObjectFilterDropdownId, - }); + const { toggleDropdown } = useDropdown(ObjectFilterDropdownId); const { resetFilter } = useFilterDropdown({ filterDropdownId: filterDropdownId, diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx index 84b8494b5..2da7b144e 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx @@ -7,9 +7,9 @@ import { ObjectFilterDropdownId } from '../constants/ObjectFilterDropdownId'; export const MultipleFiltersButton = () => { const { resetFilter } = useFilterDropdown(); - const { isDropdownOpen, toggleDropdown } = useDropdown({ - dropdownScopeId: ObjectFilterDropdownId, - }); + const { isDropdownOpen, toggleDropdown } = useDropdown( + ObjectFilterDropdownId, + ); const handleClick = () => { toggleDropdown(); 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 ed3f8e3ca..02ca68657 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 @@ -42,9 +42,7 @@ export const ObjectSortDropdownButton = ({ sortDropdownId: sortDropdownId, }); - const { toggleDropdown } = useDropdown({ - dropdownScopeId: ObjectSortDropdownId, - }); + const { toggleDropdown } = useDropdown(ObjectSortDropdownId); const handleButtonClick = () => { toggleDropdown(); 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 6ea19c234..4842bf591 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,11 +1,23 @@ -import React from 'react'; import { useRecoilValue } from 'recoil'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { ActionBar } from '@/ui/navigation/action-bar/components/ActionBar'; -import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSelector'; +export const RecordTableActionBar = ({ + recordTableId, +}: { + recordTableId: string; +}) => { + const { selectedRowIdsScopeInjector } = getRecordTableScopeInjector(); + + const { injectSelectorWithRecordTableScopeId } = + useRecordTableScopedStates(recordTableId); + + const selectedRowIdsSelector = injectSelectorWithRecordTableScopeId( + selectedRowIdsScopeInjector, + ); -export const RecordTableActionBar = () => { const selectedRowIds = useRecoilValue(selectedRowIdsSelector); return ; 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 d5e949649..a3d3889a6 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,9 +4,18 @@ 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 { tableRowIdsState } from '@/object-record/record-table/states/tableRowIdsState'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; export const RecordTableBody = () => { + const { tableRowIdsScopeInjector } = getRecordTableScopeInjector(); + + const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates(); + + const tableRowIdsState = injectStateWithRecordTableScopeId( + tableRowIdsScopeInjector, + ); + 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 06265fdc3..c5d2a26db 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 @@ -3,6 +3,7 @@ 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 { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState'; export const RecordTableBodyEffect = () => { @@ -13,7 +14,15 @@ export const RecordTableBodyEffect = () => { queryStateIdentifier, loading, } = useObjectRecordTable(); - const { tableLastRowVisibleState } = useRecordTableScopedStates(); + + const { tableLastRowVisibleScopeInjector } = getRecordTableScopeInjector(); + + const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates(); + + const tableLastRowVisibleState = injectStateWithRecordTableScopeId( + tableLastRowVisibleScopeInjector, + ); + const [tableLastRowVisible, setTableLastRowVisible] = useRecoilState( tableLastRowVisibleState, ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx index aa212ac77..337494aec 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx @@ -4,26 +4,21 @@ import { useRecoilCallback, useRecoilValue } from 'recoil'; import { useObjectRecordTable } from '@/object-record/hooks/useObjectRecordTable'; import { StyledRow } from '@/object-record/record-table/components/RecordTableRow'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; -import { getRecordTableScopedStates } from '@/object-record/record-table/utils/getRecordTableScopedStates'; import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState'; export const RecordTableBodyFetchMoreLoader = () => { const { queryStateIdentifier } = useObjectRecordTable(); - const { scopeId } = useRecordTable(); + const { setRecordTableLastRowVisible } = useRecordTable(); const isFetchingMoreObjects = useRecoilValue( isFetchingMoreRecordsFamilyState(queryStateIdentifier), ); const onLastRowVisible = useRecoilCallback( - ({ set }) => - async (inView: boolean) => { - const { tableLastRowVisibleState } = getRecordTableScopedStates({ - recordTableScopeId: scopeId, - }); - set(tableLastRowVisibleState, inView); - }, - [scopeId], + () => async (inView: boolean) => { + setRecordTableLastRowVisible(inView); + }, + [setRecordTableLastRowVisible], ); const { ref: tbodyRef } = useInView({ diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellContainer.tsx similarity index 81% rename from packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCell.tsx rename to packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellContainer.tsx index 06702d367..66338a68d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellContainer.tsx @@ -2,6 +2,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 { 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'; @@ -13,17 +14,25 @@ import { ColumnContext } from '../contexts/ColumnContext'; import { ColumnIndexContext } from '../contexts/ColumnIndexContext'; import { RecordUpdateContext } from '../contexts/EntityUpdateMutationHookContext'; import { RowIdContext } from '../contexts/RowIdContext'; -import { TableCell } from '../record-table-cell/components/RecordTableCell'; +import { RecordTableCell } from '../record-table-cell/components/RecordTableCell'; import { useCurrentRowSelected } from '../record-table-row/hooks/useCurrentRowSelected'; import { TableHotkeyScope } from '../types/TableHotkeyScope'; -export const RecordTableCell = ({ cellIndex }: { cellIndex: number }) => { +export const RecordTableCellContainer = ({ + cellIndex, +}: { + cellIndex: number; +}) => { const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState); const currentRowId = useContext(RowIdContext); - const { objectMetadataConfigState } = useRecordTableScopedStates(); + const { objectMetadataConfigScopeInjector } = getRecordTableScopeInjector(); - const objectMetadataConfig = useRecoilValue(objectMetadataConfigState); + const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates(); + + const objectMetadataConfig = useRecoilValue( + injectStateWithRecordTableScopeId(objectMetadataConfigScopeInjector), + ); const { setCurrentRowSelected } = useCurrentRowSelected(); @@ -66,7 +75,7 @@ export const RecordTableCell = ({ cellIndex }: { cellIndex: number }) => { objectMetadataConfig?.labelIdentifierFieldMetadataId, }} > - + 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 aa1292872..d43ac048b 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,6 +3,7 @@ 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 { IconPlus } from '@/ui/display/icon'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; @@ -58,8 +59,18 @@ export const RecordTableHeader = ({ }: { createRecord: () => void; }) => { - const { hiddenTableColumnsSelector, visibleTableColumnsSelector } = - useRecordTableScopedStates(); + const { hiddenTableColumnsScopeInjector, visibleTableColumnsScopeInjector } = + getRecordTableScopeInjector(); + + const { injectSelectorWithRecordTableScopeId } = useRecordTableScopedStates(); + + const hiddenTableColumnsSelector = injectSelectorWithRecordTableScopeId( + hiddenTableColumnsScopeInjector, + ); + + const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId( + visibleTableColumnsScopeInjector, + ); 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 25d3aeb60..aaf70d559 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 @@ -5,8 +5,8 @@ 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 { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns'; -import { resizeFieldOffsetState } from '@/object-record/record-table/states/resizeFieldOffsetState'; 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'; @@ -80,15 +80,38 @@ export const RecordTableHeaderCell = ({ column: ColumnDefinition; createRecord: () => void; }) => { + const { + resizeFieldOffsetScopeInjector, + tableColumnsScopeInjector, + tableColumnsByKeyScopeInjector, + visibleTableColumnsScopeInjector, + } = getRecordTableScopeInjector(); + + const { + injectStateWithRecordTableScopeId, + injectSelectorWithRecordTableScopeId, + injectSnapshotValueWithRecordTableScopeId, + } = useRecordTableScopedStates(); + + const resizeFieldOffsetState = injectStateWithRecordTableScopeId( + resizeFieldOffsetScopeInjector, + ); + const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState( resizeFieldOffsetState, ); - const { - tableColumnsState, - tableColumnsByKeySelector, - visibleTableColumnsSelector, - } = useRecordTableScopedStates(); + const tableColumnsState = injectStateWithRecordTableScopeId( + tableColumnsScopeInjector, + ); + + const tableColumnsByKeySelector = injectSelectorWithRecordTableScopeId( + tableColumnsByKeyScopeInjector, + ); + + const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId( + visibleTableColumnsScopeInjector, + ); const tableColumns = useRecoilValue(tableColumnsState); const tableColumnsByKey = useRecoilValue(tableColumnsByKeySelector); @@ -124,10 +147,14 @@ export const RecordTableHeaderCell = ({ async () => { if (!resizedFieldKey) return; + const resizeFieldOffset = injectSnapshotValueWithRecordTableScopeId( + snapshot, + resizeFieldOffsetScopeInjector, + ); + const nextWidth = Math.round( Math.max( - tableColumnsByKey[resizedFieldKey].size + - snapshot.getLoadable(resizeFieldOffsetState).valueOrThrow(), + tableColumnsByKey[resizedFieldKey].size + resizeFieldOffset, COLUMN_MIN_WIDTH, ), ); @@ -146,7 +173,15 @@ export const RecordTableHeaderCell = ({ await handleColumnsChange(nextColumns); } }, - [resizedFieldKey, tableColumnsByKey, tableColumns, handleColumnsChange], + [ + resizedFieldKey, + injectSnapshotValueWithRecordTableScopeId, + resizeFieldOffsetScopeInjector, + tableColumnsByKey, + resizeFieldOffsetState, + tableColumns, + handleColumnsChange, + ], ); useTrackPointer({ 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 5a0ce8d67..6b54bb31b 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,6 +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 { IconSettings } from '@/ui/display/icon'; import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; @@ -18,7 +19,13 @@ import { ColumnDefinition } from '../types/ColumnDefinition'; export const RecordTableHeaderPlusButtonContent = () => { const { closeDropdown } = useDropdown(); - const { hiddenTableColumnsSelector } = useRecordTableScopedStates(); + const { hiddenTableColumnsScopeInjector } = getRecordTableScopeInjector(); + + const { injectSelectorWithRecordTableScopeId } = useRecordTableScopedStates(); + + const hiddenTableColumnsSelector = injectSelectorWithRecordTableScopeId( + hiddenTableColumnsScopeInjector, + ); const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector); 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 38788a170..667b8a239 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 @@ -3,6 +3,8 @@ import { useInView } from 'react-intersection-observer'; 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 { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper'; import { ColumnContext } from '../contexts/ColumnContext'; @@ -10,7 +12,6 @@ import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScop import { useCurrentRowSelected } from '../record-table-row/hooks/useCurrentRowSelected'; import { CheckboxCell } from './CheckboxCell'; -import { RecordTableCell } from './RecordTableCell'; export const StyledRow = styled.tr<{ selected: boolean }>` background: ${(props) => @@ -26,7 +27,13 @@ const StyledPlaceholder = styled.td` `; export const RecordTableRow = ({ rowId }: RecordTableRowProps) => { - const { visibleTableColumnsSelector } = useRecordTableScopedStates(); + const { visibleTableColumnsScopeInjector } = getRecordTableScopeInjector(); + + const { injectSelectorWithRecordTableScopeId } = useRecordTableScopedStates(); + + const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId( + visibleTableColumnsScopeInjector, + ); const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector); @@ -59,7 +66,7 @@ export const RecordTableRow = ({ rowId }: RecordTableRowProps) => { value={column} key={column.fieldMetadataId} > - + ); })} 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 2fe1effa6..b99e6daa5 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 @@ -7,7 +7,8 @@ import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObje 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 { isRecordTableInitialLoadingState } from '@/object-record/record-table/states/isRecordTableInitialLoadingState'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { IconPlus } from '@/ui/display/icon'; import { Button } from '@/ui/input/button/components/Button'; import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; @@ -18,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 { numberOfTableRowsState } from '../states/numberOfTableRowsState'; import { RecordTableInternalEffect } from './RecordTableInternalEffect'; @@ -80,6 +80,22 @@ export const RecordTableWithWrappers = ({ }: RecordTableWithWrappersProps) => { const tableBodyRef = useRef(null); + const { + numberOfTableRowsScopeInjector, + isRecordTableInitialLoadingScopeInjector, + } = getRecordTableScopeInjector(); + + const { injectStateWithRecordTableScopeId } = + useRecordTableScopedStates(recordTableId); + + const numberOfTableRowsState = injectStateWithRecordTableScopeId( + numberOfTableRowsScopeInjector, + ); + + const isRecordTableInitialLoadingState = injectStateWithRecordTableScopeId( + isRecordTableInitialLoadingScopeInjector, + ); + const numberOfTableRows = useRecoilValue(numberOfTableRowsState); const isRecordTableInitialLoading = useRecoilValue( diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/SelectAllCheckbox.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/SelectAllCheckbox.tsx index 359e590fd..4dca81427 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/SelectAllCheckbox.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/SelectAllCheckbox.tsx @@ -1,10 +1,11 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { Checkbox } from '@/ui/input/components/Checkbox'; import { useRecordTable } from '../hooks/useRecordTable'; -import { allRowsSelectedStatusSelector } from '../states/selectors/allRowsSelectedStatusSelector'; const StyledContainer = styled.div` align-items: center; @@ -16,7 +17,16 @@ const StyledContainer = styled.div` `; export const SelectAllCheckbox = () => { - const allRowsSelectedStatus = useRecoilValue(allRowsSelectedStatusSelector); + const { allRowsSelectedStatusScopeInjector } = getRecordTableScopeInjector(); + + const { injectSelectorWithRecordTableScopeId } = useRecordTableScopedStates(); + + const allRowsSelectedStatusScopedSelector = + injectSelectorWithRecordTableScopeId(allRowsSelectedStatusScopeInjector); + + const allRowsSelectedStatus = useRecoilValue( + allRowsSelectedStatusScopedSelector, + ); const { selectAllRows } = useRecordTable(); const checked = allRowsSelectedStatus === 'all'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/context-menu/components/RecordTableContextMenu.tsx b/packages/twenty-front/src/modules/object-record/record-table/context-menu/components/RecordTableContextMenu.tsx index c96ea98e7..28144d894 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/context-menu/components/RecordTableContextMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/context-menu/components/RecordTableContextMenu.tsx @@ -1,11 +1,24 @@ -import React from 'react'; import { useRecoilValue } from 'recoil'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { ContextMenu } from '@/ui/navigation/context-menu/components/ContextMenu'; -import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSelector'; +export const RecordTableContextMenu = ({ + recordTableId, +}: { + recordTableId: string; +}) => { + const { selectedRowIdsScopeInjector } = getRecordTableScopeInjector(); + + const { injectSelectorWithRecordTableScopeId } = + useRecordTableScopedStates(recordTableId); + + const selectedRowIdsSelector = injectSelectorWithRecordTableScopeId( + selectedRowIdsScopeInjector, + ); -export const RecordTableContextMenu = () => { const selectedRowIds = useRecoilValue(selectedRowIdsSelector); + return ; }; 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 cc667e1e8..f55a35743 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,18 +1,42 @@ import { useRecoilCallback } from 'recoil'; -import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState'; -import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; -export const useCloseCurrentTableCellInEditMode = () => - useRecoilCallback(({ set, snapshot }) => { - return async () => { - const currentTableCellInEditModePosition = snapshot - .getLoadable(currentTableCellInEditModePositionState) - .valueOrThrow(); +export const useCloseCurrentTableCellInEditMode = ( + recordTableScopeId: string, +) => { + const { + currentTableCellInEditModePositionScopeInjector, + isTableCellInEditModeScopeInjector, + } = getRecordTableScopeInjector(); - set( - isTableCellInEditModeFamilyState(currentTableCellInEditModePosition), - false, - ); - }; - }, []); + const { + injectSnapshotValueWithRecordTableScopeId, + injectFamilyStateWithRecordTableScopeId, + } = useRecordTableScopedStates(recordTableScopeId); + + return useRecoilCallback( + ({ set, snapshot }) => { + return async () => { + const currentTableCellInEditModePosition = + injectSnapshotValueWithRecordTableScopeId( + snapshot, + currentTableCellInEditModePositionScopeInjector, + ); + + const isTableCellInEditMode = injectFamilyStateWithRecordTableScopeId( + isTableCellInEditModeScopeInjector, + ); + + set(isTableCellInEditMode(currentTableCellInEditModePosition), false); + }; + }, + [ + currentTableCellInEditModePositionScopeInjector, + injectFamilyStateWithRecordTableScopeId, + injectSnapshotValueWithRecordTableScopeId, + isTableCellInEditModeScopeInjector, + ], + ); +}; 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 316e219d8..1eef7e7f1 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,18 +1,50 @@ import { useRecoilCallback } from 'recoil'; -import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState'; -import { isSoftFocusOnTableCellFamilyState } from '../../states/isSoftFocusOnTableCellFamilyState'; -import { softFocusPositionState } from '../../states/softFocusPositionState'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; -export const useDisableSoftFocus = () => - useRecoilCallback(({ set, snapshot }) => { - return () => { - const currentPosition = snapshot - .getLoadable(softFocusPositionState) - .valueOrThrow(); +export const useDisableSoftFocus = (recordTableScopeId: string) => { + const { + softFocusPositionScopeInjector, + isSoftFocusActiveScopeInjector, + isSoftFocusOnTableCellScopeInjector, + } = getRecordTableScopeInjector(); - set(isSoftFocusActiveState, false); + const { + injectStateWithRecordTableScopeId, + injectSnapshotValueWithRecordTableScopeId, + injectFamilyStateWithRecordTableScopeId, + } = useRecordTableScopedStates(recordTableScopeId); - set(isSoftFocusOnTableCellFamilyState(currentPosition), false); - }; - }, []); + return useRecoilCallback( + ({ set, snapshot }) => { + return () => { + const currentPosition = injectSnapshotValueWithRecordTableScopeId( + snapshot, + softFocusPositionScopeInjector, + ); + + const isSoftFocusActiveState = injectStateWithRecordTableScopeId( + isSoftFocusActiveScopeInjector, + ); + + const isSoftFocusOnTableCellFamilyState = + injectFamilyStateWithRecordTableScopeId( + isSoftFocusOnTableCellScopeInjector, + ); + + set(isSoftFocusActiveState, false); + + set(isSoftFocusOnTableCellFamilyState(currentPosition), false); + }; + }, + [ + injectFamilyStateWithRecordTableScopeId, + injectSnapshotValueWithRecordTableScopeId, + injectStateWithRecordTableScopeId, + isSoftFocusActiveScopeInjector, + isSoftFocusOnTableCellScopeInjector, + softFocusPositionScopeInjector, + ], + ); +}; 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 2bf00436b..b4d90a942 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,26 +1,45 @@ import { useRecoilCallback } from 'recoil'; -import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState'; -import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; + +export const useGetIsSomeCellInEditMode = (recordTableScopeId: string) => { + const { + currentTableCellInEditModePositionScopeInjector, + isTableCellInEditModeScopeInjector, + } = getRecordTableScopeInjector(); + + const { + injectSnapshotValueWithRecordTableScopeId, + injectFamilySnapshotValueWithRecordTableScopeId, + } = useRecordTableScopedStates(recordTableScopeId); -export const useGetIsSomeCellInEditMode = () => { return useRecoilCallback( ({ snapshot }) => () => { - const currentTableCellInEditModePosition = snapshot - .getLoadable(currentTableCellInEditModePositionState) - .valueOrThrow(); + const currentTableCellInEditModePosition = + injectSnapshotValueWithRecordTableScopeId( + snapshot, + currentTableCellInEditModePositionScopeInjector, + ); - const isSomeCellInEditMode = snapshot - .getLoadable( - isTableCellInEditModeFamilyState( - currentTableCellInEditModePosition, - ), - ) - .valueOrThrow(); + const isSomeCellInEditModeFamilyState = + injectFamilySnapshotValueWithRecordTableScopeId( + snapshot, + isTableCellInEditModeScopeInjector, + ); + + const isSomeCellInEditMode = isSomeCellInEditModeFamilyState( + currentTableCellInEditModePosition, + ); return isSomeCellInEditMode; }, - [], + [ + currentTableCellInEditModePositionScopeInjector, + injectFamilySnapshotValueWithRecordTableScopeId, + injectSnapshotValueWithRecordTableScopeId, + isTableCellInEditModeScopeInjector, + ], ); }; 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 87c1950ef..2b4dae2b6 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,23 +1,31 @@ import { useRecoilCallback } from 'recoil'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState'; -import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState'; import { TableHotkeyScope } from '../../types/TableHotkeyScope'; import { useCloseCurrentTableCellInEditMode } from './useCloseCurrentTableCellInEditMode'; import { useDisableSoftFocus } from './useDisableSoftFocus'; -export const useLeaveTableFocus = () => { - const disableSoftFocus = useDisableSoftFocus(); - const closeCurrentCellInEditMode = useCloseCurrentTableCellInEditMode(); +export const useLeaveTableFocus = (recordTableScopeId: string) => { + const disableSoftFocus = useDisableSoftFocus(recordTableScopeId); + const closeCurrentCellInEditMode = + useCloseCurrentTableCellInEditMode(recordTableScopeId); + + const { isSoftFocusActiveScopeInjector } = getRecordTableScopeInjector(); + + const { injectSnapshotValueWithRecordTableScopeId } = + useRecordTableScopedStates(recordTableScopeId); return useRecoilCallback( ({ snapshot }) => () => { - const isSoftFocusActive = snapshot - .getLoadable(isSoftFocusActiveState) - .valueOrThrow(); + const isSoftFocusActive = injectSnapshotValueWithRecordTableScopeId( + snapshot, + isSoftFocusActiveScopeInjector, + ); const currentHotkeyScope = snapshot .getLoadable(currentHotkeyScopeState) @@ -34,6 +42,11 @@ export const useLeaveTableFocus = () => { closeCurrentCellInEditMode(); disableSoftFocus(); }, - [closeCurrentCellInEditMode, disableSoftFocus], + [ + closeCurrentCellInEditMode, + disableSoftFocus, + injectSnapshotValueWithRecordTableScopeId, + isSoftFocusActiveScopeInjector, + ], ); }; 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 2a24f1b71..b0e46996a 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,23 +1,59 @@ import { useRecoilCallback } from 'recoil'; -import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState'; -import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; + import { TableCellPosition } from '../../types/TableCellPosition'; -export const useMoveEditModeToTableCellPosition = () => - useRecoilCallback(({ set, snapshot }) => { - return (newPosition: TableCellPosition) => { - const currentTableCellInEditModePosition = snapshot - .getLoadable(currentTableCellInEditModePositionState) - .valueOrThrow(); +export const useMoveEditModeToTableCellPosition = ( + recordTableScopeId: string, +) => { + const { + isTableCellInEditModeScopeInjector, + currentTableCellInEditModePositionScopeInjector, + } = getRecordTableScopeInjector(); - set( - isTableCellInEditModeFamilyState(currentTableCellInEditModePosition), - false, - ); + const { + injectStateWithRecordTableScopeId, + injectSnapshotValueWithRecordTableScopeId, + injectFamilyStateWithRecordTableScopeId, + } = useRecordTableScopedStates(recordTableScopeId); - set(currentTableCellInEditModePositionState, newPosition); + return useRecoilCallback( + ({ set, snapshot }) => { + return (newPosition: TableCellPosition) => { + const currentTableCellInEditModePosition = + injectSnapshotValueWithRecordTableScopeId( + snapshot, + currentTableCellInEditModePositionScopeInjector, + ); - set(isTableCellInEditModeFamilyState(newPosition), true); - }; - }, []); + const currentTableCellInEditModePositionState = + injectStateWithRecordTableScopeId( + currentTableCellInEditModePositionScopeInjector, + ); + + const isTableCellInEditModeFamilyState = + injectFamilyStateWithRecordTableScopeId( + isTableCellInEditModeScopeInjector, + ); + + set( + isTableCellInEditModeFamilyState(currentTableCellInEditModePosition), + false, + ); + + set(currentTableCellInEditModePositionState, newPosition); + + set(isTableCellInEditModeFamilyState(newPosition), true); + }; + }, + [ + currentTableCellInEditModePositionScopeInjector, + injectFamilyStateWithRecordTableScopeId, + injectSnapshotValueWithRecordTableScopeId, + injectStateWithRecordTableScopeId, + isTableCellInEditModeScopeInjector, + ], + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableScopedStates.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableScopedStates.ts index 3f786b12d..291272e92 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableScopedStates.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableScopedStates.ts @@ -1,46 +1,31 @@ import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; +import { useScopedState } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState'; -import { getRecordTableScopedStates } from '../../utils/getRecordTableScopedStates'; - -export const useRecordTableScopedStates = (args?: { - customRecordTableScopeId?: string; -}) => { - const { customRecordTableScopeId } = args ?? {}; - +export const useRecordTableScopedStates = (recordTableId?: string) => { const scopeId = useAvailableScopeIdOrThrow( RecordTableScopeInternalContext, - customRecordTableScopeId, + recordTableId, ); const { - availableTableColumnsState, - tableFiltersState, - tableSortsState, - tableColumnsState, - objectMetadataConfigState, - tableColumnsByKeySelector, - hiddenTableColumnsSelector, - visibleTableColumnsSelector, - onEntityCountChangeState, - onColumnsChangeState, - tableLastRowVisibleState, - } = getRecordTableScopedStates({ - recordTableScopeId: scopeId, - }); + getScopedState, + getScopedSelector, + getScopedFamilyState, + getScopedSnapshotValue, + getScopedSelectorSnapshotValue, + getScopedFamilySnapshotValue, + } = useScopedState(scopeId); return { scopeId, - availableTableColumnsState, - tableFiltersState, - tableSortsState, - tableColumnsState, - objectMetadataConfigState, - tableColumnsByKeySelector, - hiddenTableColumnsSelector, - visibleTableColumnsSelector, - onEntityCountChangeState, - onColumnsChangeState, - tableLastRowVisibleState, + injectStateWithRecordTableScopeId: getScopedState, + injectSelectorWithRecordTableScopeId: getScopedSelector, + injectFamilyStateWithRecordTableScopeId: getScopedFamilyState, + injectSelectorSnapshotValueWithRecordTableScopeId: + getScopedSelectorSnapshotValue, + injectSnapshotValueWithRecordTableScopeId: getScopedSnapshotValue, + injectFamilySnapshotValueWithRecordTableScopeId: + getScopedFamilySnapshotValue, }; }; 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 4584aefdd..425526943 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,19 +1,37 @@ import { useRecoilCallback } from 'recoil'; -import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState'; -import { tableRowIdsState } from '../../states/tableRowIdsState'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; -export const useResetTableRowSelection = () => - useRecoilCallback( +export const useResetTableRowSelection = (recordTableScopeId: string) => { + const { tableRowIdsScopeInjector, isRowSelectedScopeInjector } = + getRecordTableScopeInjector(); + + const { + injectSnapshotValueWithRecordTableScopeId, + injectFamilyStateWithRecordTableScopeId, + } = useRecordTableScopedStates(recordTableScopeId); + + return useRecoilCallback( ({ snapshot, set }) => () => { - const tableRowIds = snapshot - .getLoadable(tableRowIdsState) - .valueOrThrow(); + const tableRowIds = injectSnapshotValueWithRecordTableScopeId( + snapshot, + tableRowIdsScopeInjector, + ); + + const isRowSelectedFamilyState = + injectFamilyStateWithRecordTableScopeId(isRowSelectedScopeInjector); for (const rowId of tableRowIds) { set(isRowSelectedFamilyState(rowId), false); } }, - [], + [ + injectFamilyStateWithRecordTableScopeId, + injectSnapshotValueWithRecordTableScopeId, + isRowSelectedScopeInjector, + tableRowIdsScopeInjector, + ], ); +}; 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 f1ade5ed4..0dee68b6a 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,20 +1,37 @@ import { useRecoilCallback } from 'recoil'; -import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState'; -import { allRowsSelectedStatusSelector } from '../../states/selectors/allRowsSelectedStatusSelector'; -import { tableRowIdsState } from '../../states/tableRowIdsState'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; + +export const useSelectAllRows = (recordTableScopeId: string) => { + const { + allRowsSelectedStatusScopeInjector, + tableRowIdsScopeInjector, + isRowSelectedScopeInjector, + } = getRecordTableScopeInjector(); + + const { + injectSnapshotValueWithRecordTableScopeId, + injectSelectorSnapshotValueWithRecordTableScopeId, + injectFamilyStateWithRecordTableScopeId, + } = useRecordTableScopedStates(recordTableScopeId); -export const useSelectAllRows = () => { const selectAllRows = useRecoilCallback( ({ set, snapshot }) => () => { - const allRowsSelectedStatus = snapshot - .getLoadable(allRowsSelectedStatusSelector) - .valueOrThrow(); + const allRowsSelectedStatus = + injectSelectorSnapshotValueWithRecordTableScopeId( + snapshot, + allRowsSelectedStatusScopeInjector, + ); - const tableRowIds = snapshot - .getLoadable(tableRowIdsState) - .valueOrThrow(); + const tableRowIds = injectSnapshotValueWithRecordTableScopeId( + snapshot, + tableRowIdsScopeInjector, + ); + + const isRowSelectedFamilyState = + injectFamilyStateWithRecordTableScopeId(isRowSelectedScopeInjector); if ( allRowsSelectedStatus === 'none' || @@ -29,7 +46,14 @@ export const useSelectAllRows = () => { } } }, - [], + [ + allRowsSelectedStatusScopeInjector, + injectFamilyStateWithRecordTableScopeId, + injectSelectorSnapshotValueWithRecordTableScopeId, + injectSnapshotValueWithRecordTableScopeId, + isRowSelectedScopeInjector, + tableRowIdsScopeInjector, + ], ); return { 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 d809bcae5..c1cf1fd77 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,25 +1,35 @@ import { useRecoilCallback } from 'recoil'; import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; -import { numberOfTableRowsState } from '@/object-record/record-table/states/numberOfTableRowsState'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; -import { tableRowIdsState } from '../../states/tableRowIdsState'; - type useSetRecordTableDataProps = { + recordTableScopeId: string; onEntityCountChange: (entityCount: number) => void; }; export const useSetRecordTableData = ({ + recordTableScopeId, onEntityCountChange, }: useSetRecordTableDataProps) => { - const resetTableRowSelection = useResetTableRowSelection(); + const resetTableRowSelection = useResetTableRowSelection(recordTableScopeId); + + const { tableRowIdsScopeInjector, numberOfTableRowsScopeInjector } = + getRecordTableScopeInjector(); + + const { + injectStateWithRecordTableScopeId, + injectSnapshotValueWithRecordTableScopeId, + } = useRecordTableScopedStates(recordTableScopeId); return useRecoilCallback( ({ set, snapshot }) => (newEntityArray: T[]) => { for (const entity of newEntityArray) { + // TODO: refactor with scoped state later const currentEntity = snapshot .getLoadable(entityFieldsFamilyState(entity.id)) .valueOrThrow(); @@ -28,19 +38,37 @@ export const useSetRecordTableData = ({ set(entityFieldsFamilyState(entity.id), entity); } } - const currentRowIds = snapshot.getLoadable(tableRowIdsState).getValue(); + const currentRowIds = injectSnapshotValueWithRecordTableScopeId( + snapshot, + tableRowIdsScopeInjector, + ); const entityIds = newEntityArray.map((entity) => entity.id); + const tableRowIdsState = injectStateWithRecordTableScopeId( + tableRowIdsScopeInjector, + ); + if (!isDeeplyEqual(currentRowIds, entityIds)) { set(tableRowIdsState, entityIds); } resetTableRowSelection(); + const numberOfTableRowsState = injectStateWithRecordTableScopeId( + numberOfTableRowsScopeInjector, + ); + set(numberOfTableRowsState, entityIds.length); onEntityCountChange(entityIds.length); }, - [onEntityCountChange, resetTableRowSelection], + [ + injectSnapshotValueWithRecordTableScopeId, + injectStateWithRecordTableScopeId, + numberOfTableRowsScopeInjector, + onEntityCountChange, + resetTableRowSelection, + tableRowIdsScopeInjector, + ], ); }; 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 aa0d6380c..647b7fad1 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,8 +1,19 @@ import { useRecoilCallback } from 'recoil'; -import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; -export const useSetRowSelectedState = () => - useRecoilCallback(({ set }) => (rowId: string, selected: boolean) => { +export const useSetRowSelectedState = (recordTableScopeId: string) => { + const { isRowSelectedScopeInjector } = getRecordTableScopeInjector(); + + const { injectFamilyStateWithRecordTableScopeId } = + useRecordTableScopedStates(recordTableScopeId); + + const isRowSelectedFamilyState = injectFamilyStateWithRecordTableScopeId( + isRowSelectedScopeInjector, + ); + + return useRecoilCallback(({ set }) => (rowId: string, selected: boolean) => { set(isRowSelectedFamilyState(rowId), selected); }); +}; 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 282e6c344..6340a9936 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,23 +1,60 @@ import { useRecoilCallback } from 'recoil'; -import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState'; -import { isSoftFocusOnTableCellFamilyState } from '../../states/isSoftFocusOnTableCellFamilyState'; -import { softFocusPositionState } from '../../states/softFocusPositionState'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; + import { TableCellPosition } from '../../types/TableCellPosition'; -export const useSetSoftFocusPosition = () => - useRecoilCallback(({ set, snapshot }) => { - return (newPosition: TableCellPosition) => { - const currentPosition = snapshot - .getLoadable(softFocusPositionState) - .valueOrThrow(); +export const useSetSoftFocusPosition = (recordTableScopeId: string) => { + const { + softFocusPositionScopeInjector, + isSoftFocusActiveScopeInjector, + isSoftFocusOnTableCellScopeInjector, + } = getRecordTableScopeInjector(); - set(isSoftFocusActiveState, true); + const { + injectStateWithRecordTableScopeId, + injectSnapshotValueWithRecordTableScopeId, + injectFamilyStateWithRecordTableScopeId, + } = useRecordTableScopedStates(recordTableScopeId); - set(isSoftFocusOnTableCellFamilyState(currentPosition), false); + return useRecoilCallback( + ({ set, snapshot }) => { + return (newPosition: TableCellPosition) => { + const currentPosition = injectSnapshotValueWithRecordTableScopeId( + snapshot, + softFocusPositionScopeInjector, + ); - set(softFocusPositionState, newPosition); + const isSoftFocusActiveState = injectStateWithRecordTableScopeId( + isSoftFocusActiveScopeInjector, + ); - set(isSoftFocusOnTableCellFamilyState(newPosition), true); - }; - }, []); + const isSoftFocusOnTableCellFamilyState = + injectFamilyStateWithRecordTableScopeId( + isSoftFocusOnTableCellScopeInjector, + ); + + const softFocusPositionState = injectStateWithRecordTableScopeId( + softFocusPositionScopeInjector, + ); + + set(isSoftFocusActiveState, true); + + set(isSoftFocusOnTableCellFamilyState(currentPosition), false); + + set(softFocusPositionState, newPosition); + + set(isSoftFocusOnTableCellFamilyState(newPosition), true); + }; + }, + [ + injectFamilyStateWithRecordTableScopeId, + injectSnapshotValueWithRecordTableScopeId, + injectStateWithRecordTableScopeId, + isSoftFocusActiveScopeInjector, + isSoftFocusOnTableCellScopeInjector, + softFocusPositionScopeInjector, + ], + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useUpsertRecordTableItem.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useUpsertRecordTableItem.ts index bacbb1ae9..3f7e411f5 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useUpsertRecordTableItem.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useUpsertRecordTableItem.ts @@ -3,8 +3,9 @@ import { useRecoilCallback } from 'recoil'; import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; -export const useUpsertRecordTableItem = () => - useRecoilCallback( +// TODO: refactor with scoped state later +export const useUpsertRecordTableItem = () => { + return useRecoilCallback( ({ set, snapshot }) => (entity: T) => { const currentEntity = snapshot @@ -17,3 +18,4 @@ export const useUpsertRecordTableItem = () => }, [], ); +}; 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 410b0741c..e9136c99a 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 @@ -1,8 +1,9 @@ import { useRecoilCallback, useSetRecoilState } from 'recoil'; import { Key } from 'ts-key-enum'; +import { useGetIsSomeCellInEditMode } from '@/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode'; import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext'; -import { onColumnsChangeScopedState } from '@/object-record/record-table/states/onColumnsChangeScopedState'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; @@ -10,10 +11,7 @@ import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getS import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; import { FieldMetadata } from '../../field/types/FieldMetadata'; -import { numberOfTableRowsState } from '../states/numberOfTableRowsState'; -import { onEntityCountChangeScopedState } from '../states/onEntityCountChange'; -import { numberOfTableColumnsScopedSelector } from '../states/selectors/numberOfTableColumnsScopedSelector'; -import { softFocusPositionState } from '../states/softFocusPositionState'; +import { onEntityCountChangeScopedState } from '../states/onEntityCountChangeScopedState'; import { ColumnDefinition } from '../types/ColumnDefinition'; import { TableHotkeyScope } from '../types/TableHotkeyScope'; @@ -38,43 +36,71 @@ export const useRecordTable = (props?: useRecordTableProps) => { ); const { - availableTableColumnsState, - tableFiltersState, - tableSortsState, - tableColumnsState, - objectMetadataConfigState, - onEntityCountChangeState, - } = useRecordTableScopedStates({ - customRecordTableScopeId: scopeId, - }); + injectStateWithRecordTableScopeId, + injectSnapshotValueWithRecordTableScopeId, + injectSelectorSnapshotValueWithRecordTableScopeId, + } = useRecordTableScopedStates(scopeId); + + const { + availableTableColumnsScopeInjector, + tableFiltersScopeInjector, + tableSortsScopeInjector, + tableColumnsScopeInjector, + objectMetadataConfigScopeInjector, + onEntityCountScopeInjector, + softFocusPositionScopeInjector, + numberOfTableRowsScopeInjector, + numberOfTableColumnsScopeInjector, + onColumnsChangeScopeInjector, + isRecordTableInitialLoadingScopeInjector, + tableLastRowVisibleScopeInjector, + } = getRecordTableScopeInjector(); const setAvailableTableColumns = useSetRecoilState( - availableTableColumnsState, + injectStateWithRecordTableScopeId(availableTableColumnsScopeInjector), ); - const setOnEntityCountChange = useSetRecoilState(onEntityCountChangeState); - const setTableFilters = useSetRecoilState(tableFiltersState); - const setObjectMetadataConfig = useSetRecoilState(objectMetadataConfigState); + const setOnEntityCountChange = useSetRecoilState( + injectStateWithRecordTableScopeId(onEntityCountScopeInjector), + ); + const setTableFilters = useSetRecoilState( + injectStateWithRecordTableScopeId(tableFiltersScopeInjector), + ); + const setObjectMetadataConfig = useSetRecoilState( + injectStateWithRecordTableScopeId(objectMetadataConfigScopeInjector), + ); - const setTableSorts = useSetRecoilState(tableSortsState); + const setTableSorts = useSetRecoilState( + injectStateWithRecordTableScopeId(tableSortsScopeInjector), + ); - const setTableColumns = useSetRecoilState(tableColumnsState); + const setTableColumns = useSetRecoilState( + injectStateWithRecordTableScopeId(tableColumnsScopeInjector), + ); + + const setOnColumnsChange = useSetRecoilState( + injectStateWithRecordTableScopeId(onColumnsChangeScopeInjector), + ); + + const setIsRecordTableInitialLoading = useSetRecoilState( + injectStateWithRecordTableScopeId(isRecordTableInitialLoadingScopeInjector), + ); + + const setRecordTableLastRowVisible = useSetRecoilState( + injectStateWithRecordTableScopeId(tableLastRowVisibleScopeInjector), + ); const onColumnsChange = useRecoilCallback( ({ snapshot }) => (columns: ColumnDefinition[]) => { - const onColumnsChangeState = getScopedStateDeprecated( - onColumnsChangeScopedState, - scopeId, - ); - const onColumnsChange = getSnapshotValue( + const onColumnsChange = injectSnapshotValueWithRecordTableScopeId( snapshot, - onColumnsChangeState, + onColumnsChangeScopeInjector, ); onColumnsChange?.(columns); }, - [scopeId], + [injectSnapshotValueWithRecordTableScopeId, onColumnsChangeScopeInjector], ); const onEntityCountChange = useRecoilCallback( @@ -94,24 +120,28 @@ export const useRecordTable = (props?: useRecordTableProps) => { [scopeId], ); - const setRecordTableData = useSetRecordTableData({ onEntityCountChange }); + const setRecordTableData = useSetRecordTableData({ + recordTableScopeId: scopeId, + onEntityCountChange, + }); - const leaveTableFocus = useLeaveTableFocus(); + const leaveTableFocus = useLeaveTableFocus(scopeId); - const setRowSelectedState = useSetRowSelectedState(); + const setRowSelectedState = useSetRowSelectedState(scopeId); - const resetTableRowSelection = useResetTableRowSelection(); + const resetTableRowSelection = useResetTableRowSelection(scopeId); const upsertRecordTableItem = useUpsertRecordTableItem(); - const setSoftFocusPosition = useSetSoftFocusPosition(); + const setSoftFocusPosition = useSetSoftFocusPosition(scopeId); const moveUp = useRecoilCallback( ({ snapshot }) => () => { - const softFocusPosition = snapshot - .getLoadable(softFocusPositionState) - .valueOrThrow(); + const softFocusPosition = injectSnapshotValueWithRecordTableScopeId( + snapshot, + softFocusPositionScopeInjector, + ); let newRowNumber = softFocusPosition.row - 1; @@ -124,19 +154,25 @@ export const useRecordTable = (props?: useRecordTableProps) => { row: newRowNumber, }); }, - [setSoftFocusPosition], + [ + injectSnapshotValueWithRecordTableScopeId, + setSoftFocusPosition, + softFocusPositionScopeInjector, + ], ); const moveDown = useRecoilCallback( ({ snapshot }) => () => { - const softFocusPosition = snapshot - .getLoadable(softFocusPositionState) - .valueOrThrow(); + const softFocusPosition = injectSnapshotValueWithRecordTableScopeId( + snapshot, + softFocusPositionScopeInjector, + ); - const numberOfTableRows = snapshot - .getLoadable(numberOfTableRowsState) - .valueOrThrow(); + const numberOfTableRows = injectSnapshotValueWithRecordTableScopeId( + snapshot, + numberOfTableRowsScopeInjector, + ); let newRowNumber = softFocusPosition.row + 1; @@ -149,24 +185,32 @@ export const useRecordTable = (props?: useRecordTableProps) => { row: newRowNumber, }); }, - [setSoftFocusPosition], + [ + injectSnapshotValueWithRecordTableScopeId, + numberOfTableRowsScopeInjector, + setSoftFocusPosition, + softFocusPositionScopeInjector, + ], ); const moveRight = useRecoilCallback( ({ snapshot }) => () => { - const softFocusPosition = snapshot - .getLoadable(softFocusPositionState) - .valueOrThrow(); + const softFocusPosition = injectSnapshotValueWithRecordTableScopeId( + snapshot, + softFocusPositionScopeInjector, + ); - const numberOfTableColumns = snapshot - .getLoadable(numberOfTableColumnsScopedSelector(scopeId)) - .valueOrThrow(); - - const numberOfTableRows = snapshot - .getLoadable(numberOfTableRowsState) - .valueOrThrow(); + const numberOfTableColumns = + injectSelectorSnapshotValueWithRecordTableScopeId( + snapshot, + numberOfTableColumnsScopeInjector, + ); + const numberOfTableRows = injectSnapshotValueWithRecordTableScopeId( + snapshot, + numberOfTableRowsScopeInjector, + ); const currentColumnNumber = softFocusPosition.column; const currentRowNumber = softFocusPosition.row; @@ -197,19 +241,29 @@ export const useRecordTable = (props?: useRecordTableProps) => { }); } }, - [scopeId, setSoftFocusPosition], + [ + injectSelectorSnapshotValueWithRecordTableScopeId, + injectSnapshotValueWithRecordTableScopeId, + numberOfTableColumnsScopeInjector, + numberOfTableRowsScopeInjector, + setSoftFocusPosition, + softFocusPositionScopeInjector, + ], ); const moveLeft = useRecoilCallback( ({ snapshot }) => () => { - const softFocusPosition = snapshot - .getLoadable(softFocusPositionState) - .valueOrThrow(); + const softFocusPosition = injectSnapshotValueWithRecordTableScopeId( + snapshot, + softFocusPositionScopeInjector, + ); - const numberOfTableColumns = snapshot - .getLoadable(numberOfTableColumnsScopedSelector(scopeId)) - .valueOrThrow(); + const numberOfTableColumns = + injectSelectorSnapshotValueWithRecordTableScopeId( + snapshot, + numberOfTableColumnsScopeInjector, + ); const currentColumnNumber = softFocusPosition.column; const currentRowNumber = softFocusPosition.row; @@ -238,11 +292,17 @@ export const useRecordTable = (props?: useRecordTableProps) => { }); } }, - [scopeId, setSoftFocusPosition], + [ + injectSelectorSnapshotValueWithRecordTableScopeId, + injectSnapshotValueWithRecordTableScopeId, + numberOfTableColumnsScopeInjector, + setSoftFocusPosition, + softFocusPositionScopeInjector, + ], ); const useMapKeyboardToSoftFocus = () => { - const disableSoftFocus = useDisableSoftFocus(); + const disableSoftFocus = useDisableSoftFocus(scopeId); const setHotkeyScope = useSetHotkeyScope(); useScopedHotkeys( @@ -295,7 +355,9 @@ export const useRecordTable = (props?: useRecordTableProps) => { ); }; - const { selectAllRows } = useSelectAllRows(); + const { selectAllRows } = useSelectAllRows(scopeId); + + const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode(scopeId); return { scopeId, @@ -317,5 +379,10 @@ export const useRecordTable = (props?: useRecordTableProps) => { moveUp, useMapKeyboardToSoftFocus, selectAllRows, + setOnColumnsChange, + setIsRecordTableInitialLoading, + setRecordTableLastRowVisible, + setSoftFocusPosition, + getIsSomeCellInEditMode, }; }; 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 b80e8450d..1bdc0cca0 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 @@ -4,6 +4,7 @@ import { useRecoilValue } from 'recoil'; import { FieldMetadata } from '@/object-record/field/types/FieldMetadata'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns'; @@ -25,12 +26,27 @@ export const useTableColumns = (props?: useRecordTableProps) => { }); const { - availableTableColumnsState, - tableColumnsState, - visibleTableColumnsSelector, - } = useRecordTableScopedStates({ - customRecordTableScopeId: scopeId, - }); + injectStateWithRecordTableScopeId, + injectSelectorWithRecordTableScopeId, + } = useRecordTableScopedStates(scopeId); + + const { + availableTableColumnsScopeInjector, + tableColumnsScopeInjector, + visibleTableColumnsScopeInjector, + } = getRecordTableScopeInjector(); + + const availableTableColumnsState = injectStateWithRecordTableScopeId( + availableTableColumnsScopeInjector, + ); + + const tableColumnsState = injectStateWithRecordTableScopeId( + tableColumnsScopeInjector, + ); + + const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId( + visibleTableColumnsScopeInjector, + ); const availableTableColumns = useRecoilValue(availableTableColumnsState); diff --git a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownButton.tsx index 842d6b698..11736f506 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownButton.tsx @@ -3,9 +3,9 @@ import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/Styl import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; export const TableOptionsDropdownButton = () => { - const { isDropdownOpen, toggleDropdown } = useDropdown({ - dropdownScopeId: TableOptionsDropdownId, - }); + const { isDropdownOpen, toggleDropdown } = useDropdown( + TableOptionsDropdownId, + ); return ( (null); - const { hiddenTableColumnsSelector, visibleTableColumnsSelector } = - useRecordTableScopedStates({ customRecordTableScopeId: recordTableId }); + const { hiddenTableColumnsScopeInjector, visibleTableColumnsScopeInjector } = + getRecordTableScopeInjector(); + + const { injectSelectorWithRecordTableScopeId } = + useRecordTableScopedStates(recordTableId); + + const hiddenTableColumnsSelector = injectSelectorWithRecordTableScopeId( + hiddenTableColumnsScopeInjector, + ); + + const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId( + visibleTableColumnsScopeInjector, + ); const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector); const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCell.tsx index e4945a2e4..42503e53b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCell.tsx @@ -8,7 +8,7 @@ import { useTableCell } from '../hooks/useTableCell'; import { TableCellContainer } from './RecordTableCellContainer'; -export const TableCell = ({ +export const RecordTableCell = ({ customHotkeyScope, }: { customHotkeyScope: HotkeyScope; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx index 1cdc93b8f..fb528c947 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx @@ -9,12 +9,15 @@ const StyledEditButtonContainer = styled(motion.div)` right: 5px; `; -type TableCellButtonProps = { +type RecordTableCellButtonProps = { onClick?: () => void; Icon: IconComponent; }; -export const TableCellButton = ({ onClick, Icon }: TableCellButtonProps) => ( +export const RecordTableCellButton = ({ + onClick, + Icon, +}: RecordTableCellButtonProps) => ( { const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode(); - const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode(); + const { getIsSomeCellInEditMode } = useRecordTable(); const [isHovered, setIsHovered] = useState(false); @@ -116,29 +116,35 @@ export const TableCellContainer = ({ onMouseLeave={handleContainerMouseLeave} > {isCurrentTableCellInEditMode ? ( - {editModeContent} - + ) : hasSoftFocus ? ( <> {showButton && ( - + )} - + {editModeContentOnly ? editModeContent : nonEditModeContent} - + ) : ( <> {showButton && ( - + )} - + {editModeContentOnly ? editModeContent : nonEditModeContent} - + )} diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx index c6d156817..4a1c1d787 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx @@ -34,7 +34,7 @@ const StyledEditableCellDisplayModeInnerContainer = styled.div` width: 100%; `; -export const TableCellDisplayContainer = ({ +export const RecordTableCellDisplayContainer = ({ children, softFocus, onClick, diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx index ebd98aa02..a296132c7 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx @@ -3,9 +3,9 @@ import { useIsFieldInputOnly } from '@/object-record/field/hooks/useIsFieldInput import { useSetSoftFocusOnCurrentTableCell } from '../hooks/useSetSoftFocusOnCurrentTableCell'; import { useTableCell } from '../hooks/useTableCell'; -import { TableCellDisplayContainer } from './RecordTableCellDisplayContainer'; +import { RecordTableCellDisplayContainer } from './RecordTableCellDisplayContainer'; -export const TableCellDisplayMode = ({ +export const RecordTableCellDisplayMode = ({ children, }: React.PropsWithChildren) => { const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentTableCell(); @@ -23,8 +23,8 @@ export const TableCellDisplayMode = ({ }; return ( - + {children} - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx index 1cdc93b8f..69887f774 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx @@ -9,12 +9,15 @@ const StyledEditButtonContainer = styled(motion.div)` right: 5px; `; -type TableCellButtonProps = { +type RecordTableCellEditButtonProps = { onClick?: () => void; Icon: IconComponent; }; -export const TableCellButton = ({ onClick, Icon }: TableCellButtonProps) => ( +export const RecordTableCellEditButton = ({ + onClick, + Icon, +}: RecordTableCellEditButtonProps) => ( ` +const StyledEditableCellEditModeContainer = styled.div` align-items: center; display: flex; min-width: 200px; @@ -9,7 +9,7 @@ const StyledEditableCellEditModeContainer = styled.div` z-index: 1; `; -export type TableCellEditModeProps = { +export type RecordTableCellEditModeProps = { children: ReactElement; transparent?: boolean; maxContentWidth?: number; @@ -18,11 +18,11 @@ export type TableCellEditModeProps = { initialValue?: string; }; -export const TableCellEditMode = ({ +export const RecordTableCellEditMode = ({ editModeHorizontalAlign, editModeVerticalPosition, children, -}: TableCellEditModeProps) => ( +}: RecordTableCellEditModeProps) => ( ; +type RecordTableCellSoftFocusModeProps = PropsWithChildren; -export const TableCellSoftFocusMode = ({ +export const RecordTableCellSoftFocusMode = ({ children, -}: TableCellSoftFocusModeProps) => { +}: RecordTableCellSoftFocusModeProps) => { const { openTableCell } = useTableCell(); const isFieldInputOnly = useIsFieldInputOnly(); @@ -95,12 +95,12 @@ export const TableCellSoftFocusMode = ({ }; return ( - {children} - + ); }; 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 f446d2f4f..2bc67d737 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,16 +1,30 @@ import { useCallback } from 'react'; import { useRecoilState } from 'recoil'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; + import { useMoveEditModeToTableCellPosition } from '../../hooks/internal/useMoveEditModeToCellPosition'; -import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState'; import { useCurrentTableCellPosition } from './useCurrentCellPosition'; export const useCurrentTableCellEditMode = () => { - const moveEditModeToTableCellPosition = useMoveEditModeToTableCellPosition(); + const { scopeId } = useRecordTable(); + + const moveEditModeToTableCellPosition = + useMoveEditModeToTableCellPosition(scopeId); const currentTableCellPosition = useCurrentTableCellPosition(); + const { isTableCellInEditModeScopeInjector } = getRecordTableScopeInjector(); + + const { injectFamilyStateWithRecordTableScopeId } = + useRecordTableScopedStates(); + + const isTableCellInEditModeFamilyState = + injectFamilyStateWithRecordTableScopeId(isTableCellInEditModeScopeInjector); + const [isCurrentTableCellInEditMode] = useRecoilState( isTableCellInEditModeFamilyState(currentTableCellPosition), ); 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 ac6c35415..058b377bc 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,14 +1,24 @@ import { useRecoilValue } from 'recoil'; -import { isSoftFocusOnTableCellFamilyState } from '../../states/isSoftFocusOnTableCellFamilyState'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { useCurrentTableCellPosition } from './useCurrentCellPosition'; export const useIsSoftFocusOnCurrentTableCell = () => { const currentTableCellPosition = useCurrentTableCellPosition(); + const { isSoftFocusOnTableCellScopeInjector } = getRecordTableScopeInjector(); + + const { injectFamilyStateWithRecordTableScopeId } = + useRecordTableScopedStates(); + + const isSoftFocusActiveFamilyState = injectFamilyStateWithRecordTableScopeId( + isSoftFocusOnTableCellScopeInjector, + ); + const isSoftFocusOnTableCell = useRecoilValue( - isSoftFocusOnTableCellFamilyState(currentTableCellPosition), + isSoftFocusActiveFamilyState(currentTableCellPosition), ); return isSoftFocusOnTableCell; 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 31a9320d7..95b355827 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,9 +1,9 @@ import { useRecoilCallback } from 'recoil'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState'; -import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState'; -import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState'; import { TableHotkeyScope } from '../../types/TableHotkeyScope'; import { useSetSoftFocusOnCurrentTableCell } from './useSetSoftFocusOnCurrentTableCell'; @@ -11,12 +11,27 @@ import { useSetSoftFocusOnCurrentTableCell } from './useSetSoftFocusOnCurrentTab export const useMoveSoftFocusToCurrentCellOnHover = () => { const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell(); + const { + currentTableCellInEditModePositionScopeInjector, + isTableCellInEditModeScopeInjector, + } = getRecordTableScopeInjector(); + + const { + injectSnapshotValueWithRecordTableScopeId, + injectFamilyStateWithRecordTableScopeId, + } = useRecordTableScopedStates(); + + const isTableCellInEditModeFamilyState = + injectFamilyStateWithRecordTableScopeId(isTableCellInEditModeScopeInjector); + return useRecoilCallback( ({ snapshot }) => () => { - const currentTableCellInEditModePosition = snapshot - .getLoadable(currentTableCellInEditModePositionState) - .valueOrThrow(); + const currentTableCellInEditModePosition = + injectSnapshotValueWithRecordTableScopeId( + snapshot, + currentTableCellInEditModePositionScopeInjector, + ); const isSomeCellInEditMode = snapshot.getLoadable( isTableCellInEditModeFamilyState(currentTableCellInEditModePosition), @@ -38,6 +53,11 @@ export const useMoveSoftFocusToCurrentCellOnHover = () => { setSoftFocusOnCurrentTableCell(); } }, - [setSoftFocusOnCurrentTableCell], + [ + currentTableCellInEditModePositionScopeInjector, + injectSnapshotValueWithRecordTableScopeId, + isTableCellInEditModeFamilyState, + setSoftFocusOnCurrentTableCell, + ], ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocusOnCurrentTableCell.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocusOnCurrentTableCell.ts index 8c5fcd1d3..0ad1b3183 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocusOnCurrentTableCell.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocusOnCurrentTableCell.ts @@ -1,15 +1,24 @@ import { useRecoilCallback } from 'recoil'; +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; -import { useSetSoftFocusPosition } from '../../hooks/internal/useSetSoftFocusPosition'; -import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState'; import { TableHotkeyScope } from '../../types/TableHotkeyScope'; import { useCurrentTableCellPosition } from './useCurrentCellPosition'; export const useSetSoftFocusOnCurrentTableCell = () => { - const setSoftFocusPosition = useSetSoftFocusPosition(); + const { setSoftFocusPosition } = useRecordTable(); + + const { isSoftFocusActiveScopeInjector } = getRecordTableScopeInjector(); + + const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates(); + + const isSoftFocusActiveState = injectStateWithRecordTableScopeId( + isSoftFocusActiveScopeInjector, + ); const currentTableCellPosition = useCurrentTableCellPosition(); @@ -24,6 +33,11 @@ export const useSetSoftFocusOnCurrentTableCell = () => { setHotkeyScope(TableHotkeyScope.TableSoftFocus); }, - [setHotkeyScope, currentTableCellPosition, setSoftFocusPosition], + [ + setSoftFocusPosition, + currentTableCellPosition, + isSoftFocusActiveState, + setHotkeyScope, + ], ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTableCell.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTableCell.ts index 166440af6..2f40ff1e3 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTableCell.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTableCell.ts @@ -7,6 +7,8 @@ import { useIsFieldEmpty } from '@/object-record/field/hooks/useIsFieldEmpty'; import { entityFieldInitialValueFamilyState } from '@/object-record/field/states/entityFieldInitialValueFamilyState'; import { FieldInitialValue } from '@/object-record/field/types/FieldInitialValue'; import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect'; import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; @@ -23,9 +25,15 @@ const DEFAULT_CELL_SCOPE: HotkeyScope = { }; export const useTableCell = () => { - const { objectMetadataConfigState } = useRecordTableScopedStates(); + const { scopeId: recordTableScopeId } = useRecordTable(); - const objectMetadataConfig = useRecoilValue(objectMetadataConfigState); + const { objectMetadataConfigScopeInjector } = getRecordTableScopeInjector(); + + const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates(); + + const objectMetadataConfig = useRecoilValue( + injectStateWithRecordTableScopeId(objectMetadataConfigScopeInjector), + ); const basePathToShowPage = objectMetadataConfig?.basePathToShowPage; @@ -33,7 +41,8 @@ export const useTableCell = () => { const setHotkeyScope = useSetHotkeyScope(); const { setDragSelectionStartEnabled } = useDragSelect(); - const closeCurrentTableCellInEditMode = useCloseCurrentTableCellInEditMode(); + const closeCurrentTableCellInEditMode = + useCloseCurrentTableCellInEditMode(recordTableScopeId); const customCellHotkeyScope = useContext(CellHotkeyScopeContext); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useCurrentRowSelected.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useCurrentRowSelected.ts index dddb5a464..3d278ac97 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useCurrentRowSelected.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useCurrentRowSelected.ts @@ -1,13 +1,26 @@ import { useContext } from 'react'; -import { useRecoilCallback, useRecoilState } from 'recoil'; +import { useRecoilCallback, useRecoilValue } from 'recoil'; + +import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; +import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { RowIdContext } from '../../contexts/RowIdContext'; -import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState'; export const useCurrentRowSelected = () => { const currentRowId = useContext(RowIdContext); - const [isRowSelected] = useRecoilState( + const { isRowSelectedScopeInjector } = getRecordTableScopeInjector(); + + const { + injectFamilyStateWithRecordTableScopeId, + injectFamilySnapshotValueWithRecordTableScopeId, + } = useRecordTableScopedStates(); + + const isRowSelectedFamilyState = injectFamilyStateWithRecordTableScopeId( + isRowSelectedScopeInjector, + ); + + const isRowSelected = useRecoilValue( isRowSelectedFamilyState(currentRowId ?? ''), ); @@ -16,9 +29,10 @@ export const useCurrentRowSelected = () => { (newSelectedState: boolean) => { if (!currentRowId) return; - const isRowSelected = snapshot - .getLoadable(isRowSelectedFamilyState(currentRowId)) - .valueOrThrow(); + const isRowSelected = injectFamilySnapshotValueWithRecordTableScopeId( + snapshot, + isRowSelectedScopeInjector, + )(currentRowId); if (newSelectedState && !isRowSelected) { set(isRowSelectedFamilyState(currentRowId), true); @@ -26,7 +40,12 @@ export const useCurrentRowSelected = () => { set(isRowSelectedFamilyState(currentRowId), false); } }, - [currentRowId], + [ + currentRowId, + injectFamilySnapshotValueWithRecordTableScopeId, + isRowSelectedFamilyState, + isRowSelectedScopeInjector, + ], ); return { diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedFamilyState.ts deleted file mode 100644 index 70ef414b8..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedFamilyState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atomFamily } from 'recoil'; - -export const isRowSelectedFamilyState = atomFamily({ - key: 'isRowSelectedFamilyState', - default: false, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedScopedFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedScopedFamilyState.ts new file mode 100644 index 000000000..8a684cec6 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedScopedFamilyState.ts @@ -0,0 +1,9 @@ +import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState'; + +export const isRowSelectedScopedFamilyState = createScopedFamilyState< + boolean, + string +>({ + key: 'isRowSelectedFamilyState', + defaultValue: false, +}); 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/scopes/RecordTableScopeInitEffect.tsx index e7da03262..0e12971a0 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/scopes/RecordTableScopeInitEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/scopes/RecordTableScopeInitEffect.tsx @@ -1,8 +1,8 @@ import { useEffect } from 'react'; -import { useSetRecoilState } from 'recoil'; + +import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { FieldMetadata } from '../../field/types/FieldMetadata'; -import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates'; import { ColumnDefinition } from '../types/ColumnDefinition'; type RecordTableScopeInitEffectProps = { @@ -13,9 +13,7 @@ type RecordTableScopeInitEffectProps = { export const RecordTableScopeInitEffect = ({ onColumnsChange, }: RecordTableScopeInitEffectProps) => { - const { onColumnsChangeState } = useRecordTableScopedStates(); - - const setOnColumnsChange = useSetRecoilState(onColumnsChangeState); + const { setOnColumnsChange } = useRecordTable(); useEffect(() => { setOnColumnsChange(() => onColumnsChange); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionScopedState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionScopedState.ts new file mode 100644 index 000000000..c6560c4b1 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionScopedState.ts @@ -0,0 +1,12 @@ +import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState'; + +import { TableCellPosition } from '../types/TableCellPosition'; + +export const currentTableCellInEditModePositionScopedState = + createScopedState({ + key: 'currentTableCellInEditModePositionScopedState', + defaultValue: { + row: 0, + column: 1, + }, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionState.ts deleted file mode 100644 index 1a2d2933f..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionState.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { atom } from 'recoil'; - -import { TableCellPosition } from '../types/TableCellPosition'; - -export const currentTableCellInEditModePositionState = atom({ - key: 'currentTableCellInEditModePositionState', - default: { - row: 0, - column: 1, - }, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingScopedState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingScopedState.ts new file mode 100644 index 000000000..e7637024f --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingScopedState.ts @@ -0,0 +1,7 @@ +import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState'; + +export const isRecordTableInitialLoadingScopedState = + createScopedState({ + key: 'isRecordTableInitialLoadingScopedState', + defaultValue: true, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingState.ts deleted file mode 100644 index 9186d0f9e..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from 'recoil'; - -export const isRecordTableInitialLoadingState = atom({ - key: 'isRecordTableInitialLoadingState', - default: true, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveScopedState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveScopedState.ts new file mode 100644 index 000000000..a81b5c1ba --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveScopedState.ts @@ -0,0 +1,6 @@ +import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState'; + +export const isSoftFocusActiveScopedState = createScopedState({ + key: 'isSoftFocusActiveScopedState', + defaultValue: false, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveState.ts deleted file mode 100644 index b82347899..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from 'recoil'; - -export const isSoftFocusActiveState = atom({ - key: 'isSoftFocusActiveState', - default: false, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellFamilyState.ts deleted file mode 100644 index 931bb4101..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellFamilyState.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { atomFamily } from 'recoil'; - -import { TableCellPosition } from '../types/TableCellPosition'; - -export const isSoftFocusOnTableCellFamilyState = atomFamily< - boolean, - TableCellPosition ->({ - key: 'isSoftFocusOnTableCellFamilyState', - default: false, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellScopedFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellScopedFamilyState.ts new file mode 100644 index 000000000..24fd6769a --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellScopedFamilyState.ts @@ -0,0 +1,11 @@ +import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState'; + +import { TableCellPosition } from '../types/TableCellPosition'; + +export const isSoftFocusOnTableCellScopedFamilyState = createScopedFamilyState< + boolean, + TableCellPosition +>({ + key: 'isSoftFocusOnTableCellScopedFamilyState', + defaultValue: false, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeFamilyState.ts deleted file mode 100644 index 8b10b7396..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeFamilyState.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { atomFamily } from 'recoil'; - -import { TableCellPosition } from '../types/TableCellPosition'; - -export const isTableCellInEditModeFamilyState = atomFamily< - boolean, - TableCellPosition ->({ - key: 'isTableCellInEditModeFamilyState', - default: false, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeScopedFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeScopedFamilyState.ts new file mode 100644 index 000000000..ea9ec0889 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeScopedFamilyState.ts @@ -0,0 +1,11 @@ +import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState'; + +import { TableCellPosition } from '../types/TableCellPosition'; + +export const isTableCellInEditModeScopedFamilyState = createScopedFamilyState< + boolean, + TableCellPosition +>({ + key: 'isTableCellInEditModeScopedFamilyState', + defaultValue: false, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsScopedState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsScopedState.ts new file mode 100644 index 000000000..f7111d95e --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsScopedState.ts @@ -0,0 +1,6 @@ +import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState'; + +export const numberOfTableRowsScopedState = createScopedState({ + key: 'numberOfTableRowsScopedState', + defaultValue: 0, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsState.ts deleted file mode 100644 index cc5990551..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from 'recoil'; - -export const numberOfTableRowsState = atom({ - key: 'numberOfTableRowsState', - default: 0, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChange.ts b/packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeScopedState.ts similarity index 100% rename from packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChange.ts rename to packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeScopedState.ts diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetScopedState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetScopedState.ts new file mode 100644 index 000000000..06f88bdf5 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetScopedState.ts @@ -0,0 +1,6 @@ +import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState'; + +export const resizeFieldOffsetScopedState = createScopedState({ + key: 'resizeFieldOffsetScopedState', + defaultValue: 0, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetState.ts deleted file mode 100644 index 847ebc1c7..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from 'recoil'; - -export const resizeFieldOffsetState = atom({ - key: 'resizeFieldOffsetState', - default: 0, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusScopedSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusScopedSelector.ts new file mode 100644 index 000000000..8eb788e21 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusScopedSelector.ts @@ -0,0 +1,29 @@ +import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector'; + +import { AllRowsSelectedStatus } from '../../types/AllRowSelectedStatus'; +import { numberOfTableRowsScopedState } from '../numberOfTableRowsScopedState'; + +import { selectedRowIdsScopedSelector } from './selectedRowIdsScopedSelector'; + +export const allRowsSelectedStatusScopedSelector = + createScopedSelector({ + key: 'allRowsSelectedStatusScopedSelector', + get: + ({ scopeId }) => + ({ get }) => { + const numberOfRows = get(numberOfTableRowsScopedState({ scopeId })); + + const selectedRowIds = get(selectedRowIdsScopedSelector({ scopeId })); + + const numberOfSelectedRows = selectedRowIds.length; + + const allRowsSelectedStatus = + numberOfSelectedRows === 0 + ? 'none' + : numberOfRows === numberOfSelectedRows + ? 'all' + : 'some'; + + return allRowsSelectedStatus; + }, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusSelector.ts deleted file mode 100644 index e40cc9c8e..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusSelector.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { selector } from 'recoil'; - -import { AllRowsSelectedStatus } from '../../types/AllRowSelectedStatus'; -import { numberOfTableRowsState } from '../numberOfTableRowsState'; - -import { selectedRowIdsSelector } from './selectedRowIdsSelector'; - -export const allRowsSelectedStatusSelector = selector({ - key: 'allRowsSelectedStatusSelector', - get: ({ get }) => { - const numberOfRows = get(numberOfTableRowsState); - - const selectedRowIds = get(selectedRowIdsSelector); - - const numberOfSelectedRows = selectedRowIds.length; - - const allRowsSelectedStatus = - numberOfSelectedRows === 0 - ? 'none' - : numberOfRows === numberOfSelectedRows - ? 'all' - : 'some'; - - return allRowsSelectedStatus; - }, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsScopedSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsScopedSelector.ts index 658bf6e30..a6eabee8d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsScopedSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsScopedSelector.ts @@ -1,12 +1,12 @@ -import { selectorFamily } from 'recoil'; +import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector'; import { availableTableColumnsScopedState } from '../availableTableColumnsScopedState'; import { tableColumnsScopedState } from '../tableColumnsScopedState'; -export const hiddenTableColumnsScopedSelector = selectorFamily({ +export const hiddenTableColumnsScopedSelector = createScopedSelector({ key: 'hiddenTableColumnsScopedSelector', get: - (scopeId: string) => + ({ scopeId }) => ({ get }) => { const columns = get(tableColumnsScopedState({ scopeId })); const columnKeys = columns.map(({ fieldMetadataId }) => fieldMetadataId); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsScopedSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsScopedSelector.ts index e05138b88..1e74626af 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsScopedSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsScopedSelector.ts @@ -1,11 +1,11 @@ -import { selectorFamily } from 'recoil'; +import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector'; import { tableColumnsScopedState } from '../tableColumnsScopedState'; -export const numberOfTableColumnsScopedSelector = selectorFamily({ +export const numberOfTableColumnsScopedSelector = createScopedSelector({ key: 'numberOfTableColumnsScopedSelector', get: - (scopeId: string) => + ({ scopeId }) => ({ get }) => get(tableColumnsScopedState({ scopeId })).length, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsScopedSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsScopedSelector.ts new file mode 100644 index 000000000..5988954c3 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsScopedSelector.ts @@ -0,0 +1,23 @@ +import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector'; + +import { isRowSelectedScopedFamilyState } from '../../record-table-row/states/isRowSelectedScopedFamilyState'; +import { tableRowIdsScopedState } from '../tableRowIdsScopedState'; + +export const selectedRowIdsScopedSelector = createScopedSelector({ + key: 'selectedRowIdsScopedSelector', + get: + ({ scopeId }) => + ({ get }) => { + const rowIds = get(tableRowIdsScopedState({ scopeId })); + + return rowIds.filter( + (rowId) => + get( + isRowSelectedScopedFamilyState({ + scopeId, + familyKey: rowId, + }), + ) === true, + ); + }, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsSelector.ts deleted file mode 100644 index de58b51c4..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsSelector.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { selector } from 'recoil'; - -import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState'; -import { tableRowIdsState } from '../tableRowIdsState'; - -export const selectedRowIdsSelector = selector({ - key: 'selectedRowIdsSelector', - get: ({ get }) => { - const rowIds = get(tableRowIdsState); - - return rowIds.filter( - (rowId) => get(isRowSelectedFamilyState(rowId)) === true, - ); - }, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/tableColumnsByKeyScopedSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/tableColumnsByKeyScopedSelector.ts index d9c47702e..743d541db 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/tableColumnsByKeyScopedSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/tableColumnsByKeyScopedSelector.ts @@ -1,14 +1,13 @@ -import { selectorFamily } from 'recoil'; - import { FieldMetadata } from '@/object-record/field/types/FieldMetadata'; +import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector'; import { ColumnDefinition } from '../../types/ColumnDefinition'; import { tableColumnsScopedState } from '../tableColumnsScopedState'; -export const tableColumnsByKeyScopedSelector = selectorFamily({ +export const tableColumnsByKeyScopedSelector = createScopedSelector({ key: 'tableColumnsByKeyScopedSelector', get: - (scopeId: string) => + ({ scopeId }) => ({ get }) => get(tableColumnsScopedState({ scopeId })).reduce< Record> diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsScopedSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsScopedSelector.ts index 348f371d8..35e57373b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsScopedSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsScopedSelector.ts @@ -1,12 +1,12 @@ -import { selectorFamily } from 'recoil'; +import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector'; import { availableTableColumnsScopedState } from '../availableTableColumnsScopedState'; import { tableColumnsScopedState } from '../tableColumnsScopedState'; -export const visibleTableColumnsScopedSelector = selectorFamily({ +export const visibleTableColumnsScopedSelector = createScopedSelector({ key: 'visibleTableColumnsScopedSelector', get: - (scopeId: string) => + ({ scopeId }) => ({ get }) => { const columns = get(tableColumnsScopedState({ scopeId })); const availableColumnKeys = get( diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionScopedState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionScopedState.ts new file mode 100644 index 000000000..ab46025c2 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionScopedState.ts @@ -0,0 +1,12 @@ +import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState'; + +import { TableCellPosition } from '../types/TableCellPosition'; + +export const softFocusPositionScopedState = + createScopedState({ + key: 'softFocusPositionScopedState', + defaultValue: { + row: 0, + column: 1, + }, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionState.ts deleted file mode 100644 index 6eca1b479..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionState.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { atom } from 'recoil'; - -import { TableCellPosition } from '../types/TableCellPosition'; - -export const softFocusPositionState = atom({ - key: 'softFocusPositionState', - default: { - row: 0, - column: 1, - }, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsScopedState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsScopedState.ts new file mode 100644 index 000000000..79d5c2dc3 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsScopedState.ts @@ -0,0 +1,6 @@ +import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState'; + +export const tableRowIdsScopedState = createScopedState({ + key: 'tableRowIdsScopedState', + defaultValue: [], +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsState.ts deleted file mode 100644 index e7832f409..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from 'recoil'; - -export const tableRowIdsState = atom({ - key: 'tableRowIdsState', - default: [], -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/utils/getRecordTableScopeInjector.ts b/packages/twenty-front/src/modules/object-record/record-table/utils/getRecordTableScopeInjector.ts new file mode 100644 index 000000000..9f02312d2 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/utils/getRecordTableScopeInjector.ts @@ -0,0 +1,145 @@ +import { isRowSelectedScopedFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedScopedFamilyState'; +import { currentTableCellInEditModePositionScopedState } from '@/object-record/record-table/states/currentTableCellInEditModePositionScopedState'; +import { isRecordTableInitialLoadingScopedState } from '@/object-record/record-table/states/isRecordTableInitialLoadingScopedState'; +import { isSoftFocusActiveScopedState } from '@/object-record/record-table/states/isSoftFocusActiveScopedState'; +import { isSoftFocusOnTableCellScopedFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellScopedFamilyState'; +import { isTableCellInEditModeScopedFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeScopedFamilyState'; +import { numberOfTableRowsScopedState } from '@/object-record/record-table/states/numberOfTableRowsScopedState'; +import { objectMetadataConfigScopedState } from '@/object-record/record-table/states/objectMetadataConfigScopedState'; +import { resizeFieldOffsetScopedState } from '@/object-record/record-table/states/resizeFieldOffsetScopedState'; +import { allRowsSelectedStatusScopedSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusScopedSelector'; +import { numberOfTableColumnsScopedSelector } from '@/object-record/record-table/states/selectors/numberOfTableColumnsScopedSelector'; +import { selectedRowIdsScopedSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsScopedSelector'; +import { softFocusPositionScopedState } from '@/object-record/record-table/states/softFocusPositionScopedState'; +import { tableLastRowVisibleScopedState } from '@/object-record/record-table/states/tableLastRowVisibleScopedState'; +import { tableRowIdsScopedState } from '@/object-record/record-table/states/tableRowIdsScopedState'; +import { getFamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector'; +import { getScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector'; +import { getSelectorScopeInjector } from '@/ui/utilities/recoil-scope/utils/getSelectorScopeInjector'; + +import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState'; +import { onColumnsChangeScopedState } from '../states/onColumnsChangeScopedState'; +import { onEntityCountChangeScopedState } from '../states/onEntityCountChangeScopedState'; +import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector'; +import { tableColumnsByKeyScopedSelector } from '../states/selectors/tableColumnsByKeyScopedSelector'; +import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector'; +import { tableColumnsScopedState } from '../states/tableColumnsScopedState'; +import { tableFiltersScopedState } from '../states/tableFiltersScopedState'; +import { tableSortsScopedState } from '../states/tableSortsScopedState'; + +export const getRecordTableScopeInjector = () => { + const availableTableColumnsScopeInjector = getScopeInjector( + availableTableColumnsScopedState, + ); + + const tableFiltersScopeInjector = getScopeInjector(tableFiltersScopedState); + + const tableSortsScopeInjector = getScopeInjector(tableSortsScopedState); + + const tableColumnsScopeInjector = getScopeInjector(tableColumnsScopedState); + + const objectMetadataConfigScopeInjector = getScopeInjector( + objectMetadataConfigScopedState, + ); + + const tableColumnsByKeyScopeInjector = getSelectorScopeInjector( + tableColumnsByKeyScopedSelector, + ); + + const hiddenTableColumnsScopeInjector = getSelectorScopeInjector( + hiddenTableColumnsScopedSelector, + ); + + const visibleTableColumnsScopeInjector = getSelectorScopeInjector( + visibleTableColumnsScopedSelector, + ); + + const onColumnsChangeScopeInjector = getScopeInjector( + onColumnsChangeScopedState, + ); + + const onEntityCountScopeInjector = getScopeInjector( + onEntityCountChangeScopedState, + ); + + const tableLastRowVisibleScopeInjector = getScopeInjector( + tableLastRowVisibleScopedState, + ); + + const softFocusPositionScopeInjector = getScopeInjector( + softFocusPositionScopedState, + ); + + const numberOfTableRowsScopeInjector = getScopeInjector( + numberOfTableRowsScopedState, + ); + + const numberOfTableColumnsScopeInjector = getSelectorScopeInjector( + numberOfTableColumnsScopedSelector, + ); + + const currentTableCellInEditModePositionScopeInjector = getScopeInjector( + currentTableCellInEditModePositionScopedState, + ); + + const isTableCellInEditModeScopeInjector = getFamilyScopeInjector( + isTableCellInEditModeScopedFamilyState, + ); + + const isSoftFocusActiveScopeInjector = getScopeInjector( + isSoftFocusActiveScopedState, + ); + + const isSoftFocusOnTableCellScopeInjector = getFamilyScopeInjector( + isSoftFocusOnTableCellScopedFamilyState, + ); + + const tableRowIdsScopeInjector = getScopeInjector(tableRowIdsScopedState); + + const isRowSelectedScopeInjector = getFamilyScopeInjector( + isRowSelectedScopedFamilyState, + ); + + const allRowsSelectedStatusScopeInjector = getSelectorScopeInjector( + allRowsSelectedStatusScopedSelector, + ); + + const selectedRowIdsScopeInjector = getSelectorScopeInjector( + selectedRowIdsScopedSelector, + ); + + const isRecordTableInitialLoadingScopeInjector = getScopeInjector( + isRecordTableInitialLoadingScopedState, + ); + + const resizeFieldOffsetScopeInjector = getScopeInjector( + resizeFieldOffsetScopedState, + ); + + return { + availableTableColumnsScopeInjector, + tableFiltersScopeInjector, + tableSortsScopeInjector, + tableColumnsScopeInjector, + objectMetadataConfigScopeInjector, + tableColumnsByKeyScopeInjector, + hiddenTableColumnsScopeInjector, + visibleTableColumnsScopeInjector, + onColumnsChangeScopeInjector, + onEntityCountScopeInjector, + tableLastRowVisibleScopeInjector, + softFocusPositionScopeInjector, + numberOfTableRowsScopeInjector, + numberOfTableColumnsScopeInjector, + currentTableCellInEditModePositionScopeInjector, + isTableCellInEditModeScopeInjector, + isSoftFocusActiveScopeInjector, + isSoftFocusOnTableCellScopeInjector, + tableRowIdsScopeInjector, + isRowSelectedScopeInjector, + allRowsSelectedStatusScopeInjector, + selectedRowIdsScopeInjector, + isRecordTableInitialLoadingScopeInjector, + resizeFieldOffsetScopeInjector, + }; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/utils/getRecordTableScopedStates.ts b/packages/twenty-front/src/modules/object-record/record-table/utils/getRecordTableScopedStates.ts deleted file mode 100644 index 2cc8386c4..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/utils/getRecordTableScopedStates.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { objectMetadataConfigScopedState } from '@/object-record/record-table/states/objectMetadataConfigScopedState'; -import { tableLastRowVisibleScopedState } from '@/object-record/record-table/states/tableLastRowVisibleScopedState'; -import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated'; - -import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState'; -import { onColumnsChangeScopedState } from '../states/onColumnsChangeScopedState'; -import { onEntityCountChangeScopedState } from '../states/onEntityCountChange'; -import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector'; -import { tableColumnsByKeyScopedSelector } from '../states/selectors/tableColumnsByKeyScopedSelector'; -import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector'; -import { tableColumnsScopedState } from '../states/tableColumnsScopedState'; -import { tableFiltersScopedState } from '../states/tableFiltersScopedState'; -import { tableSortsScopedState } from '../states/tableSortsScopedState'; - -export const getRecordTableScopedStates = ({ - recordTableScopeId, -}: { - recordTableScopeId: string; -}) => { - const availableTableColumnsState = getScopedStateDeprecated( - availableTableColumnsScopedState, - recordTableScopeId, - ); - - const tableFiltersState = getScopedStateDeprecated( - tableFiltersScopedState, - recordTableScopeId, - ); - - const tableSortsState = getScopedStateDeprecated( - tableSortsScopedState, - recordTableScopeId, - ); - - const tableColumnsState = getScopedStateDeprecated( - tableColumnsScopedState, - recordTableScopeId, - ); - - const objectMetadataConfigState = getScopedStateDeprecated( - objectMetadataConfigScopedState, - recordTableScopeId, - ); - - const tableColumnsByKeySelector = - tableColumnsByKeyScopedSelector(recordTableScopeId); - - const hiddenTableColumnsSelector = - hiddenTableColumnsScopedSelector(recordTableScopeId); - - const visibleTableColumnsSelector = - visibleTableColumnsScopedSelector(recordTableScopeId); - - const onColumnsChangeState = getScopedStateDeprecated( - onColumnsChangeScopedState, - recordTableScopeId, - ); - - const onEntityCountChangeState = getScopedStateDeprecated( - onEntityCountChangeScopedState, - recordTableScopeId, - ); - - const tableLastRowVisibleState = getScopedStateDeprecated( - tableLastRowVisibleScopedState, - recordTableScopeId, - ); - - return { - availableTableColumnsState, - tableFiltersState, - tableSortsState, - tableColumnsState, - objectMetadataConfigState, - tableColumnsByKeySelector, - hiddenTableColumnsSelector, - visibleTableColumnsSelector, - onColumnsChangeState, - onEntityCountChangeState, - tableLastRowVisibleState, - }; -}; diff --git a/packages/twenty-front/src/modules/pipeline/components/PipelineAddButton.tsx b/packages/twenty-front/src/modules/pipeline/components/PipelineAddButton.tsx index 8f84ad199..9460d4ba4 100644 --- a/packages/twenty-front/src/modules/pipeline/components/PipelineAddButton.tsx +++ b/packages/twenty-front/src/modules/pipeline/components/PipelineAddButton.tsx @@ -14,9 +14,9 @@ import { logError } from '~/utils/logError'; export const PipelineAddButton = () => { const { enqueueSnackBar } = useSnackBar(); - const { closeDropdown, toggleDropdown } = useDropdown({ - dropdownScopeId: 'add-pipeline-progress', - }); + const { closeDropdown, toggleDropdown } = useDropdown( + 'add-pipeline-progress', + ); const createOpportunity = useCreateOpportunity(); diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx index a3913a43b..dafc8d9c1 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx @@ -24,7 +24,7 @@ export const SettingsAccountsRowDropdownMenu = ({ const dropdownScopeId = `settings-account-row-${account.uuid}`; const navigate = useNavigate(); - const { closeDropdown } = useDropdown({ dropdownScopeId }); + const { closeDropdown } = useDropdown(dropdownScopeId); return ( diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx index ae1a365cd..205853f25 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx @@ -68,12 +68,12 @@ export const SettingsObjectFieldSelectFormOptionRow = ({ return { color: `${baseScopeId}-color`, actions: `${baseScopeId}-actions` }; }, []); - const { closeDropdown: closeColorDropdown } = useDropdown({ - dropdownScopeId: dropdownScopeIds.color, - }); - const { closeDropdown: closeActionsDropdown } = useDropdown({ - dropdownScopeId: dropdownScopeIds.actions, - }); + const { closeDropdown: closeColorDropdown } = useDropdown( + dropdownScopeIds.color, + ); + const { closeDropdown: closeActionsDropdown } = useDropdown( + dropdownScopeIds.actions, + ); return ( diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx index bc945c5c6..e93da2324 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx @@ -57,7 +57,7 @@ export const SettingsAboutSection = ({ const { getIcon } = useIcons(); const Icon = getIcon(iconKey); - const { closeDropdown } = useDropdown({ dropdownScopeId }); + const { closeDropdown } = useDropdown(dropdownScopeId); const handleEdit = () => { onEdit(); diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx index f57360745..e739e882a 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx @@ -27,7 +27,7 @@ export const SettingsObjectFieldActiveActionDropdown = ({ }: SettingsObjectFieldActiveActionDropdownProps) => { const dropdownScopeId = `${scopeKey}-settings-field-active-action-dropdown`; - const { closeDropdown } = useDropdown({ dropdownScopeId }); + const { closeDropdown } = useDropdown(dropdownScopeId); const handleEdit = () => { onEdit(); diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx index a7a8d73ea..a80638e4b 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx @@ -20,7 +20,7 @@ export const SettingsObjectFieldDisabledActionDropdown = ({ }: SettingsObjectFieldDisabledActionDropdownProps) => { const dropdownScopeId = `${scopeKey}-settings-field-disabled-action-dropdown`; - const { closeDropdown } = useDropdown({ dropdownScopeId }); + const { closeDropdown } = useDropdown(dropdownScopeId); const handleActivate = () => { onActivate(); diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx index bdb11edcb..b2a5e4781 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx @@ -22,7 +22,7 @@ export const SettingsObjectDisabledMenuDropDown = ({ }: SettingsObjectDisabledMenuDropDownProps) => { const dropdownScopeId = `${scopeKey}-settings-object-disabled-menu-dropdown`; - const { closeDropdown } = useDropdown({ dropdownScopeId }); + const { closeDropdown } = useDropdown(dropdownScopeId); const handleActivate = () => { onActivate(); diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx index ec4ee3ed7..fc2f81ecb 100644 --- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx +++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx @@ -27,8 +27,8 @@ export const SignInBackgroundMockPage = () => { - - + + ); diff --git a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx index 636ca2533..0beec0fbf 100644 --- a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx @@ -95,7 +95,7 @@ export const IconPicker = ({ setHotkeyScopeAndMemorizePreviousScope, } = usePreviousHotkeyScope(); - const { closeDropdown } = useDropdown({ dropdownScopeId }); + const { closeDropdown } = useDropdown(dropdownScopeId); const { getIcons, getIcon } = useIcons(); const icons = getIcons(); diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx index 83ab05ccd..56fca8ed9 100644 --- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx @@ -74,7 +74,7 @@ export const Select = ({ const selectedOption = options.find(({ value: key }) => key === value) || options[0]; - const { closeDropdown } = useDropdown({ dropdownScopeId }); + const { closeDropdown } = useDropdown(dropdownScopeId); const selectControl = ( diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx index 73a1c8f5f..74eec4252 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx @@ -75,9 +75,7 @@ export const CountryPickerDropdownButton = ({ const [selectedCountry, setSelectedCountry] = useState(); - const { isDropdownOpen, closeDropdown } = useDropdown({ - dropdownScopeId: 'country-picker', - }); + const { isDropdownOpen, closeDropdown } = useDropdown('country-picker'); const handleChange = (countryCode: string) => { onChange(countryCode); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownScopedStates.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownScopedStates.ts new file mode 100644 index 000000000..01e2798c8 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownScopedStates.ts @@ -0,0 +1,31 @@ +import { DropdownScopeInternalContext } from '@/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext'; +import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; +import { useScopedState } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState'; + +type UseDropdownScopedStatesProps = { + dropdownScopeId?: string; +}; + +export const useDropdownScopedStates = ({ + dropdownScopeId, +}: UseDropdownScopedStatesProps) => { + const scopeId = useAvailableScopeIdOrThrow( + DropdownScopeInternalContext, + dropdownScopeId, + ); + + const { + getScopedState, + getScopedFamilyState, + getScopedSnapshotValue, + getScopedFamilySnapshotValue, + } = useScopedState(scopeId); + + return { + scopeId, + injectStateWithDropdownScopeId: getScopedState, + injectFamilyStateWithDropdownScopeId: getScopedFamilyState, + injectSnapshotValueWithDropdownScopeId: getScopedSnapshotValue, + injectFamilySnapshotValueWithDropdownScopeId: getScopedFamilySnapshotValue, + }; +}; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts index 565a20261..e77afedf9 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts @@ -1,44 +1,44 @@ +import { useRecoilState } from 'recoil'; + +import { useDropdownScopedStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownScopedStates'; +import { getDropdownScopeInjectors } from '@/ui/layout/dropdown/utils/internal/getDropdownScopeInjectors'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; -import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; -import { DropdownScopeInternalContext } from '../scopes/scope-internal-context/DropdownScopeInternalContext'; +export const useDropdown = (dropdownId?: string) => { + const { injectStateWithDropdownScopeId, scopeId } = useDropdownScopedStates({ + dropdownScopeId: dropdownId, + }); -import { useDropdownStates } from './useDropdownStates'; + const { + dropdownHotkeyScopeScopeInjector, + dropdownWidthScopeInjector, + isDropdownOpenScopeInjector, + } = getDropdownScopeInjectors(); -type UseDropdownProps = { - dropdownScopeId?: string; -}; - -export const useDropdown = (props?: UseDropdownProps) => { const { setHotkeyScopeAndMemorizePreviousScope, goBackToPreviousHotkeyScope, } = usePreviousHotkeyScope(); - const scopeId = useAvailableScopeIdOrThrow( - DropdownScopeInternalContext, - props?.dropdownScopeId, + const [dropdownHotkeyScope, setDropdownHotkeyScope] = useRecoilState( + injectStateWithDropdownScopeId(dropdownHotkeyScopeScopeInjector), ); - const { - dropdownHotkeyScope, - setDropdownHotkeyScope, - isDropdownOpen, - setIsDropdownOpen, - dropdownWidth, - setDropdownWidth, - } = useDropdownStates({ - scopeId, - }); + const [dropdownWidth, setDropdownWidth] = useRecoilState( + injectStateWithDropdownScopeId(dropdownWidthScopeInjector), + ); - const closeDropdownButton = () => { + const [isDropdownOpen, setIsDropdownOpen] = useRecoilState( + injectStateWithDropdownScopeId(isDropdownOpenScopeInjector), + ); + + const closeDropdown = () => { goBackToPreviousHotkeyScope(); setIsDropdownOpen(false); }; - const openDropdownButton = () => { + const openDropdown = () => { setIsDropdownOpen(true); - if (dropdownHotkeyScope) { setHotkeyScopeAndMemorizePreviousScope( dropdownHotkeyScope.scope, @@ -47,20 +47,20 @@ export const useDropdown = (props?: UseDropdownProps) => { } }; - const toggleDropdownButton = () => { + const toggleDropdown = () => { if (isDropdownOpen) { - closeDropdownButton(); + closeDropdown(); } else { - openDropdownButton(); + openDropdown(); } }; return { scopeId, isDropdownOpen: isDropdownOpen, - closeDropdown: closeDropdownButton, - toggleDropdown: toggleDropdownButton, - openDropdown: openDropdownButton, + closeDropdown, + toggleDropdown, + openDropdown, dropdownHotkeyScope, setDropdownHotkeyScope, dropdownWidth, diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdownStates.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdownStates.ts deleted file mode 100644 index 461ca1b3f..000000000 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdownStates.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2'; - -import { dropdownHotkeyScopeScopedState } from '../states/dropdownHotkeyScopeScopedState'; -import { dropdownWidthScopedState } from '../states/dropdownWidthScopedState'; -import { isDropdownOpenScopedState } from '../states/isDropdownOpenScopedState'; - -export const useDropdownStates = ({ scopeId }: { scopeId: string }) => { - const [isDropdownOpen, setIsDropdownOpen] = useRecoilScopedStateV2( - isDropdownOpenScopedState, - scopeId, - ); - - const [dropdownHotkeyScope, setDropdownHotkeyScope] = useRecoilScopedStateV2( - dropdownHotkeyScopeScopedState, - scopeId, - ); - - const [dropdownWidth, setDropdownWidth] = useRecoilScopedStateV2( - dropdownWidthScopedState, - scopeId, - ); - - return { - isDropdownOpen, - setIsDropdownOpen, - dropdownHotkeyScope, - setDropdownHotkeyScope, - dropdownWidth, - setDropdownWidth, - }; -}; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/utils/internal/getDropdownScopeInjectors.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/utils/internal/getDropdownScopeInjectors.ts new file mode 100644 index 000000000..032fe74fd --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/utils/internal/getDropdownScopeInjectors.ts @@ -0,0 +1,22 @@ +import { dropdownHotkeyScopeScopedState } from '@/ui/layout/dropdown/states/dropdownHotkeyScopeScopedState'; +import { dropdownWidthScopedState } from '@/ui/layout/dropdown/states/dropdownWidthScopedState'; +import { isDropdownOpenScopedState } from '@/ui/layout/dropdown/states/isDropdownOpenScopedState'; +import { getScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector'; + +export const getDropdownScopeInjectors = () => { + const dropdownHotkeyScopeScopeInjector = getScopeInjector( + dropdownHotkeyScopeScopedState, + ); + + const dropdownWidthScopeInjector = getScopeInjector(dropdownWidthScopedState); + + const isDropdownOpenScopeInjector = getScopeInjector( + isDropdownOpenScopedState, + ); + + return { + dropdownHotkeyScopeScopeInjector, + dropdownWidthScopeInjector, + isDropdownOpenScopeInjector, + }; +}; diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.tsx b/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.tsx index 24468ddb4..924c61c56 100644 --- a/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.tsx +++ b/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.tsx @@ -27,11 +27,10 @@ export const useSelectableListHotKeys = ( } }; - const { getSelectableListScopedSnapshotValue } = useSelectableListScopedState( - { + const { injectSnapshotValueWithSelectableListScopeId } = + useSelectableListScopedState({ selectableListScopeId: scopeId, - }, - ); + }); const handleSelect = useRecoilCallback( ({ snapshot, set }) => @@ -42,11 +41,11 @@ export const useSelectableListHotKeys = ( isSelectedItemIdFamilyScopeInjector, } = getSelectableListScopeInjectors(); - const selectedItemId = getSelectableListScopedSnapshotValue( + const selectedItemId = injectSnapshotValueWithSelectableListScopeId( snapshot, selectedItemIdScopeInjector, ); - const selectableItemIds = getSelectableListScopedSnapshotValue( + const selectableItemIds = injectSnapshotValueWithSelectableListScopeId( snapshot, selectableItemIdsScopeInjector, ); @@ -120,7 +119,7 @@ export const useSelectableListHotKeys = ( } } }, - [getSelectableListScopedSnapshotValue, scopeId], + [injectSnapshotValueWithSelectableListScopeId, scopeId], ); useScopedHotkeys(Key.ArrowUp, () => handleSelect('up'), hotkeyScope, []); @@ -145,12 +144,12 @@ export const useSelectableListHotKeys = ( selectedItemIdScopeInjector, selectableListOnEnterScopeInjector, } = getSelectableListScopeInjectors(); - const selectedItemId = getSelectableListScopedSnapshotValue( + const selectedItemId = injectSnapshotValueWithSelectableListScopeId( snapshot, selectedItemIdScopeInjector, ); - const onEnter = getSelectableListScopedSnapshotValue( + const onEnter = injectSnapshotValueWithSelectableListScopeId( snapshot, selectableListOnEnterScopeInjector, ); @@ -159,7 +158,7 @@ export const useSelectableListHotKeys = ( onEnter?.(selectedItemId); } }, - [getSelectableListScopedSnapshotValue], + [injectSnapshotValueWithSelectableListScopeId], ), hotkeyScope, [], diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState.ts index e7a4e67e1..2388ebb11 100644 --- a/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState.ts +++ b/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState.ts @@ -23,9 +23,10 @@ export const useSelectableListScopedState = ({ return { scopeId, - getSelectableListScopedState: getScopedState, - getSelectableListScopedFamilyState: getScopedFamilyState, - getSelectableListScopedSnapshotValue: getScopedSnapshotValue, - getSelectableListScopedFamilySnapshotValue: getScopedFamilySnapshotValue, + injectStateWithSelectableListScopeId: getScopedState, + injectFamilyStateWithSelectableListScopeId: getScopedFamilyState, + injectSnapshotValueWithSelectableListScopeId: getScopedSnapshotValue, + injectFamilySnapshotValueWithSelectableListScopeId: + getScopedFamilySnapshotValue, }; }; diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts index 782f619eb..ccadbba65 100644 --- a/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts +++ b/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts @@ -3,13 +3,13 @@ import { useResetRecoilState, useSetRecoilState } from 'recoil'; import { useSelectableListScopedState } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState'; import { getSelectableListScopeInjectors } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopeInjectors'; -export const useSelectableList = (selectableListScopeId?: string) => { +export const useSelectableList = (selectableListId?: string) => { const { - getSelectableListScopedState, - getSelectableListScopedFamilyState, + injectStateWithSelectableListScopeId, + injectFamilyStateWithSelectableListScopeId, scopeId, } = useSelectableListScopedState({ - selectableListScopeId, + selectableListScopeId: selectableListId, }); const { @@ -20,17 +20,18 @@ export const useSelectableList = (selectableListScopeId?: string) => { } = getSelectableListScopeInjectors(); const setSelectableItemIds = useSetRecoilState( - getSelectableListScopedState(selectableItemIdsScopeInjector), + injectStateWithSelectableListScopeId(selectableItemIdsScopeInjector), ); const setSelectableListOnEnter = useSetRecoilState( - getSelectableListScopedState(selectableListOnEnterScopeInjector), - ); - const isSelectedItemIdFamilyState = getSelectableListScopedFamilyState( - isSelectedItemIdFamilyScopeInjector, + injectStateWithSelectableListScopeId(selectableListOnEnterScopeInjector), ); + const isSelectedItemIdFamilyState = + injectFamilyStateWithSelectableListScopeId( + isSelectedItemIdFamilyScopeInjector, + ); const resetSelectedItemIdState = useResetRecoilState( - getSelectableListScopedState(selectedItemIdScopeInjector), + injectStateWithSelectableListScopeId(selectedItemIdScopeInjector), ); const resetSelectedItem = () => { diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx index 47344a771..0bc688805 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx @@ -23,9 +23,7 @@ export const ShowPageAddButton = ({ }: { entity: ActivityTargetableEntity; }) => { - const { closeDropdown, toggleDropdown } = useDropdown({ - dropdownScopeId: 'add-show-page', - }); + const { closeDropdown, toggleDropdown } = useDropdown('add-show-page'); const openCreateActivity = useOpenCreateActivityDrawer(); const handleSelect = (type: ActivityType) => { diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx index 02f7cc3ef..66b3acbce 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx @@ -26,9 +26,7 @@ export const ShowPageMoreButton = ({ recordId: string; objectNameSingular: string; }) => { - const { closeDropdown, toggleDropdown } = useDropdown({ - dropdownScopeId: 'more-show-page', - }); + const { closeDropdown, toggleDropdown } = useDropdown('more-show-page'); const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState); const navigate = useNavigate(); diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts index 6d31897b5..592e9d53e 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts @@ -67,10 +67,6 @@ export const useSetHotkeyScope = () => scopesToSet.push(AppHotkeyScope.CommandMenu); } - if (newHotkeyScope.customScopes?.commandMenuOpen) { - scopesToSet.push(AppHotkeyScope.CommandMenuOpen); - } - if (newHotkeyScope?.customScopes?.goto) { scopesToSet.push(AppHotkeyScope.Goto); } diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState.ts index 3ab4e24e5..a1a82a184 100644 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState.ts +++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState.ts @@ -2,12 +2,17 @@ import { SerializableParam, Snapshot } from 'recoil'; import { FamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector'; import { ScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector'; +import { SelectorScopeInjector } from '@/ui/utilities/recoil-scope/utils/getSelectorScopeInjector'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; export const useScopedState = (scopeId: string) => { const getScopedState = (scopeInjector: ScopeInjector) => scopeInjector(scopeId); + const getScopedSelector = ( + scopeInjector: SelectorScopeInjector, + ) => scopeInjector(scopeId); + const getScopedFamilyState = ( familyScopeInjector: FamilyScopeInjector, @@ -16,23 +21,30 @@ export const useScopedState = (scopeId: string) => { familyScopeInjector(scopeId, familyKey); const getScopedSnapshotValue = ( - snashot: Snapshot, + snapshot: Snapshot, scopeInjector: ScopeInjector, - ) => getSnapshotValue(snashot, scopeInjector(scopeId)); + ) => getSnapshotValue(snapshot, scopeInjector(scopeId)); + + const getScopedSelectorSnapshotValue = ( + snapshot: Snapshot, + scopeInjector: SelectorScopeInjector, + ) => getSnapshotValue(snapshot, scopeInjector(scopeId)); const getScopedFamilySnapshotValue = ( - snashot: Snapshot, + snapshot: Snapshot, familyScopeInjector: FamilyScopeInjector, ) => (familyKey: FamilyKey) => - getSnapshotValue(snashot, familyScopeInjector(scopeId, familyKey)); + getSnapshotValue(snapshot, familyScopeInjector(scopeId, familyKey)); return { scopeId, getScopedState, + getScopedSelector, getScopedFamilyState, getScopedSnapshotValue, + getScopedSelectorSnapshotValue, getScopedFamilySnapshotValue, }; }; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeInjector.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeInjector.ts index 7659fd352..453372700 100644 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeInjector.ts +++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeInjector.ts @@ -8,7 +8,7 @@ export type ScopeInjector = ( export const getScopeInjector = ( scopedState: RecoilScopedState, -) => { +): ScopeInjector => { return (scopeId: string) => scopedState({ scopeId, diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelectorScopeInjector.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelectorScopeInjector.ts new file mode 100644 index 000000000..ffd4e4986 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelectorScopeInjector.ts @@ -0,0 +1,16 @@ +import { RecoilValueReadOnly } from 'recoil'; + +import { RecoilScopedSelector } from '@/ui/utilities/recoil-scope/types/RecoilScopedSelector'; + +export type SelectorScopeInjector = ( + scopeId: string, +) => RecoilValueReadOnly; + +export const getSelectorScopeInjector = ( + scopedSelector: RecoilScopedSelector, +): SelectorScopeInjector => { + return (scopeId: string) => + scopedSelector({ + scopeId, + }); +}; diff --git a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx b/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx index 733aa1f4b..ab2d74c90 100644 --- a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx +++ b/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx @@ -29,9 +29,7 @@ export const EditableFilterDropdownButton = ({ filterDropdownId: viewFilterDropdownId, }); - const { closeDropdown } = useDropdown({ - dropdownScopeId: viewFilterDropdownId, - }); + const { closeDropdown } = useDropdown(viewFilterDropdownId); const { removeViewFilter } = useViewBar(); diff --git a/packages/twenty-front/src/modules/views/components/ViewBar.tsx b/packages/twenty-front/src/modules/views/components/ViewBar.tsx index 53af0c8ea..aec645b4e 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBar.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBar.tsx @@ -39,9 +39,9 @@ export const ViewBar = ({ onViewFiltersChange, onViewSortsChange, }: ViewBarProps) => { - const { openDropdown: openOptionsDropdownButton } = useDropdown({ - dropdownScopeId: optionsDropdownScopeId, - }); + const { openDropdown: openOptionsDropdownButton } = useDropdown( + optionsDropdownScopeId, + ); const { upsertViewSort, upsertViewFilter } = useViewBar({ viewBarId: viewBarId, }); diff --git a/packages/twenty-front/src/modules/views/components/ViewsDropdownButton.tsx b/packages/twenty-front/src/modules/views/components/ViewsDropdownButton.tsx index 7c0005cbf..2b3118b9a 100644 --- a/packages/twenty-front/src/modules/views/components/ViewsDropdownButton.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewsDropdownButton.tsx @@ -84,13 +84,11 @@ export const ViewsDropdownButton = ({ const { isDropdownOpen: isViewsDropdownOpen, closeDropdown: closeViewsDropdown, - } = useDropdown({ - dropdownScopeId: ViewsDropdownId, - }); + } = useDropdown(ViewsDropdownId); - const { openDropdown: openOptionsDropdown } = useDropdown({ - dropdownScopeId: optionsDropdownScopeId, - }); + const { openDropdown: openOptionsDropdown } = useDropdown( + optionsDropdownScopeId, + ); const handleViewSelect = useRecoilCallback( () => async (viewId: string) => {