From de8f12d74faef5fa3f9e38d1340948cab2d06ea3 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Wed, 1 Jul 2020 13:33:31 +0200
Subject: Manually generate IDs

---
 frontend/src/components/navigation/AppNavbar.js    | 106 ++++++-------
 frontend/src/components/navigation/HomeNavbar.js   |  38 ++---
 frontend/src/components/navigation/LogoutButton.js |  22 +--
 frontend/src/components/navigation/Navbar.js       | 176 ++++++++++-----------
 frontend/src/components/navigation/Navbar.sass     |  36 ++---
 5 files changed, 189 insertions(+), 189 deletions(-)

(limited to 'frontend/src/components/navigation')

diff --git a/frontend/src/components/navigation/AppNavbar.js b/frontend/src/components/navigation/AppNavbar.js
index 1a35f85d..451bb6a3 100644
--- a/frontend/src/components/navigation/AppNavbar.js
+++ b/frontend/src/components/navigation/AppNavbar.js
@@ -1,56 +1,56 @@
-import React from "react";
-import FontAwesome from "react-fontawesome";
-import { Link } from "react-router-dom";
-import Navbar, { NavItem } from "./Navbar";
-import "./Navbar.css";
+import React from 'react'
+import FontAwesome from 'react-fontawesome'
+import { Link } from 'react-router-dom'
+import Navbar, { NavItem } from './Navbar'
+import './Navbar.css'
 
 const AppNavbar = ({ simulationId, inSimulation, fullWidth }) => (
-  <Navbar fullWidth={fullWidth}>
-    {inSimulation ? (
-      <NavItem route={"/simulations/" + simulationId}>
-        <Link
-          className="nav-link"
-          title="Construction"
-          to={"/simulations/" + simulationId}
-        >
-          <FontAwesome name="industry" className="mr-2" />
-          Construction
-        </Link>
-      </NavItem>
-    ) : (
-      undefined
-    )}
-    {inSimulation ? (
-      <NavItem route={"/simulations/" + simulationId + "/experiments"}>
-        <Link
-          className="nav-link"
-          title="Experiments"
-          to={"/simulations/" + simulationId + "/experiments"}
-        >
-          <FontAwesome name="play" className="mr-2" />
-          Experiments
-        </Link>
-      </NavItem>
-    ) : (
-      undefined
-    )}
-    <NavItem route="/simulations">
-      <Link className="nav-link" title="My Simulations" to="/simulations">
-        <FontAwesome name="list" className="mr-2" />
-        My Simulations
-      </Link>
-    </NavItem>
-    <NavItem route="email">
-      <a
-        className="nav-link"
-        title="Support"
-        href="mailto:opendc@atlarge-research.com"
-      >
-        <FontAwesome name="envelope" className="mr-2" />
-        Support
-      </a>
-    </NavItem>
-  </Navbar>
-);
+    <Navbar fullWidth={fullWidth}>
+        {inSimulation ? (
+            <NavItem route={'/simulations/' + simulationId}>
+                <Link
+                    className="nav-link"
+                    title="Construction"
+                    to={'/simulations/' + simulationId}
+                >
+                    <FontAwesome name="industry" className="mr-2"/>
+                    Construction
+                </Link>
+            </NavItem>
+        ) : (
+            undefined
+        )}
+        {inSimulation ? (
+            <NavItem route={'/simulations/' + simulationId + '/experiments'}>
+                <Link
+                    className="nav-link"
+                    title="Experiments"
+                    to={'/simulations/' + simulationId + '/experiments'}
+                >
+                    <FontAwesome name="play" className="mr-2"/>
+                    Experiments
+                </Link>
+            </NavItem>
+        ) : (
+            undefined
+        )}
+        <NavItem route="/simulations">
+            <Link className="nav-link" title="My Simulations" to="/simulations">
+                <FontAwesome name="list" className="mr-2"/>
+                My Simulations
+            </Link>
+        </NavItem>
+        <NavItem route="email">
+            <a
+                className="nav-link"
+                title="Support"
+                href="mailto:opendc@atlarge-research.com"
+            >
+                <FontAwesome name="envelope" className="mr-2"/>
+                Support
+            </a>
+        </NavItem>
+    </Navbar>
+)
 
