import React , { Component } from 'react' ; import { connect } from 'react-redux' ; import { MuiThemeProvider } from '@material-ui/core/styles' ; import LinearProgress from '@material-ui/core/LinearProgress' ; import LeftContainer from './LeftContainer' ; import MainContainer from './MainContainer' ; import theme from '../components/theme' ; import { loadInitData } from '../actions/components' ; import { ComponentInt , ComponentsInt } from '../utils/InterfaceDefinitions' ; type Props = { components : ComponentsInt ; focusComponent : ComponentInt ; totalComponents : number ; loading : boolean ; selectableChildren : Array < number > ; loadInitData : any ; } ; const mapStateToProps = ( store ) => ( { components : store . workspace . components , totalComponents : store . workspace . totalComponents , focusComponent : store . workspace . focusComponent , loading : store . workspace . loading , selectableChildren : store . workspace . selectableChildren , } ) ; const mapDispatchToProps = { loadInitData } ; class AppContainer extends Component < Props > { state = { width : 25 , rightColumnOpen : true , } ; componentDidMount ( ) { this . props . loadInitData ( ) ; } render ( ) { const { components , focusComponent , loading , selectableChildren , totalComponents , } = this . props ; return ( < MuiThemeProvider theme = { theme } > < LeftContainer components = { components } totalComponents = { totalComponents } focusComponent = { focusComponent } selectableChildren = { selectableChildren } / > < MainContainer /> { loading ? ( < div style = { { alignSelf : 'flex-end' , position : 'fixed' , width : '100%' , } } > < LinearProgress color = "secondary" / > < /div>) : null} < /MuiThemeProvider>); } } export default connect ( mapStateToProps , mapDispatchToProps ) ( AppContainer ) ;