diff --git a/client/components/new-post/drag-and-drop/index.tsx b/client/components/new-post/drag-and-drop/index.tsx index 08973db7..dfae57ce 100644 --- a/client/components/new-post/drag-and-drop/index.tsx +++ b/client/components/new-post/drag-and-drop/index.tsx @@ -1,5 +1,5 @@ import { Button, Text, useTheme, useToasts } from '@geist-ui/core' -import { useCallback, useEffect } from 'react' +import { memo, useCallback, useEffect } from 'react' import { useDropzone } from 'react-dropzone' import styles from './drag-and-drop.module.css' import { Document } from '../' @@ -170,4 +170,4 @@ function FileDropzone({ setDocs }: { setDocs: ((docs: Document[]) => void) }) { ) } -export default FileDropzone \ No newline at end of file +export default memo(FileDropzone) \ No newline at end of file diff --git a/client/components/new-post/index.tsx b/client/components/new-post/index.tsx index 6e41a42f..373c62f3 100644 --- a/client/components/new-post/index.tsx +++ b/client/components/new-post/index.tsx @@ -24,6 +24,7 @@ const Post = () => { content: '', id: generateUUID() }]) + const [isSubmitting, setSubmitting] = useState(false) const remove = (id: string) => { @@ -63,11 +64,10 @@ const Post = () => { setDocs(docs.map((doc) => doc.id === id ? { ...doc, content } : doc)) }, [docs]) - const uploadDocs = (files: Document[]) => { + const uploadDocs = useCallback((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) @@ -78,15 +78,15 @@ const Post = () => { if (isFirstDocEmpty) setDocs(files) else setDocs([...docs, ...files]) - } + }, [docs, title]) + return (
- setTitle(e.target.value)} /> + <Title title={title} setTitle={setTitle} /> <FileDropzone setDocs={uploadDocs} /> { - docs.map(({ id }) => { - const doc = docs.find((doc) => doc.id === id) + docs.map(({ content, id, title }) => { return ( <Document remove={() => remove(id)} @@ -94,8 +94,8 @@ const Post = () => { editable={true} setContent={(content) => updateContent(content, id)} setTitle={(title) => updateTitle(title, id)} - content={doc?.content} - title={doc?.title} + content={content} + title={title} /> ) }) diff --git a/client/components/new-post/title/index.tsx b/client/components/new-post/title/index.tsx index dae79ac5..d9b2302a 100644 --- a/client/components/new-post/title/index.tsx +++ b/client/components/new-post/title/index.tsx @@ -14,11 +14,11 @@ const titlePlaceholders = [ ] type props = { - handleChange?: (event: ChangeEvent<HTMLInputElement>) => void + setTitle: (title: string) => void title?: string } -const Title = ({ handleChange, title }: props) => { +const Title = ({ setTitle, title }: props) => { return (<div className={styles.title}> <Text h1 width={"150px"} className={styles.drift}>Drift</Text> @@ -26,7 +26,7 @@ const Title = ({ handleChange, title }: props) => { <Input placeholder={titlePlaceholders[Math.floor(Math.random() * titlePlaceholders.length)]} value={title || ""} - onChange={handleChange} + onChange={(event) => setTitle(event.target.value)} height={"55px"} font={1.5} label="Post title" @@ -36,4 +36,4 @@ const Title = ({ handleChange, title }: props) => { </div>) } -export default Title \ No newline at end of file +export default memo(Title) \ No newline at end of file