Improve store+auth interaction to reduce api calls

src/actions/actionTypes.js

@@ -235,3 +235,4 @@ export const CONFIG_LOADED = 'CONFIG_LOADED';
 export const TOGGLE_MENU = 'TOGGLE_MENU';
 
 export const RECEIVED_USER_CONTEXT = 'RECEIVED_USER_CONTEXT';
+export const UPDATE_AUTH = 'UPDATE_AUTH';

src/app/App.js

@@ -27,19 +27,29 @@ import Router from './Router';
 import Menu from './components/Menu';
 import NotificationContainer from './components/NotificationContainer';
 import UserContextActions from '../actions/UserContextActions';
+import { useAuth } from '@entur/auth-provider';
+import UserActions from '../actions/UserActions';
 
 const themeV0 = getMuiTheme({
   /* theme for v0.x */
 });
 
-const MainPage = ({ dispatch, isConfigLoaded, isMenuOpen, auth, isAdmin }) => {
+const MainPage = ({ dispatch, isConfigLoaded, isMenuOpen, isAdmin }) => {
+  const auth = useAuth();
+
+  useEffect(() => {
+    dispatch(UserActions.updateAuth(auth));
+  }, [auth, dispatch]);
+
   useEffect(() => {
-    cfgreader.readConfig(config => {
-      window.config = config;
-      dispatch(UtilsActions.notifyConfigIsLoaded());
-      dispatch(UserContextActions.fetchUserContext());
-    });
-  }, [dispatch]);
+    if (auth.isAuthenticated) {
+      cfgreader.readConfig(config => {
+        window.config = config;
+        dispatch(UtilsActions.notifyConfigIsLoaded());
+        dispatch(UserContextActions.fetchUserContext());
+      });
+    }
+  }, [dispatch, auth.isAuthenticated]);
 
   const theme = useMemo(
     () =>
@@ -51,7 +61,7 @@ const MainPage = ({ dispatch, isConfigLoaded, isMenuOpen, auth, isAdmin }) => {
     []
   );
 
-  if (isConfigLoaded && auth.roleAssignments) {
+  if (isConfigLoaded && auth.isAuthenticated) {
     return (
       <MuiThemeProvider theme={theme}>
         <V0MuiThemeProvider muiTheme={themeV0}>

src/index.js

@@ -14,7 +14,7 @@
  *
  */
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
@@ -33,10 +33,8 @@ cfgreader.readConfig(function(config) {
 });
 
 const AuthenticatedApp = () => {
-  const auth = useAuth();
-
   return (
-    <Provider store={configureStore(auth)}>
+    <Provider store={configureStore()}>
       <ConnectedRouter history={history}>
         <App />
       </ConnectedRouter>

src/reducers/UserReducer.js

@@ -14,8 +14,13 @@
  *
  */
 
+import { UPDATE_AUTH } from 'actions/actionTypes';
+
 const UserReducer = (state = {}, action) => {
   switch (action.type) {
+    case UPDATE_AUTH:
+      return Object.assign({}, state, { auth: action.payLoad });
+
     default:
       return state;
   }

src/store/store.js

@@ -24,7 +24,7 @@ import createRootReducer from 'reducers';
 
 export const history = createBrowserHistory();
 
-export default function configureStore(auth) {
+export default function configureStore() {
   let enchancer = {};
 
   if (process.env.NODE_ENV === 'development') {
@@ -43,13 +43,7 @@ export default function configureStore(auth) {
     );
   }
 
-  const initialState = {
-    UserReducer: {
-      auth
-    }
-  };
-
-  let store = createStore(createRootReducer(history), initialState, enchancer);
+  let store = createStore(createRootReducer(history), {}, enchancer);
 
   if (module.hot) {
     // Enable Webpack hot module replacement for reducers