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

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);