eiru_automation_ui/src/components/common/Base.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Helmet } from 'react-helmet'
import Topbar from './Topbar'
import Sidebar from './Sidebar'
import Typography from 'material-ui/Typography'
import Snackbar from 'material-ui/Snackbar'
import Spinner from './Spinner'
import { withStyles } from 'material-ui/styles'
import { notify } from '../../actions'

const styles = theme => ({
    root: {
        flexGrow: 1,
        zIndex: 1,
        overflow: 'hidden',
        position: 'relative',
        display: 'flex'
    },
    content: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.default,
        padding: theme.spacing.unit * 3,
        minWidth: 0
    },
    toolbar: theme.mixins.toolbar,
    header: {
        marginBottom: 25
    }
})

class Base extends Component {
    render() {
        const { classes, app, onHideNotification } = this.props

        return (
            <div className={classes.root}>
                <Helmet>
                    <title>{this.props.title}</title>
                </Helmet>
                <Topbar />
                <Sidebar />
                <main className={classes.content}>
                    <div className={classes.toolbar}></div>
                    <Typography 
                        variant='headline' 
                        color='primary' 
                        className={classes.header} 
                        children={this.props.title} 
                    />
                    {this.props.children}
                </main>
                <Snackbar 
                    open={app.notification.isOpen} 
                    autoHideDuration={2000} 
                    onClose={onHideNotification} 
                    message={app.notification.message} 
                />
                <Spinner 
                    open={app.spinner.isOpen}
                    message={app.spinner.message || 'Cargando, espere...'}
                />
            </div>
        )
    }
}

/**
 * 
 * @param {*} state 
 * @param {*} props 
 */
const mapStateToProps = (state, props) => {
    return {
        app: state.app
    }
}

/**
 * 
 * @param {*} state 
 * @param {*} props 
 */
const mapDispatchToProps = (dispatch, props) => ({
    /**
     * 
     */
    onHideNotification() {
        dispatch(notify(null))
    },
    /**
     * 
     */
    onHideDialog() {
        console.log('hide dialog')
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Base))