Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 17da110

Browse files
use i18n in redux and components
1 parent dd05206 commit 17da110

File tree

9 files changed

+106
-35
lines changed

9 files changed

+106
-35
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,10 @@ export function submitComment(comment) {
6464
);
6565
};
6666
}
67+
68+
export function setLocale(locale) {
69+
return {
70+
type: actionTypes.SET_LOCALE,
71+
locale,
72+
};
73+
}
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import I18n from 'i18n-js';
3+
4+
const InitI18n = (railsContext) => {
5+
I18n.translations = railsContext.translations;
6+
I18n.defaultLocale = railsContext.i18nDefaultLocale;
7+
I18n.fallbacks = true;
8+
};
9+
10+
const SelectLanguage = (onChange) => (
11+
<select onChange={(e) => onChange(e.target.value)} >
12+
<option value="en">English</option>
13+
<option value="de">Deutsch</option>
14+
<option value="ja">日本語</option>
15+
<option value="zh-CN">简体中文</option>
16+
<option value="zh-TW">正體中文</option>
17+
</select>
18+
);
19+
20+
const SetI18nLocale = (locale) => {
21+
I18n.locale = locale;
22+
};
23+
24+
export { InitI18n, SelectLanguage, SetI18nLocale };

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import BaseComponent from 'libs/components/BaseComponent';
22
import React, { PropTypes } from 'react';
3-
3+
importI18nfrom'i18n-js';
44
import CommentForm from './CommentForm/CommentForm';
55
import CommentList from './CommentList/CommentList';
66
import css from './CommentBox.scss';
7+
import { SelectLanguage, SetI18nLocale } from '../../common/i18n';
78

