@pushwoosh/dumb-components 4.4.0 → 4.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/shared/dropdownField/useAsyncItems.js

@@ -12,9 +12,12 @@ export function useAsyncItems({
   debounceMs = DEFAULT_DEBOUNCE_MS,
   minChars = 0
 }) {
-  const [items, setItems] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [loadingMore, setLoadingMore] = useState(false);
+  const [state, setState] = useState({
+    session: 0,
+    items: [],
+    loading: false,
+    loadingMore: false
+  });
   const debouncedQuery = useDebouncedValue(query, debounceMs);
   const loadItemsRef = useRef(loadItems);
   loadItemsRef.current = loadItems;
@@ -23,60 +26,85 @@ export function useAsyncItems({
   const queryRef = useRef('');
   const loadingRef = useRef(false);
   const hasMoreRef = useRef(false);
+  const sessionDeps = [debouncedQuery, isOpen, minChars];
+  const [prevSessionDeps, setPrevSessionDeps] = useState(null);
+  if (prevSessionDeps === null || sessionDeps.some((dep, index) => dep !== prevSessionDeps[index])) {
+    setPrevSessionDeps(sessionDeps);
+    const belowMin = debouncedQuery.trim().length < minChars;
+    setState(prev => ({
+      session: prev.session + 1,
+      items: !loadItems || belowMin ? [] : prev.items,
+      loading: Boolean(loadItems) && isOpen && !belowMin,
+      loadingMore: false
+    }));
+  }
+  const {
+    session
+  } = state;
   useEffect(() => {
     const loader = loadItemsRef.current;
     const belowMin = debouncedQuery.trim().length < minChars;
-    sessionRef.current += 1;
+    sessionRef.current = session;
     pageRef.current = 0;
     loadingRef.current = false;
     hasMoreRef.current = false;
-    setLoadingMore(false);
     if (!loader || !isOpen || belowMin) {
-      setLoading(false);
-      if (!loader || belowMin) setItems([]);
       return undefined;
     }
-    const session = sessionRef.current;
     queryRef.current = debouncedQuery;
     loadingRef.current = true;
-    setLoading(true);
     Promise.resolve(loader(debouncedQuery, 0)).then(result => {
       if (session !== sessionRef.current) return;
-      setItems(result.items);
       hasMoreRef.current = result.hasMore ?? false;
       loadingRef.current = false;
-      setLoading(false);
+      setState(prev => prev.session === session ? {
+        ...prev,
+        items: result.items,
+        loading: false
+      } : prev);
     }).catch(() => {
       if (session !== sessionRef.current) return;
       loadingRef.current = false;
-      setLoading(false);
+      setState(prev => prev.session === session ? {
+        ...prev,
+        loading: false
+      } : prev);
     });
     return undefined;
-  }, [debouncedQuery, isOpen, minChars]);
+  }, [session, debouncedQuery, isOpen, minChars]);
   const loadMore = useCallback(() => {
     const loader = loadItemsRef.current;
     if (!loader || loadingRef.current || !hasMoreRef.current) return;
-    const session = sessionRef.current;
+    const loadSession = sessionRef.current;
     const nextPage = pageRef.current + 1;
     loadingRef.current = true;
-    setLoadingMore(true);
+    setState(prev => prev.session === loadSession ? {
+      ...prev,
+      loadingMore: true
+    } : prev);
     Promise.resolve(loader(queryRef.current, nextPage)).then(result => {
-      if (session !== sessionRef.current) return;
+      if (loadSession !== sessionRef.current) return;
       pageRef.current = nextPage;
-      setItems(prev => [...prev, ...result.items]);
       hasMoreRef.current = result.hasMore ?? false;
       loadingRef.current = false;
-      setLoadingMore(false);
+      setState(prev => prev.session === loadSession ? {
+        ...prev,
+        items: [...prev.items, ...result.items],
+        loadingMore: false
+      } : prev);
     }).catch(() => {
-      if (session !== sessionRef.current) return;
+      if (loadSession !== sessionRef.current) return;
       loadingRef.current = false;
-      setLoadingMore(false);
+      setState(prev => prev.session === loadSession ? {
+        ...prev,
+        loadingMore: false
+      } : prev);
     });
   }, []);
   return {
-    items,
-    loading,
-    loadingMore,
+    items: state.items,
+    loading: state.loading,
+    loadingMore: state.loadingMore,
     loadMore
   };
 }