flexor-apps/src/apps/text-app/composer/app.tsx

import React, { FC, useState, useEffect } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEyeSlash } from '@fortawesome/free-solid-svg-icons'
import { Communicator } from '../../../communicator'
import classNames from 'classnames'
import { ClassDictionary } from '../../../types'

import '../../../styles/default.scss'

interface Props {
    communicator: Communicator
}

const App: FC<Props> = ({ communicator }) => {
    const maxCharacters = 256
    const [content, setContent] = useState('')
    const [cover, setCover] = useState('')
    const [posting, setPosting] = useState(false)

    const charactersLeft = maxCharacters - content.length
    const showCharactersLeft = charactersLeft < (maxCharacters / 2)
    const buttonDisabled = charactersLeft < 1 || content.length === 0 || posting

    const showCharactersStyle: ClassDictionary = {
        'has-text-danger': charactersLeft < (maxCharacters * 0.1),
    }

    const buttonStyle: ClassDictionary = {
        'button': true,
        'is-primary': true,
        'is-loading': posting,
    }

    useEffect(() => {
        const init = async () => {
            try {
                await communicator.setHeight(document.body.offsetHeight)
            } catch (err) {
                console.error('App Component: ', err)
            }
        }
        
        init()
    }, [])

    const post = async () => {
        if (!content.length) return

        try {
            setPosting(true)
            await communicator.post(true, content, cover)
            setContent('')
            setCover('')
        } catch (err) {
            console.error('App Component: ', err)
        }

        setPosting(false)
    }

    return (
        <div>
            <div className="field">
                <div className="control">
                    <textarea className="textarea" placeholder="What it do?" value={content} onChange={(e) => setContent(e.target.value)} />
                </div>
            </div>

            <div className="field">
                <p className="control has-icons-left">
                    <input className="input" type="text" placeholder="Cover Text" value={cover} onChange={(e) => setCover(e.target.value)} />
                    <span className="icon is-small is-left">
                        <FontAwesomeIcon icon={faEyeSlash} />
                    </span>
                </p>
            </div>

            <nav className="level">
                <div className="level-left">
                    <div className="level-item">
                        {showCharactersLeft && <p className={classNames(showCharactersStyle)}>{charactersLeft} Chars Left</p>}
                    </div>
                </div>

                <div className="level-right">
                    <div className="level-item">
                        <button className={classNames(buttonStyle)} onClick={() => post()} disabled={buttonDisabled}>Post!</button>
                    </div>
                </div>
            </nav>
        </div>
    )
}

export default App