Use I18nProvider and translate HOC

Author: jpetitcolas

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;

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}
@@ -12,7 +12,6 @@ export const Video = ({ metas, picture, title, translate }) => (
             <VideoMetas
                 duration={metas.duration}
                 views={metas.views}
-                translate={translate}
             />
         </div>
     </div>

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>

src/VideoMetas.js

@@ -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);

src/index.js

@@ -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')
 );

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;
+};