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

src/containers/Authentication/AuthenticationBoot.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import * as R from 'ramda';
-
-import withDashboardActions from '../../containers/Dashboard/withDashboardActions';
-
-function AuthenticationBootJSX({ setAppIsLoading }) {
-  React.useEffect(() => {
-    setAppIsLoading(false);
-  }, [setAppIsLoading]);
-
-  return null;
-}
-export const AuthenticationBoot = R.compose(withDashboardActions)(
-  AuthenticationBootJSX,
-);

src/containers/Dashboard/withDashboard.js

@@ -11,8 +11,8 @@ export default (mapState) => {
       sidebarExpended: state.dashboard.sidebarExpended,
       preferencesPageTitle: state.dashboard.preferencesPageTitle,
       dashboardBackLink: state.dashboard.backLink,
-      appIsLoading: state.dashboard.appIsLoading,
-      appIntlIsLoading: state.dashboard.appIntlIsLoading
+      splashScreenLoading: state.dashboard.splashScreenLoading > 0,
+      splashScreenCompleted: state.dashboard.splashScreenLoading === 0,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

src/containers/Dashboard/withDashboardActions.js

@@ -2,9 +2,8 @@ import { connect } from 'react-redux';
 import t from 'store/types';
 import {
   toggleExpendSidebar,
-  appIsLoading,
-  appIntlIsLoading
 } from 'store/dashboard/dashboard.actions';
+import { splashStartLoading, splashStopLoading } from '../../store/dashboard/dashboard.actions';
 
 const mapActionsToProps = (dispatch) => ({
   changePageTitle: (pageTitle) =>
@@ -50,15 +49,17 @@ const mapActionsToProps = (dispatch) => ({
     dispatch({
       type: 'CHANGE_PREFERENCES_PAGE_TITLE',
       pageTitle,
-    }),  
+    }),
 
   setDashboardBackLink: (backLink) =>
     dispatch({
       type: t.SET_DASHBOARD_BACK_LINK,
       payload: { backLink },
     }),
-  setAppIsLoading: (isLoading) => dispatch(appIsLoading(isLoading)),
-  setAppIntlIsLoading: (isLoading) => dispatch(appIntlIsLoading(isLoading)),
+
+  // Splash screen start/stop loading.
+  splashStartLoading: () => splashStartLoading(),
+  splashStopLoading: () => splashStopLoading(),
 });
 
 export default connect(null, mapActionsToProps);

src/hooks/index.js

@@ -1,3 +1,4 @@
+import { isEqual } from 'lodash';
 import React, { useRef, useEffect, useMemo } from 'react';
 import useAsync from './async';
 import useAutofocus from './useAutofocus';
@@ -97,7 +98,6 @@ export function useLocalStorage(key, initialValue) {
   return [storedValue, setValue];
 }
 
-
 export function useMemorizedColumnsWidths(tableName) {
   const [get, save] = useLocalStorage(`${tableName}.columns_widths`, {});
 
@@ -105,4 +105,43 @@ export function useMemorizedColumnsWidths(tableName) {
     save(columnsResizing.columnWidths);
   };
   return [get, save, handleColumnResizing];
-}
+}
+
+// Hook
+function usePrevious(value) {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = useRef();
+  // Store current value in ref
+  useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+  // Return previous value (happens before update in useEffect above)
+  return ref.current;
+}
+
+export function useWhen(condition, callback) {
+  React.useEffect(() => {
+    if (condition) {
+      callback();
+    }
+  }, [condition, callback]);
+}
+
+export function useWhenNot(condition, callback) {
+  return useWhen(!condition, callback);
+}
+
+export function useWatch(state, callback, props) {
+  const config = { immediate: false, ...props };
+
+  const previosuState = usePrevious(state);
+  const flag = React.useRef(false);
+
+  React.useEffect(() => {
+    if (!isEqual(previosuState, state) || (config.immediate && !flag.current)) {
+      flag.current = true;
+      callback(state);
+    }
+  }, [previosuState, state, config.immediate, callback]);
+}

src/hooks/state/authentication.js

@@ -3,11 +3,13 @@ import { useCallback } from 'react';
 import { isAuthenticated } from 'store/authentication/authentication.reducer';
 import {
   setLogin,
-  setStoreReset,
 } from 'store/authentication/authentication.actions';
 import { useQueryClient } from 'react-query';
 import { removeCookie } from '../../utils';
 
+/**
+ * Removes the authentication cookies.
+ */
 function removeAuthenticationCookies() {
   removeCookie('token');
   removeCookie('organization_id');

src/hooks/state/dashboard.js

@@ -1,6 +1,10 @@
 import { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import { dashboardPageTitle } from 'store/dashboard/dashboard.actions';
+import {
+  splashStopLoading,
+  splashStartLoading,
+  dashboardPageTitle,
+} from '../../store/dashboard/dashboard.actions';
 
 export const useDispatchAction = (action) => {
   const dispatch = useDispatch();
@@ -17,11 +21,12 @@ export const useDashboardPageTitle = () => {
   return useDispatchAction(dashboardPageTitle);
 };
 
-export const useSetAccountsTableQuery = () => {
-
+/**
+ * Splash loading screen actions.
+ */
+export const useSplashLoading = () => {
+  return [
+    useDispatchAction(splashStartLoading),
+    useDispatchAction(splashStopLoading),
+  ];
 };
-
-export const useAccountsTableQuery = () => {
-  
-}
-