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.
134 lines
5.4 KiB
134 lines
5.4 KiB
import React, { FC, useEffect } from 'react'
|
|
import { useDispatch, useSelector } from 'react-redux'
|
|
import { Link, useHistory } from 'react-router-dom'
|
|
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, RequestKey } from 'src/types'
|
|
|
|
import Title from 'src/components/title'
|
|
import PrimaryButton from 'src/components/controls/primary-button'
|
|
import TextField from 'src/components/controls/text-field'
|
|
import TextareaField from 'src/components/controls/textarea-field'
|
|
import CheckboxField from 'src/components/controls/checkbox-field'
|
|
import ImageField from 'src/components/controls/image-field'
|
|
import CoverImageField from 'src/components/controls/cover-image-field'
|
|
import IconImageField from 'src/components/controls/icon-image-field'
|
|
import { getIsFetching } from 'src/selectors/requests'
|
|
|
|
const CreateApp: FC = () => {
|
|
const form = useSelector<AppState, Form>(getForm)
|
|
const fetching = useSelector<AppState, boolean>(state => getIsFetching(state, RequestKey.CreateApp))
|
|
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 imageUrl = valueFromForm<string>(form, 'image')
|
|
const coverImageUrl = valueFromForm<string>(form, 'coverImage')
|
|
const iconImageUrl = valueFromForm<string>(form, 'iconImage')
|
|
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,
|
|
imageUrl,
|
|
coverImageUrl,
|
|
iconImageUrl,
|
|
}))
|
|
|
|
dispatch(showNotification(NotificationType.Success, 'App created successfully!'))
|
|
|
|
setTimeout(() => {
|
|
history.push(`/a/${id}`)
|
|
}, 1000)
|
|
}
|
|
|
|
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>
|
|
<Title>Create a new App</Title>
|
|
|
|
<div>
|
|
<TextField name="name" label="Name" placeholder="App ID/Name" onBlur={e => checkAvailability(e.target.value)} />
|
|
<TextareaField name="about" label="About" placeholder="Description of this app" />
|
|
<TextField name="websiteUrl" label="Website" placeholder="Website URL (optional)" />
|
|
<TextField name="companyName" label="Company" placeholder="Your company or organization (optional)" />
|
|
<TextField name="version" label="Version" placeholder="Current Version of the app (ex: 0.0.1beta5)" />
|
|
<hr />
|
|
|
|
<ImageField name="image" />
|
|
<CoverImageField name="coverImage" />
|
|
<IconImageField name="iconImage" />
|
|
<hr />
|
|
|
|
<TextField name="composerUrl" label="Composer URL" placeholder="URL for the composer web page" />
|
|
<TextField name="rendererUrl" label="Renderer URL" placeholder="URL for the renderer template" />
|
|
<br />
|
|
|
|
<CheckboxField name="agree">
|
|
I agree to the Apps <Link to="/terms/apps">terms and conditions</Link>.
|
|
</CheckboxField>
|
|
<br /><br />
|
|
|
|
<PrimaryButton text="Create" icon={faCheckCircle} loading={fetching} onClick={() => handleCreate()} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CreateApp
|