#900: Issues with filters: no debounce and dropdown closing on click (#…

…912)
GeoNode · Apr 15, 2022 · 0dd48af · 0dd48af
1 parent 76819ab
commit 0dd48af
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 35 deletions.
diff --git a/geonode_mapstore_client/client/js/api/geonode/v2/index.js b/geonode_mapstore_client/client/js/api/geonode/v2/index.js
@@ -577,8 +577,9 @@ export const getFeaturedResources = (page = 1, page_size =  4) => {
     }).then(({data}) => data);
 };
 
-export const getCategories = ({ q, includes, page, pageSize, ...params }, filterKey = 'categories') => {
+export const getCategories = ({ q, includes, page, pageSize, config, ...params }, filterKey = 'categories') => {
     return axios.get(parseDevHostname(`${endpoints[CATEGORIES]}`), {
+        ...config,
         params: {
             page_size: pageSize || 9999,
             page,
@@ -609,8 +610,9 @@ export const getCategories = ({ q, includes, page, pageSize, ...params }, filter
         });
 };
 
-export const getRegions = ({ q, includes, page, pageSize, ...params }, filterKey = 'regions') => {
+export const getRegions = ({ q, includes, page, pageSize, config, ...params }, filterKey = 'regions') => {
     return axios.get(parseDevHostname(`${endpoints[REGIONS]}`), {
+        ...config,
         params: {
             page_size: pageSize || 9999,
             page,
@@ -641,8 +643,9 @@ export const getRegions = ({ q, includes, page, pageSize, ...params }, filterKey
         });
 };
 
-export const getOwners = ({ q, includes, page, pageSize, ...params }, filterKey = 'owners') => {
+export const getOwners = ({ q, includes, page, pageSize, config, ...params }, filterKey = 'owners') => {
     return axios.get(parseDevHostname(`${endpoints[OWNERS]}`), {
+        ...config,
         params: {
             page_size: pageSize || 9999,
             page,
@@ -673,8 +676,9 @@ export const getOwners = ({ q, includes, page, pageSize, ...params }, filterKey
         });
 };
 
-export const getKeywords = ({ q, includes, page, pageSize, ...params }, filterKey =  'keywords') => {
+export const getKeywords = ({ q, includes, page, pageSize, config, ...params }, filterKey =  'keywords') => {
     return axios.get(parseDevHostname(`${endpoints[KEYWORDS]}`), {
+        ...config,
         params: {
             page_size: pageSize || 9999,
             page,

diff --git a/geonode_mapstore_client/client/js/components/SelectInfiniteScroll/SelectInfiniteScroll.jsx b/geonode_mapstore_client/client/js/components/SelectInfiniteScroll/SelectInfiniteScroll.jsx
@@ -7,6 +7,7 @@
  */
 
 import React, { useRef, useState, useEffect } from 'react';
+import axios from '@mapstore/framework/libs/ajax';
 import debounce from 'lodash/debounce';
 import ReactSelect from 'react-select';
 import localizedProps from '@mapstore/framework/components/misc/enhancers/localizedProps';
@@ -16,7 +17,7 @@ const SelectSync = localizedProps('placeholder')(ReactSelect);
 function SelectInfiniteScroll({
     loadOptions,
     pageSize = 20,
-    debounceTime,
+    debounceTime = 500,
     ...props
 }) {
 
@@ -27,44 +28,75 @@ function SelectInfiniteScroll({
     const [page, setPage] = useState(1);
     const [options, setOptions] = useState([]);
 
+    const source = useRef();
+    const debounced = useRef();
+
+    const createToken = () => {
+        if (source.current) {
+            source.current?.cancel();
+            source.current = undefined;
+        }
+        const cancelToken = axios.CancelToken;
+        source.current = cancelToken.source();
+    };
+
     const handleUpdateOptions = useRef();
     handleUpdateOptions.current = (args = {}) => {
-        if (!loading) {
-            setLoading(true);
-            const newPage = args.page || page;
-            loadOptions({
-                q: args.q || text,
-                page: newPage,
-                pageSize
+        createToken();
+        const { q } = args;
+        const query = q ?? text;
+        setLoading(true);
+        const newPage = args.page || page;
+        loadOptions({
+            q: query,
+            page: newPage,
+            pageSize,
+            config: {
+                cancelToken: source.current.token
+            }
+        })
+            .then((response) => {
+                const newOptions = response.results.map(({ selectOption }) => selectOption);
+                setOptions(newPage === 1 ? newOptions : [...options, ...newOptions]);
+                setIsNextPageAvailable(response.isNextPageAvailable);
+                setLoading(false);
+                source.current = undefined;
             })
-                .then((response) => {
-                    const newOptions = response.results.map(({ selectOption }) => selectOption);
-                    setOptions(newPage === 1 ? newOptions : [...options, ...newOptions]);
-                    setIsNextPageAvailable(response.isNextPageAvailable);
-                    setLoading(false);
-                })
-                .catch(() => {
-                    setOptions([]);
-                    setIsNextPageAvailable(false);
-                    setLoading(false);
-                });
-        }
+            .catch(() => {
+                setOptions([]);
+                setIsNextPageAvailable(false);
+                setLoading(false);
+                source.current = undefined;
+            });
     };
 
-    function handleInputChange(q) {
-        if (q !== text) {
-            setText(q);
-            setPage(1);
-            setOptions([]);
-            handleUpdateOptions.current({ q, page: 1 });
+    function handleInputChange(value) {
+        if (source.current) {
+            source.current?.cancel();
+            source.current = undefined;
         }
+
+        debounced.current.cancel();
+        debounced.current(value);
     }
 
-    const initOpen = useRef();
     useEffect(() => {
-        if (!initOpen.current && open) {
-            handleUpdateOptions.current();
-            initOpen.current = true;
+        debounced.current = debounce((value) => {
+            if (value !== text) {
+                setText(value);
+                setPage(1);
+                setOptions([]);
+                handleUpdateOptions.current({ q: value, page: 1 });
+            }
+        }, debounceTime);
+    }, []);
+
+    useEffect(() => {
+        if (open) {
+            setText('');
+            setPage(1);
+            setOptions([]);
+            handleUpdateOptions.current({q: '', page: 1});
         }
     }, [open]);
 
@@ -84,7 +116,7 @@ function SelectInfiniteScroll({
             filterOptions={(currentOptions) => {
                 return currentOptions;
             }}
-            onInputChange={debounce(q => handleInputChange(q), debounceTime)}
+            onInputChange={(q) => handleInputChange(q)}
             onMenuScrollToBottom={() => {
                 if (!loading && isNextPageAvailable) {
                     setPage(page + 1);