From 464e546587886b36049554a46062107f61598d41 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Bhagat Date: Sun, 12 Nov 2023 09:20:19 +0530 Subject: [PATCH] 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 --- src/components/CheckIn/TableRow.test.tsx | 6 +-- src/components/CheckIn/TableRow.tsx | 20 ++++---- .../AddEventProjectModal.tsx | 47 +++++++++--------- .../DeleteEventProjectModal.test.tsx | 1 - .../DeleteEventProjectModal.tsx | 28 +++++------ .../UpdateEventProjectModal.tsx | 42 ++++++++-------- src/components/TaskModals/AddTaskModal.tsx | 48 +++++++++---------- .../TaskModals/DeleteTaskModal.test.tsx | 1 - src/components/TaskModals/DeleteTaskModal.tsx | 28 +++++------ .../TaskModals/ManageVolunteerModal.test.tsx | 2 - .../TaskModals/ManageVolunteerModal.tsx | 28 +++++------ .../TaskModals/UpdateTaskModal.test.tsx | 2 - src/components/TaskModals/UpdateTaskModal.tsx | 45 ++++++++--------- 13 files changed, 138 insertions(+), 160 deletions(-) diff --git a/src/components/CheckIn/TableRow.test.tsx b/src/components/CheckIn/TableRow.test.tsx index 789eb4d5f6..b8ab48f397 100644 --- 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 index 0c69a26303..90e22deff0 100644 --- 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 => + toast.promise(generateTag, { + pending: 'Generating pdf...', + success: 'PDF generated successfully!', + error: 'Error generating pdf!', }); + const generateTag = async (): Promise => { + 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 = ({ - diff --git a/src/components/EventProjectModals/AddEventProjectModal.tsx b/src/components/EventProjectModals/AddEventProjectModal.tsx index 3da5043c51..10273b5e4f 100644 --- 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): void => { + const notify = (e: React.FormEvent): Promise => { 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 => { + 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 = ({ Add an Event Project -
+ Title diff --git a/src/components/EventProjectModals/DeleteEventProjectModal.test.tsx b/src/components/EventProjectModals/DeleteEventProjectModal.test.tsx index 9b75852e19..6a29735f2e 100644 --- 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 index 9362651215..042e2fcd15 100644 --- 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 => { + 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 => { + 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 - diff --git a/src/components/EventProjectModals/UpdateEventProjectModal.tsx b/src/components/EventProjectModals/UpdateEventProjectModal.tsx index 362d78645a..08ac230c69 100644 --- 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): void => { + const notify = (e: React.FormEvent): Promise => { 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 => { 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 => { Update Event Project - + Title diff --git a/src/components/TaskModals/AddTaskModal.tsx b/src/components/TaskModals/AddTaskModal.tsx index 22bd0f4941..0134077afe 100644 --- a/src/components/TaskModals/AddTaskModal.tsx +++ b/src/components/TaskModals/AddTaskModal.tsx @@ -27,9 +27,15 @@ export const AddTaskModal = ({ const [deadline, setDeadline] = useState(today); const [addMutation] = useMutation(ADD_EVENT_PROJECT_TASK_MUTATION); - - const handleSubmit = (e: React.FormEvent): void => { + const notify = async (e: React.FormEvent): Promise => { 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 => { 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 = ({ Add an Event Task - + Title diff --git a/src/components/TaskModals/DeleteTaskModal.test.tsx b/src/components/TaskModals/DeleteTaskModal.test.tsx index e9ffea1be0..4eb40e53a8 100644 --- 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 index f4b6378c1b..73baff5775 100644 --- 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 => { + 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 => { + 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 - diff --git a/src/components/TaskModals/ManageVolunteerModal.test.tsx b/src/components/TaskModals/ManageVolunteerModal.test.tsx index 68ac0888d7..e284984969 100644 --- 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()); }); }); diff --git a/src/components/TaskModals/ManageVolunteerModal.tsx b/src/components/TaskModals/ManageVolunteerModal.tsx index 31f9593663..162fda4a02 100644 --- a/src/components/TaskModals/ManageVolunteerModal.tsx +++ b/src/components/TaskModals/ManageVolunteerModal.tsx @@ -32,24 +32,22 @@ export const ManageVolunteerModal = (props: ModalPropType): JSX.Element => { useEffect(() => setVolunteers(props.volunteers), [props.volunteers]); const [setMutation] = useMutation(SET_TASK_VOLUNTEERS_MUTATION); - - const handleSubmit = (): void => { - toast.warn('Updating the volunteers...'); - setMutation({ + const notify = (): Promise => { + return toast.promise(handleSubmit, { + pending: 'Updating the volunteers...', + success: 'Successfully updated the volunteers!', + error: 'There was an error in updating the volunteers!', + }); + }; + const handleSubmit = async (): Promise => { + await setMutation({ variables: { id: props.taskId, volunteers: volunteers.map((volunteer) => volunteer._id), }, - }) - .then(() => { - toast.success('Successfully updated the volunteers!'); - props.refetchData(); - props.handleClose(); - }) - .catch((err) => { - toast.error('There was an error in updating the volunteers!'); - toast.error(err.message); - }); + }); + props.refetchData(); + props.handleClose(); }; return ( @@ -94,7 +92,7 @@ export const ManageVolunteerModal = (props: ModalPropType): JSX.Element => {
- diff --git a/src/components/TaskModals/UpdateTaskModal.test.tsx b/src/components/TaskModals/UpdateTaskModal.test.tsx index 2184c421a7..9541d6d26b 100644 --- a/src/components/TaskModals/UpdateTaskModal.test.tsx +++ b/src/components/TaskModals/UpdateTaskModal.test.tsx @@ -229,8 +229,6 @@ describe('Testing Update Event Task Modal', () => { queryByText('There was an error in updating the task!') ).toBeInTheDocument() ); - - await waitFor(() => expect(queryByText('Oops')).toBeInTheDocument()); }); test('Manage volunteer modal and delete task modal should open and close properly', async () => { diff --git a/src/components/TaskModals/UpdateTaskModal.tsx b/src/components/TaskModals/UpdateTaskModal.tsx index 76d57da797..d79dd19a36 100644 --- a/src/components/TaskModals/UpdateTaskModal.tsx +++ b/src/components/TaskModals/UpdateTaskModal.tsx @@ -57,9 +57,15 @@ export const UpdateTaskModal = (props: ModalPropType): JSX.Element => { }, [props.task]); const [updateMutation] = useMutation(UPDATE_EVENT_PROJECT_TASK_MUTATION); - - const handleSubmit = (e: React.FormEvent): void => { + const notify = (e: React.FormEvent): Promise => { e.preventDefault(); + return toast.promise(handleSubmit, { + pending: 'Updating the task...', + success: 'Updated the task successfully!', + error: 'There was an error in updating the task!', + }); + }; + const handleSubmit = async (): Promise => { let toSubmit = true; if (title.trim().length == 0) { @@ -70,28 +76,19 @@ export const UpdateTaskModal = (props: ModalPropType): JSX.Element => { toast.error('Description cannot be empty!'); toSubmit = false; } + if (!toSubmit) return Promise.reject(); - if (toSubmit) { - toast.warn('Updating the task...'); - updateMutation({ - variables: { - taskId: props.task._id, - title, - description, - deadline, - completed, - }, - }) - .then(() => { - toast.success('Updated the task successfully!'); - props.refetchData(); - props.handleClose(); - }) - .catch((err) => { - toast.error('There was an error in updating the task!'); - toast.error(err.message); - }); - } + await updateMutation({ + variables: { + taskId: props.task._id, + title, + description, + deadline, + completed, + }, + }); + props.refetchData(); + props.handleClose(); }; return ( @@ -107,7 +104,7 @@ export const UpdateTaskModal = (props: ModalPropType): JSX.Element => { Update the Event Task - + Title