PLT-7: Refactoring frontend (chunk 9)

- sidebar right & rhs

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);
 
@@ -44,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;
             }
@@ -80,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;
         }
         }
@@ -100,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);