Permalink
Browse files

Use I18nProvider and translate HOC

  • Loading branch information...
jpetitcolas committed Feb 20, 2017
1 parent 89ef638 commit dff6b1a8f37379042540c517a84f0ab5c3703924
Showing with 55 additions and 14 deletions.
  1. +29 −0 src/I18nProvider.js
  2. +1 −2 src/Video.js
  3. +1 −2 src/VideoList.js
  4. +2 −1 src/VideoMetas.js
  5. +4 −9 src/index.js
  6. +18 −0 src/translate.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;
@@ -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}
@@ -12,7 +12,6 @@ export const Video = ({ metas, picture, title, translate }) => (
<VideoMetas
duration={metas.duration}
views={metas.views}
translate={translate}
/>
</div>
</div>
@@ -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>
@@ -1,4 +1,5 @@
import React from 'react';
import translate from './translate';

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

export default Metas;
export default translate(Metas);
@@ -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')
);
@@ -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.