diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx index 5b1120a75..9f1242007 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx @@ -38,7 +38,7 @@ export const RecordShowRightDrawerOpenRecordButton = ({ objectNameSingular, recordId, }: RecordShowRightDrawerOpenRecordButtonProps) => { - const record = useRecoilValue( + const record = useRecoilValue( recordStoreFamilyState(recordId), ); const { closeCommandMenu } = useCommandMenu(); diff --git a/packages/twenty-front/src/modules/activities/inline-cell/hooks/useUpdateActivityTargetFromCell.ts b/packages/twenty-front/src/modules/activities/inline-cell/hooks/useUpdateActivityTargetFromCell.ts index 3c494c915..837a767e4 100644 --- a/packages/twenty-front/src/modules/activities/inline-cell/hooks/useUpdateActivityTargetFromCell.ts +++ b/packages/twenty-front/src/modules/activities/inline-cell/hooks/useUpdateActivityTargetFromCell.ts @@ -9,7 +9,6 @@ import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord'; import { searchRecordStoreComponentFamilyState } from '@/object-record/record-picker/multiple-record-picker/states/searchRecordStoreComponentFamilyState'; import { RecordPickerPickableMorphItem } from '@/object-record/record-picker/types/RecordPickerPickableMorphItem'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; -import { isNull } from '@sniptt/guards'; import { useRecoilCallback, useSetRecoilState } from 'recoil'; import { isDefined } from 'twenty-shared/utils'; import { v4 } from 'uuid'; @@ -171,7 +170,7 @@ export const useUpdateActivityTargetFromCell = ({ } setActivityFromStore((currentActivity) => { - if (isNull(currentActivity)) { + if (!isDefined(currentActivity)) { return null; } diff --git a/packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx b/packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx index e1f8c6262..55b7c2920 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx @@ -10,7 +10,6 @@ import { RecordShowContainer } from '@/object-record/record-show/components/Reco import { RecordShowEffect } from '@/object-record/record-show/components/RecordShowEffect'; import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordShowPage'; import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext'; -import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect'; import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext'; @@ -74,7 +73,6 @@ export const CommandMenuRecordPage = () => { > - { const { objectMetadataItem } = useObjectMetadataItem({ objectNameSingular }); const { objectMetadataItems } = useObjectMetadataItems(); + const setRecordValueInContextSelector = useSetRecordValue(); const FIND_ONE_RECORD_FOR_SHOW_PAGE_OPERATION_SIGNATURE = buildFindOneRecordForShowPageOperationSignature({ @@ -33,15 +34,25 @@ export const RecordShowEffect = ({ withSoftDeleted: true, }); - const [recordFromStore, setRecordFromStore] = useRecoilState( - recordStoreFamilyState(recordId), + const setRecordStore = useRecoilCallback( + ({ snapshot, set }) => + async (newRecord: ObjectRecord | null | undefined) => { + const previousRecordValue = snapshot + .getLoadable(recordStoreFamilyState(recordId)) + .getValue(); + + if (JSON.stringify(previousRecordValue) !== JSON.stringify(newRecord)) { + set(recordStoreFamilyState(recordId), newRecord); + } + + setRecordValueInContextSelector(recordId, newRecord); + }, + [recordId, setRecordValueInContextSelector], ); useEffect(() => { - if (isDefined(record) && !isDeeplyEqual(record, recordFromStore)) { - setRecordFromStore(record); - } - }, [record, recordFromStore, setRecordFromStore]); + setRecordStore(record); + }, [record, setRecordStore]); return <>; }; diff --git a/packages/twenty-front/src/modules/object-record/record-store/components/RecordValueSetterEffect.tsx b/packages/twenty-front/src/modules/object-record/record-store/components/RecordValueSetterEffect.tsx index b4a09b068..c5588f509 100644 --- a/packages/twenty-front/src/modules/object-record/record-store/components/RecordValueSetterEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-store/components/RecordValueSetterEffect.tsx @@ -6,7 +6,6 @@ import { useSetRecordValue, } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; -import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; // TODO: should be optimized and put higher up export const RecordValueSetterEffect = ({ recordId }: { recordId: string }) => { @@ -19,7 +18,10 @@ export const RecordValueSetterEffect = ({ recordId }: { recordId: string }) => { ); useEffect(() => { - if (!isDeeplyEqual(recordValueFromContextSelector, recordValueFromRecoil)) { + if ( + JSON.stringify(recordValueFromContextSelector) !== + JSON.stringify(recordValueFromRecoil) + ) { setRecordValueInContextSelector(recordId, recordValueFromRecoil); } }, [ diff --git a/packages/twenty-front/src/modules/object-record/record-store/states/recordStoreFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-store/states/recordStoreFamilyState.ts index 9c7877004..a5ce98620 100644 --- a/packages/twenty-front/src/modules/object-record/record-store/states/recordStoreFamilyState.ts +++ b/packages/twenty-front/src/modules/object-record/record-store/states/recordStoreFamilyState.ts @@ -2,7 +2,7 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; export const recordStoreFamilyState = createFamilyState< - ObjectRecord | null, + ObjectRecord | null | undefined, string >({ key: 'recordStoreFamilyState', diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx index a1be446a7..8f2402c1e 100644 --- a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx +++ b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx @@ -11,7 +11,6 @@ import { RecordShowContainer } from '@/object-record/record-show/components/Reco import { RecordShowEffect } from '@/object-record/record-show/components/RecordShowEffect'; import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordShowPage'; import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext'; -import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect'; import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { PageHeaderToggleCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton'; import { PageBody } from '@/ui/layout/page/components/PageBody'; @@ -47,7 +46,6 @@ export const RecordShowPage = () => { -