Skip to content

Commit 89ef638

Browse files
committed
Implement translation the naive way
1 parent fc5b077 commit 89ef638

File tree

7 files changed

+31
-6
lines changed

7 files changed

+31
-6
lines changed

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"react-scripts": "0.9.0"
77
},
88
"dependencies": {
9+
"node-polyglot": "^2.2.2",
910
"react": "^15.4.2",
1011
"react-dom": "^15.4.2"
1112
},

src/Video.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import VideoMetas from './VideoMetas.js';
33

4-
export const Video = ({ metas, picture, title }) => (
4+
export const Video = ({ metas, picture, title, translate }) => (
55
<div className="video">
66
<img
77
src={picture}
@@ -12,6 +12,7 @@ export const Video = ({ metas, picture, title }) => (
1212
<VideoMetas
1313
duration={metas.duration}
1414
views={metas.views}
15+
translate={translate}
1516
/>
1617
</div>
1718
</div>

src/VideoList.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from 'react';
22
import Video from './Video';
33

4-
export const VideoList = ({ videos }) => (
4+
export const VideoList = ({ translate, videos }) => (
55
<div className="videos-list">
66
{videos.map(video => (
77
<Video
88
key={video.title}
99
title={video.title}
1010
metas={video.metas}
1111
picture={video.picture}
12+
translate={translate}
1213
/>
1314
))}
1415
</div>

src/VideoMetas.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
22

3-
const Metas = ({ duration, views }) => (
3+
const Metas = ({ duration, translate, views }) => (
44
<div className="video-metas">
55
<div className="duration">
6-
{duration} minute{duration > 1 ? 's' : ''}
6+
{translate('minutes', { smart_count: duration })}
77
</div>
88
<div className="views">
9-
{views} vue{views > 1 ? 's' : ''}
9+
{translate('views', { smart_count: views })}
1010
</div>
1111
</div>
1212
);

src/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ body {
2727

2828
.video-metas {
2929
display: flex;
30+
width: 300px;
3031
}
3132

3233
.video-metas .duration {

src/index.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,18 @@ import './index.css';
55
import videos from './data';
66
import VideoList from './VideoList';
77

8+
import messages from './messages';
9+
import Polyglot from 'node-polyglot';
10+
11+
const locale = window.localStorage.getItem('locale') || 'fr';
12+
const polyglot = new Polyglot({
13+
locale,
14+
phrases: messages[locale],
15+
});
16+
17+
const translate = polyglot.t.bind(polyglot);
18+
819
ReactDOM.render(
9-
<VideoList videos={videos} />,
20+
<VideoList videos={videos} translate={translate} />,
1021
document.getElementById('root')
1122
);

src/messages.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default {
2+
fr: {
3+
views: '%{smart_count} vue |||| %{smart_count} vues',
4+
minutes: '%{smart_count} minute |||| %{smart_count} minutes'
5+
},
6+
de: {
7+
views: '%{smart_count} Aufrufe |||| %{smart_count} Aufrufe',
8+
minutes: '%{smart_count} Minute |||| %{smart_count} Minuten'
9+
}
10+
}

0 commit comments

Comments
 (0)