^^&&^^

Edit File: use-collection-data.js

/**
 * External dependencies
 */
import { useState, useEffect, useMemo } from '@wordpress/element';
import {
	useQueryStateByContext,
	useQueryStateByKey,
	useCollection,
} from '@kkart/base-hooks';
import { useQueryStateContext } from '@kkart/base-context';
import { useDebounce } from 'use-debounce';
import { sortBy } from 'lodash';

/**
 * Internal dependencies
 */
import { useShallowEqual } from './use-shallow-equal';

const buildCollectionDataQuery = ( collectionDataQueryState ) => {
	const query = collectionDataQueryState;

if ( collectionDataQueryState.calculate_attribute_counts ) {
		query.calculate_attribute_counts = sortBy(
			collectionDataQueryState.calculate_attribute_counts.map(
				( { taxonomy, queryType } ) => {
					return {
						taxonomy,
						query_type: queryType,
					};
				}
			),
			[ 'taxonomy', 'query_type' ]
		);
	}

return query;
};

export const useCollectionData = ( {
	queryAttribute,
	queryPrices,
	queryState,
} ) => {
	let context = useQueryStateContext();
	context = `${ context }-collection-data`;

const [ collectionDataQueryState ] = useQueryStateByContext( context );
	const [
		calculateAttributesQueryState,
		setCalculateAttributesQueryState,
	] = useQueryStateByKey( 'calculate_attribute_counts', [], context );
	const [
		calculatePriceRangeQueryState,
		setCalculatePriceRangeQueryState,
	] = useQueryStateByKey( 'calculate_price_range', null, context );

const currentQueryAttribute = useShallowEqual( queryAttribute || {} );
	const currentQueryPrices = useShallowEqual( queryPrices );

useEffect( () => {
		if (
			typeof currentQueryAttribute === 'object' &&
			Object.keys( currentQueryAttribute ).length
		) {
			const foundAttribute = calculateAttributesQueryState.find(
				( attribute ) => {
					return (
						attribute.taxonomy === currentQueryAttribute.taxonomy
					);
				}
			);

if ( ! foundAttribute ) {
				setCalculateAttributesQueryState( [
					...calculateAttributesQueryState,
					currentQueryAttribute,
				] );
			}
		}
	}, [
		currentQueryAttribute,
		calculateAttributesQueryState,
		setCalculateAttributesQueryState,
	] );

useEffect( () => {
		if (
			calculatePriceRangeQueryState !== currentQueryPrices &&
			currentQueryPrices !== undefined
		) {
			setCalculatePriceRangeQueryState( currentQueryPrices );
		}
	}, [
		currentQueryPrices,
		setCalculatePriceRangeQueryState,
		calculatePriceRangeQueryState,
	] );

// Defer the select query so all collection-data query vars can be gathered.
	const [ shouldSelect, setShouldSelect ] = useState( false );
	const [ debouncedShouldSelect ] = useDebounce( shouldSelect, 200 );

if ( ! shouldSelect ) {
		setShouldSelect( true );
	}

const collectionDataQueryVars = useMemo( () => {
		return buildCollectionDataQuery( collectionDataQueryState );
	}, [ collectionDataQueryState ] );

return useCollection( {
		namespace: '/kkart/store',
		resourceName: 'products/collection-data',
		query: {
			...queryState,
			page: undefined,
			per_page: undefined,
			orderby: undefined,
			order: undefined,
			...collectionDataQueryVars,
		},
		shouldSelect: debouncedShouldSelect,
	} );
};