application/components/system-alerts.js

import React, {Component} from 'react';
import {connect} from 'react-redux';

import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';

import {
    alertClose
} from './../redux/actions/alert-actions';

class SystemAlerts extends Component {
    constructor(props) {
        super(props);
    }

    handleClose() {
        const {dispatch} = this.props;
        dispatch(alertClose());
    }

    render() {
        if (!this.props.systemAlert.open) {
            return <span></span>;
        }

        const actions = [
            <FlatButton
                label="Okay"
                primary={true}
                onClick={this.handleClose.bind(this)}
                />
        ];

        return (
            <Dialog
                title={this.props.systemAlert.title}
                actions={actions}
                modal={true}
                open={this.props.systemAlert.open}
                onRequestClose={this.handleClose.bind(this)}
                >
                {this.props.systemAlert.message}
            </Dialog>
        );
    }
}

const mapStateToProps = (state) => ({
    systemAlert: state.systemAlert
});

export default connect(mapStateToProps)(SystemAlerts);