From 81291c996f632de4e22177b8c859584a70011711 Mon Sep 17 00:00:00 2001
From: Yevhen Shevchenko <90138953+yeshev@users.noreply.github.com>
Date: Thu, 18 May 2023 14:31:50 +0300
Subject: [PATCH] fix: api calls (#2725)

* fix: aggregate filter and group by filter

* fix: operators labels and divider

* fix: api calls

* fix: remove ts ignore from file
---
 .../container/FormAlertRules/useDebounce.js   | 31 -------------------
 .../AggregatorFilter/AggregatorFilter.tsx     |  6 ++--
 .../filters/GroupByFilter/GroupByFilter.tsx   |  8 +++--
 frontend/src/hooks/useDebounce.tsx            | 17 ++++++++++
 4 files changed, 27 insertions(+), 35 deletions(-)
 delete mode 100644 frontend/src/container/FormAlertRules/useDebounce.js
 create mode 100644 frontend/src/hooks/useDebounce.tsx

diff --git a/frontend/src/container/FormAlertRules/useDebounce.js b/frontend/src/container/FormAlertRules/useDebounce.js
deleted file mode 100644
index e430f55d63..0000000000
--- a/frontend/src/container/FormAlertRules/useDebounce.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/* eslint-disable  */
-// @ts-ignore
-// @ts-nocheck
-
-import { useEffect, useState } from 'react';
-
-// see https://github.com/tannerlinsley/react-query/issues/293
-// see https://usehooks.com/useDebounce/
-export default function useDebounce(value, delay) {
-  // State and setters for debounced value
-  const [debouncedValue, setDebouncedValue] = useState(value);
-
-  useEffect(
-    () => {
-      // Update debounced value after delay
-      const handler = setTimeout(() => {
-        setDebouncedValue(value);
-      }, delay);
-
-      // Cancel the timeout if value changes (also on delay change or unmount)
-      // This is how we prevent debounced value from updating if value is changed ...
-      // .. within the delay period. Timeout gets cleared and restarted.
-      return () => {
-        clearTimeout(handler);
-      };
-    },
-    [value, delay] // Only re-call effect if value or delay changes
-  );
-
-  return debouncedValue;
-}
diff --git a/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx b/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx
index 8c7b5293c1..06b713df2c 100644
--- a/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx
@@ -7,6 +7,7 @@ import {
 	QueryBuilderKeys,
 	selectValueDivider,
 } from 'constants/queryBuilder';
+import useDebounce from 'hooks/useDebounce';
 import { getFilterObjectValue } from 'lib/newQueryBuilder/getFilterObjectValue';
 import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
 import React, { memo, useCallback, useMemo, useState } from 'react';
@@ -25,16 +26,17 @@ export const AggregatorFilter = memo(function AggregatorFilter({
 	query,
 }: AgregatorFilterProps): JSX.Element {
 	const [optionsData, setOptionsData] = useState<ExtendedSelectOption[]>([]);
+	const debouncedValue = useDebounce(query.aggregateAttribute.key, 300);
 	const { data, isFetching } = useQuery(
 		[
 			QueryBuilderKeys.GET_AGGREGATE_ATTRIBUTE,
-			query.aggregateAttribute.key,
+			debouncedValue,
 			query.aggregateOperator,
 			query.dataSource,
 		],
 		async () =>
 			getAggregateAttribute({
-				searchText: query.aggregateAttribute.key,
+				searchText: debouncedValue,
 				aggregateOperator: query.aggregateOperator,
 				dataSource: query.dataSource,
 			}),
diff --git a/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx b/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
index 257bf60fc9..e9cd76c57a 100644
--- a/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
@@ -2,6 +2,7 @@ import { Select, Spin } from 'antd';
 import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
 // ** Constants
 import { QueryBuilderKeys, selectValueDivider } from 'constants/queryBuilder';
+import useDebounce from 'hooks/useDebounce';
 import { getFilterObjectValue } from 'lib/newQueryBuilder/getFilterObjectValue';
 // ** Components
 // ** Helpers
@@ -24,14 +25,16 @@ export const GroupByFilter = memo(function GroupByFilter({
 	const [optionsData, setOptionsData] = useState<ExtendedSelectOption[]>([]);
 	const [isFocused, setIsFocused] = useState<boolean>(false);
 
+	const debouncedValue = useDebounce(searchText, 300);
+
 	const { data, isFetching } = useQuery(
-		[QueryBuilderKeys.GET_AGGREGATE_KEYS, searchText, isFocused],
+		[QueryBuilderKeys.GET_AGGREGATE_KEYS, debouncedValue, isFocused],
 		async () =>
 			getAggregateKeys({
 				aggregateAttribute: query.aggregateAttribute.key,
 				dataSource: query.dataSource,
 				aggregateOperator: query.aggregateOperator,
-				searchText,
+				searchText: debouncedValue,
 			}),
 		{
 			enabled: !disabled && isFocused,
@@ -73,6 +76,7 @@ export const GroupByFilter = memo(function GroupByFilter({
 
 	const onBlur = (): void => {
 		setIsFocused(false);
+		setSearchText('');
 	};
 
 	const onFocus = (): void => {
diff --git a/frontend/src/hooks/useDebounce.tsx b/frontend/src/hooks/useDebounce.tsx
new file mode 100644
index 0000000000..88214a43b1
--- /dev/null
+++ b/frontend/src/hooks/useDebounce.tsx
@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export default function useDebounce<T>(value: T, delay: number): T {
+	const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+	useEffect(() => {
+		const handler = setTimeout(() => {
+			setDebouncedValue(value);
+		}, delay);
+
+		return (): void => {
+			clearTimeout(handler);
+		};
+	}, [value, delay]);
+
+	return debouncedValue;
+}