diff options
| author | Georgios Andreadis <g.andreadis@student.tudelft.nl> | 2017-10-04 22:49:07 +0200 |
|---|---|---|
| committer | Georgios Andreadis <g.andreadis@student.tudelft.nl> | 2017-10-04 22:49:25 +0200 |
| commit | 751a9ef3a12c952fe179f256d854d0c4aa37e28e (patch) | |
| tree | 241fc22c592a277526e73cc70ea0f95d5a8a7b29 /src/components/navigation | |
| parent | 9257d89ec2e22b65ffecc7dc7cf67b7a74c34d60 (diff) | |
Apply prettier to codebase
Diffstat (limited to 'src/components/navigation')
| -rw-r--r-- | src/components/navigation/AppNavbar.js | 97 | ||||
| -rw-r--r-- | src/components/navigation/HomeNavbar.js | 28 | ||||
| -rw-r--r-- | src/components/navigation/LogoutButton.js | 12 | ||||
| -rw-r--r-- | src/components/navigation/Navbar.js | 140 |
4 files changed, 147 insertions, 130 deletions
diff --git a/src/components/navigation/AppNavbar.js b/src/components/navigation/AppNavbar.js index 90724a3e..ab4b8412 100644 --- a/src/components/navigation/AppNavbar.js +++ b/src/components/navigation/AppNavbar.js @@ -1,53 +1,58 @@ -import React from 'react'; +import React from "react"; import FontAwesome from "react-fontawesome"; import Mailto from "react-mailto"; -import {Link} from "react-router-dom"; -import Navbar, {NavItem} from "./Navbar"; +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"> - <Mailto className="nav-link" title="Support" email="opendc@atlarge-research.com" - headers={{subject: "[support]"}}> - <FontAwesome name="envelope" className="mr-2"/> - Support - </Mailto> - </NavItem> - </Navbar> +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"> + <Mailto + className="nav-link" + title="Support" + email="opendc@atlarge-research.com" + headers={{ subject: "[support]" }} + > + <FontAwesome name="envelope" className="mr-2" /> + Support + </Mailto> + </NavItem> + </Navbar> ); export default AppNavbar; diff --git a/src/components/navigation/HomeNavbar.js b/src/components/navigation/HomeNavbar.js index 4d821325..5d08bf3c 100644 --- a/src/components/navigation/HomeNavbar.js +++ b/src/components/navigation/HomeNavbar.js @@ -1,22 +1,24 @@ -import React from 'react'; +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> +const ScrollNavItem = ({ id, name }) => ( + <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; diff --git a/src/components/navigation/LogoutButton.js b/src/components/navigation/LogoutButton.js index d58776dc..800a3da8 100644 --- a/src/components/navigation/LogoutButton.js +++ b/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 { 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> +const LogoutButton = ({ onLogout }) => ( + <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; diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js index 4981bb53..fa2516f5 100644 --- a/src/components/navigation/Navbar.js +++ b/src/components/navigation/Navbar.js @@ -1,7 +1,7 @@ import classNames from "classnames"; -import React from 'react'; -import {Link, withRouter} from "react-router-dom"; -import {userIsLoggedIn} from "../../auth/index"; +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"; @@ -9,73 +9,83 @@ import "./Navbar.css"; export const NAVBAR_HEIGHT = 60; -export const NavItem = withRouter(props => <NavItemWithoutRoute {...props}/>); -export const LoggedInSection = withRouter(props => <LoggedInSectionWithoutRoute {...props}/>); +export const NavItem = withRouter(props => <NavItemWithoutRoute {...props} />); +export const LoggedInSection = withRouter(props => ( + <LoggedInSectionWithoutRoute {...props} /> +)); -const NavItemWithoutRoute = ({route, location, children}) => ( - <li className={classNames("nav-item", location.pathname === route ? "active" : undefined)}> - {children} - </li> +const NavItemWithoutRoute = ({ route, location, children }) => ( + <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> : - <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"> - <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"/> +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> + ) : ( + <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"> + <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> - <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; |
