Add error handling for questionnaire submission and update loading st…

…ate messages
ohcnetwork · Jan 8, 2025 · 51197b7 · 51197b7
1 parent 0a14340
commit 51197b7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/public/locale/en.json b/public/locale/en.json
@@ -1502,6 +1502,7 @@
   "questionnaire": "Questionnaire",
   "questionnaire_error_loading": "Error loading questionnaire",
   "questionnaire_not_exist": "The questionnaire you tried to access does not exist.",
+  "questionnaire_submission_failed": "Failed to submit questionnaire",
   "questionnaire_submitted_successfully": "Questionnaire submitted successfully",
   "raise_consent_request": "Raise a consent request to fetch patient records over ABDM",
   "ration_card__APL": "APL",

diff --git a/src/components/Questionnaire/QuestionnaireForm.tsx b/src/components/Questionnaire/QuestionnaireForm.tsx
@@ -14,6 +14,7 @@ import Loading from "@/components/Common/Loading";
 
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
+import { HTTPError } from "@/Utils/request/types";
 import useQuery from "@/Utils/request/useQuery";
 import {
   DetailedValidationError,
@@ -78,17 +79,18 @@ export function QuestionnaireForm({
     prefetch: !!questionnaireSlug && !FIXED_QUESTIONNAIRES[questionnaireSlug],
   });
 
-  const { mutate: submitBatch, isPending: isProcessing } = useMutation({
-    mutationFn: mutate(routes.batchRequest),
+  const { mutate: submitBatch, isPending } = useMutation({
+    mutationFn: mutate(routes.batchRequest, { silent: true }),
     onSuccess: () => {
       toast.success(t("questionnaire_submitted_successfully"));
       onSubmit?.();
     },
-    onError: (error: any) => {
-      if (error.results) {
-        handleSubmissionError(error.results as ValidationErrorResponse[]);
+    onError: (error: HTTPError) => {
+      const errorData = error.cause;
+      if (errorData?.results) {
+        handleSubmissionError(errorData.results as ValidationErrorResponse[]);
       }
-      toast.error(t("questionnaire_error_loading"));
+      toast.error(t("questionnaire_submission_failed"));
     },
   });
 
@@ -243,7 +245,6 @@ export function QuestionnaireForm({
       }
     });
 
-    // Execute the mutation
     submitBatch({ requests });
   };
 
@@ -260,7 +261,7 @@ export function QuestionnaireForm({
                   "bg-gray-100 text-green-600",
               )}
               onClick={() => setActiveQuestionnaireId(form.questionnaire.id)}
-              disabled={isProcessing}
+              disabled={isPending}
             >
               {form.questionnaire.title}
             </button>
@@ -279,7 +280,7 @@ export function QuestionnaireForm({
                       setActiveQuestionnaireId(form.questionnaire.id);
                       setActiveGroupId(group.id);
                     }}
-                    disabled={isProcessing}
+                    disabled={isPending}
                   >
                     {group.text}
                   </button>
@@ -321,7 +322,7 @@ export function QuestionnaireForm({
                       ),
                     );
                   }}
-                  disabled={isProcessing}
+                  disabled={isPending}
                 >
                   <CareIcon icon="l-times-circle" />
                   <span>Remove</span>
@@ -343,7 +344,7 @@ export function QuestionnaireForm({
                   ),
                 );
               }}
-              disabled={isProcessing}
+              disabled={isPending}
               activeGroupId={activeGroupId}
               errors={form.errors}
               patientId={patientId}
@@ -388,7 +389,7 @@ export function QuestionnaireForm({
                 },
               ]);
             }}
-            disabled={isProcessing}
+            disabled={isPending}
           />
         </div>
 
@@ -399,17 +400,17 @@ export function QuestionnaireForm({
               type="button"
               variant="outline"
               onClick={onCancel}
-              disabled={isProcessing}
+              disabled={isPending}
             >
               {t("cancel")}
             </Button>
             <Button
               type="button"
               onClick={handleSubmit}
-              disabled={isProcessing || hasErrors}
+              disabled={isPending || hasErrors}
               className="relative"
             >
-              {isProcessing ? (
+              {isPending ? (
                 <>
                   <span className="opacity-0">{t("submit")}</span>
                   <div className="absolute inset-0 flex items-center justify-center">