Removed performance optimization and put back previous system with recoil states for edit mode and soft focus to avoid side effects. (#6019)

Fixes https://github.com/twentyhq/twenty/issues/6016

This was another side effect of the optimization made on
RecordTableCellContainer to avoid using recoil states, but which causes
too many unpredictable side effects.

I just put back the previous system which works well. We'll see how to
optimize it again later.

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

@@ -21,13 +21,6 @@ export const useCloseCurrentTableCellInEditMode = (recordTableId?: string) => {
           isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
           false,
         );
-
-        document.dispatchEvent(
-          new CustomEvent(
-            `edit-mode-change-${currentTableCellInEditModePosition.row}:${currentTableCellInEditModePosition.column}`,
-            { detail: false },
-          ),
-        );
       };
     },
     [currentTableCellInEditModePositionState, isTableCellInEditModeFamilyState],

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

@@ -24,23 +24,9 @@ export const useMoveEditModeToTableCellPosition = (recordTableId?: string) => {
           false,
         );
 
-        document.dispatchEvent(
-          new CustomEvent(
-            `edit-mode-change-${currentTableCellInEditModePosition.row}:${currentTableCellInEditModePosition.column}`,
-            { detail: false },
-          ),
-        );
-
         set(currentTableCellInEditModePositionState, newPosition);
 
         set(isTableCellInEditModeFamilyState(newPosition), true);
-
-        document.dispatchEvent(
-          new CustomEvent(
-            `edit-mode-change-${newPosition.row}:${newPosition.column}`,
-            { detail: true },
-          ),
-        );
       };
     },
     [currentTableCellInEditModePositionState, isTableCellInEditModeFamilyState],

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

@@ -24,23 +24,9 @@ export const useSetSoftFocusPosition = (recordTableId?: string) => {
 
         set(isSoftFocusOnTableCellFamilyState(currentPosition), false);
 
-        document.dispatchEvent(
-          new CustomEvent(
-            `soft-focus-move-${currentPosition.row}:${currentPosition.column}`,
-            { detail: false },
-          ),
-        );
-
         set(softFocusPositionState, newPosition);
 
         set(isSoftFocusOnTableCellFamilyState(newPosition), true);
-
-        document.dispatchEvent(
-          new CustomEvent(
-            `soft-focus-move-${newPosition.row}:${newPosition.column}`,
-            { detail: true },
-          ),
-        );
       };
     },
     [

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

@@ -1,14 +1,20 @@
-import React, { ReactElement, useContext, useEffect, useState } from 'react';
+import React, { ReactElement, useContext } from 'react';
 import { clsx } from 'clsx';
+import { useRecoilValue } from 'recoil';
 
-import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
 import { RecordTableCellSoftFocusMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode';
 import { useCurrentTableCellPosition } from '@/object-record/record-table/record-table-cell/hooks/useCurrentCellPosition';
 import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
+import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
+import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
+import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
+import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState';
 
 import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
@@ -40,20 +46,36 @@ export const RecordTableCellContainer = ({
   const { setIsFocused } = useFieldFocus();
   const { openTableCell } = useOpenRecordTableCellFromCell();
 
-  const { isSelected, recordId, isPendingRow } = useContext(
+  const { isSelected, recordId } = useContext(RecordTableRowContext);
-    RecordTableRowContext,
+
+  const { onMoveSoftFocusToCell, onContextMenu, onCellMouseEnter } =
+    useContext(RecordTableContext);
+
+  const tableScopeId = useAvailableScopeIdOrThrow(
+    RecordTableScopeInternalContext,
+    getScopeIdOrUndefinedFromComponentId(),
   );
-  const { isLabelIdentifier } = useContext(FieldContext);
-  const { onContextMenu, onCellMouseEnter } = useContext(RecordTableContext);
 
-  const shouldBeInitiallyInEditMode =
+  const isTableCellInEditModeFamilyState = extractComponentFamilyState(
-    isPendingRow === true && isLabelIdentifier;
+    isTableCellInEditModeComponentFamilyState,
+    tableScopeId,
+  );
 
-  const [hasSoftFocus, setHasSoftFocus] = useState(false);
+  const isSoftFocusOnTableCellFamilyState = extractComponentFamilyState(
-  const [isInEditMode, setIsInEditMode] = useState(shouldBeInitiallyInEditMode);
+    isSoftFocusOnTableCellComponentFamilyState,
+    tableScopeId,
+  );
 
   const cellPosition = useCurrentTableCellPosition();
 
+  const isInEditMode = useRecoilValue(
+    isTableCellInEditModeFamilyState(cellPosition),
+  );
+
+  const hasSoftFocus = useRecoilValue(
+    isSoftFocusOnTableCellFamilyState(cellPosition),
+  );
+
   const handleContextMenu = (event: React.MouseEvent) => {
     onContextMenu(event, recordId);
   };
@@ -67,59 +89,16 @@ export const RecordTableCellContainer = ({
   };
 
   const handleContainerMouseLeave = () => {
-    setHasSoftFocus(false);
     setIsFocused(false);
   };
 
   const handleContainerClick = () => {
     if (!hasSoftFocus) {
+      onMoveSoftFocusToCell(cellPosition);
       openTableCell();
     }
   };
 
-  useEffect(() => {
-    const customEventListener = (event: any) => {
-      event.stopPropagation();
-
-      const newHasSoftFocus = event.detail;
-
-      setHasSoftFocus(newHasSoftFocus);
-      setIsFocused(newHasSoftFocus);
-    };
-
-    document.addEventListener(
-      `soft-focus-move-${cellPosition.row}:${cellPosition.column}`,
-      customEventListener,
-    );
-
-    return () => {
-      document.removeEventListener(
-        `soft-focus-move-${cellPosition.row}:${cellPosition.column}`,
-        customEventListener,
-      );
-    };
-  }, [cellPosition, setIsFocused]);
-
-  useEffect(() => {
-    const customEventListener = (event: any) => {
-      const newIsInEditMode = event.detail;
-
-      setIsInEditMode(newIsInEditMode);
-    };
-
-    document.addEventListener(
-      `edit-mode-change-${cellPosition.row}:${cellPosition.column}`,
-      customEventListener,
-    );
-
-    return () => {
-      document.removeEventListener(
-        `edit-mode-change-${cellPosition.row}:${cellPosition.column}`,
-        customEventListener,
-      );
-    };
-  }, [cellPosition]);
-
   return (
     <td
       className={clsx({

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

@@ -13,7 +13,6 @@ import { RecordTableCellContext } from '@/object-record/record-table/contexts/Re
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
 import { useCloseCurrentTableCellInEditMode } from '@/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode';
 import { RecordTableCellButton } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton';
-import { useCurrentTableCellPosition } from '@/object-record/record-table/record-table-cell/hooks/useCurrentCellPosition';
 import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
 import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@@ -130,15 +129,10 @@ export const RecordTableCellSoftFocusMode = ({
     */
   };
 
-  const { column, row } = useCurrentTableCellPosition();
-
   useListenClickOutside({
     refs: [scrollRef],
     callback: () => {
       closeCurrentTableCell();
-      document.dispatchEvent(
-        new CustomEvent(`soft-focus-move-${row}:${column}`, { detail: false }),
-      );
     },
   });