Fix dialogs closing on mutation error instead of showing submission errors (#887)

fushar · claude · web-flow · commit e3f7edf1ccfe · 2026-03-28T11:31:46.000+07:00
Use mutateAsync instead of mutate and move dialog close to onSuccess,
so SubmissionError propagates back to withSubmissionError in forms.

Co-authored-by: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/judgels-client/src/routes/admin/archives/ArchiveCreateDialog/ArchiveCreateDialog.jsx b/judgels-client/src/routes/admin/archives/ArchiveCreateDialog/ArchiveCreateDialog.jsx
@@ -29,13 +29,13 @@ export function ArchiveCreateDialog() {
     </>
   );
 
-  const createArchive = data => {
-    createArchiveMutation.mutate(data, {
+  const createArchive = async data => {
+    await createArchiveMutation.mutateAsync(data, {
       onSuccess: () => {
+        setIsDialogOpen(false);
         toastActions.showSuccessToast('Archive created.');
       },
     });
-    setIsDialogOpen(false);
   };
 
   return (
diff --git a/judgels-client/src/routes/admin/archives/ArchiveEditDialog/ArchiveEditDialog.jsx b/judgels-client/src/routes/admin/archives/ArchiveEditDialog/ArchiveEditDialog.jsx
@@ -21,13 +21,13 @@ export function ArchiveEditDialog({ archive, isOpen, onCloseDialog }) {
     </>
   );
 
-  const updateArchive = data => {
-    updateArchiveMutation.mutate(data, {
+  const updateArchive = async data => {
+    await updateArchiveMutation.mutateAsync(data, {
       onSuccess: () => {
+        onCloseDialog();
         toastActions.showSuccessToast('Archive updated.');
       },
     });
-    onCloseDialog();
   };
 
   const initialValues = archive && {
diff --git a/judgels-client/src/routes/admin/chapters/ChapterCreateDialog/ChapterCreateDialog.jsx b/judgels-client/src/routes/admin/chapters/ChapterCreateDialog/ChapterCreateDialog.jsx
@@ -29,13 +29,13 @@ export function ChapterCreateDialog() {
     </>
   );
 
-  const createChapter = data => {
-    createChapterMutation.mutate(data, {
+  const createChapter = async data => {
+    await createChapterMutation.mutateAsync(data, {
       onSuccess: () => {
+        setIsDialogOpen(false);
         toastActions.showSuccessToast('Chapter created.');
       },
     });
-    setIsDialogOpen(false);
   };
 
   return (
diff --git a/judgels-client/src/routes/admin/chapters/ChapterEditDialog/ChapterEditDialog.jsx b/judgels-client/src/routes/admin/chapters/ChapterEditDialog/ChapterEditDialog.jsx
@@ -21,13 +21,13 @@ export function ChapterEditDialog({ chapter, isOpen, onCloseDialog }) {
     </>
   );
 
-  const updateChapter = data => {
-    updateChapterMutation.mutate(data, {
+  const updateChapter = async data => {
+    await updateChapterMutation.mutateAsync(data, {
       onSuccess: () => {
+        onCloseDialog();
         toastActions.showSuccessToast('Chapter updated.');
       },
     });
-    onCloseDialog();
   };
 
   const initialValues = chapter && {
diff --git a/judgels-client/src/routes/admin/chapters/ChapterLessonEditDialog/ChapterLessonEditDialog.jsx b/judgels-client/src/routes/admin/chapters/ChapterLessonEditDialog/ChapterLessonEditDialog.jsx
@@ -32,14 +32,14 @@ export function ChapterLessonEditDialog({ isOpen, chapter, onCloseDialog }) {
     setIsEditing(prev => !prev);
   };
 
-  const updateLessons = data => {
+  const updateLessons = async data => {
     const lessons = deserializeLessons(data.lessons);
-    setLessonsMutation.mutate(lessons, {
+    await setLessonsMutation.mutateAsync(lessons, {
       onSuccess: () => {
+        setIsEditing(false);
         toastActions.showSuccessToast('Chapter lessons updated.');
       },
     });
-    setIsEditing(false);
   };
 
   const renderDialogContent = () => {
diff --git a/judgels-client/src/routes/admin/chapters/ChapterProblemEditDialog/ChapterProblemEditDialog.jsx b/judgels-client/src/routes/admin/chapters/ChapterProblemEditDialog/ChapterProblemEditDialog.jsx
@@ -33,14 +33,14 @@ export function ChapterProblemEditDialog({ isOpen, chapter, onCloseDialog }) {
     setIsEditing(prev => !prev);
   };
 
-  const updateProblems = data => {
+  const updateProblems = async data => {
     const problems = deserializeProblems(data.problems);
-    setProblemsMutation.mutate(problems, {
+    await setProblemsMutation.mutateAsync(problems, {
       onSuccess: () => {
+        setIsEditing(false);
         toastActions.showSuccessToast('Chapter problems updated.');
       },
     });
-    setIsEditing(false);
   };
 
   const renderDialogContent = () => {
diff --git a/judgels-client/src/routes/admin/courses/CourseCreateDialog/CourseCreateDialog.jsx b/judgels-client/src/routes/admin/courses/CourseCreateDialog/CourseCreateDialog.jsx
@@ -29,13 +29,13 @@ export function CourseCreateDialog() {
     </>
   );
 
-  const createCourse = data => {
-    createCourseMutation.mutate(data, {
+  const createCourse = async data => {
+    await createCourseMutation.mutateAsync(data, {
       onSuccess: () => {
+        setIsDialogOpen(false);
         toastActions.showSuccessToast('Course created.');
       },
     });
-    setIsDialogOpen(false);
   };
 
   return (
diff --git a/judgels-client/src/routes/admin/courses/CourseEditDialog/CourseEditDialog.jsx b/judgels-client/src/routes/admin/courses/CourseEditDialog/CourseEditDialog.jsx
@@ -21,13 +21,13 @@ export function CourseEditDialog({ course, isOpen, onCloseDialog }) {
     </>
   );
 
-  const updateCourse = data => {
-    updateCourseMutation.mutate(data, {
+  const updateCourse = async data => {
+    await updateCourseMutation.mutateAsync(data, {
       onSuccess: () => {
+        onCloseDialog();
         toastActions.showSuccessToast('Course updated.');
       },
     });
-    onCloseDialog();
   };
 
   const initialValues = course && {
diff --git a/judgels-client/src/routes/admin/problemsets/ProblemSetCreateDialog/ProblemSetCreateDialog.jsx b/judgels-client/src/routes/admin/problemsets/ProblemSetCreateDialog/ProblemSetCreateDialog.jsx
@@ -29,8 +29,8 @@ export function ProblemSetCreateDialog() {
     </>
   );
 
-  const createProblemSet = data => {
-    createProblemSetMutation.mutate(
+  const createProblemSet = async data => {
+    await createProblemSetMutation.mutateAsync(
       {
         slug: data.slug,
         name: data.name,
@@ -40,11 +40,11 @@ export function ProblemSetCreateDialog() {
       },
       {
         onSuccess: () => {
+          setIsDialogOpen(false);
           toastActions.showSuccessToast('Problemset created.');
         },
       }
     );
-    setIsDialogOpen(false);
   };
 
   const initialValues = {
diff --git a/judgels-client/src/routes/admin/problemsets/ProblemSetEditDialog/ProblemSetEditDialog.jsx b/judgels-client/src/routes/admin/problemsets/ProblemSetEditDialog/ProblemSetEditDialog.jsx
@@ -21,8 +21,8 @@ export function ProblemSetEditDialog({ isOpen, problemSet, archiveSlug, onCloseD
     </>
   );
 
-  const updateProblemSet = data => {
-    updateProblemSetMutation.mutate(
+  const updateProblemSet = async data => {
+    await updateProblemSetMutation.mutateAsync(
       {
         slug: data.slug,
         name: data.name,
@@ -32,11 +32,11 @@ export function ProblemSetEditDialog({ isOpen, problemSet, archiveSlug, onCloseD
       },
       {
         onSuccess: () => {
+          onCloseDialog();
           toastActions.showSuccessToast('Problemset updated.');
         },
       }
     );
-    onCloseDialog();
   };
 
   const initialValues = problemSet && {
diff --git a/judgels-client/src/routes/admin/problemsets/ProblemSetProblemEditDialog/ProblemSetProblemEditDialog.jsx b/judgels-client/src/routes/admin/problemsets/ProblemSetProblemEditDialog/ProblemSetProblemEditDialog.jsx
@@ -33,14 +33,14 @@ export function ProblemSetProblemEditDialog({ isOpen, problemSet, onCloseDialog
     setIsEditing(prev => !prev);
   };
 
-  const updateProblems = data => {
+  const updateProblems = async data => {
     const problems = deserializeProblems(data.problems);
-    setProblemsMutation.mutate(problems, {
+    await setProblemsMutation.mutateAsync(problems, {
       onSuccess: () => {
+        setIsEditing(false);
         toastActions.showSuccessToast('Problemset problems updated.');
       },
     });
-    setIsEditing(false);
   };
 
   const renderDialogContent = () => {
diff --git a/judgels-client/src/routes/admin/ratings/ContestRatingChangesDialog/ContestRatingChangesDialog.jsx b/judgels-client/src/routes/admin/ratings/ContestRatingChangesDialog/ContestRatingChangesDialog.jsx
@@ -22,10 +22,8 @@ export function ContestRatingChangesDialog({ contest, ratingChanges, onClose })
       },
       {
         onSuccess: () => {
-          toastActions.showSuccessToast('Ratings updated.');
-        },
-        onSettled: () => {
           onClose();
+          toastActions.showSuccessToast('Ratings updated.');
         },
       }
     );
diff --git a/judgels-client/src/routes/contests/contests/ContestCreateDialog/ContestCreateDialog.jsx b/judgels-client/src/routes/contests/contests/ContestCreateDialog/ContestCreateDialog.jsx
@@ -60,15 +60,13 @@ export function ContestCreateDialog() {
     </>
   );
 
-  const createContest = data => {
-    createContestMutation.mutate(data, {
+  const createContest = async data => {
+    await createContestMutation.mutateAsync(data, {
       onSuccess: (_data, { slug }) => {
+        setIsDialogOpen(false);
         navigate({ to: `/contests/${slug}`, state: { isEditingContest: true } });
         toastActions.showSuccessToast('Contest created.');
       },
-      onSettled: () => {
-        setIsDialogOpen(false);
-      },
     });
   };
 
diff --git a/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateDialog/ContestAnnouncementCreateDialog.jsx b/judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCreateDialog/ContestAnnouncementCreateDialog.jsx
@@ -40,13 +40,11 @@ export function ContestAnnouncementCreateDialog({ contest }) {
     </>
   );
 
-  const createAnnouncement = data => {
-    createAnnouncementMutation.mutate(data, {
+  const createAnnouncement = async data => {
+    await createAnnouncementMutation.mutateAsync(data, {
       onSuccess: () => {
-        toastActions.showSuccessToast('Announcement created.');
-      },
-      onSettled: () => {
         setIsDialogOpen(false);
+        toastActions.showSuccessToast('Announcement created.');
       },
     });
   };
diff --git a/judgels-client/src/routes/contests/contests/single/clarifications/ContestClarificationCreateDialog/ContestClarificationCreateDialog.jsx b/judgels-client/src/routes/contests/contests/single/clarifications/ContestClarificationCreateDialog/ContestClarificationCreateDialog.jsx
@@ -28,13 +28,11 @@ export function ContestClarificationCreateDialog({ contest, problemJids, problem
     </>
   );
 
-  const createClarification = data => {
-    createClarificationMutation.mutate(data, {
+  const createClarification = async data => {
+    await createClarificationMutation.mutateAsync(data, {
       onSuccess: () => {
-        toastActions.showSuccessToast('Clarification submitted.');
-      },
-      onSettled: () => {
         setIsDialogOpen(false);
+        toastActions.showSuccessToast('Clarification submitted.');
       },
     });
   };
diff --git a/judgels-client/src/routes/contests/contests/single/components/ContestEditGeneralTab/ContestEditGeneralTab.jsx b/judgels-client/src/routes/contests/contests/single/components/ContestEditGeneralTab/ContestEditGeneralTab.jsx
@@ -48,22 +48,24 @@ export default function ContestEditGeneralTab() {
     return <ContestEditGeneralTable contest={contest} />;
   };
 
-  const updateContest = data => {
+  const updateContest = async data => {
     const updateData = {
       slug: data.slug,
       name: data.name,
       style: data.style,
       beginTime: new Date(data.beginTime).getTime(),
       duration: parseDuration(data.duration),
     };
-    updateContestMutation.mutate(updateData, {
-      onSuccess: () => toastActions.showSuccessToast('Contest updated.'),
-    });
-    setIsEditing(false);
+    await updateContestMutation.mutateAsync(updateData, {
+      onSuccess: () => {
+        setIsEditing(false);
+        toastActions.showSuccessToast('Contest updated.');
 
-    if (updateData.slug && updateData.slug !== contestSlug) {
-      navigate({ to: `/contests/${updateData.slug}` });
-    }
+        if (updateData.slug && updateData.slug !== contestSlug) {
+          navigate({ to: `/contests/${updateData.slug}` });
+        }
+      },
+    });
   };
 
   return (
diff --git a/judgels-client/src/routes/contests/contests/single/problems/ContestProblemEditDialog/ContestProblemEditDialog.jsx b/judgels-client/src/routes/contests/contests/single/problems/ContestProblemEditDialog/ContestProblemEditDialog.jsx
@@ -50,15 +50,13 @@ export function ContestProblemEditDialog({ contest, problems }) {
     );
   };
 
-  const setProblems = data => {
+  const setProblems = async data => {
     const deserializedProblems = editor.deserializer(data.problems);
 
-    setProblemsMutation.mutate(deserializedProblems, {
+    await setProblemsMutation.mutateAsync(deserializedProblems, {
       onSuccess: () => {
-        toastActions.showSuccessToast('Problems updated.');
-      },
-      onSettled: () => {
         setIsDialogOpen(false);
+        toastActions.showSuccessToast('Problems updated.');
       },
     });
   };
