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

4
packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBar.tsx
View File

@ -28,8 +28,8 @@ const StyledContainerActionBar = styled.div`
`;
export const ActionBar = () => {
const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
const actionBarEntries = useRecoilValue(actionBarEntriesState);
const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState());
const actionBarEntries = useRecoilValue(actionBarEntriesState());
const wrapperRef = useRef<HTMLDivElement>(null);
if (contextMenuIsOpen) {

2
packages/twenty-front/src/modules/ui/navigation/action-bar/components/__stories__/ActionBar.stories.tsx
View File

@ -9,7 +9,7 @@ import { actionBarOpenState } from '../../states/actionBarIsOpenState';
import { ActionBar } from '../ActionBar';
const FilledActionBar = () => {
const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
const setActionBarOpenState = useSetRecoilState(actionBarOpenState());
setActionBarOpenState(true);
return <ActionBar />;
};

6
packages/twenty-front/src/modules/ui/navigation/action-bar/states/actionBarEntriesState.ts
View File

@ -1,8 +1,8 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
import { ActionBarEntry } from '../types/ActionBarEntry';
export const actionBarEntriesState = atom<ActionBarEntry[]>({
export const actionBarEntriesState = createState<ActionBarEntry[]>({
key: 'actionBarEntriesState',
default: [],
defaultValue: [],
});

6
packages/twenty-front/src/modules/ui/navigation/action-bar/states/actionBarIsOpenState.ts
View File

@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export const actionBarOpenState = atom<boolean>({
export const actionBarOpenState = createState<boolean>({
key: 'actionBarOpenState',
default: false,
defaultValue: false,
});

8
packages/twenty-front/src/modules/ui/navigation/context-menu/components/ContextMenu.tsx
View File

@ -37,10 +37,10 @@ const StyledContainerContextMenu = styled.div<StyledContainerProps>`
`;
export const ContextMenu = () => {
const contextMenuPosition = useRecoilValue(contextMenuPositionState);
const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
const contextMenuEntries = useRecoilValue(contextMenuEntriesState);
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
const contextMenuPosition = useRecoilValue(contextMenuPositionState());
const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState());
const contextMenuEntries = useRecoilValue(contextMenuEntriesState());
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState());
const wrapperRef = useRef<HTMLDivElement>(null);
useListenClickOutside({

4
packages/twenty-front/src/modules/ui/navigation/context-menu/components/__stories__/ContextMenu.stories.tsx
View File

@ -10,12 +10,12 @@ import { contextMenuPositionState } from '../../states/contextMenuPositionState'
import { ContextMenu } from '../ContextMenu';
const FilledContextMenu = () => {
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState());
setContextMenuPosition({
x: 100,
y: 10,
});
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState());
setContextMenuOpenState(true);
return <ContextMenu />;
};

6
packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuEntriesState.ts
View File

@ -1,8 +1,8 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
import { ContextMenuEntry } from '../types/ContextMenuEntry';
export const contextMenuEntriesState = atom<ContextMenuEntry[]>({
export const contextMenuEntriesState = createState<ContextMenuEntry[]>({
key: 'contextMenuEntriesState',
default: [],
defaultValue: [],
});

6
packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuIsOpenState.ts
View File

@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export const contextMenuIsOpenState = atom<boolean>({
export const contextMenuIsOpenState = createState<boolean>({
key: 'contextMenuIsOpenState',
default: false,
defaultValue: false,
});

7
packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuPositionState.ts
View File

@ -1,10 +1,9 @@
import { atom } from 'recoil';
import { PositionType } from '@/ui/navigation/context-menu/types/PositionType';
import { createState } from '@/ui/utilities/state/utils/createState';
export const contextMenuPositionState = atom<PositionType>({
export const contextMenuPositionState = createState<PositionType>({
key: 'contextMenuPositionState',
default: {
defaultValue: {
x: null,
y: null,
},

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
View File

@ -37,7 +37,7 @@ export const NavigationDrawerBackButton = ({
}: NavigationDrawerBackButtonProps) => {
const theme = useTheme();
const navigate = useNavigate();
const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState());
return (
<StyledContainer>

6
packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts
View File

@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export const navigationMemorizedUrlState = atom<string>({
export const navigationMemorizedUrlState = createState<string>({
key: 'navigationMemorizedUrlState',
default: '/',
defaultValue: '/',
});

2
packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/__tests__/useStepBar.test.tsx
View File

@ -11,7 +11,7 @@ const renderHooks = (initialStep: number) => {
const { nextStep, prevStep, reset, setStep } = useStepBar({
initialStep,
});
const stepBarInternal = useRecoilValue(stepBarInternalState);
const stepBarInternal = useRecoilValue(stepBarInternalState());
return {
nextStep,

5
packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/useStepBar.ts
View File

@ -8,8 +8,9 @@ export type StepsOptions = {
};
export const useStepBar = ({ initialStep }: StepsOptions) => {
const [stepBarInternal, setStepBarInternal] =
useRecoilState(stepBarInternalState);
const [stepBarInternal, setStepBarInternal] = useRecoilState(
stepBarInternalState(),
);
const nextStep = () => {
setStepBarInternal((prevState) => ({

6
packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts
View File

@ -1,12 +1,12 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export type StepsState = {
activeStep: number;
};
export const stepBarInternalState = atom<StepsState>({
export const stepBarInternalState = createState<StepsState>({
key: 'step-bar/internal-state',
default: {
defaultValue: {
activeStep: -1,
},
});