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

diff --git a/opendc-web/opendc-web-ui/src/containers/navigation/AppNavbarContainer.js b/opendc-web/opendc-web-ui/src/containers/navigation/AppNavbarContainer.js
index 845d54e1..42a44345 100644
--- a/opendc-web/opendc-web-ui/src/containers/navigation/AppNavbarContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/navigation/AppNavbarContainer.js
@@ -1,12 +1,12 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import AppNavbarComponent from '../../components/navigation/AppNavbarComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        project: state.currentProjectId !== '-1' ? state.objects.project[state.currentProjectId] : undefined,
-    }
+const AppNavbarContainer = (props) => {
+    const project = useSelector((state) =>
+        state.currentProjectId !== '-1' ? state.objects.project[state.currentProjectId] : undefined
+    )
+    return <AppNavbarComponent {...props} project={project} />
 }
 
-const AppNavbarContainer = connect(mapStateToProps)(AppNavbarComponent)
-
 export default AppNavbarContainer