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

View module refactor with atomic recoil component instance states (#6810)

Browse Source 
This PR refactors the view module to implement utils that avoid having
to create hooks to inject the scope id in the states, like
`useViewStates`, each componentState will know its unique related
InstanceContext (which holds the instanceId), and thus will be able to
retrieve it itself.

We keep the naming componentState as it reflects the fact that those
states are tied to instances of a component (or its children).

We introduce the instance word where it is needed, in place of scopeId
for example, to precise the fact that we handle instances of component
state, one for each instance of a component.

For example, the currentViewId is a state that is tied to an instance of
the ViewBar, but as we can switch between views, we want currentViewId
to be a componentState tied to an instance of the ViewBar component.

This PR also refactors view filter and sort states to fix this issue :
https://github.com/twentyhq/twenty/issues/6837 and other problems
involving resetting those states between page navigation.

Fixes https://github.com/twentyhq/twenty/issues/6837

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2024-09-20 16:13:29 +02:00
committed by GitHub
parent bebeb1515b
commit 25522752e4
177 changed files with 3132 additions and 1745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/ui/feedback/dialog-manager/scopes/scope-internal-context/DialogManagerScopeInternalContext.ts
View File

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

4
packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/scopes/scope-internal-context/SnackBarManagerScopeInternalContext.ts
View File

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

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

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

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

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

2
packages/twenty-front/src/modules/ui/layout/tab/hooks/useTabList.ts
View File

@ -4,7 +4,7 @@ import { useTabListStates } from '@/ui/layout/tab/hooks/internal/useTabListState
export const useTabList = (tabListId?: string) => {
const { activeTabIdState } = useTabListStates({
tabListScopeId: `${tabListId}-scope`,
tabListScopeId: tabListId,
});
const setActiveTabId = useSetRecoilState(activeTabIdState);

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

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

4
packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2.ts
View File

@ -1,9 +1,9 @@
import { RecoilState, useRecoilState } from 'recoil';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
import { RecoilComponentStateKey } from '@/ui/utilities/state/component-state/types/RecoilComponentStateKey';
export const useRecoilScopedStateV2 = <StateType>(
recoilState: (scopedKey: ComponentStateKey) => RecoilState<StateType>,
recoilState: (scopedKey: RecoilComponentStateKey) => RecoilState<StateType>,
scopeId: string,
) => {
return useRecoilState<StateType>(

7
packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext.ts
View File

@ -1,10 +1,11 @@
import { Context, createContext } from 'react';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
import { RecoilComponentStateKey } from '@/ui/utilities/state/component-state/types/RecoilComponentStateKey';
type ScopeInternalContext<T extends ComponentStateKey> = Context<T | null>;
type ScopeInternalContext<T extends RecoilComponentStateKey> =
Context<T | null>;
export const createScopeInternalContext = <T extends ComponentStateKey>(
export const createScopeInternalContext = <T extends RecoilComponentStateKey>(
initialValue?: T,
) => {
return createContext<T | null>(

4
packages/twenty-front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedSelector.ts
View File

@ -1,7 +1,7 @@
import { RecoilValueReadOnly } from 'recoil';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
import { RecoilComponentStateKey } from '@/ui/utilities/state/component-state/types/RecoilComponentStateKey';
export type RecoilScopedSelector<StateType> = (
scopedKey: ComponentStateKey,
scopedKey: RecoilComponentStateKey,
) => RecoilValueReadOnly<StateType>;

4
packages/twenty-front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedState.ts
View File

@ -1,7 +1,7 @@
import { RecoilState } from 'recoil';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
import { RecoilComponentStateKey } from '@/ui/utilities/state/component-state/types/RecoilComponentStateKey';
export type RecoilScopedState<StateType> = (
scopedKey: ComponentStateKey,
scopedKey: RecoilComponentStateKey,
) => RecoilState<StateType>;

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

@ -1,2 +1,2 @@
export const getScopeIdFromComponentId = (componentId: string) =>
`${componentId}-scope`;
`${componentId}`;

24
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow.ts Normal file
View File

@ -0,0 +1,24 @@
import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
import { isNonEmptyString } from '@sniptt/guards';
export const useAvailableComponentInstanceIdOrThrow = <
T extends { instanceId: string },
>(
Context: ComponentInstanceStateContext<T>,
instanceIdFromProps?: string,
): string => {
const instanceStateContext = useComponentInstanceStateContext(Context);
const instanceIdFromContext = instanceStateContext?.instanceId;
if (isNonEmptyString(instanceIdFromProps)) {
return instanceIdFromProps;
} else if (isNonEmptyString(instanceIdFromContext)) {
return instanceIdFromContext;
} else {
throw new Error(
'Instance id is not provided and cannot be found in context.',
);
}
};

12
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext.ts Normal file
View File

@ -0,0 +1,12 @@
import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
import { useContext } from 'react';
export const useComponentInstanceStateContext = <
T extends { instanceId: string },
>(
Context: ComponentInstanceStateContext<T>,
) => {
const context = useContext(Context);
return context;
};

27
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilCallbackState.ts Normal file
View File

@ -0,0 +1,27 @@
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
import { RecoilComponentState } from '@/ui/utilities/state/component-state/types/RecoilComponentState';
export const useRecoilCallbackState = <Value>(
componentState: RecoilComponentState<Value>,
componentId?: string,
) => {
const componentContext = (window as any).componentContextStateMap?.get(
componentState.key,
);
if (!componentContext) {
throw new Error(
`Component context for key "${componentState.key}" is not defined`,
);
}
const internalScopeId = useAvailableScopeIdOrThrow(
componentContext,
getScopeIdOrUndefinedFromComponentId(componentId),
);
return componentState.atomFamily({
scopeId: internalScopeId,
});
};

128
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2.ts Normal file
View File

@ -0,0 +1,128 @@
/* eslint-disable no-redeclare */
/* eslint-disable prefer-arrow/prefer-arrow-functions */
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { ComponentFamilyReadOnlySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyReadOnlySelectorV2';
import { ComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilySelectorV2';
import { ComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateV2';
import { ComponentReadOnlySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentReadOnlySelectorV2';
import { ComponentSelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentSelectorV2';
import { ComponentStateV2 } from '@/ui/utilities/state/component-state/types/ComponentStateV2';
import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
import { RecoilState, RecoilValueReadOnly, SerializableParam } from 'recoil';
export function useRecoilComponentCallbackStateV2<ValueType>(
componentState: ComponentStateV2<ValueType>,
instanceIdFromProps?: string,
): RecoilState<ValueType>;
export function useRecoilComponentCallbackStateV2<ValueType>(
componentSelector: ComponentSelectorV2<ValueType>,
instanceIdFromProps?: string,
): RecoilState<ValueType>;
export function useRecoilComponentCallbackStateV2<ValueType>(
componentReadOnlySelector: ComponentReadOnlySelectorV2<ValueType>,
instanceIdFromProps?: string,
): RecoilValueReadOnly<ValueType>;
export function useRecoilComponentCallbackStateV2<
ValueType,
FamilyKey extends SerializableParam,
>(
componentFamilyState: ComponentFamilyStateV2<ValueType, FamilyKey>,
instanceIdFromProps?: string,
): (familyKey: FamilyKey) => RecoilState<ValueType>;
export function useRecoilComponentCallbackStateV2<
ValueType,
FamilyKey extends SerializableParam,
>(
componentFamilySelector: ComponentFamilySelectorV2<ValueType, FamilyKey>,
instanceIdFromProps?: string,
): (familyKey: FamilyKey) => RecoilState<ValueType>;
export function useRecoilComponentCallbackStateV2<
ValueType,
FamilyKey extends SerializableParam,
>(
componentFamilyReadOnlySelector: ComponentFamilyReadOnlySelectorV2<
ValueType,
FamilyKey
>,
instanceIdFromProps?: string,
): (familyKey: FamilyKey) => RecoilValueReadOnly<ValueType>;
export function useRecoilComponentCallbackStateV2<
ValueType,
FamilyKey extends SerializableParam,
>(
componentFamilyState: ComponentFamilyStateV2<ValueType, FamilyKey>,
instanceIdFromProps?: string,
): (familyKey: FamilyKey) => RecoilState<ValueType>;
export function useRecoilComponentCallbackStateV2<
ComponentState extends
| ComponentStateV2<ValueType>
| ComponentSelectorV2<ValueType>
| ComponentReadOnlySelectorV2<ValueType>
| ComponentFamilyStateV2<ValueType, FamilyKey>
| ComponentFamilySelectorV2<ValueType, FamilyKey>
| ComponentFamilyReadOnlySelectorV2<ValueType, FamilyKey>,
ValueType,
FamilyKey extends SerializableParam = never,
>(
componentState: ComponentState,
instanceIdFromProps?: string,
):
| RecoilState<ValueType>
| RecoilValueReadOnly<ValueType>
| ((familyKey: FamilyKey) => RecoilState<ValueType>)
| ((familyKey: FamilyKey) => RecoilValueReadOnly<ValueType>) {
const componentStateKey = componentState.key;
const componentInstanceContext =
globalComponentInstanceContextMap.get(componentStateKey);
if (!componentInstanceContext) {
throw new Error(
`Instance context for key "${componentStateKey}" is not defined, check the component state declaration.`,
);
}
const instanceId = useAvailableComponentInstanceIdOrThrow(
componentInstanceContext,
instanceIdFromProps,
);
switch (componentState.type) {
case 'ComponentState': {
return componentState.atomFamily({
instanceId,
});
}
case 'ComponentSelector': {
return componentState.selectorFamily({
instanceId,
});
}
case 'ComponentReadOnlySelector': {
return componentState.selectorFamily({
instanceId,
});
}
case 'ComponentFamilyState': {
return (familyKey: FamilyKey) =>
componentState.atomFamily({
instanceId,
familyKey,
});
}
case 'ComponentFamilySelector': {
return (familyKey: FamilyKey) =>
componentState.selectorFamily({
instanceId,
familyKey,
});
}
case 'ComponentFamilyReadOnlySelector': {
return (familyKey: FamilyKey) =>
componentState.selectorFamily({
instanceId,
familyKey,
});
}
}
}

52
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2.ts Normal file
View File

@ -0,0 +1,52 @@
/* eslint-disable react-hooks/rules-of-hooks */
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { ComponentFamilyReadOnlySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyReadOnlySelectorV2';
import { ComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilySelectorV2';
import { ComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateV2';
import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
import { SerializableParam, useRecoilValue } from 'recoil';
export const useRecoilComponentFamilyValueV2 = <
StateType,
FamilyKey extends SerializableParam,
>(
componentStateV2:
| ComponentFamilyStateV2<StateType, FamilyKey>
| ComponentFamilySelectorV2<StateType, FamilyKey>
| ComponentFamilyReadOnlySelectorV2<StateType, FamilyKey>,
familyKey: FamilyKey,
instanceIdFromProps?: string,
): StateType => {
const instanceContext = globalComponentInstanceContextMap.get(
componentStateV2.key,
);
if (!instanceContext) {
throw new Error(
`Instance context for key "${componentStateV2.key}" is not defined`,
);
}
const instanceId = useAvailableComponentInstanceIdOrThrow(
instanceContext,
instanceIdFromProps,
);
switch (componentStateV2.type) {
case 'ComponentFamilyState': {
return useRecoilValue(
componentStateV2.atomFamily({ familyKey, instanceId }),
);
}
case 'ComponentFamilySelector': {
return useRecoilValue(
componentStateV2.selectorFamily({ familyKey, instanceId }),
);
}
case 'ComponentFamilyReadOnlySelector': {
return useRecoilValue(
componentStateV2.selectorFamily({ familyKey, instanceId }),
);
}
}
};

28
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentState.ts Normal file
View File

@ -0,0 +1,28 @@
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
import { RecoilComponentState } from '@/ui/utilities/state/component-state/types/RecoilComponentState';
import { useRecoilState } from 'recoil';
export const useRecoilComponentState = <StateType>(
componentState: RecoilComponentState<StateType>,
componentId?: string,
) => {
const componentContext = (window as any).componentContextStateMap?.get(
componentState.key,
);
if (!componentContext) {
throw new Error(
`Component context for key "${componentState.key}" is not defined`,
);
}
const internalComponentId = useAvailableScopeIdOrThrow(
componentContext,
getScopeIdOrUndefinedFromComponentId(componentId),
);
return useRecoilState(
componentState.atomFamily({ scopeId: internalComponentId }),
);
};

26
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2.ts Normal file
View File

@ -0,0 +1,26 @@
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { ComponentStateV2 } from '@/ui/utilities/state/component-state/types/ComponentStateV2';
import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
import { useRecoilState } from 'recoil';
export const useRecoilComponentStateV2 = <StateType>(
componentState: ComponentStateV2<StateType>,
instanceIdFromProps?: string,
) => {
const componentInstanceContext = globalComponentInstanceContextMap.get(
componentState.key,
);
if (!componentInstanceContext) {
throw new Error(
`Instance context for key "${componentState.key}" is not defined`,
);
}
const instanceId = useAvailableComponentInstanceIdOrThrow(
componentInstanceContext,
instanceIdFromProps,
);
return useRecoilState(componentState.atomFamily({ instanceId }));
};

4
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentValue.ts
View File

@ -2,10 +2,10 @@ import { useRecoilValue } from 'recoil';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
import { ComponentState } from '@/ui/utilities/state/component-state/types/ComponentState';
import { RecoilComponentState } from '@/ui/utilities/state/component-state/types/RecoilComponentState';
export const useRecoilComponentValue = <StateType>(
componentState: ComponentState<StateType>,
componentState: RecoilComponentState<StateType>,
componentId?: string,
) => {
const componentContext = (window as any).componentContextStateMap?.get(

26
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2.ts Normal file
View File

@ -0,0 +1,26 @@
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { ComponentStateV2 } from '@/ui/utilities/state/component-state/types/ComponentStateV2';
import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
import { useRecoilValue } from 'recoil';
export const useRecoilComponentValueV2 = <StateType>(
componentStateV2: ComponentStateV2<StateType>,
instanceIdFromProps?: string,
) => {
const instanceContext = globalComponentInstanceContextMap.get(
componentStateV2.key,
);
if (!instanceContext) {
throw new Error(
`Instance context for key "${componentStateV2.key}" is not defined`,
);
}
const instanceId = useAvailableComponentInstanceIdOrThrow(
instanceContext,
instanceIdFromProps,
);
return useRecoilValue(componentStateV2.atomFamily({ instanceId }));
};

4
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useScopeIdFromStateContext.ts
View File

@ -1,9 +1,9 @@
import { useScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useScopeInternalContext';
import { ComponentFamilyState } from '@/ui/utilities/state/component-state/types/ComponentFamilyState';
import { ComponentState } from '@/ui/utilities/state/component-state/types/ComponentState';
import { RecoilComponentState } from '@/ui/utilities/state/component-state/types/RecoilComponentState';
export const useScopeIdFromStateContext = (
componentState: ComponentState<any> | ComponentFamilyState<any, any>,
componentState: RecoilComponentState<any> | ComponentFamilyState<any, any>,
) => {
const componentContext = (window as any).componentContextStateMap?.get(
componentState.key,

52
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyStateV2.ts Normal file
View File

@ -0,0 +1,52 @@
/* eslint-disable react-hooks/rules-of-hooks */
// We're disabling rules-of-hooks because we're sure that the call order cannot be modified
// because a component state cannot change its type during its lifecycle
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { ComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilySelectorV2';
import { ComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateV2';
import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
import { SerializableParam, SetterOrUpdater, useSetRecoilState } from 'recoil';
export const useSetRecoilComponentFamilyStateV2 = <
StateType,
FamilyKey extends SerializableParam,
>(
componentState:
| ComponentFamilyStateV2<StateType, FamilyKey>
| ComponentFamilySelectorV2<StateType, FamilyKey>,
familyKey: FamilyKey,
instanceIdFromProps?: string,
): SetterOrUpdater<StateType> => {
const componentInstanceContext = globalComponentInstanceContextMap.get(
componentState.key,
);
if (!componentInstanceContext) {
throw new Error(
`Instance context for key "${componentState.key}" is not defined`,
);
}
const instanceId = useAvailableComponentInstanceIdOrThrow(
componentInstanceContext,
instanceIdFromProps,
);
switch (componentState.type) {
case 'ComponentFamilyState': {
return useSetRecoilState(
componentState.atomFamily({ familyKey, instanceId }),
);
}
case 'ComponentFamilySelector': {
return useSetRecoilState(
componentState.selectorFamily({
familyKey,
instanceId,
}),
);
}
}
};

4
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useSetRecoilComponentState.ts
View File

@ -2,10 +2,10 @@ import { useSetRecoilState } from 'recoil';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
import { ComponentState } from '@/ui/utilities/state/component-state/types/ComponentState';
import { RecoilComponentState } from '@/ui/utilities/state/component-state/types/RecoilComponentState';
export const useSetRecoilComponentState = <StateType>(
componentState: ComponentState<StateType>,
componentState: RecoilComponentState<StateType>,
componentId?: string,
) => {
const componentContext = (window as any).componentContextStateMap?.get(

26
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2.ts Normal file
View File

@ -0,0 +1,26 @@
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { ComponentStateV2 } from '@/ui/utilities/state/component-state/types/ComponentStateV2';
import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
import { SetterOrUpdater, useSetRecoilState } from 'recoil';
export const useSetRecoilComponentStateV2 = <ValueType>(
componentState: ComponentStateV2<ValueType>,
instanceIdFromProps?: string,
): SetterOrUpdater<ValueType> => {
const componentInstanceContext = globalComponentInstanceContextMap.get(
componentState.key,
);
if (!componentInstanceContext) {
throw new Error(
`Instance context for key "${componentState.key}" is not defined`,
);
}
const instanceId = useAvailableComponentInstanceIdOrThrow(
componentInstanceContext,
instanceIdFromProps,
);
return useSetRecoilState(componentState.atomFamily({ instanceId }));
};

14
packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentFamilyReadOnlySelectorV2.ts Normal file
View File

@ -0,0 +1,14 @@
import { ComponentFamilyStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2';
import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
import { RecoilValueReadOnly, SerializableParam } from 'recoil';
export type ComponentFamilyReadOnlySelectorV2<
StateType,
FamilyKey extends SerializableParam,
> = {
type: Extract<ComponentStateTypeV2, 'ComponentFamilyReadOnlySelector'>;
key: string;
selectorFamily: (
componentFamilyStateKey: ComponentFamilyStateKeyV2<FamilyKey>,
) => RecoilValueReadOnly<StateType>;
};

14
packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentFamilySelectorV2.ts Normal file
View File

@ -0,0 +1,14 @@
import { ComponentFamilyStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2';
import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
import { RecoilState, SerializableParam } from 'recoil';
export type ComponentFamilySelectorV2<
StateType,
FamilyKey extends SerializableParam,
> = {
type: Extract<ComponentStateTypeV2, 'ComponentFamilySelector'>;
key: string;
selectorFamily: (
componentFamilyStateKey: ComponentFamilyStateKeyV2<FamilyKey>,
) => RecoilState<StateType>;
};

7
packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2.ts Normal file
View File

@ -0,0 +1,7 @@
import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
import { SerializableParam } from 'recoil';
export type ComponentFamilyStateKeyV2<FamilyKey extends SerializableParam> =
ComponentStateKeyV2 & {
familyKey: FamilyKey;
};

14
packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentFamilyStateV2.ts Normal file
View File

@ -0,0 +1,14 @@
import { ComponentFamilyStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2';
import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
import { RecoilState, SerializableParam } from 'recoil';
export type ComponentFamilyStateV2<
StateType,
FamilyKey extends SerializableParam,
> = {
type: Extract<ComponentStateTypeV2, 'ComponentFamilyState'>;
key: string;
atomFamily: (
componentFamilyStateKey: ComponentFamilyStateKeyV2<FamilyKey>,
) => RecoilState<StateType>;
};

4
packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentInstanceStateContext.ts Normal file
View File

@ -0,0 +1,4 @@
import { Context } from 'react';
export type ComponentInstanceStateContext<T extends { instanceId: string }> =
Context<T | null>;

11
packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentReadOnlySelectorV2.ts Normal file
View File

@ -0,0 +1,11 @@
import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
import { RecoilValueReadOnly } from 'recoil';
export type ComponentReadOnlySelectorV2<StateType> = {
type: Extract<ComponentStateTypeV2, 'ComponentReadOnlySelector'>;
key: string;
selectorFamily: (
componentStateKey: ComponentStateKeyV2,
) => RecoilValueReadOnly<StateType>;
};

11
packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentSelectorV2.ts Normal file
View File

@ -0,0 +1,11 @@
import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
import { RecoilState } from 'recoil';
export type ComponentSelectorV2<StateType> = {
type: Extract<ComponentStateTypeV2, 'ComponentSelector'>;
key: string;
selectorFamily: (
componentStateKey: ComponentStateKeyV2,
) => RecoilState<StateType>;
};

8
packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentState.ts
View File

@ -1,8 +0,0 @@
import { RecoilState } from 'recoil';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
export type ComponentState<StateType> = {
key: string;
atomFamily: (componentStateKey: ComponentStateKey) => RecoilState<StateType>;
};

3
packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentStateKey.ts
View File

@ -1,3 +0,0 @@
export type ComponentStateKey = {
scopeId: string;
};

3
packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentStateKeyV2.ts Normal file
View File

@ -0,0 +1,3 @@
export type ComponentStateKeyV2 = {
instanceId: string;
};

7
packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentStateTypeV2.ts Normal file
View File

@ -0,0 +1,7 @@
export type ComponentStateTypeV2 =
| 'ComponentState'
| 'ComponentFamilyState'
| 'ComponentSelector'
| 'ComponentReadOnlySelector'
| 'ComponentFamilySelector'
| 'ComponentFamilyReadOnlySelector';

11
packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentStateV2.ts Normal file
View File

@ -0,0 +1,11 @@
import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
import { RecoilState } from 'recoil';
export type ComponentStateV2<StateType> = {
type: Extract<ComponentStateTypeV2, 'ComponentState'>;
key: string;
atomFamily: (
componentStateKey: ComponentStateKeyV2,
) => RecoilState<StateType>;
};

9
packages/twenty-front/src/modules/ui/utilities/state/component-state/types/RecoilComponentState.ts Normal file
View File

@ -0,0 +1,9 @@
import { RecoilState } from 'recoil';
import { RecoilComponentStateKey } from './RecoilComponentStateKey';
export type RecoilComponentState<StateType> = {
key: string;
atomFamily: (
componentStateKey: RecoilComponentStateKey,
) => RecoilState<StateType>;
};

3
packages/twenty-front/src/modules/ui/utilities/state/component-state/types/RecoilComponentStateKey.ts Normal file
View File

@ -0,0 +1,3 @@
export type RecoilComponentStateKey = {
scopeId: string;
};

58
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilySelectorV2.ts Normal file
View File

@ -0,0 +1,58 @@
import { selectorFamily, SerializableParam } from 'recoil';
import { ComponentFamilyReadOnlySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyReadOnlySelectorV2';
import { ComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilySelectorV2';
import { ComponentFamilyStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2';
import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter';
import { SelectorSetter } from '@/ui/utilities/state/types/SelectorSetter';
import { isDefined } from 'twenty-ui';
export const createComponentFamilySelectorV2 = <
ValueType,
FamilyKey extends SerializableParam,
>({
key,
get,
set,
componentInstanceContext,
}: {
key: string;
get: SelectorGetter<ValueType, ComponentFamilyStateKeyV2<FamilyKey>>;
set?: SelectorSetter<ValueType, ComponentFamilyStateKeyV2<FamilyKey>>;
componentInstanceContext: ComponentInstanceStateContext<any> | null;
}):
| ComponentFamilySelectorV2<ValueType, FamilyKey>
| ComponentFamilyReadOnlySelectorV2<ValueType, FamilyKey> => {
if (isDefined(componentInstanceContext)) {
globalComponentInstanceContextMap.set(key, componentInstanceContext);
}
if (isDefined(set)) {
return {
type: 'ComponentFamilySelector',
key,
selectorFamily: selectorFamily<
ValueType,
ComponentFamilyStateKeyV2<FamilyKey>
>({
key,
get,
set,
}),
} satisfies ComponentFamilySelectorV2<ValueType, FamilyKey>;
} else {
return {
type: 'ComponentFamilyReadOnlySelector',
key,
selectorFamily: selectorFamily<
ValueType,
ComponentFamilyStateKeyV2<FamilyKey>
>({
key,
get,
}),
} satisfies ComponentFamilyReadOnlySelectorV2<ValueType, FamilyKey>;
}
};

30
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilyStateV2.ts
View File

@ -1,13 +1,15 @@
import { ComponentFamilyStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2';
import { ComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateV2';
import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
import { AtomEffect, atomFamily, SerializableParam } from 'recoil';
import { ScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopeInternalContext';
import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey';
import { isDefined } from 'twenty-ui';
type CreateComponentFamilyStateV2Type<ValueType> = {
type CreateComponentFamilyStateArgs<ValueType> = {
key: string;
defaultValue: ValueType;
componentContext: ScopeInternalContext<any> | null;
componentInstanceContext: ComponentInstanceStateContext<any> | null;
effects?: AtomEffect<ValueType>[];
};
@ -18,22 +20,22 @@ export const createComponentFamilyStateV2 = <
key,
effects,
defaultValue,
componentContext,
}: CreateComponentFamilyStateV2Type<ValueType>) => {
if (isDefined(componentContext)) {
if (!isDefined((window as any).componentContextStateMap)) {
(window as any).componentContextStateMap = new Map();
}
(window as any).componentContextStateMap.set(key, componentContext);
componentInstanceContext,
}: CreateComponentFamilyStateArgs<ValueType>): ComponentFamilyStateV2<
ValueType,
FamilyKey
> => {
if (isDefined(componentInstanceContext)) {
globalComponentInstanceContextMap.set(key, componentInstanceContext);
}
return {
type: 'ComponentFamilyState',
key,
atomFamily: atomFamily<ValueType, ComponentFamilyStateKey<FamilyKey>>({
atomFamily: atomFamily<ValueType, ComponentFamilyStateKeyV2<FamilyKey>>({
key,
default: defaultValue,
effects,
}),
};
} satisfies ComponentFamilyStateV2<ValueType, FamilyKey>;
};

13
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentInstanceContext.ts Normal file
View File

@ -0,0 +1,13 @@
import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
import { createContext } from 'react';
export const createComponentInstanceContext = <
T extends ComponentStateKeyV2 = ComponentStateKeyV2,
>(
initialValue?: T,
) => {
return createContext<T | null>(
initialValue ?? null,
) as ComponentInstanceStateContext<T>;
};

6
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentReadOnlySelector.ts
View File

@ -1,6 +1,6 @@
import { selectorFamily } from 'recoil';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
import { RecoilComponentStateKey } from '@/ui/utilities/state/component-state/types/RecoilComponentStateKey';
import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter';
export const createComponentReadOnlySelector = <ValueType>({
@ -8,9 +8,9 @@ export const createComponentReadOnlySelector = <ValueType>({
get,
}: {
key: string;
get: SelectorGetter<ValueType, ComponentStateKey>;
get: SelectorGetter<ValueType, RecoilComponentStateKey>;
}) => {
return selectorFamily<ValueType, ComponentStateKey>({
return selectorFamily<ValueType, RecoilComponentStateKey>({
key,
get,
});

8
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelector.ts
View File

@ -1,6 +1,6 @@
import { selectorFamily } from 'recoil';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
import { RecoilComponentStateKey } from '@/ui/utilities/state/component-state/types/RecoilComponentStateKey';
import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter';
import { SelectorSetter } from '@/ui/utilities/state/types/SelectorSetter';
@ -10,10 +10,10 @@ export const createComponentSelector = <ValueType>({
set,
}: {
key: string;
get: SelectorGetter<ValueType, ComponentStateKey>;
set: SelectorSetter<ValueType, ComponentStateKey>;
get: SelectorGetter<ValueType, RecoilComponentStateKey>;
set: SelectorSetter<ValueType, RecoilComponentStateKey>;
}) => {
return selectorFamily<ValueType, ComponentStateKey>({
return selectorFamily<ValueType, RecoilComponentStateKey>({
key,
get,
set,

47
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelectorV2.ts Normal file
View File

@ -0,0 +1,47 @@
import { selectorFamily } from 'recoil';
import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
import { ComponentReadOnlySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentReadOnlySelectorV2';
import { ComponentSelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentSelectorV2';
import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter';
import { SelectorSetter } from '@/ui/utilities/state/types/SelectorSetter';
import { isDefined } from 'twenty-ui';
export const createComponentSelectorV2 = <ValueType>({
key,
get,
set,
instanceContext,
}: {
key: string;
get: SelectorGetter<ValueType, ComponentStateKeyV2>;
set?: SelectorSetter<ValueType, ComponentStateKeyV2>;
instanceContext: ComponentInstanceStateContext<any> | null;
}): ComponentSelectorV2<ValueType> | ComponentReadOnlySelectorV2<ValueType> => {
if (isDefined(instanceContext)) {
globalComponentInstanceContextMap.set(key, instanceContext);
}
if (isDefined(set)) {
return {
type: 'ComponentSelector',
key,
selectorFamily: selectorFamily<ValueType, ComponentStateKeyV2>({
key,
get,
set,
}),
} satisfies ComponentSelectorV2<ValueType>;
} else {
return {
type: 'ComponentReadOnlySelector',
key,
selectorFamily: selectorFamily<ValueType, ComponentStateKeyV2>({
key,
get,
}),
} satisfies ComponentReadOnlySelectorV2<ValueType>;
}
};

4
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentState.ts
View File

@ -1,6 +1,6 @@
import { AtomEffect, atomFamily } from 'recoil';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
import { RecoilComponentStateKey } from '@/ui/utilities/state/component-state/types/RecoilComponentStateKey';
type CreateComponentStateType<ValueType> = {
key: string;
@ -13,7 +13,7 @@ export const createComponentState = <ValueType>({
defaultValue,
effects,
}: CreateComponentStateType<ValueType>) => {
return atomFamily<ValueType, ComponentStateKey>({
return atomFamily<ValueType, RecoilComponentStateKey>({
key,
default: defaultValue,
effects: effects,

28
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentStateV2.ts
View File

@ -1,37 +1,35 @@
import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
import { ComponentStateV2 } from '@/ui/utilities/state/component-state/types/ComponentStateV2';
import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
import { AtomEffect, atomFamily } from 'recoil';
import { ScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopeInternalContext';
import { ComponentState } from '@/ui/utilities/state/component-state/types/ComponentState';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
import { isDefined } from '~/utils/isDefined';
type CreateComponentStateV2Type<ValueType> = {
type CreateComponentInstanceStateArgs<ValueType> = {
key: string;
defaultValue: ValueType;
componentContext?: ScopeInternalContext<any> | null;
componentInstanceContext: ComponentInstanceStateContext<any> | null;
effects?: AtomEffect<ValueType>[];
};
export const createComponentStateV2 = <ValueType>({
key,
defaultValue,
componentContext,
componentInstanceContext,
effects,
}: CreateComponentStateV2Type<ValueType>): ComponentState<ValueType> => {
if (isDefined(componentContext)) {
if (!isDefined((window as any).componentContextStateMap)) {
(window as any).componentContextStateMap = new Map();
}
(window as any).componentContextStateMap.set(key, componentContext);
}: CreateComponentInstanceStateArgs<ValueType>): ComponentStateV2<ValueType> => {
if (isDefined(componentInstanceContext)) {
globalComponentInstanceContextMap.set(key, componentInstanceContext);
}
return {
type: 'ComponentState',
key,
atomFamily: atomFamily<ValueType, ComponentStateKey>({
atomFamily: atomFamily<ValueType, ComponentStateKeyV2>({
key,
default: defaultValue,
effects: effects,
}),
};
} satisfies ComponentStateV2<ValueType>;
};

38
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentStateV2_alpha.ts Normal file
View File

@ -0,0 +1,38 @@
import { AtomEffect, atomFamily } from 'recoil';
import { ScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopeInternalContext';
import { RecoilComponentState } from '@/ui/utilities/state/component-state/types/RecoilComponentState';
import { RecoilComponentStateKey } from '@/ui/utilities/state/component-state/types/RecoilComponentStateKey';
import { isDefined } from '~/utils/isDefined';
type CreateComponentStateV2Type<ValueType> = {
key: string;
defaultValue: ValueType;
componentContext?: ScopeInternalContext<any> | null;
effects?: AtomEffect<ValueType>[];
};
export const createComponentStateV2_alpha = <ValueType>({
key,
defaultValue,
componentContext,
effects,
}: CreateComponentStateV2Type<ValueType>): RecoilComponentState<ValueType> => {
if (isDefined(componentContext)) {
if (!isDefined((window as any).componentContextStateMap)) {
(window as any).componentContextStateMap = new Map();
}
(window as any).componentContextStateMap.set(key, componentContext);
}
return {
key,
atomFamily: atomFamily<ValueType, RecoilComponentStateKey>({
key,
default: defaultValue,
effects: effects,
}),
};
};

9
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createEventContext.ts Normal file
View File

@ -0,0 +1,9 @@
import { createContext } from 'react';
export const createEventContext = <
Events extends Record<string, (...args: any) => void>,
>(
initialValue?: Events,
) => {
return createContext<Events>((initialValue ?? {}) as Events);
};

4
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentReadOnlySelector.ts
View File

@ -1,10 +1,10 @@
import { RecoilValueReadOnly } from 'recoil';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
import { RecoilComponentStateKey } from '@/ui/utilities/state/component-state/types/RecoilComponentStateKey';
export const extractComponentReadOnlySelector = <StateType>(
componentSelector: (
componentStateKey: ComponentStateKey,
componentStateKey: RecoilComponentStateKey,
) => RecoilValueReadOnly<StateType>,
scopeId: string,
) => {

4
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentSelector.ts
View File

@ -1,10 +1,10 @@
import { RecoilState } from 'recoil';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
import { RecoilComponentStateKey } from '@/ui/utilities/state/component-state/types/RecoilComponentStateKey';
export const extractComponentSelector = <StateType>(
componentSelector: (
componentStateKey: ComponentStateKey,
componentStateKey: RecoilComponentStateKey,
) => RecoilState<StateType>,
scopeId: string,
) => {

4
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentState.ts
View File

@ -1,10 +1,10 @@
import { RecoilState } from 'recoil';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
import { RecoilComponentStateKey } from '@/ui/utilities/state/component-state/types/RecoilComponentStateKey';
export const extractComponentState = <StateType>(
componentState: (
componentStateKey: ComponentStateKey,
componentStateKey: RecoilComponentStateKey,
) => RecoilState<StateType>,
scopeId: string,
) => {

21
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap.ts Normal file
View File

@ -0,0 +1,21 @@
import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
import { isDefined } from 'twenty-ui';
class ComponentInstanceContextMap {
constructor() {
if (!isDefined((window as any).componentComponentStateContextMap)) {
(window as any).componentComponentStateContextMap = new Map();
}
}
public get(key: string): ComponentInstanceStateContext<any> {
return (window as any).componentComponentStateContextMap.get(key);
}
public set(key: string, context: ComponentInstanceStateContext<any>) {
(window as any).componentComponentStateContextMap.set(key, context);
}
}
export const globalComponentInstanceContextMap =
new ComponentInstanceContextMap();