Support i18n

package.json

@@ -21,10 +21,12 @@
     "axios": "^1.3.4",
     "framer-motion": "^10.16.1",
     "graphql": "16.6.0",
+    "i18next": "^23.5.1",
     "monaco-editor": "^0.39.0",
     "msw": "^1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^13.2.2",
     "react-markdown": "^8.0.7",
     "react-redux": "^8.0.4",
     "react-router-dom": "^6.4.2",

src/i18n.ts

@@ -0,0 +1,27 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import EN_US_TRANSLATIONS from "./i18n/en_US";
+import ZH_CN_TRANSLATIONS from "./i18n/zh_CN";
+
+// the translations
+// (tip move them in a JSON file and import them,
+// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
+const resources = {
+  en_US: EN_US_TRANSLATIONS,
+  zh_CN: ZH_CN_TRANSLATIONS,
+};
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    lng: "en_US", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // if you're using a language detector, do not define the lng option
+
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  });
+
+export default i18n;

src/i18n/en_US.ts

@@ -0,0 +1,11 @@
+import { Resource } from "i18next";
+
+const EN_US_TRANSLATIONS: Resource = {
+  translation: {
+    Problem: "Problem",
+    User: "User",
+    Contest: "Contest",
+  },
+};
+
+export default EN_US_TRANSLATIONS;

src/i18n/zh_CN.ts

@@ -0,0 +1,11 @@
+import { Resource } from "i18next";
+
+const ZH_CN_TRANSLATIONS: Resource = {
+  translation: {
+    Problem: "问题",
+    User: "用户",
+    Contest: "竞赛",
+  },
+};
+
+export default ZH_CN_TRANSLATIONS;

src/index.tsx

@@ -1,10 +1,12 @@
+import App from "./App";
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./index.css";
-import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { worker } from "./mocks/server";
 
+import "./i18n";
+import "./index.css";
+
 console.log("Running in:", import.meta.env.MODE);
 if (import.meta.env.MODE === "mock") {
   worker.start();

src/layouts/adminLayout/Sidebar.tsx

@@ -8,6 +8,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 const navigation = [
   { name: "Problem", href: "/admin/problem", icon: HomeIcon, current: true },
@@ -34,6 +35,7 @@ interface SidebarProps {
 export default function Sidebar(props: SidebarProps) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
   return (
     <>
@@ -126,7 +128,7 @@ export default function Sidebar(props: SidebarProps) {
                                     )}
                                     aria-hidden="true"
                                   />
-                                  {item.name}
+                                  {t(item.name)}
                                 </div>
                               </li>
                             ))}
@@ -177,7 +179,7 @@ export default function Sidebar(props: SidebarProps) {
                             )}
                             aria-hidden="true"
                           />
-                          {item.name}
+                          {t(item.name)}
                         </a>
                       </li>
                     ))}