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

10 files changed, 55 insertions, 6 deletions

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