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 '../../../styles/default.scss'

interface Props {
    communicator: Communicator
}

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

    const charactersLeft = maxCharacters - content.length
    const showCharactersLeft = charactersLeft < (maxCharacters / 2)
    const showCharactersStyle = charactersLeft > (maxCharacters * 0.1) ? 'has-text-danger' : ''
    const buttonStyle = 'button is-primary is-small' + (charactersLeft < 1 ? ' is-disabled' : '')

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

    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={showCharactersStyle}>{charactersLeft} Chars Left</p>}
                    </div>
                </div>

                <div className="level-right">
                    <div className="level-item">
                        <button className={buttonStyle}>Post!</button>
                    </div>
                </div>
            </nav>
        </div>
    )
}

export default App