From e0062a02247681811d914e174778f182e6768dc5 Mon Sep 17 00:00:00 2001
From: Abhimanyu Rajeesh <63541653+abhimanyurajeesh@users.noreply.github.com>
Date: Fri, 10 Jan 2025 18:41:11 +0530
Subject: [PATCH] Replaced deprecated useMutation in questionnaire with
 tanstack's useMutation (#9840)

---
 public/locale/en.json                         |  2 +
 src/Utils/request/useMutation.ts              | 50 ----------------
 .../Questionnaire/QuestionnaireForm.tsx       | 60 +++++++++----------
 3 files changed, 30 insertions(+), 82 deletions(-)
 delete mode 100644 src/Utils/request/useMutation.ts

diff --git a/public/locale/en.json b/public/locale/en.json
index 1b013fa9254..08893df6ad6 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1546,6 +1546,8 @@
   "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",
   "ration_card__BPL": "BPL",
diff --git a/src/Utils/request/useMutation.ts b/src/Utils/request/useMutation.ts
deleted file mode 100644
index cff4919a6bd..00000000000
--- a/src/Utils/request/useMutation.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from "react";
-
-import request from "@/Utils/request/request";
-import {
-  MutationRoute,
-  RequestOptions,
-  RequestResult,
-} from "@/Utils/request/types";
-import { mergeRequestOptions } from "@/Utils/request/utils";
-
-/**
- * @deprecated use `useMutation` from `@tanstack/react-query` instead.
- */
-export default function useDeprecatedMutation<TData, TBody>(
-  route: MutationRoute<TData, TBody>,
-  options: RequestOptions<TData, TBody>,
-) {
-  const [response, setResponse] = React.useState<RequestResult<TData>>();
-  const [isProcessing, setIsProcessing] = React.useState(false);
-
-  const controllerRef = React.useRef<AbortController>();
-
-  const runQuery = React.useCallback(
-    async (overrides?: RequestOptions<TData, TBody>) => {
-      controllerRef.current?.abort();
-
-      const controller = new AbortController();
-      controllerRef.current = controller;
-
-      const resolvedOptions =
-        options && overrides
-          ? mergeRequestOptions(options, overrides)
-          : (overrides ?? options);
-
-      setIsProcessing(true);
-      const response = await request(route, {
-        ...resolvedOptions,
-        signal: controller.signal,
-      });
-      if (response.error?.name !== "AbortError") {
-        setResponse(response);
-        setIsProcessing(false);
-      }
-      return response;
-    },
-    [route, JSON.stringify(options)],
-  );
-
-  return { ...response, isProcessing, mutate: runQuery };
-}
diff --git a/src/components/Questionnaire/QuestionnaireForm.tsx b/src/components/Questionnaire/QuestionnaireForm.tsx
index 62953de8681..6c3256633fe 100644
--- a/src/components/Questionnaire/QuestionnaireForm.tsx
+++ b/src/components/Questionnaire/QuestionnaireForm.tsx
@@ -1,3 +1,4 @@
+import { useMutation } from "@tanstack/react-query";
 import { t } from "i18next";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
@@ -13,7 +14,7 @@ import Loading from "@/components/Common/Loading";
 
 import { PLUGIN_Component } from "@/PluginEngine";
 import routes from "@/Utils/request/api";
-import useMutation from "@/Utils/request/useMutation";
+import mutate from "@/Utils/request/mutate";
 import useQuery from "@/Utils/request/useQuery";
 import {
   DetailedValidationError,
@@ -78,10 +79,20 @@ export function QuestionnaireForm({
     prefetch: !!questionnaireSlug && !FIXED_QUESTIONNAIRES[questionnaireSlug],
   });
 
-  const { mutate: submitBatch, isProcessing } = useMutation(
-    routes.batchRequest,
-    { silent: true },
-  );
+  const { mutate: submitBatch, isPending } = useMutation({
+    mutationFn: mutate(routes.batchRequest, { silent: true }),
+    onSuccess: () => {
+      toast.success(t("questionnaire_submitted_successfully"));
+      onSubmit?.();
+    },
+    onError: (error) => {
+      const errorData = error.cause;
+      if (errorData?.results) {
+        handleSubmissionError(errorData.results as ValidationErrorResponse[]);
+      }
+      toast.error(t("questionnaire_submission_failed"));
+    },
+  });
 
   useEffect(() => {
     if (!isInitialized && questionnaireSlug) {
@@ -200,9 +211,9 @@ export function QuestionnaireForm({
 
     // Then, add questionnaire submission requests
     questionnaireForms.forEach((form) => {
-      const nonStructuredResponses = form.responses.filter((response) => {
-        return !response.structured_type;
-      });
+      const nonStructuredResponses = form.responses.filter(
+        (response) => !response.structured_type,
+      );
 
       if (nonStructuredResponses.length > 0) {
         requests.push({
@@ -234,22 +245,7 @@ export function QuestionnaireForm({
       }
     });
 
-    const response = await submitBatch({
-      body: { requests },
-    });
-
-    if (!response.data) {
-      if (response.error) {
-        handleSubmissionError(
-          response.error.results as ValidationErrorResponse[],
-        );
-        toast.error("Failed to submit questionnaire");
-      }
-      return;
-    }
-
-    toast.success("Questionnaire submitted successfully");
-    onSubmit?.();
+    submitBatch({ requests });
   };
 
   return (
@@ -265,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>
@@ -284,7 +280,7 @@ export function QuestionnaireForm({
                       setActiveQuestionnaireId(form.questionnaire.id);
                       setActiveGroupId(group.id);
                     }}
-                    disabled={isProcessing}
+                    disabled={isPending}
                   >
                     {group.text}
                   </button>
@@ -331,7 +327,7 @@ export function QuestionnaireForm({
                       ),
                     );
                   }}
-                  disabled={isProcessing}
+                  disabled={isPending}
                 >
                   <CareIcon icon="l-times-circle" />
                   <span>Remove</span>
@@ -353,7 +349,7 @@ export function QuestionnaireForm({
                   ),
                 );
               }}
-              disabled={isProcessing}
+              disabled={isPending}
               activeGroupId={activeGroupId}
               errors={form.errors}
               patientId={patientId}
@@ -398,7 +394,7 @@ export function QuestionnaireForm({
                 },
               ]);
             }}
-            disabled={isProcessing}
+            disabled={isPending}
           />
         </div>
 
@@ -409,17 +405,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">