fix: refactor field metadata update logic to separate effect

Author: Arun kumar

packages/twenty-front/src/modules/object-metadata/hooks/useUpdateOneFieldMetadataItem.ts

@@ -5,11 +5,13 @@ import {
 
 import { useMetadataErrorHandler } from '@/metadata-error-handler/hooks/useMetadataErrorHandler';
 import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItems';
+import { lastFieldMetadataItemUpdateState } from '@/object-metadata/states/lastFieldMetadataItemUpdateState';
 import { type MetadataRequestResult } from '@/object-metadata/types/MetadataRequestResult.type';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useRefreshCoreViewsByObjectMetadataId } from '@/views/hooks/useRefreshCoreViewsByObjectMetadataId';
 import { ApolloError } from '@apollo/client';
 import { t } from '@lingui/core/macro';
+import { useSetRecoilState } from 'recoil';
 import { CrudOperationType } from 'twenty-shared/types';
 
 export const useUpdateOneFieldMetadataItem = () => {
@@ -26,6 +28,10 @@ export const useUpdateOneFieldMetadataItem = () => {
 
   const { enqueueErrorSnackBar } = useSnackBar();
 
+  const setLastFieldMetadataItemUpdate = useSetRecoilState(
+    lastFieldMetadataItemUpdateState,
+  );
+
   const updateOneFieldMetadataItem = async ({
     objectMetadataId,
     fieldMetadataIdToUpdate,
@@ -60,6 +66,12 @@ export const useUpdateOneFieldMetadataItem = () => {
       await refreshObjectMetadataItems();
       await refreshCoreViewsByObjectMetadataId(objectMetadataId);
 
+      setLastFieldMetadataItemUpdate({
+        fieldMetadataItemId: fieldMetadataIdToUpdate,
+        objectMetadataId,
+        timestamp: Date.now(),
+      });
+
       return {
         status: 'successful',
         response,

packages/twenty-front/src/modules/object-metadata/states/lastFieldMetadataItemUpdateState.ts

@@ -0,0 +1,13 @@
+import { createState } from 'twenty-ui/utilities';
+
+export type LastFieldMetadataItemUpdate = {
+  fieldMetadataItemId: string;
+  objectMetadataId: string;
+  timestamp: number;
+} | null;
+
+export const lastFieldMetadataItemUpdateState =
+  createState<LastFieldMetadataItemUpdate>({
+    key: 'lastFieldMetadataItemUpdateState',
+    defaultValue: null,
+  });

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffectsWrapper.tsx

@@ -5,6 +5,7 @@ import { RecordTableBodyFocusKeyboardEffect } from '@/object-record/record-table
 import { RecordTableRecordGroupBodyEffects } from '@/object-record/record-table/record-table-body/components/RecordTableRecordGroupBodyEffects';
 import { RecordTableNoRecordGroupScrollToPreviousRecordEffect } from '@/object-record/record-table/virtualization/components/RecordTableNoRecordGroupScrollToPreviousRecordEffect';
 import { RecordTableVirtualizedInitialDataLoadEffect } from '@/object-record/record-table/virtualization/components/RecordTableVirtualizedInitialDataLoadEffect';
+import { RecordTableVirtualizedFieldMetadataUpdateEffect } from '@/object-record/record-table/virtualization/components/RecordTableVirtualizedFieldMetadataUpdateEffect';
 
 export interface RecordTableBodyEffectsWrapperProps {
   hasRecordGroups: boolean;
@@ -23,6 +24,7 @@ export const RecordTableBodyEffectsWrapper = ({
         <>
           <RecordTableNoRecordGroupScrollToPreviousRecordEffect />
           <RecordTableVirtualizedInitialDataLoadEffect />
+          <RecordTableVirtualizedFieldMetadataUpdateEffect />
         </>
       )}
       <RecordTableBodyEscapeHotkeyEffect />

packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableVirtualizedFieldMetadataUpdateEffect.tsx

@@ -0,0 +1,62 @@
+import { lastFieldMetadataItemUpdateState } from '@/object-metadata/states/lastFieldMetadataItemUpdateState';
+import { visibleRecordFieldsComponentSelector } from '@/object-record/record-field/states/visibleRecordFieldsComponentSelector';
+import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
+import { useResetVirtualizationBecauseDataChanged } from '@/object-record/record-table/virtualization/hooks/useResetVirtualizationBecauseDataChanged';
+import { lastProcessedFieldMetadataUpdateComponentState } from '@/object-record/record-table/virtualization/states/lastProcessedFieldMetadataUpdateComponentState';
+import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+
+export const RecordTableVirtualizedFieldMetadataUpdateEffect = () => {
+  const { objectNameSingular } = useRecordTableContextOrThrow();
+
+  const { resetVirtualizationBecauseDataChanged } =
+    useResetVirtualizationBecauseDataChanged(objectNameSingular);
+
+  const visibleRecordFields = useRecoilComponentValue(
+    visibleRecordFieldsComponentSelector,
+  );
+
+  const lastFieldMetadataItemUpdate = useRecoilValue(
+    lastFieldMetadataItemUpdateState,
+  );
+
+  const [
+    lastProcessedFieldMetadataUpdate,
+    setLastProcessedFieldMetadataUpdate,
+  ] = useRecoilComponentState(lastProcessedFieldMetadataUpdateComponentState);
+
+  useEffect(() => {
+    if (!lastFieldMetadataItemUpdate) {
+      return;
+    }
+
+    if (
+      lastFieldMetadataItemUpdate.timestamp === lastProcessedFieldMetadataUpdate
+    ) {
+      return;
+    }
+
+    const isFieldInCurrentView = visibleRecordFields.some(
+      (field) =>
+        field.fieldMetadataItemId ===
+        lastFieldMetadataItemUpdate.fieldMetadataItemId,
+    );
+
+    if (isFieldInCurrentView) {
+      setLastProcessedFieldMetadataUpdate(
+        lastFieldMetadataItemUpdate.timestamp,
+      );
+      resetVirtualizationBecauseDataChanged();
+    }
+  }, [
+    lastFieldMetadataItemUpdate,
+    lastProcessedFieldMetadataUpdate,
+    setLastProcessedFieldMetadataUpdate,
+    visibleRecordFields,
+    resetVirtualizationBecauseDataChanged,
+  ]);
+
+  return <></>;
+};

packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableVirtualizedInitialDataLoadEffect.tsx

@@ -1,13 +1,14 @@
 import { useRecoilValue } from 'recoil';
 
+import { visibleRecordFieldsComponentSelector } from '@/object-record/record-field/states/visibleRecordFieldsComponentSelector';
 import { useRecordIndexTableFetchMore } from '@/object-record/record-index/hooks/useRecordIndexTableFetchMore';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 
-import { visibleRecordFieldsComponentSelector } from '@/object-record/record-field/states/visibleRecordFieldsComponentSelector';
 import { useTriggerInitialRecordTableDataLoad } from '@/object-record/record-table/virtualization/hooks/useTriggerInitialRecordTableDataLoad';
 import { isInitializingVirtualTableDataLoadingComponentState } from '@/object-record/record-table/virtualization/states/isInitializingVirtualTableDataLoadingComponentState';
 import { lastContextStoreVirtualizedViewIdComponentState } from '@/object-record/record-table/virtualization/states/lastContextStoreVirtualizedViewIdComponentState';
 import { lastContextStoreVirtualizedVisibleRecordFieldsComponentState } from '@/object-record/record-table/virtualization/states/lastContextStoreVirtualizedVisibleRecordFieldsComponentState';
+
 import { lastRecordTableQueryIdentifierComponentState } from '@/object-record/record-table/virtualization/states/lastRecordTableQueryIdentifierComponentState';
 import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
 import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';

packages/twenty-front/src/modules/object-record/record-table/virtualization/states/lastProcessedFieldMetadataUpdateComponentState.ts

@@ -0,0 +1,9 @@
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const lastProcessedFieldMetadataUpdateComponentState =
+  createComponentState<number | null>({
+    key: 'lastProcessedFieldMetadataUpdateComponentState',
+    componentInstanceContext: ContextStoreComponentInstanceContext,
+    defaultValue: null,
+  });