From db2720ab7b4f16fdec7e2c403d1a73e1e440154c Mon Sep 17 00:00:00 2001
From: IRahul MIshra <119395914+RahulMishra0722@users.noreply.github.com>
Date: Sun, 30 Jun 2024 23:23:41 +0530
Subject: [PATCH] Worked on issue Feature Add email recipients more efficiently
 issue #500 (#510)

* Worked on issue #500 Feature Add email recipients more efficiently

* Worked on issue #500 Feature Add email recipients more efficiently both features added

* Removed log

* refactor: run formatter

---------

Co-authored-by: Rahul Mishra <rahul07@Rahuls-Laptop.local>
Co-authored-by: Elias Schneider <login@eliasschneider.com>
---
 .../upload/modals/showCreateUploadModal.tsx   | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/upload/modals/showCreateUploadModal.tsx b/frontend/src/components/upload/modals/showCreateUploadModal.tsx
index 6d34af1a..60d4f99d 100644
--- a/frontend/src/components/upload/modals/showCreateUploadModal.tsx
+++ b/frontend/src/components/upload/modals/showCreateUploadModal.tsx
@@ -30,6 +30,7 @@ import shareService from "../../../services/share.service";
 import { FileUpload } from "../../../types/File.type";
 import { CreateShare } from "../../../types/share.type";
 import { getExpirationPreview } from "../../../utils/date.util";
+import React from "react";
 
 const showCreateUploadModal = (
   modals: ModalsContextProps,
@@ -242,7 +243,6 @@ const CreateUploadModalBody = ({
                     disabled={form.values.never_expires}
                     {...form.getInputProps("expiration_unit")}
                     data={[
-                      // Set the label to singular if the number is 1, else plural
                       {
                         value: "-minutes",
                         label:
@@ -347,7 +347,9 @@ const CreateUploadModalBody = ({
                     placeholder={t("upload.modal.accordion.email.placeholder")}
                     searchable
                     creatable
-                    autoComplete="email-recipients"
+                    id="recipient_email"
+                    autoComplete="email"
+                    type="email"
                     getCreateLabel={(query) => `+ ${query}`}
                     onCreate={(query) => {
                       if (!query.match(/^\S+@\S+\.\S+$/)) {
@@ -365,6 +367,25 @@ const CreateUploadModalBody = ({
                       }
                     }}
                     {...form.getInputProps("recipients")}
+                    onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                      // Add email on comma or semicolon
+                      if (e.key === "," || e.key === ";") {
+                        e.preventDefault();
+                        const inputValue = (
+                          e.target as HTMLInputElement
+                        ).value.trim();
+                        if (inputValue.match(/^\S+@\S+\.\S+$/)) {
+                          form.setFieldValue("recipients", [
+                            ...form.values.recipients,
+                            inputValue,
+                          ]);
+                          (e.target as HTMLInputElement).value = "";
+                        }
+                      } else if (e.key === " ") {
+                        e.preventDefault();
+                        (e.target as HTMLInputElement).value = "";
+                      }
+                    }}
                   />
                 </Accordion.Panel>
               </Accordion.Item>