diff --git a/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx b/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx index 4afa4d005219..7f64849a27e0 100644 --- a/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx +++ b/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx @@ -4,8 +4,8 @@ import { PageChangeEffect } from '@/app/effect-components/PageChangeEffect'; import { AuthProvider } from '@/auth/components/AuthProvider'; import { ChromeExtensionSidecarEffect } from '@/chrome-extension-sidecar/components/ChromeExtensionSidecarEffect'; import { ChromeExtensionSidecarProvider } from '@/chrome-extension-sidecar/components/ChromeExtensionSidecarProvider'; +import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider'; import { ClientConfigProviderEffect } from '@/client-config/components/ClientConfigProviderEffect'; -import { isClientConfigLoadedState } from '@/client-config/states/isClientConfigLoadedState'; import { PromiseRejectionEffect } from '@/error-handler/components/PromiseRejectionEffect'; import { ApolloMetadataClientProvider } from '@/object-metadata/components/ApolloMetadataClientProvider'; import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider'; @@ -19,46 +19,46 @@ import { UserProvider } from '@/users/components/UserProvider'; import { UserProviderEffect } from '@/users/components/UserProviderEffect'; import { StrictMode } from 'react'; import { Outlet, useLocation } from 'react-router-dom'; -import { useRecoilState } from 'recoil'; import { getPageTitleFromPath } from '~/utils/title-utils'; export const AppRouterProviders = () => { const { pathname } = useLocation(); const pageTitle = getPageTitleFromPath(pathname); - const [isClientConfigLoaded] = useRecoilState(isClientConfigLoadedState); return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; diff --git a/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx b/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx index 52645ca5e128..3af2f15ada51 100644 --- a/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx +++ b/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilValue } from 'recoil'; import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer'; import { @@ -9,7 +9,6 @@ import { } from '@/analytics/hooks/useEventTracker'; import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken'; import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState'; -import { isClientConfigLoadedState } from '@/client-config/states/isClientConfigLoadedState'; import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { CommandType } from '@/command-menu/types/Command'; import { useNonSystemActiveObjectMetadataItems } from '@/object-metadata/hooks/useNonSystemActiveObjectMetadataItems'; @@ -32,7 +31,6 @@ import { isDefined } from '~/utils/isDefined'; export const PageChangeEffect = () => { const navigate = useNavigate(); const isMatchingLocation = useIsMatchingLocation(); - const [isClientConfigLoaded] = useRecoilState(isClientConfigLoadedState); const [previousLocation, setPreviousLocation] = useState(''); @@ -180,9 +178,6 @@ export const PageChangeEffect = () => { ]); useEffect(() => { - if (!isClientConfigLoaded) { - return; - } setTimeout(() => { setSessionId(); eventTracker('pageview', { @@ -194,7 +189,7 @@ export const PageChangeEffect = () => { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, }); }, 500); - }, [eventTracker, location.pathname, isClientConfigLoaded]); + }, [eventTracker, location.pathname]); const { requestFreshCaptchaToken } = useRequestFreshCaptchaToken(); const isCaptchaScriptLoaded = useRecoilValue(isCaptchaScriptLoadedState); diff --git a/packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx b/packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx new file mode 100644 index 000000000000..671842687435 --- /dev/null +++ b/packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx @@ -0,0 +1,11 @@ +import { useRecoilValue } from 'recoil'; + +import { isClientConfigLoadedState } from '@/client-config/states/isClientConfigLoadedState'; + +export const ClientConfigProvider: React.FC = ({ + children, +}) => { + const isClientConfigLoaded = useRecoilValue(isClientConfigLoadedState); + + return isClientConfigLoaded ? <>{children} : <>; +}; diff --git a/packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx b/packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx index 640bb9e43f30..bf11d6713c2c 100644 --- a/packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx +++ b/packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx @@ -10,8 +10,6 @@ import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilled import { isSignUpDisabledState } from '@/client-config/states/isSignUpDisabledState'; import { sentryConfigState } from '@/client-config/states/sentryConfigState'; import { supportChatState } from '@/client-config/states/supportChatState'; -import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar'; -import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { useEffect } from 'react'; import { useRecoilState, useSetRecoilState } from 'recoil'; import { useGetClientConfigQuery } from '~/generated/graphql'; @@ -39,51 +37,41 @@ export const ClientConfigProviderEffect = () => { const setApiConfig = useSetRecoilState(apiConfigState); - const { enqueueSnackBar } = useSnackBar(); - - const { data, loading, error } = useGetClientConfigQuery({ + const { data, loading } = useGetClientConfigQuery({ skip: isClientConfigLoaded, }); useEffect(() => { - if (!loading) { - if (error !== undefined) { - enqueueSnackBar('Unable to reach backend', { - variant: SnackBarVariant.Error, - }); - return; - } - if (isDefined(data?.clientConfig)) { - setIsClientConfigLoaded(true); - setAuthProviders({ - google: data?.clientConfig.authProviders.google, - microsoft: data?.clientConfig.authProviders.microsoft, - password: data?.clientConfig.authProviders.password, - magicLink: false, - sso: data?.clientConfig.authProviders.sso, - }); - setIsDebugMode(data?.clientConfig.debugMode); - setIsAnalyticsEnabled(data?.clientConfig.analyticsEnabled); - setIsSignInPrefilled(data?.clientConfig.signInPrefilled); - setIsSignUpDisabled(data?.clientConfig.signUpDisabled); - - setBilling(data?.clientConfig.billing); - setSupportChat(data?.clientConfig.support); - - setSentryConfig({ - dsn: data?.clientConfig?.sentry?.dsn, - release: data?.clientConfig?.sentry?.release, - environment: data?.clientConfig?.sentry?.environment, - }); - - setCaptchaProvider({ - provider: data?.clientConfig?.captcha?.provider, - siteKey: data?.clientConfig?.captcha?.siteKey, - }); - - setChromeExtensionId(data?.clientConfig?.chromeExtensionId); - setApiConfig(data?.clientConfig?.api); - } + if (!loading && isDefined(data?.clientConfig)) { + setIsClientConfigLoaded(true); + setAuthProviders({ + google: data?.clientConfig.authProviders.google, + microsoft: data?.clientConfig.authProviders.microsoft, + password: data?.clientConfig.authProviders.password, + magicLink: false, + sso: data?.clientConfig.authProviders.sso, + }); + setIsDebugMode(data?.clientConfig.debugMode); + setIsAnalyticsEnabled(data?.clientConfig.analyticsEnabled); + setIsSignInPrefilled(data?.clientConfig.signInPrefilled); + setIsSignUpDisabled(data?.clientConfig.signUpDisabled); + + setBilling(data?.clientConfig.billing); + setSupportChat(data?.clientConfig.support); + + setSentryConfig({ + dsn: data?.clientConfig?.sentry?.dsn, + release: data?.clientConfig?.sentry?.release, + environment: data?.clientConfig?.sentry?.environment, + }); + + setCaptchaProvider({ + provider: data?.clientConfig?.captcha?.provider, + siteKey: data?.clientConfig?.captcha?.siteKey, + }); + + setChromeExtensionId(data?.clientConfig?.chromeExtensionId); + setApiConfig(data?.clientConfig?.api); } }, [ data, @@ -102,7 +90,5 @@ export const ClientConfigProviderEffect = () => { setIsAnalyticsEnabled, ]); - console.log('error: ', error, loading); - return <>; }; diff --git a/packages/twenty-front/src/modules/users/components/UserProviderEffect.tsx b/packages/twenty-front/src/modules/users/components/UserProviderEffect.tsx index 70c4aebbf318..c41b7ff7e6cd 100644 --- a/packages/twenty-front/src/modules/users/components/UserProviderEffect.tsx +++ b/packages/twenty-front/src/modules/users/components/UserProviderEffect.tsx @@ -7,7 +7,6 @@ import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMembe import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadingState'; import { workspacesState } from '@/auth/states/workspaces'; -import { isClientConfigLoadedState } from '@/client-config/states/isClientConfigLoadedState'; import { DateFormat } from '@/localization/constants/DateFormat'; import { TimeFormat } from '@/localization/constants/TimeFormat'; import { dateTimeFormatState } from '@/localization/states/dateTimeFormatState'; @@ -40,10 +39,8 @@ export const UserProviderEffect = () => { currentWorkspaceMembersState, ); - const [isClientConfigLoaded] = useRecoilState(isClientConfigLoadedState); - const { loading: queryLoading, data: queryData } = useGetCurrentUserQuery({ - skip: isCurrentUserLoaded || !isClientConfigLoaded, + skip: isCurrentUserLoaded, }); useEffect(() => { diff --git a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx index 754b6cb971d5..7405490de3a9 100644 --- a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx +++ b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx @@ -16,6 +16,7 @@ import { ApolloMetadataClientMockedProvider } from '@/object-metadata/hooks/__mo import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope'; import { DefaultLayout } from '@/ui/layout/page/components/DefaultLayout'; import { UserProviderEffect } from '@/users/components/UserProviderEffect'; +import { ClientConfigProvider } from '~/modules/client-config/components/ClientConfigProvider'; import { UserProvider } from '~/modules/users/components/UserProvider'; import { mockedApolloClient } from '~/testing/mockedApolloClient'; @@ -69,24 +70,26 @@ const Providers = () => { - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + +