diff --git a/packages/app/src/components/PostCreator/index.jsx b/packages/app/src/components/PostCreator/index.jsx index 42fdd6b0..4f950ee2 100644 --- a/packages/app/src/components/PostCreator/index.jsx +++ b/packages/app/src/components/PostCreator/index.jsx @@ -13,6 +13,8 @@ const maxMessageLength = 512 export default (props) => { const api = window.app.request + const additionsRef = React.useRef(null) + const [pending, setPending] = React.useState([]) const [loading, setLoading] = React.useState(false) const [uploaderVisible, setUploaderVisible] = React.useState(false) const [focused, setFocused] = React.useState(false) @@ -57,6 +59,9 @@ export default (props) => { } const onUploadFile = async (req) => { + // hide uploader + setUploaderVisible(false) + // get file data const file = req.file @@ -64,8 +69,6 @@ export default (props) => { const formData = new FormData() formData.append("files", file) - setLoading(true) - // send request const request = await api.post.upload(formData, undefined).catch((error) => { console.error(error) @@ -76,8 +79,6 @@ export default (props) => { return false }) - setLoading(false) - if (request) { return req.onSuccess(request) } @@ -86,19 +87,34 @@ export default (props) => { const canPublish = () => { const messageLengthValid = postData.message.length !== 0 && postData.message.length < maxMessageLength - return Boolean(messageLengthValid) + return Boolean(messageLengthValid) && Boolean(pending.length === 0) } const onDraggerChange = (change) => { console.log(change) switch (change.file.status) { + case "uploading": { + setPending([...pending, change.file.uid]) + break + } case "done": { let additions = postData.additions ?? [] additions.push(...change.file.response) - return updatePostData({ additions }) + // remove pending file + setPending(pending.filter(uid => uid !== change.file.uid)) + + // update post data + updatePostData({ additions }) + + // force update additions + if (additionsRef.current) { + additionsRef.current.forceUpdate() + } + + break } default: { @@ -127,6 +143,12 @@ export default (props) => { }) }, []) + // set loading to true menwhile pending is not empty + React.useEffect(() => { + console.log(pending) + setLoading(pending.length !== 0) + }, [pending]) + return
{ @@ -170,7 +192,7 @@ export default (props) => {
- {postData.additions.length > 0 && } + {postData.additions.length > 0 && }
@@ -187,6 +209,7 @@ export default (props) => {