use i18n in redux and components

client/app/bundles/comments/actions/commentsActionCreators.js

@@ -64,3 +64,10 @@ export function submitComment(comment) {
     );
   };
 }
+
+export function setLocale(locale) {
+  return {
+    type: actionTypes.SET_LOCALE,
+    locale,
+  };
+}

client/app/bundles/comments/common/i18n.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import I18n from 'i18n-js';
+
+const InitI18n = (railsContext) => {
+  I18n.translations = railsContext.translations;
+  I18n.defaultLocale = railsContext.i18nDefaultLocale;
+  I18n.fallbacks = true;
+};
+
+const SelectLanguage = (onChange) => (
+  <select onChange={(e) => onChange(e.target.value)} >
+    <option value="en">English</option>
+    <option value="de">Deutsch</option>
+    <option value="ja">日本語</option>
+    <option value="zh-CN">简体中文</option>
+    <option value="zh-TW">正體中文</option>
+  </select>
+);
+
+const SetI18nLocale = (locale) => {
+  I18n.locale = locale;
+};
+
+export { InitI18n, SelectLanguage, SetI18nLocale };

client/app/bundles/comments/components/CommentBox/CommentBox.jsx

@@ -1,9 +1,10 @@
 import BaseComponent from 'libs/components/BaseComponent';
 import React, { PropTypes } from 'react';
-
+import I18n from 'i18n-js';
 import CommentForm from './CommentForm/CommentForm';
 import CommentList from './CommentList/CommentList';
 import css from './CommentBox.scss';
