ui: Do not clutter component tree with Redux connects

This change refactors the frontend to use hooks for obtaining state
within the Redux store as opposed to using Higher-Order Components
(HOCs). This eliminates a lot of clutter in the components.

3 files changed, 58 insertions, 63 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
index 8596cb9c..5f701b4b 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
@@ -1,13 +1,10 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import MapLayerComponent from '../../../../components/app/map/layers/MapLayerComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        mapPosition: state.map.position,
-        mapScale: state.map.scale,
-    }
+const MapLayer = (props) => {
+    const { position, scale } = useSelector((state) => state.map)
+    return <MapLayerComponent {...props} mapPosition={position} mapScale={scale} />
 }
 
-const MapLayer = connect(mapStateToProps)(MapLayerComponent)
-
 export default MapLayer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
index a4927862..cefdf35c 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
@@ -1,33 +1,32 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { addRackToTile } from '../../../../actions/topology/room'
 import ObjectHoverLayerComponent from '../../../../components/app/map/layers/ObjectHoverLayerComponent'
 import { findTileWithPosition } from '../../../../util/tile-calculations'
 
-const mapStateToProps = (state) => {
-    return {
-        mapPosition: state.map.position,
-        mapScale: state.map.scale,
-        isEnabled: () => state.construction.inRackConstructionMode,
-        isValid: (x, y) => {
-            if (state.interactionLevel.mode !== 'ROOM') {
-                return false
-            }
+const ObjectHoverLayer = (props) => {
+    const state = useSelector((state) => {
+        return {
+            mapPosition: state.map.position,
+            mapScale: state.map.scale,
+            isEnabled: () => state.construction.inRackConstructionMode,
+            isValid: (x, y) => {
+                if (state.interactionLevel.mode !== 'ROOM') {
+                    return false
+                }
 
-            const currentRoom = state.objects.room[state.interactionLevel.roomId]
-            const tiles = currentRoom.tileIds.map((tileId) => state.objects.tile[tileId])
-            const tile = findTileWithPosition(tiles, x, y)
+                const currentRoom = state.objects.room[state.interactionLevel.roomId]
+                const tiles = currentRoom.tileIds.map((tileId) => state.objects.tile[tileId])
+                const tile = findTileWithPosition(tiles, x, y)
 
-            return !(tile === null || tile.rackId)
-        },
-    }
-}
+                return !(tile === null || tile.rackId)
+            },
+        }
+    })
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onClick: (x, y) => dispatch(addRackToTile(x, y)),
-    }
+    const dispatch = useDispatch()
+    const onClick = (x, y) => dispatch(addRackToTile(x, y))
+    return <ObjectHoverLayerComponent {...props} {...state} onClick={onClick} />
 }
 
-const ObjectHoverLayer = connect(mapStateToProps, mapDispatchToProps)(ObjectHoverLayerComponent)
-
 export default ObjectHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
index 66404f9e..2717d890 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
@@ -1,4 +1,5 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { toggleTileAtLocation } from '../../../../actions/topology/building'
 import RoomHoverLayerComponent from '../../../../components/app/map/layers/RoomHoverLayerComponent'
 import {
@@ -7,40 +8,38 @@ import {
     findPositionInRooms,
 } from '../../../../util/tile-calculations'
 
-const mapStateToProps = (state) => {
-    return {
-        mapPosition: state.map.position,
-        mapScale: state.map.scale,
-        isEnabled: () => state.construction.currentRoomInConstruction !== '-1',
-        isValid: (x, y) => {
-            const newRoom = Object.assign({}, state.objects.room[state.construction.currentRoomInConstruction])
-            const oldRooms = Object.keys(state.objects.room)
-                .map((id) => Object.assign({}, state.objects.room[id]))
-                .filter(
-                    (room) =>
-                        state.objects.topology[state.currentTopologyId].roomIds.indexOf(room._id) !== -1 &&
-                        room._id !== state.construction.currentRoomInConstruction
-                )
+const RoomHoverLayer = (props) => {
+    const dispatch = useDispatch()
+    const onClick = (x, y) => dispatch(toggleTileAtLocation(x, y))
 
-            ;[...oldRooms, newRoom].forEach((room) => {
-                room.tiles = room.tileIds.map((tileId) => state.objects.tile[tileId])
-            })
-            if (newRoom.tileIds.length === 0) {
-                return findPositionInRooms(oldRooms, x, y) === -1
-            }
+    const state = useSelector((state) => {
+        return {
+            mapPosition: state.map.position,
+            mapScale: state.map.scale,
+            isEnabled: () => state.construction.currentRoomInConstruction !== '-1',
+            isValid: (x, y) => {
+                const newRoom = Object.assign({}, state.objects.room[state.construction.currentRoomInConstruction])
+                const oldRooms = Object.keys(state.objects.room)
+                    .map((id) => Object.assign({}, state.objects.room[id]))
+                    .filter(
+                        (room) =>
+                            state.objects.topology[state.currentTopologyId].roomIds.indexOf(room._id) !== -1 &&
+                            room._id !== state.construction.currentRoomInConstruction
+                    )
 
-            const validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles)
-            return findPositionInPositions(validNextPositions, x, y) !== -1
-        },
-    }
-}
+                ;[...oldRooms, newRoom].forEach((room) => {
+                    room.tiles = room.tileIds.map((tileId) => state.objects.tile[tileId])
+                })
+                if (newRoom.tileIds.length === 0) {
+                    return findPositionInRooms(oldRooms, x, y) === -1
+                }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onClick: (x, y) => dispatch(toggleTileAtLocation(x, y)),
-    }
+                const validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles)
+                return findPositionInPositions(validNextPositions, x, y) !== -1
+            },
+        }
+    })
+    return <RoomHoverLayerComponent onClick={onClick} {...props} {...state} />
 }
 
-const RoomHoverLayer = connect(mapStateToProps, mapDispatchToProps)(RoomHoverLayerComponent)
-
 export default RoomHoverLayer