BIG-117: fix dashboard redirect all routes to homepage once refresh the page.

src/components/AppIntlLoader.js

@@ -7,9 +7,10 @@ import rtlDetect from 'rtl-detect';
 import * as R from 'ramda';
 
 import { AppIntlProvider } from './AppIntlProvider';
+import { useSplashLoading } from '../hooks/state';
 
+import { useWatch } from '../hooks';
 import withDashboardActions from '../containers/Dashboard/withDashboardActions';
-import withDashboard from '../containers/Dashboard/withDashboard';
 
 const SUPPORTED_LOCALES = [
   { name: 'English', value: 'en' },
@@ -63,20 +64,13 @@ function transformMomentLocale(currentLocale) {
 }
 
 /**
- * Application Intl loader.
+ * Loads application locales of the given current locale.
+ * @param {string} currentLocale
+ * @returns {{ isLoading: boolean }}
  */
-function AppIntlLoader({ appIntlIsLoading, setAppIntlIsLoading, children }) {
-  const [isLocalsLoading, setIsLocalsLoading] = React.useState(true);
-  const [isYupLoading, setIsYupLoading] = React.useState(true);
-
-  // Retrieve the current locale.
-  const currentLocale = getCurrentLocal();
-
-  // Detarmines the document direction based on the given locale.
-  const isRTL = rtlDetect.isRtlLang(currentLocale);
-
-  // Modifies the html document direction
-  useDocumentDirectionModifier(currentLocale, isRTL);
+function useAppLoadLocales(currentLocale) {
+  const [startLoading, stopLoading] = useSplashLoading();
+  const [isLoading, setIsLoading] = React.useState(true);
 
   React.useEffect(() => {
     // Lodas the locales data file.
@@ -91,33 +85,72 @@ function AppIntlLoader({ appIntlIsLoading, setAppIntlIsLoading, children }) {
       })
       .then(() => {
         moment.locale(transformMomentLocale(currentLocale));
-        setIsLocalsLoading(false);
+        setIsLoading(false);
       });
-  }, [currentLocale, setIsLocalsLoading]);
+  }, [currentLocale, stopLoading]);
+
+  // Watches the value to start/stop splash screen.
+  useWatch(isLoading, (value) => (value ? startLoading() : stopLoading()), {
+    immediate: true,
+  });
+
+  return { isLoading };
+}
+
+/**
+ * Loads application yup locales based on the given current locale.
+ * @param {string} currentLocale
+ * @returns {{ isLoading: boolean }}
+ */
+function useAppYupLoadLocales(currentLocale) {
+  const [startLoading, stopLoading] = useSplashLoading();
+  const [isLoading, setIsLoading] = React.useState(true);
 
   React.useEffect(() => {
     loadYupLocales(currentLocale)
       .then(({ locale }) => {
         setLocale(locale);
-        setIsYupLoading(false);
+        setIsLoading(false);
       })
       .then(() => {});
-  }, [currentLocale]);
+  }, [currentLocale, stopLoading]);
 
