diff --git a/frontend/src/components/molecules/SideBarTabGroup/index.tsx b/frontend/src/components/molecules/SideBarTabGroup/index.tsx
index 79da662c25bd8dc81a8d352f0ab29be296ddf0dc..05259d51e104318cf0aa406748f4b6a13c58e730 100644
--- a/frontend/src/components/molecules/SideBarTabGroup/index.tsx
+++ b/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}
diff --git a/frontend/src/components/organisms/LeftBarModuleList/index.tsx b/frontend/src/components/organisms/LeftBarModuleList/index.tsx
index 2932b64e6d86753ac63b639f56e2b86196d774c1..ee4a85e61a15597c547c6994e5f2b0919359a63e 100644
--- a/frontend/src/components/organisms/LeftBarModuleList/index.tsx
+++ b/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")},
},
];
diff --git a/frontend/src/components/pages/ModuleList/index.tsx b/frontend/src/components/pages/ModuleList/index.tsx
index 0a4fde6f4cb0393fb11c739a64577fe5f81b4bd8..34f9dcadf5e07287607db6a1b5383b21aefcc79d 100644
--- a/frontend/src/components/pages/ModuleList/index.tsx
+++ b/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
diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx
index f2a991e79f246ffe3dac1f4b748ba7bdfeea1bd1..dd675f8b6c4ea20b18109cd17360c6e9b71d87c3 100644
--- a/frontend/src/components/pages/StandardView/index.tsx
+++ b/frontend/src/components/pages/StandardView/index.tsx
@@ -1,4 +1,4 @@
-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">