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.

8 files changed, 49 insertions, 68 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
index c941e745..3708e33e 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
@@ -1,13 +1,11 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch } from 'react-redux'
 import { addPrefab } from '../../../../../actions/prefabs'
 import AddPrefabComponent from '../../../../../components/app/sidebars/topology/rack/AddPrefabComponent'
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onClick: () => dispatch(addPrefab('name')),
-    }
+const AddPrefabContainer = (props) => {
+    const dispatch = useDispatch()
+    return <AddPrefabComponent {...props} onClick={() => dispatch(addPrefab('name'))} />
 }
 
-const AddPrefabContainer = connect(undefined, mapDispatchToProps)(AddPrefabComponent)
-
 export default AddPrefabContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
index 58c3b082..93bb749f 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
@@ -1,13 +1,11 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch } from 'react-redux'
 import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level'
 import BackToRoomComponent from '../../../../../components/app/sidebars/topology/rack/BackToRoomComponent'
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onClick: () => dispatch(goDownOneInteractionLevel()),
-    }
+const BackToRoomContainer = (props) => {
+    const dispatch = useDispatch()
+    return <BackToRoomComponent {...props} onClick={() => dispatch(goDownOneInteractionLevel())} />
 }
 
-const BackToRoomContainer = connect(undefined, mapDispatchToProps)(BackToRoomComponent)
-
 export default BackToRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
index 8229a359..de46e491 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
@@ -1,13 +1,11 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch } from 'react-redux'
 import { openDeleteRackModal } from '../../../../../actions/modals/topology'
 import DeleteRackComponent from '../../../../../components/app/sidebars/topology/rack/DeleteRackComponent'
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onClick: () => dispatch(openDeleteRackModal()),
-    }
+const DeleteRackContainer = (props) => {
+    const dispatch = useDispatch()
+    return <DeleteRackComponent {...props} onClick={() => dispatch(openDeleteRackModal())} />
 }
 
-const DeleteRackContainer = connect(undefined, mapDispatchToProps)(DeleteRackComponent)
-
 export default DeleteRackContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
index cf341da9..5bb2c784 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
@@ -1,13 +1,12 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch } from 'react-redux'
 import { addMachine } from '../../../../../actions/topology/rack'
 import EmptySlotComponent from '../../../../../components/app/sidebars/topology/rack/EmptySlotComponent'
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    return {
-        onAdd: () => dispatch(addMachine(ownProps.position)),
-    }
+const EmptySlotContainer = (props) => {
+    const dispatch = useDispatch()
+    const onAdd = () => dispatch(addMachine(props.position))
+    return <EmptySlotComponent {...props} onAdd={onAdd} />
 }
 
-const EmptySlotContainer = connect(undefined, mapDispatchToProps)(EmptySlotComponent)
-
 export default EmptySlotContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
index fe12827d..149b4d18 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
@@ -1,19 +1,14 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { goFromRackToMachine } from '../../../../../actions/interaction-level'
 import MachineComponent from '../../../../../components/app/sidebars/topology/rack/MachineComponent'
 
-const mapStateToProps = (state, ownProps) => {
-    return {
-        machine: state.objects.machine[ownProps.machineId],
-    }
+const MachineContainer = (props) => {
+    const machine = useSelector((state) => state.objects.machine[props.machineId])
+    const dispatch = useDispatch()
+    return (
+        <MachineComponent {...props} onClick={() => dispatch(goFromRackToMachine(props.position))} machine={machine} />
+    )
 }
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    return {
-        onClick: () => dispatch(goFromRackToMachine(ownProps.position)),
-    }
-}
-
-const MachineContainer = connect(mapStateToProps, mapDispatchToProps)(MachineComponent)
-
 export default MachineContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
index bc5a285a..b45300fc 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
@@ -1,12 +1,12 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import MachineListComponent from '../../../../../components/app/sidebars/topology/rack/MachineListComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        machineIds: state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].machineIds,
-    }
+const MachineListContainer = (props) => {
+    const machineIds = useSelector(
+        (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].machineIds
+    )
+    return <MachineListComponent {...props} machineIds={machineIds} />
 }
 
-const MachineListContainer = connect(mapStateToProps)(MachineListComponent)
-
 export default MachineListContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
index 504dbc61..7dfdb473 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
@@ -1,19 +1,14 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { openEditRackNameModal } from '../../../../../actions/modals/topology'
 import RackNameComponent from '../../../../../components/app/sidebars/topology/rack/RackNameComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        rackName: state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name,
-    }
+const RackNameContainer = (props) => {
+    const rackName = useSelector(
+        (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name
+    )
+    const dispatch = useDispatch()
+    return <RackNameComponent {...props} rackName={rackName} onEdit={() => dispatch(openEditRackNameModal())} />
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onEdit: () => dispatch(openEditRackNameModal()),
-    }
-}
-
-const RackNameContainer = connect(mapStateToProps, mapDispatchToProps)(RackNameComponent)
-
 export default RackNameContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
index 453d7e41..b8fc3bfb 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
@@ -1,12 +1,10 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import RackSidebarComponent from '../../../../../components/app/sidebars/topology/rack/RackSidebarComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        rackId: state.objects.tile[state.interactionLevel.tileId].rackId,
-    }
+const RackSidebarContainer = (props) => {
+    const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rackId)
+    return <RackSidebarComponent {...props} rackId={rackId} />
 }
 
-const RackSidebarContainer = connect(mapStateToProps)(RackSidebarComponent)
-
 export default RackSidebarContainer