From be4cc9324c00873f75b4d42ef87bc45eef4453b2 Mon Sep 17 00:00:00 2001
From: Madhav Arora <101039217+m4-droid@users.noreply.github.com>
Date: Mon, 6 Nov 2023 13:25:48 +0530
Subject: [PATCH] feat: added remove button for selected files (#234)

* feat: added remove button for seleted files

* feat: added remove button for selected files
---
 src/client/routes/home/index.jsx        | 22 ++++++++++++++++++++--
 src/client/routes/home/style.module.css | 17 +++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 src/client/routes/home/style.module.css

diff --git a/src/client/routes/home/index.jsx b/src/client/routes/home/index.jsx
index d1805cbc..b7fbfbbd 100644
--- a/src/client/routes/home/index.jsx
+++ b/src/client/routes/home/index.jsx
@@ -43,6 +43,8 @@ import { createSecret, burnSecret } from '../../api/secret';
 import { generateKey, encrypt } from '../../../shared/helpers/crypto';
 import { useTranslation } from 'react-i18next';
 
+import style from './style.module.css';
+
 const DEFAULT_TTL = 259200; // 3 days - 72 hours
 
 const Home = () => {
@@ -215,6 +217,12 @@ const Home = () => {
         }
     };
 
+    const removeFile = (index) => {
+        const updatedFiles = [...form.values.files];
+        updatedFiles.splice(index, 1);
+        form.setFieldValue('files', updatedFiles);
+    };
+
     const handleFocus = (event) => event.target.select();
 
     const getSecretURL = (withEncryptionKey = true) => {
@@ -399,8 +407,18 @@ const Home = () => {
 
                     {form.values.files?.length > 0 && (
                         <Group>
-                            {form.values.files.map((file) => (
-                                <Badge color="orange" key={file.name}>
+                            {form.values.files.map((file, index) => (
+                                <Badge
+                                    className={style['file-badge']}
+                                    color="orange"
+                                    key={file.name}
+                                >
+                                    <Badge
+                                        className={style['file-remove']}
+                                        onClick={() => removeFile(index)}
+                                    >
+                                        &times;
+                                    </Badge>
                                     {file.name}
                                 </Badge>
                             ))}
diff --git a/src/client/routes/home/style.module.css b/src/client/routes/home/style.module.css
new file mode 100644
index 00000000..c28390f4
--- /dev/null
+++ b/src/client/routes/home/style.module.css
@@ -0,0 +1,17 @@
+.file-badge {
+    padding-left: 0;
+}
+
+.file-remove {
+    background: none;
+    color: red;
+    cursor: pointer;
+    padding: 0 5px;
+    margin-right: 5px;
+}
+
+.file-remove:hover {
+    /* background: #602e12; */
+    background: red;
+    color: white;
+}