diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/navigation')
3 files changed, 44 insertions, 26 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js index 8c28c542..7b1eaae2 100644 --- a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js +++ b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js @@ -1,6 +1,6 @@ import React from 'react' import FontAwesome from 'react-fontawesome' -import { Link } from 'react-router-dom' +import Link from 'next/link' import { NavLink } from 'reactstrap' import Navbar, { NavItem } from './Navbar' import {} from './Navbar.module.scss' @@ -8,16 +8,20 @@ import {} from './Navbar.module.scss' const AppNavbarComponent = ({ project, fullWidth }) => ( <Navbar fullWidth={fullWidth}> <NavItem route="/projects"> - <NavLink tag={Link} title="My Projects" to="/projects"> - <FontAwesome name="list" className="mr-2" /> - My Projects - </NavLink> + <Link href="/projects"> + <NavLink title="My Projects"> + <FontAwesome name="list" className="mr-2" /> + My Projects + </NavLink> + </Link> </NavItem> {project ? ( <NavItem> - <NavLink tag={Link} title="Current Project" to={`/projects/${project._id}`}> - <span>{project.name}</span> - </NavLink> + <Link href={`/projects/${project._id}`}> + <NavLink title="Current Project"> + <span>{project.name}</span> + </NavLink> + </Link> </NavItem> ) : undefined} </Navbar> diff --git a/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js b/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js index 78b02b44..0c0feeb1 100644 --- a/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js +++ b/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js @@ -1,11 +1,10 @@ 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 }) => ( - <NavLink tag={Link} className="logout" title="Sign out" to="#" onClick={onLogout}> + <NavLink className="logout" title="Sign out" onClick={onLogout}> <FontAwesome name="power-off" size="lg" /> </NavLink> ) diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js index bf18f1c4..90f55665 100644 --- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js +++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js @@ -1,5 +1,6 @@ import React, { useState } from 'react' -import { Link, useLocation } from 'react-router-dom' +import Link from 'next/link' +import { useRouter } from 'next/router' import { Navbar as RNavbar, NavItem as RNavItem, @@ -15,6 +16,7 @@ import Login from '../../containers/auth/Login' import Logout from '../../containers/auth/Logout' import ProfileName from '../../containers/auth/ProfileName' import { login, navbar, opendcBrand } from './Navbar.module.scss' +import { useAuth } from '../../auth/hook' export const NAVBAR_HEIGHT = 60 @@ -24,32 +26,45 @@ const GitHubLink = () => ( className="ml-2 mr-3 text-dark" style={{ position: 'relative', top: 7 }} > - <span className="fa fa-github fa-2x" /> + <span aria-hidden className="fa fa-github fa-2x" /> </a> ) export const NavItem = ({ route, children }) => { - const location = useLocation() - return <RNavItem active={location.pathname === route}>{children}</RNavItem> + const router = useRouter() + const handleClick = (e) => { + e.preventDefault() + router.push(route) + } + return ( + <RNavItem onClick={handleClick} active={router.asPath === route}> + {children} + </RNavItem> + ) } export const LoggedInSection = () => { - const location = useLocation() + const router = useRouter() + const isLoggedIn = useAuth() return ( <Nav navbar className="auth-links"> - {userIsLoggedIn() ? ( + {isLoggedIn ? ( [ - location.pathname === '/' ? ( + router.asPath === '/' ? ( <NavItem route="/projects" key="projects"> - <NavLink tag={Link} title="My Projects" to="/projects"> - My Projects - </NavLink> + <Link href="/projects"> + <NavLink title="My Projects" to="/projects"> + My Projects + </NavLink> + </Link> </NavItem> ) : ( <NavItem route="/profile" key="profile"> - <NavLink tag={Link} title="My Profile" to="/profile"> - <ProfileName /> - </NavLink> + <Link href="/profile"> + <NavLink title="My Profile"> + <ProfileName /> + </NavLink> + </Link> </NavItem> ), <NavItem route="logout" key="logout"> @@ -57,10 +72,10 @@ export const LoggedInSection = () => { </NavItem>, ] ) : ( - <NavItem route="login"> + <RNavItem> <GitHubLink /> <Login visible={true} className={login} /> - </NavItem> + </RNavItem> )} </Nav> ) @@ -74,7 +89,7 @@ const Navbar = ({ fullWidth, children }) => { <RNavbar fixed="top" color="light" light expand="lg" id="navbar" className={navbar}> <Container fluid={fullWidth}> <NavbarToggler onClick={toggle} /> - <NavbarBrand tag={Link} to="/" title="OpenDC" className={opendcBrand}> + <NavbarBrand href="/" title="OpenDC" className={opendcBrand}> <img src="/img/logo.png" alt="OpenDC" /> </NavbarBrand> |