ui: Upgrade to Next.js 11

This pull request updates the OpenDC frontend to use Next.js 11.

* Upgrade to Next.js 11
* Enable React Strict mode
* Enable ESLint
* Fix ESLint issues

3 files changed, 32 insertions, 22 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 28207968..8aaaf847 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
@@ -1,15 +1,16 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import Link from 'next/link'
-import { NavLink } from 'reactstrap'
+import { NavLink, NavItem as RNavItem } from 'reactstrap'
 import Navbar, { NavItem } from './Navbar'
-import {} from './Navbar.module.scss'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faList } from '@fortawesome/free-solid-svg-icons'
+import { Project } from '../../shapes'
 
 const AppNavbarComponent = ({ project, fullWidth }) => (
     <Navbar fullWidth={fullWidth}>
         <NavItem route="/projects">
-            <Link href="/projects">
+            <Link href="/projects" passHref>
                 <NavLink title="My Projects">
                     <FontAwesomeIcon icon={faList} className="mr-2" />
                     My Projects
@@ -17,15 +18,20 @@ const AppNavbarComponent = ({ project, fullWidth }) => (
             </Link>
         </NavItem>
         {project ? (
-            <NavItem>
-                <Link href={`/projects/${project._id}`}>
+            <RNavItem>
+                <Link href={`/projects/${project._id}`} passHref>
                     <NavLink title="Current Project">
                         <span>{project.name}</span>
                     </NavLink>
                 </Link>
-            </NavItem>
+            </RNavItem>
         ) : undefined}
     </Navbar>
 )
 
+AppNavbarComponent.propTypes = {
+    project: Project,
+    fullWidth: PropTypes.bool,
+}
+
 export default AppNavbarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js b/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
index 46d01a25..57cb7a53 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
@@ -1,22 +1,15 @@
 import React from 'react'
 import { NavItem, NavLink } from 'reactstrap'
 import Navbar from './Navbar'
-import {} from './Navbar.module.scss'
-
-const ScrollNavItem = ({ id, name }) => (
-    <NavItem>
-        <NavLink href={id}>{name}</NavLink>
-    </NavItem>
-)
 
 const HomeNavbar = () => (
     <Navbar fullWidth={false}>
-        <ScrollNavItem id="#stakeholders" name="Stakeholders" />
-        <ScrollNavItem id="#modeling" name="Modeling" />
-        <ScrollNavItem id="#project" name="Project" />
-        <ScrollNavItem id="#technologies" name="Technologies" />
-        <ScrollNavItem id="#team" name="Team" />
-        <ScrollNavItem id="#contact" name="Contact" />
+        <NavLink href="#stakeholders">Stakeholders</NavLink>
+        <NavLink href="#modeling">Modeling</NavLink>
+        <NavLink href="#project">Project</NavLink>
+        <NavLink href="#technologies">Technologies</NavLink>
+        <NavLink href="#team">Team</NavLink>
+        <NavLink href="#contact">Contact</NavLink>
     </Navbar>
 )
 
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 690a7bdf..dc74bb8f 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -45,6 +46,11 @@ export const NavItem = ({ route, children }) => {
     )
 }
 
+NavItem.propTypes = {
+    route: PropTypes.string.isRequired,
+    children: PropTypes.node,
+}
+
 export const LoggedInSection = () => {
     const router = useRouter()
     const { isAuthenticated } = useAuth()
@@ -54,18 +60,18 @@ export const LoggedInSection = () => {
                 [
                     router.asPath === '/' ? (
                         <NavItem route="/projects" key="projects">
-                            <Link href="/projects">
+                            <Link href="/projects" passHref>
                                 <NavLink title="My Projects" to="/projects">
                                     My Projects
                                 </NavLink>
                             </Link>
                         </NavItem>
                     ) : (
-                        <NavItem key="profile">
+                        <RNavItem key="profile">
                             <NavLink title="My Profile">
                                 <ProfileName />
                             </NavLink>
-                        </NavItem>
+                        </RNavItem>
                     ),
                     <NavItem route="logout" key="logout">
                         <Logout />
@@ -106,4 +112,9 @@ const Navbar = ({ fullWidth, children }) => {
     )
 }
 
+Navbar.propTypes = {
+    fullWidth: PropTypes.bool,
+    children: PropTypes.node,
+}
+
 export default Navbar