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

8
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
View File

@ -2,7 +2,7 @@ import { useRef } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { useRecoilState } from 'recoil';
import { useRecoilState, useRecoilValue } from 'recoil';
import { Key } from 'ts-key-enum';
import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
@ -41,12 +41,12 @@ const StyledRightDrawer = styled.div`
export const RightDrawer = () => {
const [isRightDrawerOpen, setIsRightDrawerOpen] = useRecoilState(
isRightDrawerOpenState,
isRightDrawerOpenState(),
);
const [isRightDrawerExpanded] = useRecoilState(isRightDrawerExpandedState);
const isRightDrawerExpanded = useRecoilValue(isRightDrawerExpandedState());
const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
const rightDrawerPage = useRecoilValue(rightDrawerPageState());
const { closeRightDrawer } = useRightDrawer();

2
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx
View File

@ -28,7 +28,7 @@ const StyledRightDrawerBody = styled.div`
`;
export const RightDrawerRouter = () => {
const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
const [rightDrawerPage] = useRecoilState(rightDrawerPageState());
let page = <></>;
let topBar = <></>;

2
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx
View File

@ -10,7 +10,7 @@ import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState
export const RightDrawerTopBarExpandButton = () => {
const [isRightDrawerExpanded, setIsRightDrawerExpanded] = useRecoilState(
isRightDrawerExpandedState,
isRightDrawerExpandedState(),
);
const handleButtonClick = () => {

8
packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx
View File

@ -12,10 +12,12 @@ describe('useRightDrawer', () => {
it('Should test the default behavior of useRightDrawer and change the states as the function calls', async () => {
const useCombinedHooks = () => {
const { openRightDrawer, closeRightDrawer } = useRightDrawer();
const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
const isRightDrawerExpanded = useRecoilValue(isRightDrawerExpandedState);
const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState());
const isRightDrawerExpanded = useRecoilValue(
isRightDrawerExpandedState(),
);
const rightDrawerPage = useRecoilValue(rightDrawerPageState);
const rightDrawerPage = useRecoilValue(rightDrawerPageState());
return {
openRightDrawer,

13
packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts
View File

@ -1,4 +1,4 @@
import { useRecoilState } from 'recoil';
import { useRecoilState, useSetRecoilState } from 'recoil';
import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState';
import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
@ -7,14 +7,15 @@ import { RightDrawerPages } from '../types/RightDrawerPages';
export const useRightDrawer = () => {
const [isRightDrawerOpen, setIsRightDrawerOpen] = useRecoilState(
isRightDrawerOpenState,
isRightDrawerOpenState(),
);
const [, setIsRightDrawerExpanded] = useRecoilState(
isRightDrawerExpandedState,
const setIsRightDrawerExpanded = useSetRecoilState(
isRightDrawerExpandedState(),
);
const [rightDrawerPage, setRightDrawerPage] =
useRecoilState(rightDrawerPageState);
const [rightDrawerPage, setRightDrawerPage] = useRecoilState(
rightDrawerPageState(),
);
const openRightDrawer = (rightDrawerPage: RightDrawerPages) => {
setRightDrawerPage(rightDrawerPage);

6
packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerExpandedState.ts
View File

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

6
packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts
View File

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

6
packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts
View File

@ -1,8 +1,8 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
import { RightDrawerPages } from '../types/RightDrawerPages';
export const rightDrawerPageState = atom<RightDrawerPages | null>({
export const rightDrawerPageState = createState<RightDrawerPages | null>({
key: 'ui/layout/right-drawer-page',
default: null,
defaultValue: null,
});