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

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

import { handleApiError } from 'src/api/errors'
import { fetchApp } from 'src/actions/apps'
import { initForm, initField } from 'src/actions/forms'
import { getAuthenticatedUserId } from 'src/selectors/authentication'
import { getEntity } from 'src/selectors/entities'

import { useAuthenticationCheck, useDeepCompareEffect } from 'src/hooks'
import { setTitle } from 'src/utils'
import { AppState, AppThunkDispatch, EntityType, App } from 'src/types'

import PageHeader from 'src/components/page-header'
import Loading from 'src/components/pages/loading'

import TextField from 'src/components/forms/text-field'
import TextareaField from 'src/components/forms/textarea-field'
import FileField from 'src/components/forms/file-field'

interface Params {
    id: string
}

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

    const { id } = useParams<Params>()
    const app = useSelector<AppState, App | undefined>(state => getEntity<App>(state, EntityType.App, id))
    const selfId = useSelector<AppState, string | undefined>(getAuthenticatedUserId)
    const dispatch = useDispatch<AppThunkDispatch>()
    const history = useHistory()

    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 = () => {

    }

    return (
        <div>
            <PageHeader title={app.name} />

            <div className="main-content">
                <div className="centered-content">
                    <div className="field">
                        <label className="label">ID</label>
                        <div className="control has-icons-left">
                            <input className="input" type="text" value={app.id} readOnly />
                            <span className="icon is-small is-left">
                                <FontAwesomeIcon icon={faIdCard} />
                            </span>
                        </div>
                    </div>
                    <br />

                    <TextField name="name" label="Name" placeholder="App Name" />
                    <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 />
                    <FileField name="image" label="Image" />
                    <br />
                    <FileField name="coverImage" label="Cover Image" />
                    <br />
                    <FileField name="iconImage" label="Icon Image" />
                    <br />
                    <TextField name="version" label="Version" placeholder="Current Version of the app (ex: 0.0.1beta5)" />
                    <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 />

                    <button className="button is-primary" onClick={() => handleUpdate()}>
                        <span className="icon is-small">
                            <FontAwesomeIcon icon={faCheckCircle} />
                        </span>
                        <span>Save</span>
                    </button>
                </div>
            </div>
        </div>
    )
}

export default EditApp