Improve editable field performances (#1182)

* [EditableField] improve performances

* remove FieldHotkeyScopeContext.ts

front/src/modules/ui/editable-field/components/EditableField.tsx

@@ -4,7 +4,6 @@ import { motion } from 'framer-motion';
 
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
-import { useBindFieldHotkeyScope } from '../hooks/useBindFieldHotkeyScope';
 import { useEditableField } from '../hooks/useEditableField';
 
 import { EditableFieldDisplayMode } from './EditableFieldDisplayMode';
@@ -74,7 +73,6 @@ type OwnProps = {
   displayModeContentOnly?: boolean;
   disableHoverEffect?: boolean;
   displayModeContent: React.ReactNode;
-  parentHotkeyScope?: HotkeyScope;
   customEditHotkeyScope?: HotkeyScope;
   isDisplayModeContentEmpty?: boolean;
   isDisplayModeFixHeight?: boolean;
@@ -89,7 +87,6 @@ export function EditableField({
   useEditButton,
   editModeContent,
   displayModeContent,
-  parentHotkeyScope,
   customEditHotkeyScope,
   disableHoverEffect,
   isDisplayModeContentEmpty,
@@ -100,11 +97,6 @@ export function EditableField({
 }: OwnProps) {
   const [isHovered, setIsHovered] = useState(false);
 
-  useBindFieldHotkeyScope({
-    customEditHotkeyScope,
-    parentHotkeyScope,
-  });
-
   function handleContainerMouseEnter() {
     setIsHovered(true);
   }
@@ -116,7 +108,7 @@ export function EditableField({
   const { isFieldInEditMode, openEditableField } = useEditableField();
 
   function handleDisplayModeClick() {
-    openEditableField();
+    openEditableField(customEditHotkeyScope);
   }
 
   const showEditButton = !isFieldInEditMode && isHovered && useEditButton;

front/src/modules/ui/editable-field/hooks/useBindFieldHotkeyScope.ts

@@ -1,75 +0,0 @@
-import { useEffect } from 'react';
-import { useRecoilCallback } from 'recoil';
-
-import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
-import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
-import { isSameHotkeyScope } from '@/ui/utilities/hotkey/utils/isSameHotkeyScope';
-import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
-import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
-import { getSnapshotScopedState } from '@/ui/utilities/recoil-scope/utils/getSnapshotScopedState';
-import { getSnapshotState } from '@/ui/utilities/recoil-scope/utils/getSnapshotState';
-
-import { customEditHotkeyScopeForFieldScopedState } from '../states/customEditHotkeyScopeForFieldScopedState';
-import { FieldContext } from '../states/FieldContext';
-import { parentHotkeyScopeForFieldScopedState } from '../states/parentHotkeyScopeForFieldScopedState';
-
-export function useBindFieldHotkeyScope({
-  customEditHotkeyScope,
-  parentHotkeyScope,
-}: {
-  customEditHotkeyScope?: HotkeyScope;
-  parentHotkeyScope?: HotkeyScope;
-}) {
-  const [customEditHotkeyScopeForField, setCustomEditHotkeyScopeForField] =
-    useRecoilScopedState(
-      customEditHotkeyScopeForFieldScopedState,
-      FieldContext,
-    );
-
-  const fieldContextScopeId = useContextScopeId(FieldContext);
-
-  useEffect(() => {
-    if (
-      customEditHotkeyScope &&
-      !isSameHotkeyScope(customEditHotkeyScope, customEditHotkeyScopeForField)
-    ) {
-      setCustomEditHotkeyScopeForField(customEditHotkeyScope);
-    }
-  }, [
-    customEditHotkeyScope,
-    customEditHotkeyScopeForField,
-    setCustomEditHotkeyScopeForField,
-  ]);
-
-  const setParentHotkeyScopeForField = useRecoilCallback(
-    ({ snapshot, set }) =>
-      (parentHotkeyScopeToSet: HotkeyScope | null | undefined) => {
-        const currentHotkeyScope = getSnapshotState({
-          snapshot,
-          state: currentHotkeyScopeState,
-        });
-
-        const parentHotkeyScopeForField = getSnapshotScopedState({
-          snapshot,
-          state: parentHotkeyScopeForFieldScopedState,
-          contextScopeId: fieldContextScopeId,
-        });
-
-        if (!parentHotkeyScopeToSet) {
-          set(
-            parentHotkeyScopeForFieldScopedState(fieldContextScopeId),
-            currentHotkeyScope,
-          );
-        } else if (
-          !isSameHotkeyScope(parentHotkeyScopeToSet, parentHotkeyScopeForField)
-        ) {
-          setParentHotkeyScopeForField(parentHotkeyScopeToSet);
-        }
-      },
-    [fieldContextScopeId],
-  );
-
-  useEffect(() => {
-    setParentHotkeyScopeForField(parentHotkeyScope);
-  }, [parentHotkeyScope, setParentHotkeyScopeForField]);
-}

front/src/modules/ui/editable-field/hooks/useEditableField.ts

@@ -1,10 +1,9 @@
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
-import { customEditHotkeyScopeForFieldScopedState } from '../states/customEditHotkeyScopeForFieldScopedState';
 import { FieldContext } from '../states/FieldContext';
 import { isFieldInEditModeScopedState } from '../states/isFieldInEditModeScopedState';
-import { parentHotkeyScopeForFieldScopedState } from '../states/parentHotkeyScopeForFieldScopedState';
 import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
 
 export function useEditableField() {
@@ -13,39 +12,29 @@ export function useEditableField() {
     FieldContext,
   );
 
-  const [customEditHotkeyScopeForField] = useRecoilScopedState(
+  const {
-    customEditHotkeyScopeForFieldScopedState,
+    setHotkeyScopeAndMemorizePreviousScope,
-    FieldContext,
+    goBackToPreviousHotkeyScope,
-  );
+  } = usePreviousHotkeyScope();
-
-  const [parentHotkeyScopeForField] = useRecoilScopedState(
-    parentHotkeyScopeForFieldScopedState,
-    FieldContext,
-  );
-
-  const setHotkeyScope = useSetHotkeyScope();
 
   function closeEditableField() {
     setIsFieldInEditMode(false);
 
-    if (parentHotkeyScopeForField) {
+    goBackToPreviousHotkeyScope();
-      setHotkeyScope(
-        parentHotkeyScopeForField.scope,
-        parentHotkeyScopeForField.customScopes,
-      );
-    }
   }
 
-  function openEditableField() {
+  function openEditableField(customEditHotkeyScopeForField?: HotkeyScope) {
     setIsFieldInEditMode(true);
 
     if (customEditHotkeyScopeForField) {
-      setHotkeyScope(
+      setHotkeyScopeAndMemorizePreviousScope(
         customEditHotkeyScopeForField.scope,
         customEditHotkeyScopeForField.customScopes,
       );
     } else {
-      setHotkeyScope(EditableFieldHotkeyScope.EditableField);
+      setHotkeyScopeAndMemorizePreviousScope(
+        EditableFieldHotkeyScope.EditableField,
+      );
     }
   }