summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--frontend/src/components/navigation/AppNavbarComponent.js9
-rw-r--r--frontend/src/components/navigation/HomeNavbar.js9
-rw-r--r--frontend/src/components/navigation/LogoutButton.js5
-rw-r--r--frontend/src/components/navigation/Navbar.js131
-rw-r--r--frontend/yarn.lock40
5 files changed, 103 insertions, 91 deletions
diff --git a/frontend/src/components/navigation/AppNavbarComponent.js b/frontend/src/components/navigation/AppNavbarComponent.js
index 7a1c2462..c5de3d0b 100644
--- a/frontend/src/components/navigation/AppNavbarComponent.js
+++ b/frontend/src/components/navigation/AppNavbarComponent.js
@@ -1,22 +1,23 @@
import React from 'react'
import FontAwesome from 'react-fontawesome'
import { Link } from 'react-router-dom'
+import { NavLink } from 'reactstrap'
import Navbar, { NavItem } from './Navbar'
import './Navbar.sass'
const AppNavbarComponent = ({ project, fullWidth }) => (
<Navbar fullWidth={fullWidth}>
<NavItem route="/projects">
- <Link className="nav-link" title="My Projects" to="/projects">
+ <NavLink tag={Link} title="My Projects" to="/projects">
<FontAwesome name="list" className="mr-2" />
My Projects
- </Link>
+ </NavLink>
</NavItem>
{project ? (
<NavItem>
- <Link className="nav-link" title="Current Project" to={`/projects/${project._id}`}>
+ <NavLink tag={Link} title="Current Project" to={`/projects/${project._id}`}>
<span>{project.name}</span>
- </Link>
+ </NavLink>
</NavItem>
) : undefined}
</Navbar>
diff --git a/frontend/src/components/navigation/HomeNavbar.js b/frontend/src/components/navigation/HomeNavbar.js
index e22933af..08d222ea 100644
--- a/frontend/src/components/navigation/HomeNavbar.js
+++ b/frontend/src/components/navigation/HomeNavbar.js
@@ -1,13 +1,12 @@
import React from 'react'
+import { NavItem, NavLink } from 'reactstrap'
import Navbar from './Navbar'
import './Navbar.sass'
const ScrollNavItem = ({ id, name }) => (
- <li className="nav-item">
- <a className="nav-link" href={id}>
- {name}
- </a>
- </li>
+ <NavItem>
+ <NavLink href={id}>{name}</NavLink>
+ </NavItem>
)
const HomeNavbar = () => (
diff --git a/frontend/src/components/navigation/LogoutButton.js b/frontend/src/components/navigation/LogoutButton.js
index e3de2ec7..78b02b44 100644
--- a/frontend/src/components/navigation/LogoutButton.js
+++ b/frontend/src/components/navigation/LogoutButton.js
@@ -2,11 +2,12 @@ import PropTypes from 'prop-types'
import React from 'react'
import FontAwesome from 'react-fontawesome'
import { Link } from 'react-router-dom'
+import { NavLink } from 'reactstrap'
const LogoutButton = ({ onLogout }) => (
- <Link className="logout nav-link" title="Sign out" to="#" onClick={onLogout}>
+ <NavLink tag={Link} className="logout" title="Sign out" to="#" onClick={onLogout}>
<FontAwesome name="power-off" size="lg" />
- </Link>
+ </NavLink>
)
LogoutButton.propTypes = {
diff --git a/frontend/src/components/navigation/Navbar.js b/frontend/src/components/navigation/Navbar.js
index 164a2309..55f98900 100644
--- a/frontend/src/components/navigation/Navbar.js
+++ b/frontend/src/components/navigation/Navbar.js
@@ -1,6 +1,15 @@
-import classNames from 'classnames'
-import React from 'react'
-import { Link, withRouter } from 'react-router-dom'
+import React, { useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import {
+ Navbar as RNavbar,
+ NavItem as RNavItem,
+ NavLink,
+ NavbarBrand,
+ NavbarToggler,
+ Collapse,
+ Nav,
+ Container,
+} from 'reactstrap'
import { userIsLoggedIn } from '../../auth/index'
import Login from '../../containers/auth/Login'
import Logout from '../../containers/auth/Logout'
@@ -9,9 +18,6 @@ import './Navbar.sass'
export const NAVBAR_HEIGHT = 60
-export const NavItem = withRouter((props) => <NavItemWithoutRoute {...props} />)
-export const LoggedInSection = withRouter((props) => <LoggedInSectionWithoutRoute {...props} />)
-
const GitHubLink = () => (
<a
href="https://github.com/atlarge-research/opendc"
@@ -22,64 +28,65 @@ const GitHubLink = () => (
</a>
)
-const NavItemWithoutRoute = ({ route, location, children }) => (
- <li className={classNames('nav-item clickable', location.pathname === route ? 'active' : undefined)}>{children}</li>
-)
+export const NavItem = ({ route, children }) => {
+ const location = useLocation()
+ return <RNavItem active={location.pathname === route}>{children}</RNavItem>
+}
-const LoggedInSectionWithoutRoute = ({ location }) => (
- <ul className="navbar-nav auth-links">
- {userIsLoggedIn() ? (
- [
- location.pathname === '/' ? (
- <NavItem route="/projects" key="projects">
- <Link className="nav-link" title="My Projects" to="/projects">
- My Projects
- </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">
- <GitHubLink />
- <Login visible={true} />
- </NavItem>
- )}
- </ul>
-)
+export const LoggedInSection = () => {
+ const location = useLocation()
+ return (
+ <Nav navbar className="auth-links">
+ {userIsLoggedIn() ? (
+ [
+ location.pathname === '/' ? (
+ <NavItem route="/projects" key="projects">
+ <NavLink tag={Link} title="My Projects" to="/projects">
+ My Projects
+ </NavLink>
+ </NavItem>
+ ) : (
+ <NavItem route="/profile" key="profile">
+ <NavLink tag={Link} title="My Profile" to="/profile">
+ <ProfileName />
+ </NavLink>
+ </NavItem>
+ ),
+ <NavItem route="logout" key="logout">
+ <Logout />
+ </NavItem>,
+ ]
+ ) : (
+ <NavItem route="login">
+ <GitHubLink />
+ <Login visible={true} />
+ </NavItem>
+ )}
+ </Nav>
+ )
+}
-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>
+const Navbar = ({ fullWidth, children }) => {
+ const [isOpen, setIsOpen] = useState(false)
+ const toggle = () => setIsOpen(!isOpen)
- <div className="collapse navbar-collapse" id="navbarSupportedContent">
- <ul className="navbar-nav mr-auto">{children}</ul>
- <LoggedInSection />
- </div>
- </div>
- </nav>
-)
+ return (
+ <RNavbar fixed="top" color="light" light expand="lg" id="navbar">
+ <Container fluid={fullWidth}>
+ <NavbarToggler onClick={toggle} />
+ <NavbarBrand tag={Link} to="/" title="OpenDC" className="opendc-brand">
+ <img src="/img/logo.png" alt="OpenDC" />
+ </NavbarBrand>
+
+ <Collapse isOpen={isOpen} navbar>
+ <Nav className="mr-auto" navbar>
+ {children}
+ </Nav>
+ <LoggedInSection />
+ </Collapse>
+ </Container>
+ </RNavbar>
+ )
+}
export default Navbar
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index b77c38f6..7398bf38 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1069,14 +1069,14 @@
dependencies:
regenerator-runtime "^0.13.4"
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
version "7.10.3"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.3.tgz#670d002655a7c366540c67f6fd3342cd09500364"
integrity sha512-RzGO0RLSdokm9Ipe/YD+7ww8X2Ro79qiXZF3HU9ljrM+qnJmH1Vqth+hbiQZy761LnMJTMitHDuKVYTk3k4dLw==
dependencies:
regenerator-runtime "^0.13.4"
-"@babel/runtime@^7.2.0":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.2.0":
version "7.12.1"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
@@ -5463,7 +5463,7 @@ hmac-drbg@^1.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7428,13 +7428,12 @@ mimic-fn@^2.0.0, mimic-fn@^2.1.0:
integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
mini-create-react-context@^0.3.0:
- version "0.3.2"
- resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189"
- integrity sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==
+ version "0.3.3"
+ resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.3.tgz#b1b2bc6604d3a6c5d9752bad7692615410ebb38e"
+ integrity sha512-TtF6hZE59SGmS4U8529qB+jJFeW6asTLDIpPgvPLSCsooAwJS7QprHIFTqv9/Qh3NdLwQxFYgiHX5lqb6jqzPA==
dependencies:
- "@babel/runtime" "^7.4.0"
- gud "^1.0.0"
- tiny-warning "^1.0.2"
+ "@babel/runtime" "^7.12.1"
+ tiny-warning "^1.0.3"
mini-css-extract-plugin@0.9.0:
version "0.9.0"
@@ -9463,7 +9462,7 @@ react-google-login@~5.1.14:
"@types/react" "*"
prop-types "^15.6.0"
-react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
+react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9505,15 +9504,15 @@ react-reconciler@^0.25.1:
scheduler "^0.19.1"
react-redux@~7.2.0:
- version "7.2.0"
- resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d"
- integrity sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==
+ version "7.2.2"
+ resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.2.tgz#03862e803a30b6b9ef8582dadcc810947f74b736"
+ integrity sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==
dependencies:
- "@babel/runtime" "^7.5.5"
- hoist-non-react-statics "^3.3.0"
+ "@babel/runtime" "^7.12.1"
+ hoist-non-react-statics "^3.3.2"
loose-envify "^1.4.0"
prop-types "^15.7.2"
- react-is "^16.9.0"
+ react-is "^16.13.1"
react-resize-detector@^2.3.0:
version "2.3.0"
@@ -9873,11 +9872,16 @@ regenerator-runtime@^0.11.0:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
+regenerator-runtime@^0.13.3:
version "0.13.5"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
+regenerator-runtime@^0.13.4:
+ version "0.13.7"
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+ integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
+
regenerator-transform@^0.14.2:
version "0.14.4"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.4.tgz#5266857896518d1616a78a0479337a30ea974cc7"
@@ -11251,7 +11255,7 @@ tiny-invariant@^1.0.2:
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
-tiny-warning@^1.0.0, tiny-warning@^1.0.2:
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 14:29:24 +0000