Implement translation the naive way

Author: jpetitcolas

package.json

@@ -6,6 +6,7 @@
     "react-scripts": "0.9.0"
   },
   "dependencies": {
+    "node-polyglot": "^2.2.2",
     "react": "^15.4.2",
     "react-dom": "^15.4.2"
   },

src/Video.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import VideoMetas from './VideoMetas.js';
 
-export const Video = ({ metas, picture, title }) => (
+export const Video = ({ metas, picture, title, translate }) => (
     <div className="video">
         <img
             src={picture}
@@ -12,6 +12,7 @@ export const Video = ({ metas, picture, title }) => (
             <VideoMetas
                 duration={metas.duration}
                 views={metas.views}
+                translate={translate}
             />
         </div>
     </div>

src/VideoList.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import Video from './Video';
 
-export const VideoList = ({ videos }) => (
+export const VideoList = ({ translate, 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,12 +1,12 @@
 import React from 'react';
 
-const Metas = ({ duration, views }) => (
+const Metas = ({ duration, translate, views }) => (
     <div className="video-metas">
         <div className="duration">
-            {duration} minute{duration > 1 ? 's' : ''}
+            {translate('minutes', { smart_count: duration })}
         </div>
         <div className="views">
-            {views} vue{views > 1 ? 's' : ''}
+            {translate('views', { smart_count: views })}
         </div>
     </div>
 );

src/index.css

@@ -27,6 +27,7 @@ body {
 
 .video-metas {
     display: flex;
+    width: 300px;
 }
 
 .video-metas .duration {

src/index.js

@@ -5,7 +5,18 @@ import './index.css';
 import videos from './data';
 import VideoList from './VideoList';
 
+import messages from './messages';
+import Polyglot from 'node-polyglot';
+
+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} />,
+  <VideoList videos={videos} translate={translate} />,
   document.getElementById('root')
 );

src/messages.js

@@ -0,0 +1,10 @@
+export default {
+    fr: {
+        views: '%{smart_count} vue |||| %{smart_count} vues',
+        minutes: '%{smart_count} minute |||| %{smart_count} minutes'
+    },
+    de: {
+        views: '%{smart_count} Aufrufe |||| %{smart_count} Aufrufe',
+        minutes: '%{smart_count} Minute |||| %{smart_count} Minuten'
+    }
+}