flexor-web/src/components/pages/create-app.tsx

import React, { FC, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Link, useHistory } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'

import { checkAppAvailability, createApp } from 'src/actions/apps'
import { initForm, initField, setFieldNotification } from 'src/actions/forms'
import { showNotification } from 'src/actions/notifications'
import { getForm } from 'src/selectors/forms'
import { setTitle, valueFromForm } from 'src/utils'
import { AppState, Form, NotificationType, AppThunkDispatch } from 'src/types'

import PageHeader from 'src/components/page-header'
import TextField from 'src/components/forms/text-field'
import TextareaField from 'src/components/forms/textarea-field'
import CheckboxField from 'src/components/forms/checkbox-field'
import ImageField from 'src/components/forms/image-field'
import CoverImageField from 'src/components/forms/cover-image-field'
import IconImageField from 'src/components/forms/icon-image-field'

const CreateApp: FC = () => {
    const form = useSelector<AppState, Form>(getForm)
    const dispatch = useDispatch<AppThunkDispatch>()
    const history = useHistory()

    const checkAvailability = (value: string) => {
        if (value.length > 3) {
            dispatch(checkAppAvailability(value))
        }
    }

    const handleCreate = async () => {
        let invalid = false

        const name = valueFromForm<string>(form, 'name')
        const about = valueFromForm<string>(form, 'about')
        const websiteUrl = valueFromForm<string>(form, 'websiteUrl')
        const companyName = valueFromForm<string>(form, 'companyName')
        const version = valueFromForm<string>(form, 'version')
        const composerUrl = valueFromForm<string>(form, 'composerUrl')
        const rendererUrl = valueFromForm<string>(form, 'rendererUrl')
        const agree = valueFromForm<boolean>(form, 'agree')

        if (!name || name === '') {
            dispatch(setFieldNotification('name', NotificationType.Error, 'This is required'))
            invalid = true
        }

        if (!version || version === '') {
            dispatch(setFieldNotification('version', NotificationType.Error, 'This is required'))
            invalid = true
        }

        if (!agree) {
            dispatch(setFieldNotification('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

        const id = await dispatch(createApp({
            name: name!,
            version: version!,
            about,
            websiteUrl,
            companyName,
            composerUrl,
            rendererUrl,
        }))

        history.push(`/a/${id}`)
    }

    useEffect(() => {
        setTitle('Create a new App')

        dispatch(initForm())
        dispatch(initField('name', ''))
        dispatch(initField('about', ''))
        dispatch(initField('websiteUrl', ''))
        dispatch(initField('companyName', ''))
        dispatch(initField('version', ''))
        dispatch(initField('composerUrl', ''))
        dispatch(initField('rendererUrl', ''))
        dispatch(initField('agree', false))
    }, [])
    
    return (
        <div>
            <PageHeader title="Create a new App" />

            <div className="main-content">
                <div className="centered-content-narrow">
                    <TextField name="name" label="Name" placeholder="App ID/Name" onBlur={e => checkAvailability(e.target.value)} />
                    <br />
                    <TextareaField name="about" label="About" placeholder="Description of this app" />
                    <br />
                    <TextField name="websiteUrl" label="Website" placeholder="Website URL (optional)" />
                    <br />
                    <TextField name="companyName" label="Company" placeholder="Your company or organization (optional)" />
                    <br />
                    <TextField name="version" label="Version" placeholder="Current Version of the app (ex: 0.0.1beta5)" />
                    <br /><hr />

                    <ImageField name="image" />
                    <br />
                    <CoverImageField name="coverImage" />
                    <br />
                    <IconImageField name="iconImage" />
                    <br /><hr />

                    <TextField name="composerUrl" label="Composer URL" placeholder="URL for the composer web page" />
                    <br />
                    <TextField name="rendererUrl" label="Renderer URL" placeholder="URL for the renderer template" />
                    <br /><br />

                    <CheckboxField name="agree">
                        I agree to the Apps <Link to="/terms/apps">terms and conditions</Link>.
                    </CheckboxField>
                    <br /><br />
                    
                    <button className="button is-success" onClick={() => handleCreate()}>
                        <span className="icon is-small">
                            <FontAwesomeIcon icon={faCheckCircle} />
                        </span>
                        <span>Create</span>
                    </button>
                </div>
            </div>
        </div>
    )
}

export default CreateApp