Refactor icon click to use react states

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;

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

+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;

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>
   );
 };
 

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

 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>
   );
 };

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}/>