Fix/table rerenders (#609)

* Fixed top bar rerenders

* Fixed rerender on editable cell

* Fix lint

* asd

* Fix

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/components/editable-cell/EditableCell.tsx

@@ -2,12 +2,9 @@ import { ReactElement } from 'react';
 import styled from '@emotion/styled';
 
 import { HotkeysScope } from '@/hotkeys/types/internal/HotkeysScope';
-import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 
 import { useCurrentCellEditMode } from './hooks/useCurrentCellEditMode';
-import { useEditableCell } from './hooks/useEditableCell';
 import { useIsSoftFocusOnCurrentCell } from './hooks/useIsSoftFocusOnCurrentCell';
-import { useSetSoftFocusOnCurrentCell } from './hooks/useSetSoftFocusOnCurrentCell';
 import { EditableCellDisplayMode } from './EditableCellDisplayMode';
 import { EditableCellEditMode } from './EditableCellEditMode';
 import { EditableCellSoftFocusMode } from './EditableCellSoftFocusMode';
@@ -40,33 +37,10 @@ export function EditableCell({
 }: OwnProps) {
   const { isCurrentCellInEditMode } = useCurrentCellEditMode();
 
-  const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
-
-  const { openEditableCell } = useEditableCell();
-
   const hasSoftFocus = useIsSoftFocusOnCurrentCell();
 
-  // TODO: we might have silent problematic behavior because of the setTimeout in openEditableCell, investigate
-  // Maybe we could build a switchEditableCell to handle the case where we go from one cell to another.
-  // See https://github.com/twentyhq/twenty/issues/446
-  function handleOnClick() {
-    if (isCurrentCellInEditMode) {
-      return;
-    }
-
-    if (hasSoftFocus) {
-      openEditableCell(
-        editHotkeysScope ?? {
-          scope: InternalHotkeysScope.CellEditMode,
-        },
-      );
-    } else {
-      setSoftFocusOnCurrentCell();
-    }
-  }
-
   return (
-    <CellBaseContainer onClick={handleOnClick}>
+    <CellBaseContainer>
       {isCurrentCellInEditMode ? (
         <EditableCellEditMode
           editModeHorizontalAlign={editModeHorizontalAlign}

front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 
-import { useIsSoftFocusOnCurrentCell } from './hooks/useIsSoftFocusOnCurrentCell';
+import { useSetSoftFocusOnCurrentCell } from './hooks/useSetSoftFocusOnCurrentCell';
 
 type Props = {
-  softFocus: boolean;
+  softFocus?: boolean;
 };
 
 export const EditableCellNormalModeOuterContainer = styled.div<Props>`
@@ -35,10 +35,14 @@ export const EditableCellNormalModeInnerContainer = styled.div`
 export function EditableCellDisplayMode({
   children,
 }: React.PropsWithChildren<unknown>) {
-  const hasSoftFocus = useIsSoftFocusOnCurrentCell();
+  const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
+
+  function handleOnClick() {
+    setSoftFocusOnCurrentCell();
+  }
 
   return (
-    <EditableCellNormalModeOuterContainer softFocus={hasSoftFocus}>
+    <EditableCellNormalModeOuterContainer onClick={handleOnClick}>
       <EditableCellNormalModeInnerContainer>
         {children}
       </EditableCellNormalModeInnerContainer>

front/src/modules/ui/components/editable-cell/EditableCellSoftFocusMode.tsx

@@ -6,25 +6,32 @@ import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysSc
 import { isNonTextWritingKey } from '@/utils/hotkeys/isNonTextWritingKey';
 
 import { useEditableCell } from './hooks/useEditableCell';
-import { EditableCellDisplayMode } from './EditableCellDisplayMode';
+import {
+  EditableCellNormalModeInnerContainer,
+  EditableCellNormalModeOuterContainer,
+} from './EditableCellDisplayMode';
 
 export function EditableCellSoftFocusMode({
   children,
   editHotkeysScope,
 }: React.PropsWithChildren<{ editHotkeysScope?: HotkeysScope }>) {
-  const { closeEditableCell, openEditableCell } = useEditableCell();
+  const { openEditableCell } = useEditableCell();
+
+  function openEditMode() {
+    openEditableCell(
+      editHotkeysScope ?? {
+        scope: InternalHotkeysScope.CellEditMode,
+      },
+    );
+  }
 
   useScopedHotkeys(
     'enter',
     () => {
-      openEditableCell(
-        editHotkeysScope ?? {
-          scope: InternalHotkeysScope.CellEditMode,
-        },
-      );
+      openEditMode();
     },
     InternalHotkeysScope.TableSoftFocus,
-    [closeEditableCell, editHotkeysScope],
+    [openEditMode],
   );
 
   useScopedHotkeys(
@@ -39,18 +46,27 @@ export function EditableCellSoftFocusMode({
         return;
       }
 
-      openEditableCell(
-        editHotkeysScope ?? {
-          scope: InternalHotkeysScope.CellEditMode,
-        },
-      );
+      openEditMode();
     },
     InternalHotkeysScope.TableSoftFocus,
-    [openEditableCell, editHotkeysScope],
+    [openEditMode],
     {
       preventDefault: false,
     },
   );
 
-  return <EditableCellDisplayMode>{children}</EditableCellDisplayMode>;
+  function handleClick() {
+    openEditMode();
+  }
+
+  return (
+    <EditableCellNormalModeOuterContainer
+      onClick={handleClick}
+      softFocus={true}
+    >
+      <EditableCellNormalModeInnerContainer>
+        {children}
+      </EditableCellNormalModeInnerContainer>
+    </EditableCellNormalModeOuterContainer>
+  );
 }

front/src/modules/ui/components/editable-cell/hooks/useSetSoftFocusOnCurrentCell.ts

@@ -1,5 +1,5 @@
-import { useCallback, useMemo } from 'react';
-import { useRecoilState } from 'recoil';
+import { useMemo } from 'react';
+import { useRecoilCallback } from 'recoil';
 
 import { useSetHotkeysScope } from '@/hotkeys/hooks/useSetHotkeysScope';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
@@ -14,6 +14,7 @@ import { CellPosition } from '@/ui/tables/types/CellPosition';
 
 export function useSetSoftFocusOnCurrentCell() {
   const setSoftFocusPosition = useSetSoftFocusPosition();
+
   const [currentRowNumber] = useRecoilScopedState(
     currentRowNumberScopedState,
     RowContext,
@@ -32,18 +33,17 @@ export function useSetSoftFocusOnCurrentCell() {
     [currentColumnNumber, currentRowNumber],
   );
 
-  const [, setIsSoftFocusActive] = useRecoilState(isSoftFocusActiveState);
-
   const setHotkeysScope = useSetHotkeysScope();
 
-  return useCallback(() => {
-    setSoftFocusPosition(currentTablePosition);
-    setIsSoftFocusActive(true);
-    setHotkeysScope(InternalHotkeysScope.TableSoftFocus);
-  }, [
-    setSoftFocusPosition,
-    currentTablePosition,
-    setIsSoftFocusActive,
-    setHotkeysScope,
-  ]);
+  return useRecoilCallback(
+    ({ set }) =>
+      () => {
+        setSoftFocusPosition(currentTablePosition);
+
+        set(isSoftFocusActiveState, true);
+
+        setHotkeysScope(InternalHotkeysScope.TableSoftFocus);
+      },
+    [setHotkeysScope, currentTablePosition, setSoftFocusPosition],
+  );
 }