extract change URL logic

Author: dinhtungdu

assets/js/blocks/active-filters/utils.tsx

@@ -6,14 +6,7 @@ import { formatPrice } from '@woocommerce/price-format';
 import { RemovableChip } from '@woocommerce/base-components/chip';
 import Label from '@woocommerce/base-components/label';
 import { getQueryArgs, addQueryArgs, removeQueryArgs } from '@wordpress/url';
-import { getSettingWithCoercion } from '@woocommerce/settings';
-import { isBoolean } from '@woocommerce/types';
-
-const filteringForPhpTemplate = getSettingWithCoercion(
-	'is_rendering_php_template',
-	false,
-	isBoolean
-);
+import { changeUrl } from '@woocommerce/utils';
 
 /**
  * Format a min/max price range to display.
@@ -195,11 +188,7 @@ export const removeArgsFromFilterUrl = (
 
 	const newUrl = addQueryArgs( cleanUrl, filteredQuery );
 
-	if ( filteringForPhpTemplate ) {
-		window.location.href = newUrl;
-	} else {
-		window.history.replaceState( {}, '', newUrl );
-	}
+	changeUrl( newUrl );
 };
 
 /**
@@ -233,9 +222,5 @@ export const cleanFilterUrl = () => {
 
 	const newUrl = addQueryArgs( cleanUrl, remainingArgs );
 
-	if ( filteringForPhpTemplate ) {
-		window.location.href = newUrl;
-	} else {
-		window.history.replaceState( {}, '', newUrl );
-	}
+	changeUrl( newUrl );
 };

assets/js/blocks/attribute-filter/block.tsx

@@ -29,6 +29,7 @@ import {
 	objectHasProp,
 } from '@woocommerce/types';
 import {
+	changeUrl,
 	PREFIX_QUERY_ARG_FILTER_TYPE,
 	PREFIX_QUERY_ARG_QUERY_TYPE,
 } from '@woocommerce/utils';
@@ -281,26 +282,18 @@ const AttributeFilterBlock = ( {
 				);
 
 				const newUrl = formatParams( url, query );
-				if ( filteringForPhpTemplate ) {
-					window.location.href = newUrl;
-				} else {
-					window.history.replaceState( {}, '', newUrl );
-				}
+				changeUrl( newUrl );
 			} else {
 				const newUrl = formatParams( pageUrl, query );
 				const currentQueryArgs = getQueryArgs( window.location.href );
 				const newUrlQueryArgs = getQueryArgs( newUrl );
 
 				if ( ! isQueryArgsEqual( currentQueryArgs, newUrlQueryArgs ) ) {
-					if ( filteringForPhpTemplate ) {
-						window.location.href = newUrl;
-					} else {
-						window.history.replaceState( {}, '', newUrl );
-					}
+					changeUrl( newUrl );
 				}
 			}
 		},
-		[ pageUrl, attributeObject?.taxonomy, filteringForPhpTemplate ]
+		[ pageUrl, attributeObject?.taxonomy ]
 	);
 
 	const onSubmit = ( checkedFilters: string[] ) => {

assets/js/blocks/price-filter/block.tsx

@@ -14,6 +14,7 @@ import PropTypes from 'prop-types';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { getSettingWithCoercion } from '@woocommerce/settings';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
+import { changeUrl, getUrlParameter } from '@woocommerce/utils';
 import {
 	CurrencyResponse,
 	isBoolean,
@@ -25,7 +26,6 @@ import {
  * Internal dependencies
  */
 import usePriceConstraints from './use-price-constraints';
-import { getUrlParameter } from '../../utils/filters';
 import './style.scss';
 import { Attributes } from './types';
 
@@ -184,13 +184,7 @@ const PriceFilterBlock = ( {
 
 				// If the params have changed, lets update the filter URL.
 				if ( window.location.href !== newUrl ) {
-					// When filtering on the PHP template, we need to reload the page.
-					if ( filteringForPhpTemplate ) {
-						return ( window.location.href = newUrl );
-					}
-
-					// When filtering All Products block, we only update the URL.
-					window.history.replaceState( {}, '', newUrl );
+					changeUrl( newUrl );
 				}
 			}
 
@@ -202,7 +196,6 @@ const PriceFilterBlock = ( {
 			maxConstraint,
 			setMinPriceQuery,
 			setMaxPriceQuery,
-			filteringForPhpTemplate,
 			currency.minorUnit,
 		]
 	);

assets/js/blocks/stock-filter/block.tsx

@@ -24,7 +24,7 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
 import { decodeEntities } from '@wordpress/html-entities';
 import { isBoolean, objectHasProp } from '@woocommerce/types';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
-import { PREFIX_QUERY_ARG_FILTER_TYPE } from '@woocommerce/utils';
+import { changeUrl, PREFIX_QUERY_ARG_FILTER_TYPE } from '@woocommerce/utils';
 
 /**
  * Internal dependencies
@@ -180,13 +180,9 @@ const StockStatusFilterBlock = ( {
 	/**
 	 * Used to redirect the page when filters are changed so templates using the Classic Template block can filter.
 	 *
-	 * @param {Array}   checkedOptions Array of checked stock options.
-	 * @param {boolean} isPhpTemplate  Whether filters are being used for a PHP template.
+	 * @param {Array} checkedOptions Array of checked stock options.
 	 */
-	const updateFilterUrl = (
-		checkedOptions: string[],
-		isPhpTemplate: boolean
-	) => {
+	const updateFilterUrl = ( checkedOptions: string[] ) => {
 		if ( ! window ) {
 			return;
 		}
@@ -197,11 +193,7 @@ const StockStatusFilterBlock = ( {
 			);
 
 			if ( url !== window.location.href ) {
-				if ( isPhpTemplate ) {
-					window.location.href = url;
-				} else {
-					window.history.replaceState( {}, '', url );
-				}
+				changeUrl( url );
 			}
 
 			return;
@@ -215,11 +207,7 @@ const StockStatusFilterBlock = ( {
 			return;
 		}
 
-		if ( isPhpTemplate ) {
-			window.location.href = newUrl;
-		} else {
-			window.history.replaceState( {}, '', newUrl );
-		}
+		changeUrl( newUrl );
 	};
 
 	const onSubmit = useCallback(
@@ -231,7 +219,7 @@ const StockStatusFilterBlock = ( {
 				setProductStockStatusQuery( checked );
 			}
 
-			updateFilterUrl( checked, filteringForPhpTemplate );
+			updateFilterUrl( checked );
 		},
 		[
 			isEditor,

assets/js/utils/filters.ts

@@ -2,6 +2,14 @@
  * External dependencies
  */
 import { getQueryArg } from '@wordpress/url';
+import { getSettingWithCoercion } from '@woocommerce/settings';
+import { isBoolean } from '@woocommerce/types';
+
+const filteringForPhpTemplate = getSettingWithCoercion(
+	'is_rendering_php_template',
+	false,
+	isBoolean
+);
 
 /**
  * Returns specified parameter from URL
@@ -18,3 +26,16 @@ export function getUrlParameter( name: string ) {
 	}
 	return getQueryArg( window.location.href, name );
 }
+
+/**
+ * Change the URL and reload the page if filtering for PHP templates.
+ *
+ * @param {string} newUrl New URL to be set.
+ */
+export function changeUrl( newUrl: string ) {
+	if ( filteringForPhpTemplate ) {
+		window.location.href = newUrl;
+	} else {
+		window.history.replaceState( {}, '', newUrl );
+	}
+}