Feat: Make all text into i18next

nsysu_selector_helper/package.json

@@ -13,21 +13,28 @@
     "@ant-design/icons": "^5.3.7",
     "@swc/plugin-styled-components": "^2.0.9",
     "antd": "^5.19.0",
+    "i18next": "^23.11.5",
+    "i18next-browser-languagedetector": "^8.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^14.1.2",
     "styled-components": "^6.1.11"
   },
   "devDependencies": {
+    "@types/i18next-browser-languagedetector": "^3.0.0",
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
     "prettier": "^3.3.2",
     "typescript": "^5.2.2",
     "vite": "^5.3.1"

nsysu_selector_helper/src/App.tsx

@@ -7,7 +7,7 @@ import { NSYSUCourseAPI } from '@/api/NSYSUCourseAPI.ts';
 import SectionHeader from '#/SectionHeader.tsx';
 
 const App: FC = () => {
-  const [themeConfig, _setThemeConfig] = useThemeConfig();
+  const [themeConfig] = useThemeConfig();
 
   const [isLoading, setIsLoading] = useState(true);
 
@@ -17,7 +17,7 @@ const App: FC = () => {
     history: {},
   });
   const [selectedSemester, setSelectedSemester] = useState('');
-  const [courses, setCourses] = useState<Course[]>([]);
+  const [, setCourses] = useState<Course[]>([]);
 
   useEffect(() => {
     NSYSUCourseAPI.getAvailableSemesters().then((availableSemesters) => {

nsysu_selector_helper/src/components/SectionHeader.tsx

@@ -9,6 +9,7 @@ import {
   Select,
   SelectProps,
 } from 'antd';
+import { useTranslation } from 'react-i18next';
 import {
   BookFilled,
   BookOutlined,
@@ -17,9 +18,10 @@ import {
   NotificationOutlined,
   MenuOutlined,
 } from '@ant-design/icons';
-import banner from '@/assets/banner.svg';
 import styled from 'styled-components';
+
 import { AcademicYear } from '@/types';
+import banner from '@/assets/banner.svg';
 
 const HeaderContainer = styled(Flex)<{
   $primaryColor: string;
@@ -97,22 +99,40 @@ const SectionHeader: FC<HeaderProps> = ({
   selectedSemester,
   setSelectedSemester,
 }) => {
+  const { t } = useTranslation();
+
   const { token } = theme.useToken();
   const primaryColor = token.colorPrimary;
   const textColor = '#ffffff';
 
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   const navTabs: MenuProps['items'] = [
-    { key: 'all-courses', label: '所有課程', icon: <BookOutlined /> },
-    { key: 'semester-compulsory', label: '學期必修', icon: <BookFilled /> },
+    {
+      key: 'all-courses',
+      label: t('all-courses'),
+      icon: <BookOutlined />,
+    },
+    {
+      key: 'semester-compulsory',
+      label: t('semester-compulsory'),
+      icon: <BookFilled />,
+    },
     {
       key: 'course-detective',
-      label: '課程偵探',
+      label: t('course-detective'),
       icon: <FileSearchOutlined />,
     },
-    { key: 'selected-export', label: '已選匯出', icon: <FileDoneOutlined /> },
-    { key: 'announcements', label: '公告', icon: <NotificationOutlined /> },
+    {
+      key: 'selected-export',
+      label: t('selected-export'),
+      icon: <FileDoneOutlined />,
+    },
+    {
+      key: 'announcements',
+      label: t('announcements'),
+      icon: <NotificationOutlined />,
+    },
   ];
 
   const semesterCodeMap = {
@@ -127,11 +147,11 @@ const SectionHeader: FC<HeaderProps> = ({
     .sort((a, b) => b.localeCompare(a))
     .map((year) => ({
       key: year,
-      label: `${year.slice(0, -1)} ${semesterCodeMap[parseInt(year.slice(-1))]}`,
+      label: `${year.slice(0, -1)} ${semesterCodeMap[parseInt(year.slice(-1)) as 1 | 2 | 3]}`,
       value: year,
     }));
 
-  const handleMenuClick = (e: any) => {
+  const handleMenuClick = (e: { key: string }) => {
     setSelectedKeys([e.key]);
     setDrawerOpen(false);
   };
@@ -148,8 +168,8 @@ const SectionHeader: FC<HeaderProps> = ({
         </Flex>
         <Flex align={'center'} justify={'center'}>
           <StyledSelect
-            value={selectedSemester === '' ? '載入中...' : selectedSemester}
-            onChange={(value) => setSelectedSemester(value)}
+            value={selectedSemester === '' ? t('loading') : selectedSemester}
+            onChange={(value) => setSelectedSemester(value as string)}
             options={semesterOptions}
             loading={!semesterOptions.length}
             style={{ width: 120 }}
@@ -171,14 +191,14 @@ const SectionHeader: FC<HeaderProps> = ({
         </MobileMenu>
       </HeaderContainer>
       <Drawer
-        title='中山大學選課小幫手'
+        title={t('selector-helper')}
         placement='left'
         onClose={() => setDrawerOpen(false)}
         open={drawerOpen}
       >
         <Flex vertical={true} gap={20}>
           <Select
-            value={selectedSemester === '' ? '載入中...' : selectedSemester}
+            value={selectedSemester === '' ? t('loading') : selectedSemester}
             onChange={(value) => setSelectedSemester(value)}
             options={semesterOptions}
             loading={!semesterOptions.length}

nsysu_selector_helper/src/i18n/i18nConfig.ts

@@ -0,0 +1,37 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import translationZH_TW from './locales/zh_TW/translation.json';
+
+export const resources = {
+  zh_TW: {
+    translation: translationZH_TW,
+  },
+  zh: {
+    translation: translationZH_TW,
+  },
+};
+
+const initI18n = () => {
+  i18n
+    .use(initReactI18next)
+    .use(LanguageDetector)
+    .init({
+      resources,
+      fallbackLng: 'zh_TW',
+      debug: false,
+      detection: {
+        order: ['querystring', 'localStorage', 'htmlTag'],
+        lookupQuerystring: 'lang',
+        lookupLocalStorage: 'i18nextLng',
+        caches: ['localStorage'],
+      },
+      interpolation: {
+        escapeValue: false,
+      },
+    })
+    .then();
+};
+
+export default initI18n;

nsysu_selector_helper/src/i18n/locales/zh_TW/translation.json

@@ -0,0 +1,9 @@
+{
+  "loading": "載入中...",
+  "selector-helper": "中山大學課程選課小幫手",
+  "all-courses": "所有課程",
+  "semester-compulsory": "學期必修",
+  "course-detective": "課程偵探",
+  "selected-export": "已選匯出",
+  "announcements": "公告"
+}

nsysu_selector_helper/src/main.tsx

@@ -1,10 +1,13 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+import initI18n from '@/i18n/i18nConfig.ts';
+
+initI18n();
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App/>
+    <App />
   </React.StrictMode>,
-)
+);

nsysu_selector_helper/tsconfig.app.json

@@ -30,7 +30,8 @@
 
       "@": ["./src"],
       "@/*": ["./src/*"]
-    }
+    },
+    "allowSyntheticDefaultImports": true
   },
   "include": ["src"]
 }