From b14ba802ade3f724edfa6b2b09b643faa583f911 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 28 Oct 2020 14:12:41 +0100
Subject: Migrate to Reactstrap for Navbar

---
 frontend/src/components/navigation/Navbar.js | 131 ++++++++++++++-------------
 1 file changed, 69 insertions(+), 62 deletions(-)

(limited to 'frontend/src/components/navigation/Navbar.js')

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
-- 
cgit v1.2.3