Fix lang
Seto Elkahfi committed
Aug 11, 2023 at 17:01 UTC
0f6f3ad40e64bd7bde4a6ba702ea3b8568899904
4 files changed
+40
-79
src/components/App.tsx
+5
-2
@@ -70,9 +70,12 @@ class App extends Component<AppProps, AppState> {
70
71
render() {
72
return (
73
- <IntlProvider locale={i18nConfig.language} messages={i18nConfig.messages}>
73
+ <IntlProvider locale={this.props.firebase?.language} messages={i18nConfig.messages}>
74
<FirebaseContext.Provider value={this.props.firebase}>
75
- <Header onChangeLanguage={this.onChangeLanguage.bind(this)} />
75
+ <Header
76
+ onChangeLanguage={this.onChangeLanguage.bind(this)}
77
+ selectedLanguage={this.props.firebase?.language || 'en'}
78
+ />
79
<Main
80
firebase={this.props.firebase}
81
initialData={this.props.initialData}
src/components/Header.tsx
+5
-1
@@ -4,6 +4,7 @@ import LanguageDropdown from './LanguageDropdown';
4
5
type HeaderProps = {
6
onChangeLanguage: (language: string) => void
7
+ selectedLanguage: string
8
}
9
10
type HeaderState = {
@@ -67,7 +68,10 @@ class Header extends Component<HeaderProps, HeaderState> {
68
<a href={`https://musik88.com/@seto`} target={`__blank`} className="navbar-brand d-flex align-items-center">
69
<strong>@seto</strong>
70
</a>
70
- <LanguageDropdown onChangeLanguage={this.props.onChangeLanguage} />
71
+ <LanguageDropdown
72
+ onChangeLanguage={this.props.onChangeLanguage}
73
+ selectedLanguage={this.props.selectedLanguage}
74
+ />
75
<button className="navbar-toggler" onClick={this.toggleExpand.bind(this)} type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded={this.state.expand} aria-label="Toggle navigation">
76
<span className="navbar-toggler-icon"></span>
77
</button>
src/components/LanguageDropdown.tsx
+15
-72
@@ -1,4 +1,5 @@
1
import React, { Component } from 'react'
2
+import { supportedLangs } from '../shared/i18n'
3
4
const listStyle = {
5
listStyle: 'none'
@@ -20,6 +21,7 @@ class LanguageOption extends Component<OptionProps> {
21
22
type LanguageDropdownProps = {
23
onChangeLanguage: (language: string) => void
24
+ selectedLanguage: string
25
}
26
27
type LanguageDropdownState = {}
@@ -27,77 +29,14 @@ type LanguageDropdownState = {}
29
class LanguageDropdown extends Component<LanguageDropdownProps, LanguageDropdownState> {
30
31
getLanguageList(): OptionProps[] {
30
-
31
- const en = {
32
- value: "en",
33
- name: "🇺🇸 English"
34
- }
35
-
36
- const se = {
37
- value: "se",
38
- name: "🇸🇪 Swedish"
39
- }
40
-
41
- const id = {
42
- value: "id",
43
- name: "🇮🇩 Indonesian"
44
- }
45
-
46
- const fr = {
47
- value: "fr",
48
- name: "🇫🇷 Français"
49
- }
50
-
51
- const de = {
52
- value: "de",
53
- name: "🇩🇪 Deutsch"
54
- }
55
-
56
- const zh = {
57
- value: "zh",
58
- name: "🇨🇳 中国人"
59
- }
60
-
61
- const es = {
62
- value: "es",
63
- name: "🇪🇸 Español"
64
- }
65
-
66
- const ja = {
67
- value: "ja",
68
- name: "🇯🇵 日本語"
69
- }
70
-
71
- var languageList: OptionProps[] = []
72
- languageList.push(id)
73
- languageList.push(se)
74
- languageList.push(en)
75
- languageList.push(de)
76
- languageList.push(fr)
77
- languageList.push(zh)
78
- languageList.push(es)
79
- languageList.push(ja)
80
-
81
- return this.shuffle(languageList)
82
- }
83
-
84
- shuffle(array: any[]) {
85
- var currentIndex = array.length, temporaryValue, randomIndex;
86
-
87
- // While there remain elements to shuffle...
88
- while (0 !== currentIndex) {
89
-
90
- // Pick a remaining element...
91
- randomIndex = Math.floor(Math.random() * currentIndex);
92
- currentIndex -= 1;
93
-
94
- // And swap it with the current element.
95
- temporaryValue = array[currentIndex];
96
- array[currentIndex] = array[randomIndex];
97
- array[randomIndex] = temporaryValue;
98
- }
99
-
100
- return array;
32
+ const languageList: OptionProps[] = supportedLangs.map((lang) => {
33
+ return {
34
+ value: lang.code,
35
+ name: lang.name
36
+ }
37
+ })
38
+
39
+ return languageList
40
}
41
42
render() {
@@ -110,7 +49,11 @@ class LanguageDropdown extends Component<LanguageDropdownProps, LanguageDropdown
49
50
return (
51
<div>
113
- <select style={listStyle} onChange={ e => this.props.onChangeLanguage(e.currentTarget.value) } defaultValue={"en"} >
52
+ <select
53
+ style={listStyle}
54
+ onChange={ e => this.props.onChangeLanguage(e.currentTarget.value) }
55
+ value={this.props.selectedLanguage}
56
+ >
57
{languageList}
58
</select>
59
</div>
src/shared/i18n.ts
+15
-4
@@ -1,9 +1,20 @@
1
export const defaultLang = "en";
2
3
-export const supportedLangs = {
4
- en: "English",
5
- id: "Indonesian",
6
-};
3
+interface Lang {
4
+ code: string;
5
+ name: string;
6
+}
7
+
8
+export const supportedLangs: Lang[] = [
9
+ { code: "en", name: "🇺🇸 English" },
10
+ { code: "id", name: "🇮🇩 Indonesian" },
11
+ { code: "se", name: "🇸🇪 Swedish" },
12
+ { code: "de", name: "🇩🇪 German" },
13
+ { code: "fr", name: "🇫🇷 French" },
14
+ { code: "zh", name: "🇨🇳 Chinese" },
15
+ { code: "es", name: "🇪🇸 Spanish" },
16
+ { code: "ja", name: "🇯🇵 Japanese" },
17
+];
18
19
export function determineUserLang(acceptedLangs: string[]) {
20