From b46cc61094ba8227cef3f807bd30e5021659098e Mon Sep 17 00:00:00 2001
From: E-Liang Tan <eliang@eliangtan.com>
Date: Wed, 3 Mar 2021 22:23:39 +0800
Subject: [PATCH] MPE: Add FAQ and fix crashing module details fetch (#3261)

* Add RO's FAQ link

* Delete crashing module details fetch

* Fuse mpeModules mods into submission so that mpe submisisons have module credits
---
 website/src/apis/mpe.ts                       | 29 +++----------------
 website/src/views/mpe/MpeContainer.tsx        |  8 +++++
 .../src/views/mpe/form/MpeFormContainer.tsx   | 22 ++++++++++++--
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/website/src/apis/mpe.ts b/website/src/apis/mpe.ts
index 34218db576..f0549a8a0c 100644
--- a/website/src/apis/mpe.ts
+++ b/website/src/apis/mpe.ts
@@ -4,8 +4,7 @@ import getLocalStorage from 'storage/localStorage';
 import { Location, History } from 'history';
 import { produce } from 'immer';
 import NUSModsApi from './nusmods';
-import { MpeSubmission, MpePreference, MpeModule } from '../types/mpe';
-import type { Module, ModuleCode } from '../types/modules';
+import { MpeSubmission, MpeModule } from '../types/mpe';
 import { NUS_AUTH_TOKEN } from '../storage/keys';
 
 export class MpeSessionExpiredError extends Error {}
@@ -60,9 +59,6 @@ export const fetchMpeModuleList = (): Promise<MpeModule[]> =>
   // TODO: Check with NUS if we should use MPE_AY here instead
   axios.get<MpeModule[]>(NUSModsApi.mpeModuleListUrl()).then((resp) => resp.data);
 
-export const fetchModuleDetails = (moduleCode: ModuleCode): Promise<Module> =>
-  axios.get<Module>(NUSModsApi.moduleDetailsUrl(moduleCode)).then((resp) => resp.data);
-
 export const getSSOLink = (): Promise<string> =>
   mpe
     .get(SSO_PATH, {
@@ -70,26 +66,9 @@ export const getSSOLink = (): Promise<string> =>
     })
     .then((resp) => resp.data);
 
-export const getMpeSubmission = (): Promise<MpeSubmission> => {
-  let submission: MpeSubmission;
-  return mpe
-    .get<MpeSubmission>(MPE_PATH)
-    .then((resp) => {
-      submission = resp.data;
-      return Promise.all<Module>(
-        submission.preferences.map((p) => fetchModuleDetails(p.moduleCode)),
-      );
-    })
-    .then((modules) => ({
-      ...submission,
-      preferences: modules.map<MpePreference>((m, index) => ({
-        moduleTitle: m.title,
-        moduleCode: m.moduleCode,
-        moduleType: submission.preferences[index].moduleType,
-        moduleCredits: parseInt(m.moduleCredit, 10),
-      })),
-    }));
-};
+// TODO: Replace data fetched from MPE server with latest data from MPE module list
+export const getMpeSubmission = (): Promise<MpeSubmission> =>
+  mpe.get<MpeSubmission>(MPE_PATH).then((resp) => resp.data);
 
 export const updateMpeSubmission = (submission: MpeSubmission): Promise<void> => {
   if (submission.intendedMCs < 0) {
diff --git a/website/src/views/mpe/MpeContainer.tsx b/website/src/views/mpe/MpeContainer.tsx
index 3f616f4bb0..e09b7934c0 100644
--- a/website/src/views/mpe/MpeContainer.tsx
+++ b/website/src/views/mpe/MpeContainer.tsx
@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { enableMpe } from 'featureFlags';
 import Modal from 'views/components/Modal';
 import type { MpeSubmission } from 'types/mpe';
+import ExternalLink from 'views/components/ExternalLink';
 import {
   getLoginState,
   getSSOLink,
@@ -85,6 +86,13 @@ const MpeContainer: React.FC = () => {
             the ModReg Exercise, in cases where the demand exceeds the available quota and students
             have the same Priority Score for a particular module.
           </p>
+          <p>
+            For further questions, please refer to this{' '}
+            <ExternalLink href="https://www.nus.edu.sg/registrar/docs/info/mpe/MPE-FAQs.pdf">
+              FAQ
+            </ExternalLink>{' '}
+            provided by NUS Registrar's Office.
+          </p>
           <div>
             {isLoggedIn ? (
               <MpeFormContainer getSubmission={getSubmission} updateSubmission={updateSubmission} />
diff --git a/website/src/views/mpe/form/MpeFormContainer.tsx b/website/src/views/mpe/form/MpeFormContainer.tsx
index 6680c4ed53..1339412c56 100644
--- a/website/src/views/mpe/form/MpeFormContainer.tsx
+++ b/website/src/views/mpe/form/MpeFormContainer.tsx
@@ -23,9 +23,25 @@ const MpeFormContainer: React.FC<Props> = ({ getSubmission, updateSubmission })
     setIsInitialLoad(true);
 
     Promise.all([fetchMpeModuleList(), getSubmission()])
-      .then((data) => {
-        setMpeModuleList(data[0]);
-        setSubmission(data[1]);
+      .then(([fetchedMpeModuleList, fetchedSubmission]) => {
+        setMpeModuleList(fetchedMpeModuleList);
+        setSubmission({
+          ...fetchedSubmission,
+          // Replace data fetched from MPE server with latest data from MPE module list
+          // TODO: Optimize. This does an linear time lookup for each preference
+          preferences: fetchedSubmission.preferences.map((preference) => {
+            const mpeModule = fetchedMpeModuleList.find(
+              (m) => m.moduleCode === preference.moduleCode,
+            );
+            if (!mpeModule) return preference;
+            return {
+              ...preference,
+              moduleTitle: mpeModule.title,
+              moduleCode: mpeModule.moduleCode,
+              moduleCredits: parseInt(mpeModule.moduleCredit, 10),
+            };
+          }),
+        });
       })
       .catch((err) => {
         // this is a temporary fix