Fixed icd11 diagnosis multiselect field making unnecessary requests (#…

…8448) Co-authored-by: rithviknishad <[email protected]>
ohcnetwork · Sep 2, 2024 · dcedaa9 · dcedaa9
1 parent 788e752
commit dcedaa9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx
@@ -26,6 +26,7 @@ export default function AddICD11Diagnosis(props: AddICD11DiagnosisProps) {
   const hasError = !!props.disallowed.find((d) => d?.id === selected?.id);
 
   const { res, data, loading, refetch } = useQuery(routes.listICD11Diagnosis, {
+    prefetch: false,
     silent: true,
   });
 

diff --git a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
@@ -26,6 +26,7 @@ type AutocompleteMultiSelectFormFieldProps<T, V> = FormFieldBaseProps<V[]> & {
   optionDisabled?: OptionCallback<T, boolean>;
   onQuery?: (query: string) => void;
   dropdownIcon?: React.ReactNode | undefined;
+  minQueryLength?: number;
   isLoading?: boolean;
   selectAll?: boolean;
 };
@@ -64,6 +65,7 @@ type AutocompleteMutliSelectProps<T, V = T> = {
   isLoading?: boolean;
   selectAll?: boolean;
   error?: string;
+  minQueryLength?: number;
 };
 
 /**
@@ -80,7 +82,9 @@ export const AutocompleteMutliSelect = <T, V>(
   const [query, setQuery] = useState(""); // Ensure lower case
   const comboButtonRef = useRef<HTMLButtonElement>(null);
   useEffect(() => {
-    props.onQuery && props.onQuery(query);
+    query.length >= (props.minQueryLength || 1) &&
+      props.onQuery &&
+      props.onQuery(query);
   }, [query]);
   const handleSingleSelect = (o: any) => {
     if (o.option?.isSingleSelect === true && comboButtonRef.current) {
@@ -175,7 +179,11 @@ export const AutocompleteMutliSelect = <T, V>(
               as="ul"
               className="cui-dropdown-base absolute top-12 z-10 mt-0.5"
             >
-              {props.isLoading ? (
+              {props.minQueryLength && query.length < props.minQueryLength ? (
+                <div className="p-2 text-sm text-secondary-500">
+                  {`Please enter at least ${props.minQueryLength} characters to search`}
+                </div>
+              ) : props.isLoading ? (
                 <Searching />
               ) : filteredOptions.length ? (
                 <>

diff --git a/src/Components/Patient/DiagnosesFilter.tsx b/src/Components/Patient/DiagnosesFilter.tsx
@@ -37,6 +37,7 @@ export default function DiagnosesFilter(props: Props) {
   const [diagnoses, setDiagnoses] = useState<ICD11DiagnosisModel[]>([]);
   const { res, data, loading, refetch } = useQuery(routes.listICD11Diagnosis, {
     silent: true,
+    prefetch: false,
   });
 
   useEffect(() => {
@@ -72,6 +73,7 @@ export default function DiagnosesFilter(props: Props) {
       name="icd11_search"
       className="w-full"
       placeholder={t("search_icd11_placeholder")}
+      minQueryLength={2}
       value={diagnoses}
       onChange={(e) => {
         setDiagnoses(e.value);