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

Removed value setter effect completely (#12101)

Browse Source 
This PR removes the effect component that was synchronizing the record
store recoil state with the context selector equivalent state that is
used for performance on the tables.

Now we only set the context selector in parallel with the recoil state,
thus avoiding any synchronization side-effect between those two states.
This commit is contained in:
Lucas Bordeau
2025-05-17 15:41:01 +02:00
committed by GitHub
parent 64d988cdec
commit 58b40b1f89
10 changed files with 34 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetailsEffect.tsx
View File

@ -1,4 +1,5 @@
import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
import { useSetRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
import { useEffect } from 'react';
@ -10,6 +11,7 @@ export const CalendarEventDetailsEffect = ({
record,
}: CalendarEventDetailsEffectProps) => {
const { upsertRecords } = useUpsertRecordsInStore();
const setRecordValueInContextSelector = useSetRecordValue();
useEffect(() => {
if (!record) {
@ -17,7 +19,8 @@ export const CalendarEventDetailsEffect = ({
}
upsertRecords([record]);
}, [record, upsertRecords]);
setRecordValueInContextSelector(record.id, record);
}, [record, upsertRecords, setRecordValueInContextSelector]);
return <></>;
};

14
packages/twenty-front/src/modules/command-menu/pages/calendar-event/components/CommandMenuCalendarEventPage.tsx
View File

@ -4,8 +4,10 @@ import { FIND_ONE_CALENDAR_EVENT_OPERATION_SIGNATURE } from '@/activities/calend
import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import {
RecordFieldValueSelectorContextProvider,
useSetRecordValue,
} from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -14,13 +16,18 @@ export const CommandMenuCalendarEventPage = () => {
const viewableRecordId = useRecoilComponentValueV2(
viewableRecordIdComponentState,
);
const setRecordValueInContextSelector = useSetRecordValue();
const { record: calendarEvent } = useFindOneRecord<CalendarEvent>({
objectNameSingular:
FIND_ONE_CALENDAR_EVENT_OPERATION_SIGNATURE.objectNameSingular,
objectRecordId: viewableRecordId ?? '',
recordGqlFields: FIND_ONE_CALENDAR_EVENT_OPERATION_SIGNATURE.fields,
onCompleted: (record) => upsertRecords([record]),
// TODO: this is not executed on sub-sequent runs, make sure that it is intended
onCompleted: (record) => {
upsertRecords([record]);
setRecordValueInContextSelector(record.id, record);
},
});
if (!calendarEvent) {
@ -30,7 +37,6 @@ export const CommandMenuCalendarEventPage = () => {
return (
<RecordFieldValueSelectorContextProvider>
<CalendarEventDetailsEffect record={calendarEvent} />
<RecordValueSetterEffect recordId={calendarEvent.id} />
<CalendarEventDetails calendarEvent={calendarEvent} />
</RecordFieldValueSelectorContextProvider>
);

2
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
View File

@ -15,7 +15,6 @@ import { RecordBoardCardBody } from '@/object-record/record-board/record-board-c
import { RecordBoardCardHeader } from '@/object-record/record-board/record-board-card/components/RecordBoardCardHeader';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState';
import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
import { AppPath } from '@/types/AppPath';
import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
@ -201,7 +200,6 @@ export const RecordBoardCard = () => {
className="record-board-card"
onContextMenu={handleActionMenuDropdown}
>
<RecordValueSetterEffect recordId={recordId} />
<InView>
<StyledBoardCard
ref={cardRef}

7
packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts
View File

@ -14,6 +14,7 @@ import { useRecordBoardRecordGqlFields } from '@/object-record/record-index/hook
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
import { useSetRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { isDefined } from 'twenty-shared/utils';
@ -31,6 +32,7 @@ export const useLoadRecordIndexBoardColumn = ({
recordBoardId,
columnId,
}: UseLoadRecordIndexBoardProps) => {
const setRecordValueInContextSelector = useSetRecordValue();
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
});
@ -100,7 +102,10 @@ export const useLoadRecordIndexBoardColumn = ({
useEffect(() => {
upsertRecordsInStore(records);
}, [records, upsertRecordsInStore]);
for (const record of records) {
setRecordValueInContextSelector(record.id, record);
}
}, [records, upsertRecordsInStore, setRecordValueInContextSelector]);
return {
records,

2
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
View File

@ -24,7 +24,6 @@ import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldM
import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
import { RecordDetailRecordsListItem } from '@/object-record/record-show/record-detail-section/components/RecordDetailRecordsListItem';
import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { getForeignKeyNameFromRelationFieldName } from '@/object-record/utils/getForeignKeyNameFromRelationFieldName';
import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
@ -221,7 +220,6 @@ export const RecordDetailRelationRecordsListItem = ({
return (
<>
<RecordValueSetterEffect recordId={relationRecord.id} />
<StyledListItem isDropdownOpen={isDropdownOpen}>
<RecordChip
record={relationRecord}

6
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItemEffect.tsx
View File

@ -3,6 +3,7 @@ import { useContext, useEffect } from 'react';
import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { useSetRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
import { isDefined } from 'twenty-shared/utils';
@ -13,6 +14,8 @@ type RecordDetailRelationRecordsListItemEffectProps = {
export const RecordDetailRelationRecordsListItemEffect = ({
relationRecordId,
}: RecordDetailRelationRecordsListItemEffectProps) => {
const setRecordValueInContextSelector = useSetRecordValue();
const { fieldDefinition } = useContext(FieldContext);
const { relationObjectMetadataNameSingular } =
@ -28,8 +31,9 @@ export const RecordDetailRelationRecordsListItemEffect = ({
useEffect(() => {
if (isDefined(record)) {
upsertRecords([record]);
setRecordValueInContextSelector(record.id, record);
}
}, [record, upsertRecords]);
}, [record, upsertRecords, setRecordValueInContextSelector]);
return null;
};

35
packages/twenty-front/src/modules/object-record/record-store/components/RecordValueSetterEffect.tsx
View File

@ -1,35 +0,0 @@
import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import {
useRecordValue,
useSetRecordValue,
} from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
// TODO: should be optimized and put higher up
export const RecordValueSetterEffect = ({ recordId }: { recordId: string }) => {
const setRecordValueInContextSelector = useSetRecordValue();
const recordValueFromContextSelector = useRecordValue(recordId);
const recordValueFromRecoil = useRecoilValue(
recordStoreFamilyState(recordId),
);
useEffect(() => {
if (
JSON.stringify(recordValueFromContextSelector) !==
JSON.stringify(recordValueFromRecoil)
) {
setRecordValueInContextSelector(recordId, recordValueFromRecoil);
}
}, [
setRecordValueInContextSelector,
recordValueFromRecoil,
recordId,
recordValueFromContextSelector,
]);
return null;
};

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

@ -2,6 +2,7 @@ import { useRecoilCallback } from 'recoil';
import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
import { useSetRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { useSetIsRecordTableFocusActive } from '@/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableFocusActive';
import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
@ -26,6 +27,8 @@ export const useSetRecordTableData = ({
recordTableId,
onEntityCountChange,
}: useSetRecordTableDataProps) => {
const setRecordValueInContextSelector = useSetRecordValue();
const recordIndexRecordIdsByGroupFamilyState =
useRecoilComponentCallbackStateV2(
recordIndexRecordIdsByGroupComponentFamilyState,
@ -73,10 +76,13 @@ export const useSetRecordTableData = ({
.getValue();
if (JSON.stringify(currentRecord) !== JSON.stringify(record)) {
set(recordStoreFamilyState(record.id), {
const newRecord = {
...currentRecord,
...record,
});
};
set(recordStoreFamilyState(record.id), newRecord);
setRecordValueInContextSelector(record.id, newRecord);
}
}
@ -124,6 +130,7 @@ export const useSetRecordTableData = ({
setRecordTableHoverPosition,
onEntityCountChange,
isRowSelectedFamilyState,
setRecordValueInContextSelector,
],
);
};

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

@ -8,7 +8,6 @@ import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotV
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useUpsertRecordFromState } from '../../hooks/useUpsertRecordFromState';
import { ColumnDefinition } from '../types/ColumnDefinition';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
@ -136,8 +135,6 @@ export const useRecordTable = (props?: useRecordTableProps) => {
const resetTableRowSelection = useResetTableRowSelection(recordTableId);
const upsertRecordTableItem = useUpsertRecordFromState;
const setFocusPosition = useSetRecordTableFocusPosition(recordTableId);
const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope();
@ -212,7 +209,6 @@ export const useRecordTable = (props?: useRecordTableProps) => {
leaveTableFocus,
setRowSelected,
resetTableRowSelection,
upsertRecordTableItem,
move,
useMapKeyboardToFocus,
selectAllRows,

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

@ -1,5 +1,4 @@
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
import { RecordTableCellCheckbox } from '@/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox';
import { RecordTableCellGrip } from '@/object-record/record-table/record-table-cell/components/RecordTableCellGrip';
import { RecordTableLastEmptyCell } from '@/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell';
@ -47,7 +46,6 @@ export const RecordTableRow = ({
<RecordTableCellCheckbox />
<RecordTableCells />
<RecordTableLastEmptyCell />
<RecordValueSetterEffect recordId={recordId} />
<ListenRecordUpdatesEffect
objectNameSingular={objectNameSingular}
recordId={recordId}