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

Refactor recoil scope states (#3097)

Browse Source 
* Refactor recoil scope states

* Complete refactoring

* Fix
This commit is contained in:
Charles Bochet
2023-12-21 14:25:18 +01:00
committed by GitHub
parent b416b0f98f
commit e9bc13b5fa
30 changed files with 347 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
View File

@ -1,5 +1,6 @@
import { useMemo, useState } from 'react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconApps } from '@/ui/display/icon';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
@ -60,7 +61,9 @@ const IconPickerIcon = ({
selectedIconKey,
Icon,
}: IconPickerIconProps) => {
const { isSelectedItemId } = useSelectableList({ itemId: iconKey });
const { isSelectedItemIdFamilyState } = useSelectableList();
const isSelectedItemId = useRecoilValue(isSelectedItemIdFamilyState(iconKey));
return (
<StyledLightIconButton

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

@ -1,7 +1,7 @@
import { ReactNode, useEffect, useRef } from 'react';
import { useRecoilValue } from 'recoil';
import { useSelectableListScopedStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
export type SelectableItemProps = {
itemId: string;
@ -14,11 +14,9 @@ export const SelectableItem = ({
children,
className,
}: SelectableItemProps) => {
const { isSelectedItemIdSelector } = useSelectableListScopedStates({
itemId: itemId,
});
const { isSelectedItemIdFamilyState } = useSelectableList();
const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector);
const isSelectedItemId = useRecoilValue(isSelectedItemIdFamilyState(itemId));
const scrollRef = useRef<HTMLDivElement>(null);

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

@ -25,9 +25,8 @@ export const SelectableList = ({
}: SelectableListProps) => {
useSelectableListHotKeys(selectableListId, hotkeyScope);
const { setSelectableItemIds, setSelectableListOnEnter } = useSelectableList({
selectableListId,
});
const { setSelectableItemIds, setSelectableListOnEnter } =
useSelectableList(selectableListId);
useEffect(() => {
setSelectableListOnEnter(() => onEnter);

66
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 { getSelectableListScopedStates } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopedStates';
import { useSelectableListScopedState } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState';
import { getSelectableListScopeInjectors } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopeInjectors';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
type Direction = 'up' | 'down' | 'left' | 'right';
@ -27,17 +27,28 @@ export const useSelectableListHotKeys = (
}
};
const { getSelectableListScopedSnapshotValue } = useSelectableListScopedState(
{
selectableListScopeId: scopeId,
},
);
const handleSelect = useRecoilCallback(
({ snapshot, set }) =>
(direction: Direction) => {
const { selectedItemIdState, selectableItemIdsState } =
getSelectableListScopedStates({
selectableListScopeId: scopeId,
});
const selectedItemId = getSnapshotValue(snapshot, selectedItemIdState);
const selectableItemIds = getSnapshotValue(
const {
selectedItemIdScopeInjector,
selectableItemIdsScopeInjector,
isSelectedItemIdFamilyScopeInjector,
} = getSelectableListScopeInjectors();
const selectedItemId = getSelectableListScopedSnapshotValue(
snapshot,
selectableItemIdsState,
selectedItemIdScopeInjector,
);
const selectableItemIds = getSelectableListScopedSnapshotValue(
snapshot,
selectableItemIdsScopeInjector,
);
const currentPosition = findPosition(selectableItemIds, selectedItemId);
@ -97,24 +108,19 @@ export const useSelectableListHotKeys = (
if (selectedItemId !== nextId) {
if (nextId) {
const { isSelectedItemIdSelector } = getSelectableListScopedStates({
selectableListScopeId: scopeId,
itemId: nextId,
});
set(isSelectedItemIdSelector, true);
set(selectedItemIdState, nextId);
set(isSelectedItemIdFamilyScopeInjector(scopeId, nextId), true);
set(selectedItemIdScopeInjector(scopeId), nextId);
}
if (selectedItemId) {
const { isSelectedItemIdSelector } = getSelectableListScopedStates({
selectableListScopeId: scopeId,
itemId: selectedItemId,
});
set(isSelectedItemIdSelector, false);
set(
isSelectedItemIdFamilyScopeInjector(scopeId, selectedItemId),
false,
);
}
}
},
[scopeId],
[getSelectableListScopedSnapshotValue, scopeId],
);
useScopedHotkeys(Key.ArrowUp, () => handleSelect('up'), hotkeyScope, []);
@ -135,25 +141,25 @@ export const useSelectableListHotKeys = (
useRecoilCallback(
({ snapshot }) =>
() => {
const { selectedItemIdState, selectableListOnEnterState } =
getSelectableListScopedStates({
selectableListScopeId: scopeId,
});
const selectedItemId = getSnapshotValue(
const {
selectedItemIdScopeInjector,
selectableListOnEnterScopeInjector,
} = getSelectableListScopeInjectors();
const selectedItemId = getSelectableListScopedSnapshotValue(
snapshot,
selectedItemIdState,
selectedItemIdScopeInjector,
);
const onEnter = getSnapshotValue(
const onEnter = getSelectableListScopedSnapshotValue(
snapshot,
selectableListOnEnterState,
selectableListOnEnterScopeInjector,
);
if (selectedItemId) {
onEnter?.(selectedItemId);
}
},
[scopeId],
[getSelectableListScopedSnapshotValue],
),
hotkeyScope,
[],

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

@ -0,0 +1,31 @@
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,
getSelectableListScopedState: getScopedState,
getSelectableListScopedFamilyState: getScopedFamilyState,
getSelectableListScopedSnapshotValue: getScopedSnapshotValue,
getSelectableListScopedFamilySnapshotValue: getScopedFamilySnapshotValue,
};
};

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

@ -1,36 +0,0 @@
import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
import { getSelectableListScopedStates } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopedStates';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
type UseSelectableListScopedStatesProps = {
selectableListScopeId?: string;
itemId?: string;
};
export const useSelectableListScopedStates = (
args?: UseSelectableListScopedStatesProps,
) => {
const { selectableListScopeId, itemId } = args ?? {};
const scopeId = useAvailableScopeIdOrThrow(
SelectableListScopeInternalContext,
selectableListScopeId,
);
const {
selectedItemIdState,
selectableItemIdsState,
isSelectedItemIdSelector,
selectableListOnEnterState,
} = getSelectableListScopedStates({
selectableListScopeId: scopeId,
itemId: itemId,
});
return {
scopeId,
isSelectedItemIdSelector,
selectableItemIdsState,
selectedItemIdState,
selectableListOnEnterState,
};
};

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

@ -1,52 +1,48 @@
import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil';
import { useResetRecoilState, useSetRecoilState } from 'recoil';
import { useSelectableListScopedStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates';
import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
type UseSelectableListProps = {
selectableListId?: string;
itemId?: string;
};
export const useSelectableList = (props?: UseSelectableListProps) => {
const scopeId = useAvailableScopeIdOrThrow(
SelectableListScopeInternalContext,
props?.selectableListId,
);
import { useSelectableListScopedState } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState';
import { getSelectableListScopeInjectors } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopeInjectors';
export const useSelectableList = (selectableListScopeId?: string) => {
const {
selectableItemIdsState,
isSelectedItemIdSelector,
selectableListOnEnterState,
selectedItemIdState,
} = useSelectableListScopedStates({
selectableListScopeId: scopeId,
itemId: props?.itemId,
getSelectableListScopedState,
getSelectableListScopedFamilyState,
scopeId,
} = useSelectableListScopedState({
selectableListScopeId,
});
const setSelectableItemIds = useSetRecoilState(selectableItemIdsState);
const setSelectableListOnEnter = useSetRecoilState(
selectableListOnEnterState,
);
const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector);
const {
selectedItemIdScopeInjector,
selectableItemIdsScopeInjector,
selectableListOnEnterScopeInjector,
isSelectedItemIdFamilyScopeInjector,
} = getSelectableListScopeInjectors();
const resetSelectedItemIdState = useResetRecoilState(selectedItemIdState);
const resetIsSelectedItemIdSelector = useResetRecoilState(
isSelectedItemIdSelector,
const setSelectableItemIds = useSetRecoilState(
getSelectableListScopedState(selectableItemIdsScopeInjector),
);
const setSelectableListOnEnter = useSetRecoilState(
getSelectableListScopedState(selectableListOnEnterScopeInjector),
);
const isSelectedItemIdFamilyState = getSelectableListScopedFamilyState(
isSelectedItemIdFamilyScopeInjector,
);
const resetSelectedItemIdState = useResetRecoilState(
getSelectableListScopedState(selectedItemIdScopeInjector),
);
const resetSelectedItem = () => {
resetSelectedItemIdState();
resetIsSelectedItemIdSelector();
};
return {
setSelectableItemIds,
isSelectedItemId,
setSelectableListOnEnter,
selectableListId: scopeId,
isSelectedItemIdSelector,
setSelectableItemIds,
isSelectedItemIdFamilyState,
setSelectableListOnEnter,
resetSelectedItem,
};
};

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

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

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

@ -0,0 +1,28 @@
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,
};
};

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

@ -1,42 +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 { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
const UNDEFINED_SELECTABLE_ITEM_ID = 'UNDEFINED_SELECTABLE_ITEM_ID';
export const getSelectableListScopedStates = ({
selectableListScopeId,
itemId,
}: {
selectableListScopeId: string;
itemId?: string;
}) => {
const isSelectedItemIdSelector = isSelectedItemIdScopedFamilySelector({
scopeId: selectableListScopeId,
itemId: itemId ?? UNDEFINED_SELECTABLE_ITEM_ID,
});
const selectedItemIdState = getScopedState(
selectedItemIdScopedState,
selectableListScopeId,
);
const selectableItemIdsState = getScopedState(
selectableItemIdsScopedState,
selectableListScopeId,
);
const selectableListOnEnterState = getScopedState(
selectableListOnEnterScopedState,
selectableListScopeId,
);
return {
isSelectedItemIdSelector,
selectableItemIdsState,
selectedItemIdState,
selectableListOnEnterState,
};
};

38
packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState.ts Normal file
View File

@ -0,0 +1,38 @@
import { SerializableParam, Snapshot } from 'recoil';
import { FamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector';
import { ScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
export const useScopedState = (scopeId: string) => {
const getScopedState = <StateType>(scopeInjector: ScopeInjector<StateType>) =>
scopeInjector(scopeId);
const getScopedFamilyState =
<StateType, FamilyKey extends SerializableParam>(
familyScopeInjector: FamilyScopeInjector<StateType, FamilyKey>,
) =>
(familyKey: FamilyKey) =>
familyScopeInjector(scopeId, familyKey);
const getScopedSnapshotValue = <StateType>(
snashot: Snapshot,
scopeInjector: ScopeInjector<StateType>,
) => getSnapshotValue(snashot, scopeInjector(scopeId));
const getScopedFamilySnapshotValue =
<StateType, FamilyKey extends SerializableParam>(
snashot: Snapshot,
familyScopeInjector: FamilyScopeInjector<StateType, FamilyKey>,
) =>
(familyKey: FamilyKey) =>
getSnapshotValue(snashot, familyScopeInjector(scopeId, familyKey));
return {
scopeId,
getScopedState,
getScopedFamilyState,
getScopedSnapshotValue,
getScopedFamilySnapshotValue,
};
};

47
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createScopedFamilySelector.ts Normal file
View File

@ -0,0 +1,47 @@
import {
DefaultValue,
GetCallback,
GetRecoilValue,
Loadable,
RecoilValue,
ResetRecoilState,
selectorFamily,
SerializableParam,
SetRecoilState,
WrappedValue,
} from 'recoil';
import { ScopedFamilyStateKey } from '../scopes-internal/types/ScopedFamilyStateKey';
type SelectorGetter<T, P> = (
param: P,
) => (opts: {
get: GetRecoilValue;
getCallback: GetCallback;
}) => Promise<T> | RecoilValue<T> | Loadable<T> | WrappedValue<T> | T;
type SelectorSetter<T, P> = (
param: P,
) => (
opts: { set: SetRecoilState; get: GetRecoilValue; reset: ResetRecoilState },
newValue: T | DefaultValue,
) => void;
export const createScopedFamilySelector = <
ValueType,
FamilyKey extends SerializableParam,
>({
key,
get,
set,
}: {
key: string;
get: SelectorGetter<ValueType, ScopedFamilyStateKey<FamilyKey>>;
set: SelectorSetter<ValueType, ScopedFamilyStateKey<FamilyKey>>;
}) => {
return selectorFamily<ValueType, ScopedFamilyStateKey<FamilyKey>>({
key,
get,
set,
});
};

23
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getFamilyScopeInjector.ts Normal file
View File

@ -0,0 +1,23 @@
import { RecoilState, SerializableParam } from 'recoil';
import { ScopedFamilyStateKey } from '../scopes-internal/types/ScopedFamilyStateKey';
export type FamilyScopeInjector<
StateType,
FamilyKey extends SerializableParam,
> = (scopeId: string, familyKey: FamilyKey) => RecoilState<StateType>;
export const getFamilyScopeInjector = <
StateType,
FamilyKey extends SerializableParam,
>(
scopedFamilyState: (
scopedFamilyKey: ScopedFamilyStateKey<FamilyKey>,
) => RecoilState<StateType>,
) => {
return (scopeId: string, familyKey: FamilyKey) =>
scopedFamilyState({
scopeId,
familyKey: familyKey || ('' as FamilyKey),
});
};

16
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeInjector.ts Normal file
View File

@ -0,0 +1,16 @@
import { RecoilState } from 'recoil';
import { RecoilScopedState } from '../types/RecoilScopedState';
export type ScopeInjector<StateType> = (
scopeId: string,
) => RecoilState<StateType>;
export const getScopeInjector = <StateType>(
scopedState: RecoilScopedState<StateType>,
) => {
return (scopeId: string) =>
scopedState({
scopeId,
});
};

2
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedFamilyState.ts → packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedFamilyStateDeprecated.ts
View File

@ -2,7 +2,7 @@ import { RecoilState, SerializableParam } from 'recoil';
import { ScopedFamilyStateKey } from '../scopes-internal/types/ScopedFamilyStateKey';
export const getScopedFamilyState = <
export const getScopedFamilyStateDeprecated = <
StateType,
FamilyKey extends SerializableParam,
>(

2
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedSelector.ts → packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedSelectorDeprecated.ts
View File

@ -1,6 +1,6 @@
import { RecoilScopedSelector } from '../types/RecoilScopedSelector';
export const getScopedSelector = <StateType>(
export const getScopedSelectorDeprecated = <StateType>(
recoilScopedState: RecoilScopedSelector<StateType>,
scopeId: string,
) => {

2
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedState.ts → packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedStateDeprecated.ts
View File

@ -1,6 +1,6 @@
import { RecoilScopedState } from '../types/RecoilScopedState';
export const getScopedState = <StateType>(
export const getScopedStateDeprecated = <StateType>(
recoilScopedState: RecoilScopedState<StateType>,
scopeId: string,
) => {

15
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotScopedSelector.ts
View File

@ -1,15 +0,0 @@
import { Snapshot } from 'recoil';
import { RecoilScopedSelector } from '../types/RecoilScopedSelector';
import { getScopedSelector } from './getScopedSelector';
export const getSnapshotScopedSelector = <StateType>(
snapshot: Snapshot,
scopedState: RecoilScopedSelector<StateType>,
scopeId: string,
) => {
return snapshot
.getLoadable(getScopedSelector(scopedState, scopeId))
.getValue();
};

13
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotScopedValue.ts
View File

@ -1,13 +0,0 @@
import { Snapshot } from 'recoil';
import { RecoilScopedState } from '../types/RecoilScopedState';
import { getScopedState } from './getScopedState';
export const getSnapshotScopedValue = <StateType>(
snapshot: Snapshot,
scopedState: RecoilScopedState<StateType>,
scopeId: string,
) => {
return snapshot.getLoadable(getScopedState(scopedState, scopeId)).getValue();
};