Merge Develop To Staging v24.34.0 | Patch

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}>

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,
         },
       );
 

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(

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 };