Adds support for useMutation hook (ohcnetwork#8891)

cypress/e2e/patient_spec/PatientRegistration.cy.ts

@@ -242,14 +242,6 @@ describe("Patient Creation with consultation", () => {
       .contains("member id")
       .scrollIntoView();
     cy.wait(2000);
-    patientInsurance.verifyPatientPolicyDetails(
-      patientOneFirstSubscriberId,
-      patientOneFirstPolicyId,
-      patientOneFirstInsurerId,
-      patientOneFirstInsurerName,
-      isHCXEnabled,
-    );
-
     patientInsurance.clickPatientInsuranceViewDetail();
     cy.wait(3000);
     patientInsurance.verifyPatientPolicyDetails(

src/Utils/request/useMutation.ts

@@ -0,0 +1,41 @@
+import request from "@/Utils/request/request";
+import {
+  MutationRoute,
+  RequestOptions,
+  RequestResult,
+} from "@/Utils/request/types";
+import { mergeRequestOptions } from "@/Utils/request/utils";
+import React from "react";
+
+export default function useMutation<TData, TBody>(
+  route: MutationRoute<TData, TBody>,
+  options: RequestOptions<TData>,
+) {
+  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>) => {
+      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, controller });
+      setResponse(response);
+      setIsProcessing(false);
+      return response;
+    },
+    [route, JSON.stringify(options)],
+  );
+
+  return { ...response, isProcessing, mutate: runQuery };
+}

src/components/Medicine/CreatePrescriptionForm.tsx

@@ -1,48 +1,44 @@
-import { RequiredFieldValidator } from "../Form/FieldValidators";
-import Form from "../Form/Form";
-import { SelectFormField } from "../Form/FormFields/SelectFormField";
-import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
-import TextFormField from "../Form/FormFields/TextFormField";
-import { MedicineAdministrationRecord, Prescription } from "./models";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import MedibaseAutocompleteFormField from "./MedibaseAutocompleteFormField";
-import dayjs from "../../Utils/dayjs";
-import { PrescriptionFormValidator } from "./validators";
-import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
-import MedicineRoutes from "./routes";
-import request from "../../Utils/request/request";
+
 import useSlug from "@/common/hooks/useSlug";
-import { Success } from "../../Utils/Notifications";
-import DosageFormField from "../Form/FormFields/DosageFormField";
+import { RequiredFieldValidator } from "@/components/Form/FieldValidators";
+import Form from "@/components/Form/Form";
+import CheckBoxFormField from "@/components/Form/FormFields/CheckBoxFormField";
+import DosageFormField from "@/components/Form/FormFields/DosageFormField";
+import { SelectFormField } from "@/components/Form/FormFields/SelectFormField";
+import TextAreaFormField from "@/components/Form/FormFields/TextAreaFormField";
+import TextFormField from "@/components/Form/FormFields/TextFormField";
+import MedibaseAutocompleteFormField from "@/components/Medicine/MedibaseAutocompleteFormField";
+import {
+  MedicineAdministrationRecord,
+  Prescription,
+} from "@/components/Medicine/models";
+import MedicineRoutes from "@/components/Medicine/routes";
+import { PrescriptionFormValidator } from "@/components/Medicine/validators";
+import { Success } from "@/Utils/Notifications";
+import useMutation from "@/Utils/request/useMutation";
+import dayjs from "dayjs";
 
 export default function CreatePrescriptionForm(props: {
   prescription: Prescription;
   onDone: () => void;
 }) {
   const { t } = useTranslation();
   const consultation = useSlug("consultation");
-  const [isCreating, setIsCreating] = useState(false);
+  const mutation = useMutation(MedicineRoutes.createPrescription, {
+    pathParams: { consultation },
+  });
 
   return (
     <Form<Prescription>
-      disabled={isCreating}
+      disabled={mutation.isProcessing}
       defaults={props.prescription}
       onCancel={props.onDone}
       onSubmit={async (body) => {
         body["medicine"] = body.medicine_object?.id;
         delete body.medicine_object;
 
-        setIsCreating(true);
-        const { res, error } = await request(
-          MedicineRoutes.createPrescription,
-          {
-            pathParams: { consultation },
-            body,
-          },
-        );
-        setIsCreating(false);
-
+        const { res, error } = await mutation.mutate({ body });
         if (!res?.ok) {
           return error;
         }