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.

4 files changed, 30 insertions, 43 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/projects/FilterLink.js b/opendc-web/opendc-web-ui/src/containers/projects/FilterLink.js
index dfd6affe..26f95c55 100644
--- a/opendc-web/opendc-web-ui/src/containers/projects/FilterLink.js
+++ b/opendc-web/opendc-web-ui/src/containers/projects/FilterLink.js
@@ -1,19 +1,13 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { setAuthVisibilityFilter } from '../../actions/projects'
 import FilterButton from '../../components/projects/FilterButton'
 
-const mapStateToProps = (state, ownProps) => {
-    return {
-        active: state.projectList.authVisibilityFilter === ownProps.filter,
-    }
-}
+const FilterLink = (props) => {
+    const active = useSelector((state) => state.projectList.authVisibilityFilter === props.filter)
+    const dispatch = useDispatch()
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    return {
-        onClick: () => dispatch(setAuthVisibilityFilter(ownProps.filter)),
-    }
+    return <FilterButton {...props} onClick={() => dispatch(setAuthVisibilityFilter(props.filter))} active={active} />
 }
 
-const FilterLink = connect(mapStateToProps, mapDispatchToProps)(FilterButton)
-
 export default FilterLink
diff --git a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectButtonContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectButtonContainer.js
index ffd4a4a3..b8f6fef5 100644
--- a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectButtonContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectButtonContainer.js
@@ -1,13 +1,11 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch } from 'react-redux'
 import { openNewProjectModal } from '../../actions/modals/projects'
 import NewProjectButtonComponent from '../../components/projects/NewProjectButtonComponent'
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onClick: () => dispatch(openNewProjectModal()),
-    }
+const NewProjectButtonContainer = (props) => {
+    const dispatch = useDispatch()
+    return <NewProjectButtonComponent {...props} onClick={() => dispatch(openNewProjectModal())} />
 }
 
-const NewProjectButtonContainer = connect(undefined, mapDispatchToProps)(NewProjectButtonComponent)
-
 export default NewProjectButtonContainer
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
diff --git a/opendc-web/opendc-web-ui/src/containers/projects/VisibleProjectAuthList.js b/opendc-web/opendc-web-ui/src/containers/projects/VisibleProjectAuthList.js
index f0010540..b869775c 100644
--- a/opendc-web/opendc-web-ui/src/containers/projects/VisibleProjectAuthList.js
+++ b/opendc-web/opendc-web-ui/src/containers/projects/VisibleProjectAuthList.js
@@ -1,4 +1,5 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import ProjectList from '../../components/projects/ProjectAuthList'
 
 const getVisibleProjectAuths = (projectAuths, filter) => {
@@ -14,19 +15,18 @@ const getVisibleProjectAuths = (projectAuths, filter) => {
     }
 }
 
-const mapStateToProps = (state) => {
-    const denormalizedAuthorizations = state.projectList.authorizationsOfCurrentUser.map((authorizationIds) => {
-        const authorization = state.objects.authorization[authorizationIds]
-        authorization.user = state.objects.user[authorization.userId]
-        authorization.project = state.objects.project[authorization.projectId]
-        return authorization
-    })
+const VisibleProjectAuthList = (props) => {
+    const authorizations = useSelector((state) => {
+        const denormalizedAuthorizations = state.projectList.authorizationsOfCurrentUser.map((authorizationIds) => {
+            const authorization = state.objects.authorization[authorizationIds]
+            authorization.user = state.objects.user[authorization.userId]
+            authorization.project = state.objects.project[authorization.projectId]
+            return authorization
+        })
 
-    return {
-        authorizations: getVisibleProjectAuths(denormalizedAuthorizations, state.projectList.authVisibilityFilter),
-    }
+        return getVisibleProjectAuths(denormalizedAuthorizations, state.projectList.authVisibilityFilter)
+    })
+    return <ProjectList {...props} authorizations={authorizations} />
 }
 
-const VisibleProjectAuthList = connect(mapStateToProps)(ProjectList)
-
 export default VisibleProjectAuthList