#1250: Surrounded aliased uncaught mutate asyncs in try catchesand toasted if error

Author: sharonyang16

src/frontend/src/pages/FinancePage/CreateReimbursementRequest.tsx

@@ -9,21 +9,30 @@ import { routes } from '../../utils/routes';
 import ReimbursementRequestForm, {
   ReimbursementRequestDataSubmission
 } from './ReimbursementRequestForm/ReimbursementRequestForm';
+import { useToast } from '../../hooks/toasts.hooks';
 
 const CreateReimbursementRequestPage: React.FC = () => {
   const { isLoading: createReimbursementRequestIsLoading, mutateAsync: createReimbursementRequest } =
     useCreateReimbursementRequest();
   const { isLoading: receiptsIsLoading, mutateAsync: uploadReceipts } = useUploadManyReceipts();
+  const toast = useToast();
 
   if (createReimbursementRequestIsLoading || receiptsIsLoading) return <LoadingIndicator />;
 
   const onSubmit = async (data: ReimbursementRequestDataSubmission): Promise<string> => {
-    const { reimbursementRequestId } = await createReimbursementRequest(data);
-    await uploadReceipts({
-      id: reimbursementRequestId,
-      files: data.receiptFiles.map((file) => file.file!)
-    });
-    return reimbursementRequestId;
+    try {
+      const { reimbursementRequestId } = await createReimbursementRequest(data);
+      await uploadReceipts({
+        id: reimbursementRequestId,
+        files: data.receiptFiles.map((file) => file.file!)
+      });
+      return reimbursementRequestId;
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
+      }
+    }
+    throw new Error('Could not create reimbursement.');
   };
 
   return (

src/frontend/src/pages/FinancePage/EditReimbursementRequest/EditReimbursementRequest.tsx

@@ -12,6 +12,7 @@ import { useParams } from 'react-router-dom';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import ErrorPage from '../../ErrorPage';
 import EditReimbursementRequestRenderedDefaultValues from './EditReimbursementRequestRenderedDefaultValues';
+import { useToast } from '../../../hooks/toasts.hooks';
 
 const EditReimbursementRequestPage: React.FC = () => {
   const id = useParams<{ id: string }>().id;
@@ -20,6 +21,7 @@ const EditReimbursementRequestPage: React.FC = () => {
     useEditReimbursementRequest(id);
   const { isLoading: uploadReceiptsIsLoading, mutateAsync: uploadReceipts } = useUploadManyReceipts();
   const { isLoading: getIsLoading, isError, error, data: reimbursementRequest } = useSingleReimbursementRequest(id);
+  const toast = useToast();
 
   if (isError) return <ErrorPage error={error} />;
 
@@ -28,11 +30,19 @@ const EditReimbursementRequestPage: React.FC = () => {
 
   const onSubmit = async (data: ReimbursementRequestDataSubmission): Promise<string> => {
     const filesToKeep = data.receiptFiles.filter((file) => file.googleFileId !== '');
-    await editReimbursementRequest({ ...data, receiptPictures: filesToKeep });
-    await uploadReceipts({
-      id: reimbursementRequest.reimbursementRequestId,
-      files: data.receiptFiles.filter((receipt) => receipt.googleFileId === '').map((file) => file.file!)
-    });
+
+    try {
+      await editReimbursementRequest({ ...data, receiptPictures: filesToKeep });
+      await uploadReceipts({
+        id: reimbursementRequest.reimbursementRequestId,
+        files: data.receiptFiles.filter((receipt) => receipt.googleFileId === '').map((file) => file.file!)
+      });
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
+      }
+    }
+
     return reimbursementRequest.reimbursementRequestId;
   };
 

src/frontend/src/pages/FinancePage/ReimbursementRequestDetailPage/SubmitToSaboModal.tsx

@@ -8,6 +8,7 @@ import ErrorPage from '../../ErrorPage';
 import { datePipe } from '../../../utils/pipes';
 import DetailDisplay from '../../../components/DetailDisplay';
 import { imagePreviewUrl } from '../../../utils/reimbursement-request.utils';
+import { useToast } from '../../../hooks/toasts.hooks';
 
 interface SubmitToSaboModalProps {
   open: boolean;
@@ -21,6 +22,7 @@ const SubmitToSaboModal = ({ open, setOpen, reimbursementRequest }: SubmitToSabo
   const { recipient, dateOfExpense, totalCost, vendor, expenseType, reimbursementProducts, receiptPictures } =
     reimbursementRequest;
   const { data: userInfo, isLoading, isError, error } = useUserSecureSettings(recipient.userId);
+  const toast = useToast();
 
   if (!user.isFinance) return <></>;
   if (isLoading || !userInfo) return <LoadingIndicator />;
@@ -33,7 +35,14 @@ const SubmitToSaboModal = ({ open, setOpen, reimbursementRequest }: SubmitToSabo
     .join(', ');
 
   const handleSubmitToSabo = () => {
-    submitToSabo();
+    try {
+      submitToSabo();
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
+      }
+    }
+
     setOpen(false);
   };