|
|
// register.tsx
// Copyright (C) 2020 Dwayne Harris
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import React, { FC, useEffect } from 'react' import { useSelector, useDispatch } from 'react-redux' import { useHistory } from 'react-router'
import { handleApiError } from '../../api/errors' import { getForm } from '../../selectors/forms' import { getStep } from '../../selectors/registration' import { initForm, initField } from '../../actions/forms' import { showNotification } from '../../actions/notifications' import { createGroup, register } from '../../actions/registration' import { setTitle, valueFromForm, getDefaultThemeName } from '../../utils' import { AppThunkDispatch, NotificationType } from '../../types'
import Title from '../../components/title' import Section from '../../components/section' import HorizontalRule from '../../components/horizontal-rule' import CreateGroupStep from '../../components/create-group-step' import CreateUserStep from '../../components/create-user-step'
const Register: FC = () => { const stepIndex = useSelector(getStep) const form = useSelector(getForm)
const dispatch = useDispatch<AppThunkDispatch>() const history = useHistory()
const handleRegister = async () => { const groupAgree = valueFromForm<boolean>(form, 'group-agree', false) const userAgree = valueFromForm<boolean>(form, 'user-agree', false)
if (!groupAgree || !userAgree) { dispatch(showNotification(NotificationType.Error, 'You must agree to both Community and User 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', 'open'), theme: valueFromForm<string>(form, 'user-theme', getDefaultThemeName()), }))
await dispatch(createGroup({ name: valueFromForm<string>(form, 'group-name', ''), registration: valueFromForm<string>(form, 'group-registration', ''), imageUrl: valueFromForm<string>(form, 'group-image', ''), coverImageUrl: valueFromForm<string>(form, 'group-cover-image', ''), iconImageUrl: valueFromForm<string>(form, 'group-icon-image', ''), theme: valueFromForm<string>(form, 'group-theme', getDefaultThemeName()), }))
dispatch(showNotification(NotificationType.Welcome, `Welcome to Flexor!`)) location.href = '/self' } catch (err) { handleApiError(err, dispatch, history) } }
const title = () => { switch (stepIndex) { case 0: return 'Create Your Account' default: return 'Create a Community' } }
const component = () => { switch (stepIndex) { case 0: return <CreateUserStep /> default: return <CreateGroupStep register={() => handleRegister()} /> } }
useEffect(() => { dispatch(initForm()) dispatch(initField('group-name', '', 'name')) dispatch(initField('group-registration', 'open', 'registration')) dispatch(initField('group-image', '', 'imageUrl')) dispatch(initField('group-cover-image', '', 'coverImageUrl')) dispatch(initField('group-icon-image', '', 'iconImageUrl')) dispatch(initField('group-theme', getDefaultThemeName(), 'theme')) dispatch(initField('group-agree', false)) dispatch(initField('user-id', '', 'id')) dispatch(initField('user-name', '', 'name')) dispatch(initField('user-email', '', 'email')) dispatch(initField('password', '')) dispatch(initField('user-image', '', 'imageUrl')) dispatch(initField('user-cover-image', '', 'coverImageUrl')) dispatch(initField('user-requires-approval', false, 'requiresApproval')) dispatch(initField('user-privacy', 'public', 'privacy')) dispatch(initField('user-theme', getDefaultThemeName(), 'theme')) dispatch(initField('user-agree', false)) }, [])
useEffect(() => { setTitle(title()) }, [stepIndex])
return ( <div> <Section> <Title>{title()}</Title> <HorizontalRule />
{component()} </Section> </div> ) }
export default Register
|