diff options
author | Corey Hulen <corey@hulen.com> | 2015-07-10 11:26:35 -0800 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2015-07-10 11:26:35 -0800 |
commit | 5bb2acc996dc037b15e5a2e1f27b29c87a6bb9b0 (patch) | |
tree | 7fc64005c047e4a4f30e42fb89df7e8022418430 /web/react/components | |
parent | d124b9df109e55448aa2d3556a56d65e1c1982fd (diff) | |
parent | 184eac99ddd329fcd803f938f193572cc64f842e (diff) | |
download | chat-5bb2acc996dc037b15e5a2e1f27b29c87a6bb9b0.tar.gz chat-5bb2acc996dc037b15e5a2e1f27b29c87a6bb9b0.tar.bz2 chat-5bb2acc996dc037b15e5a2e1f27b29c87a6bb9b0.zip |
Merge pull request #159 from rgarmsen2295/mm-1269b
MM-1269b Added yellow tinge to post and comment textbox when connection is disrupted
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/error_bar.jsx | 2 | ||||
-rw-r--r-- | web/react/components/textbox.jsx | 50 |
2 files changed, 49 insertions, 3 deletions
diff --git a/web/react/components/error_bar.jsx b/web/react/components/error_bar.jsx index f23dc060e..d9d91ef51 100644 --- a/web/react/components/error_bar.jsx +++ b/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 }; diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx index 6b746aa78..ad50b7920 100644 --- a/web/react/components/textbox.jsx +++ b/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> ); } |