From 0e52785dfc5e99f48718530976083cfbd1507651 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 5 Jul 2021 15:36:23 +0200
Subject: ui: Fix linting errors

---
 opendc-web/opendc-web-ui/src/auth.js               |  7 ++++++-
 .../src/components/app/map/MapStageComponent.js    | 22 +++++++++++++++++++---
 .../app/map/controls/ScaleIndicatorComponent.js    |  5 +++++
 .../app/map/controls/ZoomControlComponent.js       |  5 +++++
 .../src/components/app/map/elements/GrayLayer.js   |  5 +++++
 .../src/components/app/map/elements/HoverTile.js   |  1 +
 .../src/components/app/map/elements/RoomTile.js    |  2 ++
 .../src/components/app/map/groups/RoomGroup.js     |  6 +++++-
 .../src/components/app/map/groups/TileGroup.js     |  3 ++-
 .../app/map/layers/HoverLayerComponent.js          |  3 ++-
 .../components/app/map/layers/MapLayerComponent.js |  9 +++++++++
 .../src/components/app/sidebars/Sidebar.js         |  1 +
 .../app/sidebars/project/PortfolioListComponent.js |  2 +-
 .../sidebars/project/ProjectSidebarComponent.js    |  5 +++++
 .../app/sidebars/project/ScenarioListComponent.js  |  1 +
 .../app/sidebars/topology/NameComponent.js         |  6 ++++++
 .../sidebars/topology/TopologySidebarComponent.js  |  5 +++++
 .../building/NewRoomConstructionComponent.js       |  8 ++++++++
 .../topology/machine/BackToRackComponent.js        |  5 +++++
 .../topology/machine/MachineSidebarComponent.js    |  5 +++++
 .../app/sidebars/topology/machine/UnitComponent.js |  9 +++++++++
 .../sidebars/topology/machine/UnitListComponent.js |  6 ++++++
 .../sidebars/topology/rack/AddPrefabComponent.js   |  5 +++++
 .../sidebars/topology/rack/BackToRoomComponent.js  |  5 +++++
 .../sidebars/topology/rack/EmptySlotComponent.js   |  6 ++++++
 .../app/sidebars/topology/rack/MachineComponent.js |  8 ++++++++
 .../sidebars/topology/rack/MachineListComponent.js |  5 +++++
 .../topology/room/BackToBuildingComponent.js       |  5 +++++
 .../sidebars/topology/room/DeleteRoomComponent.js  |  5 +++++
 .../topology/room/RackConstructionComponent.js     |  8 ++++++++
 .../src/components/home/ContentSection.js          |  5 ++++-
 .../src/components/home/IntroSection.js            |  5 +++++
 .../src/components/home/ModelingSection.js         |  5 +++++
 .../src/components/home/ScreenshotSection.js       | 11 +++++++++++
 .../src/components/home/SimulationSection.js       |  9 +++++++--
 .../src/components/home/StakeholderSection.js      | 11 +++++++++++
 .../src/components/home/TeamSection.js             | 16 ++++++++++++++++
 .../src/components/home/TechnologiesSection.js     |  5 +++++
 .../opendc-web-ui/src/components/modals/Modal.js   |  1 +
 .../components/navigation/AppNavbarComponent.js    | 18 ++++++++++++------
 .../src/components/navigation/HomeNavbar.js        | 19 ++++++-------------
 .../src/components/navigation/Navbar.js            | 17 ++++++++++++++---
 .../components/projects/ProjectActionButtons.js    |  2 +-
 .../src/components/projects/ProjectList.js         |  2 +-
 opendc-web/opendc-web-ui/src/pages/_app.js         | 10 +++++++++-
 .../opendc-web-ui/src/pages/projects/index.js      |  2 +-
 opendc-web/opendc-web-ui/src/redux/index.js        |  4 ++--
 opendc-web/opendc-web-ui/src/util/timeline.js      |  9 ---------
 48 files changed, 271 insertions(+), 48 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/util/timeline.js

(limited to 'opendc-web/opendc-web-ui')

