From 03633d95ce452766ab14d6be93665f9df1778b2b Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Fri, 7 Aug 2020 17:13:41 +0100
Subject: [PATCH] Add empty page for course overview
---
.../src/components/atoms/ModuleCard/index.tsx | 3 +-
.../components/molecules/Dandruff/index.tsx | 4 +-
.../molecules/SideBarTabGroup/index.tsx | 35 +++++++++------
.../components/organisms/LeftBar/index.tsx | 44 ++++++++++++++++---
.../components/pages/ModuleOverview/index.tsx | 16 +++++++
.../pages/ModuleOverview/style.module.scss | 20 +++++++++
.../components/pages/StandardView/index.tsx | 18 +++++---
7 files changed, 111 insertions(+), 29 deletions(-)
create mode 100644 frontend/src/components/pages/ModuleOverview/index.tsx
create mode 100644 frontend/src/components/pages/ModuleOverview/style.module.scss
diff --git a/frontend/src/components/atoms/ModuleCard/index.tsx b/frontend/src/components/atoms/ModuleCard/index.tsx
index fb7bf1295..a88616a8f 100644
--- a/frontend/src/components/atoms/ModuleCard/index.tsx
+++ b/frontend/src/components/atoms/ModuleCard/index.tsx
@@ -3,6 +3,7 @@ import Card from "react-bootstrap/Card";
import styles from "./style.module.scss";
import classNames from "classnames";
import Col from "react-bootstrap/Col";
+import { Link } from "react-router-dom";
export interface ModuleCardProps {
module: {title: string;
@@ -22,7 +23,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({
</Card.Header>
<Card.Img style={{ borderRadius: 0 }} variant="top" src={module.image} />
<Card.Body>
- <Card.Title>{module.title}</Card.Title>
+ <Card.Title ><Link to={`modules/${module.code}`} style={{color: "black"}}>{module.title}</Link></Card.Title>
</Card.Body>
<Card.Footer>
<small className={classNames(styles.moduleCardProgressText)}>
diff --git a/frontend/src/components/molecules/Dandruff/index.tsx b/frontend/src/components/molecules/Dandruff/index.tsx
index c89cf21c0..01dc02c9b 100644
--- a/frontend/src/components/molecules/Dandruff/index.tsx
+++ b/frontend/src/components/molecules/Dandruff/index.tsx
@@ -6,8 +6,8 @@ import classNames from "classnames";
import withBreadcrumbs from "react-router-breadcrumbs-hoc";
import { Link } from "react-router-dom";
-// delete [{ path: "/", breadcrumb: null }] to enable Home in front of breadcrumbs
-const MyBreadcrumbs = withBreadcrumbs([{ path: "/", breadcrumb: null }])(
+// delete [{ path: "/", breadcrumb: "" }] to enable Home in front of breadcrumbs
+const MyBreadcrumbs = withBreadcrumbs([{ path: "/", breadcrumb: "" }])(
({ breadcrumbs }: { breadcrumbs: any }) => (
<Breadcrumb className={styles.breadcrumb}>
{breadcrumbs.map(
diff --git a/frontend/src/components/molecules/SideBarTabGroup/index.tsx b/frontend/src/components/molecules/SideBarTabGroup/index.tsx
index 38b8d7015..4f4ca535f 100644
--- a/frontend/src/components/molecules/SideBarTabGroup/index.tsx
+++ b/frontend/src/components/molecules/SideBarTabGroup/index.tsx
@@ -9,15 +9,33 @@ export interface SideBarTabGroupProp {
title: string;
buttons: {
title: string;
- icon: IconDefinition;
+ icon?: IconDefinition;
active?: boolean;
}[];
}
const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
- title,
+ title,
buttons,
}: SideBarTabGroupProp) => {
+ let displayButtons = buttons.map(({ title, icon, active }) => {
+ let FAicon;
+ if (icon) {
+ FAicon = (
+ <FontAwesomeIcon className={styles.tabGroupButtonSvg} icon={icon} />
+ );
+ }
+ return (
+ <Button
+ className={classNames({ active: active }, styles.tabGroupButton)}
+ key={title}
+ >
+ {title}
+ {FAicon}
+ </Button>
+ );
+ });
+
return (
<>
<h1 className={styles.tabGroupHeading}>{title}</h1>
@@ -25,18 +43,7 @@ const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
className={"btn-group-vertical " + styles.tabGroupButtonGroup}
role="group"
>
- {buttons.map(({ title, icon, active }) => (
- <Button
- className={classNames({ active: active }, styles.tabGroupButton)}
- key={title}
- >
- {title}
- <FontAwesomeIcon
- className={styles.tabGroupButtonSvg}
- icon={icon}
- />
- </Button>
- ))}
+ {displayButtons}
</div>
</>
);
diff --git a/frontend/src/components/organisms/LeftBar/index.tsx b/frontend/src/components/organisms/LeftBar/index.tsx
index 4e341200f..2996e36b9 100644
--- a/frontend/src/components/organisms/LeftBar/index.tsx
+++ b/frontend/src/components/organisms/LeftBar/index.tsx
@@ -1,33 +1,63 @@
import React from "react";
import SideBarTabGroup from "components/molecules/SideBarTabGroup";
import styles from "./style.module.scss";
-import { faSpinner, faSortNumericDown, faSortAlphaDown, faSnowflake } from "@fortawesome/free-solid-svg-icons";
+import { Route , Switch} from "react-router-dom";
const LeftBar: React.FC = () => {
- let buttons = [
+ let sortButtons = [
{
title: "Progress",
- icon: faSpinner,
},
{
title: "Module Title",
- icon: faSortAlphaDown,
active: true,
},
{
title: "Module Code",
- icon: faSortNumericDown,
},
{
- icon: faSnowflake,
title: "Term",
+ },
+ ];
+
+ let outlineButtons = [
+ {
+ title: "Overview",
+ active: true,
+ },
+ {
+ title: "Coursework",
+ },
+ {
+ title: "Materials",
+ },
+ {
+ title: "Piazza",
+ },
+ {
+ title: "Policies",
+ },
+ {
+ title: "FAQs",
},
];
return (
<div id={styles.leftbarWrapper}>
<p className={styles.leftbarStatus}>1 UPDATE</p>
- <SideBarTabGroup title="Sort" buttons={buttons}/>
+
+ <Switch>
+
+ <Route path="/modules/:id">
+ <SideBarTabGroup title="Outline" buttons={outlineButtons}/>
+ </Route>
+
+ <Route path="/">
+ <SideBarTabGroup title="Sort" buttons={sortButtons}/>
+ </Route>
+
+ </Switch>
+
</div>
);
};
diff --git a/frontend/src/components/pages/ModuleOverview/index.tsx b/frontend/src/components/pages/ModuleOverview/index.tsx
new file mode 100644
index 000000000..cd9f1408c
--- /dev/null
+++ b/frontend/src/components/pages/ModuleOverview/index.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import styles from "./style.module.scss";
+import Container from "react-bootstrap/Container";
+
+import classNames from "classnames";
+import Dandruff from "components/molecules/Dandruff";
+
+const ModuleOverview: React.FC = () => {
+ return (
+ <Container className={classNames("p-4", styles.moduleContainer)}>
+ <Dandruff heading="Overview"/>
+ </Container>
+ );
+};
+
+export default ModuleOverview;
diff --git a/frontend/src/components/pages/ModuleOverview/style.module.scss b/frontend/src/components/pages/ModuleOverview/style.module.scss
new file mode 100644
index 000000000..9d5aac5a1
--- /dev/null
+++ b/frontend/src/components/pages/ModuleOverview/style.module.scss
@@ -0,0 +1,20 @@
+@import "assets/scss/custom";
+
+.moduleContainer {
+ padding-top: 30px;
+ margin-bottom: 72px;
+}
+
+.moduleSectionHeader {
+ margin-top: 30px;
+}
+
+.moduleParagraph {
+ margin-top: 15px;
+}
+
+@media (max-width: 992px) {
+}
+
+@media (min-width: 992px) {
+}
diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx
index 9d55a5753..a540bebb9 100644
--- a/frontend/src/components/pages/StandardView/index.tsx
+++ b/frontend/src/components/pages/StandardView/index.tsx
@@ -1,7 +1,9 @@
import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import ExamplePage from "components/templates/ExamplePage";
+import ModuleOverview from "components/pages/ModuleOverview";
import LeftBar from "components/organisms/LeftBar";
+
import "./style.scss";
import RightBar from "components/organisms/RightBar";
import classNames from "classnames";
@@ -34,22 +36,28 @@ const StandardView: React.FC<StandardViewProps> = ({
<RightBar />
<div id="sidenav-overlay" onClick={(e) => onOverlayClick(e)}></div>
<Switch>
- <Route exact path="/" render={() => <Redirect to="/home" />} />
- <Route path="/home" key="Home">
+ <Route path="/home">
<ExamplePage name="Home" />
</Route>
- <Route path="/modules" key="Modules">
+ <Route exact path="/modules">
<ModuleList />
</Route>
- <Route path="/timetable" key="Timetable">
+ <Route path="/modules/:id/overview">
+ <ModuleOverview />
+ </Route>
+ <Route path="/modules/:id" render={props => <Redirect to={`/modules/${props.match.params.id}/overview`} />} />
+
+ <Route path="/timetable">
<ExamplePage name="Timetable" />
</Route>
- <Route path="/exams" key="Exams">
+ <Route path="/exams">
<ExamplePage name="Exams" />
</Route>
+
+ <Route path="/" render={() => <Redirect to="/home" />} />
</Switch>
</div>
);
--
GitLab