Merge pull request #1421 from Northeastern-Electric-Racing/#1250-try-catch-all-mutate-async

#1250: Try Catch and Toast uncaught Mutate Async

Author: RChandler234

src/frontend/src/components/CheckList.tsx

@@ -14,6 +14,7 @@ import { Tooltip } from '@mui/material';
 import { User } from 'shared';
 import NERModal from './NERModal';
 import { fullNamePipe } from '../utils/pipes';
+import { useToast } from '../hooks/toasts.hooks';
 
 export type CheckListItem = {
   id: number;
@@ -34,14 +35,21 @@ const CheckList: React.FC<CheckListProps> = ({ title, items, isDisabled }) => {
   const { isLoading, mutateAsync } = useCheckDescriptionBullet();
   const [showConfirm, setShowConfirm] = useState<boolean>(false);
   const [currIdx, setCurrIdx] = useState<number>(-1);
+  const toast = useToast();
 
   const handleUncheck = async (idx: number) => {
     await handleCheck(idx);
     setShowConfirm(false);
   };
 
   const handleCheck = async (idx: number) => {
-    await mutateAsync({ userId: auth.user!.userId, descriptionId: items[idx].id });
+    try {
+      await mutateAsync({ userId: auth.user!.userId, descriptionId: items[idx].id });
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
+      }
+    }
   };
 
   items.sort((a: CheckListItem, b: CheckListItem) => {

src/frontend/src/pages/ChangeRequestDetailPage/ProposedSolutionsList.tsx

@@ -13,6 +13,7 @@ import ErrorPage from '../ErrorPage';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import { useAuth } from '../../hooks/auth.hooks';
 import { Button } from '@mui/material';
+import { useToast } from '../../hooks/toasts.hooks';
 
 interface ProposedSolutionsListProps {
   proposedSolutions: ProposedSolution[];
@@ -24,6 +25,7 @@ const ProposedSolutionsList: React.FC<ProposedSolutionsListProps> = ({ proposedS
   const [showEditableForm, setShowEditableForm] = useState<boolean>(false);
   const auth = useAuth();
   const { isLoading, isError, error, mutateAsync } = useCreateProposeSolution();
+  const toast = useToast();
 
   if (isLoading || !auth.user) return <LoadingIndicator />;
   if (isError) return <ErrorPage message={error?.message} />;
@@ -33,16 +35,21 @@ const ProposedSolutionsList: React.FC<ProposedSolutionsListProps> = ({ proposedS
   const addProposedSolution = async (data: ProposedSolution) => {
     setShowEditableForm(false);
     const { description, timelineImpact, scopeImpact, budgetImpact } = data;
-
-    // send the details of new proposed solution to the backend database
-    await mutateAsync({
-      submitterId: userId,
-      crId,
-      description,
-      scopeImpact,
-      timelineImpact,
-      budgetImpact
-    });
+    try {
+      // send the details of new proposed solution to the backend database
+      await mutateAsync({
+        submitterId: userId,
+        crId,
+        description,
+        scopeImpact,
+        timelineImpact,
+        budgetImpact
+      });
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
+      }
+    }
   };
 
   return (

src/frontend/src/pages/CreateChangeRequestPage/CreateChangeRequest.tsx

@@ -45,14 +45,15 @@ const CreateChangeRequest: React.FC<CreateChangeRequestProps> = () => {
   const { userId } = auth.user;
 
   const handleConfirm = async (data: FormInput) => {
-    const cr = await mutateAsync({
-      ...data,
-      wbsNum: validateWBS(wbsNum)
-    });
-    const crId = parseInt(cr.message);
-    proposedSolutions.forEach(async (ps) => {
-      const { description, timelineImpact, scopeImpact, budgetImpact } = ps;
-      try {
+    try {
+      const cr = await mutateAsync({
+        ...data,
+        wbsNum: validateWBS(wbsNum)
+      });
+      const crId = parseInt(cr.message);
+      proposedSolutions.forEach(async (ps) => {
+        const { description, timelineImpact, scopeImpact, budgetImpact } = ps;
+
         await cpsMutateAsync({
           crId,
           submitterId: userId,
@@ -61,14 +62,14 @@ const CreateChangeRequest: React.FC<CreateChangeRequestProps> = () => {
           scopeImpact,
           budgetImpact
         });
-      } catch (error: unknown) {
-        if (error instanceof Error) {
-          toast.error(error.message);
-        }
-      }
-    });
+      });
 
-    history.push(routes.CHANGE_REQUESTS);
+      history.push(routes.CHANGE_REQUESTS);
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
+      }
+    }
   };
 
   const handleCancel = () => {

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

@@ -28,11 +28,13 @@ 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!)
     });
+
     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);
   };
 

src/frontend/src/pages/TeamsPage/DescriptionPageBlock.tsx

@@ -14,6 +14,7 @@ import ErrorPage from '../ErrorPage';
 import PageBlock from '../../layouts/PageBlock';
 import ReactMarkdown from 'react-markdown';
 import styles from '../../stylesheets/pages/teams.module.css';
+import { useToast } from '../../hooks/toasts.hooks';
 
 interface DescriptionPageBlockProps {
   team: Team;
@@ -26,6 +27,7 @@ const DescriptionPageBlock: React.FC<DescriptionPageBlockProps> = ({ team }) =>
   const [description, setDescription] = useState(team.description);
   const [isPreview, setIsPreview] = useState(false);
   const { isLoading, isError, error, mutateAsync } = useEditTeamDescription(team.teamId);
+  const toast = useToast();
 
   if (isError) return <ErrorPage message={error?.message} />;
   if (isLoading) return <LoadingIndicator />;
@@ -34,7 +36,14 @@ const DescriptionPageBlock: React.FC<DescriptionPageBlockProps> = ({ team }) =>
     if (!isUnderWordCount(description, 300)) {
       return alert('Description must be less than 300 words');
     }
-    await mutateAsync(description);
+    try {
+      await mutateAsync(description);
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
+      }
+    }
+
     resetDefaults();
   };
 

src/frontend/src/tests/components/CheckList.test.tsx

@@ -11,6 +11,7 @@ import * as descBulletHooks from '../../hooks/description-bullets.hooks';
 import { mockAuth } from '../test-support/test-data/test-utils.stub';
 import { exampleAdminUser } from '../test-support/test-data/users.stub';
 import { mockCheckDescBulletReturnValue } from '../test-support/mock-hooks';
+import { ToastProvider } from '../../components/Toast/ToastProvider';
 
 const testItems: CheckListItem[] = [
   { id: 1, detail: 'testItem1', resolved: false },
@@ -24,7 +25,9 @@ const renderComponent = (items: CheckListItem[] = [], title: string = '', isDisa
   const RouterWrapper = routerWrapperBuilder({});
   return render(
     <RouterWrapper>
-      <CheckList items={items} title={title} isDisabled={isDisabled} />
+      <ToastProvider>
+        <CheckList items={items} title={title} isDisabled={isDisabled} />{' '}
+      </ToastProvider>
     </RouterWrapper>
   );
 };

src/frontend/src/tests/pages/ChangeRequestDetailPage/ProposedSolutionsList.test.tsx

@@ -9,6 +9,7 @@ import { ProposedSolution } from 'shared';
 import { exampleAdminUser, exampleLeadershipUser } from '../../test-support/test-data/users.stub';
 import * as authHooks from '../../../hooks/auth.hooks';
 import { mockAuth } from '../../test-support/test-data/test-utils.stub';
+import { ToastProvider } from '../../../components/Toast/ToastProvider';
 
 const exampleProposedSolution1: ProposedSolution = {
   id: '1',
@@ -41,7 +42,9 @@ const renderComponent = (proposedSolutions: ProposedSolution[] = [], crReviewed:
   const RouterWrapper = routerWrapperBuilder({});
   return render(
     <RouterWrapper>
-      <ProposedSolutionsList proposedSolutions={proposedSolutions} crReviewed={crReviewed} crId={0} />
+      <ToastProvider>
+        <ProposedSolutionsList proposedSolutions={proposedSolutions} crReviewed={crReviewed} crId={0} />{' '}
+      </ToastProvider>
     </RouterWrapper>
   );
 };