From db1c642072d70c8861ed33f80ccf096274304785 Mon Sep 17 00:00:00 2001
From: john <me@johnmorr.is>
Date: Mon, 5 May 2025 21:30:35 +0200
Subject: [PATCH] refactor post attachment input

---
 src/components/NewPostWidget.tsx | 49 ++++++++++++++------------------
 1 file changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/components/NewPostWidget.tsx b/src/components/NewPostWidget.tsx
index 20b5e0e..f79c80c 100644
--- a/src/components/NewPostWidget.tsx
+++ b/src/components/NewPostWidget.tsx
@@ -5,62 +5,55 @@ interface NewPostWidgetProps {
   isSubmitting?: boolean
 }
 
-interface Thumbnail {
+interface Attachment {
   id: string
+  file: File
   objectUrl: string
 }
 
 export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPostWidgetProps) {
   const [content, setContent] = useState('')
-  const [files, setFiles] = useState<{ id: string; file: File }[]>([])
-  const [thumbnails, setThumbnails] = useState<Thumbnail[]>([])
+  const [attachments, setAttachments] = useState<Attachment[]>([])
 
   const handleContentChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setContent(e.target.value)
   }
 
   const handleMediaChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (!(e.target.files && e.target.files.length > 0)) {
+    const inputEl = e.target as HTMLInputElement
+    if (inputEl.files == null || inputEl.files.length === 0) {
       return
     }
 
-    const newFiles = Array.from(e.target.files).map((file) => ({
+    const newFiles = Array.from(inputEl.files).map((file) => ({
       id: crypto.randomUUID(),
       file,
+      objectUrl: URL.createObjectURL(file),
     }))
 
-    setFiles([...files, ...newFiles])
-
-    const newThumbnails = newFiles.map((file) => {
-      return {
-        id: file.id,
-        objectUrl: URL.createObjectURL(file.file),
-      }
-    })
-
-    setThumbnails([...thumbnails, ...newThumbnails])
-    ;(e.target as HTMLInputElement).value = ''
+    setAttachments((attachments) => [...attachments, ...newFiles])
+    inputEl.value = ''
   }
 
   const handleSubmit = () => {
-    if (!content.trim() && files.length === 0) {
+    if (!content.trim() && attachments.length === 0) {
       return
     }
+
     onSubmit(
       content,
-      files.map((file) => file.file),
+      attachments.map(({ file }) => file),
     )
+
+    attachments.forEach(({ objectUrl }) => URL.revokeObjectURL(objectUrl))
     setContent('')
-    setFiles([])
-    thumbnails.forEach(({ objectUrl }) => URL.revokeObjectURL(objectUrl))
-    setThumbnails([])
+    setAttachments([])
   }
 
   const handleRemoveMedia = (id: string) => {
-    setFiles(files.filter((file) => file.id !== id))
-    const { objectUrl } = thumbnails.find((thumbnail) => thumbnail.id === id)!
-    URL.revokeObjectURL(objectUrl)
-    setThumbnails(thumbnails.filter((thumbnail) => thumbnail.id !== id))
+    const attachment = attachments.find((attachment) => attachment.id === id)!
+    setAttachments(attachments.filter((attachment) => attachment.id !== id))
+    URL.revokeObjectURL(attachment.objectUrl)
   }
 
   return (
@@ -74,9 +67,9 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
         disabled={isSubmitting}
       />
 
-      {thumbnails.length > 0 && (
+      {attachments.length > 0 && (
         <div className="flex flex-row flex-wrap gap-2 mb-3">
-          {thumbnails.map(({ objectUrl, id }) => (
+          {attachments.map(({ objectUrl, id }) => (
             <button
               key={id}
               className="relative cursor-pointer"
@@ -104,7 +97,7 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
         <button
           className="px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 disabled:opacity-50"
           onClick={handleSubmit}
-          disabled={isSubmitting || (content.trim() === '' && files.length === 0)}
+          disabled={isSubmitting || (content.trim() === '' && attachments.length === 0)}
         >
           Post
         </button>