rerange code and translation source

src/main.tsx

@@ -28,7 +28,7 @@ import ReactDOM from "react-dom/client";
 
 import { theme } from "@/ui/theme";
 
-import { LanguageProvider } from "./Language/LanguageContext";
+import { I18NProvider } from "./ui/I18N";
 import { NeosRouter } from "./ui/NeosRouter";
 
 const root = ReactDOM.createRoot(
@@ -36,7 +36,7 @@ const root = ReactDOM.createRoot(
 );
 
 root.render(
-  <LanguageProvider>
+  <I18NProvider>
     <ConfigProvider theme={theme} locale={zhCN}>
       <App>
         <ProConfigProvider dark>
@@ -44,5 +44,5 @@ root.render(
         </ProConfigProvider>
       </App>
     </ConfigProvider>
-  </LanguageProvider>,
+  </I18NProvider>,
 );

src/Language/LanguageContext.tsx → src/ui/I18N/I18NContext/index.tsx

 import React, { createContext, useContext, useState } from "react";
 
-interface LanguageContextType {
+interface I18NContextType {
   language: string;
   changeLanguage: (newLanguage: string) => void;
 }
 
-const LanguageContext = createContext<LanguageContextType | undefined>(
-  undefined,
-);
+const I18NContext = createContext<I18NContextType | undefined>(undefined);
 
-export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({
+export const I18NProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const [language, setLanguage] = useState<string>("cn"); // default language
@@ -19,16 +17,16 @@ export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({
   };
 
   return (
-    <LanguageContext.Provider value={{ language, changeLanguage }}>
+    <I18NContext.Provider value={{ language, changeLanguage }}>
       {children}
-    </LanguageContext.Provider>
+    </I18NContext.Provider>
   );
 };
 
-export const useLanguage = (): LanguageContextType => {
-  const context = useContext(LanguageContext);
+export const useI18N = (): I18NContextType => {
+  const context = useContext(I18NContext);
   if (!context) {
-    throw new Error("useLanguage must be used within a LanguageProvider");
+    throw new Error("useI18N must be used within a I18NProvider");
   }
   return context;
 };

src/Language/LanguageSelector.tsx → src/ui/I18N/I18NSelector/index.tsx

 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
-const LanguageSelector: React.FC = () => {
+export const I18NSelector: React.FC = () => {
   const { i18n } = useTranslation();
 
   const onClickLanguageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -10,7 +10,8 @@ const LanguageSelector: React.FC = () => {
   };
 
   useEffect(() => {
-    //Adding language state as a dependency to force re-render when the language changes
+    // Adding language state as a dependency to force re-render
+    // when the language changes
   }, [i18n.language]);
 
   return (
@@ -25,5 +26,3 @@ const LanguageSelector: React.FC = () => {
     </select>
   );
 };
-
-export default LanguageSelector;

src/i18n.tsx → src/ui/I18N/index.ts

+export * from "./I18NContext";
+export * from "./I18NSelector";
+
 import i18next from "i18next";
 import { initReactI18next } from "react-i18next";
 
-import translationBrazilian from "./Translation/Brazilian/translation.json";
-import translationChinese from "./Translation/Chinese/translation.json";
-//Import all translation files
-import translationEnglish from "./Translation/English/translation.json";
-import translationFrench from "./Translation/French/translation.json";
-import translationJapanese from "./Translation/Japanese/translation.json";
-import translationPortuguese from "./Translation/Portuguese/translation.json";
-import translationSpanish from "./Translation/Spanish/translation.json";
-
-//---Using translation
-// const resources = {
-//     en: {
-//         translation: translationEnglish,
-//     },
-//     es: {
-//         translation: translationSpanish,
-//     },
-//     fr: {
-//         translation: translationFrench,
-//     },
-// }
+/* Import all translation files */
+import translationBrazilian from "./Source/Brazilian/translation.json";
+import translationChinese from "./Source/Chinese/translation.json";
+import translationEnglish from "./Source/English/translation.json";
+import translationFrench from "./Source/French/translation.json";
+import translationJapanese from "./Source/Japanese/translation.json";
+import translationPortuguese from "./Source/Portuguese/translation.json";
+import translationSpanish from "./Source/Spanish/translation.json";
 
-//---Using different namespaces
 const resources = {
   cn: {
     Header: translationChinese.Header,

src/ui/Layout/index.tsx

@@ -17,9 +17,9 @@ import {
   removeCookie,
 } from "@/api";
 import { useConfig } from "@/config";
-import LanguageSelector from "@/Language/LanguageSelector";
 import { accountStore } from "@/stores";
 
+import { I18NSelector } from "../I18N";
 import styles from "./index.module.scss";
 import {
   getLoginStatus,
@@ -60,7 +60,7 @@ const HeaderBtn: React.FC<
 };
 
 export const Component = () => {
-  const { t } = useTranslation("Header");
+  const { t: i18n } = useTranslation("Header");
 
   // 捕获SSO登录
   const routerLocation = useLocation();
@@ -99,15 +99,15 @@ export const Component = () => {
             />
           </a>
 
-          <HeaderBtn to="/">{t("HomePage")}</HeaderBtn>
+          <HeaderBtn to="/">{i18n("HomePage")}</HeaderBtn>
           <HeaderBtn to="/match" disabled={!logined}>
-            {t("Match")}
+            {i18n("Match")}
           </HeaderBtn>
           <HeaderBtn to="/build" disabled={!logined}>
-            {t("DeckBuilding")}
+            {i18n("DeckBuilding")}
           </HeaderBtn>
           <span style={{ flexGrow: 1 }} />
-          <LanguageSelector />
+          <I18NSelector />
           <span className={styles.profile}>
             <Dropdown
               arrow
@@ -116,14 +116,14 @@ export const Component = () => {
                   {
                     label: (
                       <a href={NeosConfig.profileUrl} target="_blank">
-                        {t("PersonalCenter")}
+                        {i18n("PersonalCenter")}
                       </a>
                     ),
                   },
                   {
                     label: (
                       <a href="https://ygobbs.com" target="_blank">
-                        {t("MengkaCommunity")}
+                        {i18n("MengkaCommunity")}
                       </a>
                     ),
                   },
@@ -133,16 +133,16 @@ export const Component = () => {
                         href="https://mycard.moe/ygopro/arena/#/"
                         target="_blank"
                       >
-                        {t("DuelDatabase")}
+                        {i18n("DuelDatabase")}
                       </a>
                     ),
                   },
                   {
-                    label: logined ? t("LogOut") : t("LoginToMengka"),
+                    label: logined ? i18n("LogOut") : i18n("LoginToMengka"),
                     onClick: logined ? onLogout : onLogin,
                   },
                   {
-                    label: t("Fullscreen"),
+                    label: i18n("Fullscreen"),
                     onClick: () => document.documentElement.requestFullscreen(),
                     danger: true,
                   },

src/ui/Match/index.tsx

@@ -52,7 +52,7 @@ export const Component: React.FC = () => {
   const [entertainMatchLoading, setEntertainMatchLoading] = useState(false); // 娱乐匹配的loading状态
   const [watchLoading, setWatchLoading] = useState(false); // 观战模式的loading状态
   const navigate = useNavigate();
-  const { t } = useTranslation("Match");
+  const { t: i18n } = useTranslation("Match");
 
   // 匹配
   const onMatch = async (arena: "athletic" | "entertain") => {
@@ -224,7 +224,7 @@ export const Component: React.FC = () => {
         <div className={styles.wrap}>
           <Space size={16}>
             <Select
-              title={t("Deck")}
+              title={i18n("Deck")}
               showSearch
               value={deckName}
               style={{ width: 200 }}
@@ -248,13 +248,13 @@ export const Component: React.FC = () => {
               onClick={() => navigate("/build")}
               size="large"
             >
-              {t("DeckEdit")}
+              {i18n("DeckEdit")}
             </Button>
           </Space>
           <div className={styles["mode-select"]}>
             <Mode
-              title={t("MCCompetitiveMatchmakingTitle")}
-              desc={t("MCCompetitiveMatchmakingDesc")}
+              title={i18n("MCCompetitiveMatchmakingTitle")}
+              desc={i18n("MCCompetitiveMatchmakingDesc")}
               icon={
                 athleticMatchLoading ? (
                   <LoadingOutlined />
@@ -265,8 +265,8 @@ export const Component: React.FC = () => {
               onClick={onCompetitiveMatch}
             />
             <Mode
-              title={t("MCCasualMatchmakingTitle")}
-              desc={t("MCCasualMatchmakingDesc")}
+              title={i18n("MCCasualMatchmakingTitle")}
+              desc={i18n("MCCasualMatchmakingDesc")}
               icon={
                 entertainMatchLoading ? (
                   <LoadingOutlined />
@@ -277,20 +277,20 @@ export const Component: React.FC = () => {
               onClick={onEntertainMatch}
             />
             <Mode
-              title={t("MCCustomRoomTitle")}
-              desc={t("MCCustomRoomDesc")}
+              title={i18n("MCCustomRoomTitle")}
+              desc={i18n("MCCustomRoomDesc")}
               icon={<BulbOutlined />}
               onClick={onMCCustomRoom}
             />
             <Mode
-              title={t("MCSpectatorListTitle")}
-              desc={t("MCSpectatorListDesc")}
+              title={i18n("MCSpectatorListTitle")}
+              desc={i18n("MCSpectatorListDesc")}
               icon={watchLoading ? <LoadingOutlined /> : <PlayCircleFilled />}
               onClick={onMCWatch}
             />
             <Mode
-              title={t("SinglePlayerModeTitle")}
-              desc={t("SinglePlayerModeDesc")}
+              title={i18n("SinglePlayerModeTitle")}
+              desc={i18n("SinglePlayerModeDesc")}
               icon={
                 singleLoading ? (
                   <LoadingOutlined />
@@ -301,18 +301,18 @@ export const Component: React.FC = () => {
               onClick={onAIMatch}
             />
             <Mode
-              title={t("CustomRoomTitle")}
-              desc={t("CustomRoomDesc")}
+              title={i18n("CustomRoomTitle")}
+              desc={i18n("CustomRoomDesc")}
               icon={<SettingFilled />}
               onClick={onCustomRoom}
             />
             <Mode
-              title={t("ReplayTitle")}
-              desc={t("ReplayDesc")}
+              title={i18n("ReplayTitle")}
+              desc={i18n("ReplayDesc")}
               icon={<IconFont type="icon-record" size={24} />}
               onClick={replayOpen}
             />
-            <Mode title={t("WIPTitle")} desc={t("WIPDesc")} icon={null} />
+            <Mode title={i18n("WIPTitle")} desc={i18n("WIPDesc")} icon={null} />
           </div>
         </div>
       </div>