From cdb49b25a1d6c57dac75f9c9820a5910e47f852c Mon Sep 17 00:00:00 2001
From: wsh <wsh@wshdeMacBook-Pro.local>
Date: Sat, 17 Aug 2024 22:57:51 +0800
Subject: [PATCH] Added multiple language options and fixed a bug where the
 Settings mode box was reset to browser language when opened

---
 .../languageSelector/LanguageSelector.tsx     | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/languageSelector/LanguageSelector.tsx b/frontend/src/components/languageSelector/LanguageSelector.tsx
index 0655026..d1c8c6d 100644
--- a/frontend/src/components/languageSelector/LanguageSelector.tsx
+++ b/frontend/src/components/languageSelector/LanguageSelector.tsx
@@ -3,38 +3,41 @@ import i18n from '../../i18n';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import './LanguageSelector.css';
 
-type Languages = 'en' | 'zh';
+type Languages = 'en' | 'zh' | 'ja' | 'ko' | 'de' | 'ru' | 'fr';
 
 const LanguageSelector: React.FC = () => {
-  const getBrowserLanguage = () => {
-    const browserLang = navigator.language.split('-')[0];
-    return (['en', 'zh'].includes(browserLang) ? browserLang : 'en') as Languages;
-  };
-
   const [selectedLang, setSelectedLang] = useState<Languages>(i18n.language as Languages);
 
   useEffect(() => {
-    const defaultLang = getBrowserLanguage();
-    if (defaultLang !== i18n.language) {
-      i18n.changeLanguage(defaultLang);
-      setSelectedLang(defaultLang);
-    }
+    const handleLanguageChanged = (lang: string) => {
+      setSelectedLang(lang as Languages);
+    };
+
+    i18n.on('languageChanged', handleLanguageChanged);
+
+    return () => {
+      i18n.off('languageChanged', handleLanguageChanged);
+    };
   }, []);
 
   const handleLanguageChange = (value: string) => {
     const nextLang = value as Languages;
     i18n.changeLanguage(nextLang);
-    setSelectedLang(nextLang);
   };
 
   return (
     <Select onValueChange={handleLanguageChange} value={selectedLang}>
-      <SelectTrigger className="w-[100px]">
+      <SelectTrigger className="w-[120px]">
         <SelectValue placeholder="Language" />
       </SelectTrigger>
       <SelectContent>
         <SelectItem value="en">English</SelectItem>
-        <SelectItem value="zh">中文</SelectItem>
+        <SelectItem value="zh">简体中文</SelectItem>
+        <SelectItem value="ja">日本語</SelectItem>
+        <SelectItem value="ko">한국어</SelectItem>
+        <SelectItem value="de">Deutsch</SelectItem>
+        <SelectItem value="ru">Русский</SelectItem>
+        <SelectItem value="fr">Français</SelectItem>
       </SelectContent>
     </Select>
   );