1 files changed, 31 insertions, 32 deletions
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