Merge pull request #837 from CruGlobal/white-flash

[no-Jira] Fix blank page on initial load

src/components/User/Preferences/UserPreferenceProvider.test.tsx

@@ -0,0 +1,49 @@
+import { render } from '@testing-library/react';
+import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import { useLocale } from 'src/hooks/useLocale';
+import { GetUserQuery } from '../GetUser.generated';
+import { UserPreferenceProvider } from './UserPreferenceProvider';
+
+const Consumer: React.FC = () => {
+  const locale = useLocale();
+
+  return <p>Locale: {locale}</p>;
+};
+
+describe('UserPreferenceProvider', () => {
+  it('always renders children', () => {
+    const { getByText } = render(
+      <GqlMockedProvider>
+        <UserPreferenceProvider>Children</UserPreferenceProvider>
+      </GqlMockedProvider>,
+    );
+
+    expect(getByText('Children')).toBeInTheDocument();
+  });
+
+  it('provides locale', async () => {
+    const { getByText, findByText } = render(
+      <GqlMockedProvider<{ GetUser: GetUserQuery }>
+        mocks={{
+          GetUser: {
+            user: {
+              preferences: {
+                localeDisplay: 'es',
+              },
+            },
+          },
+        }}
+      >
+        <UserPreferenceProvider>
+          <Consumer />
+        </UserPreferenceProvider>
+      </GqlMockedProvider>,
+    );
+
+    // Initial default locale
+    expect(getByText('Locale: en-US')).toBeInTheDocument();
+
+    // Locale loaded from query
+    expect(await findByText('Locale: es')).toBeInTheDocument();
+  });
+});

src/components/User/Preferences/UserPreferenceProvider.tsx

@@ -1,5 +1,4 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
-import { useSession } from 'next-auth/react';
 import i18next from 'src/lib/i18n';
 import { useGetUserQuery } from '../GetUser.generated';
 
@@ -19,20 +18,19 @@ interface Props {
   children?: React.ReactNode;
 }
 export const UserPreferenceProvider: React.FC<Props> = ({ children }) => {
-  const { data: session } = useSession();
-  const { data: user, loading } = useGetUserQuery({ skip: !session });
+  const { data } = useGetUserQuery();
   const [locale, setLocale] = useState('en-US');
 
   useEffect(() => {
-    if (user) {
-      i18next.changeLanguage(user.user.preferences?.language ?? 'en');
-      setLocale(user.user.preferences?.locale ?? 'en-US');
+    if (data) {
+      i18next.changeLanguage(data.user.preferences?.language ?? 'en');
+      setLocale(data.user.preferences?.locale ?? 'en-US');
     }
-  }, [user]);
+  }, [data]);
 
   return (
     <UserPreferenceContext.Provider value={{ locale }}>
-      {!loading && children}
+      {children}
     </UserPreferenceContext.Provider>
   );
 };

src/lib/client.ts

@@ -54,8 +54,9 @@ const httpLink = new BatchHttpLink({
   fetch,
 });
 
-const errorLink = onError(({ graphQLErrors, networkError }) => {
-  if (graphQLErrors) {
+const clientErrorLink = onError(({ graphQLErrors, networkError }) => {
+  // Don't show sign out and display errors on the login page because the user won't be logged in
+  if (graphQLErrors && window.location.pathname !== '/login') {
     graphQLErrors.map(({ message, extensions }) => {
       if (extensions?.code === 'AUTHENTICATION_ERROR') {
         signOut({ redirect: true, callbackUrl: 'signOut' }).then(() => {
@@ -101,7 +102,7 @@ if (process.browser && process.env.NODE_ENV === 'production') {
 }
 
 const client = new ApolloClient({
-  link: errorLink.concat(httpLink),
+  link: clientErrorLink.concat(httpLink),
   cache,
   assumeImmutableResults: true,
   defaultOptions: {

src/lib/i18n.ts

@@ -15,10 +15,10 @@ i18next
       useSuspense: false,
     },
     detection: {
-      order: ['navigator', 'htmlTag'],
+      order: ['localStorage', 'navigator', 'htmlTag'],
     },
     backend: {
-      loadPath: '../../locales/{{lng}}/translation.json',
+      loadPath: '/locales/{{lng}}/translation.json',
     },
   });