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.

6 files changed, 59 insertions, 62 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js
index 4c1ab99d..a48bf0a7 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js
@@ -1,13 +1,12 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch } from 'react-redux'
 import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level'
 import BackToBuildingComponent from '../../../../../components/app/sidebars/topology/room/BackToBuildingComponent'
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onClick: () => dispatch(goDownOneInteractionLevel()),
-    }
+const BackToBuildingContainer = () => {
+    const dispatch = useDispatch()
+    const onClick = () => dispatch(goDownOneInteractionLevel())
+    return <BackToBuildingComponent onClick={onClick} />
 }
 
-const BackToBuildingContainer = connect(undefined, mapDispatchToProps)(BackToBuildingComponent)
-
 export default BackToBuildingContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
index 636fa5c5..6a80e9b0 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
@@ -1,13 +1,12 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch } from 'react-redux'
 import { openDeleteRoomModal } from '../../../../../actions/modals/topology'
 import DeleteRoomComponent from '../../../../../components/app/sidebars/topology/room/DeleteRoomComponent'
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onClick: () => dispatch(openDeleteRoomModal()),
-    }
+const DeleteRoomContainer = (props) => {
+    const dispatch = useDispatch()
+    const onClick = () => dispatch(openDeleteRoomModal())
+    return <DeleteRoomComponent {...props} onClick={onClick} />
 }
 
-const DeleteRoomContainer = connect(undefined, mapDispatchToProps)(DeleteRoomComponent)
-
 export default DeleteRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js
index d17a45d1..37027fc5 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js
@@ -1,21 +1,25 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { finishRoomEdit, startRoomEdit } from '../../../../../actions/topology/building'
 import EditRoomComponent from '../../../../../components/app/sidebars/topology/room/EditRoomComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        isEditing: state.construction.currentRoomInConstruction !== '-1',
-        isInRackConstructionMode: state.construction.inRackConstructionMode,
-    }
-}
+const EditRoomContainer = (props) => {
+    const isEditing = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
+    const isInRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onEdit: () => dispatch(startRoomEdit()),
-        onFinish: () => dispatch(finishRoomEdit()),
-    }
-}
+    const dispatch = useDispatch()
+    const onEdit = () => dispatch(startRoomEdit())
+    const onFinish = () => dispatch(finishRoomEdit())
 
-const EditRoomContainer = connect(mapStateToProps, mapDispatchToProps)(EditRoomComponent)
+    return (
+        <EditRoomComponent
+            {...props}
+            onEdit={onEdit}
+            onFinish={onFinish}
+            isEditing={isEditing}
+            isInRackConstructionMode={isInRackConstructionMode}
+        />
+    )
+}
 
 export default EditRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js
index cd8319de..726e9d37 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js
@@ -1,21 +1,24 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { startRackConstruction, stopRackConstruction } from '../../../../../actions/topology/room'
 import RackConstructionComponent from '../../../../../components/app/sidebars/topology/room/RackConstructionComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        inRackConstructionMode: state.construction.inRackConstructionMode,
-        isEditingRoom: state.construction.currentRoomInConstruction !== '-1',
-    }
-}
+const RackConstructionContainer = (props) => {
+    const isRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
+    const isEditingRoom = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onStart: () => dispatch(startRackConstruction()),
-        onStop: () => dispatch(stopRackConstruction()),
-    }
+    const dispatch = useDispatch()
+    const onStart = () => dispatch(startRackConstruction())
+    const onStop = () => dispatch(stopRackConstruction())
+    return (
+        <RackConstructionComponent
+            {...props}
+            inRackConstructionMode={isRackConstructionMode}
+            isEditingRoom={isEditingRoom}
+            onStart={onStart}
+            onStop={onStop}
+        />
+    )
 }
 
-const RackConstructionContainer = connect(mapStateToProps, mapDispatchToProps)(RackConstructionComponent)
-
 export default RackConstructionContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js
index cab16016..1f53aeb6 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js
@@ -1,19 +1,13 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { openEditRoomNameModal } from '../../../../../actions/modals/topology'
 import RoomNameComponent from '../../../../../components/app/sidebars/topology/room/RoomNameComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        roomName: state.objects.room[state.interactionLevel.roomId].name,
-    }
+const RoomNameContainer = (props) => {
+    const roomName = useSelector((state) => state.objects.room[state.interactionLevel.roomId].name)
+    const dispatch = useDispatch()
+    const onEdit = () => dispatch(openEditRoomNameModal())
+    return <RoomNameComponent {...props} onEdit={onEdit} roomName={roomName} />
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onEdit: () => dispatch(openEditRoomNameModal()),
-    }
-}
-
-const RoomNameContainer = connect(mapStateToProps, mapDispatchToProps)(RoomNameComponent)
-
 export default RoomNameContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js
index 8c3ca8ab..252881a0 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js
@@ -1,12 +1,10 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import RoomSidebarComponent from '../../../../../components/app/sidebars/topology/room/RoomSidebarComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        roomId: state.interactionLevel.roomId,
-    }
+const RoomSidebarContainer = (props) => {
+    const roomId = useSelector((state) => state.interactionLevel.roomId)
+    return <RoomSidebarComponent {...props} roomId={roomId} />
 }
 
-const RoomSidebarContainer = connect(mapStateToProps)(RoomSidebarComponent)
-
 export default RoomSidebarContainer