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))