From 6d5a2eebb609da67239ea37d12d6b2d3bbfef76e Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 28 Oct 2020 16:41:53 +0100
Subject: 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.
---
 opendc-web/opendc-web-ui/src/pages/App.js      | 168 ++++++++++---------------
 opendc-web/opendc-web-ui/src/pages/Profile.js  |  51 ++++----
 opendc-web/opendc-web-ui/src/pages/Projects.js |  48 +++----
 3 files changed, 111 insertions(+), 156 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages')

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
diff --git a/opendc-web/opendc-web-ui/src/pages/Profile.js b/opendc-web/opendc-web-ui/src/pages/Profile.js
index 0d94b519..1e817037 100644
--- a/opendc-web/opendc-web-ui/src/pages/Profile.js
+++ b/opendc-web/opendc-web-ui/src/pages/Profile.js
@@ -1,35 +1,36 @@
 import React from 'react'
 import DocumentTitle from 'react-document-title'
-import { connect } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import { openDeleteProfileModal } from '../actions/modals/profile'
 import DeleteProfileModal from '../containers/modals/DeleteProfileModal'
 import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
 
-const ProfileContainer = ({ onDelete }) => (
-    <DocumentTitle title="My Profile - OpenDC">
-        <div className="full-height">
-            <AppNavbarContainer fullWidth={false} />
-            <div className="container text-page-container full-height">
-                <button className="btn btn-danger mb-2 ml-auto mr-auto" style={{ maxWidth: 300 }} onClick={onDelete}>
-                    Delete my account on OpenDC
-                </button>
-                <p className="text-muted text-center">
-                    This does not delete your Google account, but simply disconnects it from the OpenDC platform and
-                    deletes any project info that is associated with you (projects you own and any authorizations you
-                    may have on other projects).
-                </p>
-            </div>
-            <DeleteProfileModal />
-        </div>
-    </DocumentTitle>
-)
+const Profile = () => {
+    const dispatch = useDispatch()
+    const onDelete = () => dispatch(openDeleteProfileModal())
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onDelete: () => dispatch(openDeleteProfileModal()),
-    }
+    return (
+        <DocumentTitle title="My Profile - OpenDC">
+            <div className="full-height">
+                <AppNavbarContainer fullWidth={false} />
+                <div className="container text-page-container full-height">
+                    <button
+                        className="btn btn-danger mb-2 ml-auto mr-auto"
+                        style={{ maxWidth: 300 }}
+                        onClick={onDelete}
+                    >
+                        Delete my account on OpenDC
+                    </button>
+                    <p className="text-muted text-center">
+                        This does not delete your Google account, but simply disconnects it from the OpenDC platform and
+                        deletes any project info that is associated with you (projects you own and any authorizations
+                        you may have on other projects).
+                    </p>
+                </div>
+                <DeleteProfileModal />
+            </div>
+        </DocumentTitle>
+    )
 }
 
-const Profile = connect(undefined, mapDispatchToProps)(ProfileContainer)
-
 export default Profile
diff --git a/opendc-web/opendc-web-ui/src/pages/Projects.js b/opendc-web/opendc-web-ui/src/pages/Projects.js
index bb54aaa5..f759073f 100644
--- a/opendc-web/opendc-web-ui/src/pages/Projects.js
+++ b/opendc-web/opendc-web-ui/src/pages/Projects.js
@@ -1,7 +1,6 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import DocumentTitle from 'react-document-title'
-import { connect } from 'react-redux'
-import { openNewProjectModal } from '../actions/modals/projects'
+import { useDispatch } from 'react-redux'
 import { fetchAuthorizationsOfCurrentUser } from '../actions/users'
 import ProjectFilterPanel from '../components/projects/FilterPanel'
 import NewProjectModal from '../containers/modals/NewProjectModal'
@@ -9,35 +8,24 @@ import NewProjectButtonContainer from '../containers/projects/NewProjectButtonCo
 import VisibleProjectList from '../containers/projects/VisibleProjectAuthList'
 import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
 
-class ProjectsContainer extends React.Component {
-    componentDidMount() {
-        this.props.fetchAuthorizationsOfCurrentUser()
-    }
+function Projects() {
+    const dispatch = useDispatch()
 
-    render() {
-        return (
-            <DocumentTitle title="My Projects - OpenDC">
-                <div className="full-height">
-                    <AppNavbarContainer fullWidth={false} />
-                    <div className="container text-page-container full-height">
-                        <ProjectFilterPanel />
-                        <VisibleProjectList />
-                        <NewProjectButtonContainer />
-                    </div>
-                    <NewProjectModal />
-                </div>
-            </DocumentTitle>
-        )
-    }
-}
+    useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser()))
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        fetchAuthorizationsOfCurrentUser: () => dispatch(fetchAuthorizationsOfCurrentUser()),
-        openNewProjectModal: () => dispatch(openNewProjectModal()),
-    }
+    return (
+        <DocumentTitle title="My Projects - OpenDC">
+            <div className="full-height">
+                <AppNavbarContainer fullWidth={false} />
+                <div className="container text-page-container full-height">
+                    <ProjectFilterPanel />
+                    <VisibleProjectList />
+                    <NewProjectButtonContainer />
+                </div>
+                <NewProjectModal />
+            </div>
+        </DocumentTitle>
+    )
 }
 
-const Projects = connect(undefined, mapDispatchToProps)(ProjectsContainer)
-
 export default Projects
-- 
cgit v1.2.3