Add: Add entry notification

CelleryLin · Jul 3, 2024 · 37ee88b · 37ee88b
1 parent 02fe08d
commit 37ee88b
Show file tree

Hide file tree

Showing 4 changed files with 177 additions and 12 deletions.
diff --git a/nsysu_selector_helper/src/App.tsx b/nsysu_selector_helper/src/App.tsx
@@ -5,13 +5,14 @@ import type { AcademicYear, Course } from '@/types';
 import { useThemeConfig } from '@/hooks/useThemeConfig';
 import { NSYSUCourseAPI } from '@/api/NSYSUCourseAPI.ts';
 import SectionHeader from '#/SectionHeader.tsx';
+import EntryNotification from '#/EntryNotification.tsx';
 
 const App: FC = () => {
   const [themeConfig] = useThemeConfig();
 
   const [isLoading, setIsLoading] = useState(true);
 
-  const [selectedKeys, setSelectedKeys] = useState(['all-courses']);
+  const [selectedKeys, setSelectedKeys] = useState(['allCourses']);
   const [availableSemesters, setAvailableSemesters] = useState<AcademicYear>({
     latest: '',
     history: {},
@@ -53,6 +54,7 @@ const App: FC = () => {
   return (
     <ConfigProvider theme={themeConfig}>
       {isLoading && <Spin spinning={true} fullscreen />}
+      <EntryNotification />
       <SectionHeader
         selectedKeys={selectedKeys}
         setSelectedKeys={setSelectedKeys}

diff --git a/nsysu_selector_helper/src/components/EntryNotification.tsx b/nsysu_selector_helper/src/components/EntryNotification.tsx
@@ -0,0 +1,116 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Button, Checkbox } from 'antd';
+import {
+  NotificationOutlined,
+  FileTextOutlined,
+  ArrowUpOutlined,
+} from '@ant-design/icons';
+import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+
+const TextWithIcon = styled.h3`
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-weight: bold;
+
+  svg {
+    margin: 0 8px 0 0;
+  }
+`;
+
+const EntryNotification: React.FC = () => {
+  const { t } = useTranslation();
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [dontShowAgain, setDontShowAgain] = useState(false);
+
+  useEffect(() => {
+    const announcementSeen = localStorage.getItem('entryNotificationSeen');
+    const versionSeen = localStorage.getItem('entryNotificationVersion');
+
+    if (announcementSeen !== 'true' || versionSeen !== t('version')) {
+      setIsModalOpen(true);
+    }
+  }, [t]);
+
+  const renderList = (items: string[]) => {
+    return items.map((item, index) => <li key={index}>{item}</li>);
+  };
+
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleDontShowAgain = (event: CheckboxChangeEvent) => {
+    const { checked } = event.target;
+    localStorage.setItem('entryNotificationSeen', checked ? 'true' : 'false');
+    localStorage.setItem('entryNotificationVersion', t('version'));
+    setDontShowAgain(checked);
+  };
+
+  const announcementContent = t('announcementContent', {
+    returnObjects: true,
+  }) as {
+    description: string;
+    updates: string;
+    updatesDetails: string[];
+    features: string[];
+    knownIssues: string[];
+    contactEmail: string;
+    copyright: string[];
+  };
+
+  return (
+    <Modal
+      title={
+        <TextWithIcon>
+          <NotificationOutlined /> {t('announcements')}
+        </TextWithIcon>
+      }
+      open={isModalOpen}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      footer={[
+        <Checkbox
+          key='dontShowAgain'
+          checked={dontShowAgain}
+          onChange={handleDontShowAgain}
+        >
+          {t('announcementContent.dontShowAgain')}
+        </Checkbox>,
+        <Button key='cancel' onClick={handleCancel}>
+          {t('announcementContent.close')}
+        </Button>,
+        <Button key='submit' type={'primary'}>
+          <a href={t('feedbackFormUrl')} target='_blank' rel='noreferrer'>
+            {t('announcementContent.fillFeedbackForm')}
+          </a>
+        </Button>,
+      ]}
+    >
+      <p>{announcementContent.description}</p>
+      <TextWithIcon>
+        <ArrowUpOutlined /> {t('announcementContent.updates')}:
+      </TextWithIcon>
+      <ul>{renderList(announcementContent.updatesDetails)}</ul>
+      <TextWithIcon>
+        <FileTextOutlined /> {t('announcementContent.feedbackForm')}:
+      </TextWithIcon>
+      <ul>
+        <li>
+          <a href={t('feedbackFormUrl')} target='_blank' rel='noreferrer'>
+            {t('feedbackFormUrl')}
+          </a>
+        </li>
+      </ul>
+    </Modal>
+  );
+};
+
+export default EntryNotification;
diff --git a/nsysu_selector_helper/src/components/SectionHeader.tsx b/nsysu_selector_helper/src/components/SectionHeader.tsx
@@ -110,22 +110,22 @@ const SectionHeader: FC<HeaderProps> = ({
   const navTabs: MenuProps['items'] = [
     {
       key: 'all-courses',
-      label: t('all-courses'),
+      label: t('allCourses'),
       icon: <BookOutlined />,
     },
     {
       key: 'semester-compulsory',
-      label: t('semester-compulsory'),
+      label: t('semesterCompulsory'),
       icon: <BookFilled />,
     },
     {
       key: 'course-detective',
-      label: t('course-detective'),
+      label: t('courseDetective'),
       icon: <FileSearchOutlined />,
     },
     {
       key: 'selected-export',
-      label: t('selected-export'),
+      label: t('selectedExport'),
       icon: <FileDoneOutlined />,
     },
     {
@@ -191,7 +191,7 @@ const SectionHeader: FC<HeaderProps> = ({
         </MobileMenu>
       </HeaderContainer>
       <Drawer
-        title={t('selector-helper')}
+        title={t('selectorHelper')}
         placement='left'
         onClose={() => setDrawerOpen(false)}
         open={drawerOpen}

diff --git a/nsysu_selector_helper/src/i18n/locales/zh_TW/translation.json b/nsysu_selector_helper/src/i18n/locales/zh_TW/translation.json
@@ -1,9 +1,56 @@
 {
+  "version": "v6.0.0 alpha",
+  "feedbackFormUrl": "https://forms.gle/gFBZDgkSbj85zukP6",
+  "githubUrl": "https://github.com/CelleryLin/selector_helper_react",
   "loading": "載入中...",
-  "selector-helper": "中山大學課程選課小幫手",
-  "all-courses": "所有課程",
-  "semester-compulsory": "學期必修",
-  "course-detective": "課程偵探",
-  "selected-export": "已選匯出",
-  "announcements": "公告"
+  "selectorHelper": "中山大學課程選課小幫手",
+  "allCourses": "所有課程",
+  "semesterCompulsory": "學期必修",
+  "courseDetective": "課程偵探",
+  "selectedExport": "已選匯出",
+  "announcements": "公告",
+  "announcementContent": {
+    "description": "中山選課小助手迎來第三學期囉~ 感謝您使用這個系統，也獲得不錯的流量。您寶貴的意見我們都有收到，並會改善更新，感謝各位支持與回饋了！",
+    "notes": [
+      "此網站式依據電腦的使用者體驗設計，建議**使用電腦瀏覽**，近期有在進行手機版的大幅度改善，歡迎提出意見。",
+      "這是輔助大家選課的系統，**僅供參考**。",
+      "課程資料是爬蟲下來的靜態資料，若有校方**有異動**，本人尚未更新的話**請聯絡**，感謝。"
+    ],
+    "updates": "更新內容",
+    "updatesDetails": [
+      "自動選課改稱課程偵探，並且改成排序列表",
+      "新版前端完成了！手機版也有了！",
+      "新增課程偵探時間點擊篩選功能",
+      "一鍵登記與已選課程合併了",
+      "每小時自動更新課程資料",
+      "新增課程偵探排序功能",
+      "新增匯入與匯出功能",
+      "優化課程動態渲染",
+      "可以收起課表了"
+    ],
+    "features": [
+      "課表動態更新",
+      "一鍵加入必修課",
+      "更強大的篩選器以及智慧搜尋",
+      "本學期學程搜尋",
+      "顯示衝堂",
+      "自動填課目前已經上線測試中！",
+      "一鍵登記選課 (其實沒有一鍵啦)",
+      "Local Storage 關閉瀏覽器自動儲存選課資料",
+      "每小時自動更新課程資料"
+    ],
+    "knownIssues": [
+      "Safari 瀏覽器有可能會出現渲染問題，有任何選染錯誤請聯絡我，並註記您的瀏覽器版本。(如果願意擔當測試者，請在表單說想當 IOS 前端測試，不勝感激)",
+      "Bundle 初始化載入較慢，目前考慮使用 Vite 進行重構，如果有任何使用上卡頓的問題，請幫忙填寫表單反饋，並註記位置。"
+    ],
+    "contactEmail": "[email protected]",
+    "copyright": [
+      "By Cellery Lin and whats2000. MEME113 ",
+      "Copyright © 2023 Cellery Lin and whats2000. All rights reserved."
+    ],
+    "dontShowAgain": "不再顯示",
+    "close": "關閉",
+    "fillFeedbackForm": "填寫回饋表單",
+    "feedbackForm": "回饋表單"
+  }
 }