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;