Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Implement translation the naive way
  • Loading branch information
jpetitcolas committed Feb 20, 2017
1 parent fc5b077 commit 89ef638
Show file tree
Hide file tree
Showing 7 changed files with 31 additions and 6 deletions.
1 change: 1 addition & 0 deletions package.json
Expand Up @@ -6,6 +6,7 @@
"react-scripts": "0.9.0"
},
"dependencies": {
"node-polyglot": "^2.2.2",
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
Expand Down
3 changes: 2 additions & 1 deletion 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}
Expand All @@ -12,6 +12,7 @@ export const Video = ({ metas, picture, title }) => (
<VideoMetas
duration={metas.duration}
views={metas.views}
translate={translate}
/>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion 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>
Expand Down
6 changes: 3 additions & 3 deletions 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>
);
Expand Down
1 change: 1 addition & 0 deletions src/index.css
Expand Up @@ -27,6 +27,7 @@ body {

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

.video-metas .duration {
Expand Down
13 changes: 12 additions & 1 deletion src/index.js
Expand Up @@ -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')
);
10 changes: 10 additions & 0 deletions 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'
}
}

0 comments on commit 89ef638

Please sign in to comment.