1 files changed, 47 insertions, 9 deletions

diff --git a/web/react/components/msg_typing.jsx b/web/react/components/msg_typing.jsx
index 78b67a216..b95b06260 100644
--- a/web/react/components/msg_typing.jsx
+++ b/web/react/components/msg_typing.jsx
@@ -5,9 +5,19 @@ import SocketStore from '../stores/socket_store.jsx';
 import UserStore from '../stores/user_store.jsx';
 
 import Constants from '../utils/constants.jsx';
+
+import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
+
 const SocketEvents = Constants.SocketEvents;
 
-export default class MsgTyping extends React.Component {
+const holders = defineMessages({
+    someone: {
+        id: 'msg_typing.someone',
+        defaultMessage: 'Someone'
+    }
+});
+
+class MsgTyping extends React.Component {
     constructor(props) {
         super(props);
 
@@ -25,9 +35,17 @@ export default class MsgTyping extends React.Component {
         SocketStore.addChangeListener(this.onChange);
     }
 
-    componentWillReceiveProps(newProps) {
-        if (this.props.channelId !== newProps.channelId) {
-            this.updateTypingText();
+    componentWillReceiveProps(nextProps) {
+        if (this.props.channelId !== nextProps.channelId) {
+            for (const u in this.typingUsers) {
+                if (!this.typingUsers.hasOwnProperty(u)) {
+                    continue;
+                }
+
+                clearTimeout(this.typingUsers[u]);
+            }
+            this.typingUsers = {};
+            this.setState({text: ''});
         }
     }
 
@@ -36,10 +54,10 @@ export default class MsgTyping extends React.Component {
     }
 
     onChange(msg) {
-        let username = 'Someone';
+        let username = this.props.intl.formatMessage(holders.someone);
         if (msg.action === SocketEvents.TYPING &&
-                this.props.channelId === msg.channel_id &&
-                this.props.parentId === msg.props.parent_id) {
+            this.props.channelId === msg.channel_id &&
+            this.props.parentId === msg.props.parent_id) {
             if (UserStore.hasProfile(msg.user_id)) {
                 username = UserStore.getProfile(msg.user_id).username;
             }
@@ -72,11 +90,28 @@ export default class MsgTyping extends React.Component {
             text = '';
             break;
         case 1:
-            text = users[0] + ' is typing...';
+            text = (
+                <FormattedMessage
+                    id='msg_typing.isTyping'
+                    defaultMessage='{user} is typing...'
+                    values={{
+                        user: users[0]
+                    }}
+                />
+            );
             break;
         default: {
             const last = users.pop();
-            text = users.join(', ') + ' and ' + last + ' are typing...';
+            text = (
+                <FormattedMessage
+                    id='msg_typing.areTyping'
+                    defaultMessage='{users} and {last} are typing...'
+                    vaues={{
+                        users: users.join(', '),
+                        last: last
+                    }}
+                />
+            );
             break;
         }
         }
@@ -92,6 +127,9 @@ export default class MsgTyping extends React.Component {
 }
 
 MsgTyping.propTypes = {
+    intl: intlShape.isRequired,
     channelId: React.PropTypes.string,
     parentId: React.PropTypes.string
 };
+
+export default injectIntl(MsgTyping);
\ No newline at end of file