Refactor sidebar cards and add work due group

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

@@ -3,33 +3,33 @@ import Card from "react-bootstrap/Card";
 import styles from "./style.module.scss";
 import classNames from "classnames";
 
-export interface CalendarCardProps {
+export interface SideBarCardProps {
   type: eventTypes;
   title: string;
   subtitle: string;
-  content: string;
+  content?: string;
 }
 
 export enum eventTypes {
-  Lecture = "Lecture",
-  Labs = "Labs",
-  Deadline = "Deadline",
+  BlueCard,
+  RedCard,
+  GreenCard,
 }
 
-const CalendarCard: React.FC<CalendarCardProps> = ({
+const SideBarCard: React.FC<SideBarCardProps> = ({
   type,
   title,
   subtitle,
   content,
-}: CalendarCardProps) => {
+}: SideBarCardProps) => {
   return (
-    <Card className={classNames(styles.calendarCard, getStyle(type))}>
+    <Card className={classNames(styles.sideBarCard, getStyle(type))}>
       <Card.Body>
         <Card.Title>
-          {type}: {title}
+          {title}
         </Card.Title>
         <Card.Subtitle>{subtitle}</Card.Subtitle>
-        <Card.Text>{content}</Card.Text>
+        {content !== undefined ? <Card.Text>{content}</Card.Text> : null}
       </Card.Body>
     </Card>
   );
@@ -37,15 +37,15 @@ const CalendarCard: React.FC<CalendarCardProps> = ({
 
 function getStyle(type: eventTypes): String {
   switch (type) {
-    case eventTypes.Lecture:
-      return styles.calendarLecture;
-    case eventTypes.Labs:
-      return styles.calendarLabs;
-    case eventTypes.Deadline:
-      return styles.calendarDeadline;
+    case eventTypes.BlueCard:
+      return styles.sideBarBlueCard;
+    case eventTypes.RedCard:
+      return styles.sideBarRedCard;
+    case eventTypes.GreenCard:
+      return styles.sideBarGreenCard;
     default:
-      return styles.calendarLecture;
+      return styles.sideBarBlueCard;
   }
 }
 
-export default CalendarCard;
+export default SideBarCard;

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

@@ -4,7 +4,7 @@ $lecture-background: transparentize($blue-100, 0.5);
 $labs-background: transparentize($pink-100, 0.5);
 $deadline-background: transparentize($teal-100, 0.5);
 
-.calendarCard {
+.sideBarCard {
   margin-top: 0.3125rem;
   margin-bottom: 0.3125rem;
   color: #000;
@@ -15,53 +15,53 @@ $deadline-background: transparentize($teal-100, 0.5);
   transition: transform .2s;
 }
 
-.calendarCard:hover {
+.sideBarCard:hover {
   transform: scale(1.03);
 }
 
-.calendarLabs * {
+.sideBarRedCard * {
   color: $pink-700;
 }
 
-.calendarLabs {
+.sideBarRedCard {
   background: $labs-background; 
 }
 
-.calendarLecture * {
+.sideBarBlueCard * {
   color: $blue-700;
 }
 
-.calendarLecture {
+.sideBarBlueCard {
   background: $lecture-background;
 }
 
-.calendarDeadline * {
+.sideBarGreenCard * {
   color: $teal-700;
 }
 
-.calendarDeadline {
+.sideBarGreenCard {
   background: $deadline-background;
 }
 
-.calendarCard :global(.card-body) {
+.sideBarCard :global(.card-body) {
   padding: 0.5rem !important;
 }
 
-.calendarCard :global(.card-title) {
+.sideBarCard :global(.card-title) {
   font-size: 1.125rem;
   font-weight: 500;
 }
 
-.calendarCard :global(.card-subtitle) {
+.sideBarCard :global(.card-subtitle) {
   font-size: 1rem;
   font-weight: 500;
 }
 
-.calendarCard :global(.card-text) {
+.sideBarCard :global(.card-text) {
   font-size: 1rem;
 }
 
-.calendarCard:global(.active),
+.sideBarCard:global(.active),
 .claendarCard:active {
   color: #fff;
   background-color: #000 !important;

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

 import React from "react";
-import styles from "./style.module.scss";
-import classNames from "classnames";
-import CalendarCard, {
-  eventTypes,
-  CalendarCardProps,
-} from "components/atoms/CalendarCard";
+import { eventTypes } from "components/atoms/SideBarCard";
+import SideBarCardGroup from "../SideBarCardGroup";
 
 const CalendarGroup: React.FC = () => {
-  let events: CalendarCardProps[] = [
-    {
-      type: eventTypes.Lecture,
-      title: "CO142",
-      subtitle: "09:00 - 11:00",
-      content: "308, Huxley Building, South Kensington Campus",
-    },
-    {
-      type: eventTypes.Lecture,
-      title: "CO145",
-      subtitle: "13:00 - 14:00",
-      content: "311, Huxley Building, South Kensington Campus",
-    },
-    {
-      type: eventTypes.Labs,
-      title: "CO161",
-      subtitle: "15:00 - 17:00",
-      content: "219, Huxley Building, South Kensington Campus",
-    },
-    {
-      type: eventTypes.Deadline,
-      title: "CO120.1",
-      subtitle: "19:00",
-      content: "Haskell L Systems",
-    },
-  ];
-
   return (
-    <>
-      <h1 className={styles.calendarCardGroupHeading}>Today</h1>
-      <div
-        className={classNames("btn-group-vertical", styles.calendarCardGroup)}
-        role="group"
-      >
-        {events.map(({ type, title, subtitle, content }) => (
-          <CalendarCard
-            title={title}
-            type={type}
-            subtitle={subtitle}
-            content={content}
-            key={title + type + subtitle}
-          />
-        ))}
-      </div>
-    </>
+    <SideBarCardGroup
+      title="Today"
+      events={events.map(({ type, title, subtitle, content }) => {
+        let colorType: eventTypes;
+        switch (type) {
+          case "lecture":
+            colorType = eventTypes.BlueCard;
+            break;
+          case "labs":
+            colorType = eventTypes.RedCard;
+            break;
+          default:
+            colorType = eventTypes.GreenCard;
+            break;
+        }
+        return { title, subtitle, content, type: colorType };
+      })}
+    />
   );
 };
 
 export default CalendarGroup;
+
+let events = [
+  {
+    type: "lecture",
+    title: "CO142",
+    subtitle: "09:00 - 11:00",
+    content: "308, Huxley Building, South Kensington Campus",
+  },
+  {
+    type: "lecture",
+    title: "CO145",
+    subtitle: "13:00 - 14:00",
+    content: "311, Huxley Building, South Kensington Campus",
+  },
+  {
+    type: "labs",
+    title: "CO161",
+    subtitle: "15:00 - 17:00",
+    content: "219, Huxley Building, South Kensington Campus",
+  },
+  {
+    type: "deadline",
+    title: "CO120.1",
+    subtitle: "19:00",
+    content: "Haskell L Systems",
+  },
+];

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

@@ -5,12 +5,6 @@ export interface DandruffProps {
   heading: string;
 }
 
-export enum eventTypes {
-  Lecture = "Lecture",
-  Labs = "Labs",
-  Deadline = "Deadline",
-}
-
 const Dandruff: React.FC<DandruffProps> = ({ heading }: DandruffProps) => {
   return (
     <>

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

@@ -90,7 +90,7 @@ class ResourcesFolderView extends React.Component<PropsType, MyState> {
 
     let items = this.props.folderItems;
     for (let item in items) {
-      if (items[item].id == id) {
+      if (items[item].id === id) {
         console.log(`/${items[item].title}`);
         this.props.history.push(
           `${this.props.location.pathname}/${items[item].title}`

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

+import React from "react";
+import styles from "./style.module.scss";
+import classNames from "classnames";
+import SideBarCard, { SideBarCardProps } from "components/atoms/SideBarCard";
+
+export interface SideBarCardGroupProps {
+  events: SideBarCardProps[];
+  title: string;
+}
+
+const SideBarCardGroup: React.FC<SideBarCardGroupProps> = ({
+  events,
+  title,
+}: SideBarCardGroupProps) => {
+  return (
+    <>
+      <h1 className={styles.sideBarCardGroupHeading}>{title}</h1>
+      <div
+        className={classNames("btn-group-vertical", styles.sideBarCardGroup)}
+        role="group"
+      >
+        {events.map(({ type, title, subtitle, content }) => (
+          <SideBarCard
+            title={title}
+            type={type}
+            subtitle={subtitle}
+            content={content}
+            key={title + type + subtitle}
+          />
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default SideBarCardGroup;

frontend/src/components/molecules/CalendarGroup/style.module.scss → frontend/src/components/molecules/SideBarCardGroup/style.module.scss

@@ -2,7 +2,7 @@
 
 
 @media (max-width: 62rem) {
-  .calendarCardGroup {
+  .sideBarCardGroup {
     margin-top: 1.25rem;
     margin-left: 1rem;
     margin-right: 1rem;
@@ -10,7 +10,7 @@
     width: 13.625rem !important;
   }
 
-  .calendarCardGroupHeading {
+  .sideBarCardGroupHeading {
     font-size: 1.5rem;
     color: #000000;
     text-align: left;
@@ -24,7 +24,7 @@
 }
 
 @media (min-width: 62rem) {
-  .calendarCardGroup {
+  .sideBarCardGroup {
     margin-top: 1.25rem;
     margin-left: 2rem;
     margin-right: 2rem;
@@ -32,7 +32,7 @@
     width: 11.625rem !important;
   }
 
-  .calendarCardGroupHeading {
+  .sideBarCardGroupHeading {
     font-size: 1.5rem;
     color: #000000;
     text-align: left;

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

+import React from "react";
+import SideBarCardGroup from "../SideBarCardGroup";
+import { eventTypes } from "components/atoms/SideBarCard";
+
+const WorkDueGroup: React.FC = () => {
+  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 };
+      })}
+    />
+  );
+};
+
+export default WorkDueGroup;
+
+let events = [
+  {
+    type: "tutorial",
+    title: "Tutorial 1",
+    subtitle: "CO112",
+  },
+  {
+    type: "coursework",
+    title: "Coursework 1",
+    subtitle: "CO112",
+  },
+  {
+    type: "coursework",
+    title: "Coursework 2",
+    subtitle: "CO140",
+  },
+  {
+    type: "tutorial",
+    title: "PPT2",
+    subtitle: "CO142",
+  },
+  {
+    type: "tutorial",
+    title: "PMT3",
+    subtitle: "CO120.2",
+  },
+];

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

@@ -3,6 +3,7 @@ import LeftBar from "components/organisms/LeftBar";
 import SideBarTabGroup from "components/molecules/SideBarTabGroup";
 import { faGitlab } from "@fortawesome/free-brands-svg-icons";
 import { faFlask, faAward, faDatabase, faEnvelopeOpen } from "@fortawesome/free-solid-svg-icons";
+import WorkDueGroup from "components/molecules/WorkDueGroup";
 
 const LeftBarDashboard: React.FC = () => {
   let linkButtons = [
@@ -36,6 +37,7 @@ const LeftBarDashboard: React.FC = () => {
   return (
     <LeftBar>
 			<SideBarTabGroup title="Links" buttons={linkButtons} />
+			<WorkDueGroup/>
 		</LeftBar>
   );
 };