Skip to content

Commit 805e45d

Browse files
bring2dipbring2dip
committed
feature/component wise i18n
1 parent ea35e66 commit 805e45d

33 files changed

+439
-195
lines changed

Diff for: ‎components/Header/Header.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import {FormattedMessage } from 'react-intl';
3+
import { useRouter } from 'next/router';
4+
import ReactIntlProvider from 'components/ReactIntlProvider';
5+
6+
import en from './locale/en';
7+
import fr from './locale/fr';
8+
import np from './locale/np';
9+
10+
const languageMaps = {
11+
en,
12+
fr,
13+
np,
14+
};
15+
16+
export default function Header() {
17+
const router = useRouter();
18+
19+
const handleLanguageChange = (selectedLocale) => () => {
20+
router.push('/', '/', { locale: selectedLocale } );
21+
};
22+
23+
const { locale } = router;
24+
25+
return (
26+
<ReactIntlProvider messages={languageMaps[locale]}>
27+
<>
28+
<FormattedMessage
29+
id="translate"
30+
/>
31+
&nbsp;
32+
<button onClick={handleLanguageChange('en')}>English</button>
33+
<button onClick={handleLanguageChange('fr')}>French</button>
34+
<button onClick={handleLanguageChange('np')}>Nepali</button>
35+
</>
36+
</ReactIntlProvider>
37+
);
38+
}

Diff for: ‎components/Header/locale/en.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
translate: 'Translate',
3+
};

Diff for: ‎components/Header/locale/fr.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
'translate': 'Traduire',
3+
};

Diff for: ‎components/Header/locale/np.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
'translate': 'अनुवाद',
3+
};

Diff for: ‎components/Header/package.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "Header",
3+
"version": "1.0.0",
4+
"main": "./Header.js"
5+
}

Diff for: ‎components/Link/Link.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import Link from 'next/link';
3+
import { useRouter } from 'next/router';
4+
5+
export default function InternalizedLink({ href, children }) {
6+
const router = useRouter();
7+
const { locale } = router;
8+
return (
9+
<Link href={href} locale={locale}>
10+
<a>{children}</a>
11+
</Link>
12+
);
13+
}

Diff for: ‎components/Link/package.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "Link",
3+
"version": "1.0.0",
4+
"main": "./Link.js"
5+
}

Diff for: ‎components/ReactIntlProvider/ReactIntlProvider.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { IntlProvider } from 'react-intl';
3+
import { useRouter } from 'next/router';
4+
5+
6+
export default function ReactIntlProvider({ messages, children }) {
7+
const router = useRouter();
8+
9+
const { locale, defaultLocale } = router;
10+
11+
const handleTranslationError = (error) => {
12+
console.log('custom translation error handling');
13+
};
14+
15+
return (
16+
<IntlProvider
17+
locale={locale}
18+
defaultLocale={defaultLocale}
19+
messages={messages}
20+
onError={handleTranslationError}
21+
>
22+
{children}
23+
</IntlProvider>
24+
)
25+
}

Diff for: ‎components/ReactIntlProvider/package.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "ReactIntlProvider",
3+
"version": "1.0.0",
4+
"main": "./ReactIntlProvider.js"
5+
}

Diff for: ‎features/app/index.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React, { useEffect, useState } from 'react';
2+
import Link from 'next/link';
3+
import { FormattedMessage } from 'react-intl';
4+
import ReactIntlProvider from 'components/ReactIntlProvider';
5+
import { useRouter } from 'next/router';
6+
import en from './locale/en';
7+
import fr from './locale/fr';
8+
import np from './locale/np';
9+
10+
const languageMaps = {
11+
en,
12+
fr,
13+
np,
14+
};
15+
16+
17+
export const IntlProvider = ({ children }) => {
18+
const router = useRouter()
19+
const { locale, locales, defaultLocale } = router;
20+
21+
return (
22+
<ReactIntlProvider messages={languageMaps[locale]}>
23+
{children}
24+
</ReactIntlProvider>
25+
);
26+
}
27+
28+
export default function IndexPage(props) {
29+
const router = useRouter()
30+
const { locale } = router
31+
32+
return (
33+
<div>
34+
<h1>
35+
<FormattedMessage
36+
id="app.title"
37+
/>
38+
</h1>
39+
40+
<Link href="/register" locale={locale}>
41+
<a><FormattedMessage
42+
id="app.register.page.link"
43+
/></a>
44+
</Link>
45+
&nbsp;
46+
<Link href="/posts" locale={locale}>
47+
<a><FormattedMessage
48+
id="app.post.page.link"
49+
/></a>
50+
</Link>
51+
<br />
52+
</div>
53+
)
54+
}

Diff for: ‎features/app/locale/en.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
'app.title': 'Main',
3+
'app.register.page.link': 'Register',
4+
'app.post.page.link': 'Posts',
5+
};

Diff for: ‎features/app/locale/fr.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
'app.title': 'Page d\'accueil',
3+
'app.register.page.link': 'S\'inscrire',
4+
'app.post.page.link': 'Publier',
5+
};

Diff for: ‎features/app/locale/np.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
'app.title': 'मुख्य पृष्ठ',
3+
'app.register.page.link': 'पृष्ठ दर्ता गर्नुहोस्',
4+
'app.post.page.link': 'पोष्ट',
5+
};

