You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
3.3 KiB
105 lines
3.3 KiB
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, Post } 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 [parent, setParent] = useState<Post | null>(null)
|
|
|
|
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,
|
|
}
|
|
|
|
const buttonText = parent ? 'Reply!' : 'Post!'
|
|
|
|
useEffect(() => {
|
|
const init = async () => {
|
|
try {
|
|
const response = await communicator.init()
|
|
if (response!.parent) setParent(response!.parent)
|
|
|
|
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({
|
|
text: content,
|
|
cover,
|
|
visible: true,
|
|
})
|
|
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}>{buttonText}</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|