From 6eadaf2942cd5055e2b8a73753769b8fbf70a67c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 8 Feb 2023 13:02:48 -0600
Subject: [PATCH] CHats: fix deleting a specific attachment

---
 .../features/chats/components/chat-composer.tsx    |  2 +-
 .../features/chats/components/chat-textarea.tsx    | 14 +++++++++++---
 app/soapbox/features/chats/components/chat.tsx     |  6 ++++--
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-composer.tsx b/app/soapbox/features/chats/components/chat-composer.tsx
index 3432a7533..2cda01254 100644
--- a/app/soapbox/features/chats/components/chat-composer.tsx
+++ b/app/soapbox/features/chats/components/chat-composer.tsx
@@ -43,7 +43,7 @@ interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaEl
   onSelectFile: (files: FileList, intl: IntlShape) => void
   resetFileKey: number | null
   attachments?: Attachment[]
-  onDeleteAttachment?: () => void
+  onDeleteAttachment?: (i: number) => void
   isUploading?: boolean
   uploadProgress?: number
 }
diff --git a/app/soapbox/features/chats/components/chat-textarea.tsx b/app/soapbox/features/chats/components/chat-textarea.tsx
index 7a15a036a..3304bc40a 100644
--- a/app/soapbox/features/chats/components/chat-textarea.tsx
+++ b/app/soapbox/features/chats/components/chat-textarea.tsx
@@ -8,7 +8,7 @@ import ChatUpload from './chat-upload';
 
 interface IChatTextarea extends React.ComponentProps<typeof Textarea> {
   attachments?: Attachment[]
-  onDeleteAttachment?: () => void
+  onDeleteAttachment?: (i: number) => void
   isUploading?: boolean
   uploadProgress?: number
 }
@@ -21,6 +21,14 @@ const ChatTextarea: React.FC<IChatTextarea> = ({
   uploadProgress = 0,
   ...rest
 }) => {
+  const handleDeleteAttachment = (i: number) => {
+    return () => {
+      if (onDeleteAttachment) {
+        onDeleteAttachment(i);
+      }
+    };
+  };
+
   return (
     <div className={`
       block
@@ -36,12 +44,12 @@ const ChatTextarea: React.FC<IChatTextarea> = ({
     >
       {(!!attachments?.length || isUploading) && (
         <HStack className='-ml-2 -mt-2 p-3 pb-0' wrap>
-          {attachments?.map(attachment => (
+          {attachments?.map((attachment, i) => (
             <div className='ml-2 mt-2 flex'>
               <ChatUpload
                 key={attachment.id}
                 attachment={attachment}
-                onDelete={onDeleteAttachment}
+                onDelete={handleDeleteAttachment(i)}
               />
             </div>
           ))}
diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx
index 5e0d918a1..eb6bf6310 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/app/soapbox/features/chats/components/chat.tsx
@@ -131,8 +131,10 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
 
   const handleMouseOver = () => markRead();
 
-  const handleRemoveFile = () => {
-    setAttachments([]);
+  const handleRemoveFile = (i: number) => {
+    const newAttachments = [...attachments];
+    newAttachments.splice(i, 1);
+    setAttachments(newAttachments);
     setResetFileKey(fileKeyGen());
   };