+import { SelectLanguage, SetI18nLocale } from '../../common/i18n';
 
 export default class CommentBox extends BaseComponent {
   static propTypes = {
@@ -30,17 +31,20 @@ export default class CommentBox extends BaseComponent {
       leave: css.elementLeave,
       leaveActive: css.elementLeaveActive,
     };
+    const locale = data.get('locale');
+    SetI18nLocale(locale);
 
     return (
       <div className="commentBox container">
         <h2>
-          Comments {data.get('isFetching') && 'Loading...'}
+          { I18n.t('comments') } {data.get('isFetching') && 'Loading...'}
         </h2>
-        <p>
-          <b>Text</b> supports Github Flavored Markdown.
-          Comments older than 24 hours are deleted.<br />
-          <b>Name</b> is preserved. <b>Text</b> is reset, between submits.
-        </p>
+        { SelectLanguage(actions.setLocale) }
+        <ul>
+          <li>{ I18n.t('description.support_markdown') }</li>
+          <li>{ I18n.t('description.delete_rule') }</li>
+          <li>{ I18n.t('description.submit_rule') }</li>
+        </ul>
         <CommentForm
           isSaving={data.get('isSaving')}
           error={data.get('submitCommentError')}

client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx

@@ -7,11 +7,11 @@ import NavItem from 'react-bootstrap/lib/NavItem';
 import Alert from 'react-bootstrap/lib/Alert';
 import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
 import _ from 'lodash';
+import I18n from 'i18n-js';
 
 import BaseComponent from 'libs/components/BaseComponent';
 
 const emptyComment = { author: '', text: '' };
-const textPlaceholder = 'Say something using markdown...';
 
 function bsStyleFor(propName, error) {
   if (error) {
@@ -120,8 +120,8 @@ export default class CommentForm extends BaseComponent {
         <form className="commentForm form-horizontal" onSubmit={this.handleSubmit}>
           <Input
             type="text"
-            label="Name"
-            placeholder="Your Name"
+            label={I18n.t('input.name.label')}
+            placeholder={I18n.t('input.name.placeholder')}
             labelClassName="col-sm-2"
             wrapperClassName="col-sm-10"
             ref={node => { this.horizontalAuthorNode = node; }}
@@ -133,8 +133,8 @@ export default class CommentForm extends BaseComponent {
           />
           <Input
             type="textarea"
-            label="Text"
-            placeholder={textPlaceholder}
+            label={I18n.t('input.text.label')}
+            placeholder={I18n.t('input.text.placeholder')}
             labelClassName="col-sm-2"
             wrapperClassName="col-sm-10"
             ref={node => { this.horizontalTextNode = node; }}
@@ -149,7 +149,7 @@ export default class CommentForm extends BaseComponent {
               <input
                 type="submit"
                 className="btn btn-primary"
-                value={this.props.isSaving ? 'Saving...' : 'Post'}
+                value={this.props.isSaving ? `${I18n.t('input.saving')}...` : I18n.t('input.post')}
                 disabled={this.props.isSaving}
               />
             </div>
@@ -166,8 +166,8 @@ export default class CommentForm extends BaseComponent {
         <form className="commentForm form" onSubmit={this.handleSubmit}>
           <Input
             type="text"
-            label="Name"
-            placeholder="Your Name"
+            label={I18n.t('input.name.label')}
+            placeholder={I18n.t('input.name.placeholder')}
             ref={node => { this.stackedAuthorNode = node; }}
             value={this.state.comment.author}
             onChange={this.handleChange}
@@ -177,8 +177,8 @@ export default class CommentForm extends BaseComponent {
           />
           <Input
             type="textarea"
-            label="Text"
-            placeholder={textPlaceholder}
+            label={I18n.t('input.text.label')}
+            placeholder={I18n.t('input.text.placeholder')}
             ref={node => { this.stackedTextNode = node; }}
             value={this.state.comment.text}
             onChange={this.handleChange}
@@ -189,7 +189,7 @@ export default class CommentForm extends BaseComponent {
           <input
             type="submit"
             className="btn btn-primary"
-            value={this.props.isSaving ? 'Saving...' : 'Post'}
+            value={this.props.isSaving ? `${I18n.t('input.saving')}...` : I18n.t('input.post')}
             disabled={this.props.isSaving}
           />
         </form>
@@ -208,7 +208,7 @@ export default class CommentForm extends BaseComponent {
                 <input
                   type="text"
                   className="form-control"
-                  placeholder="Your Name"
+                  placeholder={I18n.t('input.name.placeholder')}
                   ref={node => { this.inlineAuthorNode = node; }}
                   value={this.state.comment.author}
                   onChange={this.handleChange}
@@ -219,7 +219,7 @@ export default class CommentForm extends BaseComponent {
                 <input
                   type="text"
                   className="form-control"
-                  placeholder={textPlaceholder}
+                  placeholder={I18n.t('input.text.placeholder')}
                   ref={node => { this.inlineTextNode = node; }}
                   value={this.state.comment.text}
                   onChange={this.handleChange}
@@ -230,7 +230,10 @@ export default class CommentForm extends BaseComponent {
                 <input
                   type="submit"
                   className="btn btn-primary"
-                  value={this.props.isSaving ? 'Saving...' : 'Post'}
+                  value={this.props.isSaving
+                          ? `${I18n.t('input.saving')}...`
+                          : I18n.t('input.post')
+                        }
                   disabled={this.props.isSaving}
                 />
               </Col>
@@ -292,9 +295,9 @@ export default class CommentForm extends BaseComponent {
         </ReactCSSTransitionGroup>
 
         <Nav bsStyle="pills" activeKey={this.state.formMode} onSelect={this.handleSelect}>
-          <NavItem eventKey={0}>Horizontal Form</NavItem>
-          <NavItem eventKey={1}>Stacked Form</NavItem>
-          <NavItem eventKey={2}>Inline Form</NavItem>
+          <NavItem eventKey={0}>{I18n.t('form.horizontal')}</NavItem>
+          <NavItem eventKey={1}>{I18n.t('form.stacked')}</NavItem>
+          <NavItem eventKey={2}>{I18n.t('form.inline')}</NavItem>
         </Nav>
         {inputForm}
       </div>

client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx

@@ -2,28 +2,38 @@ import React from 'react';
 import Immutable from 'immutable';
 import request from 'axios';
 import ReactOnRails from 'react-on-rails';
-
+import I18n from 'i18n-js';
 import BaseComponent from 'libs/components/BaseComponent';
 
 import CommentForm from '../CommentBox/CommentForm/CommentForm';
 import CommentList from '../CommentBox/CommentList/CommentList';
 import css from './SimpleCommentScreen.scss';
+import { InitI18n, SelectLanguage, SetI18nLocale } from '../../common/i18n';
+
+export default (props, railsContext) => (
+  <SimpleCommentScreen {...props} railsContext={railsContext} />
+);
+
+class SimpleCommentScreen extends BaseComponent {
+  constructor(props) {
+    super(props);
+    const { railsContext } = props;
 
-export default class SimpleCommentScreen extends BaseComponent {
-  constructor(props, context) {
-    super(props, context);
     this.state = {
       $$comments: Immutable.fromJS([]),
       isSaving: false,
       fetchCommentsError: null,
       submitCommentError: null,
+      locale: null,
     };
 
-    _.bindAll(this, 'fetchComments', 'handleCommentSubmit');
+    InitI18n(railsContext);
+    _.bindAll(this, 'fetchComments', 'handleCommentSubmit', 'handleSetLocale');
   }
 
   componentDidMount() {
     this.fetchComments();
+    this.handleSetLocale(this.props.railsContext.i18nLocale);
   }
 
   fetchComments() {
@@ -65,6 +75,10 @@ export default class SimpleCommentScreen extends BaseComponent {
     );
   }
 
+  handleSetLocale(locale) {
+    this.setState({ locale: locale });
+  }
+
   render() {
     const cssTransitionGroupClassNames = {
       enter: css.elementEnter,
@@ -73,13 +87,18 @@ export default class SimpleCommentScreen extends BaseComponent {
       leaveActive: css.elementLeaveActive,
     };
 
+    const { locale } = this.state;
+    SetI18nLocale(locale);
+
     return (
       <div className="commentBox container">
-        <h2>Comments</h2>
-        <p>
-          Text take Github Flavored Markdown. Comments older than 24 hours are deleted.<br />
-          <b>Name</b> is preserved. <b>Text</b> is reset, between submits.
-        </p>
+        <h2>{ I18n.t('comments') }</h2>
+        { SelectLanguage(this.handleSetLocale) }
+        <ul>
+          <li>{ I18n.t('description.support_markdown') }</li>
+          <li>{ I18n.t('description.delete_rule') }</li>
+          <li>{ I18n.t('description.submit_rule') }</li>
+        </ul>
         <CommentForm
           isSaving={this.state.isSaving}
           actions={{ submitComment: this.handleCommentSubmit }}

client/app/bundles/comments/constants/commentsConstants.js

@@ -6,3 +6,5 @@ export const SUBMIT_COMMENT_FAILURE = 'SUBMIT_COMMENT_FAILURE';
 
 export const SET_IS_FETCHING = 'SET_IS_FETCHING';
 export const SET_IS_SAVING = 'SET_IS_SAVING';
+
+export const SET_LOCALE = 'SET_LOCALE';

client/app/bundles/comments/reducers/commentsReducer.js

@@ -10,10 +10,11 @@ export const $$initialState = Immutable.fromJS({
   submitCommentError: null,
   isFetching: false,
   isSaving: false,
+  locale: null,
 });
 
 export default function commentsReducer($$state = $$initialState, action = null) {
-  const { type, comment, comments, error } = action;
+  const { type, comment, comments, error, locale } = action;
 
   switch (type) {
 
@@ -65,6 +66,12 @@ export default function commentsReducer($$state = $$initialState, action = null)
       });
     }
 
+    case actionTypes.SET_LOCALE: {
+      return $$state.merge({
+        locale,
+      });
+    }
+
     default: {
       return $$state;
     }

client/app/bundles/comments/startup/App.jsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import ReactOnRails from 'react-on-rails';
+import { InitI18n } from '../common/i18n';
 
 import NonRouterCommentsContainer from '../containers/NonRouterCommentsContainer';
 
 export default (_props, _railsContext) => {
   const store = ReactOnRails.getStore('commentsStore');
 
+  InitI18n(_railsContext);
+
   return (
     <Provider store={store}>
       <NonRouterCommentsContainer />

client/app/bundles/comments/startup/ClientRouterApp.jsx

@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
 import ReactOnRails from 'react-on-rails';
 import { syncHistoryWithStore } from 'react-router-redux';
 import { Router, browserHistory } from 'react-router';
+import { InitI18n } from '../common/i18n';
 
 import routes from '../routes/routes';
 
@@ -16,6 +17,8 @@ export default (_props, _railsContext) => {
     store
   );
 
+  InitI18n(_railsContext);
+
   return (
     <Provider store={store}>
       <Router history={history} children={routes} />