Implement translation the naive way

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'
    }
}