From 0be748c9309b6da553f80bcbabf67744344f5676 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Fri, 31 Jul 2020 18:48:13 +0100
Subject: [PATCH] Refactor code with props
---
frontend/src/components/App.tsx | 42 ++++++------
.../organisms/BottomBar/BottomBar.tsx | 44 ++++++++-----
.../components/organisms/TopBar/TopBar.tsx | 65 +++++++------------
.../src/components/pages/ExampleExams.tsx | 25 -------
.../src/components/pages/ExampleOther.tsx | 25 -------
.../src/components/pages/ExampleTimetable.tsx | 25 -------
.../ExamplePage.tsx} | 9 ++-
7 files changed, 80 insertions(+), 155 deletions(-)
delete mode 100644 frontend/src/components/pages/ExampleExams.tsx
delete mode 100644 frontend/src/components/pages/ExampleOther.tsx
delete mode 100644 frontend/src/components/pages/ExampleTimetable.tsx
rename frontend/src/components/{pages/ExampleCourses.tsx => templates/ExamplePage.tsx} (76%)
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index 9ce41502f..d6dee6591 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -1,35 +1,39 @@
import React from "react";
import "./App.scss";
-import ExampleCourses from "./pages/ExampleCourses";
-import ExampleExams from "./pages/ExampleExams";
-import ExampleOther from "./pages/ExampleOther";
-import ExampleTimetable from "./pages/ExampleTimetable";
+import ExamplePage from "./templates/ExamplePage";
import TopBar from "./organisms/TopBar/TopBar";
import BottomBar from "./organisms/BottomBar/BottomBar";
import { Redirect, Switch, Route } from "react-router-dom";
+import {
+ faBookOpen,
+ faEllipsisH,
+ faCalendarWeek,
+ faChalkboardTeacher,
+} from "@fortawesome/free-solid-svg-icons";
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 />
+ <TopBar pages={horizontalBarPages}/>
<Switch>
<Route exact path="/" render={() => <Redirect to="/courses" />} />
-
- <Route path="/courses">
- <ExampleCourses />
- </Route>
- <Route path="/timetable">
- <ExampleTimetable />
- </Route>
- <Route path="/exams">
- <ExampleExams />
- </Route>
- <Route path="/other">
- <ExampleOther />
- </Route>
+ {topBarRoutes}
</Switch>
- <BottomBar />
+ <BottomBar pages={horizontalBarPages}/>
</>
);
};
diff --git a/frontend/src/components/organisms/BottomBar/BottomBar.tsx b/frontend/src/components/organisms/BottomBar/BottomBar.tsx
index 60bacb30f..1f3aae152 100644
--- a/frontend/src/components/organisms/BottomBar/BottomBar.tsx
+++ b/frontend/src/components/organisms/BottomBar/BottomBar.tsx
@@ -8,33 +8,45 @@ import {
faEllipsisH,
faCalendarWeek,
faChalkboardTeacher,
+ IconDefinition,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { NavLink, Link } from "react-router-dom";
-const BottomBar: React.FC = () => {
+export interface BottomBarProps {
+ pages: {
+ name: string;
+ path: string;
+ icon: IconDefinition;
+}[];
+}
+
+const BottomBar: React.FC<BottomBarProps> = ({pages}: BottomBarProps) => {
+
+ const BottomBarItems = pages.map(({ name, path, icon }) => (
+ <Button
+ active
+ as={Link}
+ // activeClassName="button-active"
+ to={path}
+ id={"bottom-" + name}
+ key={name}
+ >
+ <div className="button-holder">
+ <FontAwesomeIcon icon={icon} size="lg" />
+ </div>
+ </Button>
+ ));
+
return (
<Navbar className="bottom-bar footer">
<ButtonGroup aria-label="Basic example" className="bottom-bar-buttons">
+ {BottomBarItems}
<Button active className="button-active" id="bottom-courses">
<div className="button-holder">
<FontAwesomeIcon icon={faChalkboardTeacher} size="lg" />
</div>
</Button>
- <Button className="button-inactive" id="bottom-timetable">
- <div className="button-holder">
- <FontAwesomeIcon icon={faCalendarWeek} size="lg" />
- </div>
- </Button>
- <Button className="button-inactive" id="bottom-exams">
- <div className="button-holder">
- <FontAwesomeIcon icon={faBookOpen} size="lg" />
- </div>
- </Button>
- <Button className="button-inactive" id="bottom-other">
- <div className="button-holder">
- <FontAwesomeIcon icon={faEllipsisH} size="lg" />
- </div>
- </Button>
</ButtonGroup>
</Navbar>
);
diff --git a/frontend/src/components/organisms/TopBar/TopBar.tsx b/frontend/src/components/organisms/TopBar/TopBar.tsx
index e08df66fd..50319370b 100644
--- a/frontend/src/components/organisms/TopBar/TopBar.tsx
+++ b/frontend/src/components/organisms/TopBar/TopBar.tsx
@@ -7,7 +7,27 @@ import userPic from "images/user.png";
import "./style.scss";
import { Link, NavLink } from "react-router-dom";
-const TopBar: React.FC = () => {
+export interface TopBarProps {
+ pages: {
+ name: string;
+ path: string;
+ }[];
+}
+
+const TopBar: React.FC<TopBarProps> = ({ pages }: TopBarProps) => {
+ const NavItems = pages.map(({ name, path }) => (
+ <Nav.Item key={name}>
+ <Nav.Link
+ as={NavLink}
+ activeClassName="active"
+ to={path}
+ className="page-button"
+ >
+ {name}
+ </Nav.Link>
+ </Nav.Item>
+ ));
+
return (
<Navbar className="top-bar" sticky="top" expand="lg" variant="light">
<Container fluid>
@@ -23,48 +43,7 @@ const TopBar: React.FC = () => {
</Navbar.Brand>
<Navbar className="page-button-group m-auto" id="responsive-navbar-nav">
- <Nav variant="pills" defaultActiveKey="/timetable">
- <Nav.Item>
- <Nav.Link
- as={NavLink}
- activeClassName="active"
- to="/courses"
- className="page-button"
- >
- Courses
- </Nav.Link>
- </Nav.Item>
- <Nav.Item>
- <Nav.Link
- as={NavLink}
- activeClassName="active"
- to="/timetable"
- className="page-button"
- >
- Timetable
- </Nav.Link>
- </Nav.Item>
- <Nav.Item>
- <Nav.Link
- as={NavLink}
- activeClassName="active"
- to="/exams"
- className="page-button"
- >
- Exams
- </Nav.Link>
- </Nav.Item>
- <Nav.Item>
- <Nav.Link
- as={NavLink}
- activeClassName="active"
- to="/other"
- className="page-button"
- >
- Other
- </Nav.Link>
- </Nav.Item>
- </Nav>
+ <Nav variant="pills">{NavItems}</Nav>
</Navbar>
<img
diff --git a/frontend/src/components/pages/ExampleExams.tsx b/frontend/src/components/pages/ExampleExams.tsx
deleted file mode 100644
index b4db7e03d..000000000
--- a/frontend/src/components/pages/ExampleExams.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-
-import Jumbotron from "react-bootstrap/Jumbotron";
-import Container from "react-bootstrap/Container";
-
-import ButtonsShowcase from "components/molecules/Buttons";
-import ToastsShowcase from "components/molecules/Toasts";
-
-const ExamplePage: React.FC = () => {
- return (
- <Container className="p-3">
- <Jumbotron>
- <h1 className="header">
- Welcome To Exams
- </h1>
- </Jumbotron>
- <h2>Buttons</h2>
- <ButtonsShowcase />
- <h2>Toasts</h2>
- <ToastsShowcase />
- </Container>
- );
-};
-
-export default ExamplePage;
diff --git a/frontend/src/components/pages/ExampleOther.tsx b/frontend/src/components/pages/ExampleOther.tsx
deleted file mode 100644
index 422e5b598..000000000
--- a/frontend/src/components/pages/ExampleOther.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-
-import Jumbotron from "react-bootstrap/Jumbotron";
-import Container from "react-bootstrap/Container";
-
-import ButtonsShowcase from "components/molecules/Buttons";
-import ToastsShowcase from "components/molecules/Toasts";
-
-const ExampleCourses: React.FC = () => {
- return (
- <Container className="p-3">
- <Jumbotron>
- <h1 className="header">
- Welcome To Other
- </h1>
- </Jumbotron>
- <h2>Buttons</h2>
- <ButtonsShowcase />
- <h2>Toasts</h2>
- <ToastsShowcase />
- </Container>
- );
-};
-
-export default ExampleCourses;
diff --git a/frontend/src/components/pages/ExampleTimetable.tsx b/frontend/src/components/pages/ExampleTimetable.tsx
deleted file mode 100644
index e1e5831b1..000000000
--- a/frontend/src/components/pages/ExampleTimetable.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-
-import Jumbotron from "react-bootstrap/Jumbotron";
-import Container from "react-bootstrap/Container";
-
-import ButtonsShowcase from "components/molecules/Buttons";
-import ToastsShowcase from "components/molecules/Toasts";
-
-const ExamplePage: React.FC = () => {
- return (
- <Container className="p-3">
- <Jumbotron>
- <h1 className="header">
- Welcome To Timetable
- </h1>
- </Jumbotron>
- <h2>Buttons</h2>
- <ButtonsShowcase />
- <h2>Toasts</h2>
- <ToastsShowcase />
- </Container>
- );
-};
-
-export default ExamplePage;
diff --git a/frontend/src/components/pages/ExampleCourses.tsx b/frontend/src/components/templates/ExamplePage.tsx
similarity index 76%
rename from frontend/src/components/pages/ExampleCourses.tsx
rename to frontend/src/components/templates/ExamplePage.tsx
index 8035b01b9..44b976578 100644
--- a/frontend/src/components/pages/ExampleCourses.tsx
+++ b/frontend/src/components/templates/ExamplePage.tsx
@@ -6,12 +6,17 @@ import Container from "react-bootstrap/Container";
import ButtonsShowcase from "components/molecules/Buttons";
import ToastsShowcase from "components/molecules/Toasts";
-const ExamplePage: React.FC = () => {
+export interface ExamplePageProps {
+ name: string;
+}
+
+
+const ExamplePage: React.FC<ExamplePageProps> = ({name} : ExamplePageProps) => {
return (
<Container className="p-3">
<Jumbotron>
<h1 className="header">
- Welcome To Courses
+ Welcome To {name}
</h1>
</Jumbotron>
<h2>Buttons</h2>
--
GitLab