From 6e8528dfbb3eab2aa41753ac5f906db94c99ff24 Mon Sep 17 00:00:00 2001
From: Andreas Gasser <andreas.gasser@novartis.com>
Date: Mon, 13 May 2019 08:41:12 +0200
Subject: [PATCH] fix(#113): init app properly before loading additional views
 to prevent invalid auth session states

---
 src/app/App.jsx                    | 16 ++++++++++++++--
 src/app/AppContainer.js            |  2 ++
 src/app/AppLoadingView.jsx         | 27 +++++++++++++++++++++++++++
 src/redux/application/selectors.js |  7 +++++++
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 src/app/AppLoadingView.jsx

diff --git a/src/app/App.jsx b/src/app/App.jsx
index e81cc8c..195c1ba 100644
--- a/src/app/App.jsx
+++ b/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>
diff --git a/src/app/AppContainer.js b/src/app/AppContainer.js
index 0d8446c..ab6c3a8 100644
--- a/src/app/AppContainer.js
+++ b/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),
diff --git a/src/app/AppLoadingView.jsx b/src/app/AppLoadingView.jsx
new file mode 100644
index 0000000..d582bcf
--- /dev/null
+++ b/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;
diff --git a/src/redux/application/selectors.js b/src/redux/application/selectors.js
index cebbc5c..7eca7eb 100644
--- a/src/redux/application/selectors.js
+++ b/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,
+);