Permalink
Browse files

Implement translation the naive way

  • Loading branch information...
jpetitcolas committed Feb 20, 2017
1 parent fc5b077 commit 89ef6389ce4a84a691a5e927148831aebe7b4a9f
Showing with 31 additions and 6 deletions.
  1. +1 −0 package.json
  2. +2 −1 src/Video.js
  3. +2 −1 src/VideoList.js
  4. +3 −3 src/VideoMetas.js
  5. +1 −0 src/index.css
  6. +12 −1 src/index.js
  7. +10 −0 src/messages.js
@@ -6,6 +6,7 @@
"react-scripts": "0.9.0"
},
"dependencies": {
"node-polyglot": "^2.2.2",
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
@@ -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>
@@ -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>
@@ -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>
);
@@ -27,6 +27,7 @@ body {

.video-metas {
display: flex;
width: 300px;
}

.video-metas .duration {
@@ -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')
);
@@ -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'
}
}

0 comments on commit 89ef638

Please sign in to comment.