|
@ -2,6 +2,9 @@ import React, { FC, useState, useEffect } from 'react' |
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' |
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' |
|
|
import { faEyeSlash } from '@fortawesome/free-solid-svg-icons' |
|
|
import { faEyeSlash } from '@fortawesome/free-solid-svg-icons' |
|
|
import { Communicator } from '../../../communicator' |
|
|
import { Communicator } from '../../../communicator' |
|
|
|
|
|
import classNames from 'classnames' |
|
|
|
|
|
import { ClassDictionary } from '../../../types' |
|
|
|
|
|
|
|
|
import '../../../styles/default.scss' |
|
|
import '../../../styles/default.scss' |
|
|
|
|
|
|
|
|
interface Props { |
|
|
interface Props { |
|
@ -12,11 +15,21 @@ const App: FC<Props> = ({ communicator }) => { |
|
|
const maxCharacters = 256 |
|
|
const maxCharacters = 256 |
|
|
const [content, setContent] = useState('') |
|
|
const [content, setContent] = useState('') |
|
|
const [cover, setCover] = useState('') |
|
|
const [cover, setCover] = useState('') |
|
|
|
|
|
const [posting, setPosting] = useState(false) |
|
|
|
|
|
|
|
|
const charactersLeft = maxCharacters - content.length |
|
|
const charactersLeft = maxCharacters - content.length |
|
|
const showCharactersLeft = charactersLeft < (maxCharacters / 2) |
|
|
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' : '') |
|
|
|
|
|
|
|
|
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(() => { |
|
|
useEffect(() => { |
|
|
const init = async () => { |
|
|
const init = async () => { |
|
@ -30,6 +43,21 @@ const App: FC<Props> = ({ communicator }) => { |
|
|
init() |
|
|
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 ( |
|
|
return ( |
|
|
<div> |
|
|
<div> |
|
|
<div className="field"> |
|
|
<div className="field"> |
|
@ -50,13 +78,13 @@ const App: FC<Props> = ({ communicator }) => { |
|
|
<nav className="level"> |
|
|
<nav className="level"> |
|
|
<div className="level-left"> |
|
|
<div className="level-left"> |
|
|
<div className="level-item"> |
|
|
<div className="level-item"> |
|
|
{showCharactersLeft && <p className={showCharactersStyle}>{charactersLeft} Chars Left</p>} |
|
|
|
|
|
|
|
|
{showCharactersLeft && <p className={classNames(showCharactersStyle)}>{charactersLeft} Chars Left</p>} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div className="level-right"> |
|
|
<div className="level-right"> |
|
|
<div className="level-item"> |
|
|
<div className="level-item"> |
|
|
<button className={buttonStyle}>Post!</button> |
|
|
|
|
|
|
|
|
<button className={classNames(buttonStyle)} onClick={() => post()} disabled={buttonDisabled}>Post!</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
</nav> |
|
|