From 9070f472d42fbe30cb1ebbdcd96fcd981414e532 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Mon, 3 Aug 2020 15:17:16 +0100
Subject: [PATCH] Refactor app.tsx and apply prittier
---
.gitignore | 2 +-
.vscode/settings.json | 3 --
frontend/src/components/App.tsx | 46 ++++++++-----------
.../components/atoms/BottomBarItem/index.tsx | 10 ++--
.../components/atoms/NavBarTabItem/index.tsx | 2 +-
.../molecules/NavBarTabGroup/index.tsx | 2 +-
.../components/organisms/BottomBar/index.tsx | 11 ++---
.../src/components/organisms/TopBar/index.tsx | 12 ++---
.../components/pages/StandardView/index.tsx | 35 ++++++++++++++
9 files changed, 71 insertions(+), 52 deletions(-)
delete mode 100644 .vscode/settings.json
create mode 100644 frontend/src/components/pages/StandardView/index.tsx
diff --git a/.gitignore b/.gitignore
index dd12d46f7..591390c2a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,5 @@
.DS_Store
-
+.vscode/*
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index b1e6aa6bf..000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "liveServer.settings.port": 5501
-}
\ No newline at end of file
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index b0180052a..69e3ab670 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -1,33 +1,31 @@
import React from "react";
import "./App.scss";
-import ExamplePage from "./templates/ExamplePage";
import TopBar from "./organisms/TopBar";
import BottomBar from "./organisms/BottomBar";
-import { Redirect, Switch, Route } from "react-router-dom";
import {
faBookOpen,
faEllipsisH,
faCalendarWeek,
faChalkboardTeacher,
} from "@fortawesome/free-solid-svg-icons";
-import LeftBar from "./organisms/LeftBar";
+import StandardView from "./pages/StandardView";
type MyState = {
- isToggled: boolean;
+ isToggled: boolean;
};
class App extends React.Component<{}, MyState> {
- constructor(props: {}) {
+ constructor(props: {}) {
super(props);
- this.state = {isToggled: false};
- }
-
+ this.state = { isToggled: false };
+ }
+
handleIconClick(e: React.MouseEvent<HTMLImageElement>) {
- e.preventDefault();
- this.setState(state => ({
- isToggled: !state.isToggled
- }));
+ e.preventDefault();
+ this.setState((state) => ({
+ isToggled: !state.isToggled,
+ }));
}
render() {
@@ -38,23 +36,17 @@ class App extends React.Component<{}, MyState> {
{ 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>
+ <TopBar
+ pages={horizontalBarPages}
+ onIconClick={(e) => this.handleIconClick(e)}
+ />
+
+ <StandardView
+ pages={horizontalBarPages}
+ isToggled={this.state.isToggled}
+ />
<BottomBar pages={horizontalBarPages} />
</>
diff --git a/frontend/src/components/atoms/BottomBarItem/index.tsx b/frontend/src/components/atoms/BottomBarItem/index.tsx
index 5758739b9..45876cd7b 100644
--- a/frontend/src/components/atoms/BottomBarItem/index.tsx
+++ b/frontend/src/components/atoms/BottomBarItem/index.tsx
@@ -1,8 +1,6 @@
import React from "react";
import Button from "react-bootstrap/Button";
-import {
- IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { NavLink } from "react-router-dom";
@@ -14,15 +12,15 @@ export interface BottomBarItemProps {
};
}
-const BottomBarItem: React.FC<BottomBarItemProps> = ({ page }: BottomBarItemProps) => {
-
+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" />
diff --git a/frontend/src/components/atoms/NavBarTabItem/index.tsx b/frontend/src/components/atoms/NavBarTabItem/index.tsx
index cde151d20..7058c9b6f 100644
--- a/frontend/src/components/atoms/NavBarTabItem/index.tsx
+++ b/frontend/src/components/atoms/NavBarTabItem/index.tsx
@@ -13,7 +13,7 @@ const NavBarTabItem: React.FC<NavBarItemProps> = ({
page,
}: NavBarItemProps) => {
return (
- <Nav.Item key={page.name}>
+ <Nav.Item>
<Nav.Link
as={NavLink}
activeClassName="active"
diff --git a/frontend/src/components/molecules/NavBarTabGroup/index.tsx b/frontend/src/components/molecules/NavBarTabGroup/index.tsx
index dd7cbdd7e..0984caed5 100644
--- a/frontend/src/components/molecules/NavBarTabGroup/index.tsx
+++ b/frontend/src/components/molecules/NavBarTabGroup/index.tsx
@@ -17,7 +17,7 @@ const NavBarTabGroup: React.FC<NavBarTabGroupProps> = ({
<Navbar className="page-button-group m-auto" id="responsive-navbar-nav">
<Nav variant="pills">
{pages.map((page) => (
- <NavBarTabItem page={page} />
+ <NavBarTabItem page={page} key={page.name} />
))}
</Nav>
</Navbar>
diff --git a/frontend/src/components/organisms/BottomBar/index.tsx b/frontend/src/components/organisms/BottomBar/index.tsx
index 85f043c19..24d66f20e 100644
--- a/frontend/src/components/organisms/BottomBar/index.tsx
+++ b/frontend/src/components/organisms/BottomBar/index.tsx
@@ -1,10 +1,8 @@
import React from "react";
import Navbar from "react-bootstrap/Navbar";
import ButtonGroup from "react-bootstrap/ButtonGroup";
-import {
- IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
-import BottomBarItem from "components/atoms/BottomBarItem"
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import BottomBarItem from "components/atoms/BottomBarItem";
export interface BottomBarProps {
pages: {
@@ -15,11 +13,12 @@ export interface BottomBarProps {
}
const BottomBar: React.FC<BottomBarProps> = ({ pages }: BottomBarProps) => {
-
return (
<Navbar className="bottom-bar footer">
<ButtonGroup aria-label="Basic example" className="bottom-bar-buttons">
- {pages.map((page => <BottomBarItem page={page}/>))}
+ {pages.map((page) => (
+ <BottomBarItem page={page} key={page.name} />
+ ))}
</ButtonGroup>
</Navbar>
);
diff --git a/frontend/src/components/organisms/TopBar/index.tsx b/frontend/src/components/organisms/TopBar/index.tsx
index 2a66a331c..d7aec3863 100644
--- a/frontend/src/components/organisms/TopBar/index.tsx
+++ b/frontend/src/components/organisms/TopBar/index.tsx
@@ -9,19 +9,17 @@ export interface TopBarProps {
pages: {
name: string;
path: string;
- }[];
- onIconClick: (event: React.MouseEvent<HTMLImageElement>) => void;
+ }[];
+ onIconClick: (event: React.MouseEvent<HTMLImageElement>) => void;
}
-const TopBar: React.FC<TopBarProps> = ({ pages, onIconClick}: TopBarProps) => {
-
+const TopBar: React.FC<TopBarProps> = ({ pages, onIconClick }: TopBarProps) => {
return (
<Navbar className="top-bar" sticky="top" expand="lg" variant="light">
<Container fluid>
+ <NavBarBrand onClick={onIconClick} />
- <NavBarBrand onClick={onIconClick}/>
-
- <NavBarTabGroup pages={pages}/>
+ <NavBarTabGroup pages={pages} />
<img
src={userPic}
diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx
new file mode 100644
index 000000000..205dc1a51
--- /dev/null
+++ b/frontend/src/components/pages/StandardView/index.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { Route, Switch, Redirect } from "react-router-dom";
+import ExamplePage from "components/templates/ExamplePage";
+import LeftBar from "components/organisms/LeftBar";
+
+interface StandardViewProps {
+ pages: {
+ name: string;
+ path: string;
+ }[];
+ isToggled: boolean;
+}
+
+const StandardView: React.FC<StandardViewProps> = ({
+ pages,
+ isToggled,
+}: StandardViewProps) => {
+ const topBarRoutes = pages.map(({ name, path }) => (
+ <Route path={path} key={name}>
+ <ExamplePage name={name} />
+ </Route>
+ ));
+
+ return (
+ <div id="wrapper" className={isToggled ? "toggled" : ""}>
+ <LeftBar />
+ <Switch>
+ <Route exact path="/" render={() => <Redirect to="/courses" />} />
+ {topBarRoutes}
+ </Switch>
+ </div>
+ );
+};
+
+export default StandardView;
--
GitLab