[ABANDONDED] Set of "apps" for the Flexor social network.
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.
|
|
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
|