Add tab hotkey on table page (#457)

* wip

* wip

* - Added scopes on useHotkeys
- Use new EditableCellV2
- Implemented Recoil Scoped State with specific context
- Implemented soft focus position
- Factorized open/close editable cell
- Removed editable relation old components
- Broke down entity table into multiple components
- Added Recoil Scope by CellContext
- Added Recoil Scope by RowContext

* First working version

* Use a new EditableCellSoftFocusMode

* Fixed initialize soft focus

* Fixed enter mode

* Added TODO

* Fix

* Fixes

* Fix tests

* Fix lint

* Fixes

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

@@ -1,19 +1,43 @@
-import { useCallback } from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilCallback } from 'recoil';
 
-import { useRecoilScopedState } from '@/ui/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { isSomeInputInEditModeState } from '@/ui/tables/states/isSomeInputInEditModeState';
 
 import { isEditModeScopedState } from '../states/isEditModeScopedState';
 
-export function useCloseEditableCell() {
-  const [, setIsSomeInputInEditMode] = useRecoilState(
-    isSomeInputInEditModeState,
-  );
+export function useEditableCell() {
   const [, setIsEditMode] = useRecoilScopedState(isEditModeScopedState);
 
-  return useCallback(() => {
-    setIsSomeInputInEditMode(false);
-    setIsEditMode(false);
-  }, [setIsEditMode, setIsSomeInputInEditMode]);
+  const closeEditableCell = useRecoilCallback(
+    ({ set }) =>
+      async () => {
+        setIsEditMode(false);
+
+        await new Promise((resolve) => setTimeout(resolve, 20));
+
+        set(isSomeInputInEditModeState, false);
+      },
+    [setIsEditMode],
+  );
+
+  const openEditableCell = useRecoilCallback(
+    ({ snapshot, set }) =>
+      () => {
+        const isSomeInputInEditMode = snapshot
+          .getLoadable(isSomeInputInEditModeState)
+          .valueOrThrow();
+
+        if (!isSomeInputInEditMode) {
+          set(isSomeInputInEditModeState, true);
+
+          setIsEditMode(true);
+        }
+      },
+    [setIsEditMode],
+  );
+
+  return {
+    closeEditableCell,
+    openEditableCell,
+  };
 }

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

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { CellContext } from '@/ui/tables/states/CellContext';
+import { currentColumnNumberScopedState } from '@/ui/tables/states/currentColumnNumberScopedState';
+import { currentRowNumberScopedState } from '@/ui/tables/states/currentRowNumberScopedState';
+import { isSoftFocusOnCellFamilyState } from '@/ui/tables/states/isSoftFocusOnCellFamilyState';
+import { RowContext } from '@/ui/tables/states/RowContext';
+import { TablePosition } from '@/ui/tables/types/TablePosition';
+
+export function useIsSoftFocusOnCurrentCell() {
+  const [currentRowNumber] = useRecoilScopedState(
+    currentRowNumberScopedState,
+    RowContext,
+  );
+
+  const [currentColumnNumber] = useRecoilScopedState(
+    currentColumnNumberScopedState,
+    CellContext,
+  );
+
+  const currentTablePosition: TablePosition = useMemo(
+    () => ({
+      column: currentColumnNumber,
+      row: currentRowNumber,
+    }),
+    [currentColumnNumber, currentRowNumber],
+  );
+
+  const isSoftFocusOnCell = useRecoilValue(
+    isSoftFocusOnCellFamilyState(currentTablePosition),
+  );
+
+  return isSoftFocusOnCell;
+}

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

@@ -0,0 +1,34 @@
+import { useCallback, useMemo } from 'react';
+
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { useSetSoftFocusPosition } from '@/ui/tables/hooks/useSetSoftFocusPosition';
+import { CellContext } from '@/ui/tables/states/CellContext';
+import { currentColumnNumberScopedState } from '@/ui/tables/states/currentColumnNumberScopedState';
+import { currentRowNumberScopedState } from '@/ui/tables/states/currentRowNumberScopedState';
+import { RowContext } from '@/ui/tables/states/RowContext';
+import { TablePosition } from '@/ui/tables/types/TablePosition';
+
+export function useSetSoftFocusOnCurrentCell() {
+  const setSoftFocusPosition = useSetSoftFocusPosition();
+  const [currentRowNumber] = useRecoilScopedState(
+    currentRowNumberScopedState,
+    RowContext,
+  );
+
+  const [currentColumnNumber] = useRecoilScopedState(
+    currentColumnNumberScopedState,
+    CellContext,
+  );
+
+  const currentTablePosition: TablePosition = useMemo(
+    () => ({
+      column: currentColumnNumber,
+      row: currentRowNumber,
+    }),
+    [currentColumnNumber, currentRowNumber],
+  );
+
+  return useCallback(() => {
+    setSoftFocusPosition(currentTablePosition);
+  }, [setSoftFocusPosition, currentTablePosition]);
+}