From 3f8511e0c1a9d610ceff977786f15a5c0c14afaf Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Sun, 20 Mar 2022 21:43:04 -0700
Subject: [PATCH] client: stop unnecessary title re-renders in /new

---
 .../components/new-post/drag-and-drop/index.tsx  |  4 ++--
 client/components/new-post/index.tsx             | 16 ++++++++--------
 client/components/new-post/title/index.tsx       |  8 ++++----
 3 files changed, 14 insertions(+), 14 deletions(-)

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 (
         <div>
-            <Title title={title} handleChange={(e) => 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