Refactor app.tsx and apply prittier

.gitignore

 .DS_Store
-
+.vscode/*
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies

.vscode/settings.json

-{
-	"liveServer.settings.port": 5501
-}
\ No newline at end of file

frontend/src/components/App.tsx

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

frontend/src/components/atoms/BottomBarItem/index.tsx

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

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"

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>

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

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

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}

frontend/src/components/pages/StandardView/index.tsx

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