flexor-web/src/components/create-user-form/index.ts

import { FocusEventHandler } from 'react'
import { connect } from 'react-redux'

import { checkUserAvailability } from 'src/actions/registration'
import { AppThunkDispatch } from 'src/types'

import CreateUserForm from './create-user-form'

const mapDispatchToProps = (dispatch: AppThunkDispatch) => {
    const checkAvailability: FocusEventHandler<HTMLInputElement> = event => {
        const value = event.target.value

        if (value.length > 3) {
            dispatch(checkUserAvailability(event.target.value))
        }
    }

    return {
        checkAvailability,
    }
}

export default connect(
    null,
    mapDispatchToProps
)(CreateUserForm)