refactor: make several variables non-nullable

Author: zwliew

website/src/views/components/module-info/LessonTimetable.tsx

@@ -32,6 +32,7 @@ const SemesterLessonTimetable: FC<{ semesterData?: SemesterData }> = ({ semester
     <Timetable
       lessons={arrangedLessons}
       onModifyCell={(lesson: Lesson) => history.push(venuePage(lesson.venue))}
+      customisedModules={[]}
     />
   );
 };

website/src/views/settings/SettingsContainer.tsx

@@ -129,7 +129,7 @@ const SettingsContainer: React.FC<Props> = ({
       </p>
 
       <div className={styles.preview}>
-        <Timetable lessons={previewTimetable} />
+        <Timetable lessons={previewTimetable} customisedModules={[]} />
       </div>
 
       <div>

website/src/views/tetris/TetrisGame.tsx

@@ -101,6 +101,7 @@ function renderPiece(tiles: Board) {
       hoverLesson={null}
       onModifyCell={noop}
       onCellHover={noop}
+      customisedModules={[]}
     />
   );
 }
@@ -407,7 +408,7 @@ export default class TetrisGame extends PureComponent<Props, State> {
 
         <div className={styles.game}>
           {this.renderOverlay()}
-          <Timetable lessons={lessons} isVerticalOrientation />
+          <Timetable lessons={lessons} isVerticalOrientation customisedModules={[]} />
         </div>
 
         <div className={styles.sidebar}>

website/src/views/timetable/Timetable.tsx

@@ -30,7 +30,7 @@ type Props = TimerData & {
   showTitle?: boolean;
   onModifyCell?: OnModifyCell;
   highlightPeriod?: TimePeriod;
-  customisedModules?: ModuleCode[];
+  customisedModules: ModuleCode[];
 };
 
 type State = {

website/src/views/timetable/TimetableCell.test.tsx

@@ -38,7 +38,9 @@ function make(additionalProps: Partial<Props> = {}) {
   return {
     onClick,
     onHover: props.onHover,
-    wrapper: shallow(<TimetableCell onClick={onClick} lesson={DEFAULT_LESSON} {...props} />),
+    wrapper: shallow(
+      <TimetableCell onClick={onClick} lesson={DEFAULT_LESSON} {...props} customisedModules={[]} />,
+    ),
   };
 }
 

website/src/views/timetable/TimetableCell.tsx

@@ -26,7 +26,7 @@ type Props = {
   onClick?: (position: ClientRect) => void;
   hoverLesson?: HoverLesson | null;
   transparent: boolean;
-  customisedModules?: ModuleCode[];
+  customisedModules: ModuleCode[];
 };
 
 const lessonDateFormat = 'MMM dd';
@@ -87,7 +87,8 @@ function formatWeekRange(weekRange: WeekRange) {
  * might explore other representations e.g. grouped lessons
  */
 const TimetableCell: React.FC<Props> = (props) => {
-  const { lesson, showTitle, onClick, onHover, hoverLesson, transparent } = props;
+  const { lesson, showTitle, onClick, onHover, hoverLesson, transparent, customisedModules } =
+    props;
 
   const moduleName = showTitle ? `${lesson.moduleCode} ${lesson.title}` : lesson.moduleCode;
   const Cell = props.onClick ? 'button' : 'div';
@@ -134,9 +135,7 @@ const TimetableCell: React.FC<Props> = (props) => {
       <div className={styles.cellContainer}>
         <div className={styles.moduleName}>
           {moduleName}
-          {props.customisedModules && props.customisedModules.includes(lesson.moduleCode)
-            ? '*'
-            : null}
+          {customisedModules.includes(lesson.moduleCode) && '*'}
         </div>
         <div>
           {LESSON_TYPE_ABBREV[lesson.lessonType]} [{lesson.classNo}]

website/src/views/timetable/TimetableContent.tsx

@@ -258,6 +258,7 @@ class TimetableContent extends React.Component<Props, State> {
       readOnly={this.props.readOnly}
       tombstone={tombstone}
       resetTombstone={this.resetTombstone}
+      customisedModules={this.props.customisedModules}
     />
   );
 
@@ -339,7 +340,7 @@ class TimetableContent extends React.Component<Props, State> {
               timetableLesson.classNo === lesson.classNo &&
               timetableLesson.lessonType === lesson.lessonType,
           ).length > 0;
-        const modifiableLesson: Lesson & { isActive?: boolean; isAvailable?: boolean } = {
+        const modifiableLesson: Lesson & { isActive: boolean; isAvailable: boolean } = {
           ...lesson,
           // Inject module code in
           moduleCode: this.props.customiseModule,

website/src/views/timetable/TimetableDay.tsx

@@ -26,7 +26,7 @@ type Props = {
   onCellHover: OnHoverCell;
   onModifyCell?: OnModifyCell;
   highlightPeriod?: TimePeriod;
-  customisedModules?: ModuleCode[];
+  customisedModules: ModuleCode[];
 };
 
 // Height of timetable per hour in vertical mode

website/src/views/timetable/TimetableModuleTable.test.tsx

@@ -35,6 +35,7 @@ function make(props: Partial<Props> = {}) {
       resetTombstone={resetTombstone}
       customiseLesson={customiseLesson}
       customiseModule=""
+      customisedModules={[]}
       addCustomModule={addCustomModule}
       removeCustomModule={removeCustomModule}
       {...props}

website/src/views/timetable/TimetableModulesTable.tsx

@@ -41,6 +41,7 @@ export type Props = {
   modules: ModuleWithColor[];
   tombstone: TombstoneModule | null; // Placeholder for a deleted module
   customiseModule: ModuleCode;
+  customisedModules: ModuleCode[];
 
   // Actions
   selectModuleColor: (semester: Semester, moduleCode: ModuleCode, colorIndex: ColorIndex) => void;
@@ -70,9 +71,7 @@ export const TimetableModulesTableComponent: React.FC<Props> = (props) => {
               type="button"
               className={classnames('btn btn-outline-secondary btn-svg', styles.moduleAction)}
               aria-label={removeBtnLabel}
-              onClick={() => {
-                props.customiseLesson(semester, '');
-              }}
+              onClick={() => props.customiseLesson(semester, '')}
             >
               <Check className={styles.actionIcon} />
             </button>
@@ -118,12 +117,8 @@ export const TimetableModulesTableComponent: React.FC<Props> = (props) => {
                   type="button"
                   className={classnames('btn btn-outline-secondary btn-svg', styles.moduleAction)}
                   aria-label={customBtnLabel}
-                  disabled={
-                    props.customiseModule !== '' && props.customiseModule !== module.moduleCode
-                  }
-                  hidden={
-                    props.customiseModule !== '' && props.customiseModule !== module.moduleCode
-                  }
+                  disabled={!!props.customiseModule && props.customiseModule !== module.moduleCode}
+                  hidden={!!props.customiseModule && props.customiseModule !== module.moduleCode}
                   onClick={() => {
                     // TODO: add modal for warning
                     props.addCustomModule(semester, module.moduleCode);
@@ -141,7 +136,7 @@ export const TimetableModulesTableComponent: React.FC<Props> = (props) => {
   };
 
   const renderModule = (module: ModuleWithColor) => {
-    const { semester, readOnly, tombstone, resetTombstone } = props;
+    const { semester, readOnly, tombstone, resetTombstone, customisedModules } = props;
 
     if (tombstone && tombstone.moduleCode === module.moduleCode) {
       return <ModuleTombstone module={module} resetTombstone={resetTombstone} />;
@@ -173,6 +168,7 @@ export const TimetableModulesTableComponent: React.FC<Props> = (props) => {
           {!readOnly && renderModuleActions(module)}
           <Link to={modulePage(module.moduleCode, module.title)}>
             {module.moduleCode} {module.title}
+            {customisedModules.includes(module.moduleCode) && '*'}
           </Link>
           <div className={styles.moduleExam}>{intersperse(secondRowText, BULLET_NBSP)}</div>
         </div>