MM-2065 style refactoring

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:""});
-        }
-    },
-    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) {
+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() {
+        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
+};