Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Use I18nProvider and translate HOC
  • Loading branch information
jpetitcolas committed Feb 20, 2017
1 parent 89ef638 commit dff6b1a
Show file tree
Hide file tree
Showing 6 changed files with 55 additions and 14 deletions.
29 changes: 29 additions & 0 deletions src/I18nProvider.js
@@ -0,0 +1,29 @@
import { Children, Component, PropTypes } from 'react';
import Polyglot from 'node-polyglot';

import messages from './messages';

class I18nProvider extends Component {
getChildContext() {
const { locale } = this.props;
const polyglot = new Polyglot({
locale,
phrases: messages[locale],
});

const translate = polyglot.t.bind(polyglot);

return { locale, translate };
};

render() {
return Children.only(this.props.children);
}
};

I18nProvider.childContextTypes = {
locale: PropTypes.string.isRequired,
translate: PropTypes.func.isRequired,
};

export default I18nProvider;
3 changes: 1 addition & 2 deletions src/Video.js
@@ -1,7 +1,7 @@
import React from 'react';
import VideoMetas from './VideoMetas.js';

export const Video = ({ metas, picture, title, translate }) => (
export const Video = ({ metas, picture, title }) => (
<div className="video">
<img
src={picture}
Expand All @@ -12,7 +12,6 @@ export const Video = ({ metas, picture, title, translate }) => (
<VideoMetas
duration={metas.duration}
views={metas.views}
translate={translate}
/>
</div>
</div>
Expand Down
3 changes: 1 addition & 2 deletions src/VideoList.js
@@ -1,15 +1,14 @@
import React from 'react';
import Video from './Video';

export const VideoList = ({ translate, videos }) => (
export const VideoList = ({ videos }) => (
<div className="videos-list">
{videos.map(video => (
<Video
key={video.title}
title={video.title}
metas={video.metas}
picture={video.picture}
translate={translate}
/>
))}
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/VideoMetas.js
@@ -1,4 +1,5 @@
import React from 'react';
import translate from './translate';

const Metas = ({ duration, translate, views }) => (
<div className="video-metas">
Expand All @@ -11,4 +12,4 @@ const Metas = ({ duration, translate, views }) => (
</div>
);

export default Metas;
export default translate(Metas);
13 changes: 4 additions & 9 deletions src/index.js
Expand Up @@ -5,18 +5,13 @@ import './index.css';
import videos from './data';
import VideoList from './VideoList';

import messages from './messages';
import Polyglot from 'node-polyglot';
import I18nProvider from './I18nProvider';

const locale = window.localStorage.getItem('locale') || 'fr';
const polyglot = new Polyglot({
locale,
phrases: messages[locale],
});

const translate = polyglot.t.bind(polyglot);

ReactDOM.render(
<VideoList videos={videos} translate={translate} />,
<I18nProvider locale={locale}>
<VideoList videos={videos} />
</I18nProvider>,
document.getElementById('root')
);
18 changes: 18 additions & 0 deletions src/translate.js
@@ -0,0 +1,18 @@
import React, { PropTypes } from 'react';

export default (BaseComponent) => {
const LocalizedComponent = (props, context) => (
<BaseComponent
translate={context.translate}
locale={context.locale}
{...props}
/>
);

LocalizedComponent.contextTypes = {
translate: PropTypes.func.isRequired,
locale: PropTypes.string.isRequired,
};

return LocalizedComponent;
};

0 comments on commit dff6b1a

Please sign in to comment.