Multiple email pasting feature added. (#173)

* Add: Multiple pasting feature added. * Fix: formatted using original formatter. * Removed console.log * Removed redundant methods and resolved email check issues. * resolved issues.
Cefalo · Jan 24, 2025 · ab79428 · ab79428
1 parent 6e3d282
commit ab79428
Showing 1 changed file with 19 additions and 37 deletions.
diff --git a/client/src/components/AttendeeInput.tsx b/client/src/components/AttendeeInput.tsx
@@ -1,12 +1,11 @@
-import { TextField, Chip, Box, Autocomplete, debounce } from '@mui/material';
-import PeopleAltRoundedIcon from '@mui/icons-material/PeopleAltRounded';
-import { useState } from 'react';
 import { useApi } from '@/context/ApiContext';
 import { isEmailValid } from '@/helpers/utility';
-import toast from 'react-hot-toast';
+import PeopleAltRoundedIcon from '@mui/icons-material/PeopleAltRounded';
+import { Autocomplete, Box, Chip, debounce, TextField, Typography } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
-import { Typography } from '@mui/material';
 import type { IPeopleInformation } from '@quickmeet/shared';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
 
 interface AttendeeInputProps {
   id: string;
@@ -33,44 +32,28 @@ export default function AttendeeInput({ id, onChange, value, type }: AttendeeInp
 
   const handleSelectionChange = (_: React.SyntheticEvent, newValue: Array<string | IPeopleInformation>) => {
     const emails = newValue.map((option) => (typeof option === 'object' && option.email ? option.email : (option as string)));
-    const filteredEmails = emails.filter((email) => emails.indexOf(email) === emails.lastIndexOf(email));
-    if (filteredEmails.length > 0) {
-      const lastValue = filteredEmails[filteredEmails.length - 1].trim();
-      if (isEmailValid(lastValue)) {
-        onChange(id, filteredEmails);
-        setTextInput('');
-      } else {
-        toast.error('Invalid email entered');
-      }
-    } else {
-      onChange(id, filteredEmails);
-      setTextInput('');
-    }
-  };
+    const filteredEmails = emails
+      .join(' ')
+      .split(/\s+/)
+      .map((email) => email.trim())
+      .filter((email) => email !== '');
 
-  const handleKeyDown = (event: any) => {
-    if (event.key === ' ') {
-      event.preventDefault();
-      const inputValue = event.target.value.trim();
-      const existingEmails = value || [];
+    const uniqueEmails = [...new Set(filteredEmails)];
+    const validEmails: string[] = [];
+    const invalidEmails: string[] = [];
 
-      if (existingEmails.find((email) => email === inputValue)) {
-        toast.error('Duplicate email entered');
-        return;
-      }
+    uniqueEmails.forEach((email) => {
+      isEmailValid(email) ? validEmails.push(email) : invalidEmails.push(email);
+    });
 
-      if (!isEmailValid(inputValue)) {
-        toast.error('Invalid email entered');
-        return;
-      }
+    invalidEmails.length > 0 && toast.error('Invalid email(s) entered.');
 
-      onChange(id, [...existingEmails, inputValue]);
-      setTextInput('');
+    if (validEmails.length >= 0) {
+      onChange(id, validEmails);
     }
+    setTextInput('');
   };
-
   const debouncedInputChange = debounce(handleInputChange, 300);
-
   return (
     <Box
       display="flex"
@@ -150,7 +133,6 @@ export default function AttendeeInput({ id, onChange, value, type }: AttendeeInp
               type={type}
               variant="standard"
               placeholder="Attendees"
-              onKeyDown={handleKeyDown}
               slotProps={{
                 input: {
                   ...params.InputProps,