Add filtered work due to module view

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

@@ -6,7 +6,7 @@ import classNames from "classnames";
 export interface SideBarCardProps {
   type: eventTypes;
   title: string;
-  subtitle: string;
+  subtitle?: string;
   content?: string;
 }
 
@@ -23,12 +23,20 @@ const SideBarCard: React.FC<SideBarCardProps> = ({
   content,
 }: SideBarCardProps) => {
   return (
-    <Card className={classNames(styles.sideBarCard, getStyle(type))}>
+    <Card
+      className={classNames(
+        styles.sideBarCard,
+        getStyle(type),
+        subtitle === undefined && content === undefined
+          ? styles.sideBarEmptyCard
+          : ""
+      )}
+    >
       <Card.Body>
-        <Card.Title>
-          {title}
-        </Card.Title>
-        <Card.Subtitle>{subtitle}</Card.Subtitle>
+        <Card.Title>{title}</Card.Title>
+        {subtitle !== undefined ? (
+          <Card.Subtitle>{subtitle}</Card.Subtitle>
+        ) : null}
         {content !== undefined ? <Card.Text>{content}</Card.Text> : null}
       </Card.Body>
     </Card>

frontend/src/components/atoms/SideBarCard/style.module.scss

@@ -52,6 +52,10 @@ $deadline-background: transparentize($teal-100, 0.5);
   font-weight: 500;
 }
 
+.sideBarEmptyCard :global(.card-title) {
+  margin-bottom: 0 !important;
+}
+
 .sideBarCard :global(.card-subtitle) {
   font-size: 1rem;
   font-weight: 500;

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

@@ -9,17 +9,17 @@ const CalendarGroup: React.FC = () => {
       events={events.map(({ type, title, subtitle, content }) => {
         let colorType: eventTypes;
         switch (type) {
-          case "lecture":
+          case "Lecture":
             colorType = eventTypes.BlueCard;
             break;
-          case "labs":
+          case "Labs":
             colorType = eventTypes.RedCard;
             break;
           default:
             colorType = eventTypes.GreenCard;
             break;
         }
-        return { title, subtitle, content, type: colorType };
+        return { title : `${type}: ${title}`, subtitle, content, type: colorType };
       })}
     />
   );
@@ -29,25 +29,25 @@ export default CalendarGroup;
 
 let events = [
   {
-    type: "lecture",
+    type: "Lecture",
     title: "CO142",
     subtitle: "09:00 - 11:00",
     content: "308, Huxley Building, South Kensington Campus",
   },
   {
-    type: "lecture",
+    type: "Lecture",
     title: "CO145",
     subtitle: "13:00 - 14:00",
     content: "311, Huxley Building, South Kensington Campus",
   },
   {
-    type: "labs",
+    type: "Labs",
     title: "CO161",
     subtitle: "15:00 - 17:00",
     content: "219, Huxley Building, South Kensington Campus",
   },
   {
-    type: "deadline",
+    type: "Deadline",
     title: "CO120.1",
     subtitle: "19:00",
     content: "Haskell L Systems",

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

@@ -2,22 +2,35 @@ import React from "react";
 import SideBarCardGroup from "../SideBarCardGroup";
 import { eventTypes } from "components/atoms/SideBarCard";
 
-const WorkDueGroup: React.FC = () => {
+export interface WorkDueGroupProps {
+  filter?: String;
+}
+
+const WorkDueGroup: React.FC<WorkDueGroupProps> = ({
+  filter,
+}: WorkDueGroupProps) => {
   return (
     <SideBarCardGroup
       title="Work Due"
-      events={events.map(({ type, title, subtitle }) => {
-        let colorType: eventTypes;
-        switch (type) {
-          case "tutorial":
-            colorType = eventTypes.BlueCard;
-            break;
-          default:
-            colorType = eventTypes.GreenCard;
-            break;
-        }
-        return { title, subtitle, type: colorType };
-      })}
+      events={events
+        .filter(({ subtitle }) => filter === undefined || subtitle === filter)
+        .map(({ type, title, subtitle }) => {
+          let colorType: eventTypes;
+          switch (type) {
+            case "tutorial":
+              colorType = eventTypes.BlueCard;
+              break;
+            default:
+              colorType = eventTypes.GreenCard;
+              break;
+          }
+
+          return {
+            title,
+            subtitle: filter === undefined ? subtitle : undefined,
+            type: colorType,
+          };
+        })}
     />
   );
 };

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

@@ -3,6 +3,7 @@ import LeftBar from "components/organisms/LeftBar";
 import SideBarTabGroup from "components/molecules/SideBarTabGroup";
 import { faUserFriends } from "@fortawesome/free-solid-svg-icons";
 import { useParams } from "react-router-dom";
+import WorkDueGroup from "components/molecules/WorkDueGroup";
 
 const LeftBarModule: React.FC = () => {
   let { id } = useParams();
@@ -49,6 +50,7 @@ const LeftBarModule: React.FC = () => {
   return (
     <LeftBar>
       <SideBarTabGroup title="Outline" buttons={outlineButtons} />
+			<WorkDueGroup filter={id}/>
     </LeftBar>
   );
 };

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

 import React from "react";
 import LeftBar from "components/organisms/LeftBar";
 import SideBarTabGroup from "components/molecules/SideBarTabGroup";
+import WorkDueGroup from "components/molecules/WorkDueGroup";
 
 const LeftBarModuleList: React.FC = () => {
   let sortButtons = [
@@ -22,6 +23,7 @@ const LeftBarModuleList: React.FC = () => {
   return (
     <LeftBar>
 			<SideBarTabGroup title="Sort" buttons={sortButtons} />
+			<WorkDueGroup/>
 		</LeftBar>
   );
 };

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

 import React, { useEffect, useState } from "react";
 import styles from "./style.module.scss";
 
-import classNames from "classnames";
 import { request } from "../../../utils/api"
 import { api } from "../../../constants/routes"
 import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";