flexor-web/src/app/components/pages/register-group.tsx

import React, { FC, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { useParams, useHistory } from 'react-router'
import { faUserPlus } from '@fortawesome/free-solid-svg-icons'

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

import { setTitle, valueFromForm, getDefaultThemeName } from '../../utils'
import { useDeepCompareEffect } from '../../hooks'

import { AppState, AppThunkDispatch, Group, EntityType, NotificationType } from '../../types'

import Title from '../../components/title'
import Subtitle from '../../components/subtitle'
import Section from '../../components/section'
import HorizontalRule from '../../components/horizontal-rule'
import PrimaryButton from '../../components/controls/primary-button'
import Loading from '../../components/pages/loading'
import CreateUserForm from '../../components/create-user-form'

interface Params {
    id: string
}

const RegisterGroup: FC = () => {
    const { id } = useParams<Params>()
    const group = useSelector<AppState, Group | undefined>(state => getEntity(state, EntityType.Group, id))
    const form = useSelector(getForm)
    const dispatch = useDispatch<AppThunkDispatch>()
    const history = useHistory()

    useEffect(() => {
        try {
            dispatch(fetchGroup(id))
        } catch (err) {
            handleApiError(err, dispatch, history)
        }

        dispatch(initField('user-id', '', 'id'))
        dispatch(initField('user-name', '', 'name'))
        dispatch(initField('user-email', '', 'email'))
        dispatch(initField('password', ''))
        dispatch(initField('user-theme', getDefaultThemeName(), 'theme'))
        dispatch(initField('user-image', '', 'imageUrl'))
        dispatch(initField('user-cover-image', '', 'coverImageUrl'))
        dispatch(initField('user-agree', false))

        setTitle('Register')
    }, [])

    useDeepCompareEffect(() => {
        if (group) setTitle(`Register with ${group.name}`)
    }, [group])

    const handleRegister = async () => {
        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', ''),
                imageUrl: valueFromForm<string>(form, 'user-image', ''),
                coverImageUrl: valueFromForm<string>(form, 'user-cover-image', ''),
                requiresApproval: valueFromForm<boolean>(form, 'user-requires-approval', false),
                privacy: valueFromForm<string>(form, 'user-privacy', 'public'),
                group: id,
                theme: valueFromForm<string>(form, 'user-theme', getDefaultThemeName()),
            }))

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

    if (!group) return <Loading />

    return (
        <div>
            <Section>
                <Title>Register</Title>
                <Subtitle>{group.name}</Subtitle>
                <HorizontalRule />

                <CreateUserForm />
                <br />

                <PrimaryButton text="Create Your Account" icon={faUserPlus} onClick={() => handleRegister()} />
            </Section>
        </div>
    )
}

export default RegisterGroup