admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Migrate record table to scope map (#3363)

Browse Source 
* Migrate record table to scope map

* Update record scope id to record id

* Remove todos and fix edit mode

* Fix perf

* Fix tests

* Fix tests

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Thomas Trompette
2024-01-11 17:44:40 +01:00
committed by GitHub
parent 5f0c9f67c9
commit 6bae6fcdce
84 changed files with 713 additions and 1121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

112
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts Normal file
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4
packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedScopedFamilyState.ts → packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedFamilyStateScopeMap.ts
View File

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

4
packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsScopedState.ts → packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsStateScopeMap.ts
View File

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

4
packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionScopedState.ts → packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionStateScopeMap.ts
View File

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

4
packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingScopedState.ts → packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingStateScopeMap.ts
View File

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

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

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

4
packages/twenty-front/src/modules/object-record/record-table/states/tableLastRowVisibleScopedState.ts → packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveStateScopeMap.ts
View File

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

9
packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellFamilyStateScopeMap.ts Normal file
View File

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

4
packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellScopedFamilyState.ts → packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeFamilyStateScopeMap.ts
View File

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

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

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

4
packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsScopedState.ts → packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsStateScopeMap.ts
View File

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

4
packages/twenty-front/src/modules/object-record/record-table/states/objectMetadataConfigScopedState.ts → packages/twenty-front/src/modules/object-record/record-table/states/objectMetadataConfigStateScopeMap.ts
View File

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

6
packages/twenty-front/src/modules/object-record/record-table/states/objectNamePluralStateScopeMap.ts Normal file
View File

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

4
packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeScopedState.ts → packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeStateScopeMap.ts
View File

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

4
packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeScopedState.ts → packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeStateScopeMap.ts
View File

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

4
packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetScopedState.ts → packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetStateScopeMap.ts
View File

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

12
packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusScopedSelector.ts → packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusSelectorScopeMap.ts
View File

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

12
packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsScopedSelector.ts → packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsSelectorScopeMap.ts
View File

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

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

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

11
packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsSelectorScopeMap.ts Normal file
View File

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

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

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

23
packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsSelectorScopeMap.ts Normal file
View File

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

8
packages/twenty-front/src/modules/object-record/record-table/states/selectors/tableColumnsByKeyScopedSelector.ts → packages/twenty-front/src/modules/object-record/record-table/states/selectors/tableColumnsByKeySelectorScopeMap.ts
View File

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

12
packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsScopedSelector.ts → packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsSelectorScopeMap.ts
View File

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

4
packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionScopedState.ts → packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionStateScopeMap.ts
View File

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

4
packages/twenty-front/src/modules/object-record/record-table/states/tableColumnsScopedState.ts → packages/twenty-front/src/modules/object-record/record-table/states/tableColumnsStateScopeMap.ts
View File

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

4
packages/twenty-front/src/modules/object-record/record-table/states/tableFiltersScopedState.ts → packages/twenty-front/src/modules/object-record/record-table/states/tableFiltersStateScopeMap.ts
View File

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

6
packages/twenty-front/src/modules/object-record/record-table/states/tableLastRowVisibleStateScopeMap.ts Normal file
View File

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

4
packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsScopedState.ts → packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsStateScopeMap.ts
View File

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

4
packages/twenty-front/src/modules/object-record/record-table/states/tableSortsScopedState.ts → packages/twenty-front/src/modules/object-record/record-table/states/tableSortsStateScopeMap.ts
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId.ts Normal file
View File

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

12
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelector.ts Normal file
View File

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

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

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