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.

3 files changed, 32 insertions, 57 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/auth/Login.js b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
index bebe015c..54605775 100644
--- a/opendc-web/opendc-web-ui/src/containers/auth/Login.js
+++ b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
@@ -1,18 +1,16 @@
-import PropTypes from 'prop-types'
 import React from 'react'
 import GoogleLogin from 'react-google-login'
-import { connect } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import { logIn } from '../../actions/auth'
 import config from '../../config'
 
-class LoginContainer extends React.Component {
-    static propTypes = {
-        visible: PropTypes.bool.isRequired,
-        onLogin: PropTypes.func.isRequired,
-    }
+const Login = (props) => {
+    const { visible } = props
+    const dispatch = useDispatch()
 
-    onAuthResponse(response) {
-        this.props.onLogin({
+    const onLogin = (payload) => dispatch(logIn(payload))
+    const onAuthResponse = (response) => {
+        onLogin({
             email: response.getBasicProfile().getEmail(),
             givenName: response.getBasicProfile().getGivenName(),
             familyName: response.getBasicProfile().getFamilyName(),
@@ -21,43 +19,27 @@ class LoginContainer extends React.Component {
             expiresAt: response.getAuthResponse().expires_at,
         })
     }
-
-    onAuthFailure(error) {
+    const onAuthFailure = (error) => {
+        // TODO Show error alert
         console.error(error)
     }
 
-    render() {
-        if (!this.props.visible) {
-            return <span />
-        }
-
-        return (
-            <GoogleLogin
-                clientId={config['OAUTH_CLIENT_ID']}
-                onSuccess={this.onAuthResponse.bind(this)}
-                onFailure={this.onAuthFailure.bind(this)}
-                render={(renderProps) => (
-                    <span onClick={renderProps.onClick} className="login btn btn-primary">
-                        <span className="fa fa-google" /> Login with Google
-                    </span>
-                )}
-            />
-        )
+    if (!visible) {
+        return <span />
     }
-}
 
-const mapStateToProps = (state, ownProps) => {
-    return {
-        visible: ownProps.visible,
-    }
+    return (
+        <GoogleLogin
+            clientId={config.OAUTH_CLIENT_ID}
+            onSuccess={onAuthResponse}
+            onFailure={onAuthFailure}
+            render={(renderProps) => (
+                <span onClick={renderProps.onClick} className="login btn btn-primary">
+                    <span className="fa fa-google" /> Login with Google
+                </span>
+            )}
+        />
+    )
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onLogin: (payload) => dispatch(logIn(payload)),
-    }
-}
-
-const Login = connect(mapStateToProps, mapDispatchToProps)(LoginContainer)
-
 export default Login
diff --git a/opendc-web/opendc-web-ui/src/containers/auth/Logout.js b/opendc-web/opendc-web-ui/src/containers/auth/Logout.js
index 22400381..66f0f6db 100644
--- a/opendc-web/opendc-web-ui/src/containers/auth/Logout.js
+++ b/opendc-web/opendc-web-ui/src/containers/auth/Logout.js
@@ -1,13 +1,11 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch } from 'react-redux'
 import { logOut } from '../../actions/auth'
 import LogoutButton from '../../components/navigation/LogoutButton'
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onLogout: () => dispatch(logOut()),
-    }
+const Logout = (props) => {
+    const dispatch = useDispatch()
+    return <LogoutButton {...props} onLogout={() => dispatch(logOut())} />
 }
 
-const Logout = connect(undefined, mapDispatchToProps)(LogoutButton)
-
 export default Logout
diff --git a/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js b/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js
index 06da75ab..291c0068 100644
--- a/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js
+++ b/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js
@@ -1,14 +1,9 @@
 import React from 'react'
-import { connect } from 'react-redux'
+import { useSelector } from 'react-redux'
 
-const mapStateToProps = (state) => {
-    return {
-        text: state.auth.givenName + ' ' + state.auth.familyName,
-    }
+function ProfileName() {
+    const name = useSelector((state) => `${state.auth.givenName} ${state.auth.familyName}`)
+    return <span>{name}</span>
 }
 
-const SpanElement = ({ text }) => <span>{text}</span>
-
-const ProfileName = connect(mapStateToProps)(SpanElement)
-
 export default ProfileName