From 47bbf187a51cad13a94f4c48046219cc08bbcc6e Mon Sep 17 00:00:00 2001
From: Whitewater <me@waterwater.moe>
Date: Wed, 21 Sep 2022 21:29:04 +0800
Subject: [PATCH] fix(i18n): default language select (#450)

* fix: default language

* feat: mobile support multiple languages
---
 apps/venus/src/app/common/Header.tsx          |  2 +-
 apps/venus/src/app/common/MobileHeader.tsx    | 28 +++++++++++--------
 .../Settings/SettingsList.tsx                 |  2 +-
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/apps/venus/src/app/common/Header.tsx b/apps/venus/src/app/common/Header.tsx
index 2dc7c50ff0..5de98049af 100644
--- a/apps/venus/src/app/common/Header.tsx
+++ b/apps/venus/src/app/common/Header.tsx
@@ -140,7 +140,7 @@ export const AFFiNEHeader = () => {
                     }}
                 />
                 <Select
-                    defaultValue={i18n.language}
+                    defaultValue={i18n.resolvedLanguage}
                     sx={{ display: matchesIPAD ? 'none' : 'intial' }}
                     onChange={changeLanguage}
                     size="md"
diff --git a/apps/venus/src/app/common/MobileHeader.tsx b/apps/venus/src/app/common/MobileHeader.tsx
index f55a793a45..a856e177ef 100644
--- a/apps/venus/src/app/common/MobileHeader.tsx
+++ b/apps/venus/src/app/common/MobileHeader.tsx
@@ -17,6 +17,7 @@ import {
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { LOCALES } from '../i18n';
 import AFFiNETextLogo from './affine-text-logo.png';
 
 export const MobileHeader = () => {
@@ -163,18 +164,21 @@ export const MobileHeader = () => {
                             timeout="auto"
                             unmountOnExit
                         >
-                            <ListItemButton
-                                onClick={() => i18n.changeLanguage('en')}
-                            >
-                                <ListItemText primary="English" />
-                                <Checkbox checked={i18n.language === 'en'} />
-                            </ListItemButton>
-                            <ListItemButton
-                                onClick={() => i18n.changeLanguage('zh')}
-                            >
-                                <ListItemText primary="简体中文" />
-                                <Checkbox checked={i18n.language === 'zh'} />
-                            </ListItemButton>
+                            {LOCALES.map(lang => (
+                                <ListItemButton
+                                    key={lang.tag}
+                                    onClick={() =>
+                                        i18n.changeLanguage(lang.tag)
+                                    }
+                                >
+                                    <ListItemText primary={lang.originalName} />
+                                    <Checkbox
+                                        checked={
+                                            i18n.resolvedLanguage === lang.tag
+                                        }
+                                    />
+                                </ListItemButton>
+                            ))}
                         </Collapse>
                     </List>
                 </StyledDrawerContainer>
diff --git a/libs/components/layout/src/settings-sidebar/Settings/SettingsList.tsx b/libs/components/layout/src/settings-sidebar/Settings/SettingsList.tsx
index 8ebaf90a82..50c6ecafe9 100644
--- a/libs/components/layout/src/settings-sidebar/Settings/SettingsList.tsx
+++ b/libs/components/layout/src/settings-sidebar/Settings/SettingsList.tsx
@@ -48,7 +48,7 @@ export const SettingsList = () => {
                         {item.key === 'Language' ? (
                             <div style={{ marginLeft: '12em' }}>
                                 <Select
-                                    defaultValue={i18n.language}
+                                    defaultValue={i18n.resolvedLanguage}
                                     onChange={changeLanguage}
                                 >
                                     {LOCALES.map(option => (