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, 67 insertions, 101 deletions

diff --git a/opendc-web/opendc-web-ui/src/pages/App.js b/opendc-web/opendc-web-ui/src/pages/App.js
index cbc805b8..03e21cc2 100644
--- a/opendc-web/opendc-web-ui/src/pages/App.js
+++ b/opendc-web/opendc-web-ui/src/pages/App.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useEffect } from 'react'
 import DocumentTitle from 'react-document-title'
-import { connect } from 'react-redux'
-import { ShortcutManager } from 'react-shortcuts'
+import { HotKeys } from 'react-hotkeys'
+import { useDispatch, useSelector } from 'react-redux'
 import { openPortfolioSucceeded } from '../actions/portfolios'
 import { openProjectSucceeded } from '../actions/projects'
 import ToolPanelComponent from '../components/app/map/controls/ToolPanelComponent'
@@ -15,7 +15,6 @@ import DeleteRackModal from '../containers/modals/DeleteRackModal'
 import DeleteRoomModal from '../containers/modals/DeleteRoomModal'
 import EditRackNameModal from '../containers/modals/EditRackNameModal'
 import EditRoomNameModal from '../containers/modals/EditRoomNameModal'
-import KeymapConfiguration from '../shortcuts/keymap'
 import NewTopologyModal from '../containers/modals/NewTopologyModal'
 import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
 import ProjectSidebarContainer from '../containers/app/sidebars/project/ProjectSidebarContainer'
@@ -23,115 +22,82 @@ import { openScenarioSucceeded } from '../actions/scenarios'
 import NewPortfolioModal from '../containers/modals/NewPortfolioModal'
 import NewScenarioModal from '../containers/modals/NewScenarioModal'
 import PortfolioResultsContainer from '../containers/app/results/PortfolioResultsContainer'
+import KeymapConfiguration from '../shortcuts/keymap'
 
