Synchronise grid with number of tracks

src/components/pages/ModuleList/index.tsx

@@ -3,17 +3,8 @@ import styles from "./style.module.scss";
 import Row from "react-bootstrap/Row";
 
 import classNames from "classnames";
-import logicIllustration from "assets/images/logic-illustration.svg";
-import discreteIllustration from "assets/images/discrete-illustration.svg";
-import systemsIllustration from "assets/images/systems-illustration.svg";
-import methodsIllustration from "assets/images/methods-illustration.svg";
-import graphIllustration from "assets/images/graph-illustration.svg";
-import javaIllustration from "assets/images/java-illustration.png";
-import reasoningIllustration from "assets/images/reasoning-illustration.png";
-import architectureIllustration from "assets/images/architecture-illustration.png";
-import databaseIllustration from "assets/images/database-illustration.png";
 
-import ModuleCard, { Term, ProgressStatus } from "components/atoms/ModuleCard";
+import ModuleCard from "components/atoms/ModuleCard";
 import Dandruff from "components/molecules/Dandruff";
 import { modulesList } from "./list";
 

src/components/pages/Timeline/components/WeekHeading/index.tsx

@@ -46,6 +46,7 @@ const WeekHeading: React.FC<WeekHeadingProps> = ({
               activeDay.getTime() === dateRangeStart.getTime() + i * 86400000;
             return (
               <div
+							key={day}
                 className={isActive ? styles.activeDay : styles.dayIndicator}
               >
                 {day}

src/components/pages/Timeline/index.tsx

-import React from "react";
+import React, { ReactElement } from "react";
 import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
 import styles from "./style.module.scss";
 import TermSwitcher from "./components/TermSwitcher";
@@ -11,25 +11,78 @@ interface TimelineProps {
   revertSideBar: () => void;
 }
 
-class Timeline extends React.Component<TimelineProps, {}> {
+interface Event {
+  title: string;
+}
+
+type ModuleTracks = {
+  [index: string]: Event[][];
+};
+
+interface TimelineState {
+  moduleTracks: ModuleTracks;
+}
+class Timeline extends React.Component<TimelineProps, TimelineState> {
+  constructor(props: TimelineProps) {
+    super(props);
+    this.state = { moduleTracks: {} };
+  }
+
   componentDidMount() {
     this.props.initSideBar();
+    let moduleTracks: ModuleTracks = {};
+    modulesList.forEach(({ code }) => {
+      moduleTracks[code] = [[], []];
+    });
+    this.setState({ moduleTracks: moduleTracks });
   }
 
   componentWillUnmount() {
     this.props.revertSideBar();
-	}
-	
-	addDays(date: Date, days: number) {
-		var result = new Date(date);
-		result.setDate(result.getDate() + days);
-		return result;
-	}
+  }
+
+  addDays(date: Date, days: number) {
+    let result = new Date(date);
+    result.setDate(result.getDate() + days);
+    return result;
+  }
 
   render() {
     const termStart = new Date("2020-09-28");
     const activeDay = new Date("2020-10-07");
     const numWeeks = 12;
+    const trackHeight = 4.25;
+
+    let timelineBackgrounds: ReactElement[] = [];
+    let moduleHeadings: ReactElement[] = [];
+
+    for (let i = 0; i < modulesList.length; i++) {
+      const code = modulesList[i].code;
+      const tracks = this.state.moduleTracks[code];
+      if (tracks) {
+        const height = tracks.length * trackHeight;
+        for (let j = 0; j < numWeeks; j++) {
+          timelineBackgrounds.push(
+            <div
+							key={code + j}
+              style={{ height: `${height}rem` }}
+              className={styles.timelineBackground}
+            >
+              &nbsp;
+            </div>
+          );
+        }
+        moduleHeadings.push(
+          <div
+						key={code}
+            className={styles.moduleHeading}
+            style={{ height: `${height}rem` }}
+          >
+            <ModuleHeading moduleCode={code} title={modulesList[i].title} />
+          </div>
+        );
+      }
+    }
     return (
       <div className={styles.timelineContainer}>
         <MyBreadcrumbs />
@@ -39,7 +92,7 @@ class Timeline extends React.Component<TimelineProps, {}> {
           </div>
           <div className={styles.timelineWeekRow}>
             {[...Array(numWeeks)].map((_, i) => (
-              <div className={styles.weekHeading}>
+              <div className={styles.weekHeading} key={i}>
                 <WeekHeading
                   weekNumber={i + 1}
                   dateRangeStart={this.addDays(termStart, i * 7)}
@@ -49,17 +102,9 @@ class Timeline extends React.Component<TimelineProps, {}> {
               </div>
             ))}
           </div>
-          <div className={styles.timelineModuleColumn}>
-            {modulesList.map((module) => (
-              <div className={styles.moduleHeading}>
-                <ModuleHeading moduleCode={module.code} title={module.title} />
-              </div>
-            ))}
-          </div>
+          <div className={styles.timelineModuleColumn}>{moduleHeadings}</div>
           <div className={styles.timelineWeekBackground}>
-            {[...Array(numWeeks)].map(() => {
-              return <div className={styles.timelineBackground}>&nbsp;</div>;
-            })}
+            {timelineBackgrounds}
           </div>
         </div>
       </div>

src/components/pages/Timeline/style.module.scss

@@ -71,7 +71,7 @@
   grid-auto-flow: row; 
   grid-template-columns: repeat(12, 15rem);
   grid-gap: 0.625rem;
-  padding-right: 0.625rem;
+	padding-right: 0.625rem;
   top: 0;
   position: sticky;
 }
@@ -104,5 +104,5 @@
 
 .timelineBackground {
   background-color: var(--primary-button);
-  border-radius: 0.5rem;
+	border-radius: 0.5rem;
 }