From e7608d52a6d1b604adcd440fa89bb45274d89928 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Mon, 19 Aug 2024 21:08:05 +0530
Subject: [PATCH 1/2] Use abort controller for submit requests for patient and
 consultation creates (#8354)

---
 src/Components/Facility/ConsultationForm.tsx | 10 ++++++++-
 src/Components/Patient/PatientRegister.tsx   | 12 +++++++++-
 src/Utils/request/request.ts                 | 23 ++++++++++++++++----
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/Components/Facility/ConsultationForm.tsx b/src/Components/Facility/ConsultationForm.tsx
index 69fead157e0..5cda9d5ab01 100644
--- a/src/Components/Facility/ConsultationForm.tsx
+++ b/src/Components/Facility/ConsultationForm.tsx
@@ -15,7 +15,7 @@ import { FieldErrorText, FieldLabel } from "../Form/FormFields/FormField";
 import InvestigationBuilder, {
   InvestigationType,
 } from "../Common/prescription-builder/InvestigationBuilder";
-import { LegacyRef, createRef, lazy, useEffect, useState } from "react";
+import { LegacyRef, createRef, lazy, useEffect, useRef, useState } from "react";
 import ProcedureBuilder, {
   ProcedureType,
 } from "../Common/prescription-builder/ProcedureBuilder";
@@ -230,6 +230,7 @@ type Props = {
 export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
   const { goBack } = useAppHistory();
   const { kasp_enabled, kasp_string } = useConfig();
+  const submitController = useRef<AbortController>();
   const [state, dispatch] = useAutoSaveReducer<FormDetails>(
     consultationFormReducer,
     initialState,
@@ -739,11 +740,18 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
         patient_no: state.form.patient_no || null,
       };
 
+      request(id ? routes.updateConsultation : routes.createConsultation, {
+        pathParams: id ? { id } : undefined,
+        body: data,
+        controllerRef: submitController,
+      });
+
       const { data: obj } = await request(
         id ? routes.updateConsultation : routes.createConsultation,
         {
           pathParams: id ? { id } : undefined,
           body: data,
+          controllerRef: submitController,
         },
       );
 
diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
index 45251327406..3b38c3d54af 100644
--- a/src/Components/Patient/PatientRegister.tsx
+++ b/src/Components/Patient/PatientRegister.tsx
@@ -18,7 +18,14 @@ import {
 } from "../../Utils/utils";
 import { navigate, useQueryParams } from "raviger";
 import { statusType, useAbortableEffect } from "../../Common/utils";
-import { lazy, useCallback, useEffect, useReducer, useState } from "react";
+import {
+  lazy,
+  useCallback,
+  useEffect,
+  useReducer,
+  useRef,
+  useState,
+} from "react";
 
 import AccordionV2 from "../Common/components/AccordionV2";
 import ButtonV2 from "../Common/components/ButtonV2";
@@ -170,6 +177,7 @@ export const parseOccupationFromExt = (occupation: Occupation) => {
 };
 
 export const PatientRegister = (props: PatientRegisterProps) => {
+  const submitController = useRef<AbortController>();
   const authUser = useAuthUser();
   const { t } = useTranslation();
   const { goBack } = useAppHistory();
@@ -760,9 +768,11 @@ export const PatientRegister = (props: PatientRegisterProps) => {
       ? await request(routes.updatePatient, {
           pathParams: { id },
           body: data,
+          controllerRef: submitController,
         })
       : await request(routes.addPatient, {
           body: { ...data, facility: facilityId },
+          controllerRef: submitController,
         });
     if (res?.ok && requestData) {
       await Promise.all(
diff --git a/src/Utils/request/request.ts b/src/Utils/request/request.ts
index 71286b4167d..9dd803148bb 100644
--- a/src/Utils/request/request.ts
+++ b/src/Utils/request/request.ts
@@ -2,9 +2,18 @@ import handleResponse from "./handleResponse";
 import { RequestOptions, RequestResult, Route } from "./types";
 import { makeHeaders, makeUrl } from "./utils";
 
-interface Options<TData, TBody> extends RequestOptions<TData, TBody> {
-  controller?: AbortController;
-}
+type ControllerXORControllerRef =
+  | {
+      controller?: AbortController;
+      controllerRef?: undefined;
+    }
+  | {
+      controller?: undefined;
+      controllerRef: React.MutableRefObject<AbortController | undefined>;
+    };
+
+type Options<TData, TBody> = RequestOptions<TData, TBody> &
+  ControllerXORControllerRef;
 
 export default async function request<TData, TBody>(
   { path, method, noAuth }: Route<TData, TBody>,
@@ -13,12 +22,18 @@ export default async function request<TData, TBody>(
     body,
     pathParams,
     controller,
+    controllerRef,
     onResponse,
     silent,
     reattempts = 3,
   }: Options<TData, TBody> = {},
 ): Promise<RequestResult<TData>> {
-  const signal = controller?.signal;
+  if (controllerRef) {
+    controllerRef.current?.abort();
+    controllerRef.current = new AbortController();
+  }
+
+  const signal = controller?.signal ?? controllerRef?.current?.signal;
   const url = makeUrl(path, query, pathParams);
 
   const options: RequestInit = { method, signal };

From 9a5e833add07a092cf26a34e233ea95f19ad9ee2 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Mon, 19 Aug 2024 22:58:05 +0530
Subject: [PATCH 2/2] Treating physician: Fixes an edge case where clearing
 query leads to field getting disabled (#8355)

---
 src/Components/Common/UserAutocompleteFormField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Common/UserAutocompleteFormField.tsx b/src/Components/Common/UserAutocompleteFormField.tsx
index a42fea1890c..dd7c4c4301e 100644
--- a/src/Components/Common/UserAutocompleteFormField.tsx
+++ b/src/Components/Common/UserAutocompleteFormField.tsx
@@ -62,7 +62,7 @@ export default function UserAutocomplete(props: UserSearchProps) {
       setDisabled(true);
       field.handleChange(undefined as unknown as UserBareMinimum);
     }
-  }, [loading, query, field.required, data?.results, props.noResultsError]);
+  }, [loading, field.required, data?.results, props.noResultsError]);
 
   return (
     <FormField field={field}>