Handles the logic in handlePaginateFetch and removes the use effect

apache · Sep 15, 2021 · 183f452 · 183f452
1 parent 347daea
commit 183f452
Showing 1 changed file with 21 additions and 15 deletions.
diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
@@ -334,21 +334,26 @@ const Select = ({
     });
 
   const handleData = (data: OptionsType) => {
+    let mergedData: OptionsType = [];
     if (data && Array.isArray(data) && data.length) {
       const dataValues = new Set();
       data.forEach(option =>
         dataValues.add(String(option.value).toLocaleLowerCase()),
       );
 
       // merges with existing and creates unique options
-      setSelectOptions(prevOptions => [
-        ...prevOptions.filter(
-          previousOption =>
-            !dataValues.has(String(previousOption.value).toLocaleLowerCase()),
-        ),
-        ...data,
-      ]);
+      setSelectOptions(prevOptions => {
+        mergedData = [
+          ...prevOptions.filter(
+            previousOption =>
+              !dataValues.has(String(previousOption.value).toLocaleLowerCase()),
+          ),
+          ...data,
+        ];
+        return mergedData;
+      });
     }
+    return mergedData;
   };
 
   const handlePaginatedFetch = useMemo(
@@ -370,17 +375,24 @@ const Select = ({
       const fetchOptions = options as OptionsPagePromise;
       fetchOptions(value, page, pageSize)
         .then(({ data, totalCount }: OptionsTypePage) => {
-          handleData(data);
+          const mergedData = handleData(data);
           fetchedQueries.current.set(key, totalCount);
           setTotalCount(totalCount);
+          if (
+            !fetchOnlyOnSearch &&
+            value === '' &&
+            mergedData.length >= totalCount
+          ) {
+            setAllValuesLoaded(true);
+          }
         })
         .catch(onError)
         .finally(() => {
           setIsLoading(false);
           setIsTyping(false);
         });
     },
-    [allValuesLoaded, options],
+    [allValuesLoaded, fetchOnlyOnSearch, options],
   );
 
   const handleOnSearch = useMemo(
@@ -564,12 +576,6 @@ const Select = ({
     }
   }, [isLoading, loading]);
 
-  useEffect(() => {
-    if (!fetchOnlyOnSearch && searchedValue === '' && totalCount > 0) {
-      setAllValuesLoaded(selectOptions.length >= totalCount);
-    }
-  }, [fetchOnlyOnSearch, searchedValue, selectOptions.length, totalCount]);
-
   return (
     <StyledContainer>
       {header}