-const shortcutManager = new ShortcutManager(KeymapConfiguration)
-
-class AppComponent extends React.Component {
-    static propTypes = {
-        projectId: PropTypes.string.isRequired,
-        portfolioId: PropTypes.string,
-        scenarioId: PropTypes.string,
-        projectName: PropTypes.string,
-    }
-    static childContextTypes = {
-        shortcuts: PropTypes.object.isRequired,
-    }
+const App = ({ projectId, portfolioId, scenarioId }) => {
+    const projectName = useSelector(
+        (state) =>
+            state.currentProjectId !== '-1' &&
+            state.objects.project[state.currentProjectId] &&
+            state.objects.project[state.currentProjectId].name
+    )
+    const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
 
-    componentDidMount() {
-        if (this.props.scenarioId) {
-            this.props.openScenarioSucceeded(this.props.projectId, this.props.portfolioId, this.props.scenarioId)
-        } else if (this.props.portfolioId) {
-            this.props.openPortfolioSucceeded(this.props.projectId, this.props.portfolioId)
+    const dispatch = useDispatch()
+    useEffect(() => {
+        if (scenarioId) {
+            dispatch(openScenarioSucceeded(projectId, portfolioId, scenarioId))
+        } else if (portfolioId) {
+            dispatch(openPortfolioSucceeded(projectId, portfolioId))
         } else {
-            this.props.openProjectSucceeded(this.props.projectId)
+            dispatch(openProjectSucceeded(projectId))
         }
-    }
+    }, [projectId, portfolioId, scenarioId, dispatch])
 
-    getChildContext() {
-        return {
-            shortcuts: shortcutManager,
-        }
-    }
+    const constructionElements = topologyIsLoading ? (
+        <div className="full-height d-flex align-items-center justify-content-center">
+            <LoadingScreen />
+        </div>
+    ) : (
+        <div className="full-height">
+            <MapStage />
+            <ScaleIndicatorContainer />
+            <ToolPanelComponent />
+            <ProjectSidebarContainer />
+            <TopologySidebarContainer />
+        </div>
+    )
 
-    render() {
-        const constructionElements = this.props.topologyIsLoading ? (
-            <div className="full-height d-flex align-items-center justify-content-center">
-                <LoadingScreen />
-            </div>
-        ) : (
-            <div className="full-height">
-                <MapStage />
-                <ScaleIndicatorContainer />
-                <ToolPanelComponent />
-                <ProjectSidebarContainer />
-                <TopologySidebarContainer />
+    const portfolioElements = (
+        <div className="full-height app-page-container">
+            <ProjectSidebarContainer />
+            <div className="container-fluid full-height">
+                <PortfolioResultsContainer />
             </div>
-        )
+        </div>
+    )
 
-        const portfolioElements = (
-            <div className="full-height app-page-container">
-                <ProjectSidebarContainer />
-                <div className="container-fluid full-height">
-                    <PortfolioResultsContainer />
-                </div>
+    const scenarioElements = (
+        <div className="full-height app-page-container">
+            <ProjectSidebarContainer />
+            <div className="container-fluid full-height">
+                <h2>Scenario loading</h2>
             </div>
-        )
+        </div>
+    )
 
-        const scenarioElements = (
-            <div className="full-height app-page-container">
-                <ProjectSidebarContainer />
-                <div className="container-fluid full-height">
-                    <h2>Scenario loading</h2>
-                </div>
-            </div>
-        )
-
-        return (
-            <DocumentTitle
-                title={this.props.projectName ? this.props.projectName + ' - OpenDC' : 'Simulation - OpenDC'}
-            >
-                <div className="page-container full-height">
-                    <AppNavbarContainer fullWidth={true} />
-                    {this.props.scenarioId
-                        ? scenarioElements
-                        : this.props.portfolioId
-                        ? portfolioElements
-                        : constructionElements}
-                    <NewTopologyModal />
-                    <NewPortfolioModal />
-                    <NewScenarioModal />
-                    <EditRoomNameModal />
-                    <DeleteRoomModal />
-                    <EditRackNameModal />
-                    <DeleteRackModal />
-                    <DeleteMachineModal />
-                </div>
-            </DocumentTitle>
-        )
-    }
+    return (
+        <DocumentTitle title={projectName ? projectName + ' - OpenDC' : 'Simulation - OpenDC'}>
+            <HotKeys keyMap={KeymapConfiguration} className="page-container full-height">
+                <AppNavbarContainer fullWidth={true} />
+                {scenarioId ? scenarioElements : portfolioId ? portfolioElements : constructionElements}
+                <NewTopologyModal />
+                <NewPortfolioModal />
+                <NewScenarioModal />
+                <EditRoomNameModal />
+                <DeleteRoomModal />
+                <EditRackNameModal />
+                <DeleteRackModal />
+                <DeleteMachineModal />
+            </HotKeys>
+        </DocumentTitle>
+    )
 }
 
-const mapStateToProps = (state) => {
-    let projectName = undefined
-    if (state.currentProjectId !== '-1' && state.objects.project[state.currentProjectId]) {
-        projectName = state.objects.project[state.currentProjectId].name
-    }
-
-    return {
-        topologyIsLoading: state.currentTopologyId === '-1',
-        projectName,
-    }
+App.propTypes = {
+    projectId: PropTypes.string.isRequired,
+    portfolioId: PropTypes.string,
+    scenarioId: PropTypes.string,
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        openProjectSucceeded: (projectId) => dispatch(openProjectSucceeded(projectId)),
-        openPortfolioSucceeded: (projectId, portfolioId) => dispatch(openPortfolioSucceeded(projectId, portfolioId)),
-        openScenarioSucceeded: (projectId, portfolioId, scenarioId) =>
-            dispatch(openScenarioSucceeded(projectId, portfolioId, scenarioId)),
-    }
-}
-
-const App = connect(mapStateToProps, mapDispatchToProps)(AppComponent)
-
 export default App