Add error view to Optimiser (#4074)

leslieyip02 · web-flow · commit 6d271bdf1185 · 2025-06-27T20:59:39.000+08:00
* feat: add ApiError view to optimiser

* feat: add prompt text to error view

* fix: make lesson slot nullable
diff --git a/website/src/apis/optimiser.ts b/website/src/apis/optimiser.ts
@@ -1,8 +1,8 @@
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
 
 const api = '/api/optimiser/optimise';
 
-interface OptimiseRequest {
+export interface OptimiseRequest {
   modules: string[];
   acadYear: string;
   acadSem: number;
@@ -14,38 +14,30 @@ interface OptimiseRequest {
   lunchEnd: string;
 }
 
-interface OptimiseResponse {
+export interface LessonSlot {
+  DayIndex: number;
+  EndMin: number;
+  LessonKey: string | undefined;
+  StartMin: number;
+  classNo: string;
+  coordinates: { x: number; y: number };
+  day: string;
+  endTime: string;
+  lessonType: string;
+  startTime: string;
+  venue: string;
+}
+
+export interface OptimiseResponse {
   shareableLink?: string;
-  Assignments?: any;
-  DaySlots?: any[][];
+  Assignments?: { [lesson: string]: string };
+  DaySlots?: (LessonSlot | null)[][];
+
+  // TODO: implement type
   [key: string]: any;
 }
 
 export const sendOptimiseRequest = async (
-  modules: string[],
-  acadYear: string,
-  acadSem: number,
-  freeDays: string[],
-  earliestTime: string,
-  latestTime: string,
-  recordings: string[],
-  lunchStart: string,
-  lunchEnd: string,
-): Promise<OptimiseResponse | null> => {
-  const requestData: OptimiseRequest = {
-    modules,
-    acadYear,
-    acadSem,
-    freeDays,
-    earliestTime,
-    latestTime,
-    recordings,
-    lunchStart,
-    lunchEnd,
-  };
-
-  return axios
-    .post<OptimiseResponse>(api, requestData)
-    .then((resp) => resp.data)
-    .catch(() => null);
-};
+  params: OptimiseRequest,
+): Promise<OptimiseResponse | AxiosError> =>
+  axios.post<OptimiseResponse>(api, params).then((resp) => resp.data);
diff --git a/website/src/views/errors/ApiError.tsx b/website/src/views/errors/ApiError.tsx
@@ -7,9 +7,12 @@ import { breakpointUp } from 'utils/css';
 
 import styles from './ErrorPage.scss';
 
+const defaultPromptText = 'This could be because your device is offline or NUSMods is down :(';
+
 type Props = {
   retry?: () => void;
   dataName?: string;
+  promptText?: string;
 };
 
 export default class ApiError extends React.PureComponent<Props> {
@@ -30,7 +33,7 @@ export default class ApiError extends React.PureComponent<Props> {
   };
 
   override render() {
-    const { retry, dataName } = this.props;
+    const { retry, dataName, promptText } = this.props;
     const message = dataName ? `We can't load the ${dataName}` : "We can't connect to NUSMods";
 
     return (
@@ -46,7 +49,7 @@ export default class ApiError extends React.PureComponent<Props> {
             <span className={styles.expr}>Oh no...</span> {message}
           </h1>
 
-          <p>This could be because your device is offline or NUSMods is down :(</p>
+          <p>{promptText ?? defaultPromptText}</p>
           {/* TODO: Remove hacky message after we figure out what is wrong with Elastic Search. */}
           {dataName === 'course information' && (
             <>
diff --git a/website/src/views/optimiser/OptimiserButton.tsx b/website/src/views/optimiser/OptimiserButton.tsx
@@ -1,123 +1,56 @@
-import React, { useState } from 'react';
+import React from 'react';
 import classnames from 'classnames';
 import { Zap } from 'react-feather';
-import { sendOptimiseRequest } from 'apis/optimiser';
 import { FreeDayConflict, LessonOption } from './types';
 import styles from './OptimiserButton.scss';
 
 interface OptimiserButtonProps {
   freeDayConflicts: FreeDayConflict[];
   lessonOptions: LessonOption[];
-  acadYear: string;
-  activeSemester: number;
-  selectedFreeDays: Set<string>;
-  earliestTime: string;
-  latestTime: string;
-  recordings: string[];
-  earliestLunchTime: string;
-  latestLunchTime: string;
-  timetable: Record<string, any>;
-  setShareableLink: (shareableLink: string) => void;
-  setUnAssignedLessons: (unAssignedLessons: LessonOption[]) => void;
+  isOptimising: boolean;
+  onClick: () => void;
 }
 
 const OptimiserButton: React.FC<OptimiserButtonProps> = ({
   freeDayConflicts,
   lessonOptions,
-  acadYear,
-  activeSemester,
-  selectedFreeDays,
-  earliestTime,
-  latestTime,
-  recordings,
-  earliestLunchTime,
-  latestLunchTime,
-  timetable,
-  setShareableLink,
-  setUnAssignedLessons,
-}) => {
-  const [isOptimising, setIsOptimising] = useState(false);
-
-  const optimiseTimetable = async () => {
-    try {
-      setIsOptimising(true);
-      setShareableLink(''); // Reset shareable link
-      const modulesList = Object.keys(timetable);
-      const acadYearFormatted = `${acadYear.split('/')[0]}-${acadYear.split('/')[1]}`;
-
-      const data = await sendOptimiseRequest(
-        modulesList,
-        acadYearFormatted,
-        activeSemester,
-        Array.from(selectedFreeDays),
-        earliestTime,
-        latestTime,
-        recordings,
-        earliestLunchTime,
-        latestLunchTime,
-      );
-
-      if (data && data.shareableLink) {
-        setShareableLink(data.shareableLink);
-        const assignedLessons = new Set<string>();
-
-        if (data.Assignments !== null && data.DaySlots) {
-          data.DaySlots.forEach((day: any) => {
-            day.forEach((slot: any) => {
-              if (slot.LessonKey) {
-                const moduleCode = slot.LessonKey.split('|')[0];
-                const lessonType = slot.LessonKey.split('|')[1];
-                assignedLessons.add(`${moduleCode} ${lessonType}`);
-              }
-            });
-          });
-        }
-
-        setUnAssignedLessons(
-          lessonOptions.filter((lesson) => !assignedLessons.has(lesson.displayText)),
-        );
-      }
-    } finally {
-      setIsOptimising(false);
-    }
-  };
-
-  return (
-    <div className={styles.optimizeButtonSection}>
-      <button
-        type="button"
-        className={classnames(
-          'btn',
-          styles.optimizeButton,
-          freeDayConflicts.length > 0 || isOptimising || lessonOptions.length === 0
-            ? styles.disabled
-            : styles.enabled,
-          {
-            disabled: isOptimising || freeDayConflicts.length > 0 || lessonOptions.length === 0,
-          },
-        )}
-        onClick={() => {
-          optimiseTimetable();
-        }}
-      >
-        {!isOptimising ? (
-          <Zap
-            size={20}
-            fill={freeDayConflicts.length > 0 || lessonOptions.length === 0 ? '#69707a' : '#ff5138'}
-          />
-        ) : (
-          <span className={styles.optimizeButtonSpinner}>
-            {isOptimising && <div className={styles.grower} />}
-          </span>
-        )}
-        {isOptimising ? 'Searching and optimising...' : 'Optimise Timetable'}
-      </button>
-      <div className={styles.estimateTime}>
-        <div>estimated time:</div>
-        <div className={styles.estimateTimeValue}>5s - 40s</div>
-      </div>
+  isOptimising,
+  onClick,
+}) => (
+  <div className={styles.optimizeButtonSection}>
+    <button
+      type="button"
+      className={classnames(
+        'btn',
+        styles.optimizeButton,
+        freeDayConflicts.length > 0 || isOptimising || lessonOptions.length === 0
+          ? styles.disabled
+          : styles.enabled,
+        {
+          disabled: isOptimising || freeDayConflicts.length > 0 || lessonOptions.length === 0,
+        },
+      )}
+      onClick={() => {
+        onClick();
+      }}
+    >
+      {!isOptimising ? (
+        <Zap
+          size={20}
+          fill={freeDayConflicts.length > 0 || lessonOptions.length === 0 ? '#69707a' : '#ff5138'}
+        />
+      ) : (
+        <span className={styles.optimizeButtonSpinner}>
+          {isOptimising && <div className={styles.grower} />}
+        </span>
+      )}
+      {isOptimising ? 'Searching and optimising...' : 'Optimise Timetable'}
+    </button>
+    <div className={styles.estimateTime}>
+      <div>estimated time:</div>
+      <div className={styles.estimateTimeValue}>5s - 40s</div>
     </div>
-  );
-};
+  </div>
+);
 
 export default OptimiserButton;
diff --git a/website/src/views/optimiser/OptimiserContent.tsx b/website/src/views/optimiser/OptimiserContent.tsx
@@ -4,7 +4,10 @@ import { getSemesterTimetableColors, getSemesterTimetableLessons } from 'selecto
 import { State } from 'types/state';
 import { ColorMapping } from 'types/reducers';
 import { getModuleTimetable } from 'utils/modules';
+import { LessonSlot, OptimiseRequest, OptimiseResponse, sendOptimiseRequest } from 'apis/optimiser';
 import Title from 'views/components/Title';
+import { flatten } from 'lodash';
+import ApiError from 'views/errors/ApiError';
 import styles from './OptimiserContent.scss';
 import OptimiserHeader from './OptimiserHeader';
 import OptimiserForm from './OptimiserForm';
@@ -30,6 +33,10 @@ const OptimiserContent: React.FC = () => {
   const [shareableLink, setShareableLink] = useState<string>('');
   const [hasSaturday, setHasSaturday] = useState<boolean>(false);
 
+  // button
+  const [isOptimising, setIsOptimising] = useState<boolean>(false);
+  const [error, setError] = useState<Error | null>(null);
+
   // Generate lesson options from current timetable
   const lessonOptions = useMemo(() => {
     const options: LessonOption[] = [];
@@ -159,6 +166,57 @@ const OptimiserContent: React.FC = () => {
     });
   }, []);
 
+  const buttonOnClick = async () => {
+    setError(null);
+    setShareableLink(''); // Reset shareable link
+
+    const modulesList = Object.keys(timetable);
+    const acadYearFormatted = `${acadYear.split('/')[0]}-${acadYear.split('/')[1]}`;
+
+    const params: OptimiseRequest = {
+      modules: modulesList,
+      acadYear: acadYearFormatted,
+      acadSem: activeSemester,
+      freeDays: Array.from(selectedFreeDays),
+      earliestTime,
+      latestTime,
+      recordings,
+      lunchStart: earliestLunchTime,
+      lunchEnd: latestLunchTime,
+    };
+
+    sendOptimiseRequest(params)
+      .then(parseData)
+      .catch((e) => setError(e))
+      .finally(() => setIsOptimising(false));
+  };
+
+  const parseData = async (data: OptimiseResponse | null) => {
+    const link = data?.shareableLink;
+    if (!link) {
+      return;
+    }
+    setShareableLink(link);
+
+    const daySlots = data.DaySlots ?? [];
+    const assignedLessons = new Set(
+      flatten(daySlots)
+        .map((slot: LessonSlot | null) => {
+          const lessonKey = slot?.LessonKey;
+          if (!lessonKey) {
+            return null;
+          }
+          const [moduleCode, lessonType] = lessonKey.split('|');
+          return `${moduleCode} ${lessonType}`;
+        })
+        .filter((lesson) => !!lesson),
+    );
+
+    setUnAssignedLessons(
+      lessonOptions.filter((lesson) => !assignedLessons.has(lesson.displayText)),
+    );
+  };
+
   const openOptimisedTimetable = () => {
     if (shareableLink) {
       window.open(shareableLink, '_blank');
@@ -195,19 +253,17 @@ const OptimiserContent: React.FC = () => {
       <OptimiserButton
         freeDayConflicts={freeDayConflicts}
         lessonOptions={lessonOptions}
-        acadYear={acadYear}
-        activeSemester={activeSemester}
-        selectedFreeDays={selectedFreeDays}
-        earliestTime={earliestTime}
-        latestTime={latestTime}
-        recordings={recordings}
-        earliestLunchTime={earliestLunchTime}
-        latestLunchTime={latestLunchTime}
-        timetable={timetable}
-        setShareableLink={setShareableLink}
-        setUnAssignedLessons={setUnAssignedLessons}
+        isOptimising={isOptimising}
+        onClick={buttonOnClick}
       />
 
+      {!!error && (
+        <ApiError
+          dataName="timetable optimiser"
+          promptText="This feature is in Beta, so we would really appreciate your feedback! "
+        />
+      )}
+
       {/* Optimiser results */}
       <OptimiserResults
         shareableLink={shareableLink}