-export default AppNavbar;
+export default AppNavbar
diff --git a/frontend/src/components/navigation/HomeNavbar.js b/frontend/src/components/navigation/HomeNavbar.js
index 5d08bf3c..5bb6721d 100644
--- a/frontend/src/components/navigation/HomeNavbar.js
+++ b/frontend/src/components/navigation/HomeNavbar.js
@@ -1,24 +1,24 @@
-import React from "react";
-import Navbar from "./Navbar";
-import "./Navbar.css";
+import React from 'react'
+import Navbar from './Navbar'
+import './Navbar.css'
 
 const ScrollNavItem = ({ id, name }) => (
-  <li className="nav-item">
-    <a className="nav-link" href={id}>
-      {name}
-    </a>
-  </li>
-);
+    <li className="nav-item">
+        <a className="nav-link" href={id}>
+            {name}
+        </a>
+    </li>
+)
 
 const HomeNavbar = () => (
-  <Navbar fullWidth={false}>
-    <ScrollNavItem id="#stakeholders" name="Stakeholders" />
-    <ScrollNavItem id="#modeling" name="Modeling" />
-    <ScrollNavItem id="#simulation" name="Simulation" />
-    <ScrollNavItem id="#technologies" name="Technologies" />
-    <ScrollNavItem id="#team" name="Team" />
-    <ScrollNavItem id="#contact" name="Contact" />
-  </Navbar>
-);
+    <Navbar fullWidth={false}>
+        <ScrollNavItem id="#stakeholders" name="Stakeholders"/>
+        <ScrollNavItem id="#modeling" name="Modeling"/>
+        <ScrollNavItem id="#simulation" name="Simulation"/>
+        <ScrollNavItem id="#technologies" name="Technologies"/>
+        <ScrollNavItem id="#team" name="Team"/>
+        <ScrollNavItem id="#contact" name="Contact"/>
+    </Navbar>
+)
 
-export default HomeNavbar;
+export default HomeNavbar
diff --git a/frontend/src/components/navigation/LogoutButton.js b/frontend/src/components/navigation/LogoutButton.js
index 800a3da8..905e1ae9 100644
--- a/frontend/src/components/navigation/LogoutButton.js
+++ b/frontend/src/components/navigation/LogoutButton.js
@@ -1,16 +1,16 @@
-import PropTypes from "prop-types";
-import React from "react";
-import FontAwesome from "react-fontawesome";
-import { Link } from "react-router-dom";
+import PropTypes from 'prop-types'
+import React from 'react'
+import FontAwesome from 'react-fontawesome'
+import { Link } from 'react-router-dom'
 
 const LogoutButton = ({ onLogout }) => (
-  <Link className="logout nav-link" title="Sign out" to="#" onClick={onLogout}>
-    <FontAwesome name="power-off" size="lg" />
-  </Link>
-);
+    <Link className="logout nav-link" title="Sign out" to="#" onClick={onLogout}>
+        <FontAwesome name="power-off" size="lg"/>
+    </Link>
+)
 
 LogoutButton.propTypes = {
-  onLogout: PropTypes.func.isRequired
-};
+    onLogout: PropTypes.func.isRequired,
+}
 
-export default LogoutButton;
+export default LogoutButton
diff --git a/frontend/src/components/navigation/Navbar.js b/frontend/src/components/navigation/Navbar.js
index 44458949..d22f637e 100644
--- a/frontend/src/components/navigation/Navbar.js
+++ b/frontend/src/components/navigation/Navbar.js
@@ -1,102 +1,102 @@
-import classNames from "classnames";
-import React from "react";
-import { Link, withRouter } from "react-router-dom";
-import { userIsLoggedIn } from "../../auth/index";
-import Login from "../../containers/auth/Login";
-import Logout from "../../containers/auth/Logout";
-import ProfileName from "../../containers/auth/ProfileName";
-import "./Navbar.css";
+import classNames from 'classnames'
+import React from 'react'
+import { Link, withRouter } from 'react-router-dom'
+import { userIsLoggedIn } from '../../auth/index'
+import Login from '../../containers/auth/Login'
+import Logout from '../../containers/auth/Logout'
+import ProfileName from '../../containers/auth/ProfileName'
+import './Navbar.css'
 
-export const NAVBAR_HEIGHT = 60;
+export const NAVBAR_HEIGHT = 60
 
