Add logic for filtering modules

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

@@ -13,16 +13,17 @@ export interface SideBarTabGroupProp {
     icon?: IconDefinition;
     active?: boolean;
     activeURL?: string;
-    externalURL?: string;
+		externalURL?: string;
+		onClick? : (event: React.MouseEvent) => void;
   }[];
 }
 
 const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
   title,
-  buttons,
+	buttons,
 }: SideBarTabGroupProp) => {
   let displayButtons = buttons.map(
-    ({ title, icon, active, activeURL, externalURL }) => {
+    ({ title, icon, active, activeURL, externalURL, onClick }) => {
       let FAicon;
       if (icon) {
         FAicon = (
@@ -60,7 +61,8 @@ const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
 
       return (
         <Button
-          className={classNames({ active: active }, styles.tabGroupButton)}
+					className={classNames({ active: active }, styles.tabGroupButton)}
+					onClick={onClick}
           key={title}
         >
           {title}

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

@@ -3,20 +3,32 @@ import LeftBar from "components/organisms/LeftBar";
 import SideBarTabGroup from "components/molecules/SideBarTabGroup";
 import WorkDueGroup from "components/molecules/WorkDueGroup";
 
-const LeftBarModuleList: React.FC = () => {
+export interface LeftBarModuleListProps {
+	setModulesFilter: any;
+	modulesFilter: String;
+}
+
+const LeftBarModuleList: React.FC<LeftBarModuleListProps> = ({modulesFilter, setModulesFilter} : LeftBarModuleListProps) => {
   let sortButtons = [
     {
 			title: "All",
-      active: true,
+			active: modulesFilter === "",
+			onClick: () => {setModulesFilter("")},
     },
     {
 			title: "In Progress",
+			active: modulesFilter === "In Progress",
+			onClick: () => {setModulesFilter("In Progress")},
     },
     {
 			title: "Not Started",
+			active: modulesFilter === "Not Started",
+			onClick: () => {setModulesFilter("Not Started")},
     },
     {
-      title: "Completed",
+			title: "Completed",
+			active: modulesFilter === "Completed",
+			onClick: () => {setModulesFilter("Completed")},
     },
 	];
 

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

@@ -16,90 +16,11 @@ import databaseIllustration from "assets/images/database-illustration.png";
 import ModuleCard, { Term, ProgressStatus } from "components/atoms/ModuleCard";
 import Dandruff from "components/molecules/Dandruff";
 
-const ModuleList: React.FC = () => {
-  let modules = [
-    {
-      title: "Introduction to Logic",
-      code: "CO140",
-      image: logicIllustration,
-      terms: [Term.AUTUMN],
-      progressStatus: ProgressStatus.IN_PROGRESS,
-      progressPercent: 50,
-      content: ""
-    },
-    {
-      title: "Discrete Mathematics",
-      code: "CO142",
-      image: discreteIllustration,
-      terms: [Term.AUTUMN],
-      progressStatus: ProgressStatus.IN_PROGRESS,
-      progressPercent: 60,
-      content: ""
-    },
-    {
-      title: "Introduction to Computer Systems",
-      code: "CO112",
-      image: systemsIllustration,
-      terms: [Term.AUTUMN],
-      progressStatus: ProgressStatus.IN_PROGRESS,
-      progressPercent: 93,
-      content: ""
-    },
-    {
-      title: "Mathematical Methods",
-      code: "CO145",
-      terms: [Term.AUTUMN],
-      image: methodsIllustration,
-      progressStatus: ProgressStatus.IN_PROGRESS,
-      progressPercent: 45,
-      content: ""
-    },
-    {
-      title: "Java",
-      code: "CO120.2",
-      image: javaIllustration,
-      terms: [Term.AUTUMN, Term.SPRING, Term.SUMMER],
-      progressStatus: ProgressStatus.IN_PROGRESS,
-      progressPercent: 20,
-      content: ""
-    },
-    {
-      title: "Graphs and Algorithms",
-      code: "CO150",
-      image: graphIllustration,
-      terms: [Term.SPRING],
-      progressStatus: ProgressStatus.NOT_STARTED,
-      progressPercent: 0,
-      content: ""
-    },
-    {
-      title: "Introduction to Computer Architecture",
-      code: "CO113",
-      image: architectureIllustration,
-      terms: [Term.SPRING],
-      progressStatus: ProgressStatus.NOT_STARTED,
-      progressPercent: 0,
-      content: ""
-    },
-    {
-      title: "Reasoning About Programs",
-      code: "CO141",
-      image: reasoningIllustration,
-      terms: [Term.SPRING],
-      progressStatus: ProgressStatus.NOT_STARTED,
-      progressPercent: 0,
-      content: ""
-    },
-    {
-      title: "Introduction to Databases",
-      code: "CO130",
-      image: databaseIllustration,
-      terms: [Term.SPRING],
-      progressStatus: ProgressStatus.NOT_STARTED,
-      progressPercent: 0,
-      content: ""
-    }
-  ];
+export interface ModuleListProps {
+	modulesFilter: String;
+}
+
+const ModuleList: React.FC<ModuleListProps> = ({modulesFilter}: ModuleListProps) => {
   return (
     <>
       <Dandruff heading="Modules" />
@@ -114,7 +35,7 @@ const ModuleList: React.FC = () => {
       </p>
 
       <Row>
-        {modules.map(module => (
+        {modules.filter(({progressStatus})=>  modulesFilter === "" || progressStatus === modulesFilter).map(module => (
           <ModuleCard module={module} key={module.code} />
         ))}
       </Row>
@@ -123,3 +44,87 @@ const ModuleList: React.FC = () => {
 };
 
 export default ModuleList;
+
+let modules = [
+	{
+		title: "Introduction to Logic",
+		code: "CO140",
+		image: logicIllustration,
+		terms: [Term.AUTUMN],
+		progressStatus: ProgressStatus.IN_PROGRESS,
+		progressPercent: 50,
+		content: ""
+	},
+	{
+		title: "Discrete Mathematics",
+		code: "CO142",
+		image: discreteIllustration,
+		terms: [Term.AUTUMN],
+		progressStatus: ProgressStatus.IN_PROGRESS,
+		progressPercent: 60,
+		content: ""
+	},
+	{
+		title: "Introduction to Computer Systems",
+		code: "CO112",
+		image: systemsIllustration,
+		terms: [Term.AUTUMN],
+		progressStatus: ProgressStatus.IN_PROGRESS,
+		progressPercent: 93,
+		content: ""
+	},
+	{
+		title: "Mathematical Methods",
+		code: "CO145",
+		terms: [Term.AUTUMN],
+		image: methodsIllustration,
+		progressStatus: ProgressStatus.IN_PROGRESS,
+		progressPercent: 45,
+		content: ""
+	},
+	{
+		title: "Java",
+		code: "CO120.2",
+		image: javaIllustration,
+		terms: [Term.AUTUMN, Term.SPRING, Term.SUMMER],
+		progressStatus: ProgressStatus.IN_PROGRESS,
+		progressPercent: 20,
+		content: ""
+	},
+	{
+		title: "Graphs and Algorithms",
+		code: "CO150",
+		image: graphIllustration,
+		terms: [Term.SPRING],
+		progressStatus: ProgressStatus.NOT_STARTED,
+		progressPercent: 0,
+		content: ""
+	},
+	{
+		title: "Introduction to Computer Architecture",
+		code: "CO113",
+		image: architectureIllustration,
+		terms: [Term.SPRING],
+		progressStatus: ProgressStatus.NOT_STARTED,
+		progressPercent: 0,
+		content: ""
+	},
+	{
+		title: "Reasoning About Programs",
+		code: "CO141",
+		image: reasoningIllustration,
+		terms: [Term.SPRING],
+		progressStatus: ProgressStatus.NOT_STARTED,
+		progressPercent: 0,
+		content: ""
+	},
+	{
+		title: "Introduction to Databases",
+		code: "CO130",
+		image: databaseIllustration,
+		terms: [Term.SPRING],
+		progressStatus: ProgressStatus.NOT_STARTED,
+		progressPercent: 0,
+		content: ""
+	}
+];
\ No newline at end of file

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

-import React from "react";
+import React, { useState } from "react";
 import { Route, Switch, Redirect } from "react-router-dom";
 import ExamplePage from "components/templates/ExamplePage";
 import ModuleOverview from "components/pages/ModuleOverview";
@@ -30,6 +30,8 @@ const StandardView: React.FC<StandardViewProps> = ({
   toggledRight,
   onOverlayClick,
 }: StandardViewProps) => { 
+	const [modulesFilter, setModulesFilter] = useState("");
+
   return (
     <div
       id="wrapper"
@@ -44,7 +46,7 @@ const StandardView: React.FC<StandardViewProps> = ({
         </Route>
 
         <Route exact path="/modules">
-          <LeftBarModuleList />
+          <LeftBarModuleList modulesFilter={modulesFilter} setModulesFilter={setModulesFilter}/>
         </Route>
 
         <Route path="/">
@@ -60,7 +62,7 @@ const StandardView: React.FC<StandardViewProps> = ({
           </Route>
 
           <Route exact path="/modules">
-            <ModuleList />
+            <ModuleList modulesFilter={modulesFilter}/>
           </Route>
 
           <Route path="/modules/:id/overview">