flexor-web/src/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 'src/api/errors'
import { fetchApp, updateApp } from 'src/actions/apps'
import { initForm, initField, setFieldNotification } from 'src/actions/forms'
import { showNotification } from 'src/actions/notifications'
import { getAuthenticatedUserId } from 'src/selectors/authentication'
import { getEntity } from 'src/selectors/entities'
import { getForm } from 'src/selectors/forms'
import { getIsFetching } from 'src/selectors/requests'

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

import Title from 'src/components/title'
import Section from 'src/components/section'
import HorizontalRule from 'src/components/horizontal-rule'
import Loading from 'src/components/pages/loading'
import TextField from 'src/components/controls/text-field'
import TextareaField from 'src/components/controls/textarea-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 StaticField from 'src/components/controls/static-field'
import PrimaryButton from 'src/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<AppState, Form>(getForm)
    const selfId = useSelector<AppState, string | undefined>(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