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

import React, { FC, useEffect } from 'react'
import { RouteComponentProps } from 'react-router'

import PageHeader from 'src/components/page-header'
import CreateGroupStep from 'src/components/create-group-step'
import CreateUserStep from 'src/components/create-user-step'

import { setTitle } from 'src/utils'
import { Form } from 'src/types'

export interface Props extends RouteComponentProps {
    stepIndex: number
    form: Form
    initForm: () => void
    register: (form: Form) => void
}

const Register: FC<Props> = ({ stepIndex, form, initForm, register }) => {
    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={() => register(form)} />
        }
    }

    useEffect(() => {
        initForm()
    }, [])

    useEffect(() => {
        setTitle(title())
    }, [stepIndex])

    return (
        <div>
            <PageHeader title={title()} />

            <div className="main-content">
                {component()}
            </div>
        </div>
    )
}

export default Register