application/components/common/errors.js

import React from 'react';

import {ErrorService, ErrorsStore} from './../../services/error-service';

/**
 * Error viewer. Displays big red box front and center when something
 * goes wrong
 */
class ErrorBox extends React.Component {
    constructor(props) {
        super(props);

        this.state = {opacity: 0};
    }

    componentWillMount() {
        setTimeout(() => {
            this.setState({'opacity': 1});
        }, 100);
        setTimeout(() => {
            this.setState({'opacity': 0});
        }, 10000);
    }

    handleClick() {
        this.setState({'opacity': 0});
    }

    render() {
        return <div className={this.props.type} style={{opacity: this.state.opacity}} onClick={this.handleClick.bind(this)}>{this.props.children}</div>
    }
}

class ErrorViewer extends React.Component {
    constructor(props) {
        super(props);

        this.onChange = this.onChange.bind(this);
    }

    onChange(state) {
        this.setState(state);
    }

    componentWillMount() {
        ErrorsStore.listen(this.onChange);
        this.state = ErrorsStore.getState();
    }

    componentWillUnmount() {
        ErrorsStore.unlisten(this.onChange);
    }

    render() {
        let error = '';
        if (this.state.error && this.state.error.message) {
            error = <ErrorBox type={this.state.error.type}>{this.state.error.message}</ErrorBox>;
        }

        let boxWidth = 500;
        let offset = 0;

        if (window && window.jQuery) {
            const windowWidth = jQuery(window).width();
            boxWidth = windowWidth/4;
            offset = windowWidth/2 - boxWidth/2;
        }

        return (
            <div className="errorViewer" style={{left: offset + 'px', width: boxWidth + 'px'}}>
                {error}
            </div>
        );
    }
}

export default ErrorViewer;