Fixing blue bar and renders warning when mis-configured.

1 files changed, 45 insertions, 39 deletions

diff --git a/web/react/components/error_bar.jsx b/web/react/components/error_bar.jsx
index 87d94a41d..8d2978afb 100644
--- a/web/react/components/error_bar.jsx
+++ b/web/react/components/error_bar.jsx
@@ -3,9 +3,6 @@
 
 var ErrorStore = require('../stores/error_store.jsx');
 var utils = require('../utils/utils.jsx');
-var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
-var Constants = require('../utils/constants.jsx');
-var ActionTypes = Constants.ActionTypes;
 
 export default class ErrorBar extends React.Component {
     constructor() {
@@ -13,70 +10,79 @@ export default class ErrorBar extends React.Component {
 
         this.onErrorChange = this.onErrorChange.bind(this);
         this.handleClose = this.handleClose.bind(this);
+        this.prevTimmer = null;
 
-        this.state = this.getStateFromStores();
-        if (this.state.message) {
-            setTimeout(this.handleClose, 10000);
+        this.state = ErrorStore.getLastError();
+        if (this.state && this.state.message) {
+            this.prevTimmer = setTimeout(this.handleClose, 10000);
         }
     }
-    getStateFromStores() {
-        var error = ErrorStore.getLastError();
-        if (!error || error.message === 'There appears to be a problem with your internet connection') {
-            return {message: null};
-        }
 
-        return {message: error.message};
-    }
     componentDidMount() {
         ErrorStore.addChangeListener(this.onErrorChange);
         $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
-        $(window).resize(function onResize() {
-            if (this.state.message) {
+        $(window).resize(() => {
+            if (this.state && this.state.message) {
                 $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
             }
-        }.bind(this));
+        });
     }
+
     componentWillUnmount() {
         ErrorStore.removeChangeListener(this.onErrorChange);
     }
+
     onErrorChange() {
-        var newState = this.getStateFromStores();
-        if (!utils.areStatesEqual(newState, this.state)) {
-            if (newState.message) {
-                setTimeout(this.handleClose, 10000);
-            }
+        var newState = ErrorStore.getLastError();
+
+        if (this.prevTimmer != null) {
+            clearInterval(this.prevTimmer);
+            this.prevTimmer = null;
+        }
 
+        if (newState) {
             this.setState(newState);
+            this.prevTimmer = setTimeout(this.handleClose, 10000);
+        } else {
+            this.setState({message: null});
         }
     }
+
     handleClose(e) {
         if (e) {
             e.preventDefault();
         }
 
-        AppDispatcher.handleServerAction({
-            type: ActionTypes.RECIEVED_ERROR,
-            err: null
-        });
+        ErrorStore.storeLastError(null);
+        ErrorStore.emitChange();
 
         $('body').css('padding-top', '0');
     }
+
     render() {
-        if (this.state.message) {
-            return (
-                <div className='error-bar'>
-                    <span>{this.state.message}</span>
-                    <a
-                        href='#'
-                        className='error-bar__close'
-                        onClick={this.handleClose}
-                    >
-                        &times;
-                    </a>
-                </div>
-            );
+        if (!this.state) {
+            return <div/>;
+        }
+
+        if (!this.state.message) {
+            return <div/>;
+        }
+
+        if (this.state.connErrorCount < 7) {
+            return <div/>;
         }
 
-        return <div/>;
+        return (
+            <div className='error-bar'>
+                <span>{this.state.message}</span>
+                <a
+                    href='#'
+                    className='error-bar__close'
+                    onClick={this.handleClose}
+                >
+                    &times;
+                </a>
+            </div>
+        );
     }
 }