diff --git a/frontend/src/components/App.scss b/frontend/src/components/App.scss
index 7e64911499c3bf832426708a9c5350c938ac5c65..1b6f68e4b51bdb60dd3e30e830663a989f8a2345 100644
--- a/frontend/src/components/App.scss
+++ b/frontend/src/components/App.scss
@@ -13,4 +13,4 @@ body {
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/atoms/SideBarCard/index.tsx b/frontend/src/components/atoms/SideBarCard/index.tsx
index 56c5942250261db6820d0387c9c6c8b4d8990894..8e16d550f287a0bfb2fc534a5315d729adcafd7b 100644
--- a/frontend/src/components/atoms/SideBarCard/index.tsx
+++ b/frontend/src/components/atoms/SideBarCard/index.tsx
@@ -27,7 +27,7 @@ const SideBarCard: React.FC<SideBarCardProps> = ({
className={classNames(
styles.sideBarCard,
getStyle(type),
- subtitle === undefined && content === undefined
+ subtitle === undefined || content === undefined
? styles.sideBarEmptyCard
: ""
)}
diff --git a/frontend/src/components/molecules/CurrentDirectoryView/index.tsx b/frontend/src/components/molecules/CurrentDirectoryView/index.tsx
index 5827784a61b3a35013174cd970c6ccf590e0e42a..90f8b0161f8c3c86a937a2b4c2320a5377eaa109 100644
--- a/frontend/src/components/molecules/CurrentDirectoryView/index.tsx
+++ b/frontend/src/components/molecules/CurrentDirectoryView/index.tsx
@@ -19,13 +19,12 @@ type idBooleanMap = { [key: number]: boolean };
interface MyState {
isSelected: idBooleanMap;
isHoveringOver: idBooleanMap;
- isHoveringTitle: Boolean;
}
class CurrentDirectoryView extends React.Component<CurrentDirectoryViewProps, MyState> {
constructor(props: CurrentDirectoryViewProps) {
super(props);
- this.state = { isSelected: [], isHoveringOver: [], isHoveringTitle: false };
+ this.state = { isSelected: [], isHoveringOver: []};
}
componentDidMount() {
@@ -73,7 +72,7 @@ class CurrentDirectoryView extends React.Component<CurrentDirectoryViewProps, My
for (let item in items) {
isSelected[items[item].id] = setValue;
}
- this.setState({ isSelected, isHoveringTitle: false });
+ this.setState({ isSelected});
}
handleCardClick(id: number) {
@@ -99,16 +98,10 @@ class CurrentDirectoryView extends React.Component<CurrentDirectoryViewProps, My
<>
<ResourceSectionHeader
heading="Files"
- onMouseOver={() => {
- this.setState({ isHoveringTitle: true });
- }}
- onMouseOut={() => {
- this.setState({ isHoveringTitle: false });
- }}
showDownload={this.isAnySelected()}
- showSelectAll={this.isAnySelected() || this.state.isHoveringTitle}
onSelectAllClick={() => this.handleSelectAllClick()}
- selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
+ selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
+ checkBoxColur={this.isAnySelected() ? "#495057" : "#dee2e6"}
/>
<Row style={{ marginTop: "10px" }}>
diff --git a/frontend/src/components/molecules/QuickAccessView/index.tsx b/frontend/src/components/molecules/QuickAccessView/index.tsx
index 3e070a1c1d40d4e5661a02447c46504f3285b43c..6e655cf382b244d86cbc11e92b1fc8fe364a3f78 100644
--- a/frontend/src/components/molecules/QuickAccessView/index.tsx
+++ b/frontend/src/components/molecules/QuickAccessView/index.tsx
@@ -22,13 +22,12 @@ type idBooleanMap = { [key: number]: boolean };
interface MyState {
isSelected: idBooleanMap;
isHoveringOver: idBooleanMap;
- isHoveringTitle: Boolean;
}
class QuickAccessView extends React.Component<QuickAccessProps, MyState> {
constructor(props: QuickAccessProps) {
super(props);
- this.state = { isSelected: [], isHoveringOver: [], isHoveringTitle: false };
+ this.state = { isSelected: [], isHoveringOver: []};
}
componentDidMount() {
@@ -78,7 +77,7 @@ class QuickAccessView extends React.Component<QuickAccessProps, MyState> {
for (let item in items) {
isSelected[items[item].id] = setValue;
}
- this.setState({ isSelected ,isHoveringTitle: false});
+ this.setState({ isSelected});
}
handleCardClick(id: number) {
@@ -104,16 +103,10 @@ class QuickAccessView extends React.Component<QuickAccessProps, MyState> {
<>
<ResourceSectionHeader
heading="Quick Access"
- onMouseOver={() => {
- this.setState({ isHoveringTitle: true });
- }}
- onMouseOut={() => {
- this.setState({ isHoveringTitle: false });
- }}
showDownload={this.isAnySelected()}
- showSelectAll={this.state.isHoveringTitle || this.isAnySelected()}
onSelectAllClick={() => this.handleSelectAllClick()}
- selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
+ selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
+ checkBoxColur={this.isAnySelected() ? "#495057" : "#dee2e6"}
/>
<Row
diff --git a/frontend/src/components/molecules/ResourceSectionHeader/index.tsx b/frontend/src/components/molecules/ResourceSectionHeader/index.tsx
index b92ad11c3176ae0672f51c1179564e0b92fc63b3..8109727e49f51220ed4469ed27734f0e6d3ea6ec 100644
--- a/frontend/src/components/molecules/ResourceSectionHeader/index.tsx
+++ b/frontend/src/components/molecules/ResourceSectionHeader/index.tsx
@@ -3,7 +3,6 @@ import styles from "./style.module.scss";
import Button from "react-bootstrap/Button";
import Fade from "react-bootstrap/Fade";
-import { CSSTransition } from "react-transition-group";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faDownload, IconDefinition } from "@fortawesome/free-solid-svg-icons";
@@ -11,28 +10,22 @@ export interface SectionHeaderProps {
heading: string;
selectAllIcon: IconDefinition;
showDownload: Boolean;
- showSelectAll: Boolean;
- onSelectAllClick: (event: React.MouseEvent) => void;
- onMouseOver: (event: React.MouseEvent) => void;
- onMouseOut: (event: React.MouseEvent) => void;
+ onSelectAllClick: (event: React.MouseEvent) => void;
+ checkBoxColur: string;
}
const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
heading,
showDownload,
selectAllIcon,
- showSelectAll,
- onSelectAllClick,
- onMouseOver,
- onMouseOut
+ onSelectAllClick,
+ checkBoxColur,
}: SectionHeaderProps) => {
let show = showDownload.valueOf();
return (
<>
<div
className={styles.sectionHeaderContainer}
- onMouseOut={onMouseOut}
- onMouseOver={onMouseOver}
>
<span className={styles.sectionHeader} onClick={onSelectAllClick}>
{heading}
@@ -41,9 +34,9 @@ const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
<Fade in={show} timeout={500}>
<span id="download-button">
<Button
+ style={{ color: checkBoxColur }}
className={styles.sectionHeaderButton}
onClick={() => {}}
- style={{ color: showDownload ? "#495057" : "#acb5bd" }}
>
<FontAwesomeIcon
className={styles.buttonIcon}
@@ -53,7 +46,7 @@ const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
</span>
</Fade>
<Button
- style={{ color: showDownload ? "#495057" : "#acb5bd" }}
+ style={{ color: checkBoxColur }}
className={styles.sectionHeaderButton}
onClick={onSelectAllClick}
aria-controls="download-button"
diff --git a/frontend/src/components/molecules/ResourceSectionHeader/style.module.scss b/frontend/src/components/molecules/ResourceSectionHeader/style.module.scss
index ca3515c4cdc383f04a8f27d1159a787082c6633a..8086eed5daf17e045333c0289dd3a2936359fd69 100644
--- a/frontend/src/components/molecules/ResourceSectionHeader/style.module.scss
+++ b/frontend/src/components/molecules/ResourceSectionHeader/style.module.scss
@@ -12,10 +12,6 @@
font-size: 20px;
}
-.sectionHeaderButtonGroup {
- // display: none;
-}
-
.sectionHeaderButton {
background-color: $white;
color: $gray-500;
@@ -48,9 +44,10 @@
line-height: 1.375rem;
}
-.sectionHeaderButton:hover {
+.sectionHeaderButton:hover, .sectionHeaderButton:focus {
background-color: $gray-200;
- color: $gray-700 !important;
+ color: $gray-700 !important;
+ box-shadow: none !important;
}
.alert-enter {
diff --git a/frontend/src/components/molecules/ResourcesFolderView/index.tsx b/frontend/src/components/molecules/ResourcesFolderView/index.tsx
index f9b498284da05e417a508255093d618d7d283e74..8e45ecf7a2db51299bdb0943d9d71c7174163e2e 100644
--- a/frontend/src/components/molecules/ResourcesFolderView/index.tsx
+++ b/frontend/src/components/molecules/ResourcesFolderView/index.tsx
@@ -25,13 +25,12 @@ type idBooleanMap = { [key: number]: boolean };
interface MyState {
isSelected: idBooleanMap;
isHoveringOver: idBooleanMap;
- isHoveringTitle: Boolean;
}
class ResourcesFolderView extends React.Component<PropsType, MyState> {
constructor(props: PropsType) {
super(props);
- this.state = { isSelected: [], isHoveringOver: [], isHoveringTitle: false };
+ this.state = { isSelected: [], isHoveringOver: []};
}
componentDidMount() {
@@ -79,7 +78,7 @@ class ResourcesFolderView extends React.Component<PropsType, MyState> {
for (let item in items) {
isSelected[items[item].id] = setValue;
}
- this.setState({ isSelected, isHoveringTitle: false });
+ this.setState({ isSelected });
}
handleCardClick(id: number) {
@@ -117,16 +116,10 @@ class ResourcesFolderView extends React.Component<PropsType, MyState> {
<>
<ResourceSectionHeader
heading="Folders"
- onMouseOver={() => {
- this.setState({ isHoveringTitle: true });
- }}
- onMouseOut={() => {
- this.setState({ isHoveringTitle: false });
- }}
showDownload={this.isAnySelected()}
- showSelectAll={this.isAnySelected() || this.state.isHoveringTitle}
onSelectAllClick={() => this.handleSelectAllClick()}
- selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
+ selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
+ checkBoxColur={this.isAnySelected() ? "#495057" : "#dee2e6"}
/>
<Row style={{ marginTop: "10px" }}>
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/molecules/WorkDueGroup/index.tsx b/frontend/src/components/molecules/WorkDueGroup/index.tsx
index 32dda10958152db5686401f472ca16cd1c8b00ab..4d206324921626ba125ea9fb0d7afc3b8bb79126 100644
--- a/frontend/src/components/molecules/WorkDueGroup/index.tsx
+++ b/frontend/src/components/molecules/WorkDueGroup/index.tsx
@@ -4,104 +4,70 @@ import { eventTypes } from "components/atoms/SideBarCard";
export interface WorkDueGroupProps {
filter?: String;
- noModuleCode?: Boolean;
}
const WorkDueGroup: React.FC<WorkDueGroupProps> = ({
filter,
- noModuleCode
}: WorkDueGroupProps) => {
- {/* TODO: This has to be cleaned up and refactored into a simpler implementation
- Note (sudarshan): I tried doing this with the basic knowledge I have,
- so please excuse me if this is bad code. */}
- if (noModuleCode !== undefined && noModuleCode.valueOf()) {
- return (
- <SideBarCardGroup
- title="Work Due"
- events={events
- .filter(({ title }) => filter === undefined || title === filter)
- .map(({ type, title, subtitle, content }) => {
- let colorType: eventTypes;
- switch (type) {
- case "tutorial":
- colorType = eventTypes.BlueCard;
- title = subtitle;
- break;
- default:
- colorType = eventTypes.GreenCard;
- title = subtitle;
- break;
- }
+ return (
+ <SideBarCardGroup
+ title="Work Due"
+ events={events
+ .filter(({ module }) => filter === undefined || module === filter)
+ .map(({ type, module, task, content }) => {
+ let colorType: eventTypes;
+ switch (type) {
+ case "tutorial":
+ colorType = eventTypes.BlueCard;
+ break;
+ default:
+ colorType = eventTypes.GreenCard;
+ break;
+ }
- return {
- type: colorType,
- title,
- subtitle: filter === undefined ? subtitle : undefined,
- content
- };
- })}
- />
- );
- } else {
- return (
- <SideBarCardGroup
- title="Work Due"
- events={events
- .filter(({ title }) => filter === undefined || title === filter)
- .map(({ type, title, subtitle, content }) => {
- let colorType: eventTypes;
- switch (type) {
- case "tutorial":
- colorType = eventTypes.BlueCard;
- break;
- default:
- colorType = eventTypes.GreenCard;
- break;
- }
-
- return {
- type: colorType,
- title,
- subtitle: filter === undefined ? subtitle : undefined,
- content
- };
- })}
- />
- );
- }
+ return {
+ title: filter === undefined ? module : task,
+ subtitle: filter === undefined ? task : undefined,
+ content,
+ type: colorType,
+ };
+ })}
+ />
+ );
};
+
export default WorkDueGroup;
let events = [
{
type: "tutorial",
- title: "CO112",
- subtitle: "Tutorial 1",
+ module: "CO112",
+ task: "Tutorial 1",
content: "Fri 14 Aug, 19:30"
},
{
type: "coursework",
- title: "CO112",
- subtitle: "Coursework 1",
+ module: "CO112",
+ task: "Coursework 1",
content: "Mon 17 Aug, 17:00"
},
{
type: "coursework",
- title: "CO140",
- subtitle: "Coursework 2",
+ module: "CO140",
+ task: "Coursework 2",
content: "Tue 18 Aug, 12:30"
},
{
type: "tutorial",
- title: "CO142",
- subtitle: "PPT2",
+ module: "CO142",
+ task: "PPT2",
content: "Fri 21 Aug, 19:30"
},
{
type: "tutorial",
- title: "CO120.2",
- subtitle: "PMT3",
+ module: "CO120.2",
+ task: "PMT3",
content: "Mon 24 Aug, 12:30"
}
];
diff --git a/frontend/src/components/organisms/LeftBar/index.tsx b/frontend/src/components/organisms/LeftBar/index.tsx
index 55a99befcb9bfdf588540262d15037dc0c5badd3..138001a55f3d1ffa0ae832193760e17b513e582b 100644
--- a/frontend/src/components/organisms/LeftBar/index.tsx
+++ b/frontend/src/components/organisms/LeftBar/index.tsx
@@ -1,5 +1,6 @@
import React from "react";
import styles from "./style.module.scss";
+import { Link } from "react-router-dom";
export interface LeftBarProps{
children: React.ReactNode;
@@ -8,7 +9,7 @@ export interface LeftBarProps{
const LeftBar: React.FC<LeftBarProps> = ({children}: LeftBarProps) => {
return (
<div id={styles.leftbarWrapper}>
- <p className={styles.leftbarStatus}>1 DEADLINE</p>
+ <p className={styles.leftbarStatus}><Link to="/Dashboard">1 NOTICE</Link></p>
{children}
</div>
);
diff --git a/frontend/src/components/organisms/LeftBar/style.module.scss b/frontend/src/components/organisms/LeftBar/style.module.scss
index d61ca713955ec7b9d53adbd2808d2ee7daf128ca..a962e5ddd63f64ac5041ac8bb9d9676bfd1df48c 100644
--- a/frontend/src/components/organisms/LeftBar/style.module.scss
+++ b/frontend/src/components/organisms/LeftBar/style.module.scss
@@ -39,6 +39,11 @@
transform: translateX(0);
}
+.leftbarStatus a {
+ text-decoration: none !important;
+ color: #000 !important;
+}
+
@media (max-width: 62rem) {
.leftbarStatus {
margin-top: 1.875rem;
diff --git a/frontend/src/components/organisms/LeftBarModule/index.tsx b/frontend/src/components/organisms/LeftBarModule/index.tsx
index b2c4c1e0ff33940154919f8e87d934c29029d8cd..afba351c4c1e1351f83d6cdccbcd566bdbbdb94c 100644
--- a/frontend/src/components/organisms/LeftBarModule/index.tsx
+++ b/frontend/src/components/organisms/LeftBarModule/index.tsx
@@ -50,7 +50,7 @@ const LeftBarModule: React.FC = () => {
return (
<LeftBar>
<SideBarTabGroup title="Outline" buttons={outlineButtons} />
- <WorkDueGroup filter={id} noModuleCode={true}/>
+ <WorkDueGroup filter={id} />
</LeftBar>
);
};
diff --git a/frontend/src/components/organisms/LeftBarModuleList/index.tsx b/frontend/src/components/organisms/LeftBarModuleList/index.tsx
index 98bd843f072b1db74cb3ff96f73cee9fdf822925..ee4a85e61a15597c547c6994e5f2b0919359a63e 100644
--- a/frontend/src/components/organisms/LeftBarModuleList/index.tsx
+++ b/frontend/src/components/organisms/LeftBarModuleList/index.tsx
@@ -3,26 +3,39 @@ 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: "Progress",
+ title: "All",
+ active: modulesFilter === "",
+ onClick: () => {setModulesFilter("")},
},
{
- title: "Module Title",
- active: true,
+ title: "In Progress",
+ active: modulesFilter === "In Progress",
+ onClick: () => {setModulesFilter("In Progress")},
},
{
- title: "Module Code",
+ title: "Not Started",
+ active: modulesFilter === "Not Started",
+ onClick: () => {setModulesFilter("Not Started")},
},
{
- title: "Term",
+ title: "Completed",
+ active: modulesFilter === "Completed",
+ onClick: () => {setModulesFilter("Completed")},
},
];
return (
<LeftBar>
- <SideBarTabGroup title="Sort" buttons={sortButtons} />
+ <SideBarTabGroup title="Filter" buttons={sortButtons} />
+ <WorkDueGroup/>
</LeftBar>
);
};
diff --git a/frontend/src/components/pages/Dashboard/index.tsx b/frontend/src/components/pages/Dashboard/index.tsx
index 08b39701fbabe3cfa48e7df089dce8ed83cf7caf..2c11aaa35f543be5e6f6d708da10220db123844e 100644
--- a/frontend/src/components/pages/Dashboard/index.tsx
+++ b/frontend/src/components/pages/Dashboard/index.tsx
@@ -1,17 +1,19 @@
-import React from "react";
-import { useParams } from "react-router-dom";
+import React, { useEffect } from "react";
import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
import Image from "react-bootstrap/Image";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import styles from "./style.module.scss";
-import classnames from "classnames";
import { faFile } from "@fortawesome/free-solid-svg-icons";
import Button from "react-bootstrap/Button";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const ModuleOverview: React.FC = () => {
+
+ // @ts-ignore
+ useEffect(() => {window.Holder.run()});
+
return (
<>
<MyBreadcrumbs />
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/ModuleResources/index.tsx b/frontend/src/components/pages/ModuleResources/index.tsx
index 1214bef8ffa54757af78193ba8d1062c715b9184..4a3b84784e4faefd5f75cd3819e1280f87fe15f1 100644
--- a/frontend/src/components/pages/ModuleResources/index.tsx
+++ b/frontend/src/components/pages/ModuleResources/index.tsx
@@ -68,11 +68,11 @@ const ModuleResources: React.FC<{ year: string}> = ({year}) => {
</InputGroup.Append>
</InputGroup>
-
- {quickAccessItems.length > 0 ? <QuickAccessView quickAccessItems={quickAccessItems} /> : null}
{scope === "" && folderItems.length > 0 ? <ResourcesFolderView folderItems={folderItems} /> : null}
- {currentDirectoryFiles.length > 0 ? <CurrentDirectoryView documentItems={currentDirectoryFiles} /> : null}
- </>
+ {scope !== "" && currentDirectoryFiles.length > 0 ? <CurrentDirectoryView documentItems={currentDirectoryFiles} /> : null}
+ {scope === "" && quickAccessItems.length > 0 ? <QuickAccessView quickAccessItems={quickAccessItems} /> : null}
+
+ </>
);
};
@@ -179,7 +179,7 @@ let resourceItems = [
title: "Pandor Lab",
type: "File",
tags: [],
- folder: "Pandor Lab",
+ folder: "Pandora Lab",
id: 11,
},
{
diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx
index f2a991e79f246ffe3dac1f4b748ba7bdfeea1bd1..4c5e610323f12504f2875f4d283247fe0481f068 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("In Progress");
+
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">
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 3de938560ac25e20c8355255dde83dae8fc9ff9f..b2dc38e0f256e3fc314c912d23002e9e0fc6e4cb 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -5,11 +5,11 @@ import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(
- <React.StrictMode>
+ <React.Fragment>
<Router>
<App />
</Router>
- </React.StrictMode>,
+ </React.Fragment>,
document.getElementById("root")
);