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.

4 files changed, 106 insertions, 87 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js
index b32c8b1d..86f465b6 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js
@@ -1,28 +1,31 @@
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useHistory } from 'react-router-dom'
 import PortfolioListComponent from '../../../../components/app/sidebars/project/PortfolioListComponent'
 import { deletePortfolio, setCurrentPortfolio } from '../../../../actions/portfolios'
 import { openNewPortfolioModal } from '../../../../actions/modals/portfolios'
 import { getState } from '../../../../util/state-utils'
 import { setCurrentTopology } from '../../../../actions/topology/building'
 
-const mapStateToProps = (state) => {
-    let portfolios = state.objects.project[state.currentProjectId]
-        ? state.objects.project[state.currentProjectId].portfolioIds.map((t) => state.objects.portfolio[t])
-        : []
-    if (portfolios.filter((t) => !t).length > 0) {
-        portfolios = []
-    }
+const PortfolioListContainer = (props) => {
+    const state = useSelector((state) => {
+        let portfolios = state.objects.project[state.currentProjectId]
+            ? state.objects.project[state.currentProjectId].portfolioIds.map((t) => state.objects.portfolio[t])
+            : []
+        if (portfolios.filter((t) => !t).length > 0) {
+            portfolios = []
+        }
 
-    return {
-        currentProjectId: state.currentProjectId,
-        currentPortfolioId: state.currentPortfolioId,
-        portfolios,
-    }
-}
+        return {
+            currentProjectId: state.currentProjectId,
+            currentPortfolioId: state.currentPortfolioId,
+            portfolios,
+        }
+    })
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    return {
+    const dispatch = useDispatch()
+    const history = useHistory()
+    const actions = {
         onNewPortfolio: () => {
             dispatch(openNewPortfolioModal())
         },
@@ -34,12 +37,11 @@ const mapDispatchToProps = (dispatch, ownProps) => {
                 const state = await getState(dispatch)
                 dispatch(deletePortfolio(id))
                 dispatch(setCurrentTopology(state.objects.project[state.currentProjectId].topologyIds[0]))
-                ownProps.history.push(`/projects/${state.currentProjectId}`)
+                history.push(`/projects/${state.currentProjectId}`)
             }
         },
     }
+    return <PortfolioListComponent {...props} {...state} {...actions} />
 }
 
-const PortfolioListContainer = withRouter(connect(mapStateToProps, mapDispatchToProps)(PortfolioListComponent))
-
 export default PortfolioListContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js
index 49001099..35e6c52b 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js
@@ -1,10 +1,11 @@
 import React from 'react'
-import { withRouter } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import ProjectSidebarComponent from '../../../../components/app/sidebars/project/ProjectSidebarComponent'
 import { isCollapsible } from '../../../../util/sidebar-space'
 
-const ProjectSidebarContainer = withRouter(({ location, ...props }) => (
-    <ProjectSidebarComponent collapsible={isCollapsible(location)} {...props} />
-))
+const ProjectSidebarContainer = (props) => {
+    const location = useLocation()
+    return <ProjectSidebarComponent collapsible={isCollapsible(location)} {...props} />
+}
 
 export default ProjectSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
index 415e2792..18d0735e 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
@@ -1,41 +1,49 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import ScenarioListComponent from '../../../../components/app/sidebars/project/ScenarioListComponent'
 import { openNewScenarioModal } from '../../../../actions/modals/scenarios'
 import { deleteScenario, setCurrentScenario } from '../../../../actions/scenarios'
 import { setCurrentPortfolio } from '../../../../actions/portfolios'
 
-const mapStateToProps = (state, ownProps) => {
-    let scenarios = state.objects.portfolio[ownProps.portfolioId]
-        ? state.objects.portfolio[ownProps.portfolioId].scenarioIds.map((t) => state.objects.scenario[t])
-        : []
-    if (scenarios.filter((t) => !t).length > 0) {
-        scenarios = []
-    }
+const ScenarioListContainer = ({ portfolioId, children }) => {
+    const currentProjectId = useSelector((state) => state.currentProjectId)
+    const currentScenarioId = useSelector((state) => state.currentScenarioId)
+    const scenarios = useSelector((state) => {
+        let scenarios = state.objects.portfolio[portfolioId]
+            ? state.objects.portfolio[portfolioId].scenarioIds.map((t) => state.objects.scenario[t])
+            : []
+        if (scenarios.filter((t) => !t).length > 0) {
+            scenarios = []
+        }
 
-    return {
-        currentProjectId: state.currentProjectId,
-        currentScenarioId: state.currentScenarioId,
-        scenarios,
-    }
-}
+        return scenarios
+    })
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onNewScenario: (currentPortfolioId) => {
-            dispatch(setCurrentPortfolio(currentPortfolioId))
-            dispatch(openNewScenarioModal())
-        },
-        onChooseScenario: (portfolioId, scenarioId) => {
-            dispatch(setCurrentScenario(portfolioId, scenarioId))
-        },
-        onDeleteScenario: (id) => {
-            if (id) {
-                dispatch(deleteScenario(id))
-            }
-        },
+    const dispatch = useDispatch()
+    const onNewScenario = (currentPortfolioId) => {
+        dispatch(setCurrentPortfolio(currentPortfolioId))
+        dispatch(openNewScenarioModal())
+    }
+    const onChooseScenario = (portfolioId, scenarioId) => {
+        dispatch(setCurrentScenario(portfolioId, scenarioId))
+    }
+    const onDeleteScenario = (id) => {
+        if (id) {
+            dispatch(deleteScenario(id))
+        }
     }
-}
 
