From f6bc38163ec1dc9d2b3aa7622dcaab2f59112c17 Mon Sep 17 00:00:00 2001 From: nickago Date: Wed, 5 Aug 2015 16:10:59 -0700 Subject: Added cosmetic refactoring --- web/react/components/textbox.jsx | 95 +++++++++++++++++++++------------------- 1 file changed, 49 insertions(+), 46 deletions(-) (limited to 'web') diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx index 5deb671a7..b5c5cc564 100644 --- a/web/react/components/textbox.jsx +++ b/web/react/components/textbox.jsx @@ -2,11 +2,7 @@ // See License.txt for license information. var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); -var UserStore = require('../stores/user_store.jsx'); var PostStore = require('../stores/post_store.jsx'); -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'); @@ -19,53 +15,53 @@ function getStateFromStores() { var error = ErrorStore.getLastError(); if (error) { - return { message: error.message }; - } else { - return { message: null }; + return {message: error.message}; } + return {message: null}; } module.exports = React.createClass({ + displayName: 'Textbox', caret: -1, addedMention: false, doProcessMentions: false, mentions: [], componentDidMount: function() { - PostStore.addAddMentionListener(this._onChange); - ErrorStore.addChangeListener(this._onError); + PostStore.addAddMentionListener(this.onListenerChange); + ErrorStore.addChangeListener(this.onRecievedError); this.resize(); this.updateMentionTab(null); }, componentWillUnmount: function() { - PostStore.removeAddMentionListener(this._onChange); - ErrorStore.removeChangeListener(this._onError); + PostStore.removeAddMentionListener(this.onListenerChange); + ErrorStore.removeChangeListener(this.onRecievedError); }, - _onChange: function(id, username) { - if (id !== this.props.id) return; - this.addMention(username); + onListenerChange: function(id, username) { + if (id === this.props.id) { + this.addMention(username); + } }, - _onError: function() { + onRecievedError: function() { var errorState = getStateFromStores(); if (this.state.timerInterrupt != null) { window.clearInterval(this.state.timerInterrupt); - this.setState({ timerInterrupt: null }); + 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: "" }); + 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() { + 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") { + if (this.state.connection === 'bad-connection') { AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_ERROR, err: null @@ -75,11 +71,11 @@ module.exports = React.createClass({ } window.clearInterval(this.state.timerInterrupt); - this.setState({ timerInterrupt: null }); + this.setState({timerInterrupt: null}); }, componentDidUpdate: function() { if (this.caret >= 0) { - utils.setCaretPosition(this.refs.message.getDOMNode(), this.caret) + utils.setCaretPosition(this.refs.message.getDOMNode(), this.caret); this.caret = -1; } if (this.doProcessMentions) { @@ -93,7 +89,7 @@ module.exports = React.createClass({ this.checkForNewMention(nextProps.messageText); } var text = this.refs.message.getDOMNode().value; - if (nextProps.channelId != this.props.channelId || nextProps.messageText !== text) { + if (nextProps.channelId !== this.props.channelId || nextProps.messageText !== text) { this.doProcessMentions = true; } this.addedMention = false; @@ -101,10 +97,11 @@ module.exports = React.createClass({ this.resize(); }, getInitialState: function() { - return { mentionText: '-1', mentions: [], connection: "", timerInterrupt: null }; + return {mentionText: '-1', mentions: [], connection: '', timerInterrupt: null}; }, updateMentionTab: function(mentionText) { var self = this; + // using setTimeout so dispatch isn't called during an in progress dispatch setTimeout(function() { AppDispatcher.handleViewAction({ @@ -121,13 +118,13 @@ module.exports = React.createClass({ handleKeyPress: function(e) { var text = this.refs.message.getDOMNode().value; - if (!this.refs.commands.isEmpty() && text.indexOf("/") == 0 && e.which==13) { + if (!this.refs.commands.isEmpty() && text.indexOf('/') === 0 && e.which === 13) { this.refs.commands.addFirstCommand(); e.preventDefault(); return; } - if ( !this.doProcessMentions) { + if (!this.doProcessMentions) { var caret = utils.getCaretPosition(this.refs.message.getDOMNode()); var preText = text.substring(0, caret); var lastSpace = preText.lastIndexOf(' '); @@ -149,13 +146,15 @@ module.exports = React.createClass({ this.handleBackspace(e); } }, - handleBackspace: function(e) { + handleBackspace: function() { var text = this.refs.message.getDOMNode().value; - if (text.indexOf("/") == 0) { - this.refs.commands.getSuggestedCommands(text.substring(0, text.length-1)); + if (text.indexOf('/') === 0) { + this.refs.commands.getSuggestedCommands(text.substring(0, text.length - 1)); } - if (this.doProcessMentions) return; + if (this.doProcessMentions) { + return; + } var caret = utils.getCaretPosition(this.refs.message.getDOMNode()); var preText = text.substring(0, caret); @@ -189,7 +188,7 @@ module.exports = React.createClass({ } // Get the name typed so far. - var name = preText.substring(atIndex+1, preText.length).toLowerCase(); + var name = preText.substring(atIndex + 1, preText.length).toLowerCase(); this.updateMentionTab(name); }, addMention: function(name) { @@ -212,7 +211,7 @@ module.exports = React.createClass({ this.addedMention = true; this.doProcessMentions = true; - this.props.onUserInput(prefix + "@" + name + " " + suffix); + this.props.onUserInput(prefix + '@' + name + ' ' + suffix); }, addCommand: function(cmd) { var elm = this.refs.message.getDOMNode(); @@ -223,22 +222,26 @@ module.exports = React.createClass({ var e = this.refs.message.getDOMNode(); var w = this.refs.wrapper.getDOMNode(); - var lht = parseInt($(e).css('lineHeight'),10); + var lht = parseInt($(e).css('lineHeight'), 10); var lines = e.scrollHeight / lht; - var mod = lines < 2.5 || this.props.messageText === "" ? 30 : 15; + var mod = 15; + + if (lines < 2.5 || this.props.messageText === '') { + mod = 30; + } if (e.scrollHeight - mod < 167) { - $(e).css({'height':'auto','overflow-y':'hidden'}).height(e.scrollHeight - mod); - $(w).css({'height':'auto'}).height(e.scrollHeight+2); + $(e).css({height: 'auto', 'overflow-y': 'hidden'}).height(e.scrollHeight - mod); + $(w).css({height: 'auto'}).height(e.scrollHeight + 2); } else { - $(e).css({'height':'auto','overflow-y':'scroll'}).height(167); - $(w).css({'height':'auto'}).height(167); + $(e).css({height: 'auto', 'overflow-y': 'scroll'}).height(167); + $(w).css({height: 'auto'}).height(167); } }, handleFocus: function() { var elm = this.refs.message.getDOMNode(); if (elm.title === elm.value) { - elm.value = ""; + elm.value = ''; } }, handleBlur: function() { @@ -252,9 +255,9 @@ module.exports = React.createClass({ }, render: function() { return ( -
+
-