mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Optimize table loading (#866)

Browse Source 
* wip

* wip

* Ok

* Deleted unused code

* Fixed lint

* Minor fixes

* Minor fixes

* Minor Fixes

* Minor merge fixes

* Ok

* Fix storybook tests

* Removed console.log

* Fix login

* asd

* Fixed storybook

* Added await

* Fixed await

* Added sleep for failing test

* Fix sleep

* Fix test

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2023-07-25 20:00:15 +02:00
committed by GitHub
parent c2d6abde65
commit a2ccb643ff
85 changed files with 846 additions and 904 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
front/src/modules/ui/table/editable-cell/hooks/useCurrentCellPosition.ts
View File

@ -1,23 +1,12 @@
import { useMemo } from 'react';
import { useContext, useMemo } from 'react';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { CellContext } from '../../states/CellContext';
import { currentColumnNumberScopedState } from '../../states/currentColumnNumberScopedState';
import { currentRowNumberScopedState } from '../../states/currentRowNumberScopedState';
import { RowContext } from '../../states/RowContext';
import { ColumnIndexContext } from '../../states/ColumnIndexContext';
import { RowIndexContext } from '../../states/RowIndexContext';
import { CellPosition } from '../../types/CellPosition';
export function useCurrentCellPosition() {
const [currentRowNumber] = useRecoilScopedState(
currentRowNumberScopedState,
RowContext,
);
const [currentColumnNumber] = useRecoilScopedState(
currentColumnNumberScopedState,
CellContext,
);
const currentRowNumber = useContext(RowIndexContext);
const currentColumnNumber = useContext(ColumnIndexContext);
const currentCellPosition: CellPosition = useMemo(
() => ({

16
front/src/modules/ui/table/editable-cell/hooks/useEditableCell.ts
View File

@ -1,15 +1,13 @@
import { useContext } from 'react';
import { useRecoilCallback } from 'recoil';
import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
import { useContextScopeId } from '../../../recoil-scope/hooks/useContextScopeId';
import { getSnapshotScopedState } from '../../../recoil-scope/utils/getSnapshotScopedState';
import { useCloseCurrentCellInEditMode } from '../../hooks/useClearCellInEditMode';
import { CellContext } from '../../states/CellContext';
import { CellHotkeyScopeContext } from '../../states/CellHotkeyScopeContext';
import { isSomeInputInEditModeState } from '../../states/isSomeInputInEditModeState';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { customCellHotkeyScopeScopedState } from '../states/customCellHotkeyScopeScopedState';
import { useCurrentCellEditMode } from './useCurrentCellEditMode';
@ -24,7 +22,7 @@ export function useEditableCell() {
const closeCurrentCellInEditMode = useCloseCurrentCellInEditMode();
const cellContextId = useContextScopeId(CellContext);
const customCellHotkeyScope = useContext(CellHotkeyScopeContext);
function closeEditableCell() {
closeCurrentCellInEditMode();
@ -38,12 +36,6 @@ export function useEditableCell() {
.getLoadable(isSomeInputInEditModeState)
.valueOrThrow();
const customCellHotkeyScope = getSnapshotScopedState({
snapshot,
state: customCellHotkeyScopeScopedState,
contextScopeId: cellContextId,
});
if (!isSomeInputInEditMode) {
set(isSomeInputInEditModeState, true);
@ -62,7 +54,7 @@ export function useEditableCell() {
}
}
},
[setCurrentCellInEditMode, setHotkeyScope, cellContextId],
[setCurrentCellInEditMode, setHotkeyScope, customCellHotkeyScope],
);
return {

2
front/src/modules/ui/table/editable-cell/hooks/useRegisterCloseCellHandlers.ts
View File

@ -14,6 +14,7 @@ export function useRegisterCloseCellHandlers(
) {
const { closeEditableCell } = useEditableCell();
const { isCurrentCellInEditMode } = useCurrentCellEditMode();
useListenClickOutside({
refs: [wrapperRef],
callback: (event) => {
@ -26,6 +27,7 @@ export function useRegisterCloseCellHandlers(
}
},
});
const { moveRight, moveLeft, moveDown } = useMoveSoftFocus();
useScopedHotkeys(

23
front/src/modules/ui/table/editable-cell/hooks/useRegisterEditableCell.ts
View File

@ -1,23 +0,0 @@
import { useEffect } from 'react';
import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
import { useRecoilScopedState } from '../../../recoil-scope/hooks/useRecoilScopedState';
import { CellContext } from '../../states/CellContext';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { customCellHotkeyScopeScopedState } from '../states/customCellHotkeyScopeScopedState';
const DEFAULT_CELL_SCOPE: HotkeyScope = {
scope: TableHotkeyScope.CellEditMode,
};
export function useRegisterEditableCell(cellHotkeyScope?: HotkeyScope) {
const [, setCustomCellHotkeyScope] = useRecoilScopedState(
customCellHotkeyScopeScopedState,
CellContext,
);
useEffect(() => {
setCustomCellHotkeyScope(cellHotkeyScope ?? DEFAULT_CELL_SCOPE);
}, [cellHotkeyScope, setCustomCellHotkeyScope]);
}

31
front/src/modules/ui/table/editable-cell/hooks/useSetSoftFocusOnCurrentCell.ts
View File

@ -1,50 +1,29 @@
import { useMemo } from 'react';
import { useRecoilCallback } from 'recoil';
import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { useSetSoftFocusPosition } from '../../hooks/useSetSoftFocusPosition';
import { CellContext } from '../../states/CellContext';
import { currentColumnNumberScopedState } from '../../states/currentColumnNumberScopedState';
import { currentRowNumberScopedState } from '../../states/currentRowNumberScopedState';
import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState';
import { RowContext } from '../../states/RowContext';
import { CellPosition } from '../../types/CellPosition';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useCurrentCellPosition } from './useCurrentCellPosition';
export function useSetSoftFocusOnCurrentCell() {
const setSoftFocusPosition = useSetSoftFocusPosition();
const [currentRowNumber] = useRecoilScopedState(
currentRowNumberScopedState,
RowContext,
);
const [currentColumnNumber] = useRecoilScopedState(
currentColumnNumberScopedState,
CellContext,
);
const currentTablePosition: CellPosition = useMemo(
() => ({
column: currentColumnNumber,
row: currentRowNumber,
}),
[currentColumnNumber, currentRowNumber],
);
const currentCellPosition = useCurrentCellPosition();
const setHotkeyScope = useSetHotkeyScope();
return useRecoilCallback(
({ set }) =>
() => {
setSoftFocusPosition(currentTablePosition);
setSoftFocusPosition(currentCellPosition);
set(isSoftFocusActiveState, true);
setHotkeyScope(TableHotkeyScope.TableSoftFocus);
},
[setHotkeyScope, currentTablePosition, setSoftFocusPosition],
[setHotkeyScope, currentCellPosition, setSoftFocusPosition],
);
}