-export const NavItem = withRouter(props => <NavItemWithoutRoute {...props} />);
+export const NavItem = withRouter(props => <NavItemWithoutRoute {...props} />)
 export const LoggedInSection = withRouter(props => (
-  <LoggedInSectionWithoutRoute {...props} />
-));
+    <LoggedInSectionWithoutRoute {...props} />
+))
 
 const GitHubLink = () => (
-  <a
-    href="https://github.com/atlarge-research/opendc"
-    className="ml-2 mr-3 text-dark"
-    style={{ position: "relative", top: 7 }}
-  >
-    <span className="fa fa-github fa-2x" />
-  </a>
-);
+    <a
+        href="https://github.com/atlarge-research/opendc"
+        className="ml-2 mr-3 text-dark"
+        style={{ position: 'relative', top: 7 }}
+    >
+        <span className="fa fa-github fa-2x"/>
+    </a>
+)
 
 const NavItemWithoutRoute = ({ route, location, children }) => (
-  <li
-    className={classNames(
-      "nav-item",
-      location.pathname === route ? "active" : undefined
-    )}
-  >
-    {children}
-  </li>
-);
+    <li
+        className={classNames(
+            'nav-item',
+            location.pathname === route ? 'active' : undefined,
+        )}
+    >
+        {children}
+    </li>
+)
 
 const LoggedInSectionWithoutRoute = ({ location }) => (
-  <ul className="navbar-nav auth-links">
-    {userIsLoggedIn() ? (
-      [
-        location.pathname === "/" ? (
-          <NavItem route="/simulations" key="simulations">
-            <Link className="nav-link" title="My Simulations" to="/simulations">
-              My Simulations
-            </Link>
-          </NavItem>
+    <ul className="navbar-nav auth-links">
+        {userIsLoggedIn() ? (
+            [
+                location.pathname === '/' ? (
+                    <NavItem route="/simulations" key="simulations">
+                        <Link className="nav-link" title="My Simulations" to="/simulations">
+                            My Simulations
+                        </Link>
+                    </NavItem>
+                ) : (
+                    <NavItem route="/profile" key="profile">
+                        <Link className="nav-link" title="My Profile" to="/profile">
+                            <ProfileName/>
+                        </Link>
+                    </NavItem>
+                ),
+                <NavItem route="logout" key="logout">
+                    <Logout/>
+                </NavItem>,
+            ]
         ) : (
-          <NavItem route="/profile" key="profile">
-            <Link className="nav-link" title="My Profile" to="/profile">
-              <ProfileName />
-            </Link>
-          </NavItem>
-        ),
-        <NavItem route="logout" key="logout">
-          <Logout />
-        </NavItem>
-      ]
-    ) : (
-      <NavItem route="login">
-        <GitHubLink />
-        <Login visible={true} />
-      </NavItem>
-    )}
-  </ul>
-);
+            <NavItem route="login">
+                <GitHubLink/>
+                <Login visible={true}/>
+            </NavItem>
+        )}
+    </ul>
+)
 
 const Navbar = ({ fullWidth, children }) => (
-  <nav
-    className="navbar fixed-top navbar-expand-lg navbar-light bg-faded"
-    id="navbar"
-  >
-    <div className={fullWidth ? "container-fluid" : "container"}>
-      <button
-        className="navbar-toggler navbar-toggler-right"
-        type="button"
-        data-toggle="collapse"
-        data-target="#navbarSupportedContent"
-        aria-controls="navbarSupportedContent"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-      >
-        <span className="navbar-toggler-icon" />
-      </button>
-      <Link
-        className="navbar-brand opendc-brand"
-        to="/"
-        title="OpenDC"
-        onClick={() => window.scrollTo(0, 0)}
-      >
-        <img src="/img/logo.png" alt="OpenDC" />
-      </Link>
+    <nav
+        className="navbar fixed-top navbar-expand-lg navbar-light bg-faded"
+        id="navbar"
+    >
+        <div className={fullWidth ? 'container-fluid' : 'container'}>
+            <button
+                className="navbar-toggler navbar-toggler-right"
+                type="button"
+                data-toggle="collapse"
+                data-target="#navbarSupportedContent"
+                aria-controls="navbarSupportedContent"
+                aria-expanded="false"
+                aria-label="Toggle navigation"
+            >
+                <span className="navbar-toggler-icon"/>
+            </button>
+            <Link
+                className="navbar-brand opendc-brand"
+                to="/"
+                title="OpenDC"
+                onClick={() => window.scrollTo(0, 0)}
+            >
+                <img src="/img/logo.png" alt="OpenDC"/>
+            </Link>
 
-      <div className="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul className="navbar-nav mr-auto">{children}</ul>
-        <LoggedInSection />
-      </div>
-    </div>
-  </nav>
-);
+            <div className="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul className="navbar-nav mr-auto">{children}</ul>
+                <LoggedInSection/>
+            </div>
+        </div>
+    </nav>
+)
 
-export default Navbar;
+export default Navbar
diff --git a/frontend/src/components/navigation/Navbar.sass b/frontend/src/components/navigation/Navbar.sass
index 94c52936..a270bc6b 100644
--- a/frontend/src/components/navigation/Navbar.sass
+++ b/frontend/src/components/navigation/Navbar.sass
@@ -2,28 +2,28 @@
 @import ../../style-globals/_variables.sass
 
 .navbar
-  border-top: $blue 3px solid
-  border-bottom: $gray-semi-dark 1px solid
-  color: $gray-very-dark
-  background: #fafafb
+    border-top: $blue 3px solid
+    border-bottom: $gray-semi-dark 1px solid
+    color: $gray-very-dark
+    background: #fafafb
 
 .opendc-brand
-  display: inline-block
-  color: $gray-very-dark
+    display: inline-block
+    color: $gray-very-dark
 
-  +transition(background, $transition-length)
+    +transition(background, $transition-length)
 
-  img
-    position: relative
-    bottom: 3px
-    display: inline-block
-    width: 30px
+    img
+        position: relative
+        bottom: 3px
+        display: inline-block
+        width: 30px
 
 .login
-  height: 40px
-  background: $blue
-  border: none
-  +clickable
+    height: 40px
+    background: $blue
+    border: none
+    +clickable
 
-  &:hover
-    background: $blue-dark
+    &:hover
+        background: $blue-dark
-- 
cgit v1.2.3