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, 8 insertions, 13 deletions

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