Home Reference Source

application/components/common/errors.js

  1. import React from 'react';
  2.  
  3. import {ErrorService, ErrorsStore} from './../../services/error-service';
  4.  
  5. /**
  6. * Error viewer. Displays big red box front and center when something
  7. * goes wrong
  8. */
  9. class ErrorBox extends React.Component {
  10. constructor(props) {
  11. super(props);
  12.  
  13. this.state = {opacity: 0};
  14. }
  15.  
  16. componentWillMount() {
  17. setTimeout(() => {
  18. this.setState({'opacity': 1});
  19. }, 100);
  20. setTimeout(() => {
  21. this.setState({'opacity': 0});
  22. }, 10000);
  23. }
  24.  
  25. handleClick() {
  26. this.setState({'opacity': 0});
  27. }
  28.  
  29. render() {
  30. return <div className={this.props.type} style={{opacity: this.state.opacity}} onClick={this.handleClick.bind(this)}>{this.props.children}</div>
  31. }
  32. }
  33.  
  34. class ErrorViewer extends React.Component {
  35. constructor(props) {
  36. super(props);
  37.  
  38. this.onChange = this.onChange.bind(this);
  39. }
  40.  
  41. onChange(state) {
  42. this.setState(state);
  43. }
  44.  
  45. componentWillMount() {
  46. ErrorsStore.listen(this.onChange);
  47. this.state = ErrorsStore.getState();
  48. }
  49.  
  50. componentWillUnmount() {
  51. ErrorsStore.unlisten(this.onChange);
  52. }
  53.  
  54. render() {
  55. let error = '';
  56. if (this.state.error && this.state.error.message) {
  57. error = <ErrorBox type={this.state.error.type}>{this.state.error.message}</ErrorBox>;
  58. }
  59.  
  60. let boxWidth = 500;
  61. let offset = 0;
  62.  
  63. if (window && window.jQuery) {
  64. const windowWidth = jQuery(window).width();
  65. boxWidth = windowWidth/4;
  66. offset = windowWidth/2 - boxWidth/2;
  67. }
  68.  
  69. return (
  70. <div className="errorViewer" style={{left: offset + 'px', width: boxWidth + 'px'}}>
  71. {error}
  72. </div>
  73. );
  74. }
  75. }
  76.  
  77. export default ErrorViewer;