From 4397a959e806bf476be4c81bc804616adf58b969 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 12 May 2021 22:42:12 +0200
Subject: ui: Migrate from CRA to Next.js

This change updates the web frontend to use Next.js instead of Create
React App (CRA). Next.js enables the possibility of rendering pages on
the server side (which reduces the time to first frame) and overall
provides a better development experience.

Future commits will try to futher optimize the implementation for
Next.js.
---
 .../components/navigation/AppNavbarComponent.js    | 20 +++++----
 .../src/components/navigation/LogoutButton.js      |  3 +-
 .../src/components/navigation/Navbar.js            | 47 ++++++++++++++--------
 3 files changed, 44 insertions(+), 26 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/navigation')

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