From 540ddb36644ddaafd95ae3bcd35e380ddd4de30f Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Mon, 3 Aug 2020 13:58:22 +0100
Subject: [PATCH] Refactor bottom and top bar
---
frontend/src/components/atoms/.gitkeep | 0
.../components/atoms/BottomBarItem/index.tsx | 34 ++++++++++++++
.../components/atoms/NavBarTabItem/index.tsx | 29 ++++++++++++
.../molecules/NavBarBrand/index.tsx | 34 ++++++++++++++
.../molecules/NavBarTabGroup/index.tsx | 27 +++++++++++
.../components/organisms/BottomBar/index.tsx | 19 +-------
.../src/components/organisms/TopBar/index.tsx | 45 +++----------------
frontend/src/components/templates/.gitkeep | 0
.../ExampleButtons.tsx} | 0
.../src/components/templates/ExamplePage.tsx | 4 +-
.../ExampleToasts.tsx} | 0
11 files changed, 133 insertions(+), 59 deletions(-)
delete mode 100644 frontend/src/components/atoms/.gitkeep
create mode 100644 frontend/src/components/atoms/BottomBarItem/index.tsx
create mode 100644 frontend/src/components/atoms/NavBarTabItem/index.tsx
create mode 100644 frontend/src/components/molecules/NavBarBrand/index.tsx
create mode 100644 frontend/src/components/molecules/NavBarTabGroup/index.tsx
delete mode 100644 frontend/src/components/templates/.gitkeep
rename frontend/src/components/{molecules/Buttons.tsx => templates/ExampleButtons.tsx} (100%)
rename frontend/src/components/{molecules/Toasts.tsx => templates/ExampleToasts.tsx} (100%)
diff --git a/frontend/src/components/atoms/.gitkeep b/frontend/src/components/atoms/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/src/components/atoms/BottomBarItem/index.tsx b/frontend/src/components/atoms/BottomBarItem/index.tsx
new file mode 100644
index 000000000..5758739b9
--- /dev/null
+++ b/frontend/src/components/atoms/BottomBarItem/index.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import Button from "react-bootstrap/Button";
+import {
+ IconDefinition
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { NavLink } from "react-router-dom";
+
+export interface BottomBarItemProps {
+ page: {
+ name: string;
+ path: string;
+ icon: IconDefinition;
+ };
+}
+
+const BottomBarItem: React.FC<BottomBarItemProps> = ({ page }: BottomBarItemProps) => {
+
+ return (
+ <Button
+ activeClassName="active"
+ as={NavLink}
+ to={page.path}
+ id={"bottom-" + page.name}
+ key={page.name}
+ >
+ <div className="button-holder">
+ <FontAwesomeIcon icon={page.icon} size="lg" />
+ </div>
+ </Button>
+ );
+};
+
+export default BottomBarItem;
diff --git a/frontend/src/components/atoms/NavBarTabItem/index.tsx b/frontend/src/components/atoms/NavBarTabItem/index.tsx
new file mode 100644
index 000000000..cde151d20
--- /dev/null
+++ b/frontend/src/components/atoms/NavBarTabItem/index.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import Nav from "react-bootstrap/Nav";
+import { NavLink } from "react-router-dom";
+
+export interface NavBarItemProps {
+ page: {
+ name: string;
+ path: string;
+ };
+}
+
+const NavBarTabItem: React.FC<NavBarItemProps> = ({
+ page,
+}: NavBarItemProps) => {
+ return (
+ <Nav.Item key={page.name}>
+ <Nav.Link
+ as={NavLink}
+ activeClassName="active"
+ to={page.path}
+ className="page-button"
+ >
+ {page.name}
+ </Nav.Link>
+ </Nav.Item>
+ );
+};
+
+export default NavBarTabItem;
diff --git a/frontend/src/components/molecules/NavBarBrand/index.tsx b/frontend/src/components/molecules/NavBarBrand/index.tsx
new file mode 100644
index 000000000..4fa3f7c5d
--- /dev/null
+++ b/frontend/src/components/molecules/NavBarBrand/index.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import Navbar from "react-bootstrap/Navbar";
+import logo from "images/logo.svg";
+import { Link } from "react-router-dom";
+
+const NavBarBrand: React.FC = () => {
+
+ 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>
+ );
+};
+
+export default NavBarBrand;
diff --git a/frontend/src/components/molecules/NavBarTabGroup/index.tsx b/frontend/src/components/molecules/NavBarTabGroup/index.tsx
new file mode 100644
index 000000000..dd7cbdd7e
--- /dev/null
+++ b/frontend/src/components/molecules/NavBarTabGroup/index.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import Navbar from "react-bootstrap/Navbar";
+import Nav from "react-bootstrap/Nav";
+import NavBarTabItem from "components/atoms/NavBarTabItem";
+
+export interface NavBarTabGroupProps {
+ pages: {
+ name: string;
+ path: string;
+ }[];
+}
+
+const NavBarTabGroup: React.FC<NavBarTabGroupProps> = ({
+ pages,
+}: NavBarTabGroupProps) => {
+ return (
+ <Navbar className="page-button-group m-auto" id="responsive-navbar-nav">
+ <Nav variant="pills">
+ {pages.map((page) => (
+ <NavBarTabItem page={page} />
+ ))}
+ </Nav>
+ </Navbar>
+ );
+};
+
+export default NavBarTabGroup;
diff --git a/frontend/src/components/organisms/BottomBar/index.tsx b/frontend/src/components/organisms/BottomBar/index.tsx
index c84d30d21..85f043c19 100644
--- a/frontend/src/components/organisms/BottomBar/index.tsx
+++ b/frontend/src/components/organisms/BottomBar/index.tsx
@@ -1,12 +1,10 @@
import React from "react";
import Navbar from "react-bootstrap/Navbar";
-import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import {
IconDefinition
} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { NavLink } from "react-router-dom";
+import BottomBarItem from "components/atoms/BottomBarItem"
export interface BottomBarProps {
pages: {
@@ -17,24 +15,11 @@ export interface BottomBarProps {
}
const BottomBar: React.FC<BottomBarProps> = ({ pages }: BottomBarProps) => {
- const BottomBarItems = pages.map(({ name, path, icon }) => (
- <Button
- activeClassName="active"
- as={NavLink}
- 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}
+ {pages.map((page => <BottomBarItem page={page}/>))}
</ButtonGroup>
</Navbar>
);
diff --git a/frontend/src/components/organisms/TopBar/index.tsx b/frontend/src/components/organisms/TopBar/index.tsx
index 2704b81ce..494e168b1 100644
--- a/frontend/src/components/organisms/TopBar/index.tsx
+++ b/frontend/src/components/organisms/TopBar/index.tsx
@@ -1,10 +1,9 @@
import React from "react";
import Container from "react-bootstrap/Container";
import Navbar from "react-bootstrap/Navbar";
-import Nav from "react-bootstrap/Nav";
-import logo from "images/logo.svg";
import userPic from "images/user.png";
-import { Link, NavLink } from "react-router-dom";
+import NavBarTabGroup from "components/molecules/NavBarTabGroup";
+import NavBarBrand from "components/molecules/NavBarBrand";
export interface TopBarProps {
pages: {
@@ -14,48 +13,14 @@ export interface TopBarProps {
}
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>
- <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 className="page-button-group m-auto" id="responsive-navbar-nav">
- <Nav variant="pills">{NavItems}</Nav>
- </Navbar>
+ <NavBarBrand/>
+
+ <NavBarTabGroup pages={pages}/>
<img
src={userPic}
diff --git a/frontend/src/components/templates/.gitkeep b/frontend/src/components/templates/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/src/components/molecules/Buttons.tsx b/frontend/src/components/templates/ExampleButtons.tsx
similarity index 100%
rename from frontend/src/components/molecules/Buttons.tsx
rename to frontend/src/components/templates/ExampleButtons.tsx
diff --git a/frontend/src/components/templates/ExamplePage.tsx b/frontend/src/components/templates/ExamplePage.tsx
index 44b976578..77d9e7e9e 100644
--- a/frontend/src/components/templates/ExamplePage.tsx
+++ b/frontend/src/components/templates/ExamplePage.tsx
@@ -3,8 +3,8 @@ 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";
+import ButtonsShowcase from "components/templates/ExampleButtons";
+import ToastsShowcase from "components/templates/ExampleToasts";
export interface ExamplePageProps {
name: string;
diff --git a/frontend/src/components/molecules/Toasts.tsx b/frontend/src/components/templates/ExampleToasts.tsx
similarity index 100%
rename from frontend/src/components/molecules/Toasts.tsx
rename to frontend/src/components/templates/ExampleToasts.tsx
--
GitLab