diff --git a/opendc-web/opendc-web-ui/src/auth.js b/opendc-web/opendc-web-ui/src/auth.js
index 706151bf..96417e67 100644
--- a/opendc-web/opendc-web-ui/src/auth.js
+++ b/opendc-web/opendc-web-ui/src/auth.js
@@ -20,6 +20,7 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
 import { Auth0Provider, useAuth0 } from '@auth0/auth0-react'
 import { useEffect } from 'react'
 import { useRouter } from 'next/router'
@@ -43,7 +44,7 @@ export function useRequireAuth() {
         if (!isLoading && !isAuthenticated) {
             router.replace('/')
         }
-    }, [isLoading, isAuthenticated])
+    }, [router, isLoading, isAuthenticated])
 
     return auth
 }
@@ -63,3 +64,7 @@ export function AuthProvider({ children }) {
         </Auth0Provider>
     )
 }
+
+AuthProvider.propTypes = {
+    children: PropTypes.node,
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
index 7c97f3e4..07b2d8f0 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React, { useEffect, useRef, useState } from 'react'
 import { HotKeys } from 'react-hotkeys'
 import { Stage } from 'react-konva'
@@ -35,10 +36,11 @@ function MapStageComponent({
         const mousePos = stage.current.getStage().getPointerPosition()
         setPos([mousePos.x, mousePos.y])
     }
-    const updateDimensions = () => setMapDimensions(window.innerWidth, window.innerHeight - NAVBAR_HEIGHT)
-    const updateScale = (e) => zoomInOnPosition(e.deltaY < 0, x, y)
 
     useEffect(() => {
+        const updateDimensions = () => setMapDimensions(window.innerWidth, window.innerHeight - NAVBAR_HEIGHT)
+        const updateScale = (e) => zoomInOnPosition(e.deltaY < 0, x, y)
+
         updateDimensions()
 
         window.addEventListener('resize', updateDimensions)
@@ -55,7 +57,7 @@ function MapStageComponent({
             window.removeEventListener('resize', updateDimensions)
             window.removeEventListener('wheel', updateScale)
         }
-    }, [])
+    }, [x, y, setMapDimensions, zoomInOnPosition])
 
     const store = useStore()
 
@@ -77,4 +79,18 @@ function MapStageComponent({
     )
 }
 
+MapStageComponent.propTypes = {
+    mapDimensions: PropTypes.shape({
+        width: PropTypes.number.isRequired,
+        height: PropTypes.number.isRequired,
+    }).isRequired,
+    mapPosition: PropTypes.shape({
+        x: PropTypes.number.isRequired,
+        y: PropTypes.number.isRequired,
+    }).isRequired,
+    setMapDimensions: PropTypes.func,
+    setMapPositionWithBoundsCheck: PropTypes.func,
+    zoomInOnPosition: PropTypes.func,
+}
+
 export default MapStageComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js
index 13226602..ef633764 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
 import { scaleIndicator } from './ScaleIndicatorComponent.module.scss'
@@ -8,4 +9,8 @@ const ScaleIndicatorComponent = ({ scale }) => (
     </div>
 )
 
+ScaleIndicatorComponent.propTypes = {
+    scale: PropTypes.number.isRequired,
+}
+
 export default ScaleIndicatorComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js
index 6bae792c..6c3c6cb7 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'
@@ -23,4 +24,8 @@ const ZoomControlComponent = ({ zoomInOnCenter }) => {
     )
 }
 
+ZoomControlComponent.propTypes = {
+    zoomInOnCenter: PropTypes.func.isRequired,
+}
+
 export default ZoomControlComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js
index c54a34ad..35af4d96 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { Rect } from 'react-konva'
 import { GRAYED_OUT_AREA_COLOR } from '../../../../util/colors'
@@ -14,4 +15,8 @@ const GrayLayer = ({ onClick }) => (
     />
 )
 
+GrayLayer.propTypes = {
+    onClick: PropTypes.func,
+}
+
 export default GrayLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
