update async-autocomplete-field fetching data

UN-OCHA · Jul 17, 2024 · cc32b41 · cc32b41
1 parent 21b57fc
commit cc32b41
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 25 deletions.
diff --git a/apps/hpc-ftsadmin/src/app/components/flow-form.tsx b/apps/hpc-ftsadmin/src/app/components/flow-form.tsx
@@ -592,7 +592,6 @@ const FLOWVALUESFORDISPLAY_TYPES = [
 let parentValue = '';
 
 export const FlowForm = (props: Props) => {
-  console.log('Test-------->>>');
   const {
     currentVersionData,
     initialValue,

diff --git a/libs/hpc-ui/src/lib/components/form-fields/async-autocomplete-field-ftsadmin.tsx b/libs/hpc-ui/src/lib/components/form-fields/async-autocomplete-field-ftsadmin.tsx
@@ -592,7 +592,7 @@ const FormikAsyncAutocompleteSelect = ({
       setFieldValue(name, newValue);
       setMultipleValueSelected(Array.isArray(newValue) && newValue.length > 1);
     },
-    onInputChange: (event, newInputValue) => {
+    onInputChange: (_, newInputValue) => {
       setInputValue(newInputValue);
     },
     loading: loading,

diff --git a/libs/hpc-ui/src/lib/components/form-fields/async-autocomplete-field.tsx b/libs/hpc-ui/src/lib/components/form-fields/async-autocomplete-field.tsx
@@ -79,39 +79,71 @@ const AsyncAutocompleteSelect = memo(
     const [options, setOptions] = useState<Array<FormObjectValue>>([]);
     const [data, setData] = useState<Array<FormObjectValue>>([]);
     const [isFetch, setIsFetch] = useState(false);
+    const [debouncedInputValue, setDebouncedInputValue] = useState('');
     const loading =
       open && !isFetch && (!isAutocompleteAPI || inputValue.length >= 3);
+    const actualYear = new Date().getFullYear();
+
+    useEffect(() => {
+      const delay = 300;
+      const debounceTimer = setTimeout(() => {
+        setDebouncedInputValue(inputValue);
+      }, delay);
+
+      return () => {
+        clearTimeout(debounceTimer);
+      };
+    }, [inputValue]);
+
+    useEffect(() => {
+      if (!open && isAutocompleteAPI) {
+        setOptions([]);
+        setData([]);
+        setIsFetch(false);
+      }
+    }, [open]);
 
     useEffect(() => {
       let active = true;
-      if (isAutocompleteAPI && (inputValue === '' || inputValue.length < 3)) {
+      if (
+        isAutocompleteAPI &&
+        (debouncedInputValue === '' || debouncedInputValue.length < 3)
+      ) {
         setOptions([]);
         setData([]);
         setIsFetch(false);
         return undefined;
       }
-      if (data.length > 0 && (inputValue.length >= 3 || !isAutocompleteAPI)) {
-        const filterOptions = (value?: string) =>
-          value
-            ? value.toUpperCase().includes(inputValue.toUpperCase())
-            : false;
+      if (
+        (data.length > 0 &&
+          (debouncedInputValue.length >= 3 || !isAutocompleteAPI) &&
+          debouncedInputValue.length > 0) ||
+        (debouncedInputValue.length === 0 &&
+          options.at(0)?.displayLabel !== (actualYear - 5).toString() &&
+          options.at(-1)?.displayLabel !== (actualYear + 5).toString())
+      ) {
         setOptions(
-          data.filter(
-            (x) =>
-              filterOptions(x.displayLabel) ||
-              (allowChildrenRender && filterOptions(x.parent?.displayLabel))
+          data.filter((x) =>
+            x.displayLabel
+              .toUpperCase()
+              .includes(debouncedInputValue.toUpperCase())
           )
         );
       }
 
-      if (!loading) {
+      if (!loading && !(typeof field.value === 'string')) {
         return undefined;
       }
       (async () => {
         try {
-          const response = await fnPromise({
-            query: inputValue,
-          });
+          let response: FormObjectValue[];
+          if (fnPromise) {
+            response = await fnPromise({
+              query: debouncedInputValue,
+            });
+          } else {
+            response = field.value;
+          }
           setData(removeFormObjectValueFromFirstArray(response, removeOptions));
           if (active) {
             setOptions(response);
@@ -125,15 +157,7 @@ const AsyncAutocompleteSelect = memo(
       return () => {
         active = false;
       };
-    }, [loading, inputValue]);
-
-    useEffect(() => {
-      if (!open && isAutocompleteAPI) {
-        setOptions([]);
-        setData([]);
-        setIsFetch(false);
-      }
-    }, [open]);
+    }, [loading, debouncedInputValue]);
 
     const configAutocomplete: AutocompleteProps<
       FormObjectValue,