89
export default class CommentBox extends BaseComponent {
910
static propTypes = {
@@ -30,17 +31,20 @@ export default class CommentBox extends BaseComponent {
3031
leave: css.elementLeave,
3132
leaveActive: css.elementLeaveActive,
3233
};
34+
const locale = data.get('locale');
35+
SetI18nLocale(locale);
3336

3437
return (
3538
<div className="commentBox container">
3639
<h2>
37-
Comments {data.get('isFetching') && 'Loading...'}
40+
{I18n.t('comments')} {data.get('isFetching') && 'Loading...'}
3841
</h2>
39-
<p>
40-
<b>Text</b> supports Github Flavored Markdown.
41-
Comments older than 24 hours are deleted.<br />
42-
<b>Name</b> is preserved. <b>Text</b> is reset, between submits.
43-
</p>
42+
{ SelectLanguage(actions.setLocale) }
43+
<ul>
44+
<li>{ I18n.t('description.support_markdown') }</li>
45+
<li>{ I18n.t('description.delete_rule') }</li>
46+
<li>{ I18n.t('description.submit_rule') }</li>
47+
</ul>
4448
<CommentForm
4549
isSaving={data.get('isSaving')}
4650
error={data.get('submitCommentError')}

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

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import NavItem from 'react-bootstrap/lib/NavItem';
77
import Alert from 'react-bootstrap/lib/Alert';
88
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
99
import _ from 'lodash';
10+
import I18n from 'i18n-js';
1011

1112
import BaseComponent from 'libs/components/BaseComponent';
1213

1314
const emptyComment = { author: '', text: '' };
14-
const textPlaceholder = 'Say something using markdown...';
1515

1616
function bsStyleFor(propName, error) {
1717
if (error) {
@@ -120,8 +120,8 @@ export default class CommentForm extends BaseComponent {
120120
<form className="commentForm form-horizontal" onSubmit={this.handleSubmit}>
121121
<Input
122122
type="text"
123-
label="Name"
124-
placeholder="Your Name"
123+
label={I18n.t('input.name.label')}
124+
placeholder={I18n.t('input.name.placeholder')}
125125
labelClassName="col-sm-2"
126126
wrapperClassName="col-sm-10"
127127
ref={node => { this.horizontalAuthorNode = node; }}
@@ -133,8 +133,8 @@ export default class CommentForm extends BaseComponent {
133133
/>
134134
<Input
135135
type="textarea"
136-
label="Text"
137-
placeholder={textPlaceholder}
136+
label={I18n.t('input.text.label')}
137+
placeholder={I18n.t('input.text.placeholder')}
138138
labelClassName="col-sm-2"
139139
wrapperClassName="col-sm-10"
140140
ref={node => { this.horizontalTextNode = node; }}
@@ -149,7 +149,7 @@ export default class CommentForm extends BaseComponent {
149149
<input
150150
type="submit"
151151
className="btn btn-primary"
152-
value={this.props.isSaving ? 'Saving...' : 'Post'}
152+
value={this.props.isSaving ? `${I18n.t('input.saving')}...` : I18n.t('input.post')}
153153
disabled={this.props.isSaving}
154154
/>
155155
</div>
@@ -166,8 +166,8 @@ export default class CommentForm extends BaseComponent {
166166
<form className="commentForm form" onSubmit={this.handleSubmit}>
167167
<Input
168168
type="text"
169-
label="Name"
170-
placeholder="Your Name"
169+
label={I18n.t('input.name.label')}
170+
placeholder={I18n.t('input.name.placeholder')}
171171
ref={node => { this.stackedAuthorNode = node; }}
172172
value={this.state.comment.author}
173173
onChange={this.handleChange}
@@ -177,8 +177,8 @@ export default class CommentForm extends BaseComponent {
177177
/>
178178
<Input
179179
type="textarea"
180-
label="Text"
181-
placeholder={textPlaceholder}
180+
label={I18n.t('input.text.label')}
181+
placeholder={I18n.t('input.text.placeholder')}
182182
ref={node => { this.stackedTextNode = node; }}
183183
value={this.state.comment.text}
184184
onChange={this.handleChange}
@@ -189,7 +189,7 @@ export default class CommentForm extends BaseComponent {
189189
<input
190190
type="submit"
191191
className="btn btn-primary"
192-
value={this.props.isSaving ? 'Saving...' : 'Post'}
192+
value={this.props.isSaving ? `${I18n.t('input.saving')}...` : I18n.t('input.post')}
193193
disabled={this.props.isSaving}
194194
/>
195195
</form>
@@ -208,7 +208,7 @@ export default class CommentForm extends BaseComponent {
208208
<input
209209
type="text"
210210
className="form-control"
211-
placeholder="Your Name"
211+
placeholder={I18n.t('input.name.placeholder')}
212212
ref={node => { this.inlineAuthorNode = node; }}
213213
value={this.state.comment.author}
214214
onChange={this.handleChange}
@@ -219,7 +219,7 @@ export default class CommentForm extends BaseComponent {
219219
<input
220220
type="text"
221221
className="form-control"
222-
placeholder={textPlaceholder}
222+
placeholder={I18n.t('input.text.placeholder')}
223223
ref={node => { this.inlineTextNode = node; }}
224224
value={this.state.comment.text}
225225
onChange={this.handleChange}
@@ -230,7 +230,10 @@ export default class CommentForm extends BaseComponent {
230230
<input
231231
type="submit"
232232
className="btn btn-primary"
233-
value={this.props.isSaving ? 'Saving...' : 'Post'}
233+
value={this.props.isSaving
234+
? `${I18n.t('input.saving')}...`
235+
: I18n.t('input.post')
236+
}
234237
disabled={this.props.isSaving}
235238
/>
236239
</Col>
@@ -292,9 +295,9 @@ export default class CommentForm extends BaseComponent {
292295
</ReactCSSTransitionGroup>
293296

294297
<Nav bsStyle="pills" activeKey={this.state.formMode} onSelect={this.handleSelect}>
295-
<NavItem eventKey={0}>Horizontal Form</NavItem>
296-
<NavItem eventKey={1}>Stacked Form</NavItem>
297-
<NavItem eventKey={2}>Inline Form</NavItem>
298+
<NavItem eventKey={0}>{I18n.t('form.horizontal')}</NavItem>
299+
<NavItem eventKey={1}>{I18n.t('form.stacked')}</NavItem>
300+
<NavItem eventKey={2}>{I18n.t('form.inline')}</NavItem>
298301
</Nav>
299302
{inputForm}
300303
</div>

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

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,38 @@ import React from 'react';
22
import Immutable from 'immutable';
33
import request from 'axios';
44
import ReactOnRails from 'react-on-rails';
5-
5+
importI18nfrom'i18n-js';
66
import BaseComponent from 'libs/components/BaseComponent';
77

88
import CommentForm from '../CommentBox/CommentForm/CommentForm';
99
import CommentList from '../CommentBox/CommentList/CommentList';
1010
import css from './SimpleCommentScreen.scss';
11+
import { InitI18n, SelectLanguage, SetI18nLocale } from '../../common/i18n';
12+
13+
export default (props, railsContext) => (
14+
<SimpleCommentScreen {...props} railsContext={railsContext} />
15+
);
16+
17+
class SimpleCommentScreen extends BaseComponent {
18+
constructor(props) {
19+
super(props);
20+
const { railsContext } = props;
1121

12-
export default class SimpleCommentScreen extends BaseComponent {
13-
constructor(props, context) {
14-
super(props, context);
1522
this.state = {
1623
$$comments: Immutable.fromJS([]),
1724
isSaving: false,
1825
fetchCommentsError: null,
1926
submitCommentError: null,
27+
locale: null,
2028
};
2129

22-
_.bindAll(this, 'fetchComments', 'handleCommentSubmit');
30+
InitI18n(railsContext);
31+
_.bindAll(this, 'fetchComments', 'handleCommentSubmit', 'handleSetI18nLocale');
2332
}
2433

2534
componentDidMount() {
2635
this.fetchComments();
36+
this.handleSetI18nLocale(this.props.railsContext.i18nLocale);
2737
}
2838

2939
fetchComments() {
@@ -65,21 +75,29 @@ export default class SimpleCommentScreen extends BaseComponent {
6575
);
6676
}
6777

78+
handleSetI18nLocale(locale) {
79+
this.setState({ locale: locale });
80+
}
81+
6882
render() {
6983
const cssTransitionGroupClassNames = {
7084
enter: css.elementEnter,
7185
enterActive: css.elementEnterActive,
7286
leave: css.elementLeave,
7387
leaveActive: css.elementLeaveActive,
7488
};
89+
const { locale } = this.state;
90+
SetI18nLocale(locale);
7591

7692
return (
7793
<div className="commentBox container">
78-
<h2>Comments</h2>
79-
<p>
80-
Text take Github Flavored Markdown. Comments older than 24 hours are deleted.<br />
81-
<b>Name</b> is preserved. <b>Text</b> is reset, between submits.
82-
</p>
94+
<h2>{ I18n.t('comments') }</h2>
95+
{ SelectLanguage(this.handleSetI18nLocale) }
96+
<ul>
97+
<li>{ I18n.t('description.support_markdown') }</li>
98+
<li>{ I18n.t('description.delete_rule') }</li>
99+
<li>{ I18n.t('description.submit_rule') }</li>
100+
</ul>
83101
<CommentForm
84102
isSaving={this.state.isSaving}
85103
actions={{ submitComment: this.handleCommentSubmit }}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,5 @@ export const SUBMIT_COMMENT_FAILURE = 'SUBMIT_COMMENT_FAILURE';
66

77
export const SET_IS_FETCHING = 'SET_IS_FETCHING';
88
export const SET_IS_SAVING = 'SET_IS_SAVING';
9+
10+
export const SET_LOCALE = 'SET_LOCALE';

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ export const $$initialState = Immutable.fromJS({
1010
submitCommentError: null,
1111
isFetching: false,
1212
isSaving: false,
13+
locale: null,
1314
});
1415

1516
export default function commentsReducer($$state = $$initialState, action = null) {
16-
const { type, comment, comments, error } = action;
17+
const { type, comment, comments, error, locale } = action;
1718

1819
switch (type) {
1920

@@ -65,6 +66,12 @@ export default function commentsReducer($$state = $$initialState, action = null)
6566
});
6667
}
6768

69+
case actionTypes.SET_LOCALE: {
70+
return $$state.merge({
71+
locale,
72+
});
73+
}
74+
6875
default: {
6976
return $$state;
7077
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import React from 'react';
22
import { Provider } from 'react-redux';
33
import ReactOnRails from 'react-on-rails';
4+
import { InitI18n } from '../common/i18n';
45

56
import NonRouterCommentsContainer from '../containers/NonRouterCommentsContainer';
67

78
export default (_props, _railsContext) => {
89
const store = ReactOnRails.getStore('commentsStore');
910

11+
InitI18n(_railsContext);
12+
1013
return (
1114
<Provider store={store}>
1215
<NonRouterCommentsContainer />

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
44
import ReactOnRails from 'react-on-rails';
55
import { syncHistoryWithStore } from 'react-router-redux';
66
import { Router, browserHistory } from 'react-router';
7+
import { InitI18n } from '../common/i18n';
78

89
import routes from '../routes/routes';
910

@@ -16,6 +17,8 @@ export default (_props, _railsContext) => {
1617
store
1718
);
1819

20+
InitI18n(_railsContext);
21+
1922
return (
2023
<Provider store={store}>
2124
<Router history={history} children={routes} />

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /