From 4265e49a20f11283994b8b95818f8170b92edf4b Mon Sep 17 00:00:00 2001
From: sowmya198 <sowmya.ayilam.s@gmail.com>
Date: Wed, 18 Oct 2023 19:28:45 +0530
Subject: [PATCH] Sowmya | A-1205219676877884 | [Cure Bug] Search by patient id
 is flaky in add new appointment - adds configurable debounce logic delay

---
 src/controllers/manage/appointmentsCreateController.js    | 1 +
 .../AppointmentEditorCommonFieldsWrapper.jsx              | 1 +
 .../components/PatientSearch/PatientSearch.jsx            | 8 +++++---
 ui/react-components/constants.js                          | 1 +
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/controllers/manage/appointmentsCreateController.js b/src/controllers/manage/appointmentsCreateController.js
index 614f7f9e92..63d134bcb3 100644
--- a/src/controllers/manage/appointmentsCreateController.js
+++ b/src/controllers/manage/appointmentsCreateController.js
@@ -35,6 +35,7 @@ angular.module('bahmni.appointments')
             var patientSearchURL = appService.getAppDescriptor().getConfigValue('patientSearchUrl');
             var loginLocationUuid = sessionService.getLoginLocationUuid();
             $scope.minCharLengthToTriggerPatientSearch = appService.getAppDescriptor().getConfigValue('minCharLengthToTriggerPatientSearch') || 3;
+            $scope.debouncePatientSearchDelayInMilliseconds = appService.getAppDescriptor().getConfigValue('debouncePatientSearchDelayInMilliseconds') || 3000;
 
             $scope.maxAppointmentProviders = appService.getAppDescriptor().getConfigValue("maxAppointmentProviders") || 1;
 
diff --git a/ui/react-components/components/AppointmentEditorCommonFieldsWrapper/AppointmentEditorCommonFieldsWrapper.jsx b/ui/react-components/components/AppointmentEditorCommonFieldsWrapper/AppointmentEditorCommonFieldsWrapper.jsx
index e90383002a..bae1688e20 100644
--- a/ui/react-components/components/AppointmentEditorCommonFieldsWrapper/AppointmentEditorCommonFieldsWrapper.jsx
+++ b/ui/react-components/components/AppointmentEditorCommonFieldsWrapper/AppointmentEditorCommonFieldsWrapper.jsx
@@ -70,6 +70,7 @@ const AppointmentEditorCommonFieldsWrapper = props => {
                     <PatientSearch
                         value={appointmentDetails.patient}
                         minCharLengthToTriggerPatientSearch={appConfig && appConfig.minCharLengthToTriggerPatientSearch}
+                        debouncePatientSearchDelayInMilliseconds={appConfig && appConfig.debouncePatientSearchDelayInMilliseconds}
                         onChange={(optionSelected) => {
                             const newValue = optionSelected ? optionSelected : null;
                             updateAppointmentDetails({patient: newValue});
diff --git a/ui/react-components/components/PatientSearch/PatientSearch.jsx b/ui/react-components/components/PatientSearch/PatientSearch.jsx
index aba79c6813..932032c5fb 100644
--- a/ui/react-components/components/PatientSearch/PatientSearch.jsx
+++ b/ui/react-components/components/PatientSearch/PatientSearch.jsx
@@ -5,7 +5,7 @@ import {getPatientsByLocation} from '../../api/patientApi';
 import {currentLocation} from '../../utils/CookieUtil';
 import { injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import {MINIMUM_CHAR_LENGTH_FOR_PATIENT_SEARCH} from "../../constants";
+import {MINIMUM_CHAR_LENGTH_FOR_PATIENT_SEARCH,DEBOUNCE_PATIENT_SEARCH_DELAY_IN_MILLISECONDS} from "../../constants";
 import {Search, ClickableTile, Tile} from "carbon-components-react";
 
 const styles = {
@@ -26,11 +26,12 @@ const styles = {
 }
 const PatientSearch = (props) => {
 
-    const {intl, onChange, value, isDisabled, minCharLengthToTriggerPatientSearch, autoFocus} = props;
+    const {intl, onChange, value, isDisabled, minCharLengthToTriggerPatientSearch,debouncePatientSearchDelayInMilliseconds, autoFocus} = props;
     const [userInput, setUserInput] = useState('')
     const [patients, setPatients] = useState([])
     const [selectedPatient, setSelectedPatient] = useState(value)
     const [isCalled, setIsCalled] = useState(false)
+    const debouncePatientSearchDelay = debouncePatientSearchDelayInMilliseconds || DEBOUNCE_PATIENT_SEARCH_DELAY_IN_MILLISECONDS;
     const createDropdownOptions = (patients) => {
         return patients.map(patient => getPatientForDropdown(patient));
     };
@@ -48,7 +49,7 @@ const PatientSearch = (props) => {
     };
 
     const debouncedLoadPatients = useCallback(
-        debounce(loadPatients, 3000, {
+        debounce(loadPatients, debouncePatientSearchDelay, {
           leading: true,
         }),
         [],
@@ -127,6 +128,7 @@ PatientSearch.propTypes = {
     value: PropTypes.object,
     isDisabled: PropTypes.bool,
     minCharLengthToTriggerPatientSearch: PropTypes.number,
+    debouncePatientSearchDelayInMilliseconds: PropTypes.number,
     autoFocus: PropTypes.bool
 };
 
diff --git a/ui/react-components/constants.js b/ui/react-components/constants.js
index 245152e908..8c64e90538 100644
--- a/ui/react-components/constants.js
+++ b/ui/react-components/constants.js
@@ -2,6 +2,7 @@ export const appName = 'appointments';
 export const availableForAppointments = "Available for appointments";
 export const minDurationForAppointment = 30;
 export const MINIMUM_CHAR_LENGTH_FOR_PATIENT_SEARCH = 3;
+export const DEBOUNCE_PATIENT_SEARCH_DELAY_IN_MILLISECONDS = 3000;
 export const DEFAULT_MAX_APPOINTMENT_PROVIDERS = 1;
 export const PROVIDER_ERROR_MESSAGE_TIME_OUT_INTERVAL = 5000;
 export const SERVICE_ERROR_MESSAGE_TIME_OUT_INTERVAL = 5000;