PLT-7: Refactoring frontend (chunk 10)

- Modals
- Fix bug on msg_typing
- Add missing translations in es.json for EE

1 files changed, 47 insertions, 10 deletions

diff --git a/web/react/components/channel_info_modal.jsx b/web/react/components/channel_info_modal.jsx
index 72c7c3daa..5067f5913 100644
--- a/web/react/components/channel_info_modal.jsx
+++ b/web/react/components/channel_info_modal.jsx
@@ -2,17 +2,28 @@
 // See License.txt for license information.
 
 import * as Utils from '../utils/utils.jsx';
+
+import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
+
 const Modal = ReactBootstrap.Modal;
 
-export default class ChannelInfoModal extends React.Component {
+const holders = defineMessages({
+    notFound: {
+        id: 'channel_info.notFound',
+        defaultMessage: 'No Channel Found'
+    }
+});
+
+class ChannelInfoModal extends React.Component {
     render() {
+        const {formatMessage} = this.props.intl;
         let channel = this.props.channel;
         if (!channel) {
             channel = {
-                display_name: 'No Channel Found',
-                name: 'No Channel Found',
-                purpose: 'No Channel Found',
-                id: 'No Channel Found'
+                display_name: formatMessage(holders.notFound),
+                name: formatMessage(holders.notFound),
+                purpose: formatMessage(holders.notFound),
+                id: formatMessage(holders.notFound)
             };
         }
 
@@ -28,19 +39,39 @@ export default class ChannelInfoModal extends React.Component {
                 </Modal.Header>
                 <Modal.Body ref='modalBody'>
                     <div className='row form-group'>
-                        <div className='col-sm-3 info__label'>{'Channel Name:'}</div>
+                        <div className='col-sm-3 info__label'>
+                            <FormattedMessage
+                                id='channel_info.name'
+                                defaultMessage='Channel Name:'
+                            />
+                        </div>
                         <div className='col-sm-9'>{channel.display_name}</div>
                     </div>
                     <div className='row form-group'>
-                        <div className='col-sm-3 info__label'>{'Channel URL:'}</div>
+                        <div className='col-sm-3 info__label'>
+                            <FormattedMessage
+                                id='channel_info.url'
+                                defaultMessage='Channel URL:'
+                            />
+                        </div>
                         <div className='col-sm-9'>{channelURL}</div>
                     </div>
                     <div className='row'>
-                        <div className='col-sm-3 info__label'>{'Channel ID:'}</div>
+                        <div className='col-sm-3 info__label'>
+                            <FormattedMessage
+                                id='channel_info.id'
+                                defaultMessage='Channel ID:'
+                            />
+                        </div>
                         <div className='col-sm-9'>{channel.id}</div>
                     </div>
                     <div className='row'>
-                        <div className='col-sm-3 info__label'>{'Channel Purpose:'}</div>
+                        <div className='col-sm-3 info__label'>
+                            <FormattedMessage
+                                id='channel_info.purpose'
+                                defaultMessage='Channel Purpose:'
+                            />
+                        </div>
                         <div className='col-sm-9'>{channel.purpose}</div>
                     </div>
                 </Modal.Body>
@@ -50,7 +81,10 @@ export default class ChannelInfoModal extends React.Component {
                         className='btn btn-default'
                         onClick={this.props.onHide}
                     >
-                        {'Close'}
+                        <FormattedMessage
+                            id='channel_info.close'
+                            defaultMessage='Close'
+                        />
                     </button>
                 </Modal.Footer>
             </Modal>
@@ -59,7 +93,10 @@ export default class ChannelInfoModal extends React.Component {
 }
 
 ChannelInfoModal.propTypes = {
+    intl: intlShape.isRequired,
     show: React.PropTypes.bool.isRequired,
     onHide: React.PropTypes.func.isRequired,
     channel: React.PropTypes.object.isRequired
 };
+
+export default injectIntl(ChannelInfoModal);
\ No newline at end of file