-  React.useEffect(() => {
-    if (!isLocalsLoading && !isYupLoading) {
-      setAppIntlIsLoading(false);
-    }
+  // Watches the valiue to start/stop splash screen.
+  useWatch(isLoading, (value) => (value ? startLoading() : stopLoading()), {
+    immediate: true,
   });
 
+  return { isLoading };
+}
+
+/**
+ * Application Intl loader.
+ */
+function AppIntlLoader({ children }) {
+  // Retrieve the current locale.
+  const currentLocale = getCurrentLocal();
+
+  // Detarmines the document direction based on the given locale.
+  const isRTL = rtlDetect.isRtlLang(currentLocale);
+
+  // Modifies the html document direction
+  useDocumentDirectionModifier(currentLocale, isRTL);
+
+  // Loads yup localization of the given locale.
+  const { isLoading: isAppYupLocalesLoading } =
+    useAppYupLoadLocales(currentLocale);
+
+  // Loads application locales of the given locale.
+  const { isLoading: isAppLocalesLoading } = useAppLoadLocales(currentLocale);
+
+  // Detarmines whether the app locales loading.
+  const isLoading = isAppYupLocalesLoading && isAppLocalesLoading;
+
   return (
     <AppIntlProvider currentLocale={currentLocale} isRTL={isRTL}>
-      {appIntlIsLoading ? null : children}
+      {isLoading ? null : children}
     </AppIntlProvider>
   );
 }
 
-export default R.compose(
-  withDashboardActions,
-  withDashboard(({ appIntlIsLoading }) => ({ appIntlIsLoading })),
-)(AppIntlLoader);
+export default R.compose(withDashboardActions)(AppIntlLoader);

src/components/Authentication.js

@@ -6,7 +6,6 @@ import authenticationRoutes from 'routes/authentication';
 import { FormattedMessage as T } from 'components';
 import Icon from 'components/Icon';
 import { useIsAuthenticated } from 'hooks/state';
-import {AuthenticationBoot} from '../containers/Authentication/AuthenticationBoot';
 import 'style/pages/Authentication/Auth.scss';
 
 function PageFade(props) {
@@ -26,7 +25,6 @@ export default function AuthenticationWrapper({ ...rest }) {
       ) : (
         <BodyClassName className={'authentication'}>
           <div class="authentication-page">
-          <AuthenticationBoot />
             <a
               href={'http://bigcapital.ly'}
               className={'authentication-page__goto-bigcapital'}

src/components/Dashboard/DashboardBoot.js

@@ -1,23 +1,30 @@
 import React from 'react';
 import * as R from 'ramda';
 
-import { useUser, useCurrentOrganization } from 'hooks/query';
+import { useUser, useCurrentOrganization } from '../../hooks/query';
+import { useSplashLoading } from '../../hooks/state';
+import { useWatch, useWhen } from '../../hooks';
+
 import withAuthentication from '../../containers/Authentication/withAuthentication';
-import withDashboardActions from '../../containers/Dashboard/withDashboardActions';
 
 import { setCookie, getCookie } from '../../utils';
 
 /**
  * Dashboard async booting.
  */
-function DashboardBootJSX({ setAppIsLoading, authenticatedUserId }) {
+function DashboardBootJSX({ authenticatedUserId }) {
   // Fetches the current user's organization.
-  const { isSuccess: isCurrentOrganizationSuccess, data: organization } =
-    useCurrentOrganization();
+  const {
+    isSuccess: isCurrentOrganizationSuccess,
+    isLoading: isOrgLoading,
+    data: organization,
+  } = useCurrentOrganization();
 
   // Authenticated user.
-  const { isSuccess: isAuthUserSuccess, data: authUser } =
-    useUser(authenticatedUserId);
+  const {
+    isSuccess: isAuthUserSuccess,
+    isLoading: isAuthUserLoading,
+  } = useUser(authenticatedUserId);
 
   // Initial locale cookie value.
   const localeCookie = getCookie('locale');
@@ -48,23 +55,39 @@ function DashboardBootJSX({ setAppIsLoading, authenticatedUserId }) {
     }
   }, [localeCookie, organization]);
 
-  React.useEffect(() => {
-    // Once the all requests complete change the app loading state.
-    if (
-      isAuthUserSuccess &&
+  const [startLoading, stopLoading] = useSplashLoading();
+
+  // Splash loading when organization request loading and
+  // applicaiton still not booted.
+  useWatch(isOrgLoading, (value) => {
+    value && !isBooted.current && startLoading();
+  });
+
+  // Splash loading when request authenticated user loading and 
+  // application still not booted yet.
+  useWatch(isAuthUserLoading, (value) => {
+    value && !isBooted.current && startLoading();
+  });  
+
+  // Stop splash loading once organization request success.
+  useWatch(isCurrentOrganizationSuccess, (value) => {
+    value && stopLoading();
+  });
+
+  // Stop splash loading once authenticated user request success.
+  useWatch(isAuthUserSuccess, (value) => {
+    value && stopLoading();
+  });
+
+  // Once the all requests complete change the app loading state.
+  useWhen(
+    isAuthUserSuccess &&
       isCurrentOrganizationSuccess &&
-      localeCookie === organization?.metadata?.language
-    ) {
-      setAppIsLoading(false);
+      localeCookie === organization?.metadata?.language,
+    () => {
       isBooted.current = true;
-    }
-  }, [
-    isAuthUserSuccess,
-    isCurrentOrganizationSuccess,
-    organization,
-    setAppIsLoading,
-    localeCookie,
-  ]);
+    },
+  );
   return null;
 }
 
@@ -72,5 +95,4 @@ export const DashboardBoot = R.compose(
   withAuthentication(({ authenticatedUserId }) => ({
     authenticatedUserId,
   })),
-  withDashboardActions,
 )(DashboardBootJSX);

src/components/Dashboard/PrivatePages.js

@@ -4,10 +4,9 @@ import { Switch, Route } from 'react-router';
 import Dashboard from 'components/Dashboard/Dashboard';
 import SetupWizardPage from 'containers/Setup/WizardSetupPage';
 
-import EnsureOrganizationIsReady from 'components/Guards/EnsureOrganizationIsReady';
-import EnsureOrganizationIsNotReady from 'components/Guards/EnsureOrganizationIsNotReady';
+import EnsureOrganizationIsReady from '../../components/Guards/EnsureOrganizationIsReady';
+import EnsureOrganizationIsNotReady from '../../components/Guards/EnsureOrganizationIsNotReady';
 import { PrivatePagesProvider } from './PrivatePagesProvider';
-import { DashboardBoot } from '../../components';
 
 import 'style/pages/Dashboard/Dashboard.scss';
 
@@ -17,8 +16,6 @@ import 'style/pages/Dashboard/Dashboard.scss';
 export default function DashboardPrivatePages() {
   return (
     <PrivatePagesProvider>
-      <DashboardBoot />
-
       <Switch>
         <Route path={'/setup'}>
           <EnsureOrganizationIsNotReady>

src/components/Dashboard/PrivatePagesProvider.js

@@ -1,9 +1,31 @@
 import React from 'react';
+import * as R from 'ramda';
+
 import { AuthenticatedUser } from './AuthenticatedUser';
+import { DashboardBoot } from '../../components';
+
+import withDashboard from '../../containers/Dashboard/withDashboard';
 
 /**
  * Private pages provider.
  */
-export function PrivatePagesProvider({ children }) {
-  return <AuthenticatedUser>{children}</AuthenticatedUser>;
+function PrivatePagesProviderComponent({
+  splashScreenCompleted,
+
+  // #ownProps
+  children,
+}) {
+  return (
+    <AuthenticatedUser>
+      <DashboardBoot />
+
+      {splashScreenCompleted ? children : null}
+    </AuthenticatedUser>
+  );
 }
+
+export const PrivatePagesProvider = R.compose(
+  withDashboard(({ splashScreenCompleted }) => ({
+    splashScreenCompleted,
+  })),
+)(PrivatePagesProviderComponent);

src/components/Dashboard/SplashScreen.js

@@ -3,13 +3,12 @@ import * as R from 'ramda';
 import BigcapitalLoading from './BigcapitalLoading';
 import withDashboard from '../../containers/Dashboard/withDashboard';
 
-function SplashScreenComponent({ appIsLoading, appIntlIsLoading }) {
-  return appIsLoading || appIntlIsLoading ? <BigcapitalLoading /> : null;
+function SplashScreenComponent({ splashScreenLoading }) {
+  return splashScreenLoading ? <BigcapitalLoading /> : null;
 }
 
 export const SplashScreen = R.compose(
-  withDashboard(({ appIsLoading, appIntlIsLoading }) => ({
-    appIsLoading,
-    appIntlIsLoading,
+  withDashboard(({ splashScreenLoading }) => ({
+    splashScreenLoading,
   })),
 )(SplashScreenComponent);

src/components/Guards/EnsureOrganizationIsReady.js

@@ -6,7 +6,6 @@ import { compose } from 'utils';
 import withAuthentication from 'containers/Authentication/withAuthentication';
 import withOrganization from 'containers/Organization/withOrganization';
 
-
 function EnsureOrganizationIsReady({
   // #ownProps
   children,
@@ -15,10 +14,10 @@ function EnsureOrganizationIsReady({
   // #withOrganizationByOrgId
   isOrganizationReady,
 }) {
-  return (isOrganizationReady) ? children : (
-    <Redirect
-      to={{ pathname: redirectTo }}
-    />
+  return isOrganizationReady ? (
+    children
+  ) : (
+    <Redirect to={{ pathname: redirectTo }} />
   );
 }
 
@@ -28,4 +27,4 @@ export default compose(
     organizationId: props.currentOrganizationId,
   })),
   withOrganization(({ isOrganizationReady }) => ({ isOrganizationReady })),
-)(EnsureOrganizationIsReady);
+)(EnsureOrganizationIsReady);