Skip to content

Commit 7fdf4aa

Browse files
JasonYCHuangJasonYCHuang
committed
integrate react-intl
1 parent 584c5aa commit 7fdf4aa

File tree

7 files changed

+166
-93
lines changed

7 files changed

+166
-93
lines changed

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

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import BaseComponent from 'libs/components/BaseComponent';
22
import React, { PropTypes } from 'react';
3-
import I18n from 'i18n-js';
3+
import { FormattedMessage } from 'react-intl';
44
import CommentForm from './CommentForm/CommentForm';
55
import CommentList from './CommentList/CommentList';
66
import css from './CommentBox.scss';
7-
import { SelectLanguage, SetI18nLocale } from '../../common/i18nHelper';
7+
import { SelectLanguage, defaultMessages, defaultLocale } from '../../common/i18nHelper';
8+
import { injectIntl, intlShape } from 'react-intl';
89

9-
export default class CommentBox extends BaseComponent {
10+
class CommentBox extends BaseComponent {
1011
static propTypes = {
1112
pollInterval: PropTypes.number.isRequired,
1213
actions: PropTypes.object.isRequired,
1314
data: PropTypes.object.isRequired,
15+
intl: intlShape.isRequired,
1416
};
1517

1618
componentDidMount() {
@@ -24,26 +26,26 @@ export default class CommentBox extends BaseComponent {
2426
}
2527

2628
render() {
27-
const { actions, data } = this.props;
29+
const { actions, data, intl } = this.props;
30+
const { formatMessage } = intl;
2831
const cssTransitionGroupClassNames = {
2932
enter: css.elementEnter,
3033
enterActive: css.elementEnterActive,
3134
leave: css.elementLeave,
3235
leaveActive: css.elementLeaveActive,
3336
};
34-
const locale = data.get('locale');
35-
SetI18nLocale(locale);
37+
const locale = data.get('locale') || defaultLocale;
3638

3739
return (
3840
<div className="commentBox container">
3941
<h2>
40-
{ I18n.t('comments') } {data.get('isFetching') && 'Loading...'}
42+
{formatMessage(defaultMessages.comments)}
4143
</h2>
42-
{ SelectLanguage(actions.setLocale) }
44+
{ SelectLanguage(actions.setLocale, locale) }
4345
<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>
46+
<li>{formatMessage(defaultMessages.descriptionSupportMarkdown)}</li>
47+
<li>{formatMessage(defaultMessages.descriptionDeleteRule)}</li>
48+
<li>{formatMessage(defaultMessages.descriptionSubmitRule)}</li>
4749
</ul>
4850
<CommentForm
4951
isSaving={data.get('isSaving')}
@@ -60,3 +62,5 @@ export default class CommentBox extends BaseComponent {
6062
);
6163
}
6264
}
65+
66+
export default injectIntl(CommentBox);

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

Lines changed: 60 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ 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';
11-
10+
import { injectIntl, intlShape } from 'react-intl';
11+
import { defaultMessages } from '../../../common/i18nHelper';
1212
import BaseComponent from 'libs/components/BaseComponent';
1313

1414
const emptyComment = { author: '', text: '' };
@@ -22,12 +22,13 @@ function bsStyleFor(propName, error) {
2222
return null;
2323
}
2424

25-
export default class CommentForm extends BaseComponent {
25+
class CommentForm extends BaseComponent {
2626
static propTypes = {
2727
isSaving: PropTypes.bool.isRequired,
2828
actions: PropTypes.object.isRequired,
2929
error: PropTypes.any,
3030
cssTransitionGroupClassNames: PropTypes.object.isRequired,
31+
intl: intlShape.isRequired,
3132
};
3233

3334
constructor(props, context) {
@@ -114,16 +115,17 @@ export default class CommentForm extends BaseComponent {
114115
}
115116

116117
formHorizontal() {
118+
const { formatMessage } = this.props.intl;
117119
return (
118120
<div>
119121
<hr />
120-
<form className="commentForm form-horizontal" onSubmit={this.handleSubmit}>
122+
<form className='commentForm form-horizontal' onSubmit={this.handleSubmit}>
121123
<Input
122-
type="text"
123-
label={I18n.t('input.name.label')}
124-
placeholder={I18n.t('input.name.placeholder')}
125-
labelClassName="col-sm-2"
126-
wrapperClassName="col-sm-10"
124+
type='text'
125+
label={formatMessage(defaultMessages.inputNameLabel)}
126+
placeholder={formatMessage(defaultMessages.inputNamePlaceholder)}
127+
labelClassName='col-sm-2'
128+
wrapperClassName='col-sm-10'
127129
ref={node => { this.horizontalAuthorNode = node; }}
128130
value={this.state.comment.author}
129131
onChange={this.handleChange}
@@ -132,24 +134,26 @@ export default class CommentForm extends BaseComponent {
132134
bsStyle={bsStyleFor('author', this.props.error)}
133135
/>
134136
<Input
135-
type="textarea"
136-
label={I18n.t('input.text.label')}
137-
placeholder={I18n.t('input.text.placeholder')}
138-
labelClassName="col-sm-2"
139-
wrapperClassName="col-sm-10"
137+
type='textarea'
138+
label={formatMessage(defaultMessages.inputTextLabel)}
139+
placeholder={formatMessage(defaultMessages.inputTextPlaceholder)}
140+
labelClassName='col-sm-2'
141+
wrapperClassName='col-sm-10'
140142
ref={node => { this.horizontalTextNode = node; }}
141143
value={this.state.comment.text}
142144
onChange={this.handleChange}
143145
disabled={this.props.isSaving}
144146
hasFeedback
145147
bsStyle={bsStyleFor('text', this.props.error)}
146148
/>
147-
<div className="form-group">
148-
<div className="col-sm-offset-2 col-sm-10">
149+
<div className='form-group'>
150+
<div className='col-sm-offset-2 col-sm-10'>
149151
<input
150-
type="submit"
151-
className="btn btn-primary"
152-
value={this.props.isSaving ? `${I18n.t('input.saving')}...` : I18n.t('input.post')}
152+
type='submit'
153+
className='btn btn-primary'
154+
value={this.props.isSaving
155+
? `${formatMessage(defaultMessages.inputSaving)}...`
156+
: formatMessage(defaultMessages.inputPost)}
153157
disabled={this.props.isSaving}
154158
/>
155159
</div>
@@ -160,14 +164,15 @@ export default class CommentForm extends BaseComponent {
160164
}
161165

162166
formStacked() {
167+
const { formatMessage } = this.props.intl;
163168
return (
164169
<div>
165170
<hr />
166-
<form className="commentForm form" onSubmit={this.handleSubmit}>
171+
<form className='commentForm form' onSubmit={this.handleSubmit}>
167172
<Input
168-
type="text"
169-
label={I18n.t('input.name.label')}
170-
placeholder={I18n.t('input.name.placeholder')}
173+
type='text'
174+
label={formatMessage(defaultMessages.inputNameLabel)}
175+
placeholder={formatMessage(defaultMessages.inputNamePlaceholder)}
171176
ref={node => { this.stackedAuthorNode = node; }}
172177
value={this.state.comment.author}
173178
onChange={this.handleChange}
@@ -176,9 +181,9 @@ export default class CommentForm extends BaseComponent {
176181
bsStyle={bsStyleFor('author', this.props.error)}
177182
/>
178183
<Input
179-
type="textarea"
180-
label={I18n.t('input.text.label')}
181-
placeholder={I18n.t('input.text.placeholder')}
184+
type='textarea'
185+
label={formatMessage(defaultMessages.inputTextLabel)}
186+
placeholder={formatMessage(defaultMessages.inputTextPlaceholder)}
182187
ref={node => { this.stackedTextNode = node; }}
183188
value={this.state.comment.text}
184189
onChange={this.handleChange}
@@ -187,9 +192,11 @@ export default class CommentForm extends BaseComponent {
187192
bsStyle={bsStyleFor('text', this.props.error)}
188193
/>
189194
<input
190-
type="submit"
191-
className="btn btn-primary"
192-
value={this.props.isSaving ? `${I18n.t('input.saving')}...` : I18n.t('input.post')}
195+
type='submit'
196+
className='btn btn-primary'
197+
value={this.props.isSaving
198+
? `${formatMessage(defaultMessages.inputSaving)}...`
199+
: formatMessage(defaultMessages.inputPost)}
193200
disabled={this.props.isSaving}
194201
/>
195202
</form>
@@ -198,17 +205,21 @@ export default class CommentForm extends BaseComponent {
198205
}
199206

200207
formInline() {
208+
const { formatMessage } = this.props.intl;
201209
return (
202210
<div>
203211
<hr />
204-
<form className="commentForm form" onSubmit={this.handleSubmit}>
205-
<Input label="Inline Form" wrapperClassName="wrapper">
212+
<form className='commentForm form' onSubmit={this.handleSubmit}>
213+
<Input
214+
label={formatMessage(defaultMessages.formInline)}
215+
wrapperClassName='wrapper'
216+
>
206217
<Row>
207218
<Col xs={3}>
208219
<input
209-
type="text"
210-
className="form-control"
211-
placeholder={I18n.t('input.name.placeholder')}
220+
type='text'
221+
className='form-control'
222+
placeholder={formatMessage(defaultMessages.inputNamePlaceholder)}
212223
ref={node => { this.inlineAuthorNode = node; }}
213224
value={this.state.comment.author}
214225
onChange={this.handleChange}
@@ -217,9 +228,9 @@ export default class CommentForm extends BaseComponent {
217228
</Col>
218229
<Col xs={8}>
219230
<input
220-
type="text"
221-
className="form-control"
222-
placeholder={I18n.t('input.text.placeholder')}
231+
type='text'
232+
className='form-control'
233+
placeholder={formatMessage(defaultMessages.inputTextPlaceholder)}
223234
ref={node => { this.inlineTextNode = node; }}
224235
value={this.state.comment.text}
225236
onChange={this.handleChange}
@@ -228,12 +239,11 @@ export default class CommentForm extends BaseComponent {
228239
</Col>
229240
<Col xs={1}>
230241
<input
231-
type="submit"
232-
className="btn btn-primary"
242+
type='submit'
243+
className='btn btn-primary'
233244
value={this.props.isSaving
234-
? `${I18n.t('input.saving')}...`
235-
: I18n.t('input.post')
236-
}
245+
? `${formatMessage(defaultMessages.inputSaving)}...`
246+
: formatMessage(defaultMessages.inputPost)}
237247
disabled={this.props.isSaving}
238248
/>
239249
</Col>
@@ -257,7 +267,7 @@ export default class CommentForm extends BaseComponent {
257267
}, []);
258268

259269
return (
260-
<Alert bsStyle="danger" key="commentSubmissionError">
270+
<Alert bsStyle='danger' key='commentSubmissionError'>
261271
<strong>Your comment was not saved!</strong>
262272
<ul>
263273
{errorElements}
@@ -283,6 +293,7 @@ export default class CommentForm extends BaseComponent {
283293
}
284294

285295
const { cssTransitionGroupClassNames } = this.props;
296+
const { formatMessage } = this.props.intl;
286297

287298
return (
288299
<div>
@@ -294,13 +305,15 @@ export default class CommentForm extends BaseComponent {
294305
{this.errorWarning()}
295306
</ReactCSSTransitionGroup>
296307

297-
<Nav bsStyle="pills" activeKey={this.state.formMode} onSelect={this.handleSelect}>
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>
308+
<Nav bsStyle='pills' activeKey={this.state.formMode} onSelect={this.handleSelect}>
309+
<NavItem eventKey={0}>{formatMessage(defaultMessages.formHorizontal)}</NavItem>
310+
<NavItem eventKey={1}>{formatMessage(defaultMessages.formStacked)}</NavItem>
311+
<NavItem eventKey={2}>{formatMessage(defaultMessages.formInline)}</NavItem>
301312
</Nav>
302313
{inputForm}
303314
</div>
304315
);
305316
}
306317
}
318+
319+
export default injectIntl(CommentForm);

0 commit comments

Comments
 (0)