[ABANDONED] React/Redux front end for the Flexor social network.
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.
|
|
// create-group-step.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 } from 'react' import { useSelector, useDispatch } from 'react-redux' import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
import { setFieldNotification } from '../actions/forms' import { showNotification } from '../actions/notifications' import { setStep } from '../actions/registration' import { getForm } from '../selectors/forms'
import { valueFromForm } from '../utils' import { MAX_ID_LENGTH } from '../constants' import { AppThunkDispatch, NotificationType } from '../types'
import CreateGroupForm from './create-group-form' import HorizontalRule from '../components/horizontal-rule' import PrimaryButton from '../components/controls/primary-button' import SecondaryButton from '../components/controls/secondary-button'
interface Props { register: () => void }
const CreateGroupStep: FC<Props> = ({ register }) => { const form = useSelector(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
|