From 7b87f120ce7aa39594a76935bec1220efdf053e4 Mon Sep 17 00:00:00 2001
From: vivek <konavivekramakrishna@gmail.com>
Date: Mon, 4 Dec 2023 17:10:01 +0530
Subject: [PATCH] Add useAsyncOptions hook to LocationSelect component

---
 src/Components/Common/LocationSelect.tsx | 29 +++++++++++++++++-------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/Components/Common/LocationSelect.tsx b/src/Components/Common/LocationSelect.tsx
index d20c843fad8..a0308d723ae 100644
--- a/src/Components/Common/LocationSelect.tsx
+++ b/src/Components/Common/LocationSelect.tsx
@@ -3,6 +3,7 @@ import { useDispatch } from "react-redux";
 import { listFacilityAssetLocation } from "../../Redux/actions";
 import AutocompleteFormField from "../Form/FormFields/Autocomplete";
 import AutocompleteMultiSelectFormField from "../Form/FormFields/AutocompleteMultiselect";
+import { useAsyncOptions } from "../../Common/hooks/useAsyncOptions";
 interface LocationSelectProps {
   name: string;
   disabled?: boolean;
@@ -32,8 +33,13 @@ export const LocationSelect = (props: LocationSelectProps) => {
   const [locations, setLocations] = useState<{ name: string; id: string }[]>(
     []
   );
+
+  const { fetchOptions, isLoading, options } = useAsyncOptions<{
+    id: string;
+    name: string;
+  }>("id");
+
   const [query, setQuery] = useState<string>("");
-  const [loading, setLoading] = useState<boolean>(false);
   const dispatchAction: any = useDispatch();
 
   const handleValueChange = (current: string[]) => {
@@ -47,12 +53,10 @@ export const LocationSelect = (props: LocationSelectProps) => {
       limit: 14,
       search_text: query,
     };
-    setLoading(true);
     dispatchAction(
       listFacilityAssetLocation(params, { facility_external_id: facilityId })
     ).then(({ data }: any) => {
       setLocations(data.results);
-      setLoading(false);
     });
   }, [query, facilityId]);
 
@@ -78,12 +82,21 @@ export const LocationSelect = (props: LocationSelectProps) => {
       name={name}
       disabled={disabled}
       value={selected as string}
-      options={locations}
+      options={options(locations)}
       onChange={({ value }) => handleValueChange([value])}
-      onQuery={(query) => {
-        setQuery(query);
-      }}
-      isLoading={loading}
+      onQuery={(query) =>
+        facilityId ??
+        fetchOptions(
+          listFacilityAssetLocation(
+            {
+              limit: 14,
+              search_text: query,
+            },
+            { facility_external_id: facilityId }
+          )
+        )
+      }
+      isLoading={isLoading}
       placeholder="Search by location name"
       optionLabel={(option) => option.name}
       optionValue={(option) => option.id}