Fix: Active Filters not working on for site templates (https://github.com/woocommerce/woocommerce-blocks/pull/7346)

* fix infinite rerendering issue for active filter block when use with PHP template or site editor

* group useQueryStateByKey calls

* update deps array
This commit is contained in:
Tung Du 2022-10-10 18:42:28 +07:00 committed by GitHub
parent 8c37c9411c
commit cc050e3cd6
1 changed files with 10 additions and 5 deletions

View File

@ -77,6 +77,9 @@ const ActiveFiltersBlock = ( {
const [ minPrice, setMinPrice ] = useQueryStateByKey( 'min_price' ); const [ minPrice, setMinPrice ] = useQueryStateByKey( 'min_price' );
const [ maxPrice, setMaxPrice ] = useQueryStateByKey( 'max_price' ); const [ maxPrice, setMaxPrice ] = useQueryStateByKey( 'max_price' );
const [ productRatings, setProductRatings ] =
useQueryStateByKey( 'rating' );
const STOCK_STATUS_OPTIONS = getSetting( 'stockStatusOptions', [] ); const STOCK_STATUS_OPTIONS = getSetting( 'stockStatusOptions', [] );
const STORE_ATTRIBUTES = getSetting( 'attributes', [] ); const STORE_ATTRIBUTES = getSetting( 'attributes', [] );
const activeStockStatusFilters = useMemo( () => { const activeStockStatusFilters = useMemo( () => {
@ -154,7 +157,9 @@ const ActiveFiltersBlock = ( {
( ! productAttributes.length && ( ! productAttributes.length &&
! urlContainsAttributeFilter( STORE_ATTRIBUTES ) ) ! urlContainsAttributeFilter( STORE_ATTRIBUTES ) )
) { ) {
if ( isLoading ) {
setIsLoading( false ); setIsLoading( false );
}
return null; return null;
} }
@ -164,7 +169,9 @@ const ActiveFiltersBlock = ( {
); );
if ( ! attributeObject ) { if ( ! attributeObject ) {
if ( isLoading ) {
setIsLoading( false ); setIsLoading( false );
}
return null; return null;
} }
@ -183,12 +190,10 @@ const ActiveFiltersBlock = ( {
productAttributes, productAttributes,
componentHasMounted, componentHasMounted,
STORE_ATTRIBUTES, STORE_ATTRIBUTES,
isLoading,
blockAttributes.displayStyle, blockAttributes.displayStyle,
] ); ] );
const [ productRatings, setProductRatings ] =
useQueryStateByKey( 'rating' );
/** /**
* Parse the filter URL to set the active rating fitlers. * Parse the filter URL to set the active rating fitlers.
* This code should be moved to Rating Filter block once it's implemented. * This code should be moved to Rating Filter block once it's implemented.