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

import React, { FC, useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { useParams, useHistory } from 'react-router-dom'
import { faIdCard, faCheckCircle, faKey, faShieldAlt, faLink, faAddressBook, faCodeBranch } from '@fortawesome/free-solid-svg-icons'

import { handleApiError } from '../../api/errors'
import { fetchApp, updateApp } from '../../actions/apps'
import { initForm, initField, setFieldNotification } from '../../actions/forms'
import { showNotification } from '../../actions/notifications'
import { getAuthenticatedUserId } from '../../selectors/authentication'
import { getEntity } from '../../selectors/entities'
import { getForm } from '../../selectors/forms'
import { getIsFetching } from '../../selectors/requests'

import { useAuthenticationCheck, useDeepCompareEffect, useTheme } from '../../hooks'
import { setTitle, valueFromForm } from '../../utils'
import { AppState, AppThunkDispatch, EntityType, App, NotificationType, RequestKey } from '../../types'

import Title from '../../components/title'
import Section from '../../components/section'
import HorizontalRule from '../../components/horizontal-rule'
import Loading from '../../components/pages/loading'
import TextField from '../../components/controls/text-field'
import TextareaField from '../../components/controls/textarea-field'
import ImageField from '../../components/controls/image-field'
import CoverImageField from '../../components/controls/cover-image-field'
import IconImageField from '../../components/controls/icon-image-field'
import StaticField from '../../components/controls/static-field'
import PrimaryButton from '../../components/controls/primary-button'

interface Params {
    id: string
}

const EditApp: FC = () => {
    useAuthenticationCheck()

    const theme = useTheme()
    const { id } = useParams<Params>()
    const fetching = useSelector<AppState, boolean>(state => getIsFetching(state, RequestKey.UpdateApp))
    const app = useSelector<AppState, App | undefined>(state => getEntity<App>(state, EntityType.App, id))
    const form = useSelector(getForm)
    const selfId = useSelector(getAuthenticatedUserId)
    const dispatch = useDispatch<AppThunkDispatch>()
    const history = useHistory()
    const [showPrivateKey, setShowPrivateKey] = useState(false)

    useEffect(() => {
        try {
            dispatch(fetchApp(id))
        } catch (err) {
            handleApiError(err, dispatch, history)
        }
    }, [])

    useDeepCompareEffect(() => {
        if (app) {
            if (app.user.id !== selfId) {
                history.push(`/a/${id}`)
            }

            setTitle(app.name)

            dispatch(initForm())
            dispatch(initField('name', app.name))
            dispatch(initField('about', app.about ?? ''))
            dispatch(initField('websiteUrl', app.websiteUrl ?? ''))
            dispatch(initField('companyName', app.companyName ?? ''))
            dispatch(initField('version', ''))
            dispatch(initField('composerUrl', app.composerUrl ?? ''))
            dispatch(initField('rendererUrl', app.rendererUrl ?? ''))
            dispatch(initField('image', app.imageUrl ?? ''))
            dispatch(initField('coverImage', app.coverImageUrl ?? ''))
            dispatch(initField('iconImage', app.iconImageUrl ?? ''))
        }
    }, [app])

    if (!app) return <Loading />

    const handleUpdate = async () => {
        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')

        if (!name) {
            dispatch(showNotification(NotificationType.Error, 'Name is required'))
            dispatch(setFieldNotification('name', NotificationType.Error, 'This is required'))
            return
        }

        if (!version) {
            dispatch(showNotification(NotificationType.Error, 'Version is required'))
            dispatch(setFieldNotification('version', NotificationType.Error, 'This is required'))
            return
        }

        try {
            await dispatch(updateApp(id, {
                name,
                about,
                websiteUrl,
                companyName,
                version,
                composerUrl,
                rendererUrl,
                imageUrl,
                coverImageUrl,
                iconImageUrl,
            }))

            dispatch(showNotification(NotificationType.Success, 'Updated!'))

            setTimeout(() => {
                history.push(`/a/${app.id}`)
            }, 1000)
        } catch (err) {
            handleApiError(err, dispatch, history)
        }
    }

    const privateKeyDisplay = showPrivateKey ? app.privateKey : '********'

    return (
        <div>
            <Section>
                <Title>{app.name}</Title>
                <HorizontalRule />

                <div>
                    <StaticField label="Public Key" icon={faKey} value={app.publicKey} />
                    <StaticField label="Private Key" icon={faShieldAlt} value={privateKeyDisplay} />
                    <a style={{ display: 'block', fontSize: '0.75rem', color: theme.secondary, marginTop: '-2rem' }} onClick={() => setShowPrivateKey(!showPrivateKey)}>{showPrivateKey ? 'Hide' : 'Show'}</a>

                    <HorizontalRule />

                    <StaticField label="ID" icon={faIdCard} />
                    <TextField name="name" label="Name" icon={faIdCard} placeholder="App Name" />
                    <TextareaField name="about" label="About" placeholder="Description of this app" />
                    <TextField name="websiteUrl" label="Website" icon={faLink} placeholder="Website URL (optional)" />
                    <TextField name="companyName" label="Company" icon={faAddressBook} placeholder="Your company or organization (optional)" />
                    <TextField name="version" label="Version" icon={faCodeBranch} placeholder="Current Version of the app (ex: 0.0.1beta5)" help={`Last Version: ${app.version}`} />
                    <HorizontalRule />

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

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

                    <PrimaryButton text="Save" icon={faCheckCircle} loading={fetching} onClick={() => handleUpdate()} />
                </div>
            </Section>
        </div>
    )
}

export default EditApp