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

14
packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx
View File

@ -76,13 +76,13 @@ describe('useAuth', () => {
const { result } = renderHook(
() => {
const client = useApolloClient();
const icons = useRecoilValue(iconsState);
const authProviders = useRecoilValue(authProvidersState);
const billing = useRecoilValue(billingState);
const isSignInPrefilled = useRecoilValue(isSignInPrefilledState);
const supportChat = useRecoilValue(supportChatState);
const telemetry = useRecoilValue(telemetryState);
const isDebugMode = useRecoilValue(isDebugModeState);
const icons = useRecoilValue(iconsState());
const authProviders = useRecoilValue(authProvidersState());
const billing = useRecoilValue(billingState());
const isSignInPrefilled = useRecoilValue(isSignInPrefilledState());
const supportChat = useRecoilValue(supportChatState());
const telemetry = useRecoilValue(telemetryState());
const isDebugMode = useRecoilValue(isDebugModeState());
return {
...useAuth(),
client,

2
packages/twenty-front/src/modules/auth/hooks/__test__/useIsLogged.test.ts
View File

@ -9,7 +9,7 @@ const renderHooks = () => {
const { result } = renderHook(
() => {
const isLogged = useIsLogged();
const setTokenPair = useSetRecoilState(tokenPairState);
const setTokenPair = useSetRecoilState(tokenPairState());
return {
isLogged,

10
packages/twenty-front/src/modules/auth/hooks/__test__/useOnboardingStatus.test.ts
View File

@ -35,13 +35,13 @@ const renderHooks = () => {
const { result } = renderHook(
() => {
const onboardingStatus = useOnboardingStatus();
const setBilling = useSetRecoilState(billingState);
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
const setBilling = useSetRecoilState(billingState());
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState());
const setCurrentWorkspaceMember = useSetRecoilState(
currentWorkspaceMemberState,
currentWorkspaceMemberState(),
);
const setTokenPair = useSetRecoilState(tokenPairState);
const setVerifyPending = useSetRecoilState(isVerifyPendingState);
const setTokenPair = useSetRecoilState(tokenPairState());
const setVerifyPending = useSetRecoilState(isVerifyPendingState());
return {
onboardingStatus,

38
packages/twenty-front/src/modules/auth/hooks/useAuth.ts
View File

@ -32,14 +32,14 @@ import { currentUserState } from '../states/currentUserState';
import { tokenPairState } from '../states/tokenPairState';
export const useAuth = () => {
const [, setTokenPair] = useRecoilState(tokenPairState);
const setCurrentUser = useSetRecoilState(currentUserState);
const [, setTokenPair] = useRecoilState(tokenPairState());
const setCurrentUser = useSetRecoilState(currentUserState());
const setCurrentWorkspaceMember = useSetRecoilState(
currentWorkspaceMemberState,
currentWorkspaceMemberState(),
);
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
const setIsVerifyPendingState = useSetRecoilState(isVerifyPendingState);
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState());
const setIsVerifyPendingState = useSetRecoilState(isVerifyPendingState());
const [challenge] = useChallengeMutation();
const [signUp] = useSignUpMutation();
@ -141,26 +141,26 @@ export const useAuth = () => {
({ snapshot }) =>
async () => {
const emptySnapshot = snapshot_UNSTABLE();
const iconsValue = snapshot.getLoadable(iconsState).getValue();
const iconsValue = snapshot.getLoadable(iconsState()).getValue();
const authProvidersValue = snapshot
.getLoadable(authProvidersState)
.getLoadable(authProvidersState())
.getValue();
const billing = snapshot.getLoadable(billingState).getValue();
const billing = snapshot.getLoadable(billingState()).getValue();
const isSignInPrefilled = snapshot
.getLoadable(isSignInPrefilledState)
.getLoadable(isSignInPrefilledState())
.getValue();
const supportChat = snapshot.getLoadable(supportChatState).getValue();
const telemetry = snapshot.getLoadable(telemetryState).getValue();
const isDebugMode = snapshot.getLoadable(isDebugModeState).getValue();
const supportChat = snapshot.getLoadable(supportChatState()).getValue();
const telemetry = snapshot.getLoadable(telemetryState()).getValue();
const isDebugMode = snapshot.getLoadable(isDebugModeState()).getValue();
const initialSnapshot = emptySnapshot.map(({ set }) => {
set(iconsState, iconsValue);
set(authProvidersState, authProvidersValue);
set(billingState, billing);
set(isSignInPrefilledState, isSignInPrefilled);
set(supportChatState, supportChat);
set(telemetryState, telemetry);
set(isDebugModeState, isDebugMode);
set(iconsState(), iconsValue);
set(authProvidersState(), authProvidersValue);
set(billingState(), billing);
set(isSignInPrefilledState(), isSignInPrefilled);
set(supportChatState(), supportChat);
set(telemetryState(), telemetry);
set(isDebugModeState(), isDebugMode);
return undefined;
});

4
packages/twenty-front/src/modules/auth/hooks/useIsLogged.ts
View File

@ -5,8 +5,8 @@ import { isVerifyPendingState } from '@/auth/states/isVerifyPendingState';
import { tokenPairState } from '../states/tokenPairState';
export const useIsLogged = (): boolean => {
const [tokenPair] = useRecoilState(tokenPairState);
const isVerifyPending = useRecoilValue(isVerifyPendingState);
const [tokenPair] = useRecoilState(tokenPairState());
const isVerifyPending = useRecoilValue(isVerifyPendingState());
return !!tokenPair && !isVerifyPending;
};

6
packages/twenty-front/src/modules/auth/hooks/useOnboardingStatus.ts
View File

@ -11,9 +11,9 @@ import {
} from '../utils/getOnboardingStatus';
export const useOnboardingStatus = (): OnboardingStatus | undefined => {
const billing = useRecoilValue(billingState);
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const currentWorkspace = useRecoilValue(currentWorkspaceState);
const billing = useRecoilValue(billingState());
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
const currentWorkspace = useRecoilValue(currentWorkspaceState());
const isLoggedIn = useIsLogged();
return getOnboardingStatus({

2
packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
View File

@ -46,7 +46,7 @@ const StyledInputContainer = styled.div`
`;
export const SignInUpForm = () => {
const [authProviders] = useRecoilState(authProvidersState);
const [authProviders] = useRecoilState(authProvidersState());
const [showErrors, setShowErrors] = useState(false);
const { handleResetPassword } = useHandleResetPassword();
const workspace = useWorkspaceFromInviteHash();

2
packages/twenty-front/src/modules/auth/sign-in-up/hooks/useNavigateAfterSignInUp.ts
View File

@ -9,7 +9,7 @@ import { WorkspaceMember } from '~/generated/graphql.tsx';
export const useNavigateAfterSignInUp = () => {
const navigate = useNavigate();
const billing = useRecoilValue(billingState);
const billing = useRecoilValue(billingState());
const navigateAfterSignInUp = useCallback(
(
currentWorkspace: CurrentWorkspace,

2
packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts
View File

@ -19,7 +19,7 @@ const validationSchema = z
export type Form = z.infer<typeof validationSchema>;
export const useSignInUpForm = () => {
const isSignInPrefilled = useRecoilValue(isSignInPrefilledState);
const isSignInPrefilled = useRecoilValue(isSignInPrefilledState());
const form = useForm<Form>({
mode: 'onChange',
defaultValues: {

7
packages/twenty-front/src/modules/auth/states/currentUserState.ts
View File

@ -1,5 +1,4 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
import { User } from '~/generated/graphql';
export type CurrentUser = Pick<
@ -7,7 +6,7 @@ export type CurrentUser = Pick<
'id' | 'email' | 'supportUserHash' | 'canImpersonate'
>;
export const currentUserState = atom<CurrentUser | null>({
export const currentUserState = createState<CurrentUser | null>({
key: 'currentUserState',
default: null,
defaultValue: null,
});

7
packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts
View File

@ -1,11 +1,10 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
export const currentWorkspaceMemberState = atom<Omit<
export const currentWorkspaceMemberState = createState<Omit<
WorkspaceMember,
'createdAt' | 'updatedAt' | 'userId' | 'userEmail'
> | null>({
key: 'currentWorkspaceMemberState',
default: null,
defaultValue: null,
});

7
packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts
View File

@ -1,5 +1,4 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
import { Workspace } from '~/generated/graphql';
export type CurrentWorkspace = Pick<
@ -14,7 +13,7 @@ export type CurrentWorkspace = Pick<
| 'activationStatus'
>;
export const currentWorkspaceState = atom<CurrentWorkspace | null>({
export const currentWorkspaceState = createState<CurrentWorkspace | null>({
key: 'currentWorkspaceState',
default: null,
defaultValue: null,
});

6
packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts
View File

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

7
packages/twenty-front/src/modules/auth/states/tokenPairState.ts
View File

@ -1,10 +1,9 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
import { AuthTokenPair } from '~/generated/graphql';
import { cookieStorageEffect } from '~/utils/recoil-effects';
export const tokenPairState = atom<AuthTokenPair | null>({
export const tokenPairState = createState<AuthTokenPair | null>({
key: 'tokenPairState',
default: null,
defaultValue: null,
effects: [cookieStorageEffect('tokenPair')],
});