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

64
packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedFamilyState.test.tsx
View File

@ -1,64 +0,0 @@
import { act, renderHook } from '@testing-library/react';
import { RecoilRoot, RecoilState } from 'recoil';
import { undefined } from 'zod';
import { useRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState';
import { FamilyStateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey';
import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';
const testState = createFamilyStateScopeMap({
key: 'sampleKey',
defaultValue: 'defaultValue',
});
describe('useRecoilScopedFamilyState', () => {
it('Should work as expected', async () => {
const { result, rerender } = renderHook(
({
recoilState,
scopeId,
familyKey,
}: {
recoilState: (
scopedFamilyKey: FamilyStateScopeMapKey<string>,
) => RecoilState<string>;
scopeId: string;
familyKey?: string;
}) => useRecoilScopedFamilyState(recoilState, scopeId, familyKey),
{
wrapper: RecoilRoot,
initialProps: {
recoilState: testState,
scopeId: 'scopeId',
},
},
);
expect(result.current).toEqual([undefined, undefined]);
rerender({
recoilState: testState,
scopeId: 'scopeId',
familyKey: 'familyKey',
});
const [value, setValue] = result.current;
expect(value).toBe('defaultValue');
expect(setValue).toBeInstanceOf(Function);
act(() => {
setValue?.('newValue');
});
expect(result.current[0]).toBe('newValue');
rerender({
recoilState: testState,
scopeId: 'scopeId1',
familyKey: 'familyKey',
});
expect(result.current[0]).toBe('defaultValue');
});
});

50
packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedState.test.tsx
View File

@ -1,50 +0,0 @@
import { createContext } from 'react';
import { act, renderHook } from '@testing-library/react';
import { atomFamily, RecoilRoot } from 'recoil';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
const testScopedState = atomFamily<string | null, string>({
key: 'testKey',
default: null,
});
const mockedContextValue = 'mocked-scope-id';
const MockedContext = createContext<string | null>(mockedContextValue);
const nullContext = createContext<string | null>(null);
const ERROR_MESSAGE =
'Using a scoped atom without a RecoilScope : testKey__"", verify that you are using a RecoilScope with a specific context if you intended to do so.';
describe('useRecoilScopedState', () => {
it('Should return the getter and setter for the state and context passed and work properly', async () => {
const { result } = renderHook(
() => useRecoilScopedState(testScopedState, MockedContext),
{
wrapper: ({ children }) => (
<MockedContext.Provider value={mockedContextValue}>
<RecoilRoot>{children}</RecoilRoot>
</MockedContext.Provider>
),
},
);
const [scopedState, setScopedState] = result.current;
expect(scopedState).toBeNull();
await act(async () => {
setScopedState('testValue');
});
const [scopedStateAfterSetter] = result.current;
expect(scopedStateAfterSetter).toEqual('testValue');
});
it('Should throw an error when the recoilScopeId is not found by the context', () => {
expect(() => {
renderHook(() => useRecoilScopedState(testScopedState, nullContext));
}).toThrow(ERROR_MESSAGE);
});
});

42
packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedValue.test.tsx
View File

@ -1,42 +0,0 @@
import { createContext } from 'react';
import { renderHook } from '@testing-library/react';
import { atomFamily, RecoilRoot } from 'recoil';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
const testScopedState = atomFamily<string | null, string>({
key: 'testKey',
default: null,
});
const mockedContextValue = 'mocked-scope-id';
const MockedContext = createContext<string | null>(mockedContextValue);
const nullContext = createContext<string | null>(null);
const ERROR_MESSAGE =
'Using a scoped atom without a RecoilScope : testKey__"", verify that you are using a RecoilScope with a specific context if you intended to do so.';
describe('useRecoilScopedValue', () => {
it('Should return the getter and setter for the state and context passed and work properly', async () => {
const { result } = renderHook(
() => useRecoilScopedValue(testScopedState, MockedContext),
{
wrapper: ({ children }) => (
<MockedContext.Provider value={mockedContextValue}>
<RecoilRoot>{children}</RecoilRoot>
</MockedContext.Provider>
),
},
);
const scopedState = result.current;
expect(scopedState).toBeNull();
});
it('Should throw an error when the recoilScopeId is not found by the context', () => {
expect(() => {
renderHook(() => useRecoilScopedValue(testScopedState, nullContext));
}).toThrow(ERROR_MESSAGE);
});
});

27
packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedValueV2.test.tsx
View File

@ -1,27 +0,0 @@
import { renderHook } from '@testing-library/react';
import { atomFamily, RecoilRoot } from 'recoil';
import { useRecoilScopedValueV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValueV2';
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
const scopedAtom = atomFamily<string, StateScopeMapKey>({
key: 'scopedAtomKey',
default: 'initialValue',
});
describe('useRecoilScopedValueV2', () => {
const mockedScopeId = 'mocked-scope-id';
it('Should return the scoped value using useRecoilScopedValueV2', () => {
const { result } = renderHook(
() => useRecoilScopedValueV2(scopedAtom, mockedScopeId),
{
wrapper: RecoilRoot,
},
);
const scopedValue = result.current;
expect(scopedValue).toBe('initialValue');
});
});

79
packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useSetRecoilScopedFamilyState.test.tsx
View File

@ -1,79 +0,0 @@
import { act, renderHook } from '@testing-library/react';
import { atomFamily, RecoilRoot } from 'recoil';
import { useRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState';
import { useSetRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useSetRecoilScopedFamilyState';
import { FamilyStateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey';
const mockedScopedFamilyState = atomFamily<
string,
FamilyStateScopeMapKey<string>
>({
key: 'scopedAtomKey',
default: 'initialValue',
});
describe('useSetRecoilScopedFamilyState', () => {
const mockedScopeId = 'mocked-scope-id';
const mockedFamilyKey = 'test-key-value';
it('Should return a setter that updates the state value and work properly', async () => {
const useCombinedHooks = () => {
const setRecoilScopedFamilyState = useSetRecoilScopedFamilyState(
mockedScopedFamilyState,
mockedScopeId,
mockedFamilyKey,
);
const [mocked] = useRecoilScopedFamilyState(
mockedScopedFamilyState,
mockedScopeId,
mockedFamilyKey,
);
return {
setRecoilScopedFamilyState,
scopedFamilyState: mocked,
};
};
const { result } = renderHook(() => useCombinedHooks(), {
wrapper: RecoilRoot,
});
expect(result.current.scopedFamilyState).toBe('initialValue');
expect(result.current.setRecoilScopedFamilyState).toBeInstanceOf(Function);
await act(async () => {
result.current.setRecoilScopedFamilyState?.('testValue');
});
expect(result.current.scopedFamilyState).toBe('testValue');
});
it('Should return undefined when familyKey is missing', async () => {
const useCombinedHooks = () => {
const setRecoilScopedFamilyState = useSetRecoilScopedFamilyState(
mockedScopedFamilyState,
mockedScopeId,
);
const [mocked] = useRecoilScopedFamilyState(
mockedScopedFamilyState,
mockedScopeId,
);
return {
setRecoilScopedFamilyState,
scopedFamilyState: mocked,
};
};
const { result } = renderHook(() => useCombinedHooks(), {
wrapper: RecoilRoot,
});
expect(result.current.scopedFamilyState).toBeUndefined();
expect(result.current.setRecoilScopedFamilyState).toBeUndefined();
});
});

47
packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useSetRecoilScopedStateV2.test.tsx
View File

@ -1,47 +0,0 @@
import { act, renderHook } from '@testing-library/react';
import { atomFamily, RecoilRoot } from 'recoil';
import { useRecoilScopedValueV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValueV2';
import { useSetRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useSetRecoilScopedStateV2';
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
const scopedAtom = atomFamily<string, StateScopeMapKey>({
key: 'scopedAtomKey',
default: 'initialValue',
});
describe('useSetRecoilScopedStateV2', () => {
const mockedScopeId = 'mocked-scope-id';
it('Should return a setter that updates the state value', async () => {
const useCombinedHooks = () => {
const setRecoilScopedStateV2 = useSetRecoilScopedStateV2(
scopedAtom,
mockedScopeId,
);
const recoilScopedStateValue = useRecoilScopedValueV2(
scopedAtom,
mockedScopeId,
);
return {
setRecoilScopedStateV2,
recoilScopedStateValue,
};
};
const { result } = renderHook(() => useCombinedHooks(), {
wrapper: RecoilRoot,
});
expect(result.current.recoilScopedStateValue).toBe('initialValue');
expect(result.current.setRecoilScopedStateV2).toBeInstanceOf(Function);
await act(async () => {
result.current.setRecoilScopedStateV2('testValue');
});
expect(result.current.recoilScopedStateValue).toBe('testValue');
});
});

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

@ -1,27 +0,0 @@
import { RecoilState, SerializableParam, useRecoilState } from 'recoil';
import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey';
export const useRecoilScopedFamilyState = <
StateType,
FamilyKey extends SerializableParam,
>(
recoilState: (
scopedFamilyKey: FamilyStateScopeMapKey<FamilyKey>,
) => RecoilState<StateType>,
scopeId: string,
familyKey?: FamilyKey,
) => {
const familyState = useRecoilState<StateType>(
recoilState({
scopeId,
familyKey: familyKey || ('' as FamilyKey),
}),
);
if (!familyKey) {
return [undefined, undefined];
}
return familyState;
};

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

@ -1,22 +0,0 @@
import { Context, useContext } from 'react';
import { RecoilState, useRecoilState } from 'recoil';
import { RecoilScopeContext } from '../states/RecoilScopeContext';
export const useRecoilScopedState = <StateType>(
recoilState: (param: string) => RecoilState<StateType>,
CustomRecoilScopeContext?: Context<string | null>,
) => {
const recoilScopeId = useContext(
CustomRecoilScopeContext ?? RecoilScopeContext,
);
if (!recoilScopeId)
throw new Error(
`Using a scoped atom without a RecoilScope : ${
recoilState('').key
}, verify that you are using a RecoilScope with a specific context if you intended to do so.`,
);
return useRecoilState<StateType>(recoilState(recoilScopeId));
};

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 { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
export const useRecoilScopedStateV2 = <StateType>(
recoilState: (scopedKey: StateScopeMapKey) => RecoilState<StateType>,
recoilState: (scopedKey: ComponentStateKey) => RecoilState<StateType>,
scopeId: string,
) => {
return useRecoilState<StateType>(

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

@ -1,25 +0,0 @@
import { Context, useContext } from 'react';
import { RecoilState, RecoilValueReadOnly, useRecoilValue } from 'recoil';
import { RecoilScopeContext } from '../states/RecoilScopeContext';
/**
* @deprecated use useRecoilScopedStateV2 instead
*/
export const useRecoilScopedValue = <T>(
recoilState: (param: string) => RecoilState<T> | RecoilValueReadOnly<T>,
CustomRecoilScopeContext?: Context<string | null>,
) => {
const recoilScopeId = useContext(
CustomRecoilScopeContext ?? RecoilScopeContext,
);
if (!recoilScopeId)
throw new Error(
`Using a scoped atom without a RecoilScope : ${
recoilState('').key
}, verify that you are using a RecoilScope with a specific context if you intended to do so.`,
);
return useRecoilValue<T>(recoilState(recoilScopeId));
};

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

@ -1,14 +0,0 @@
import { RecoilState, useRecoilValue } from 'recoil';
import { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey';
export const useRecoilScopedValueV2 = <StateType>(
recoilState: (scopedKey: StateScopeMapKey) => RecoilState<StateType>,
scopeId: string,
) => {
return useRecoilValue<StateType>(
recoilState({
scopeId,
}),
);
};

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

@ -1,27 +0,0 @@
import { RecoilState, SerializableParam, useSetRecoilState } from 'recoil';
import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey';
export const useSetRecoilScopedFamilyState = <
StateType,
FamilyKey extends SerializableParam,
>(
recoilState: (
scopedFamilyKey: FamilyStateScopeMapKey<FamilyKey>,
) => RecoilState<StateType>,
scopeId: string,
familyKey?: FamilyKey,
) => {
const familyState = useSetRecoilState<StateType>(
recoilState({
scopeId,
familyKey: familyKey || ('' as FamilyKey),
}),
);
if (!familyKey) {
return;
}
return familyState;
};

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

@ -1,14 +0,0 @@
import { RecoilState, useSetRecoilState } from 'recoil';
import { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey';
export const useSetRecoilScopedStateV2 = <StateType>(
recoilState: (scopedKey: StateScopeMapKey) => RecoilState<StateType>,
scopeId: string,
) => {
return useSetRecoilState<StateType>(
recoilState({
scopeId,
}),
);
};

44
packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/__tests__/useScopeInternalContextOrThrow.test.tsx
View File

@ -1,44 +0,0 @@
import { createContext } from 'react';
import { renderHook } from '@testing-library/react';
import { useScopeInternalContextOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useScopeInternalContextOrThrow';
import { ScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopeInternalContext';
const mockedContextValue = 'mocked-scope-id';
const MockedContext = createContext<string | null>(mockedContextValue);
const nullContext = createContext<string | null>(null);
const ERROR_MESSAGE =
'Using a scope context without a ScopeInternalContext.Provider wrapper for context';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<MockedContext.Provider value={mockedContextValue}>
{children}
</MockedContext.Provider>
);
describe('useScopeInternalContextOrThrow', () => {
it('should work as expected', () => {
const { result } = renderHook(
() =>
useScopeInternalContextOrThrow(
MockedContext as ScopeInternalContext<{ scopeId: string }>,
),
{
wrapper: Wrapper,
},
);
expect(result.current).toBe(mockedContextValue);
});
it('should throw an error when used outside of the specified context', () => {
expect(() => {
renderHook(() =>
useScopeInternalContextOrThrow(
nullContext as ScopeInternalContext<{ scopeId: string }>,
),
);
}).toThrow(ERROR_MESSAGE);
});
});

192
packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/__tests__/useScopedState.test.ts
View File

@ -1,192 +0,0 @@
import { expect } from '@storybook/test';
import { act, renderHook } from '@testing-library/react';
import {
atomFamily,
RecoilRoot,
selector,
useRecoilCallback,
useRecoilState,
useRecoilValue,
} from 'recoil';
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';
import { getFamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector';
import { getScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector';
import { getSelectorScopeInjector } from '@/ui/utilities/recoil-scope/utils/getSelectorScopeInjector';
import { useScopedState } from '../useScopedState';
const scopeId = 'scopeId';
// scoped state
const defaultScopedState = 'defaultString';
const scopedState = atomFamily<string, StateScopeMapKey>({
key: 'ScopedStateKey',
default: defaultScopedState,
});
const scopedStateScopeInjector = getScopeInjector(scopedState);
// scoped selector
const anotherScopedState = atomFamily<number[], StateScopeMapKey>({
key: 'ScopedStateKey',
default: [1, 2, 3, 4, 5],
});
const scopedSelector = ({ scopeId }: StateScopeMapKey) =>
selector({
key: 'FilteredState',
get: ({ get }) => {
const scopedStateValue = get(anotherScopedState({ scopeId }));
return scopedStateValue.filter((value) => value % 2 === 0);
},
});
const selectorScopeInjector = getSelectorScopeInjector(scopedSelector);
// family state
const defaultValue = 'defaultString';
const scopedFamilyState = createFamilyStateScopeMap<string, string>({
key: 'FamilyStateKey',
defaultValue,
});
const familyScopeInjector = getFamilyScopeInjector(scopedFamilyState);
describe('useScopedState', () => {
it('should get scoped state', () => {
const {
result: {
current: { getScopedState },
},
} = renderHook(() => useScopedState(scopeId));
const scopedState = getScopedState(scopedStateScopeInjector);
const { result } = renderHook(
() => {
const [scoped, setScoped] = useRecoilState(scopedState);
return { scoped, setScoped };
},
{
wrapper: RecoilRoot,
},
);
expect(result.current.scoped).toBe(defaultScopedState);
const newValue = 'anotherValue';
act(() => {
result.current.setScoped(newValue);
});
expect(result.current.scoped).toBe(newValue);
});
it('should get scoped snapshot value', () => {
const {
result: {
current: { getScopedSnapshotValue },
},
} = renderHook(() => useScopedState(scopeId));
const { result } = renderHook(
() =>
useRecoilCallback(
({ snapshot }) =>
() =>
getScopedSnapshotValue(snapshot, scopedStateScopeInjector),
)(),
{ wrapper: RecoilRoot },
);
expect(result.current).toBe(defaultScopedState);
});
it('should get scoped selector', () => {
const {
result: {
current: { getScopedSelector },
},
} = renderHook(() => useScopedState(scopeId));
const recoilValue = getScopedSelector(selectorScopeInjector);
const { result } = renderHook(() => useRecoilValue(recoilValue), {
wrapper: RecoilRoot,
});
expect(result.current).toEqual([2, 4]);
});
it('should get scoped selector snapshot value', () => {
const {
result: {
current: { getScopedSelectorSnapshotValue },
},
} = renderHook(() => useScopedState(scopeId));
const { result } = renderHook(
() =>
useRecoilCallback(
({ snapshot }) =>
() =>
getScopedSelectorSnapshotValue(snapshot, selectorScopeInjector),
)(),
{ wrapper: RecoilRoot },
);
expect(result.current).toEqual([2, 4]);
});
it('should get scoped family state', () => {
const {
result: {
current: { getScopedFamilyState },
},
} = renderHook(() => useScopedState(scopeId));
const scopedFamilyState = getScopedFamilyState(familyScopeInjector);
const { result } = renderHook(
() => {
const [familyState, setFamilyState] = useRecoilState(
scopedFamilyState('familyKey'),
);
return { familyState, setFamilyState };
},
{
wrapper: RecoilRoot,
},
);
expect(result.current.familyState).toBe('defaultString');
const newValue = 'newValue';
act(() => {
result.current.setFamilyState(newValue);
});
expect(result.current.familyState).toBe(newValue);
});
it('should get scoped family snapshot value', () => {
const {
result: {
current: { getScopedFamilySnapshotValue },
},
} = renderHook(() => useScopedState(scopeId));
const { result } = renderHook(
() =>
useRecoilCallback(
({ snapshot }) =>
() =>
getScopedFamilySnapshotValue(snapshot, familyScopeInjector),
)(),
{ wrapper: RecoilRoot },
);
expect(result.current('sampleKey')).toBe('defaultString');
});
});

19
packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopeInternalContextOrThrow.ts
View File

@ -1,19 +0,0 @@
import { useContext } from 'react';
import { isNonNullable } from '~/utils/isNonNullable';
import { ScopeInternalContext } from '../types/ScopeInternalContext';
export const useScopeInternalContextOrThrow = <T extends { scopeId: string }>(
Context: ScopeInternalContext<T>,
) => {
const context = useContext(Context);
if (!isNonNullable(context)) {
throw new Error(
`Using a scope context without a ScopeInternalContext.Provider wrapper for context : ${Context.displayName}.`,
);
}
return context;
};

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

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

6
packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey.ts
View File

@ -1,6 +0,0 @@
import { SerializableParam } from 'recoil';
export type FamilyStateScopeMapKey<FamilyKey extends SerializableParam> = {
scopeId: string;
familyKey: FamilyKey;
};

3
packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey.ts
View File

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

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

@ -1,10 +1,10 @@
import { Context, createContext } from 'react';
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
type ScopeInternalContext<T extends StateScopeMapKey> = Context<T | null>;
type ScopeInternalContext<T extends ComponentStateKey> = Context<T | null>;
export const createScopeInternalContext = <T extends StateScopeMapKey>(
export const createScopeInternalContext = <T extends ComponentStateKey>(
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 { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
export type RecoilScopedSelector<StateType> = (
scopedKey: StateScopeMapKey,
scopedKey: ComponentStateKey,
) => 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 { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey';
import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
export type RecoilScopedState<StateType> = (
scopedKey: StateScopeMapKey,
scopedKey: ComponentStateKey,
) => RecoilState<StateType>;

40
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/__tests__/getFamilyScopeInjector.test.ts
View File

@ -1,40 +0,0 @@
import { act, renderHook } from '@testing-library/react';
import { RecoilRoot, useRecoilState } from 'recoil';
import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';
import { getFamilyScopeInjector } from '../getFamilyScopeInjector';
const defaultValue = 'defaultString';
const testState = createFamilyStateScopeMap<string, string>({
key: 'familyStateKey',
defaultValue,
});
describe('getFamilyScopeInjector', () => {
it('should return a scoped family state', () => {
const familyScopeInjector = getFamilyScopeInjector(testState);
const familyState = familyScopeInjector('scopeId', 'familyKey');
const { result } = renderHook(
() => {
const [family, setFamily] = useRecoilState(familyState);
return { family, setFamily };
},
{
wrapper: RecoilRoot,
},
);
expect(result.current.family).toBe(defaultValue);
const newValue = 'anotherValue';
act(() => {
result.current.setFamily(newValue);
});
expect(result.current.family).toBe(newValue);
});
});

45
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/__tests__/getScopeInjector.test.ts
View File

@ -1,45 +0,0 @@
import { act, renderHook } from '@testing-library/react';
import { atomFamily, RecoilRoot, useRecoilState } from 'recoil';
import { getScopeInjector } from '../getScopeInjector';
const defaultValue = 'defaultString';
const scopedState = atomFamily<
string,
{
scopeId: string;
}
>({
key: 'myStateKey',
default: defaultValue,
});
describe('getScopeInjector', () => {
it('should return the scoped state for the given scopeId', () => {
const scopeInjector = getScopeInjector(scopedState);
const scopeId = 'scopeId';
const recoilState = scopeInjector(scopeId);
const { result } = renderHook(
() => {
const [recoil, setRecoil] = useRecoilState(recoilState);
return { recoil, setRecoil };
},
{
wrapper: RecoilRoot,
},
);
expect(result.current.recoil).toBe(defaultValue);
const newValue = 'anotherValue';
act(() => {
result.current.setRecoil(newValue);
});
expect(result.current.recoil).toBe(newValue);
});
});

38
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/__tests__/getSelectorScopeInjector.test.ts
View File

@ -1,38 +0,0 @@
import { renderHook } from '@testing-library/react';
import { atomFamily, RecoilRoot, selector, useRecoilValue } from 'recoil';
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
import { getSelectorScopeInjector } from '../getSelectorScopeInjector';
const scopedState = atomFamily<
number[],
{
scopeId: string;
}
>({
key: 'myStateKey',
default: [1, 2, 3, 4, 5],
});
const scopedSelector = ({ scopeId }: StateScopeMapKey) =>
selector({
key: 'FilteredState',
get: ({ get }) => {
const scopedStateValue = get(scopedState({ scopeId }));
return scopedStateValue.filter((value) => value % 2 === 0);
},
});
describe('getSelectorScopeInjector', () => {
it('should return a valid SelectorScopeInjector', () => {
const selectorScopeInjector = getSelectorScopeInjector(scopedSelector);
const recoilValue = selectorScopeInjector('scopeId');
const { result } = renderHook(() => useRecoilValue(recoilValue), {
wrapper: RecoilRoot,
});
expect(result.current).toEqual([2, 4]);
});
});

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

@ -1,47 +0,0 @@
import {
DefaultValue,
GetCallback,
GetRecoilValue,
Loadable,
RecoilValue,
ResetRecoilState,
selectorFamily,
SerializableParam,
SetRecoilState,
WrappedValue,
} from 'recoil';
import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey';
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 createFamilySelectorScopeMap = <
ValueType,
FamilyKey extends SerializableParam,
>({
key,
get,
set,
}: {
key: string;
get: SelectorGetter<ValueType, FamilyStateScopeMapKey<FamilyKey>>;
set: SelectorSetter<ValueType, FamilyStateScopeMapKey<FamilyKey>>;
}) => {
return selectorFamily<ValueType, FamilyStateScopeMapKey<FamilyKey>>({
key,
get,
set,
});
};

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

@ -1,19 +0,0 @@
import { atomFamily, SerializableParam } from 'recoil';
import { FamilyStateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey';
export const createFamilyStateScopeMap = <
ValueType,
FamilyKey extends SerializableParam,
>({
key,
defaultValue,
}: {
key: string;
defaultValue: ValueType;
}) => {
return atomFamily<ValueType, FamilyStateScopeMapKey<FamilyKey>>({
key,
default: defaultValue,
});
};

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

@ -1,30 +0,0 @@
import {
GetCallback,
GetRecoilValue,
Loadable,
RecoilValue,
selectorFamily,
WrappedValue,
} from 'recoil';
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
type SelectorGetter<T, P> = (
param: P,
) => (opts: {
get: GetRecoilValue;
getCallback: GetCallback;
}) => Promise<T> | RecoilValue<T> | Loadable<T> | WrappedValue<T> | T;
export const createSelectorReadOnlyScopeMap = <ValueType>({
key,
get,
}: {
key: string;
get: SelectorGetter<ValueType, StateScopeMapKey>;
}) => {
return selectorFamily<ValueType, StateScopeMapKey>({
key,
get,
});
};

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

@ -1,43 +0,0 @@
import {
DefaultValue,
GetCallback,
GetRecoilValue,
Loadable,
RecoilValue,
ResetRecoilState,
selectorFamily,
SetRecoilState,
WrappedValue,
} from 'recoil';
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
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 createSelectorScopeMap = <ValueType>({
key,
get,
set,
}: {
key: string;
get: SelectorGetter<ValueType, StateScopeMapKey>;
set: SelectorSetter<ValueType, StateScopeMapKey>;
}) => {
return selectorFamily<ValueType, StateScopeMapKey>({
key,
get,
set,
});
};

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

@ -1,16 +0,0 @@
import { atomFamily } from 'recoil';
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
export const createStateScopeMap = <ValueType>({
key,
defaultValue,
}: {
key: string;
defaultValue: ValueType;
}) => {
return atomFamily<ValueType, StateScopeMapKey>({
key,
default: defaultValue,
});
};

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

@ -1,23 +0,0 @@
import { RecoilState, SerializableParam } from 'recoil';
import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey';
export type FamilyScopeInjector<
StateType,
FamilyKey extends SerializableParam,
> = (scopeId: string, familyKey: FamilyKey) => RecoilState<StateType>;
export const getFamilyScopeInjector = <
StateType,
FamilyKey extends SerializableParam,
>(
scopedFamilyState: (
scopedFamilyKey: FamilyStateScopeMapKey<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/getFamilyState.ts
View File

@ -1,16 +0,0 @@
import { RecoilState, SerializableParam } from 'recoil';
import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey';
export const getFamilyState = <StateType, FamilyKey extends SerializableParam>(
familyStateScopeMap: (
scopedFamilyKey: FamilyStateScopeMapKey<FamilyKey>,
) => RecoilState<StateType>,
scopeId: string,
) => {
return (familyKey: FamilyKey) =>
familyStateScopeMap({
scopeId,
familyKey: familyKey || ('' as FamilyKey),
});
};

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

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

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

@ -1,13 +1,13 @@
import { RecoilState, SerializableParam } from 'recoil';
import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey';
import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey';
export const getScopedFamilyStateDeprecated = <
StateType,
FamilyKey extends SerializableParam,
>(
recoilState: (
scopedFamilyKey: FamilyStateScopeMapKey<FamilyKey>,
scopedFamilyKey: ComponentFamilyStateKey<FamilyKey>,
) => RecoilState<StateType>,
scopeId: string,
familyKey: FamilyKey,

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

@ -1,10 +0,0 @@
import { RecoilState } from 'recoil';
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
export const getSelector = <StateType>(
stateScopeMap: (stateScopeMapKey: StateScopeMapKey) => RecoilState<StateType>,
scopeId: string,
) => {
return () => stateScopeMap({ scopeId });
};

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

@ -1,12 +0,0 @@
import { RecoilValueReadOnly } from 'recoil';
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
export const getSelectorReadOnly = <StateType>(
stateScopeMap: (
stateScopeMapKey: StateScopeMapKey,
) => RecoilValueReadOnly<StateType>,
scopeId: string,
) => {
return () => stateScopeMap({ scopeId });
};

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

@ -1,16 +0,0 @@
import { RecoilValueReadOnly } from 'recoil';
import { RecoilScopedSelector } from '@/ui/utilities/recoil-scope/types/RecoilScopedSelector';
export type SelectorScopeInjector<StateType> = (
scopeId: string,
) => RecoilValueReadOnly<StateType>;
export const getSelectorScopeInjector = <StateType>(
scopedSelector: RecoilScopedSelector<StateType>,
): SelectorScopeInjector<StateType> => {
return (scopeId: string) =>
scopedSelector({
scopeId,
});
};

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

@ -1,10 +0,0 @@
import { RecoilState } from 'recoil';
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
export const getState = <StateType>(
stateScopeMap: (stateScopeMapKey: StateScopeMapKey) => RecoilState<StateType>,
scopeId: string,
) => {
return () => stateScopeMap({ scopeId });
};