fix: where clause filter (#2800)

This commit is contained in:
Yevhen Shevchenko 2023-05-30 18:23:11 +03:00 committed by GitHub
parent eb1c5c4565
commit bc5862646d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 5 deletions

View File

@ -44,7 +44,7 @@ function QueryBuilderSearch({
searchKey, searchKey,
} = useAutoComplete(query); } = useAutoComplete(query);
const { keys } = useFetchKeysAndValues(searchValue, query, searchKey); const { sourceKeys } = useFetchKeysAndValues(searchValue, query, searchKey);
const onTagRender = ({ const onTagRender = ({
value, value,
@ -108,7 +108,7 @@ function QueryBuilderSearch({
const initialTagFilters: TagFilter = { items: [], op: 'AND' }; const initialTagFilters: TagFilter = { items: [], op: 'AND' };
initialTagFilters.items = tags.map((tag) => { initialTagFilters.items = tags.map((tag) => {
const { tagKey, tagOperator, tagValue } = getTagToken(tag); const { tagKey, tagOperator, tagValue } = getTagToken(tag);
const filterAttribute = (keys || []).find( const filterAttribute = sourceKeys.find(
(key) => key.key === getRemovePrefixFromKey(tagKey), (key) => key.key === getRemovePrefixFromKey(tagKey),
); );
return { return {
@ -127,8 +127,8 @@ function QueryBuilderSearch({
}; };
}); });
onChange(initialTagFilters); onChange(initialTagFilters);
// eslint-disable-next-line react-hooks/exhaustive-deps /* eslint-disable react-hooks/exhaustive-deps */
}, [keys, tags]); }, [sourceKeys, tags]);
return ( return (
<Select <Select

View File

@ -6,6 +6,7 @@ import {
getTagToken, getTagToken,
isInNInOperator, isInNInOperator,
} from 'container/QueryBuilder/filters/QueryBuilderSearch/utils'; } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
import { isEqual, uniqWith } from 'lodash-es';
import debounce from 'lodash-es/debounce'; import debounce from 'lodash-es/debounce';
import { useEffect, useMemo, useRef, useState } from 'react'; import { useEffect, useMemo, useRef, useState } from 'react';
import { useQuery } from 'react-query'; import { useQuery } from 'react-query';
@ -18,6 +19,7 @@ type IuseFetchKeysAndValues = {
keys: BaseAutocompleteData[]; keys: BaseAutocompleteData[];
results: string[]; results: string[];
isFetching: boolean; isFetching: boolean;
sourceKeys: BaseAutocompleteData[];
}; };
/** /**
@ -33,6 +35,7 @@ export const useFetchKeysAndValues = (
searchKey: string, searchKey: string,
): IuseFetchKeysAndValues => { ): IuseFetchKeysAndValues => {
const [keys, setKeys] = useState<BaseAutocompleteData[]>([]); const [keys, setKeys] = useState<BaseAutocompleteData[]>([]);
const [sourceKeys, setSourceKeys] = useState<BaseAutocompleteData[]>([]);
const [results, setResults] = useState<string[]>([]); const [results, setResults] = useState<string[]>([]);
const searchParams = useMemo( const searchParams = useMemo(
@ -138,7 +141,10 @@ export const useFetchKeysAndValues = (
// update the fetched keys when the fetch status changes // update the fetched keys when the fetch status changes
useEffect(() => { useEffect(() => {
if (status === 'success' && data?.payload?.attributeKeys) { if (status === 'success' && data?.payload?.attributeKeys) {
setKeys(data?.payload.attributeKeys); setKeys(data.payload.attributeKeys);
setSourceKeys((prevState) =>
uniqWith([...(data.payload.attributeKeys ?? []), ...prevState], isEqual),
);
} else { } else {
setKeys([]); setKeys([]);
} }
@ -148,5 +154,6 @@ export const useFetchKeysAndValues = (
keys, keys,
results, results,
isFetching, isFetching,
sourceKeys,
}; };
}; };