5 files changed, 102 insertions, 152 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..ea62e8dc 100644
--- a/opendc-web/opendc-web-ui/src/pages/App.js
+++ b/opendc-web/opendc-web-ui/src/pages/App.js
@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types'
-import React from 'react'
-import DocumentTitle from 'react-document-title'
-import { connect } from 'react-redux'
-import { ShortcutManager } from 'react-shortcuts'
+import React, { useEffect } from 'react'
+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 +14,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 +21,83 @@ 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'
+import { useDocumentTitle } from '../util/hooks'
 
-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)
-        }
-    }
-
-    getChildContext() {
-        return {
-            shortcuts: shortcutManager,
+            dispatch(openProjectSucceeded(projectId))
         }
-    }
+    }, [projectId, portfolioId, scenarioId, dispatch])
 
-    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 />
-            </div>
-        )
+    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>
+    )
 
-        const portfolioElements = (
-            <div className="full-height app-page-container">
-                <ProjectSidebarContainer />
-                <div className="container-fluid full-height">
-                    <PortfolioResultsContainer />
-                </div>
+    const portfolioElements = (
+        <div className="full-height app-page-container">
+            <ProjectSidebarContainer />
+            <div className="container-fluid full-height">
+                <PortfolioResultsContainer />
             </div>
-        )
+        </div>
+    )
 
-        const scenarioElements = (
-            <div className="full-height app-page-container">
-                <ProjectSidebarContainer />
-                <div className="container-fluid full-height">
-                    <h2>Scenario loading</h2>
-                </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>
-        )
-    }
-}
+    useDocumentTitle(projectName ? projectName + ' - OpenDC' : 'Simulation - OpenDC')
 
-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,
-    }
+    return (
+        <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>
+    )
 }
 
-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)),
-    }
+App.propTypes = {
+    projectId: PropTypes.string.isRequired,
+    portfolioId: PropTypes.string,
+    scenarioId: PropTypes.string,
 }
 
-const App = connect(mapStateToProps, mapDispatchToProps)(AppComponent)
-
 export default App
diff --git a/opendc-web/opendc-web-ui/src/pages/Home.js b/opendc-web/opendc-web-ui/src/pages/Home.js
index 6fc940c0..fb383426 100644
--- a/opendc-web/opendc-web-ui/src/pages/Home.js
+++ b/opendc-web/opendc-web-ui/src/pages/Home.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import DocumentTitle from 'react-document-title'
 import ContactSection from '../components/home/ContactSection'
 import IntroSection from '../components/home/IntroSection'
 import JumbotronHeader from '../components/home/JumbotronHeader'
@@ -10,8 +9,10 @@ import TeamSection from '../components/home/TeamSection'
 import TechnologiesSection from '../components/home/TechnologiesSection'
 import HomeNavbar from '../components/navigation/HomeNavbar'
 import './Home.sass'
+import { useDocumentTitle } from '../util/hooks'
 
 function Home() {
+    useDocumentTitle('OpenDC')
     return (
         <div>
             <HomeNavbar />
@@ -24,7 +25,6 @@ function Home() {
                 <TechnologiesSection />
                 <TeamSection />
                 <ContactSection />
-                <DocumentTitle title="OpenDC" />
             </div>
         </div>
     )
diff --git a/opendc-web/opendc-web-ui/src/pages/NotFound.js b/opendc-web/opendc-web-ui/src/pages/NotFound.js
index 72be7342..b933ffa5 100644
--- a/opendc-web/opendc-web-ui/src/pages/NotFound.js
+++ b/opendc-web/opendc-web-ui/src/pages/NotFound.js
@@ -1,14 +1,15 @@
 import React from 'react'
-import DocumentTitle from 'react-document-title'
 import TerminalWindow from '../components/not-found/TerminalWindow'
 import './NotFound.sass'
+import { useDocumentTitle } from '../util/hooks'
 
-const NotFound = () => (
-    <DocumentTitle title="Page Not Found - OpenDC">
+const NotFound = () => {
+    useDocumentTitle('Page Not Found - OpenDC')
+    return (
         <div className="not-found-backdrop">
             <TerminalWindow />
         </div>
-    </DocumentTitle>
-)
+    )
+}
 
 export default NotFound
diff --git a/opendc-web/opendc-web-ui/src/pages/Profile.js b/opendc-web/opendc-web-ui/src/pages/Profile.js
index 0d94b519..ea781686 100644
--- a/opendc-web/opendc-web-ui/src/pages/Profile.js
+++ b/opendc-web/opendc-web-ui/src/pages/Profile.js
@@ -1,12 +1,16 @@
 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'
+import { useDocumentTitle } from '../util/hooks'
 
-const ProfileContainer = ({ onDelete }) => (
-    <DocumentTitle title="My Profile - OpenDC">
+const Profile = () => {
+    const dispatch = useDispatch()
+    const onDelete = () => dispatch(openDeleteProfileModal())
+
+    useDocumentTitle('My Profile - OpenDC')
+    return (
         <div className="full-height">
             <AppNavbarContainer fullWidth={false} />
             <div className="container text-page-container full-height">
@@ -21,15 +25,7 @@ const ProfileContainer = ({ onDelete }) => (
             </div>
             <DeleteProfileModal />
         </div>
-    </DocumentTitle>
-)
-
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onDelete: () => dispatch(openDeleteProfileModal()),
-    }
+    )
 }
 
-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..5e642a03 100644
--- a/opendc-web/opendc-web-ui/src/pages/Projects.js
+++ b/opendc-web/opendc-web-ui/src/pages/Projects.js
@@ -1,43 +1,30 @@
-import React from 'react'
-import DocumentTitle from 'react-document-title'
-import { connect } from 'react-redux'
-import { openNewProjectModal } from '../actions/modals/projects'
+import React, { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
 import { fetchAuthorizationsOfCurrentUser } from '../actions/users'
 import ProjectFilterPanel from '../components/projects/FilterPanel'
 import NewProjectModal from '../containers/modals/NewProjectModal'
 import NewProjectButtonContainer from '../containers/projects/NewProjectButtonContainer'
 import VisibleProjectList from '../containers/projects/VisibleProjectAuthList'
 import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
+import { useDocumentTitle } from '../util/hooks'
 
-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()))
+    useDocumentTitle('My Projects - OpenDC')
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        fetchAuthorizationsOfCurrentUser: () => dispatch(fetchAuthorizationsOfCurrentUser()),
-        openNewProjectModal: () => dispatch(openNewProjectModal()),
-    }
+    return (
+        <div className="full-height">
+            <AppNavbarContainer fullWidth={false} />
+            <div className="container text-page-container full-height">
+                <ProjectFilterPanel />
+                <VisibleProjectList />
+                <NewProjectButtonContainer />
+            </div>
+            <NewProjectModal />
+        </div>
+    )
 }
 
-const Projects = connect(undefined, mapDispatchToProps)(ProjectsContainer)
-
 export default Projects