summaryrefslogtreecommitdiffstats
path: root/web/react/components/msg_typing.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/msg_typing.jsx')
-rw-r--r--web/react/components/msg_typing.jsx85
1 files changed, 49 insertions, 36 deletions
diff --git a/web/react/components/msg_typing.jsx b/web/react/components/msg_typing.jsx
index aacb315dd..d9823c3cf 100644
--- a/web/react/components/msg_typing.jsx
+++ b/web/react/components/msg_typing.jsx
@@ -1,57 +1,70 @@
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.
-
var SocketStore = require('../stores/socket_store.jsx');
var UserStore = require('../stores/user_store.jsx');
-module.exports = React.createClass({
- timer: null,
- lastTime: 0,
- componentDidMount: function() {
- SocketStore.addChangeListener(this._onChange);
- },
- componentWillReceiveProps: function(newProps) {
- if(this.props.channelId !== newProps.channelId) {
- this.setState({text:""});
+export default class MsgTyping extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.timer = null;
+ this.lastTime = 0;
+
+ this.onChange = this.onChange.bind(this);
+
+ this.state = {
+ text: ''
+ };
+ }
+
+ componentDidMount() {
+ SocketStore.addChangeListener(this.onChange);
+ }
+
+ componentWillReceiveProps(newProps) {
+ if (this.props.channelId !== newProps.channelId) {
+ this.setState({text: ''});
}
- },
- componentWillUnmount: function() {
- SocketStore.removeChangeListener(this._onChange);
- },
- _onChange: function(msg) {
- if (msg.action == "typing" &&
- this.props.channelId == msg.channel_id &&
- this.props.parentId == msg.props.parent_id) {
+ }
+
+ componentWillUnmount() {
+ SocketStore.removeChangeListener(this.onChange);
+ }
+ onChange(msg) {
+ if (msg.action === 'typing' &&
+ this.props.channelId === msg.channel_id &&
+ this.props.parentId === msg.props.parent_id) {
this.lastTime = new Date().getTime();
- var username = "Someone";
+ var username = 'Someone';
if (UserStore.hasProfile(msg.user_id)) {
username = UserStore.getProfile(msg.user_id).username;
}
- this.setState({ text: username + " is typing..." });
+ this.setState({text: username + ' is typing...'});
if (!this.timer) {
- var outer = this;
- outer.timer = setInterval(function() {
- if ((new Date().getTime() - outer.lastTime) > 8000) {
- outer.setState({ text: "" });
- }
- }, 3000);
+ this.timer = setInterval(function myTimer() {
+ if ((new Date().getTime() - this.lastTime) > 8000) {
+ this.setState({text: ''});
+ }
+ }.bind(this), 3000);
}
+ } else if (msg.action === 'posted' && msg.channel_id === this.props.channelId) {
+ this.setState({text: ''});
}
- else if (msg.action == "posted" && msg.channel_id === this.props.channelId) {
- this.setState({text:""})
- }
- },
- getInitialState: function() {
- return { text: "" };
- },
- render: function() {
+ }
+
+ render() {
return (
- <span className="msg-typing">{ this.state.text }</span>
+ <span className='msg-typing'>{this.state.text}</span>
);
}
-});
+}
+
+MsgTyping.propTypes = {
+ channelId: React.PropTypes.string,
+ parentId: React.PropTypes.string
+};