diff --git a/.gitignore b/.gitignore
index dd12d46f71eb1e2150221b00b3de3fb23d235317..591390c2ab9afe534bbd630d87ed3c4803ff9542 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 b1e6aa6bf139a4d906870535e8853bbbf353dd13..0000000000000000000000000000000000000000
--- 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 b0180052af685338fb3b52c72c634db7ff7ba521..69e3ab67048cf27158f5fbcf60f2b9ca21dacf14 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 5758739b9ab46858ca805dd27d33ece91894f2fb..45876cd7b109ea5ef7db2ffa5d4071cc3b215ab8 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 cde151d208443ed01c5194433d74193af2714101..7058c9b6fc26c3ff194e83dac0aa9cb0c9f68a9c 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 dd7cbdd7e9621393f0d911c6279bc7ee2a6d1100..0984caed5826f799718300bba364258ff7c27a13 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 85f043c19574932542cc95e39c6e55d881915c61..24d66f20ed8fc807d6c483a4ddc5e145f3d40aee 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 2a66a331c4406dc0d644c7fd7bfe10c769edb007..d7aec38633d9e47a83f0393789ceb99f76b3cf06 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 0000000000000000000000000000000000000000..205dc1a5133e073ce9c4601a7bdc9ca40eead9ca
--- /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;