client: clean-up drag and drop code and set post title if unset

client/components/new-post/drag-and-drop/index.tsx

@@ -94,12 +94,12 @@ const allowedFileExtensions = [
     'webmanifest',
 ]
 
-function FileDropzone({ setDocs, docs }: { setDocs: React.Dispatch<React.SetStateAction<Document[]>>, docs: Document[] }) {
+function FileDropzone({ setDocs }: { setDocs: ((docs: Document[]) => void) }) {
     const { palette } = useTheme()
     const { setToast } = useToasts()
-    const onDrop = useCallback(async (acceptedFiles) => {
-        const newDocs = await Promise.all(acceptedFiles.map((file: File) => {
-            return new Promise((resolve, reject) => {
+    const onDrop = async (acceptedFiles: File[]) => {
+        const newDocs = await Promise.all(acceptedFiles.map((file) => {
+            return new Promise<Document>((resolve, reject) => {
                 const reader = new FileReader()
 
                 reader.onabort = () => setToast({ text: 'File reading was aborted', type: 'error' })
@@ -116,15 +116,8 @@ function FileDropzone({ setDocs, docs }: { setDocs: React.Dispatch<React.SetStat
             })
         }))
 
-        if (docs.length === 1) {
-            if (docs[0].content === '') {
         setDocs(newDocs)
-                return
     }
-        }
-
-        setDocs((oldDocs) => [...oldDocs, ...newDocs])
-    }, [setDocs, setToast, docs])
 
     const validator = (file: File) => {
         // TODO: make this configurable
@@ -170,7 +163,7 @@ function FileDropzone({ setDocs, docs }: { setDocs: React.Dispatch<React.SetStat
             </div>
             {fileRejections.length > 0 && <ul className={styles.error}>
                 {/* <Button style={{ float: 'right' }} type="abort" onClick={() => fileRejections.splice(0, fileRejections.length)} auto iconRight={<XCircle />}></Button> */}
-                <Text h5>There was a problem with some of your files.</Text>
+                <Text h5>There was a problem with one or more of your files.</Text>
                 {fileRejectionItems}
             </ul>}
         </div>

client/components/new-post/index.tsx

@@ -63,10 +63,27 @@ const Post = () => {
         setDocs(docs.map((doc) => doc.id === id ? { ...doc, content } : doc))
     }, [docs])
 
+    const uploadDocs = (files: Document[]) => {
+        // if no title is set and the only document is empty,
+        const isFirstDocEmpty = docs.length === 1 && docs[0].title === '' && docs[0].content === ''
+        const shouldSetTitle = !title && isFirstDocEmpty
+        console.log(shouldSetTitle, title, isFirstDocEmpty)
+        if (shouldSetTitle) {
+            if (files.length === 1) {
+                setTitle(files[0].title)
+            } else if (files.length > 1) {
+                setTitle('Uploaded files')
+            }
+        }
+
+        if (isFirstDocEmpty) setDocs(files)
+        else setDocs([...docs, ...files])
+    }
+
     return (
         <div>
-            <Title title={title} setTitle={setTitle} />
-            <FileDropzone docs={docs} setDocs={setDocs} />
+            <Title title={title} handleChange={(e) => setTitle(e.target.value)} />
+            <FileDropzone setDocs={uploadDocs} />
             {
                 docs.map(({ id }) => {
                     const doc = docs.find((doc) => doc.id === id)

client/components/new-post/title/index.tsx

@@ -1,5 +1,5 @@
+import { ChangeEvent, memo } from 'react'
 import { Text, Input } from '@geist-ui/core'
-import { memo } from 'react'
 import ShiftBy from '@components/shift-by'
 import styles from '../post.module.css'
 
@@ -14,18 +14,19 @@ const titlePlaceholders = [
 ]
 
 type props = {
-    setTitle: (title: string) => void
+    handleChange?: (event: ChangeEvent<HTMLInputElement>) => void
     title?: string
 }
 
-const Title = ({ setTitle, title }: props) => {
+const Title = ({ handleChange, title }: props) => {
+
     return (<div className={styles.title}>
         <Text h1 width={"150px"} className={styles.drift}>Drift</Text>
         <ShiftBy y={-3}>
             <Input
                 placeholder={titlePlaceholders[Math.floor(Math.random() * titlePlaceholders.length)]}
                 value={title || ""}
-                onChange={(event) => setTitle(event.target.value)}
+                onChange={handleChange}
                 height={"55px"}
                 font={1.5}
                 label="Post title"
@@ -35,4 +36,4 @@ const Title = ({ setTitle, title }: props) => {
     </div>)
 }
 
-export default memo(Title)
+export default Title