-const ScenarioListContainer = connect(mapStateToProps, mapDispatchToProps)(ScenarioListComponent)
+    return (
+        <ScenarioListComponent
+            portfolioId={portfolioId}
+            currentProjectId={currentProjectId}
+            currentScenarioId={currentScenarioId}
+            scenarios={scenarios}
+            onNewScenario={onNewScenario}
+            onChooseScenario={onChooseScenario}
+            onDeleteScenario={onDeleteScenario}
+        />
+    )
+}
 
 export default ScenarioListContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js
index e1de18f9..954284a6 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js
@@ -1,46 +1,54 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import TopologyListComponent from '../../../../components/app/sidebars/project/TopologyListComponent'
 import { setCurrentTopology } from '../../../../actions/topology/building'
 import { openNewTopologyModal } from '../../../../actions/modals/topology'
-import { withRouter } from 'react-router-dom'
+import { useHistory } from 'react-router-dom'
 import { getState } from '../../../../util/state-utils'
 import { deleteTopology } from '../../../../actions/topologies'
 
-const mapStateToProps = (state) => {
-    let topologies = state.objects.project[state.currentProjectId]
-        ? state.objects.project[state.currentProjectId].topologyIds.map((t) => state.objects.topology[t])
-        : []
-    if (topologies.filter((t) => !t).length > 0) {
-        topologies = []
-    }
+const TopologyListContainer = () => {
+    const dispatch = useDispatch()
+    const history = useHistory()
 
-    return {
-        currentTopologyId: state.currentTopologyId,
-        topologies,
-    }
-}
+    const topologies = useSelector((state) => {
+        let topologies = state.objects.project[state.currentProjectId]
+            ? state.objects.project[state.currentProjectId].topologyIds.map((t) => state.objects.topology[t])
+            : []
+        if (topologies.filter((t) => !t).length > 0) {
+            topologies = []
+        }
+
+        return topologies
+    })
+    const currentTopologyId = useSelector((state) => state.currentTopologyId)
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    return {
-        onChooseTopology: async (id) => {
-            dispatch(setCurrentTopology(id))
+    const onChooseTopology = async (id) => {
+        dispatch(setCurrentTopology(id))
+        const state = await getState(dispatch)
+        history.push(`/projects/${state.currentProjectId}`)
+    }
+    const onNewTopology = () => {
+        dispatch(openNewTopologyModal())
+    }
+    const onDeleteTopology = async (id) => {
+        if (id) {
             const state = await getState(dispatch)
-            ownProps.history.push(`/projects/${state.currentProjectId}`)
-        },
-        onNewTopology: () => {
-            dispatch(openNewTopologyModal())
-        },
-        onDeleteTopology: async (id) => {
-            if (id) {
-                const state = await getState(dispatch)
-                dispatch(deleteTopology(id))
-                dispatch(setCurrentTopology(state.objects.project[state.currentProjectId].topologyIds[0]))
-                ownProps.history.push(`/projects/${state.currentProjectId}`)
-            }
-        },
+            dispatch(deleteTopology(id))
+            dispatch(setCurrentTopology(state.objects.project[state.currentProjectId].topologyIds[0]))
+            history.push(`/projects/${state.currentProjectId}`)
+        }
     }
-}
 
-const TopologyListContainer = withRouter(connect(mapStateToProps, mapDispatchToProps)(TopologyListComponent))
+    return (
+        <TopologyListComponent
+            topologies={topologies}
+            currentTopologyId={currentTopologyId}
+            onChooseTopology={onChooseTopology}
+            onNewTopology={onNewTopology}
+            onDeleteTopology={onDeleteTopology}
+        />
+    )
+}
 
 export default TopologyListContainer