fix(#113): init app properly before loading additional views to preve…

…nt invalid auth session states

src/app/App.jsx

@@ -9,6 +9,8 @@ import AppHeader from './AppHeader';
 import AppFooter from './AppFooter';
 import AppRoutes from './AppRoutes';
 
+import AppLoadingView from './AppLoadingView';
+
 import { Theme } from '../styles';
 
 const StyledAppContent = styled(Box)`
@@ -23,6 +25,7 @@ const StyledAppContent = styled(Box)`
 class App extends Component {
   static propTypes = {
     isAuthenticated: PropTypes.bool.isRequired,
+    didLoad: PropTypes.bool.isRequired,
     loadApplication: PropTypes.func.isRequired,
     username: PropTypes.string,
     message: PropTypes.shape({
@@ -42,7 +45,13 @@ class App extends Component {
   }
 
   render() {
-    const { isAuthenticated, username, message } = this.props;
+    const {
+      isAuthenticated,
+      didLoad,
+      username,
+      message,
+    } = this.props;
+
     return (
       <Grommet theme={Theme} full>
         <AppMessage
@@ -54,7 +63,10 @@ class App extends Component {
         />
         <StyledAppContent fill justify="between" direction="column">
           <Box flex fill pad="none">
-            <AppRoutes isAuthenticated={isAuthenticated} />
+            { didLoad
+              ? <AppRoutes isAuthenticated={isAuthenticated} />
+              : <AppLoadingView />
+            }
             <AppFooter />
           </Box>
         </StyledAppContent>

src/app/AppContainer.js

@@ -8,6 +8,7 @@ import { logOutUser } from '../redux/auth';
 import { isAuthenticatedSelector, authUsernameSelector } from '../redux/auth/selectors';
 
 import { loadApplication } from '../redux/application';
+import { applicationDidLoadSelector } from '../redux/application/selectors';
 import {
   messageShowSelector,
   messageTextSelector,
@@ -17,6 +18,7 @@ import {
 
 const mapStateToProps = state => ({
   isAuthenticated: isAuthenticatedSelector(state),
+  didLoad: applicationDidLoadSelector(state),
   username: authUsernameSelector(state),
   message: {
     show: messageShowSelector(state),

src/app/AppLoadingView.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import LoadingIndicator from '../ui/async/LoadingIndicator';
+import View from '../ui/View';
+
+import { Colors } from '../styles';
+
+const StyledContainer = styled(View)`
+  text-align: center;
+  color: ${Colors.ColorsPalette.TextFaded};
+`;
+
+const AppLoadingView = () => (
+  <View>
+    <StyledContainer>
+      <h3>Please stay tuned, app is loading.</h3>
+      <LoadingIndicator size={120} />
+    </StyledContainer>
+  </View>
+);
+
+export const __testables__ = {
+  StyledContainer,
+};
+
+export default AppLoadingView;

src/redux/application/selectors.js

@@ -1,8 +1,15 @@
 import { createSelector } from 'reselect';
 
+import { AppStatus } from './index';
+
 export const applicationStateSelector = state => state.application || {};
 
 export const applicationStatusSelector = createSelector(
   applicationStateSelector,
   ({ status }) => status,
 );
+
+export const applicationDidLoadSelector = createSelector(
+  applicationStatusSelector,
+  status => status && status === AppStatus.APPLICATION_DID_LOAD,
+);