MutateAsync -> Mutate (#809)

battlecode · Sep 25, 2024 · 341b1da · 341b1da
1 parent 277d2e9
commit 341b1da
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 41 deletions.
diff --git a/frontend2/src/api/compete/useCompete.ts b/frontend2/src/api/compete/useCompete.ts
@@ -327,6 +327,7 @@ export const useRequestScrimmage = (
     episodeId: string;
   },
   queryClient: QueryClient,
+  onSuccess?: () => void,
 ): UseMutationResult<
   ScrimmageRequest,
   Error,
@@ -378,6 +379,7 @@ export const useRequestScrimmage = (
         error: "Error requesting scrimmage. Is the requested team eligible?",
       });
     },
+    onSuccess,
   });
 
 /**

diff --git a/frontend2/src/api/team/useTeam.ts b/frontend2/src/api/team/useTeam.ts
@@ -141,6 +141,7 @@ export const useJoinTeam = (
 export const useLeaveTeam = (
   { episodeId }: { episodeId: string },
   queryClient: QueryClient,
+  onSuccess?: () => void,
 ): UseMutationResult<void, Error, void, unknown> =>
   useMutation({
     mutationKey: teamMutationKeys.leave({ episodeId }),
@@ -152,6 +153,7 @@ export const useLeaveTeam = (
       });
     },
     onSuccess: async () => {
+      onSuccess?.();
       await queryClient.invalidateQueries({
         queryKey: buildKey(myTeamFactory.queryKey, { episodeId }),
       });

diff --git a/frontend2/src/components/tables/scrimmaging/RequestScrimModal.tsx b/frontend2/src/components/tables/scrimmaging/RequestScrimModal.tsx
@@ -39,7 +39,9 @@ const RequestScrimModal: React.FC<RequestScrimModalProps> = ({
 }) => {
   const { episodeId } = useEpisodeId();
   const queryClient = useQueryClient();
-  const request = useRequestScrimmage({ episodeId }, queryClient);
+  const request = useRequestScrimmage({ episodeId }, queryClient, () => {
+    closeModal();
+  });
 
   const getRandomMaps: () => string[] = useCallback(() => {
     const possibleMaps = clone(maps);
@@ -141,22 +143,15 @@ const RequestScrimModal: React.FC<RequestScrimModalProps> = ({
               disabled={mapErrorMessage !== undefined}
               loading={request.isPending}
               onClick={() => {
-                void request
-                  .mutateAsync({
-                    episodeId,
-                    scrimmageRequestRequest: {
-                      requested_to: teamToRequest.id,
-                      is_ranked: ranked,
-                      map_names: selectedMapNames,
-                      player_order: selectedOrder,
-                    },
-                  })
-                  .then(() => {
-                    closeModal();
-                  })
-                  .catch((err: string) => {
-                    console.error(`Error requesting scrimmage: ${err}`);
-                  });
+                request.mutate({
+                  episodeId,
+                  scrimmageRequestRequest: {
+                    requested_to: teamToRequest.id,
+                    is_ranked: ranked,
+                    map_names: selectedMapNames,
+                    player_order: selectedOrder,
+                  },
+                });
               }}
             />
             <Button fullWidth label="Cancel" onClick={closeModal} />

diff --git a/frontend2/src/views/Account.tsx b/frontend2/src/views/Account.tsx
@@ -49,14 +49,14 @@ const Account: React.FC = () => {
   const { register: resumeRegister, handleSubmit: handleResumeSubmit } =
     useForm<FileInput>();
 
-  const onAvatarSubmit: SubmitHandler<FileInput> = async (data) => {
+  const onAvatarSubmit: SubmitHandler<FileInput> = (data) => {
     if (uploadAvatar.isPending) return;
-    await uploadAvatar.mutateAsync({ avatar: data.file[0] });
+    uploadAvatar.mutate({ avatar: data.file[0] });
   };
 
-  const onResumeSubmit: SubmitHandler<FileInput> = async (data) => {
+  const onResumeSubmit: SubmitHandler<FileInput> = (data) => {
     if (uploadResume.isPending) return;
-    await uploadResume.mutateAsync({ resume: data.file[0] });
+    uploadResume.mutate({ resume: data.file[0] });
   };
 
   return (
@@ -167,10 +167,8 @@ const ProfileForm: React.FC<{
     user?.profile?.country,
   );
 
-  const onProfileSubmit: SubmitHandler<PatchedUserPrivateRequest> = async (
-    data,
-  ) => {
-    await updateCurrentUser.mutateAsync({ patchedUserPrivateRequest: data });
+  const onProfileSubmit: SubmitHandler<PatchedUserPrivateRequest> = (data) => {
+    updateCurrentUser.mutate({ patchedUserPrivateRequest: data });
   };
 
   return (

diff --git a/frontend2/src/views/JoinTeam.tsx b/frontend2/src/views/JoinTeam.tsx
@@ -42,8 +42,8 @@ const JoinTeam: React.FC = () => {
         <div className="flex flex-1 flex-col gap-8 xl:max-w-4xl">
           <form
             // eslint-disable-next-line @typescript-eslint/no-misused-promises
-            onSubmit={handleCreateSubmit(async (data) => {
-              await createTeam.mutateAsync({ name: data.teamName });
+            onSubmit={handleCreateSubmit((data) => {
+              createTeam.mutate({ name: data.teamName });
               resetCreate();
             })}
           >
@@ -69,8 +69,8 @@ const JoinTeam: React.FC = () => {
           </form>
           <form
             // eslint-disable-next-line @typescript-eslint/no-misused-promises
-            onSubmit={handleJoinSubmit(async (data) => {
-              await joinTeam.mutateAsync({
+            onSubmit={handleJoinSubmit((data) => {
+              joinTeam.mutate({
                 name: data.teamName,
                 join_key: data.joinKey,
               });

diff --git a/frontend2/src/views/MyTeam.tsx b/frontend2/src/views/MyTeam.tsx
@@ -31,6 +31,8 @@ const MyTeam: React.FC = () => {
     reset,
   } = useForm<InfoFormInput>();
 
+  const [isLeaveModalOpen, setIsLeaveModalOpen] = useState<boolean>(false);
+
   const teamData = useUserTeam({ episodeId });
   const updateTeam = useUpdateTeam(
     {
@@ -43,10 +45,11 @@ const MyTeam: React.FC = () => {
       episodeId,
     },
     queryClient,
+    () => {
+      setIsLeaveModalOpen(false);
+    },
   );
 
-  const [isLeaveModalOpen, setIsLeaveModalOpen] = useState<boolean>(false);
-
   const membersList = useMemo(() => {
     return (
       <div className="flex flex-col gap-8">
@@ -66,9 +69,9 @@ const MyTeam: React.FC = () => {
     );
   }, [teamData]);
 
-  const onSubmit: SubmitHandler<InfoFormInput> = async (data) => {
+  const onSubmit: SubmitHandler<InfoFormInput> = (data) => {
     if (updateTeam.isPending) return;
-    await updateTeam.mutateAsync({
+    updateTeam.mutate({
       profile: {
         quote: data.quote,
         biography: data.biography,
@@ -78,13 +81,12 @@ const MyTeam: React.FC = () => {
   };
 
   // eslint-disable-next-line @typescript-eslint/no-misused-promises
-  const onLeaveTeam: EventHandler<React.MouseEvent<HTMLButtonElement>> = async (
+  const onLeaveTeam: EventHandler<React.MouseEvent<HTMLButtonElement>> = (
     event,
   ) => {
     if (leaveTeam.isPending) return;
     event.preventDefault();
-    await leaveTeam.mutateAsync();
-    setIsLeaveModalOpen(false);
+    leaveTeam.mutate();
   };
 
   if (teamData.isLoading) {
@@ -108,7 +110,6 @@ const MyTeam: React.FC = () => {
                 <img
                   className="h-24 w-24 rounded-full bg-gray-400 md:h-48 md:w-48"
                   src={teamData.data.profile?.avatar_url}
-                  // TODO: open add avatar modal on click! With hover effect!
                 />
                 <div className="text-center text-xl font-semibold">
                   {teamData.data.name}

diff --git a/frontend2/src/views/Register.tsx b/frontend2/src/views/Register.tsx
@@ -44,11 +44,11 @@ const Register: React.FC = () => {
     }
   }, [authState]);
 
-  const onSubmit: SubmitHandler<UserCreateRequest> = async (data) => {
+  const onSubmit: SubmitHandler<UserCreateRequest> = (data) => {
     if (gender === undefined || country === undefined) {
       return;
     }
-    await createUser.mutateAsync({ userCreateRequest: data });
+    createUser.mutate({ userCreateRequest: data });
   };
 
   return (

diff --git a/frontend2/src/views/Submissions.tsx b/frontend2/src/views/Submissions.tsx
@@ -73,9 +73,9 @@ const Submissions: React.FC = () => {
     formState: { errors, isDirty },
   } = useForm<SubmissionFormInput>();
 
-  const onSubmit: SubmitHandler<SubmissionFormInput> = async (data) => {
+  const onSubmit: SubmitHandler<SubmissionFormInput> = (data) => {
     if (uploadSub.isPending) return;
-    await uploadSub.mutateAsync({
+    uploadSub.mutate({
       episodeId,
       _package: data.packageName,
       description: data.description,