From eb7e04a9682d1bbae42a2003a46edb85bea45468 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Mon, 3 Aug 2020 14:45:33 +0100
Subject: [PATCH] Refactor icon click to use react states
---
frontend/src/components/App.tsx | 76 ++++++++++++-------
.../molecules/LeftBarTabGroup/index.tsx | 24 ++++++
.../molecules/NavBarBrand/index.tsx | 42 +++++-----
.../components/organisms/LeftBar/index.tsx | 30 +-------
.../src/components/organisms/TopBar/index.tsx | 7 +-
5 files changed, 98 insertions(+), 81 deletions(-)
create mode 100644 frontend/src/components/molecules/LeftBarTabGroup/index.tsx
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index 1eb7ab212..b0180052a 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -13,35 +13,53 @@ import {
} from "@fortawesome/free-solid-svg-icons";
import LeftBar from "./organisms/LeftBar";
-const App: React.FC = () => {
- const horizontalBarPages = [
- { name: "Courses", path: "/courses", icon: faChalkboardTeacher },
- { name: "Timetable", path: "/timetable", icon: faCalendarWeek },
- { name: "Exams", path: "/exams", icon: faBookOpen },
- { name: "Other", path: "/other", icon: faEllipsisH },
- ];
-
- const topBarRoutes = horizontalBarPages.map(({ name, path }) => (
- <Route path={path} key={name}>
- <ExamplePage name={name} />
- </Route>
- ));
-
- return (
- <>
- <TopBar pages={horizontalBarPages} />
-
- <div id="wrapper">
- <LeftBar/>
- <Switch>
- <Route exact path="/" render={() => <Redirect to="/courses" />} />
- {topBarRoutes}
- </Switch>
- </div>
-
- <BottomBar pages={horizontalBarPages} />
- </>
- );
+type MyState = {
+ isToggled: boolean;
};
+class App extends React.Component<{}, MyState> {
+ constructor(props: {}) {
+ super(props);
+ this.state = {isToggled: false};
+ }
+
+ handleIconClick(e: React.MouseEvent<HTMLImageElement>) {
+ e.preventDefault();
+ this.setState(state => ({
+ isToggled: !state.isToggled
+ }));
+ }
+
+ render() {
+ const horizontalBarPages = [
+ { name: "Courses", path: "/courses", icon: faChalkboardTeacher },
+ { name: "Timetable", path: "/timetable", icon: faCalendarWeek },
+ { name: "Exams", path: "/exams", icon: faBookOpen },
+ { name: "Other", path: "/other", icon: faEllipsisH },
+ ];
+
+ const topBarRoutes = horizontalBarPages.map(({ name, path }) => (
+ <Route path={path} key={name}>
+ <ExamplePage name={name} />
+ </Route>
+ ));
+
+ return (
+ <>
+ <TopBar pages={horizontalBarPages} onIconClick={e => this.handleIconClick(e)}/>
+
+ <div id="wrapper" className={this.state.isToggled ? "toggled" : ""}>
+ <LeftBar />
+ <Switch>
+ <Route exact path="/" render={() => <Redirect to="/courses" />} />
+ {topBarRoutes}
+ </Switch>
+ </div>
+
+ <BottomBar pages={horizontalBarPages} />
+ </>
+ );
+ }
+}
+
export default App;
diff --git a/frontend/src/components/molecules/LeftBarTabGroup/index.tsx b/frontend/src/components/molecules/LeftBarTabGroup/index.tsx
new file mode 100644
index 000000000..4fc8c620c
--- /dev/null
+++ b/frontend/src/components/molecules/LeftBarTabGroup/index.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import Button from "react-bootstrap/Button";
+
+const LeftBarTabGroup: React.FC = () => {
+ return (
+ <>
+ <h1 className="exam-outline-heading">Sort</h1>
+ <div
+ className="btn-group-vertical"
+ role="group"
+ id="exam-outline-button-group"
+ >
+ <Button className="exam-outline-button">Progress</Button>
+ <Button className="exam-outline-button-a active" type="button">
+ Course Title
+ </Button>
+ <Button className="exam-outline-button">Course Code</Button>
+ <Button className="exam-outline-button">Term</Button>
+ </div>
+ </>
+ );
+};
+
+export default LeftBarTabGroup;
diff --git a/frontend/src/components/molecules/NavBarBrand/index.tsx b/frontend/src/components/molecules/NavBarBrand/index.tsx
index 4fa3f7c5d..e4e9ac7d5 100644
--- a/frontend/src/components/molecules/NavBarBrand/index.tsx
+++ b/frontend/src/components/molecules/NavBarBrand/index.tsx
@@ -3,31 +3,27 @@ import Navbar from "react-bootstrap/Navbar";
import logo from "images/logo.svg";
import { Link } from "react-router-dom";
-const NavBarBrand: React.FC = () => {
+interface NavBarBrandProps {
+ onClick: (event: React.MouseEvent<HTMLImageElement>) => void;
+}
+const NavBarBrand: React.FC<NavBarBrandProps> = ({
+ onClick,
+}: NavBarBrandProps) => {
return (
- <Navbar.Brand className="brand-container">
- <img
- src={logo}
- width="30"
- height="30"
- className="d-inline-block align-center brand-image"
- alt="React Bootstrap logo"
- onClick={(e) => {
- // TODO: change to using react states
- e.preventDefault();
- const wrapper = document.querySelector("#wrapper") || document.createElement("div");
- if (wrapper.classList.contains("toggled")) {
- wrapper.classList.remove("toggled");
- } else {
- wrapper.classList.add("toggled");
- }
- }}
- />{" "}
- <Link to="/" style={{ textDecoration: "none" }}>
- Scientia
- </Link>
- </Navbar.Brand>
+ <Navbar.Brand className="brand-container">
+ <img
+ src={logo}
+ width="30"
+ height="30"
+ className="d-inline-block align-center brand-image"
+ alt="React Bootstrap logo"
+ onClick={(e) => onClick(e)}
+ />{" "}
+ <Link to="/" style={{ textDecoration: "none" }}>
+ Scientia
+ </Link>
+ </Navbar.Brand>
);
};
diff --git a/frontend/src/components/organisms/LeftBar/index.tsx b/frontend/src/components/organisms/LeftBar/index.tsx
index c8fab87e6..850725646 100644
--- a/frontend/src/components/organisms/LeftBar/index.tsx
+++ b/frontend/src/components/organisms/LeftBar/index.tsx
@@ -1,34 +1,12 @@
import React from "react";
-import Button from "react-bootstrap/Button";
+import LeftBarTabGroup from "components/molecules/LeftBarTabGroup";
const LeftBar: React.FC = () => {
return (
<div id="sidebar-wrapper">
- <div>
- <p className="sidebar-status">1 UPDATE</p>
- <h1 className="exam-outline-heading">Sort</h1>
- </div>
- <div
- className="btn-group-vertical"
- role="group"
- id="exam-outline-button-group"
- >
- <Button className="exam-outline-button">
- Progress
- </Button>
- <Button
- className="exam-outline-button-a active"
- type="button"
- >
- Course Title
- </Button>
- <Button className="exam-outline-button">
- Course Code
- </Button>
- <Button className="exam-outline-button">
- Term
- </Button>
- </div>
+ <p className="sidebar-status">1 UPDATE</p>
+
+ <LeftBarTabGroup />
</div>
);
};
diff --git a/frontend/src/components/organisms/TopBar/index.tsx b/frontend/src/components/organisms/TopBar/index.tsx
index 494e168b1..2a66a331c 100644
--- a/frontend/src/components/organisms/TopBar/index.tsx
+++ b/frontend/src/components/organisms/TopBar/index.tsx
@@ -9,16 +9,17 @@ export interface TopBarProps {
pages: {
name: string;
path: string;
- }[];
+ }[];
+ onIconClick: (event: React.MouseEvent<HTMLImageElement>) => void;
}
-const TopBar: React.FC<TopBarProps> = ({ pages }: TopBarProps) => {
+const TopBar: React.FC<TopBarProps> = ({ pages, onIconClick}: TopBarProps) => {
return (
<Navbar className="top-bar" sticky="top" expand="lg" variant="light">
<Container fluid>
- <NavBarBrand/>
+ <NavBarBrand onClick={onIconClick}/>
<NavBarTabGroup pages={pages}/>
--
GitLab