Merge pull request #159 from rgarmsen2295/mm-1269b

MM-1269b Added yellow tinge to post and comment textbox when connection is disrupted

web/react/components/error_bar.jsx

@@ -9,7 +9,7 @@ var ActionTypes = Constants.ActionTypes;
 
 function getStateFromStores() {
   var error = ErrorStore.getLastError();
-  if (error) {
+  if (error && error.message !== "There appears to be a problem with your internet connection") {
       return { message: error.message };
   } else {
      return { message: null };

web/react/components/textbox.jsx

@@ -8,11 +8,23 @@ var SocketStore = require('../stores/socket_store.jsx');
 var MsgTyping = require('./msg_typing.jsx');
 var MentionList = require('./mention_list.jsx');
 var CommandList = require('./command_list.jsx');
+var ErrorStore = require('../stores/error_store.jsx');
+var AsyncClient = require('../utils/async_client.jsx');
 
 var utils = require('../utils/utils.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
 
+function getStateFromStores() {
+    var error = ErrorStore.getLastError();
+
+    if (error) {
+        return { message: error.message };
+    } else {
+        return { message: null };
+    }
+}
+
 module.exports = React.createClass({
     caret: -1,
     addedMention: false,
@@ -20,6 +32,7 @@ module.exports = React.createClass({
     mentions: [],
     componentDidMount: function() {
         PostStore.addAddMentionListener(this._onChange);
+        ErrorStore.addChangeListener(this._onError);
 
         this.resize();
         this.processMentions();
@@ -27,11 +40,44 @@ module.exports = React.createClass({
     },
     componentWillUnmount: function() {
         PostStore.removeAddMentionListener(this._onChange);
+        ErrorStore.removeChangeListener(this._onError);
     },
     _onChange: function(id, username) {
         if (id !== this.props.id) return;
         this.addMention(username);
     },
+    _onError: function() {
+        var errorState = getStateFromStores();
+
+        if (this.state.timerInterrupt != null) {
+            window.clearInterval(this.state.timerInterrupt);
+            this.setState({ timerInterrupt: null });
+        }
+
+        if (errorState.message === "There appears to be a problem with your internet connection") {
+            this.setState({ connection: "bad-connection" });
+            var timerInterrupt = window.setInterval(this._onTimerInterrupt, 5000);
+            this.setState({ timerInterrupt: timerInterrupt });
+        }
+        else {
+            this.setState({ connection: "" });
+        }
+    },
+    _onTimerInterrupt: function() {
+        //Since these should only happen when you have no connection and slightly briefly after any
+        //performance hit should not matter
+        if (this.state.connection === "bad-connection") {
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECIEVED_ERROR,
+                err: null
+            });
+
+            AsyncClient.updateLastViewedAt();
+        }
+
+        window.clearInterval(this.state.timerInterrupt);
+        this.setState({ timerInterrupt: null });
+    },
     componentDidUpdate: function() {
         if (this.caret >= 0) {
             utils.setCaretPosition(this.refs.message.getDOMNode(), this.caret)
@@ -57,7 +103,7 @@ module.exports = React.createClass({
         this.resize();
     },
     getInitialState: function() {
-        return { mentionText: '-1', mentions: [] };
+        return { mentionText: '-1', mentions: [], connection: "", timerInterrupt: null };
     },
     updateMentionTab: function(mentionText, excludeList) {
         var self = this;
@@ -287,7 +333,7 @@ module.exports = React.createClass({
             <div ref="wrapper" className="textarea-wrapper">
                 <CommandList ref='commands' addCommand={this.addCommand} channelId={this.props.channelId} />
                 <div className="form-control textarea-div" ref="textdiv"/>
-                <textarea id={this.props.id} ref="message" className="form-control custom-textarea" spellCheck="true" autoComplete="off" autoCorrect="off" rows="1" placeholder={this.props.createMessage} value={this.props.messageText} onInput={this.handleChange} onChange={this.handleChange} onKeyPress={this.handleKeyPress} onKeyDown={this.handleKeyDown} onScroll={this.scroll} onFocus={this.handleFocus} onBlur={this.handleBlur} onPaste={this.handlePaste} />
+                <textarea id={this.props.id} ref="message" className={"form-control custom-textarea " + this.state.connection} spellCheck="true" autoComplete="off" autoCorrect="off" rows="1" placeholder={this.props.createMessage} value={this.props.messageText} onInput={this.handleChange} onChange={this.handleChange} onKeyPress={this.handleKeyPress} onKeyDown={this.handleKeyDown} onScroll={this.scroll} onFocus={this.handleFocus} onBlur={this.handleBlur} onPaste={this.handlePaste} />
             </div>
         );
     }

web/react/stores/error_store.jsx

@@ -31,7 +31,7 @@ var ErrorStore = assign({}, EventEmitter.prototype, {
   getLastError: function() {
     var error = null;
     try {
-        error = JSON.parse(BrowserStore.last_error);
+        error = JSON.parse(BrowserStore.getItem("last_error"));
     }
     catch (err) {
     }

web/react/utils/async_client.jsx

@@ -15,8 +15,6 @@ var ActionTypes = Constants.ActionTypes;
 var callTracker = {};
 
 var dispatchError = function(err, method) {
-    if (err.message === "There appears to be a problem with your internet connection") return;
-
     AppDispatcher.handleServerAction({
         type: ActionTypes.RECIEVED_ERROR,
         err: err,

web/sass-files/sass/partials/_post.scss

@@ -11,6 +11,10 @@
 	min-height:36px;
 }
 
+.bad-connection {
+	background-color: rgb(255, 255, 172);
+}
+
 .textarea-div {
 	white-space:pre-wrap;
 	word-wrap:normal;