Add empty page for course overview

frontend/src/components/atoms/ModuleCard/index.tsx

@@ -3,6 +3,7 @@ import Card from "react-bootstrap/Card";
 import styles from "./style.module.scss";
 import classNames from "classnames";
 import Col from "react-bootstrap/Col";
+import { Link } from "react-router-dom";
 
 export interface ModuleCardProps {
   module: {title: string;
@@ -22,7 +23,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({
         </Card.Header>
         <Card.Img style={{ borderRadius: 0 }} variant="top" src={module.image} />
         <Card.Body>
-          <Card.Title>{module.title}</Card.Title>
+          <Card.Title ><Link to={`modules/${module.code}`} style={{color: "black"}}>{module.title}</Link></Card.Title>
         </Card.Body>
         <Card.Footer>
           <small className={classNames(styles.moduleCardProgressText)}>

frontend/src/components/molecules/Dandruff/index.tsx

@@ -6,8 +6,8 @@ import classNames from "classnames";
 import withBreadcrumbs from "react-router-breadcrumbs-hoc";
 import { Link } from "react-router-dom";
 
-// delete [{ path: "/", breadcrumb: null }] to enable Home in front of breadcrumbs
-const MyBreadcrumbs = withBreadcrumbs([{ path: "/", breadcrumb: null }])(
+// delete [{ path: "/", breadcrumb: "" }] to enable Home in front of breadcrumbs
+const MyBreadcrumbs = withBreadcrumbs([{ path: "/", breadcrumb: "" }])(
   ({ breadcrumbs }: { breadcrumbs: any }) => (
     <Breadcrumb className={styles.breadcrumb}>
       {breadcrumbs.map(

frontend/src/components/molecules/SideBarTabGroup/index.tsx

@@ -9,15 +9,33 @@ export interface SideBarTabGroupProp {
   title: string;
   buttons: {
     title: string;
-    icon: IconDefinition;
+    icon?: IconDefinition;
     active?: boolean;
   }[];
 }
 
 const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
-	title,
+  title,
   buttons,
 }: SideBarTabGroupProp) => {
+  let displayButtons = buttons.map(({ title, icon, active }) => {
+    let FAicon;
+    if (icon) {
+      FAicon = (
+        <FontAwesomeIcon className={styles.tabGroupButtonSvg} icon={icon} />
+      );
+    }
+    return (
+      <Button
+        className={classNames({ active: active }, styles.tabGroupButton)}
+        key={title}
+      >
+        {title}
+        {FAicon}
+      </Button>
+    );
+  });
+
   return (
     <>
       <h1 className={styles.tabGroupHeading}>{title}</h1>
@@ -25,18 +43,7 @@ const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
         className={"btn-group-vertical " + styles.tabGroupButtonGroup}
         role="group"
       >
-        {buttons.map(({ title, icon, active }) => (
-          <Button
-            className={classNames({ active: active }, styles.tabGroupButton)}
-            key={title}
-          >
-            {title}
-            <FontAwesomeIcon
-							className={styles.tabGroupButtonSvg}
-							icon={icon}
-            />
-          </Button>
-        ))}
+        {displayButtons}
       </div>
     </>
   );

frontend/src/components/organisms/LeftBar/index.tsx

 import React from "react";
 import SideBarTabGroup from "components/molecules/SideBarTabGroup";
 import styles from "./style.module.scss";
-import { faSpinner, faSortNumericDown, faSortAlphaDown, faSnowflake } from "@fortawesome/free-solid-svg-icons";
+import { Route , Switch} from "react-router-dom";
 
 const LeftBar: React.FC = () => {
-  let buttons = [
+  let sortButtons = [
     {
 			title: "Progress",
-			icon: faSpinner,
     },
     {
 			title: "Module Title",
-			icon: faSortAlphaDown,
       active: true,
     },
     {
 			title: "Module Code",
-			icon: faSortNumericDown,
     },
     {
-			icon: faSnowflake,
       title: "Term",
+    },
+	];
+	
+	let outlineButtons = [
+    {
+			title: "Overview",
+      active: true,
+    },
+    {
+			title: "Coursework",
+    },
+    {
+			title: "Materials",
+    },
+    {
+      title: "Piazza",
+		},
+		{
+      title: "Policies",
+		},
+		{
+      title: "FAQs",
     },
   ];
 
   return (
     <div id={styles.leftbarWrapper}>
       <p className={styles.leftbarStatus}>1 UPDATE</p>
-      <SideBarTabGroup title="Sort" buttons={buttons}/>
+
+			<Switch>
+
+				<Route path="/modules/:id">
+					<SideBarTabGroup title="Outline" buttons={outlineButtons}/>
+        </Route>
+
+				<Route path="/">
+					<SideBarTabGroup title="Sort" buttons={sortButtons}/>
+        </Route>
+
+      </Switch>
+
     </div>
   );
 };

frontend/src/components/pages/ModuleOverview/index.tsx

+import React from "react";
+import styles from "./style.module.scss";
+import Container from "react-bootstrap/Container";
+
+import classNames from "classnames";
+import Dandruff from "components/molecules/Dandruff";
+
+const ModuleOverview: React.FC = () => {
+  return (
+    <Container className={classNames("p-4", styles.moduleContainer)}>
+      <Dandruff heading="Overview"/>
+    </Container>
+  );
+};
+
+export default ModuleOverview;

frontend/src/components/pages/ModuleOverview/style.module.scss

+@import "assets/scss/custom";
+
+.moduleContainer {
+  padding-top: 30px;
+  margin-bottom: 72px;
+}
+
+.moduleSectionHeader {
+  margin-top: 30px;
+}
+
+.moduleParagraph {
+  margin-top: 15px;	
+}
+
+@media (max-width: 992px) {
+}
+
+@media (min-width: 992px) {
+}

frontend/src/components/pages/StandardView/index.tsx

 import React from "react";
 import { Route, Switch, Redirect } from "react-router-dom";
 import ExamplePage from "components/templates/ExamplePage";
+import ModuleOverview from "components/pages/ModuleOverview";
 import LeftBar from "components/organisms/LeftBar";
+
 import "./style.scss";
 import RightBar from "components/organisms/RightBar";
 import classNames from "classnames";
@@ -34,22 +36,28 @@ const StandardView: React.FC<StandardViewProps> = ({
       <RightBar />
       <div id="sidenav-overlay" onClick={(e) => onOverlayClick(e)}></div>
       <Switch>
-        <Route exact path="/" render={() => <Redirect to="/home" />} />
-        <Route path="/home" key="Home">
+        <Route path="/home">
           <ExamplePage name="Home" />
         </Route>
 
-				<Route path="/modules" key="Modules">
+				<Route exact path="/modules">
           <ModuleList />
         </Route>
 
-				<Route path="/timetable" key="Timetable">
+				<Route path="/modules/:id/overview">
+          <ModuleOverview />
+        </Route>
+        <Route path="/modules/:id" render={props => <Redirect to={`/modules/${props.match.params.id}/overview`} />} />
+
+				<Route path="/timetable">
           <ExamplePage name="Timetable" />
         </Route>
 
-				<Route path="/exams" key="Exams">
+				<Route path="/exams">
           <ExamplePage name="Exams" />
         </Route>
+
+        <Route path="/" render={() => <Redirect to="/home" />} />
       </Switch>
     </div>
   );