admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor recoil v4 (#3266)

Browse Source 
* Refactor recoil v4

* Fix ci
This commit is contained in:
Charles Bochet
2024-01-05 19:18:22 +01:00
committed by GitHub
parent 8455e15443
commit 96264e264c
140 changed files with 467 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext.ts
View File

@ -1,7 +1,7 @@
import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
type DropdownScopeInternalContextProps = ScopedStateKey;
type DropdownScopeInternalContextProps = StateScopeMapKey;
export const DropdownScopeInternalContext =
createScopeInternalContext<DropdownScopeInternalContextProps>();

4
packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyScopeScopedState.ts
View File

@ -1,7 +1,7 @@
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
export const dropdownHotkeyScopeScopedState = createScopedState<
export const dropdownHotkeyScopeScopedState = createStateScopeMap<
HotkeyScope | null | undefined
>({
key: 'dropdownHotkeyScopeScopedState',

12
packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthScopedState.ts
View File

@ -1,6 +1,8 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
export const dropdownWidthScopedState = createScopedState<number | undefined>({
key: 'dropdownWidthScopedState',
defaultValue: 160,
});
export const dropdownWidthScopedState = createStateScopeMap<number | undefined>(
{
key: 'dropdownWidthScopedState',
defaultValue: 160,
},
);

4
packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenScopedState.ts
View File

@ -1,6 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
export const isDropdownOpenScopedState = createScopedState<boolean>({
export const isDropdownOpenScopedState = createStateScopeMap<boolean>({
key: 'isDropdownOpenScopedState',
defaultValue: false,
});

4
packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableItem.tsx
View File

@ -14,9 +14,9 @@ export const SelectableItem = ({
children,
className,
}: SelectableItemProps) => {
const { isSelectedItemIdFamilyState } = useSelectableList();
const { isSelectedItemIdSelector } = useSelectableList();
const isSelectedItemId = useRecoilValue(isSelectedItemIdFamilyState(itemId));
const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector(itemId));
const scrollRef = useRef<HTMLDivElement>(null);

57
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.tsx
View File

@ -1,9 +1,9 @@
import { useRecoilCallback } from 'recoil';
import { Key } from 'ts-key-enum';
import { useSelectableListScopedState } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState';
import { getSelectableListScopeInjectors } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopeInjectors';
import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
type Direction = 'up' | 'down' | 'left' | 'right';
@ -27,27 +27,22 @@ export const useSelectableListHotKeys = (
}
};
const { injectSnapshotValueWithSelectableListScopeId } =
useSelectableListScopedState({
selectableListScopeId: scopeId,
});
const {
selectedItemIdState,
selectableItemIdsState,
isSelectedItemIdSelector,
selectableListOnEnterState,
} = useSelectableListStates({
selectableListScopeId: scopeId,
});
const handleSelect = useRecoilCallback(
({ snapshot, set }) =>
(direction: Direction) => {
const {
selectedItemIdScopeInjector,
selectableItemIdsScopeInjector,
isSelectedItemIdFamilyScopeInjector,
} = getSelectableListScopeInjectors();
const selectedItemId = injectSnapshotValueWithSelectableListScopeId(
const selectedItemId = getSnapshotValue(snapshot, selectedItemIdState);
const selectableItemIds = getSnapshotValue(
snapshot,
selectedItemIdScopeInjector,
);
const selectableItemIds = injectSnapshotValueWithSelectableListScopeId(
snapshot,
selectableItemIdsScopeInjector,
selectableItemIdsState,
);
const currentPosition = findPosition(selectableItemIds, selectedItemId);
@ -107,19 +102,16 @@ export const useSelectableListHotKeys = (
if (selectedItemId !== nextId) {
if (nextId) {
set(isSelectedItemIdFamilyScopeInjector(scopeId, nextId), true);
set(selectedItemIdScopeInjector(scopeId), nextId);
set(isSelectedItemIdSelector(nextId), true);
set(selectedItemIdState, nextId);
}
if (selectedItemId) {
set(
isSelectedItemIdFamilyScopeInjector(scopeId, selectedItemId),
false,
);
set(isSelectedItemIdSelector(selectedItemId), false);
}
}
},
[injectSnapshotValueWithSelectableListScopeId, scopeId],
[isSelectedItemIdSelector, selectableItemIdsState, selectedItemIdState],
);
useScopedHotkeys(Key.ArrowUp, () => handleSelect('up'), hotkeyScope, []);
@ -140,25 +132,20 @@ export const useSelectableListHotKeys = (
useRecoilCallback(
({ snapshot }) =>
() => {
const {
selectedItemIdScopeInjector,
selectableListOnEnterScopeInjector,
} = getSelectableListScopeInjectors();
const selectedItemId = injectSnapshotValueWithSelectableListScopeId(
const selectedItemId = getSnapshotValue(
snapshot,
selectedItemIdScopeInjector,
selectedItemIdState,
);
const onEnter = injectSnapshotValueWithSelectableListScopeId(
const onEnter = getSnapshotValue(
snapshot,
selectableListOnEnterScopeInjector,
selectableListOnEnterState,
);
if (selectedItemId) {
onEnter?.(selectedItemId);
}
},
[injectSnapshotValueWithSelectableListScopeId],
[selectableListOnEnterState, selectedItemIdState],
),
hotkeyScope,
[],

32
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState.ts
View File

@ -1,32 +0,0 @@
import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { useScopedState } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState';
type UseSelectableListScopedStatesProps = {
selectableListScopeId?: string;
};
export const useSelectableListScopedState = ({
selectableListScopeId,
}: UseSelectableListScopedStatesProps) => {
const scopeId = useAvailableScopeIdOrThrow(
SelectableListScopeInternalContext,
selectableListScopeId,
);
const {
getScopedState,
getScopedFamilyState,
getScopedSnapshotValue,
getScopedFamilySnapshotValue,
} = useScopedState(scopeId);
return {
scopeId,
injectStateWithSelectableListScopeId: getScopedState,
injectFamilyStateWithSelectableListScopeId: getScopedFamilyState,
injectSnapshotValueWithSelectableListScopeId: getScopedSnapshotValue,
injectFamilySnapshotValueWithSelectableListScopeId:
getScopedFamilySnapshotValue,
};
};

35
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListStates.ts Normal file
View File

@ -0,0 +1,35 @@
import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
import { selectableItemIdsStateScopeMap } from '@/ui/layout/selectable-list/states/selectableItemIdsStateScopeMap';
import { selectableListOnEnterStateScopeMap } from '@/ui/layout/selectable-list/states/selectableListOnEnterStateScopeMap';
import { selectedItemIdStateScopeMap } from '@/ui/layout/selectable-list/states/selectedItemIdStateScopeMap';
import { isSelectedItemIdFamilySelectorScopeMap } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdFamilySelectorScopeMap';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { getFamilyState } from '@/ui/utilities/recoil-scope/utils/getFamilyState';
import { getState } from '@/ui/utilities/recoil-scope/utils/getState';
type useSelectableListStatesProps = {
selectableListScopeId?: string;
};
export const useSelectableListStates = ({
selectableListScopeId,
}: useSelectableListStatesProps) => {
const scopeId = useAvailableScopeIdOrThrow(
SelectableListScopeInternalContext,
selectableListScopeId,
);
return {
scopeId,
isSelectedItemIdSelector: getFamilyState(
isSelectedItemIdFamilySelectorScopeMap,
scopeId,
),
selectableItemIdsState: getState(selectableItemIdsStateScopeMap, scopeId),
selectableListOnEnterState: getState(
selectableListOnEnterStateScopeMap,
scopeId,
),
selectedItemIdState: getState(selectedItemIdStateScopeMap, scopeId),
};
};

34
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts
View File

@ -1,38 +1,24 @@
import { useResetRecoilState, useSetRecoilState } from 'recoil';
import { useSelectableListScopedState } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState';
import { getSelectableListScopeInjectors } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopeInjectors';
import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates';
export const useSelectableList = (selectableListId?: string) => {
const {
injectStateWithSelectableListScopeId,
injectFamilyStateWithSelectableListScopeId,
scopeId,
} = useSelectableListScopedState({
selectableItemIdsState,
selectableListOnEnterState,
isSelectedItemIdSelector,
selectedItemIdState,
} = useSelectableListStates({
selectableListScopeId: selectableListId,
});
const {
selectedItemIdScopeInjector,
selectableItemIdsScopeInjector,
selectableListOnEnterScopeInjector,
isSelectedItemIdFamilyScopeInjector,
} = getSelectableListScopeInjectors();
const setSelectableItemIds = useSetRecoilState(
injectStateWithSelectableListScopeId(selectableItemIdsScopeInjector),
);
const setSelectableItemIds = useSetRecoilState(selectableItemIdsState);
const setSelectableListOnEnter = useSetRecoilState(
injectStateWithSelectableListScopeId(selectableListOnEnterScopeInjector),
selectableListOnEnterState,
);
const isSelectedItemIdFamilyState =
injectFamilyStateWithSelectableListScopeId(
isSelectedItemIdFamilyScopeInjector,
);
const resetSelectedItemIdState = useResetRecoilState(
injectStateWithSelectableListScopeId(selectedItemIdScopeInjector),
);
const resetSelectedItemIdState = useResetRecoilState(selectedItemIdState);
const resetSelectedItem = () => {
resetSelectedItemIdState();
@ -42,7 +28,7 @@ export const useSelectableList = (selectableListId?: string) => {
selectableListId: scopeId,
setSelectableItemIds,
isSelectedItemIdFamilyState,
isSelectedItemIdSelector,
setSelectableListOnEnter,
resetSelectedItem,
};

4
packages/twenty-front/src/modules/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext.ts
View File

@ -1,7 +1,7 @@
import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
type SelectableListScopeInternalContextProps = ScopedStateKey;
type SelectableListScopeInternalContextProps = StateScopeMapKey;
export const SelectableListScopeInternalContext =
createScopeInternalContext<SelectableListScopeInternalContextProps>();

9
packages/twenty-front/src/modules/ui/layout/selectable-list/states/isSelectedItemIdFamilyStateScopeMap.ts Normal file
View File

@ -0,0 +1,9 @@
import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';
export const isSelectedItemIdFamilyStateScopeMap = createFamilyStateScopeMap<
boolean,
string
>({
key: 'isSelectedItemIdMapScopedFamilyState',
defaultValue: false,
});

9
packages/twenty-front/src/modules/ui/layout/selectable-list/states/isSelectedItemIdMapScopedFamilyState.ts
View File

@ -1,9 +0,0 @@
import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
export const isSelectedItemIdMapScopedFamilyState = createScopedFamilyState<
boolean,
string
>({
key: 'isSelectedItemIdMapScopedFamilyState',
defaultValue: false,
});

6
packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableItemIdsScopedState.ts
View File

@ -1,6 +0,0 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const selectableItemIdsScopedState = createScopedState<string[][]>({
key: 'selectableItemIdsScopedState',
defaultValue: [[]],
});

6
packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableItemIdsStateScopeMap.ts Normal file
View File

@ -0,0 +1,6 @@
import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
export const selectableItemIdsStateScopeMap = createStateScopeMap<string[][]>({
key: 'selectableItemIdsScopedState',
defaultValue: [[]],
});

8
packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableListOnEnterScopedState.ts
View File

@ -1,8 +0,0 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const selectableListOnEnterScopedState = createScopedState<
((itemId: string) => void) | undefined
>({
key: 'selectableListOnEnterScopedState',
defaultValue: undefined,
});

8
packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableListOnEnterStateScopeMap.ts Normal file
View File

@ -0,0 +1,8 @@
import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
export const selectableListOnEnterStateScopeMap = createStateScopeMap<
((itemId: string) => void) | undefined
>({
key: 'selectableListOnEnterScopedState',
defaultValue: undefined,
});

6
packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectedItemIdScopedState.ts
View File

@ -1,6 +0,0 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const selectedItemIdScopedState = createScopedState<string | null>({
key: 'selectedItemIdScopedState',
defaultValue: null,
});

6
packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectedItemIdStateScopeMap.ts Normal file
View File

@ -0,0 +1,6 @@
import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
export const selectedItemIdStateScopeMap = createStateScopeMap<string | null>({
key: 'selectedItemIdScopedState',
defaultValue: null,
});

26
packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectors/isSelectedItemIdFamilySelectorScopeMap.ts Normal file
View File

@ -0,0 +1,26 @@
import { isSelectedItemIdFamilyStateScopeMap } from '@/ui/layout/selectable-list/states/isSelectedItemIdFamilyStateScopeMap';
import { createFamilySelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilySelectorScopeMap';
export const isSelectedItemIdFamilySelectorScopeMap =
createFamilySelectorScopeMap<boolean, string>({
key: 'isSelectedItemIdScopedFamilySelector',
get:
({ scopeId, familyKey }: { scopeId: string; familyKey: string }) =>
({ get }) =>
get(
isSelectedItemIdFamilyStateScopeMap({
scopeId: scopeId,
familyKey: familyKey,
}),
),
set:
({ scopeId, familyKey }: { scopeId: string; familyKey: string }) =>
({ set }, newValue) =>
set(
isSelectedItemIdFamilyStateScopeMap({
scopeId: scopeId,
familyKey: familyKey,
}),
newValue,
),
});

28
packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectors/isSelectedItemIdScopedFamilySelector.ts
View File

@ -1,28 +0,0 @@
import { isSelectedItemIdMapScopedFamilyState } from '@/ui/layout/selectable-list/states/isSelectedItemIdMapScopedFamilyState';
import { createScopedFamilySelector } from '@/ui/utilities/recoil-scope/utils/createScopedFamilySelector';
export const isSelectedItemIdScopedFamilySelector = createScopedFamilySelector<
boolean,
string
>({
key: 'isSelectedItemIdScopedFamilySelector',
get:
({ scopeId, familyKey }: { scopeId: string; familyKey: string }) =>
({ get }) =>
get(
isSelectedItemIdMapScopedFamilyState({
scopeId: scopeId,
familyKey: familyKey,
}),
),
set:
({ scopeId, familyKey }: { scopeId: string; familyKey: string }) =>
({ set }, newValue) =>
set(
isSelectedItemIdMapScopedFamilyState({
scopeId: scopeId,
familyKey: familyKey,
}),
newValue,
),
});

28
packages/twenty-front/src/modules/ui/layout/selectable-list/utils/internal/getSelectableListScopeInjectors.ts
View File

@ -1,28 +0,0 @@
import { selectableItemIdsScopedState } from '@/ui/layout/selectable-list/states/selectableItemIdsScopedState';
import { selectableListOnEnterScopedState } from '@/ui/layout/selectable-list/states/selectableListOnEnterScopedState';
import { selectedItemIdScopedState } from '@/ui/layout/selectable-list/states/selectedItemIdScopedState';
import { isSelectedItemIdScopedFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdScopedFamilySelector';
import { getFamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector';
import { getScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector';
export const getSelectableListScopeInjectors = () => {
const selectedItemIdScopeInjector = getScopeInjector(
selectedItemIdScopedState,
);
const selectableItemIdsScopeInjector = getScopeInjector(
selectableItemIdsScopedState,
);
const selectableListOnEnterScopeInjector = getScopeInjector(
selectableListOnEnterScopedState,
);
const isSelectedItemIdFamilyScopeInjector = getFamilyScopeInjector(
isSelectedItemIdScopedFamilySelector,
);
return {
selectedItemIdScopeInjector,
selectableItemIdsScopeInjector,
selectableListOnEnterScopeInjector,
isSelectedItemIdFamilyScopeInjector,
};
};