summaryrefslogtreecommitdiffstats
path: root/web/react/components/textbox.jsx
diff options
context:
space:
mode:
authornickago <ngonella@calpoly.edu>2015-08-05 16:10:59 -0700
committernickago <ngonella@calpoly.edu>2015-08-05 16:27:22 -0700
commitf6bc38163ec1dc9d2b3aa7622dcaab2f59112c17 (patch)
tree9565e25a3b876450752fbff4c77933aa6556cc7b /web/react/components/textbox.jsx
parent47cedd68d6f8c5dfd9c5af826e29342080759b61 (diff)
downloadchat-f6bc38163ec1dc9d2b3aa7622dcaab2f59112c17.tar.gz
chat-f6bc38163ec1dc9d2b3aa7622dcaab2f59112c17.tar.bz2
chat-f6bc38163ec1dc9d2b3aa7622dcaab2f59112c17.zip
Added cosmetic refactoring
Diffstat (limited to 'web/react/components/textbox.jsx')
-rw-r--r--web/react/components/textbox.jsx95
1 files changed, 49 insertions, 46 deletions
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 (
- <div ref="wrapper" className="textarea-wrapper">
+ <div ref='wrapper' className='textarea-wrapper'>
<CommandList ref='commands' addCommand={this.addCommand} channelId={this.props.channelId} />
- <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} 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} onFocus={this.handleFocus} onBlur={this.handleBlur} onPaste={this.handlePaste} />
</div>
);
}