Add: Add Header Bar

CelleryLin · Jul 3, 2024 · 997228a · 997228a
1 parent c50e56d
commit 997228a
Show file tree

Hide file tree

Showing 7 changed files with 331 additions and 49 deletions.
diff --git a/nsysu_selector_helper/package.json b/nsysu_selector_helper/package.json
@@ -10,20 +10,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.3.7",
+    "@swc/plugin-styled-components": "^2.0.9",
     "antd": "^5.19.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.11"
   },
   "devDependencies": {
     "@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",
+    "prettier": "^3.3.2",
     "typescript": "^5.2.2",
     "vite": "^5.3.1"
   }

diff --git a/nsysu_selector_helper/src/App.tsx b/nsysu_selector_helper/src/App.tsx
@@ -3,6 +3,7 @@ import { ConfigProvider, Button, List, Typography, Select } from 'antd';
 import { useThemeConfig } from '@/hooks/useThemeConfig';
 import { NSYSUCourseAPI } from '@/api/NSYSUCourseAPI';
 import { Course, AcademicYear } from '@/types';
+import SectionHeader from "#/SectionHeader.tsx";
 
 const { Option } = Select;
 
@@ -49,49 +50,7 @@ const App: FC = () => {
 
   return (
     <ConfigProvider theme={themeConfig}>
-      <div style={{ padding: '20px' }}>
-        <Typography.Title level={2}>Course Viewer</Typography.Title>
-        <Select
-          defaultValue={semesters?.latest}
-          style={{ width: 200, marginBottom: '20px' }}
-          onChange={(value) => setSelectedSemester(value)}
-        >
-          {semesters && Object.entries(semesters.history).map(([year, label]) => (
-            <Option key={year} value={year}>{label} ({year})</Option>
-          ))}
-        </Select>
-        <Button
-          type="primary"
-          onClick={async () => {
-            if (selectedSemester) {
-              setLoading(true);
-              try {
-                const updates = await NSYSUCourseAPI.getSemesterUpdates(selectedSemester);
-                const courses = await NSYSUCourseAPI.getCourses(selectedSemester, updates.latest);
-                setCourses(courses);
-              } catch (error) {
-                console.error('Error fetching courses:', error);
-              } finally {
-                setLoading(false);
-              }
-            }
-          }}
-          loading={loading}
-        >
-          Load Selected Semester Courses
-        </Button>
-        <Typography.Title level={3} style={{ marginTop: '20px' }}>Total: {courses.length}</Typography.Title>
-        <List
-          bordered
-          dataSource={courses}
-          renderItem={course => (
-            <List.Item>
-              <Typography.Text>{course.id} {course.name}</Typography.Text> - {course.teacher} ({course.credit} credits)
-            </List.Item>
-          )}
-          style={{ marginTop: '20px' }}
-        />
-      </div>
+      <SectionHeader/>
     </ConfigProvider>
   );
 };

diff --git a/nsysu_selector_helper/src/api/NSYSUCourseAPI.ts b/nsysu_selector_helper/src/api/NSYSUCourseAPI.ts
@@ -3,6 +3,9 @@ import { AcademicYear, Course, SemesterUpdate } from '@/types';
 const BASE_URL = 'https://whats2000.github.io/NSYSUCourseAPI';
 
 export class NSYSUCourseAPI {
+  /**
+   * 取得所有可用學期列表
+   */
   static async getAvailableSemesters(): Promise<AcademicYear> {
     const response = await fetch(`${BASE_URL}/version.json`);
     if (!response.ok) {
@@ -11,6 +14,10 @@ export class NSYSUCourseAPI {
     return response.json();
   }
 
+  /**
+   * 取得指定學年度的學期更新資訊
+   * @param academicYear - 學年度
+   */
   static async getSemesterUpdates(academicYear: string): Promise<SemesterUpdate> {
     const response = await fetch(`${BASE_URL}/${academicYear}/version.json`);
     if (!response.ok) {
@@ -19,6 +26,11 @@ export class NSYSUCourseAPI {
     return response.json();
   }
 
+  /**
+   * 取得指定學年度、更新時間的所有課程
+   * @param academicYear - 學年度
+   * @param updateTime - 更新時間
+   */
   static async getCourses(academicYear: string, updateTime: string): Promise<Course[]> {
     const response = await fetch(`${BASE_URL}/${academicYear}/${updateTime}/all.json`);
     if (!response.ok) {
@@ -31,6 +43,9 @@ export class NSYSUCourseAPI {
     });
   }
 
+  /**
+   * 取得最新學期的所有課程
+   */
   static async getLatestCourses(): Promise<Course[]> {
     const semesters = await NSYSUCourseAPI.getAvailableSemesters();
     const latestAcademicYear = semesters.latest;