Skip to content

Commit ccc6e2d

Browse files
completejavascriptcompletejavascript
committed
Add translations with react intl
1 parent c6f50d3 commit ccc6e2d

File tree

11 files changed

+157
-11
lines changed

11 files changed

+157
-11
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"react": "^16.12.0",
1414
"react-app-rewired": "^2.1.5",
1515
"react-dom": "^16.12.0",
16+
"react-intl": "^3.11.0",
1617
"react-scripts": "3.3.0"
1718
},
1819
"scripts": {

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>React App Template</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.js‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
11
import React from 'react';
22
import { useRoutes } from 'hookrouter';
3+
import { IntlProvider } from 'react-intl';
4+
import messages_en from './translations/en.json';
5+
import messages_vi from './translations/vi.json';
36
import routes from './router';
47
import NoPageFound from './pages/NoPageFound/NoPageFound';
58
import './App.scss';
69

10+
const messages = {
11+
en: messages_en,
12+
vi: messages_vi
13+
};
14+
15+
const language = 'en';
16+
717
const App = () => {
818
console.log('This console will be remove in Production mode');
919
const routeResult = useRoutes(routes);
1020

1121
return (
12-
<div className="app-container">
13-
{routeResult || <NoPageFound />}
14-
</div>
22+
<IntlProvider locale={language} messages={messages[language]}>
23+
<div className="app-container">{routeResult || <NoPageFound />}</div>
24+
</IntlProvider>
1525
);
16-
}
26+
};
1727

1828
export default App;

‎src/pages/Blog/Blog.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { FormattedMessage } from 'react-intl';
23
import Navigation from '../../components/Navigation/Navigation';
34
import Title from '../../components/Title/Title';
45
import './Blog.scss';
@@ -7,7 +8,9 @@ const Blog = ({ blogId }) => {
78
return (
89
<div className="blog-container">
910
<Navigation />
10-
<Title>{`Blog Page with id: ${blogId}`}</Title>
11+
<Title>
12+
<FormattedMessage id="IDS_BLOG_PAGE_WITH_ID" values={{ blogId }} />
13+
</Title>
1114
</div>
1215
);
1316
};

‎src/pages/HomePage/HomePage.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { FormattedMessage } from 'react-intl';
23
import Navigation from '../../components/Navigation/Navigation';
34
import Title from '../../components/Title/Title';
45
import './HomePage.scss';
@@ -7,7 +8,9 @@ const HomePage = () => {
78
return (
89
<div className="home-page-container">
910
<Navigation />
10-
<Title>Home Page</Title>
11+
<Title>
12+
<FormattedMessage id="IDS_HOME_PAGE" />
13+
</Title>
1114
</div>
1215
);
1316
};

‎src/pages/NoPageFound/NoPageFound.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { FormattedMessage } from 'react-intl';
23
import Navigation from '../../components/Navigation/Navigation';
34
import Title from '../../components/Title/Title';
45
import './NoPageFound.scss';
@@ -7,7 +8,9 @@ const NoPageFound = () => {
78
return (
89
<div className="no-page-found-container">
910
<Navigation />
10-
<Title>No Page Found</Title>
11+
<Title>
12+
<FormattedMessage id="IDS_NO_PAGE_FOUND" />
13+
</Title>
1114
</div>
1215
);
1316
};

‎src/pages/PrivacyPolicy/PrivacyPolicy.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { FormattedMessage } from 'react-intl';
23
import Navigation from '../../components/Navigation/Navigation';
34
import Title from '../../components/Title/Title';
45
import './PrivacyPolicy.scss';
@@ -7,7 +8,9 @@ const PrivacyPolicy = () => {
78
return (
89
<div className="privacy-policy-container">
910
<Navigation />
10-
<Title>Privacy Policy</Title>
11+
<Title>
12+
<FormattedMessage id="IDS_PRIVACY_POLICY" />
13+
</Title>
1114
</div>
1215
);
1316
};

‎src/pages/TermsOfUse/TermsOfUse.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { FormattedMessage } from 'react-intl';
23
import Navigation from '../../components/Navigation/Navigation';
34
import Title from '../../components/Title/Title';
45
import './TermsOfUse.scss';
@@ -7,7 +8,9 @@ const TermsOfUse = () => {
78
return (
89
<div className="terms-of-use-container">
910
<Navigation />
10-
<Title>Terms of Use</Title>
11+
<Title>
12+
<FormattedMessage id="IDS_TERMS_OF_USE" />
13+
</Title>
1114
</div>
1215
);
1316
};

‎src/translations/en.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"IDS_HOME_PAGE": "Home Page",
3+
"IDS_NO_PAGE_FOUND": "No Page Found",
4+
"IDS_PRIVACY_POLICY": "Privacy Policy",
5+
"IDS_TERMS_OF_USE": "Terms of Use",
6+
"IDS_BLOG_PAGE_WITH_ID": "Blog Page with id: {blogId}"
7+
}

‎src/translations/vi.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"IDS_HOME_PAGE": "Trang chủ",
3+
"IDS_NO_PAGE_FOUND": "Trang không tìm thấy",
4+
"IDS_PRIVACY_POLICY": "Chính sách bảo mật",
5+
"IDS_TERMS_OF_USE": "Điều khoản sử dụng",
6+
"IDS_BLOG_PAGE_WITH_ID": "Trang blog với id: {blogId}"
7+
}

0 commit comments

Comments
 (0)