Unblock UI and display error message when the service is unreachable

khuddite · Nov 13, 2024 · eded985 · eded985
1 parent 0a4d16e
commit eded985
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 98 deletions.
diff --git 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 (
     <ApolloProvider>
       <ClientConfigProviderEffect />
-      <ClientConfigProvider>
-        <ChromeExtensionSidecarEffect />
-        <ChromeExtensionSidecarProvider>
-          <UserProviderEffect />
-          <UserProvider>
-            <AuthProvider>
-              <ApolloMetadataClientProvider>
-                <ObjectMetadataItemsProvider>
-                  <PrefetchDataProvider>
-                    <AppThemeProvider>
-                      <SnackBarProvider>
-                        <DialogManagerScope dialogManagerScopeId="dialog-manager">
-                          <DialogManager>
-                            <StrictMode>
-                              <PromiseRejectionEffect />
-                              <GotoHotkeysEffectsProvider />
-                              <PageTitle title={pageTitle} />
-                              <Outlet />
-                            </StrictMode>
-                          </DialogManager>
-                        </DialogManagerScope>
-                      </SnackBarProvider>
-                    </AppThemeProvider>
-                  </PrefetchDataProvider>
-                  <PageChangeEffect />
-                </ObjectMetadataItemsProvider>
-              </ApolloMetadataClientProvider>
-            </AuthProvider>
-          </UserProvider>
-        </ChromeExtensionSidecarProvider>
-      </ClientConfigProvider>
+      <ChromeExtensionSidecarEffect />
+      <ChromeExtensionSidecarProvider>
+        <UserProviderEffect />
+        <UserProvider>
+          <AuthProvider>
+            <ApolloMetadataClientProvider>
+              <ObjectMetadataItemsProvider>
+                <PrefetchDataProvider>
+                  <AppThemeProvider>
+                    <SnackBarProvider>
+                      <DialogManagerScope dialogManagerScopeId="dialog-manager">
+                        <DialogManager>
+                          <StrictMode>
+                            <PromiseRejectionEffect />
+                            <GotoHotkeysEffectsProvider />
+                            <PageTitle title={pageTitle} />
+                            <Outlet />
+                          </StrictMode>
+                        </DialogManager>
+                      </DialogManagerScope>
+                    </SnackBarProvider>
+                  </AppThemeProvider>
+                </PrefetchDataProvider>
+                <PageChangeEffect />
+              </ObjectMetadataItemsProvider>
+            </ApolloMetadataClientProvider>
+          </AuthProvider>
+        </UserProvider>
+      </ChromeExtensionSidecarProvider>
     </ApolloProvider>
   );
 };
diff --git 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 { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import {
@@ -9,6 +9,7 @@ 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';
@@ -31,6 +32,7 @@ import { isDefined } from '~/utils/isDefined';
 export const PageChangeEffect = () => {
   const navigate = useNavigate();
   const isMatchingLocation = useIsMatchingLocation();
+  const [isClientConfigLoaded] = useRecoilState(isClientConfigLoadedState);
 
   const [previousLocation, setPreviousLocation] = useState('');
 
@@ -178,6 +180,9 @@ export const PageChangeEffect = () => {
   ]);
 
   useEffect(() => {
+    if (!isClientConfigLoaded) {
+      return;
+    }
     setTimeout(() => {
       setSessionId();
       eventTracker('pageview', {
@@ -189,7 +194,7 @@ export const PageChangeEffect = () => {
         timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
       });
     }, 500);
-  }, [eventTracker, location.pathname]);
+  }, [eventTracker, location.pathname, isClientConfigLoaded]);
 
   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
diff --git a/packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx b/packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx
@@ -10,6 +10,8 @@ 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';
@@ -37,41 +39,51 @@ export const ClientConfigProviderEffect = () => {
 
   const setApiConfig = useSetRecoilState(apiConfigState);
 
-  const { data, loading } = useGetClientConfigQuery({
+  const { enqueueSnackBar } = useSnackBar();
+
+  const { data, loading, error } = useGetClientConfigQuery({
     skip: isClientConfigLoaded,
   });
 
   useEffect(() => {
-    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);
+    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);
+      }
     }
   }, [
     data,
@@ -90,5 +102,7 @@ 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
@@ -7,6 +7,7 @@ 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';
@@ -39,8 +40,10 @@ export const UserProviderEffect = () => {
     currentWorkspaceMembersState,
   );
 
+  const [isClientConfigLoaded] = useRecoilState(isClientConfigLoadedState);
+
   const { loading: queryLoading, data: queryData } = useGetCurrentUserQuery({
-    skip: isCurrentUserLoaded,
+    skip: isCurrentUserLoaded || !isClientConfigLoaded,
   });
 
   useEffect(() => {

diff --git a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx
@@ -16,7 +16,6 @@ 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';
 
@@ -70,26 +69,24 @@ const Providers = () => {
         <ApolloProvider client={mockedApolloClient}>
           <ApolloStorybookDevLogEffect />
           <ClientConfigProviderEffect />
-          <ClientConfigProvider>
-            <UserProviderEffect />
-            <UserProvider>
-              <ApolloMetadataClientMockedProvider>
-                <ObjectMetadataItemsProvider>
-                  <FullHeightStorybookLayout>
-                    <HelmetProvider>
-                      <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-                        <IconsProvider>
-                          <PrefetchDataProvider>
-                            <Outlet />
-                          </PrefetchDataProvider>
-                        </IconsProvider>
-                      </SnackBarProviderScope>
-                    </HelmetProvider>
-                  </FullHeightStorybookLayout>
-                </ObjectMetadataItemsProvider>
-              </ApolloMetadataClientMockedProvider>
-            </UserProvider>
-          </ClientConfigProvider>
+          <UserProviderEffect />
+          <UserProvider>
+            <ApolloMetadataClientMockedProvider>
+              <ObjectMetadataItemsProvider>
+                <FullHeightStorybookLayout>
+                  <HelmetProvider>
+                    <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+                      <IconsProvider>
+                        <PrefetchDataProvider>
+                          <Outlet />
+                        </PrefetchDataProvider>
+                      </IconsProvider>
+                    </SnackBarProviderScope>
+                  </HelmetProvider>
+                </FullHeightStorybookLayout>
+              </ObjectMetadataItemsProvider>
+            </ApolloMetadataClientMockedProvider>
+          </UserProvider>
         </ApolloProvider>
       </SnackBarProviderScope>
     </RecoilRoot>