flexor-web/src/components/pages/register-group/index.ts

import { connect } from 'react-redux'

import { handleApiError } from 'src/api/errors'
import { fetchGroup } from 'src/actions/directory'
import { initField } from 'src/actions/forms'
import { showNotification } from 'src/actions/notifications'
import { register } from 'src/actions/registration'
import { getEntity } from 'src/selectors/entities'
import { getForm } from 'src/selectors/forms'

import { valueFromForm } from 'src/utils'
import { AppState, AppThunkDispatch, EntityType, Form, NotificationType } from 'src/types'

import RegisterGroup, { Props } from './register-group'

const mapStateToProps = (state: AppState, ownProps: Props) => ({
    group: getEntity(state, EntityType.Group, ownProps.match.params.id),
    form: getForm(state),
})

const mapDispatchToProps = (dispatch: AppThunkDispatch, ownProps: Props) => ({
    initForm: () => {
        dispatch(initField('user-id', 'id'))
        dispatch(initField('user-name', 'name'))
        dispatch(initField('user-email', 'email'))
        dispatch(initField('password'))
        dispatch(initField('user-agree'))
    },
    fetchGroup: async () => {
        try {
            await dispatch(fetchGroup(ownProps.match.params.id))
        } catch (err) {
            handleApiError(err, dispatch, ownProps.history)
        }
    },
    register: async (form: Form) => {
        if (!valueFromForm<boolean>(form, 'user-agree', false)) {
            dispatch(showNotification(NotificationType.Error, 'You must agree to the terms and conditions.'))
            return
        }

        try {
            await dispatch(register({
                id: valueFromForm<string>(form, 'user-id', ''),
                email: valueFromForm<string>(form, 'user-email', ''),
                password: valueFromForm<string>(form, 'password', ''),
                name: valueFromForm<string>(form, 'user-name', ''),
                group: ownProps.match.params.id,
            }))

            dispatch(showNotification(NotificationType.Welcome, `Welcome to Flexor!`))
    
            ownProps.history.push('/self')
        } catch (err) {
            handleApiError(err, dispatch, ownProps.history)
        }
    }
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(RegisterGroup)