index 912229c4..11bba0e1 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
@@ -21,6 +21,7 @@ HoverTile.propTypes = {
     pixelX: PropTypes.number.isRequired,
     pixelY: PropTypes.number.isRequired,
     isValid: PropTypes.bool.isRequired,
+    scale: PropTypes.number.isRequired,
     onClick: PropTypes.func.isRequired,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
index b2cc1273..ed718601 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { Rect } from 'react-konva'
 import { Tile } from '../../../../shapes'
@@ -15,6 +16,7 @@ const RoomTile = ({ tile, color }) => (
 
 RoomTile.propTypes = {
     tile: Tile,
+    color: PropTypes.string,
 }
 
 export default RoomTile
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
index d7c207ca..e67d54fc 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
@@ -1,9 +1,10 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { Group } from 'react-konva'
 import GrayContainer from '../../../../containers/app/map/GrayContainer'
 import TileContainer from '../../../../containers/app/map/TileContainer'
 import WallContainer from '../../../../containers/app/map/WallContainer'
-import { Room } from '../../../../shapes'
+import { InteractionLevel, Room } from '../../../../shapes'
 
 const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick }) => {
     if (currentRoomInConstruction === room._id) {
@@ -43,6 +44,9 @@ const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick
 
 RoomGroup.propTypes = {
     room: Room,
+    interactionLevel: InteractionLevel,
+    currentRoomInConstruction: PropTypes.string,
+    onClick: PropTypes.func,
 }
 
 export default RoomGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
index ff6ec7ec..2a108b93 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
@@ -6,7 +6,7 @@ import { Tile } from '../../../../shapes'
 import { ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR } from '../../../../util/colors'
 import RoomTile from '../elements/RoomTile'
 
-const TileGroup = ({ tile, newTile, roomLoad, onClick }) => {
+const TileGroup = ({ tile, newTile, onClick }) => {
     let tileObject
     if (tile.rackId) {
         tileObject = <RackContainer tile={tile} />
@@ -30,6 +30,7 @@ const TileGroup = ({ tile, newTile, roomLoad, onClick }) => {
 TileGroup.propTypes = {
     tile: Tile,
     newTile: PropTypes.bool,
+    onClick: PropTypes.func,
 }
 
 export default TileGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
index 08d31dac..a88a8b34 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
@@ -21,7 +21,7 @@ function HoverLayerComponent({ mouseX, mouseY, mapPosition, mapScale, isEnabled,
             setPos([positionX, positionY])
             setValid(isValid(positionX, positionY))
         }
-    }, [mouseX, mouseY, mapPosition, mapScale])
+    }, [isEnabled, isValid, x, y, mouseX, mouseY, mapPosition, mapScale])
 
     if (!isEnabled()) {
         return <Layer />
@@ -58,6 +58,7 @@ HoverLayerComponent.propTypes = {
     isEnabled: PropTypes.func.isRequired,
     isValid: PropTypes.func.isRequired,
     onClick: PropTypes.func.isRequired,
+    children: PropTypes.node,
 }
 
 export default HoverLayerComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js
index 8ee14c9c..96e6867c 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { Group, Layer } from 'react-konva'
 import TopologyContainer from '../../../../containers/app/map/TopologyContainer'
@@ -14,4 +15,12 @@ const MapLayerComponent = ({ mapPosition, mapScale }) => (
     </Layer>
 )
 
+MapLayerComponent.propTypes = {
+    mapPosition: PropTypes.shape({
+        x: PropTypes.number,
+        y: PropTypes.number,
+    }),
+    mapScale: PropTypes.number,
+}
+
 export default MapLayerComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
index ccaa4144..56fa799f 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
@@ -42,6 +42,7 @@ function Sidebar({ isRight, collapsible = true, children }) {
 Sidebar.propTypes = {
     isRight: PropTypes.bool.isRequired,
     collapsible: PropTypes.bool,
+    children: PropTypes.node,
 }
 
 export default Sidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
index 9dd36d5e..ce271819 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -37,7 +37,7 @@ function PortfolioListComponent({
                             {portfolio.name}
                         </Col>
                         <Col xs="5" className="text-right">
-                            <Link href={`/projects/${currentProjectId}/portfolios/${portfolio._id}`}>
+                            <Link passHref href={`/projects/${currentProjectId}/portfolios/${portfolio._id}`}>
                                 <Button
                                     color="primary"
                                     outline
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js
index 7dd13663..10d22e5b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import Sidebar from '../Sidebar'
 import TopologyListContainer from '../../../../containers/app/sidebars/project/TopologyListContainer'
@@ -13,4 +14,8 @@ const ProjectSidebarComponent = ({ collapsible }) => (
     </Sidebar>
 )
 
+ProjectSidebarComponent.propTypes = {
+    collapsible: PropTypes.bool,
+}
+
 export default ProjectSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
index 131a00b5..f990dfcb 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -30,6 +30,7 @@ function ScenarioListComponent({
                     </Col>
                     <Col xs="5" className="text-right">
                         <Link
+                            passHref
                             href={`/projects/${currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
                         >
                             <Button
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
index b4cbc78f..b8c88003 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'
@@ -11,4 +12,9 @@ const NameComponent = ({ name, onEdit }) => (
     </h2>
 )
 
+NameComponent.propTypes = {
+    name: PropTypes.string,
+    onEdit: PropTypes.func,
+}
+
 export default NameComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebarComponent.js
index f5eee36b..450df6cd 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebarComponent.js
@@ -4,6 +4,7 @@ import MachineSidebarContainer from '../../../../containers/app/sidebars/topolog
 import RackSidebarContainer from '../../../../containers/app/sidebars/topology/rack/RackSidebarContainer'
 import RoomSidebarContainer from '../../../../containers/app/sidebars/topology/room/RoomSidebarContainer'
 import Sidebar from '../Sidebar'
+import { InteractionLevel } from '../../../../shapes'
 
 const TopologySidebarComponent = ({ interactionLevel }) => {
     let sidebarContent
@@ -28,4 +29,8 @@ const TopologySidebarComponent = ({ interactionLevel }) => {
     return <Sidebar isRight={true}>{sidebarContent}</Sidebar>
 }
 
+TopologySidebarComponent.propTypes = {
+    interactionLevel: InteractionLevel,
+}
+
 export default TopologySidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
index b1461743..e8c81735 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPlus, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'
@@ -26,4 +27,11 @@ const NewRoomConstructionComponent = ({ onStart, onFinish, onCancel, currentRoom
     )
 }
 
+NewRoomConstructionComponent.propTypes = {
+    onStart: PropTypes.func,
+    onFinish: PropTypes.func,
+    onCancel: PropTypes.func,
+    currentRoomInConstruction: PropTypes.string,
+}
+
 export default NewRoomConstructionComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
index eac99643..829bf265 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
@@ -9,4 +10,8 @@ const BackToRackComponent = ({ onClick }) => (
     </div>
 )
 
+BackToRackComponent.propTypes = {
+    onClick: PropTypes.func,
+}
+
 export default BackToRackComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
index 7c78cf9e..88a99e0f 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import BackToRackContainer from '../../../../../containers/app/sidebars/topology/machine/BackToRackContainer'
 import DeleteMachineContainer from '../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer'
@@ -15,4 +16,8 @@ const MachineSidebarComponent = ({ machineId }) => {
     )
 }
 
+MachineSidebarComponent.propTypes = {
+    machineId: PropTypes.string,
+}
+
 export default MachineSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
index aa473f91..03b92459 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -1,7 +1,9 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { UncontrolledPopover, PopoverHeader, PopoverBody, Button } from 'reactstrap'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTrash, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+import { ProcessingUnit, StorageUnit } from '../../../../../shapes'
 
 function UnitComponent({ index, unitType, unit, onDelete }) {
     let unitInfo
@@ -55,4 +57,11 @@ function UnitComponent({ index, unitType, unit, onDelete }) {
     )
 }
 
+UnitComponent.propTypes = {
+    index: PropTypes.number,
+    unitType: PropTypes.string,
+    unit: PropTypes.oneOf([ProcessingUnit, StorageUnit]),
+    onDelete: PropTypes.func,
+}
+
 export default UnitComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
index 2ade0f6a..b7da74a1 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import UnitContainer from '../../../../../containers/app/sidebars/topology/machine/UnitContainer'
 
@@ -17,4 +18,9 @@ const UnitListComponent = ({ unitType, unitIds }) => (
     </ul>
 )
 
+UnitListComponent.propTypes = {
+    unitType: PropTypes.string,
+    unitIds: PropTypes.array,
+}
+
 export default UnitListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
index d0218f38..a330c302 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSave } from '@fortawesome/free-solid-svg-icons'
@@ -10,4 +11,8 @@ const AddPrefabComponent = ({ onClick }) => (
     </Button>
 )
 
+AddPrefabComponent.propTypes = {
+    onClick: PropTypes.func,
+}
+
 export default AddPrefabComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
index f6a6f79b..e0eb5979 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
@@ -10,4 +11,8 @@ const BackToRoomComponent = ({ onClick }) => (
     </Button>
 )
 
+BackToRoomComponent.propTypes = {
+    onClick: PropTypes.func,
+}
+
 export default BackToRoomComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
index d6fa9dc9..63b319e0 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
@@ -15,4 +16,9 @@ const EmptySlotComponent = ({ position, onAdd }) => (
     </ListGroupItem>
 )
 
+EmptySlotComponent.propTypes = {
+    position: PropTypes.number,
+    onAdd: PropTypes.func,
+}
+
 export default EmptySlotComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
index 36b15c71..f91202ba 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import Image from 'next/image'
 import { Machine } from '../../../../../shapes'
@@ -15,6 +16,11 @@ const UnitIcon = ({ id, type }) => (
     </div>
 )
 
+UnitIcon.propTypes = {
+    id: PropTypes.string,
+    type: PropTypes.string,
+}
+
 const MachineComponent = ({ position, machine, onClick }) => {
     const hasNoUnits =
         machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length + machine.storageIds.length === 0
@@ -42,6 +48,8 @@ const MachineComponent = ({ position, machine, onClick }) => {
 
 MachineComponent.propTypes = {
     machine: Machine,
+    position: PropTypes.number,
+    onClick: PropTypes.func,
 }
 
 export default MachineComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
index 1c07d237..d0958c28 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer'
 import MachineContainer from '../../../../../containers/app/sidebars/topology/rack/MachineContainer'
@@ -17,4 +18,8 @@ const MachineListComponent = ({ machineIds }) => {
     )
 }
 
+MachineListComponent.propTypes = {
+    machineIds: PropTypes.array,
+}
+
 export default MachineListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
index 696b345b..043cc713 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
@@ -9,4 +10,8 @@ const BackToBuildingComponent = ({ onClick }) => (
     </div>
 )
 
+BackToBuildingComponent.propTypes = {
+    onClick: PropTypes.func,
+}
+
 export default BackToBuildingComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
index 242f7a2b..d81bad0f 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTrash } from '@fortawesome/free-solid-svg-icons'
@@ -10,4 +11,8 @@ const DeleteRoomComponent = ({ onClick }) => (
     </Button>
 )
 
+DeleteRoomComponent.propTypes = {
+    onClick: PropTypes.func,
+}
+
 export default DeleteRoomComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
index 19d6b309..0a27910c 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons'
@@ -27,4 +28,11 @@ const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, is
     )
 }
 
+RackConstructionComponent.propTypes = {
+    onStart: PropTypes.func,
+    onStop: PropTypes.func,
+    inRackConstructionMode: PropTypes.bool,
+    isEditingRoom: PropTypes.bool,
+}
+
 export default RackConstructionComponent
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
index 3e9ad50a..abaa565c 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
@@ -1,7 +1,7 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import classNames from 'classnames'
 import { Container } from 'reactstrap'
-import PropTypes from 'prop-types'
 import { contentSection } from './ContentSection.module.scss'
 
 const ContentSection = ({ name, title, children, className }) => (
@@ -15,6 +15,9 @@ const ContentSection = ({ name, title, children, className }) => (
 
 ContentSection.propTypes = {
     name: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    className: PropTypes.string,
 }
 
 export default ContentSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
index 67e8cd8b..f9000d32 100644
--- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import Image from 'next/image'
 import { Container, Row, Col } from 'reactstrap'
@@ -42,4 +43,8 @@ const IntroSection = ({ className }) => (
     </section>
 )
 
+IntroSection.propTypes = {
+    className: PropTypes.string,
+}
+
 export default IntroSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js b/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
index af36aa45..8959663a 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import ScreenshotSection from './ScreenshotSection'
 
@@ -20,4 +21,8 @@ const ModelingSection = ({ className }) => (
     </ScreenshotSection>
 )
 
+ModelingSection.propTypes = {
+    className: PropTypes.string,
+}
+
 export default ModelingSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
index 9673b7b7..58fe1710 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import Image from 'next/image'
 import { Row, Col } from 'reactstrap'
@@ -25,4 +26,14 @@ const ScreenshotSection = ({ className, name, title, imageUrl, caption, imageIsR
     </ContentSection>
 )
 
+ScreenshotSection.propTypes = {
+    className: PropTypes.string,
+    name: PropTypes.string,
+    title: PropTypes.string,
+    imageUrl: PropTypes.string,
+    caption: PropTypes.string,
+    imageIsRight: PropTypes.bool,
+    children: PropTypes.node,
+}
+
 export default ScreenshotSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
index c154cc26..46ce6a35 100644
--- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import Image from 'next/image'
 import { Col, Row } from 'reactstrap'
@@ -32,7 +33,7 @@ const SimulationSection = ({ className }) => {
             </Row>
             <Row className="mt-5">
                 <Col xl="5" lg="5" md="5" sm="2" className="text-left my-auto">
-                    <h3>OpenDC's Simulator:</h3>
+                    <h3>OpenDC&apos;s Simulator:</h3>
                     <ul>
                         <li>Includes a detailed operational model of modern datacenters</li>
                         <li>
@@ -51,11 +52,15 @@ const SimulationSection = ({ className }) => {
                         height={232}
                         alt="OpenDC's Architecture"
                     />
-                    <Row className="text-muted justify-content-center">OpenDC's Architecture</Row>
+                    <Row className="text-muted justify-content-center">OpenDC&apos;s Architecture</Row>
                 </Col>
             </Row>
         </ContentSection>
     )
 }
 
+SimulationSection.propTypes = {
+    className: PropTypes.string,
+}
+
 export default SimulationSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
index 9a4892ed..aa689ba4 100644
--- a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
@@ -21,6 +22,12 @@ const Stakeholder = ({ name, title, subtitle }) => (
     </Col>
 )
 
+Stakeholder.propTypes = {
+    name: PropTypes.string,
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+}
+
 const StakeholderSection = ({ className }) => (
     <ContentSection name="stakeholders" title="Stakeholders" className={className}>
         <Row className="justify-content-center">
@@ -33,4 +40,8 @@ const StakeholderSection = ({ className }) => (
     </ContentSection>
 )
 
+StakeholderSection.propTypes = {
+    className: PropTypes.string,
+}
+
 export default StakeholderSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
index bbbe241e..dd057a93 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import Image from 'next/image'
 import { Row, Col } from 'reactstrap'
@@ -23,6 +24,12 @@ const TeamLead = ({ photoId, name, description }) => (
     </Col>
 )
 
+TeamLead.propTypes = {
+    photoId: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+}
+
 const TeamMember = ({ photoId, name }) => (
     <Col xl="2" lg="2" md="3" sm="4" className="justify-content-center">
         <Row>
@@ -42,6 +49,11 @@ const TeamMember = ({ photoId, name }) => (
     </Col>
 )
 
+TeamMember.propTypes = {
+    photoId: PropTypes.string,
+    name: PropTypes.string,
+}
+
 const TeamSection = ({ className }) => (
     <ContentSection name="team" title="OpenDC Team" className={className}>
         <Row className="justify-content-center">
@@ -63,4 +75,8 @@ const TeamSection = ({ className }) => (
     </ContentSection>
 )
 
+TeamSection.propTypes = {
+    className: PropTypes.string,
+}
+
 export default TeamSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
index efedebb7..e5131c2a 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { ListGroup, ListGroupItem } from 'reactstrap'
 import ContentSection from './ContentSection'
@@ -39,4 +40,8 @@ const TechnologiesSection = ({ className }) => (
     </ContentSection>
 )
 
+TechnologiesSection.propTypes = {
+    className: PropTypes.string,
+}
+
 export default TechnologiesSection
diff --git a/opendc-web/opendc-web-ui/src/components/modals/Modal.js b/opendc-web/opendc-web-ui/src/components/modals/Modal.js
index 21b7f119..8ab3924c 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/Modal.js
+++ b/opendc-web/opendc-web-ui/src/components/modals/Modal.js
@@ -42,6 +42,7 @@ Modal.propTypes = {
     onCancel: PropTypes.func.isRequired,
     submitButtonType: PropTypes.string,
     submitButtonText: PropTypes.string,
+    children: PropTypes.node,
 }
 
 Modal.defaultProps = {
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
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
index 0725e42b..4adf3205 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
@@ -7,7 +7,7 @@ import { faPlay, faUsers, faTrash } from '@fortawesome/free-solid-svg-icons'
 
 const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => (
     <td className="text-right">
-        <Link href={`/projects/${projectId}`}>
+        <Link href={`/projects/${projectId}`} passHref>
             <Button color="primary" outline size="sm" className="mr-2" title="Open this project">
                 <FontAwesomeIcon icon={faPlay} />
             </Button>
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
index dc3f85ec..46ef4691 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
@@ -11,7 +11,7 @@ const ProjectList = ({ projects }) => {
             {projects.length === 0 ? (
                 <div className="alert alert-info">
                     <FontAwesomeIcon icon={faQuestionCircle} className="info-icon mr-2" />
-                    <strong>No projects here yet...</strong> Add some with the 'New Project' button!
+                    <strong>No projects here yet...</strong> Add some with the &lsquo;New Project&rsquo; button!
                 </div>
             ) : (
                 <table className="table table-striped">
diff --git a/opendc-web/opendc-web-ui/src/pages/_app.js b/opendc-web/opendc-web-ui/src/pages/_app.js
index 4ef4445c..c1adbd6e 100644
--- a/opendc-web/opendc-web-ui/src/pages/_app.js
+++ b/opendc-web/opendc-web-ui/src/pages/_app.js
@@ -20,6 +20,7 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
 import Head from 'next/head'
 import { Provider } from 'react-redux'
 import { useStore } from '../redux'
@@ -39,6 +40,13 @@ const Inner = ({ Component, pageProps }) => {
     )
 }
 
+Inner.propTypes = {
+    Component: PropTypes.func,
+    pageProps: PropTypes.shape({
+        initialReduxState: PropTypes.object,
+    }).isRequired,
+}
+
 const dsn = process.env.NEXT_PUBLIC_SENTRY_DSN
 // Initialize Sentry if the user has configured a DSN
 if (process.browser && dsn) {
@@ -59,7 +67,7 @@ export default function App(props) {
                 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
                 <meta name="theme-color" content="#00A6D6" />
             </Head>
-            <Sentry.ErrorBoundary fallback={"An error has occurred"}>
+            <Sentry.ErrorBoundary fallback={'An error has occurred'}>
                 <AuthProvider>
                     <Inner {...props} />
                 </AuthProvider>
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js
index 8603c228..958ca622 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -15,7 +15,7 @@ function Projects() {
     const dispatch = useDispatch()
     const [filter, setFilter] = useState('SHOW_ALL')
 
-    useEffect(() => dispatch(fetchProjects()), [])
+    useEffect(() => dispatch(fetchProjects()), [dispatch])
 
     return (
         <>
diff --git a/opendc-web/opendc-web-ui/src/redux/index.js b/opendc-web/opendc-web-ui/src/redux/index.js
index 5c908957..3c7ad55f 100644
--- a/opendc-web/opendc-web-ui/src/redux/index.js
+++ b/opendc-web/opendc-web-ui/src/redux/index.js
@@ -1,12 +1,12 @@
 import { useMemo } from 'react'
-import {applyMiddleware, compose, createStore} from 'redux'
+import { applyMiddleware, compose, createStore } from 'redux'
 import { createLogger } from 'redux-logger'
 import createSagaMiddleware from 'redux-saga'
 import thunk from 'redux-thunk'
 import rootReducer from './reducers'
 import rootSaga from './sagas'
 import { viewportAdjustmentMiddleware } from './middleware/viewport-adjustment'
-import { createReduxEnhancer } from "@sentry/react";
+import { createReduxEnhancer } from '@sentry/react'
 
 let store
 
diff --git a/opendc-web/opendc-web-ui/src/util/timeline.js b/opendc-web/opendc-web-ui/src/util/timeline.js
deleted file mode 100644
index 7c8a3ef0..00000000
--- a/opendc-web/opendc-web-ui/src/util/timeline.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export function convertTickToPercentage(tick, maxTick) {
-    if (maxTick === 0) {
-        return '0%'
-    } else if (tick > maxTick) {
-        return (maxTick / (maxTick + 1)) * 100 + '%'
-    }
-
-    return (tick / (maxTick + 1)) * 100 + '%'
-}
-- 
cgit v1.2.3