Add menu button to add module from planner to timetable (#3729)

* Add menu button to add module from planner to timetable

* Add menu button to add module from planner to timetable

* Add to timetable becomes view in timetable after adding module

* Fix nit

---------

Co-authored-by: Ravern Koh <[email protected]>

Author: leslieyip02

website/src/views/planner/ModuleMenu.test.tsx

@@ -3,13 +3,24 @@ import ModuleMenu from './ModuleMenu';
 
 import styles from './PlannerModule.scss';
 
-function makeModuleMenu() {
+function makeModuleMenu(isInTimetable: boolean) {
   const removeModule = jest.fn();
   const editCustomData = jest.fn();
+  const addModuleToTimetable = jest.fn();
+  const viewSemesterTimetable = jest.fn();
   return {
     removeModule,
     editCustomData,
-    wrapper: mount(<ModuleMenu removeModule={removeModule} editCustomData={editCustomData} />),
+    addModuleToTimetable,
+    wrapper: mount(
+      <ModuleMenu
+        isInTimetable={isInTimetable}
+        removeModule={removeModule}
+        editCustomData={editCustomData}
+        addModuleToTimetable={addModuleToTimetable}
+        viewSemesterTimetable={viewSemesterTimetable}
+      />,
+    ),
   };
 }
 
@@ -26,16 +37,32 @@ function isMenuRight(wrapper: ReactWrapper) {
 }
 
 test('should show button only on render', () => {
-  const { wrapper } = makeModuleMenu();
+  const { wrapper } = makeModuleMenu(false);
   expect(findButton(wrapper).exists()).toBe(true);
 });
 
 test('should show dropdown when button is clicked', () => {
-  const { wrapper } = makeModuleMenu();
+  const { wrapper } = makeModuleMenu(false);
   wrapper.find('button').at(0).simulate('click');
   expect(isExpanded(wrapper).exists()).toBe(true);
 });
 
+test('should show add to timetable if module is not included', () => {
+  const { wrapper } = makeModuleMenu(false);
+  wrapper.find('button').at(0).simulate('click');
+  expect(wrapper.text()).toContain('Edit Unit and Title');
+  expect(wrapper.text()).toContain('Add to Timetable');
+  expect(wrapper.text()).toContain('Remove');
+});
+
+test('should show view in timetable if module is included', () => {
+  const { wrapper } = makeModuleMenu(true);
+  wrapper.find('button').at(0).simulate('click');
+  expect(wrapper.text()).toContain('Edit Unit and Title');
+  expect(wrapper.text()).toContain('View in Timetable');
+  expect(wrapper.text()).toContain('Remove');
+});
+
 test('should fix its overflow given a small window innerwidth', () => {
   Object.defineProperty(window, 'innerHeight', {
     writable: true,
@@ -44,7 +71,7 @@ test('should fix its overflow given a small window innerwidth', () => {
   });
   window.dispatchEvent(new Event('resize'));
 
-  const { wrapper } = makeModuleMenu();
+  const { wrapper } = makeModuleMenu(false);
   wrapper.find('button').at(0).simulate('click');
   expect(isMenuRight(wrapper).exists()).toBe(true);
 });

website/src/views/planner/ModuleMenu.tsx

@@ -6,8 +6,12 @@ import classnames from 'classnames';
 import styles from './PlannerModule.scss';
 
 type Props = {
+  readonly isInTimetable?: boolean;
+
   readonly removeModule: () => void;
   readonly editCustomData: () => void;
+  readonly addModuleToTimetable: () => void;
+  readonly viewSemesterTimetable: () => void;
 };
 
 type MenuItem = {
@@ -23,6 +27,9 @@ const ModuleMenu = memo((props: Props) => {
 
   const menuItems: MenuItem[] = [
     { label: 'Edit Unit and Title', action: props.editCustomData },
+    props.isInTimetable
+      ? { label: 'View in Timetable', action: props.viewSemesterTimetable }
+      : { label: 'Add to Timetable', action: props.addModuleToTimetable },
     { label: 'Remove', action: props.removeModule, className: 'dropdown-item-danger' },
   ];
 

website/src/views/planner/PlannerContainer/PlannerContainer.tsx

@@ -25,6 +25,7 @@ import {
 } from 'actions/planner';
 import { toggleFeedback } from 'actions/app';
 import { fetchModule } from 'actions/moduleBank';
+import { addModule as addModuleToTimetable } from 'actions/timetables';
 import { getAcadYearModules, getExemptions, getIBLOCs, getPlanToTake } from 'selectors/planner';
 import Title from 'views/components/Title';
 import LoadingSpinner from 'views/components/LoadingSpinner';
@@ -52,6 +53,7 @@ export type Props = Readonly<{
   moveModule: (id: string, year: string, semester: Semester, index: number) => void;
   removeModule: (id: string) => void;
   setPlaceholderModule: (id: string, moduleCode: ModuleCode) => void;
+  addModuleToTimetable: (semester: Semester, module: ModuleCode) => void;
 }>;
 
 type SemesterModules = { [semester: string]: PlannerModuleInfo[] };
@@ -131,6 +133,9 @@ export class PlannerContainerComponent extends PureComponent<Props, State> {
     this.props.fetchModule(moduleCode);
   };
 
+  onAddModuleToTimetable = (semester: Semester, module: ModuleCode) =>
+    this.props.fetchModule(module).then(() => this.props.addModuleToTimetable(semester, module));
+
   closeAddCustomData = () => this.setState({ showCustomModule: null });
 
   closeSettingsModal = () => this.setState({ showSettings: false });
@@ -194,6 +199,7 @@ export class PlannerContainerComponent extends PureComponent<Props, State> {
       addCustomData: this.onAddCustomData,
       setPlaceholderModule: this.onSetPlaceholderModule,
       removeModule: this.props.removeModule,
+      addModuleToTimetable: this.onAddModuleToTimetable,
     };
 
     return (
@@ -306,6 +312,7 @@ const PlannerContainer = connect(mapStateToProps, {
   addModule: addPlannerModule,
   moveModule: movePlannerModule,
   removeModule: removePlannerModule,
+  addModuleToTimetable,
 })(PlannerContainerComponent);
 
 export default PlannerContainer;

website/src/views/planner/PlannerModule.tsx

@@ -27,6 +27,7 @@ type Props = Readonly<{
   placeholder?: PlannerPlaceholder;
   conflict?: Conflict | null;
   semester?: Semester;
+  isInTimetable?: boolean;
 
   // For draggable
   id: string;
@@ -36,6 +37,8 @@ type Props = Readonly<{
   removeModule: (id: string) => void;
   addCustomData: (moduleCode: ModuleCode) => void;
   setPlaceholderModule: (id: string, moduleCode: ModuleCode) => void;
+  addModuleToTimetable: (semester: Semester, module: ModuleCode) => void;
+  viewSemesterTimetable: () => void;
 }>;
 
 /**
@@ -50,6 +53,11 @@ const PlannerModule = memo<Props>((props) => {
     if (props.moduleCode) props.addCustomData(props.moduleCode);
   };
 
+  const addModuleToTimetable = () => {
+    if (props.semester && props.moduleCode)
+      props.addModuleToTimetable(props.semester, props.moduleCode);
+  };
+
   const renderConflict = (conflict: Conflict) => {
     switch (conflict.type) {
       case 'noInfo':
@@ -192,7 +200,13 @@ const PlannerModule = memo<Props>((props) => {
           {...provided.draggableProps}
           {...provided.dragHandleProps}
         >
-          <ModuleMenu removeModule={removeModule} editCustomData={editCustomData} />
+          <ModuleMenu
+            isInTimetable={props.isInTimetable}
+            removeModule={removeModule}
+            editCustomData={editCustomData}
+            addModuleToTimetable={addModuleToTimetable}
+            viewSemesterTimetable={props.viewSemesterTimetable}
+          />
 
           <div className={styles.moduleInfo}>
             <div className={styles.moduleName}>

website/src/views/planner/PlannerSemester.tsx

@@ -13,6 +13,10 @@ import {
   getSemesterName,
   getTotalMC,
 } from 'utils/planner';
+import { useSelector } from 'react-redux';
+import { getSemesterTimetableLessons } from 'selectors/timetables';
+import { useHistory } from 'react-router-dom';
+import { timetablePage } from 'views/routes/paths';
 import PlannerModule from './PlannerModule';
 import AddModule from './AddModule';
 import styles from './PlannerSemester.scss';
@@ -29,6 +33,7 @@ type Props = Readonly<{
   removeModule: (id: string) => void;
   addCustomData: (moduleCode: ModuleCode) => void;
   setPlaceholderModule: (id: string, moduleCode: ModuleCode) => void;
+  addModuleToTimetable: (semester: Semester, module: ModuleCode) => void;
 }>;
 
 function renderSemesterMeta(plannerModules: PlannerModuleInfo[]) {
@@ -57,12 +62,23 @@ const PlannerSemester: React.FC<Props> = ({
   removeModule,
   addCustomData,
   setPlaceholderModule,
+  addModuleToTimetable,
 }) => {
+  const timetable = useSelector(getSemesterTimetableLessons)(semester);
+
+  const history = useHistory();
+  const viewSemesterTimetable = () => {
+    const timetablePath = timetablePage(semester);
+    history.push(timetablePath);
+  };
+
   const renderModule = (plannerModule: PlannerModuleInfo, index: number) => {
     const { id, moduleCode, moduleInfo, conflict, placeholder } = plannerModule;
 
     const showExamDate = showModuleMeta && config.academicYear === year;
 
+    const isInTimetable = moduleCode !== undefined && moduleCode in timetable;
+
     return (
       <PlannerModule
         key={id}
@@ -75,8 +91,11 @@ const PlannerSemester: React.FC<Props> = ({
         moduleCredit={showModuleMeta ? getModuleCredit(plannerModule) : null}
         conflict={conflict}
         semester={semester}
+        isInTimetable={isInTimetable}
         removeModule={removeModule}
         addCustomData={addCustomData}
+        addModuleToTimetable={addModuleToTimetable}
+        viewSemesterTimetable={viewSemesterTimetable}
         setPlaceholderModule={setPlaceholderModule}
       />
     );

website/src/views/planner/PlannerYear.tsx

@@ -20,6 +20,7 @@ type Props = Readonly<{
   removeModule: (id: string) => void;
   addCustomData: (moduleCode: ModuleCode) => void;
   setPlaceholderModule: (id: string, moduleCode: ModuleCode) => void;
+  addModuleToTimetable: (semester: Semester, module: ModuleCode) => void;
 }>;
 
 type State = {
@@ -92,6 +93,7 @@ export default class PlannerYear extends PureComponent<Props, State> {
                 removeModule={this.props.removeModule}
                 addCustomData={this.props.addCustomData}
                 setPlaceholderModule={this.props.setPlaceholderModule}
+                addModuleToTimetable={this.props.addModuleToTimetable}
               />
             </div>
           ))}