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.

1 files changed, 22 insertions, 23 deletions

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