Add CPEx notifications (#3665)

* Add CPEx notifications

* Show minutes in notification text

Author: kokrui

website/src/config/index.ts

@@ -12,6 +12,7 @@ export const regPeriods = [
   'Select Tutorials / Labs',
   'Add / Swap Tutorials',
   'Submit Course Requests',
+  'Course Planning Exercise (CPEx)',
 ] as const;
 export type RegPeriodType = (typeof regPeriods)[number];
 
@@ -75,8 +76,8 @@ export function convertModRegDates(roundData: (typeof modRegData)[ScheduleType])
   return roundData.map((data) => ({
     ...data,
     type: data.type as RegPeriodType,
-    start: format(new Date(data.start), 'EEEE do LLLL, haaaa'),
-    end: format(new Date(data.end), 'EEEE do LLLL, haaaa'),
+    start: format(new Date(data.start), 'EEEE do LLLL, h:mm aaaa'),
+    end: format(new Date(data.end), 'EEEE do LLLL, h:mm aaaa'),
     startDate: new Date(data.start),
     endDate: new Date(data.end),
   }));

website/src/data/modreg-schedule.json

@@ -41,6 +41,12 @@
       "name": "",
       "start": "2024-01-22T09:00:00+08:00",
       "end": "2024-01-23T17:00:00+08:00"
+    },
+    {
+      "type": "Course Planning Exercise (CPEx)",
+      "name": "",
+      "start": "2024-03-11T00:00:00+08:00",
+      "end": "2024-03-15T23:59:59+08:00"
     }
   ],
   "Graduate": [
@@ -85,6 +91,12 @@
       "name": "",
       "start": "2024-01-22T09:00:00+08:00",
       "end": "2024-01-23T17:00:00+08:00"
+    },
+    {
+      "type": "Course Planning Exercise (CPEx)",
+      "name": "",
+      "start": "2024-03-11T00:00:00+08:00",
+      "end": "2024-03-15T23:59:59+08:00"
     }
   ]
 }

website/src/views/components/notfications/ModRegNotification.tsx

@@ -1,11 +1,11 @@
 import { FC, memo, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import { useHistory, NavLink } from 'react-router-dom';
 import { formatDistance } from 'date-fns';
 
 import type { State } from 'types/state';
 
-import config, { RegPeriod } from 'config';
+import config, { RegPeriod, RegPeriodType } from 'config';
 import { dismissModregNotification } from 'actions/settings';
 import { openNotification } from 'actions/app';
 import { getRounds } from 'selectors/modreg';
@@ -39,6 +39,16 @@ const NotificationText: FC<{
   );
 };
 
+const NotificationLink: FC<{
+  roundType: RegPeriodType;
+  children: React.ReactNode;
+}> = ({ roundType, children }) =>
+  roundType === 'Course Planning Exercise (CPEx)' ? (
+    <NavLink to="/cpex">{children}</NavLink>
+  ) : (
+    <ExternalLink href={MOD_REG_URL}>{children}</ExternalLink>
+  );
+
 const ModRegNotification: FC<{
   // True only on the settings page since we don't want
   // users accidentally dismissing the preview notification
@@ -77,11 +87,11 @@ const ModRegNotification: FC<{
     <div className={styles.container}>
       {rounds.map((round) => (
         <div className={styles.notificationWrapper} key={round.type}>
-          <ExternalLink href={MOD_REG_URL}>
+          <NotificationLink roundType={round.type}>
             <div className={styles.notification}>
               <NotificationText useLineBreaks round={round} now={forceTimer() || new Date()} />
             </div>
-          </ExternalLink>
+          </NotificationLink>
 
           {!dismissible && <CloseButton className={styles.close} onClick={() => dismiss(round)} />}
         </div>