From 5a0d45eb2dcf2a63c654e3028cae20719412a1f8 Mon Sep 17 00:00:00 2001
From: wsh <wsh@wshdeMacBook-Pro.local>
Date: Mon, 2 Sep 2024 15:59:20 +0800
Subject: [PATCH] Mask the region code in the language Settings

---
 .../src/components/languageSelector/LanguageSelector.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/languageSelector/LanguageSelector.tsx b/frontend/src/components/languageSelector/LanguageSelector.tsx
index d1c8c6d..b8914b6 100644
--- a/frontend/src/components/languageSelector/LanguageSelector.tsx
+++ b/frontend/src/components/languageSelector/LanguageSelector.tsx
@@ -4,13 +4,16 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 import './LanguageSelector.css';
 
 type Languages = 'en' | 'zh' | 'ja' | 'ko' | 'de' | 'ru' | 'fr';
+const normalizeLanguage = (language: string): Languages => {
+  return language.split('-')[0] as Languages;
+};
 
 const LanguageSelector: React.FC = () => {
-  const [selectedLang, setSelectedLang] = useState<Languages>(i18n.language as Languages);
+  const [selectedLang, setSelectedLang] = useState<Languages>(normalizeLanguage(i18n.language));
 
   useEffect(() => {
     const handleLanguageChanged = (lang: string) => {
-      setSelectedLang(lang as Languages);
+      setSelectedLang(normalizeLanguage(lang));
     };
 
     i18n.on('languageChanged', handleLanguageChanged);
@@ -21,7 +24,7 @@ const LanguageSelector: React.FC = () => {
   }, []);
 
   const handleLanguageChange = (value: string) => {
-    const nextLang = value as Languages;
+    const nextLang = normalizeLanguage(value);
     i18n.changeLanguage(nextLang);
   };