import React from 'react';

import './ErrorBoundaryView.scss';

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

    this.state = {
      error: null,
    };
  }
  componentDidCatch (error) {
    this.setState({
      error: error,
    });
  }
  render () {
    if (!this.state.error) {
      return this.props.children;
    }

    return (
      <div className="ErrorBoundaryView">
        <div className="wrapper">
          <p className="text-center">
            <span className="logo">HomeHub</span>
          </p>
          <p>
            A fatal exception {this.state.error.name} has occurred at
            {' '}
            {this.state.error.message}.
            The current application will be terminated.
          </p>
          <ul>
            <li>
              Press CTRL + R to restart HomeHub. You will lose any unsaved
              information in all applications.
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

export default ErrorBoundaryView;
