Merge pull request #76 from uwblueprint/michael_qian_toast_invalid_email

Removed defualt toast and added email verification/error toast message

Author: MQian21

frontend/src/components/common/NavBarVolunteer.tsx

@@ -30,6 +30,7 @@ import { GoHome } from "react-icons/go";
 import { LuNavigation } from "react-icons/lu";
 import { FiPhone } from "react-icons/fi";
 import abtc_logo from '../../images/abtc_logo.png';
+import CreateShiftMain from '../pages/CreateShift/CreateShiftMain';
 
 interface NavBarVolunteerProps {
   firstName: string;
@@ -41,21 +42,10 @@ const NavBarVolunteer: React.FC<NavBarVolunteerProps> = ({firstName, lastName, r
   const location = useLocation();
   const toast = useToast();
 
-  const showToast = () => {
-    toast({
-      title: "Toast Title",
-      description: "This is a test toast message.",
-      status: "success",
-      position: 'top-right',
-      duration: 5000,
-      isClosable: true,
-    });
-  }
-
   return (
     <Flex bg="white" p={4} alignItems="center">
       <Box ml={4}>
-      <Image src={abtc_logo} alt="ABTC Logo" maxWidth="180px" height="auto"/>
+        <Image src={abtc_logo} alt="ABTC Logo" maxWidth="180px" height="auto"/>
       </Box >
       <ChakraLink
         as={ReactRouterLink}
@@ -112,9 +102,9 @@ const NavBarVolunteer: React.FC<NavBarVolunteerProps> = ({firstName, lastName, r
           Contact Us
         </Flex>
       </ChakraLink>
-      <button type="button" className="btn btn-primary" onClick={showToast}>
+      {/* <button type="button" className="btn btn-primary" onClick={() => showToast("test@example.com")}>
         Test Toast
-      </button>
+      </button> */}
       <Spacer />
        {/*  TODO: add logic behind notification button */}
       <ChakraLink

frontend/src/components/pages/CreateShift/CreateShiftMain.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import moment from "moment";
 
-import { Button, ModalBody, ModalFooter, Box, FormControl, FormLabel, Input, Flex, Select, NumberDecrementStepper, NumberIncrementStepper, NumberInput, NumberInputField, NumberInputStepper, InputRightElement, InputGroup, FormHelperText, Tag, TagLabel, TagCloseButton, Wrap, WrapItem} from "@chakra-ui/react";
+import { Button, ModalBody, ModalFooter, Box, FormControl, FormLabel, Input, Flex, Select, NumberDecrementStepper, NumberIncrementStepper, NumberInput, NumberInputField, NumberInputStepper, InputRightElement, InputGroup, FormHelperText, Tag, TagLabel, TagCloseButton, Wrap, WrapItem, useToast} from "@chakra-ui/react";
 import { CreateShiftFormStepComponentType, CreateShiftFormStepProps, Frequency, ServiceRequestType } from '../../../types/ServiceRequestTypes';
 import { titleCase } from '../../../utils/FormatUtils';
 import EARLIEST_SHIFT_TIME from '../../../constants/ServiceRequestConstants';
+import { validateEmail } from '../../../utils/ValidationUtils'
 
 const CreateShiftMain: CreateShiftFormStepComponentType = ({ onSubmit, updateFields, updateErrorFields, data, errors }: CreateShiftFormStepProps): React.ReactElement => {
     const { requestName, shiftTime, shiftEndTime, frequency, currentEmail, inviteEmails, requestType } = data;
     const { shiftTimeError, shiftEndTimeError } = errors;
+    const toast = useToast();
 
 
     const formatDate = (date: Date) => {
@@ -84,11 +86,23 @@ const CreateShiftMain: CreateShiftFormStepComponentType = ({ onSubmit, updateFie
             updateShiftTimeErrorFields(new Date(shiftTime), endTime);
         }
     };
-    const handleAddEmail = ()=> {
+
+    const handleAddEmail = () => {
         if (currentEmail && currentEmail.trim()) {
+            const emailError = validateEmail(currentEmail);
+            if (emailError) {
+                toast({
+                    title: "Invalid Email",
+                    description: "Please enter a valid email address.",
+                    status: "error",
+                    position: 'top-right',
+                    duration: 5000,
+                    isClosable: true,
+                });
+                return; // Stop execution if email is invalid
+            }
             const updatedEmails = [...(inviteEmails || []), currentEmail.trim()];
-            updateFields({ inviteEmails: updatedEmails, currentEmail: ""});
-            console.log(updatedEmails)
+            updateFields({ inviteEmails: updatedEmails, currentEmail: "" });
         }
     };
 
@@ -97,8 +111,6 @@ const CreateShiftMain: CreateShiftFormStepComponentType = ({ onSubmit, updateFie
         updateFields({ inviteEmails: updatedEmails });
     };
 
-
-
     const isButtonDisabled =
         !requestName ||
         !shiftTime ||