You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.4 KiB
72 lines
2.4 KiB
import React, { FC } from 'react'
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
|
|
|
|
import { setFieldNotification } from 'src/actions/forms'
|
|
import { showNotification } from 'src/actions/notifications'
|
|
import { setStep } from 'src/actions/registration'
|
|
import { getForm } from 'src/selectors/forms'
|
|
|
|
import { valueFromForm } from 'src/utils'
|
|
import { MAX_ID_LENGTH } from 'src/constants'
|
|
import { AppState, AppThunkDispatch, NotificationType, Form } from 'src/types'
|
|
|
|
import CreateGroupForm from './create-group-form'
|
|
import HorizontalRule from 'src/components/horizontal-rule'
|
|
import PrimaryButton from 'src/components/controls/primary-button'
|
|
import SecondaryButton from 'src/components/controls/secondary-button'
|
|
|
|
interface Props {
|
|
register: () => void
|
|
}
|
|
|
|
const CreateGroupStep: FC<Props> = ({ register }) => {
|
|
const form = useSelector<AppState, Form>(getForm)
|
|
const dispatch = useDispatch<AppThunkDispatch>()
|
|
|
|
const next = () => {
|
|
let invalid = false
|
|
|
|
const name = valueFromForm<string>(form, 'group-name')
|
|
const agree = valueFromForm<boolean>(form, 'group-agree')
|
|
|
|
if (!name || name === '') {
|
|
dispatch(setFieldNotification('group-name', NotificationType.Error, 'This is required'))
|
|
invalid = true
|
|
}
|
|
|
|
if (name && name.length > MAX_ID_LENGTH) {
|
|
dispatch(setFieldNotification('group-name', NotificationType.Error, `This must be less than ${MAX_ID_LENGTH} characters`))
|
|
invalid = true
|
|
}
|
|
|
|
if (!agree) {
|
|
dispatch(setFieldNotification('group-agree', NotificationType.Error, 'You must agree to the terms and conditions to continue'))
|
|
dispatch(showNotification(NotificationType.Error, 'You must agree to the terms and conditions to continue.'))
|
|
invalid = true
|
|
}
|
|
|
|
if (invalid) return
|
|
register()
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<CreateGroupForm />
|
|
<HorizontalRule />
|
|
|
|
<nav className="level">
|
|
<div>
|
|
<SecondaryButton text="Your Account" icon={faArrowLeft} onClick={() => dispatch(setStep(0))} />
|
|
</div>
|
|
|
|
<div>
|
|
<PrimaryButton text="Finish" onClick={() => next()} />
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CreateGroupStep
|