feat(website): Add TA mode (#3875)

Co-authored-by: Zhao Wei Liew <[email protected]>

Author: leslieyip02

docker-compose.prod.yml

@@ -41,7 +41,7 @@ services:
       - NODE_ENV=production
       - PORT=8082
       - HOST=0.0.0.0
-      - PAGE=http://website:8081
+      - PAGE=http://website:8081/timetable-only/
       - CHROME_EXECUTABLE=/usr/bin/chromium-browser
     restart: on-failure
     labels:

docker-compose.yml

@@ -40,7 +40,7 @@ services:
       - NODE_ENV=development
       - PORT=8082
       - HOST=0.0.0.0
-      - PAGE=http://website:8081
+      - PAGE=http://website:8081/timetable-only/
       - CHROME_EXECUTABLE=/usr/bin/chromium-browser
     user: ${CURRENT_UID:-1000:1000}
     restart: on-failure

export/Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:12-alpine
+FROM node:18-alpine
 
 # Installs Chromium package.
 RUN apk update && apk upgrade && \

export/Dockerfile.prod

@@ -1,4 +1,4 @@
-FROM node:12-alpine
+FROM node:18-alpine
 
 # Installs Chromium package.
 RUN apk update && apk upgrade && \

export/src/data.ts

@@ -65,6 +65,10 @@ export function validateExportData(data: ExportData) {
     Joi.string(),
     Joi.object().pattern(Joi.string(), Joi.string()),
   );
+  const taModulesConfigSchema = Joi.object().pattern(
+    Joi.string(),
+    Joi.array().length(2).ordered(Joi.string(), Joi.string()),
+  );
   const themeSchema = Joi.object({
     id: Joi.string(),
     timetableOrientation: Joi.string().valid('HORIZONTAL', 'VERTICAL'),
@@ -75,6 +79,7 @@ export function validateExportData(data: ExportData) {
     timetable: timetableSchema,
     colors: Joi.object().pattern(Joi.string(), Joi.number().integer().min(0)),
     hidden: Joi.array().items(Joi.string()),
+    ta: taModulesConfigSchema,
     settings: Joi.object({
       colorScheme: Joi.string().valid('LIGHT_COLOR_SCHEME', 'DARK_COLOR_SCHEME'),
     }),

export/src/render.ts

@@ -28,6 +28,7 @@ export async function launch() {
     headless: true,
     executablePath: config.chromeExecutable,
     devtools: !!process.env.DEVTOOLS,
+    args: ['--disable-gpu'],
   });
 
   const page = await browser.newPage();

export/src/types.ts

@@ -3,19 +3,27 @@ import type { Page } from 'puppeteer-core';
 // These types are duplicated from `website/`.
 // TODO: Move these types to a shared package.
 export type TimetableOrientation = 'HORIZONTAL' | 'VERTICAL';
-export type Semester = number;
-export type SemTimetableConfig = {
-  [moduleCode: string]: ModuleLessonConfig;
-};
 export type ColorIndex = number;
 export type ColorMapping = { [moduleCode: string]: ColorIndex };
-export type ModuleCode = string;
 export type ThemeState = Readonly<{
   id: string;
   timetableOrientation: TimetableOrientation;
   showTitle: boolean;
 }>;
 export type ColorScheme = 'LIGHT_COLOR_SCHEME' | 'DARK_COLOR_SCHEME';
+export type Semester = number;
+export type ClassNo = string; // E.g. "1", "A"
+export type LessonType = string; // E.g. "Lecture", "Tutorial"
+export type ModuleCode = string; // E.g. "CS3216"
+export type SemTimetableConfig = {
+  [moduleCode: ModuleCode]: ModuleLessonConfig;
+};
+export interface ModuleLessonConfig {
+  [lessonType: LessonType]: ClassNo;
+}
+export type TaModulesConfig = {
+  [moduleCode: ModuleCode]: [lessonType: LessonType, classNo: ClassNo][];
+};
 
 // `ExportData` is duplicated from `website/src/types/export.ts`.
 export interface ExportData {
@@ -29,10 +37,6 @@ export interface ExportData {
   };
 }
 
-export interface ModuleLessonConfig {
-  [lessonType: string]: string;
-}
-
 export interface State {
   data: ExportData;
   page: Page;

website/src/actions/export.ts

@@ -1,10 +1,14 @@
 import type { Module, ModuleCode, Semester } from 'types/modules';
 import type { ExportData } from 'types/export';
 import type { Dispatch, GetState } from 'types/redux';
-import { hydrateSemTimetableWithLessons } from 'utils/timetables';
+import {
+  hydrateSemTimetableWithLessons,
+  hydrateTaModulesConfigWithLessons,
+} from 'utils/timetables';
 import { captureException } from 'utils/error';
 import retryImport from 'utils/retryImport';
 import { getSemesterTimetableLessons } from 'selectors/timetables';
+import { TaModulesConfig } from 'types/timetables';
 import { SET_EXPORTED_DATA } from './constants';
 
 function downloadUrl(blob: Blob, filename: string) {
@@ -31,12 +35,28 @@ export function downloadAsIcal(semester: Semester) {
       .then(([ical, icalUtils]) => {
         const state = getState();
         const { modules } = state.moduleBank;
-        const hiddenModules: ModuleCode[] = state.timetables.hidden[semester] || [];
+        const hiddenModules: ModuleCode[] = state.timetables.hidden[semester] ?? [];
+        const taModules: TaModulesConfig = state.timetables.ta[semester] ?? {};
 
         const timetable = getSemesterTimetableLessons(state)(semester);
         const timetableWithLessons = hydrateSemTimetableWithLessons(timetable, modules, semester);
+        const timetableWithTaLessons = hydrateTaModulesConfigWithLessons(
+          taModules,
+          modules,
+          semester,
+        );
+        const filteredTimetableWithLessons = {
+          ...timetableWithLessons,
+          ...timetableWithTaLessons,
+        };
 
-        const events = icalUtils.default(semester, timetableWithLessons, modules, hiddenModules);
+        const events = icalUtils.default(
+          semester,
+          filteredTimetableWithLessons,
+          modules,
+          hiddenModules,
+          taModules,
+        );
         const cal = ical.default({
           domain: 'nusmods.com',
           prodId: '//NUSMods//NUSMods//EN',

website/src/actions/timetables.ts

@@ -1,6 +1,12 @@
 import { each, flatMap } from 'lodash';
 
-import type { ColorIndex, Lesson, ModuleLessonConfig, SemTimetableConfig } from 'types/timetables';
+import type {
+  ColorIndex,
+  Lesson,
+  ModuleLessonConfig,
+  SemTimetableConfig,
+  TaModulesConfig,
+} from 'types/timetables';
 import type { Dispatch, GetState } from 'types/redux';
 import type { ColorMapping } from 'types/reducers';
 import type { ClassNo, LessonType, Module, ModuleCode, Semester } from 'types/modules';
@@ -19,17 +25,18 @@ import { getModuleTimetable } from 'utils/modules';
 export const SET_TIMETABLE = 'SET_TIMETABLE' as const;
 export const ADD_MODULE = 'ADD_MODULE' as const;
 export const SET_HIDDEN_IMPORTED = 'SET_HIDDEN_IMPORTED' as const;
-export const HIDDEN_IMPORTED_SEM = 'HIDDEN_IMPORTED_SEM' as const;
+export const SET_TA_IMPORTED = 'SET_TA_IMPORTED' as const;
 export const Internal = {
   setTimetable(
     semester: Semester,
     timetable: SemTimetableConfig | undefined,
     colors?: ColorMapping,
     hiddenModules?: ModuleCode[],
+    taModules?: TaModulesConfig,
   ) {
     return {
       type: SET_TIMETABLE,
-      payload: { semester, timetable, colors, hiddenModules },
+      payload: { semester, timetable, colors, hiddenModules, taModules },
     };
   },
 
@@ -165,7 +172,8 @@ export function setTimetable(
         semester,
         validatedTimetable,
         colors,
-        getState().timetables.hidden[HIDDEN_IMPORTED_SEM] || [],
+        getState().timetables.hidden[semester] ?? [],
+        getState().timetables.ta[semester] ?? {},
       ),
     );
   };
@@ -211,14 +219,25 @@ export function fetchTimetableModules(timetables: SemTimetableConfig[]) {
   };
 }
 
-export function setHiddenModulesFromImport(hiddenModules: ModuleCode[]) {
-  return (dispatch: Dispatch) => dispatch(setHiddenImported(hiddenModules));
+export function setHiddenModulesFromImport(semester: Semester, hiddenModules: ModuleCode[]) {
+  return (dispatch: Dispatch) => dispatch(setHiddenImported(semester, hiddenModules));
 }
 
-export function setHiddenImported(hiddenModules: ModuleCode[]) {
+export function setHiddenImported(semester: Semester, hiddenModules: ModuleCode[]) {
   return {
     type: SET_HIDDEN_IMPORTED,
-    payload: { semester: HIDDEN_IMPORTED_SEM, hiddenModules },
+    payload: { semester, hiddenModules },
+  };
+}
+
+export function setTaModulesFromImport(semester: Semester, taModules: TaModulesConfig) {
+  return (dispatch: Dispatch) => dispatch(setTaImported(semester, taModules));
+}
+
+export function setTaImported(semester: Semester, taModules: TaModulesConfig) {
+  return {
+    type: SET_TA_IMPORTED,
+    payload: { semester, taModules },
   };
 }
 
@@ -253,3 +272,37 @@ export function showLessonInTimetable(semester: Semester, moduleCode: ModuleCode
     payload: { moduleCode, semester },
   };
 }
+
+export const ADD_TA_LESSON_IN_TIMETABLE = 'ADD_TA_LESSON_IN_TIMETABLE' as const;
+export function addTaLessonInTimetable(
+  semester: Semester,
+  moduleCode: ModuleCode,
+  lessonType: LessonType,
+  classNo: ClassNo,
+) {
+  return {
+    type: ADD_TA_LESSON_IN_TIMETABLE,
+    payload: { semester, moduleCode, lessonType, classNo },
+  };
+}
+
+export const REMOVE_TA_LESSON_IN_TIMETABLE = 'REMOVE_TA_LESSON_IN_TIMETABLE' as const;
+export function removeTaLessonInTimetable(
+  semester: Semester,
+  moduleCode: ModuleCode,
+  lessonType: LessonType,
+  classNo: ClassNo,
+) {
+  return {
+    type: REMOVE_TA_LESSON_IN_TIMETABLE,
+    payload: { semester, moduleCode, lessonType, classNo },
+  };
+}
+
+export const DISABLE_TA_MODE_IN_TIMETABLE = 'DISABLE_TA_MODE_IN_TIMETABLE' as const;
+export function disableTaModeInTimetable(semester: Semester, moduleCode: ModuleCode) {
+  return {
+    type: DISABLE_TA_MODE_IN_TIMETABLE,
+    payload: { semester, moduleCode },
+  };
+}

website/src/apis/export.ts

@@ -10,6 +10,7 @@ export type ExportOptions = {
   pixelRatio?: number;
 };
 
+// Replace with http://localhost:8080/export when testing export
 const baseUrl = 'https://export.nusmods.com/api/export';
 
 function serializeState(