#1250: Surrounded uncaught mutate asyncs in try catches

Author: sharonyang16

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/hooks/auth.hooks.ts

@@ -8,24 +8,38 @@ import { AuthenticatedUser } from 'shared';
 import { AuthContext } from '../app/AppContextAuth';
 import { useLogUserIn, useLogUserInDev } from './users.hooks';
 import { Auth } from '../utils/types';
+import { useToast } from './toasts.hooks';
 
 // Provider hook that creates auth object and handles state
 export const useProvideAuth = () => {
   const { isLoading, mutateAsync } = useLogUserIn();
   const { isLoading: isLoadingDev, mutateAsync: mutateAsyncDev } = useLogUserInDev();
   const [user, setUser] = useState<AuthenticatedUser | undefined>(undefined);
+  const toast = useToast();
 
   const devSignin = async (userId: number) => {
-    const user = await mutateAsyncDev(userId);
-    setUser(user);
-    localStorage.setItem('devUserId', userId.toString());
-    return user;
+    try {
+      const user = await mutateAsyncDev(userId);
+      setUser(user);
+      localStorage.setItem('devUserId', userId.toString());
+      return user;
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
+      }
+    }
   };
 
   const signin = async (id_token: string) => {
-    const user = await mutateAsync(id_token);
-    setUser(user);
-    return user;
+    try {
+      const user = await mutateAsync(id_token);
+      setUser(user);
+      return user;
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
+      }
+    }
   };
 
   const signout = () => {

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} />;
@@ -34,15 +36,21 @@ const ProposedSolutionsList: React.FC<ProposedSolutionsListProps> = ({ proposedS
     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,28 +45,34 @@ 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 {
-        await cpsMutateAsync({
-          crId,
-          submitterId: userId,
-          description,
-          timelineImpact,
-          scopeImpact,
-          budgetImpact
-        });
-      } catch (error: unknown) {
-        if (error instanceof Error) {
-          toast.error(error.message);
+    try {
+      const cr = await mutateAsync({
+        ...data,
+        wbsNum: validateWBS(wbsNum)
+      });
+      const crId = parseInt(cr.message);
+      proposedSolutions.forEach(async (ps) => {
+        const { description, timelineImpact, scopeImpact, budgetImpact } = ps;
+        try {
+          await cpsMutateAsync({
+            crId,
+            submitterId: userId,
+            description,
+            timelineImpact,
+            scopeImpact,
+            budgetImpact
+          });
+        } catch (error: unknown) {
+          if (error instanceof Error) {
+            toast.error(error.message);
+          }
         }
+      });
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
       }
-    });
+    }
 
     history.push(routes.CHANGE_REQUESTS);
   };

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();
   };