Merge pull request #951 from mattermost/PLT-500

PLT-500 fixing connection msg issues

web/react/components/error_bar.jsx

@@ -9,28 +9,71 @@ export default class ErrorBar extends React.Component {
 
         this.onErrorChange = this.onErrorChange.bind(this);
         this.handleClose = this.handleClose.bind(this);
+        this.resize = this.resize.bind(this);
         this.prevTimer = null;
 
         this.state = ErrorStore.getLastError();
-        if (this.state && this.state.message) {
+        if (this.isValidError(this.state)) {
             this.prevTimer = setTimeout(this.handleClose, 10000);
         }
     }
 
+    isValidError(s) {
+        if (!s) {
+            return false;
+        }
+
+        if (!s.message) {
+            return false;
+        }
+
+        if (s.connErrorCount && s.connErrorCount >= 1 && s.connErrorCount < 7) {
+            return false;
+        }
+
+        return true;
+    }
+
+    isConnectionError(s) {
+        if (!s.connErrorCount || s.connErrorCount === 0) {
+            return false;
+        }
+
+        if (s.connErrorCount > 7) {
+            return true;
+        }
+
+        return false;
+    }
+
+    resize() {
+        if (this.isValidError(this.state)) {
+            var height = $(React.findDOMNode(this)).outerHeight();
+            height = height < 30 ? 30 : height;
+            $('body').css('padding-top', height + 'px');
+        } else {
+            $('body').css('padding-top', '0');
+        }
+    }
+
     componentDidMount() {
         ErrorStore.addChangeListener(this.onErrorChange);
-        $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
+
         $(window).resize(() => {
-            if (this.state && this.state.message) {
-                $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
-            }
+            this.resize();
         });
+
+        this.resize();
     }
 
     componentWillUnmount() {
         ErrorStore.removeChangeListener(this.onErrorChange);
     }
 
+    componentDidUpdate() {
+        this.resize();
+    }
+
     onErrorChange() {
         var newState = ErrorStore.getLastError();
 
@@ -41,7 +84,9 @@ export default class ErrorBar extends React.Component {
 
         if (newState) {
             this.setState(newState);
-            this.prevTimer = setTimeout(this.handleClose, 10000);
+            if (!this.isConnectionError(newState)) {
+                this.prevTimer = setTimeout(this.handleClose, 10000);
+            }
         } else {
             this.setState({message: null});
         }
@@ -52,22 +97,11 @@ export default class ErrorBar extends React.Component {
             e.preventDefault();
         }
 
-        ErrorStore.storeLastError(null);
-        ErrorStore.emitChange();
-
-        $('body').css('padding-top', '0');
+        this.setState({message: null});
     }
 
     render() {
-        if (!this.state) {
-            return <div/>;
-        }
-
-        if (!this.state.message) {
-            return <div/>;
-        }
-
-        if (this.state.connErrorCount < 7) {
+        if (!this.isValidError(this.state)) {
             return <div/>;
         }