Adding react-intl i18n to the frontend. No translations yet

app/assets/javascripts/components/features/compose/components/compose_form.jsx

@@ -8,6 +8,7 @@ import Autosuggest from 'react-autosuggest';
 import AutosuggestAccountContainer from '../../compose/containers/autosuggest_account_container';
 import { debounce } from 'react-decoration';
 import UploadButtonContainer from '../containers/upload_button_container';
+import { injectIntl } from 'react-intl';
 
 const getTokenForSuggestions = (str, caretPosition) => {
   let word;
@@ -134,6 +135,7 @@ const ComposeForm = React.createClass({
   },
 
   render () {
+    const { intl } = this.props;
     let replyArea  = '';
     const disabled = this.props.is_submitting || this.props.is_uploading;
 
@@ -142,7 +144,7 @@ const ComposeForm = React.createClass({
     }
 
     const inputProps = {
-      placeholder: 'What is on your mind?',
+      placeholder: intl.formatMessage({ id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' }),
       value: this.props.text,
       onKeyUp: this.handleKeyUp,
       onChange: this.handleChange,
@@ -167,7 +169,7 @@ const ComposeForm = React.createClass({
         />
 
         <div style={{ marginTop: '10px', overflow: 'hidden' }}>
-          <div style={{ float: 'right' }}><Button text='Publish' onClick={this.handleSubmit} disabled={disabled} /></div>
+          <div style={{ float: 'right' }}><Button text={intl.formatMessage({ id: 'compose_form.publish', defaultMessage: 'Publish' })} onClick={this.handleSubmit} disabled={disabled} /></div>
           <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={this.props.text} /></div>
           <UploadButtonContainer style={{ paddingTop: '4px' }} />
         </div>
@@ -177,4 +179,4 @@ const ComposeForm = React.createClass({
 
 });
 
-export default ComposeForm;
+export default injectIntl(ComposeForm);

app/assets/javascripts/components/features/compose/components/navigation_bar.jsx

@@ -1,9 +1,10 @@
 import PureRenderMixin    from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Avatar             from '../../../components/avatar';
-import IconButton         from '../../../components/icon_button';
-import DisplayName        from '../../../components/display_name';
-import { Link }           from 'react-router';
+import IconButton from '../../../components/icon_button';
+import DisplayName from '../../../components/display_name';
+import { Link } from 'react-router';
+import { FormattedMessage } from 'react-intl';
 
 const NavigationBar = React.createClass({
   propTypes: {
@@ -19,7 +20,7 @@ const NavigationBar = React.createClass({
 
         <div style={{ flex: '1 1 auto', marginLeft: '8px', color: '#9baec8' }}>
           <strong style={{ fontWeight: '500', display: 'block', color: '#fff' }}>{this.props.account.get('acct')}</strong>
-          <a href='/settings/profile' style={{ color: 'inherit', textDecoration: 'none' }}>Settings</a> · <Link to='/timelines/public' style={{ color: 'inherit', textDecoration: 'none' }}>Public timeline</Link> · <a href='/auth/sign_out' data-method='delete' style={{ color: 'inherit', textDecoration: 'none' }}>Logout</a>
+          <a href='/settings/profile' style={{ color: 'inherit', textDecoration: 'none' }}><FormattedMessage id='navigation_bar.settings' defaultMessage='Settings' /></a> · <Link to='/timelines/public' style={{ color: 'inherit', textDecoration: 'none' }}><FormattedMessage id='navigation_bar.public_timeline' defaultMessage='Public timeline' /></Link> · <a href='/auth/sign_out' data-method='delete' style={{ color: 'inherit', textDecoration: 'none' }}><FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' /></a>
         </div>
       </div>
     );

app/assets/javascripts/components/features/compose/components/reply_indicator.jsx

@@ -3,11 +3,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import Avatar from '../../../components/avatar';
 import IconButton from '../../../components/icon_button';
 import DisplayName from '../../../components/display_name';
-import emojione from 'emojione';
-
-emojione.imageType = 'png';
-emojione.sprites = false;
-emojione.imagePathPNG = '/emoji/';
+import emojify from '../../../emoji';
+import { injectIntl } from 'react-intl';
 
 const ReplyIndicator = React.createClass({
 
@@ -34,12 +31,13 @@ const ReplyIndicator = React.createClass({
   },
 
   render () {
-    let content = { __html: emojione.unicodeToImage(this.props.status.get('content')) };
+    const { intl } = this.props;
+    const content  = { __html: emojify(this.props.status.get('content')) };
 
     return (
       <div style={{ background: '#9baec8', padding: '10px' }}>
         <div style={{ overflow: 'hidden', marginBottom: '5px' }}>
-          <div style={{ float: 'right', lineHeight: '24px' }}><IconButton title='Cancel' icon='times' onClick={this.handleClick} /></div>
+          <div style={{ float: 'right', lineHeight: '24px' }}><IconButton title={intl.formatMessage({ id: 'reply_indicator.cancel', defaultMessage: 'Cancel' })} icon='times' onClick={this.handleClick} /></div>
 
           <a href={this.props.status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#282c37', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}>
             <div style={{ float: 'left', marginRight: '5px' }}><Avatar size={24} src={this.props.status.getIn(['account', 'avatar'])} /></div>
@@ -54,4 +52,4 @@ const ReplyIndicator = React.createClass({
 
 });
 
-export default ReplyIndicator;
+export default injectIntl(ReplyIndicator);

app/assets/javascripts/components/features/compose/components/search.jsx

@@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import Autosuggest from 'react-autosuggest';
 import AutosuggestAccountContainer from '../containers/autosuggest_account_container';
 import { debounce } from 'react-decoration';
+import { injectIntl } from 'react-intl';
 
 const getSuggestionValue = suggestion => suggestion.value;
 
@@ -94,7 +95,7 @@ const Search = React.createClass({
 
   render () {
     const inputProps = {
-      placeholder: 'Search',
+      placeholder: this.props.intl.formatMessage({ id: 'search.placeholder', defaultMessage: 'Search' }),
       value: this.props.value,
       onChange: this.onChange,
       style: inputStyle
@@ -125,4 +126,4 @@ const Search = React.createClass({
 
 });
 
-export default Search;
+export default injectIntl(Search);

app/assets/javascripts/components/features/compose/components/suggestions_box.jsx

@@ -1,6 +1,7 @@
-import PureRenderMixin    from 'react-addons-pure-render-mixin';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import AccountContainer   from '../../followers/containers/account_container';
+import AccountContainer from '../../followers/containers/account_container';
+import { FormattedMessage } from 'react-intl';
 
 const outerStyle = {
   position: 'relative'
@@ -66,13 +67,13 @@ const SuggestionsBox = React.createClass({
     let nextLink = '';
 
     if (accountIds.size > perWindow) {
-      nextLink = <a href='#' style={nextStyle} onClick={this.handleNextClick}>Refresh</a>;
+      nextLink = <a href='#' style={nextStyle} onClick={this.handleNextClick}><FormattedMessage id='suggestions_box.refresh' defaultMessage='Refresh' /></a>;
     }
 
     return (
       <div style={outerStyle}>
         <strong style={headerStyle}>
-          Who to follow {nextLink}
+          <FormattedMessage id='suggestions_box.who_to_follow' defaultMessage='Who to follow' /> {nextLink}
         </strong>
 
         {accountIds.skip(perWindow * this.state.index).take(perWindow).map(accountId => <AccountContainer key={accountId} id={accountId} withNote={false} />)}

app/assets/javascripts/components/features/compose/components/upload_button.jsx

@@ -1,5 +1,6 @@
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import IconButton from '../../../components/icon_button';
+import { injectIntl } from 'react-intl';
 
 const UploadButton = React.createClass({
 
@@ -26,9 +27,11 @@ const UploadButton = React.createClass({
   },
 
   render () {
+    const { intl } = this.props;
+
     return (
       <div style={this.props.style}>
-        <IconButton icon='photo' title='Add media' disabled={this.props.disabled} onClick={this.handleClick} size={24} />
+        <IconButton icon='photo' title={intl.formatMessage({ id: 'upload_button.label', defaultMessage: 'Add media' })} disabled={this.props.disabled} onClick={this.handleClick} size={24} />
         <input ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={this.props.disabled} style={{ display: 'none' }} />
       </div>
     );
@@ -36,4 +39,4 @@ const UploadButton = React.createClass({
 
 });
 
-export default UploadButton;
+export default injectIntl(UploadButton);

app/assets/javascripts/components/features/compose/components/upload_form.jsx

@@ -1,6 +1,7 @@
-import PureRenderMixin    from 'react-addons-pure-render-mixin';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import IconButton         from '../../../components/icon_button';
+import IconButton from '../../../components/icon_button';
+import { injectIntl } from 'react-intl';
 
 const UploadForm = React.createClass({
 
@@ -13,10 +14,12 @@ const UploadForm = React.createClass({
   mixins: [PureRenderMixin],
 
   render () {
+    const { intl } = this.props;
+
     const uploads = this.props.media.map(attachment => (
       <div key={attachment.get('id')} style={{ borderRadius: '4px', marginBottom: '10px' }} className='transparent-background'>
         <div style={{ width: '100%', height: '100px', borderRadius: '4px', background: `url(${attachment.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }}>
-          <IconButton icon='times' title='Undo' size={36} onClick={this.props.onRemoveFile.bind(this, attachment.get('id'))} />
+          <IconButton icon='times' title={intl.formatMessage({ id: 'upload_form.undo', defaultMessage: 'Undo' })} size={36} onClick={this.props.onRemoveFile.bind(this, attachment.get('id'))} />
         </div>
       </div>
     ));
@@ -30,4 +33,4 @@ const UploadForm = React.createClass({
 
 });
 
-export default UploadForm;
+export default injectIntl(UploadForm);