Fix incorrect toast Notification. (#1053)

* correct toast notification for TableRow.tsx with full test coverage * Add correct toast with full code coverage * Add correct toast for deleteEventProjectModal.tsx with full test coverage * Add correct toast for UpdateEventProjectModal.tsx with full test coverage * Add correct toast for EventRegistrantsModal.tsx and full test coverage. * Add correct toast for AddTaskModal.tsx with full test coverage * Add correct toast for UpdateTaskModal.tsx with full test coverage * minor fix * Add correct toast to EventRegistrantsModal.tsx * fix EventRegitrantsModal.tsx
PalisadoesFoundation · Nov 12, 2023 · 464e546 · 464e546
1 parent b6c2d15
commit 464e546
Show file tree

Hide file tree

Showing 13 changed files with 138 additions and 160 deletions.
diff --git a/src/components/CheckIn/TableRow.test.tsx b/src/components/CheckIn/TableRow.test.tsx
@@ -95,9 +95,9 @@ describe('Testing Table Row for CheckIn Table', () => {
     await waitFor(() =>
       expect(queryByText('Generating pdf...')).toBeInTheDocument()
     );
-    await waitFor(() =>
-      expect(queryByText('PDF generated successfully!')).toBeInTheDocument()
-    );
+    await waitFor(() => {
+      expect(queryByText('PDF generated successfully!')).toBeInTheDocument();
+    });
   });
 
   test('Upon failing of check in mutation, the appropiate error message should be shown', async () => {

diff --git a/src/components/CheckIn/TableRow.tsx b/src/components/CheckIn/TableRow.tsx
@@ -37,15 +37,17 @@ export const TableRow = ({
       });
   };
 
-  const generateTag = (): void => {
-    toast.warning('Generating pdf...');
-    const inputs = [{ name: data.name }];
-
-    generate({ template: tagTemplate, inputs }).then((pdf) => {
-      const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
-      window.open(URL.createObjectURL(blob));
-      toast.success('PDF generated successfully!');
+  const notify = (): Promise<void> =>
+    toast.promise(generateTag, {
+      pending: 'Generating pdf...',
+      success: 'PDF generated successfully!',
+      error: 'Error generating pdf!',
     });
+  const generateTag = async (): Promise<void> => {
+    const inputs = [{ name: data.name }];
+    const pdf = await generate({ template: tagTemplate, inputs });
+    const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
+    window.open(URL.createObjectURL(blob));
   };
 
   return (
@@ -55,7 +57,7 @@ export const TableRow = ({
           <Button variant="contained" disabled className="m-2 p-2">
             Checked In
           </Button>
-          <Button variant="contained" className="m-2 p-2" onClick={generateTag}>
+          <Button variant="contained" className="m-2 p-2" onClick={notify}>
             Download Tag
           </Button>
         </div>

diff --git a/src/components/EventProjectModals/AddEventProjectModal.tsx b/src/components/EventProjectModals/AddEventProjectModal.tsx
@@ -22,10 +22,17 @@ export const AddEventProjectModal = ({
 
   const [addMutation] = useMutation(ADD_EVENT_PROJECT_MUTATION);
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
+  const notify = (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault();
-    let toSubmit = true;
+    return toast.promise(handleSubmit, {
+      pending: 'Adding the project...',
+      success: 'Added the project successfully!',
+      error: 'There was an error in adding the project!',
+    });
+  };
 
+  const handleSubmit = async (): Promise<void> => {
+    let toSubmit = true;
     if (title.trim().length == 0) {
       toast.error('Title cannot be empty!');
       toSubmit = false;
@@ -34,28 +41,18 @@ export const AddEventProjectModal = ({
       toast.error('Description cannot be empty!');
       toSubmit = false;
     }
-
-    if (toSubmit) {
-      toast.warn('Adding the project...');
-      addMutation({
-        variables: {
-          title,
-          description,
-          eventId,
-        },
-      })
-        .then(() => {
-          toast.success('Added the project successfully!');
-          refetchData();
-          setTitle('');
-          setDescription('');
-          handleClose();
-        })
-        .catch((err) => {
-          toast.error('There was an error in adding the project!');
-          toast.error(err.message);
-        });
-    }
+    if (!toSubmit) return Promise.reject();
+    await addMutation({
+      variables: {
+        title,
+        description,
+        eventId,
+      },
+    });
+    refetchData();
+    setTitle('');
+    setDescription('');
+    handleClose();
   };
 
   return (
@@ -64,7 +61,7 @@ export const AddEventProjectModal = ({
         <Modal.Header closeButton className="bg-primary">
           <Modal.Title className="text-white">Add an Event Project</Modal.Title>
         </Modal.Header>
-        <Form onSubmit={handleSubmit}>
+        <Form onSubmit={notify}>
           <Modal.Body>
             <Form.Group controlId="formBasicTitle">
               <Form.Label>Title</Form.Label>

diff --git a/src/components/EventProjectModals/DeleteEventProjectModal.test.tsx b/src/components/EventProjectModals/DeleteEventProjectModal.test.tsx
@@ -104,6 +104,5 @@ describe('Testing Delete Event Project Modal', () => {
         queryByText('There was an error in deleting the project details!')
       ).toBeInTheDocument()
     );
-    await waitFor(() => expect(queryByText('Oops')).toBeInTheDocument());
   });
 });
diff --git a/src/components/EventProjectModals/DeleteEventProjectModal.tsx b/src/components/EventProjectModals/DeleteEventProjectModal.tsx
@@ -18,22 +18,22 @@ type ModalPropType = {
 export const DeleteEventProjectModal = (props: ModalPropType): JSX.Element => {
   const [deleteMutation] = useMutation(DELETE_EVENT_PROJECT_MUTATION);
 
-  const deleteProject = (): void => {
-    toast.warn('Deleting the project...');
-    deleteMutation({
+  const notify = (): Promise<void> => {
+    return toast.promise(deleteProject, {
+      pending: 'Deleting the project...',
+      success: 'Deleted the project successfully!',
+      error: 'There was an error in deleting the project details!',
+    });
+  };
+  const deleteProject = async (): Promise<void> => {
+    await deleteMutation({
       variables: {
         id: props.project._id,
       },
-    })
-      .then(() => {
-        toast.success('Deleted the project successfully!');
-        props.refetchData();
-        props.handleClose();
-      })
-      .catch((err) => {
-        toast.error('There was an error in deleting the project details!');
-        toast.error(err.message);
-      });
+    });
+
+    props.refetchData();
+    props.handleClose();
   };
 
   return (
@@ -60,7 +60,7 @@ export const DeleteEventProjectModal = (props: ModalPropType): JSX.Element => {
           >
             Cancel
           </Button>
-          <Button variant="danger" onClick={deleteProject} className="m-1">
+          <Button variant="danger" onClick={notify} className="m-1">
             Delete
           </Button>
         </Modal.Footer>

diff --git a/src/components/EventProjectModals/UpdateEventProjectModal.tsx b/src/components/EventProjectModals/UpdateEventProjectModal.tsx
@@ -25,9 +25,15 @@ export const UpdateEventProjectModal = (props: ModalPropType): JSX.Element => {
   }, [props.project]);
 
   const [updateMutation] = useMutation(UPDATE_EVENT_PROJECT_MUTATION);
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
+  const notify = (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault();
+    return toast.promise(handleSubmit, {
+      pending: 'Updating the project...',
+      success: 'Updated the project successfully!',
+      error: 'There was an error in updating the project details!',
+    });
+  };
+  const handleSubmit = async (): Promise<void> => {
     let toSubmit = true;
 
     if (title.trim().length == 0) {
@@ -38,26 +44,16 @@ export const UpdateEventProjectModal = (props: ModalPropType): JSX.Element => {
       toast.error('Description cannot be empty!');
       toSubmit = false;
     }
-
-    if (toSubmit) {
-      toast.warn('Updating the project...');
-      updateMutation({
-        variables: {
-          id: props.project._id,
-          title,
-          description,
-        },
-      })
-        .then(() => {
-          toast.success('Updated the project successfully!');
-          props.refetchData();
-          props.handleClose();
-        })
-        .catch((err) => {
-          toast.error('There was an error in updating the project details!');
-          toast.error(err.message);
-        });
-    }
+    if (!toSubmit) return Promise.reject();
+    await updateMutation({
+      variables: {
+        id: props.project._id,
+        title,
+        description,
+      },
+    });
+    props.refetchData();
+    props.handleClose();
   };
 
   return (
@@ -71,7 +67,7 @@ export const UpdateEventProjectModal = (props: ModalPropType): JSX.Element => {
         <Modal.Header closeButton className="bg-primary">
           <Modal.Title className="text-white">Update Event Project</Modal.Title>
         </Modal.Header>
-        <Form onSubmit={handleSubmit}>
+        <Form onSubmit={notify}>
           <Modal.Body>
             <Form.Group controlId="formBasicTitle">
               <Form.Label>Title</Form.Label>

diff --git a/src/components/TaskModals/AddTaskModal.tsx b/src/components/TaskModals/AddTaskModal.tsx
@@ -27,9 +27,15 @@ export const AddTaskModal = ({
   const [deadline, setDeadline] = useState<null | Dayjs>(today);
 
   const [addMutation] = useMutation(ADD_EVENT_PROJECT_TASK_MUTATION);
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
+  const notify = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault();
+    toast.promise(handleSubmit, {
+      pending: 'Adding the task...',
+      success: 'Added the task successfully!',
+      error: 'There was an error in adding the task!',
+    });
+  };
+  const handleSubmit = async (): Promise<void> => {
     let toSubmit = true;
 
     if (title.trim().length == 0) {
@@ -40,29 +46,19 @@ export const AddTaskModal = ({
       toast.error('Description cannot be empty!');
       toSubmit = false;
     }
-
-    if (toSubmit) {
-      toast.warn('Adding the task...');
-      addMutation({
-        variables: {
-          title,
-          description,
-          projectId,
-          deadline,
-        },
-      })
-        .then(() => {
-          toast.success('Added the task successfully!');
-          refetchData();
-          setTitle('');
-          setDescription('');
-          handleClose();
-        })
-        .catch((err) => {
-          toast.error('There was an error in adding the task!');
-          toast.error(err.message);
-        });
-    }
+    if (!toSubmit) return Promise.reject();
+    await addMutation({
+      variables: {
+        title,
+        description,
+        projectId,
+        deadline,
+      },
+    });
+    refetchData();
+    setTitle('');
+    setDescription('');
+    handleClose();
   };
 
   return (
@@ -71,7 +67,7 @@ export const AddTaskModal = ({
         <Modal.Header closeButton className="bg-primary">
           <Modal.Title className="text-white">Add an Event Task</Modal.Title>
         </Modal.Header>
-        <Form onSubmit={handleSubmit}>
+        <Form onSubmit={notify}>
           <Modal.Body>
             <Form.Group controlId="formBasicTitle">
               <Form.Label>Title</Form.Label>

diff --git a/src/components/TaskModals/DeleteTaskModal.test.tsx b/src/components/TaskModals/DeleteTaskModal.test.tsx
@@ -96,6 +96,5 @@ describe('Testing Delete Event Project Modal', () => {
         queryByText('There was an error in deleting the task!')
       ).toBeInTheDocument()
     );
-    await waitFor(() => expect(queryByText('Oops')).toBeInTheDocument());
   });
 });
diff --git a/src/components/TaskModals/DeleteTaskModal.tsx b/src/components/TaskModals/DeleteTaskModal.tsx
@@ -13,23 +13,21 @@ type ModalPropType = {
 
 export const DeleteTaskModal = (props: ModalPropType): JSX.Element => {
   const [deleteMutation] = useMutation(DELETE_EVENT_TASK_MUTATION);
-
-  const deleteProject = (): void => {
-    toast.warn('Deleting the task...');
-    deleteMutation({
+  const notify = (): Promise<void> => {
+    return toast.promise(deleteProject, {
+      pending: 'Deleting the task...',
+      success: 'Deleted the task successfully!',
+      error: 'There was an error in deleting the task!',
+    });
+  };
+  const deleteProject = async (): Promise<void> => {
+    await deleteMutation({
       variables: {
         id: props.taskId,
       },
-    })
-      .then(() => {
-        toast.success('Deleted the task successfully!');
-        props.refetchData();
-        props.handleClose();
-      })
-      .catch((err) => {
-        toast.error('There was an error in deleting the task!');
-        toast.error(err.message);
-      });
+    });
+    props.refetchData();
+    props.handleClose();
   };
 
   return (
@@ -56,7 +54,7 @@ export const DeleteTaskModal = (props: ModalPropType): JSX.Element => {
           >
             Cancel
           </Button>
-          <Button variant="danger" onClick={deleteProject} className="m-1">
+          <Button variant="danger" onClick={notify} className="m-1">
             Delete
           </Button>
         </Modal.Footer>

diff --git a/src/components/TaskModals/ManageVolunteerModal.test.tsx b/src/components/TaskModals/ManageVolunteerModal.test.tsx
@@ -131,7 +131,5 @@ describe('Testing Manage Volunteers Modal', () => {
         queryByText('There was an error in updating the volunteers!')
       ).toBeInTheDocument()
     );
-
-    await waitFor(() => expect(queryByText('Oops')).toBeInTheDocument());
   });
 });