From 3b7901b49a452213fd84a11279148e8263507439 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Tue, 25 Jun 2024 15:53:31 +0200 Subject: [PATCH] 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. --- .../useCloseCurrentTableCellInEditMode.ts | 7 -- .../internal/useMoveEditModeToCellPosition.ts | 14 --- .../hooks/internal/useSetSoftFocusPosition.ts | 14 --- .../components/RecordTableCellContainer.tsx | 87 +++++++------------ .../RecordTableCellSoftFocusMode.tsx | 6 -- 5 files changed, 33 insertions(+), 95 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode.ts index b894046ce..a9976aa05 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode.ts +++ b/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], diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useMoveEditModeToCellPosition.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useMoveEditModeToCellPosition.ts index c51be2fa6..02e04a259 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useMoveEditModeToCellPosition.ts +++ b/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], diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetSoftFocusPosition.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetSoftFocusPosition.ts index d645c7bb9..edf8f7a90 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetSoftFocusPosition.ts +++ b/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 }, - ), - ); }; }, [ diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx index 3ef55faf1..8b817cd26 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx +++ b/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( - RecordTableRowContext, + const { isSelected, recordId } = useContext(RecordTableRowContext); + + const { onMoveSoftFocusToCell, onContextMenu, onCellMouseEnter } = + useContext(RecordTableContext); + + const tableScopeId = useAvailableScopeIdOrThrow( + RecordTableScopeInternalContext, + getScopeIdOrUndefinedFromComponentId(), ); - const { isLabelIdentifier } = useContext(FieldContext); - const { onContextMenu, onCellMouseEnter } = useContext(RecordTableContext); - const shouldBeInitiallyInEditMode = - isPendingRow === true && isLabelIdentifier; + const isTableCellInEditModeFamilyState = extractComponentFamilyState( + isTableCellInEditModeComponentFamilyState, + tableScopeId, + ); - const [hasSoftFocus, setHasSoftFocus] = useState(false); - const [isInEditMode, setIsInEditMode] = useState(shouldBeInitiallyInEditMode); + const isSoftFocusOnTableCellFamilyState = extractComponentFamilyState( + 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 ( { closeCurrentTableCell(); - document.dispatchEvent( - new CustomEvent(`soft-focus-move-${row}:${column}`, { detail: false }), - ); }, });