i18n
Seto Elkahfi committed
Aug 11, 2023 at 16:39 UTC
baf4f2d3419ac3c22952cb7dce79fef5a80a6584
13 files changed
+55
-11
public/index.html
+1
-1
@@ -1,5 +1,5 @@
1
<!DOCTYPE html>
2
-<html lang="en">
2
+<html lang="en" id="lang">
3
<head>
4
<meta charset="utf-8" />
5
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
server/server.tsx
+7
-1
@@ -8,6 +8,7 @@ import { StaticRouter, matchPath } from 'react-router-dom';
8
import routes, { Path } from '../src/shared/routes';
9
import Firebase from '../src/components/Firebase';
10
import firebaseInstance from '../src/components/Firebase/config';
11
+import { determineUserLang } from '../src/shared/i18n';
12
13
const server = express();
14
@@ -17,11 +18,16 @@ server.use('/manifest.json', express.static('./build/manifest.json'));
18
19
server.get('*', (req, res, next) => {
20
21
+ const acceptsLanguages = req.acceptsLanguages();
22
+ console.log('SERVER#acceptsLanguages', acceptsLanguages);
23
+ const language = determineUserLang(acceptsLanguages);
24
+ console.log('SERVER#language', language);
25
+
26
const activeRoute = routes.find((route) =>
27
matchPath(route.path, req.url)
28
)
29
24
- const firebase = new Firebase('en', firebaseInstance.database());
30
+ const firebase = new Firebase(language, firebaseInstance.database());
31
32
if (!activeRoute) {
33
return next();
src/components/App.tsx
+8
-8
@@ -12,14 +12,14 @@ import localeFr from 'react-intl/locale-data/fr';
12
import localeZh from 'react-intl/locale-data/zh';
13
import localeEs from 'react-intl/locale-data/es';
14
import localeJa from 'react-intl/locale-data/ja';
15
-import messages_sv from "../translations/sv.json";
16
-import messages_id from "../translations/id.json";
17
-import messages_en from "../translations/en.json";
18
-import messagesDe from "../translations/de.json";
19
-import messagesFr from "../translations/fr.json";
20
-import messagesZh from "../translations/zh.json";
21
-import messagesEs from "../translations/es.json";
22
-import messagesJa from "../translations/ja.json";
15
+import messages_sv from "../shared/translations/sv.json";
16
+import messages_id from "../shared/translations/id.json";
17
+import messages_en from "../shared/translations/en.json";
18
+import messagesDe from "../shared/translations/de.json";
19
+import messagesFr from "../shared/translations/fr.json";
20
+import messagesZh from "../shared/translations/zh.json";
21
+import messagesEs from "../shared/translations/es.json";
22
+import messagesJa from "../shared/translations/ja.json";
23
import { InitialData } from '../shared/routes';
24
25
addLocaleData([
src/index.tsx
+6
-1
@@ -8,6 +8,7 @@ import { BrowserRouter } from 'react-router-dom';
8
import Firebase from './components/Firebase';
9
import firebaseInstance from './components/Firebase/config';
10
import { InitialData } from './shared/routes';
11
+import { determineUserLang } from './shared/i18n';
12
13
axios.defaults.baseURL = 'https://api.musik88.com/api/v1/';
14
@@ -16,11 +17,15 @@ declare global {
17
}
18
19
console.log('window.__DATA__', window.__DATA__);
20
+const languages = navigator.languages || [];
21
+console.log('CLIENT#languages', languages);
22
+const language = determineUserLang([...languages]);
23
+console.log('CLIENT#lang', language);
24
25
hydrate(
26
<BrowserRouter>
27
<App
23
- firebase={new Firebase('en', firebaseInstance.database())}
28
+ firebase={new Firebase(language, firebaseInstance.database())}
29
initialData={window.__DATA__}
30
/>
31
</BrowserRouter>,
src/shared/i18n.ts
new
+33
@@ -0,0 +1,33 @@
1
+export const defaultLang = "en";
2
+
3
+export const supportedLangs = {
4
+ en: "English",
5
+ id: "Indonesian",
6
+};
7
+
8
+export function determineUserLang(acceptedLangs: string[]) {
9
+
10
+ const acceptedLangCodes = acceptedLangs.map(stripCountry);
11
+
12
+ const supportedLangCodes = Object.keys(supportedLangs);
13
+
14
+ const matchingLangCode = acceptedLangCodes.find(code =>
15
+
16
+ supportedLangCodes.includes(code),
17
+
18
+ );
19
+
20
+ return matchingLangCode || defaultLang;
21
+
22
+}
23
+
24
+function stripCountry(lang: string) {
25
+ return lang
26
+
27
+ .trim()
28
+
29
+ .replace("_", "-")
30
+
31
+ .split("-")[0];
32
+
33
+}
\ No newline at end of file