Remove recoil sync (#11569)

Recoil-sync was causing issues with Firefox, replacing it with a simpler
mechanism to hydrate variables on page load

---------

Co-authored-by: etiennejouan <jouan.etienne@gmail.com>

packages/twenty-front/src/modules/auth/components/AuthModal.tsx

@@ -10,18 +10,10 @@ const StyledContent = styled.div`
 
 type AuthModalProps = {
   children: React.ReactNode;
-  isOpenAnimated?: boolean;
 };
 
-export const AuthModal = ({
-  children,
-  isOpenAnimated = true,
-}: AuthModalProps) => (
-  <Modal
-    padding={'none'}
-    modalVariant="primary"
-    isOpenAnimated={isOpenAnimated}
-  >
+export const AuthModal = ({ children }: AuthModalProps) => (
+  <Modal padding={'none'} modalVariant="primary">
     <ScrollWrapper componentInstanceId="scroll-wrapper-modal-content">
       <StyledContent>{children}</StyledContent>
     </ScrollWrapper>

packages/twenty-front/src/modules/auth/components/VerifyEmailEffect.tsx

@@ -4,12 +4,10 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 
 import { useVerifyLogin } from '@/auth/hooks/useVerifyLogin';
-import { animateModalState } from '@/auth/states/animateModalState';
 import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
 import { useLingui } from '@lingui/react/macro';
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 import { EmailVerificationSent } from '../sign-in-up/components/EmailVerificationSent';
@@ -21,7 +19,6 @@ export const VerifyEmailEffect = () => {
 
   const [searchParams] = useSearchParams();
   const [isError, setIsError] = useState(false);
-  const setAnimateModal = useSetRecoilState(animateModalState);
 
   const email = searchParams.get('email');
   const emailVerificationToken = searchParams.get('emailVerificationToken');
@@ -52,7 +49,6 @@ export const VerifyEmailEffect = () => {
 
         const workspaceUrl = getWorkspaceUrl(workspaceUrls);
         if (workspaceUrl.slice(0, -1) !== window.location.origin) {
-          setAnimateModal(false);
           return await redirectToWorkspaceDomain(workspaceUrl, AppPath.Verify, {
             loginToken: loginToken.token,
           });

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

@@ -41,7 +41,6 @@ import { getTimeFormatFromWorkspaceTimeFormat } from '@/localization/utils/getTi
 import { currentUserState } from '../states/currentUserState';
 import { tokenPairState } from '../states/tokenPairState';
 
-import { animateModalState } from '@/auth/states/animateModalState';
 import { currentUserWorkspaceState } from '@/auth/states/currentUserWorkspaceState';
 import {
   SignInUpStep,
@@ -115,7 +114,6 @@ export const useAuth = () => {
   const goToRecoilSnapshot = useGotoRecoilSnapshot();
 
   const setDateTimeFormat = useSetRecoilState(dateTimeFormatState);
-  const setAnimateModal = useSetRecoilState(animateModalState);
 
   const [, setSearchParams] = useSearchParams();
 
@@ -422,7 +420,6 @@ export const useAuth = () => {
       }
 
       if (isMultiWorkspaceEnabled) {
-        setAnimateModal(false);
         return await redirectToWorkspaceDomain(
           getWorkspaceUrl(signUpResult.data.signUp.workspace.workspaceUrls),
           isEmailVerificationRequired ? AppPath.SignInUp : AppPath.Verify,
@@ -446,7 +443,6 @@ export const useAuth = () => {
       handleGetAuthTokensFromLoginToken,
       setSignInUpStep,
       setSearchParams,
-      setAnimateModal,
       isEmailVerificationRequired,
       redirectToWorkspaceDomain,
     ],

packages/twenty-front/src/modules/auth/states/animateModalState.ts

@@ -1,26 +0,0 @@
-import { urlSyncEffect } from 'recoil-sync';
-import { createState } from 'twenty-ui/utilities';
-
-export const animateModalState = createState<boolean>({
-  key: 'animateModalState',
-  defaultValue: true,
-  effects: [
-    urlSyncEffect({
-      itemKey: 'animateModal',
-      refine: (value: unknown) => {
-        if (typeof value === 'boolean') {
-          return {
-            type: 'success',
-            value: value as boolean,
-            warnings: [],
-          } as const;
-        }
-        return {
-          type: 'failure',
-          message: 'Invalid animateModalState',
-          path: [] as any,
-        } as const;
-      },
-    }),
-  ],
-});

packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts

@@ -1,34 +1,8 @@
 import { BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type';
 import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/billing/constants/BillingCheckoutSessionDefaultValue';
-import { syncEffect } from 'recoil-sync';
 import { createState } from 'twenty-ui/utilities';
 
 export const billingCheckoutSessionState = createState<BillingCheckoutSession>({
   key: 'billingCheckoutSessionState',
   defaultValue: BILLING_CHECKOUT_SESSION_DEFAULT_VALUE,
-  effects: [
-    syncEffect({
-      itemKey: 'billingCheckoutSession',
-      refine: (value: unknown) => {
-        if (
-          typeof value === 'object' &&
-          value !== null &&
-          'plan' in value &&
-          'interval' in value &&
-          'requirePaymentMethod' in value
-        ) {
-          return {
-            type: 'success',
-            value: value as BillingCheckoutSession,
-            warnings: [],
-          } as const;
-        }
-        return {
-          type: 'failure',
-          message: 'Invalid BillingCheckoutSessionState',
-          path: [] as any,
-        } as const;
-      },
-    }),
-  ],
 });