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

Introduce ComponentState (#4386)

Browse Source 
* Proof of concept ComponentState

* Migrate to createState and createFamilyState

* Refactor

* Fix

* Fix tests

* Fix lint

* Fix tests

* Re-enable coverage
This commit is contained in:
Charles Bochet
2024-03-09 11:31:00 +01:00
committed by GitHub
parent 17511be0cf
commit 86c0f311f5
451 changed files with 1718 additions and 2557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,11 @@
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 { selectableItemIdsComponentState } from '@/ui/layout/selectable-list/states/selectableItemIdsComponentState';
import { selectableListOnEnterComponentState } from '@/ui/layout/selectable-list/states/selectableListOnEnterComponentState';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
import { isSelectedItemIdFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdFamilySelector';
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';
import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
type useSelectableListStatesProps = {
selectableListScopeId?: string;
@ -21,15 +21,21 @@ export const useSelectableListStates = ({
return {
scopeId,
isSelectedItemIdSelector: getFamilyState(
isSelectedItemIdFamilySelectorScopeMap,
isSelectedItemIdSelector: extractComponentFamilyState(
isSelectedItemIdFamilySelector,
scopeId,
),
selectableItemIdsState: getState(selectableItemIdsStateScopeMap, scopeId),
selectableListOnEnterState: getState(
selectableListOnEnterStateScopeMap,
selectableItemIdsState: extractComponentState(
selectableItemIdsComponentState,
scopeId,
),
selectableListOnEnterState: extractComponentState(
selectableListOnEnterComponentState,
scopeId,
),
selectedItemIdState: extractComponentState(
selectedItemIdComponentState,
scopeId,
),
selectedItemIdState: getState(selectedItemIdStateScopeMap, scopeId),
};
};

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

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

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

@ -0,0 +1,9 @@
import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
export const isSelectedItemIdComponentFamilyState = createComponentFamilyState<
boolean,
string
>({
key: 'isSelectedItemIdComponentFamilyState',
defaultValue: false,
});

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

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

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

@ -0,0 +1,8 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const selectableItemIdsComponentState = createComponentState<string[][]>(
{
key: 'selectableItemIdsComponentState',
defaultValue: [[]],
},
);

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

@ -1,6 +0,0 @@
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/selectableListOnEnterComponentState.ts Normal file
View File

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

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

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

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

@ -0,0 +1,8 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const selectedItemIdComponentState = createComponentState<string | null>(
{
key: 'selectedItemIdComponentState',
defaultValue: null,
},
);

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

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

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

@ -0,0 +1,28 @@
import { isSelectedItemIdComponentFamilyState } from '@/ui/layout/selectable-list/states/isSelectedItemIdComponentFamilyState';
import { createComponentFamilySelector } from '@/ui/utilities/state/component-state/utils/createComponentFamilySelector';
export const isSelectedItemIdFamilySelector = createComponentFamilySelector<
boolean,
string
>({
key: 'isSelectedItemIdFamilySelector',
get:
({ scopeId, familyKey }: { scopeId: string; familyKey: string }) =>
({ get }) =>
get(
isSelectedItemIdComponentFamilyState({
scopeId: scopeId,
familyKey: familyKey,
}),
),
set:
({ scopeId, familyKey }: { scopeId: string; familyKey: string }) =>
({ set }, newValue) =>
set(
isSelectedItemIdComponentFamilyState({
scopeId: scopeId,
familyKey: familyKey,
}),
newValue,
),
});

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

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