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, 18 insertions, 30 deletions

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