Diff for: ‎features/posts/ViewPost.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import Link from 'next/link';
3+
import { FormattedMessage } from 'react-intl';
4+
import { useRouter } from 'next/router';
5+
6+
export default function ViewPost() {
7+
const router = useRouter()
8+
const { locale, query: { postSlug } } = router;
9+
10+
return (
11+
<div>
12+
<h1>
13+
<FormattedMessage
14+
id="view.title {postSlug}"
15+
values={{
16+
postSlug
17+
}}
18+
/>
19+
</h1>
20+
<p>
21+
Description here
22+
</p>
23+
<Link href="/posts" locale={locale}>
24+
<a><FormattedMessage
25+
id="back.to.posts"
26+
/></a>
27+
</Link>
28+
</div>
29+
)
30+
}

Diff for: ‎features/posts/index.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import Link from 'components/Link';
2+
import { FormattedMessage } from 'react-intl';
3+
import { useRouter } from 'next/router';
4+
import React, {useEffect, useState} from 'react';
5+
import ReactIntlProvider from 'components/ReactIntlProvider';
6+
7+
import en from './locale/en';
8+
import fr from './locale/fr';
9+
import np from './locale/np';
10+
11+
const languageMaps = {
12+
en,
13+
fr,
14+
np,
15+
};
16+
17+
export const IntlProvider = ({ children }) => {
18+
const router = useRouter()
19+
const { locale } = router;
20+
21+
return (
22+
<ReactIntlProvider messages={languageMaps[locale]}>
23+
{children}
24+
</ReactIntlProvider>
25+
);
26+
}
27+
28+
export default function Posts() {
29+
const router = useRouter()
30+
const { locale } = router;
31+
32+
return (
33+
<div>
34+
<h1>
35+
<FormattedMessage
36+
id="title"
37+
/>
38+
</h1>
39+
<ul>
40+
<li>
41+
<Link href={`/posts/kathmandu`}>
42+
<h3>Kathmandu</h3>
43+
Awesome places to visit around kathmandu
44+
</Link>
45+
</li>
46+
<li>
47+
<Link href={`/posts/food`}>
48+
<h3>Food</h3>
49+
Awesome restaurants to go around kathmandu
50+
</Link>
51+
</li>
52+
<li>
53+
<Link href={`/posts/books`}>
54+
<h3>Books</h3>
55+
Awesome Nepali books to read.
56+
</Link>
57+
58+
</li>
59+
</ul>
60+
<Link href="/" locale={locale}>
61+
<FormattedMessage
62+
id="main.page.link"
63+
/>
64+
</Link>
65+
</div>
66+
)
67+
}

Diff for: ‎features/posts/locale/en.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
'title': 'Posts',
3+
'view.title {postSlug}': 'Detail {postSlug}',
4+
'main.page.link': 'Main Page',
5+
'back.to.posts': 'Back',
6+
};

Diff for: ‎features/posts/locale/fr.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
'title': 'Publier',
3+
'view.title {postSlug}': 'Détail {postSlug}',
4+
'main.page.link': 'Page d\'accueil',
5+
'back.to.posts': 'Retour',
6+
};

Diff for: ‎features/posts/locale/np.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
'title': 'पोष्ट',
3+
'view.title {postSlug}': 'विस्तार {postSlug}',
4+
'main.page.link': 'मुख्य पृष्ठ',
5+
'back.to.posts': 'पछाडि',
6+
};

Diff for: ‎features/register/index.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import Link from 'next/link';
2+
import { FormattedMessage } from 'react-intl';
3+
import { useRouter } from 'next/router';
4+
import React, {useEffect, useState} from 'react';
5+
import ReactIntlProvider from 'components/ReactIntlProvider';
6+
7+
import en from './locale/en';
8+
import fr from './locale/fr';
9+
import np from './locale/np';
10+
11+
const languageMaps = {
12+
en,
13+
fr,
14+
np,
15+
};
16+
17+
export const IntlProvider = ({ children }) => {
18+
const router = useRouter()
19+
const { locale } = router;
20+
21+
return (
22+
<ReactIntlProvider messages={languageMaps[locale]}>
23+
{children}
24+
</ReactIntlProvider>
25+
);
26+
}
27+
28+
export default function Register() {
29+
const router = useRouter()
30+
const { locale } = router;
31+
32+
return (
33+
<div>
34+
<h1>
35+
<FormattedMessage
36+
id="register.title"
37+
/>
38+
</h1>
39+
<Link href="/" locale={locale}>
40+
<a><FormattedMessage
41+
id="register.main.page.link"
42+
/></a>
43+
</Link>
44+
</div>
45+
)
46+
}

Diff for: ‎features/register/locale/en.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export default {
2+
'register.title': 'Register Page',
3+
'register.main.page.link': 'Main Page',
4+
};

Diff for: ‎features/register/locale/fr.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export default {
2+
'register.title': 'S\'inscrire',
3+
'register.main.page.link': 'Page d\'accueil',
4+
};

Diff for: ‎features/register/locale/np.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export default {
2+
'register.title': 'दर्ता गर्नुहोस्',
3+
'register.main.page.link': 'मुख्य पृष्ठ',
4+
};

0 commit comments

Comments
 (0)