import React from 'react'
import { Component } from 'react'
import { connect } from 'react-redux'
import Login from '../Login/Login'
import Modal from '../Modal/Modal'
import Header from '../Header/Header'
import Messenger from '../Messenger/Messenger'
import SideBar from '../SideBar/SideBar'
import Footer from '../Footer/Footer'
import './App.scss'

/**
 * This is the main Component that loads the header, content div and footer
 */
@connect((state) => {
    return {
        isAuthenticated: state.auth.isAuthenticated,
        isAdmin: state.auth.isAdmin,
        isSessionExpired: state.auth.isSessionExpired,
        userName: state.auth.userName,
        displayUserContextMenu: state.header.displayUserContextMenu,
        vaultToken: state.auth.vaultToken,
        modalStack: state.modal.modalStack
    }
})
export default class App extends Component {

    render() {
        const {isAdmin, userName, displayUserContextMenu, dispatch, vaultToken, modalStack, children, isSessionExpired, isAuthenticated} = this.props

        return (
            <div id='main-wrapper'>
                <Modal modalStack={modalStack} />

                { ! isAuthenticated && <Login />}
                { (isAuthenticated || isSessionExpired) &&
                <div id='content-wrapper'>
                    <Header userName={userName}
                            displayUserContextMenu={displayUserContextMenu}
                            dispatch={dispatch}
                            vaultToken={vaultToken}
                            isAdmin={isAdmin}/>
                    { isAuthenticated &&
                        <div id="app-messenger-wrapper">
                            <Messenger />
                        </div>
                    }
                    <div id='content'>
                        <SideBar />
                        <div id='workspace'>
                            <div id='workspace-wrapper'>
                                {children}
                            </div>
                        </div>
                    </div>
                    <Footer />
                </div>
                }
            </div>
        )
    }
}
@@ -91,16 +91,97 @@
 -redux'%0A
+import axios from 'axios'%0Aimport * as appActions from '../../actions/appActions'%0A
 import L
@@ -884,16 +884,136 @@
 dalStack
+,%0A        hasDashboardMetadataLoaded: state.app.metadata.hasLoaded,%0A        dashboardVersion: state.app.metadata.version
 %0A    %7D%0A%7D
@@ -1014,16 +1014,18 @@
    %7D%0A%7D)%0A
+%0A%0A
 export d
@@ -1062,16 +1062,182 @@
 nent %7B%0A%0A
+    componentDidMount() %7B%0A        if (! this.props.hasDashboardMetadataLoaded) %7B%0A            this.props.dispatch(appActions.loadDashboardMetadata())%0A        %7D%0A    %7D%0A%0A
     rend
@@ -1382,22 +1382,134 @@
 ated
-%7D = this.props
+, dashboardVersion%7D = this.props%0A%0A        axios.defaults.headers.common%5B'X-Cerberus-Client'%5D = %60Dashboard/$%7BdashboardVersion%7D%60
 %0A%0A  
@@ -2640,16 +2640,17 @@
        )%0A    %7D%0A%7D
+%0A

Add 'X-Cerberus-Client' header to HTTP calls