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, 17 insertions, 23 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js
index 6cf12d8e..b364ed4c 100644
--- a/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js
+++ b/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js
@@ -1,30 +1,24 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { closeNewPortfolioModal } from '../../actions/modals/portfolios'
 import NewPortfolioModalComponent from '../../components/modals/custom-components/NewPortfolioModalComponent'
 import { addPortfolio } from '../../actions/portfolios'
-import { closeNewPortfolioModal } from '../../actions/modals/portfolios'
-
-const mapStateToProps = (state) => {
-    return {
-        show: state.modals.newPortfolioModalVisible,
-    }
-}
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        callback: (name, targets) => {
-            if (name) {
-                dispatch(
-                    addPortfolio({
-                        name,
-                        targets,
-                    })
-                )
-            }
-            dispatch(closeNewPortfolioModal())
-        },
+const NewPortfolioModal = (props) => {
+    const show = useSelector((state) => state.modals.newPortfolioModalVisible)
+    const dispatch = useDispatch()
+    const callback = (name, targets) => {
+        if (name) {
+            dispatch(
+                addPortfolio({
+                    name,
+                    targets,
+                })
+            )
+        }
+        dispatch(closeNewPortfolioModal())
     }
+    return <NewPortfolioModalComponent {...props} callback={callback} show={show} />
 }
 
-const NewPortfolioModal = connect(mapStateToProps, mapDispatchToProps)(NewPortfolioModalComponent)
-
 export default NewPortfolioModal