Skip to content

Commit dff6b1a

Browse files
committed
Use I18nProvider and translate HOC
1 parent 89ef638 commit dff6b1a

File tree

6 files changed

+55
-14
lines changed

6 files changed

+55
-14
lines changed

src/I18nProvider.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Children, Component, PropTypes } from 'react';
2+
import Polyglot from 'node-polyglot';
3+
4+
import messages from './messages';
5+
6+
class I18nProvider extends Component {
7+
getChildContext() {
8+
const { locale } = this.props;
9+
const polyglot = new Polyglot({
10+
locale,
11+
phrases: messages[locale],
12+
});
13+
14+
const translate = polyglot.t.bind(polyglot);
15+
16+
return { locale, translate };
17+
};
18+
19+
render() {
20+
return Children.only(this.props.children);
21+
}
22+
};
23+
24+
I18nProvider.childContextTypes = {
25+
locale: PropTypes.string.isRequired,
26+
translate: PropTypes.func.isRequired,
27+
};
28+
29+
export default I18nProvider;

src/Video.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import VideoMetas from './VideoMetas.js';
33

4-
export const Video = ({ metas, picture, title, translate }) => (
4+
export const Video = ({ metas, picture, title }) => (
55
<div className="video">
66
<img
77
src={picture}
@@ -12,7 +12,6 @@ export const Video = ({ metas, picture, title, translate }) => (
1212
<VideoMetas
1313
duration={metas.duration}
1414
views={metas.views}
15-
translate={translate}
1615
/>
1716
</div>
1817
</div>

src/VideoList.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import React from 'react';
22
import Video from './Video';
33

4-
export const VideoList = ({ translate, videos }) => (
4+
export const VideoList = ({ videos }) => (
55
<div className="videos-list">
66
{videos.map(video => (
77
<Video
88
key={video.title}
99
title={video.title}
1010
metas={video.metas}
1111
picture={video.picture}
12-
translate={translate}
1312
/>
1413
))}
1514
</div>

src/VideoMetas.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import translate from './translate';
23

34
const Metas = ({ duration, translate, views }) => (
45
<div className="video-metas">
@@ -11,4 +12,4 @@ const Metas = ({ duration, translate, views }) => (
1112
</div>
1213
);
1314

14-
export default Metas;
15+
export default translate(Metas);

src/index.js

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,13 @@ import './index.css';
55
import videos from './data';
66
import VideoList from './VideoList';
77

8-
import messages from './messages';
9-
import Polyglot from 'node-polyglot';
8+
import I18nProvider from './I18nProvider';
109

1110
const locale = window.localStorage.getItem('locale') || 'fr';
12-
const polyglot = new Polyglot({
13-
locale,
14-
phrases: messages[locale],
15-
});
16-
17-
const translate = polyglot.t.bind(polyglot);
1811

1912
ReactDOM.render(
20-
<VideoList videos={videos} translate={translate} />,
13+
<I18nProvider locale={locale}>
14+
<VideoList videos={videos} />
15+
</I18nProvider>,
2116
document.getElementById('root')
2217
);

src/translate.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { PropTypes } from 'react';
2+
3+
export default (BaseComponent) => {
4+
const LocalizedComponent = (props, context) => (
5+
<BaseComponent
6+
translate={context.translate}
7+
locale={context.locale}
8+
{...props}
9+
/>
10+
);
11+
12+
LocalizedComponent.contextTypes = {
13+
translate: PropTypes.func.isRequired,
14+
locale: PropTypes.string.isRequired,
15+
};
16+
17+
return LocalizedComponent;
18+
};

0 commit comments

Comments
 (0)