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, 6 insertions, 11 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js b/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js
index 8bcbb7fd..a13034e9 100644
--- a/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js
+++ b/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js
@@ -1,20 +1,15 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch } from 'react-redux'
 import { deleteProject } from '../../actions/projects'
 import ProjectActionButtons from '../../components/projects/ProjectActionButtons'
 
-const mapStateToProps = (state, ownProps) => {
-    return {
-        projectId: ownProps.projectId,
-    }
-}
-
-const mapDispatchToProps = (dispatch) => {
-    return {
+const ProjectActions = (props) => {
+    const dispatch = useDispatch()
+    const actions = {
         onViewUsers: (id) => {}, // TODO implement user viewing
         onDelete: (id) => dispatch(deleteProject(id)),
     }
+    return <ProjectActionButtons {...props} {...actions} />
 }
 
-const ProjectActions = connect(mapStateToProps, mapDispatchToProps)(ProjectActionButtons)
-
 export default ProjectActions