Fix: Convert Filter Products by Price Block to TypeScript (#6514)

dinhtungdu · web-flow · commit 0365ba923129 · 2022-06-14T15:48:49.000+07:00
diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
@@ -33,19 +33,19 @@ export interface PriceSliderProps {
 	/**
 	 * Maximum constraint.
 	 */
-	maxConstraint: number;
+	maxConstraint: number | null | undefined;
 	/**
 	 * Maximum price for slider.
 	 */
-	maxPrice: number;
+	maxPrice: number | null;
 	/**
 	 * Minimum constraint.
 	 */
-	minConstraint: number;
+	minConstraint: number | null | undefined;
 	/**
 	 * Minimum price for slider.
 	 */
-	minPrice: number;
+	minPrice: number | null;
 	/**
 	 * Function to call on the change event.
 	 */
@@ -65,7 +65,7 @@ export interface PriceSliderProps {
 	/**
 	 * What step values the slider uses.
 	 */
-	step: number;
+	step?: number;
 }
 
 const PriceSlider = ( {
diff --git a/assets/js/blocks/price-filter/attributes.ts b/assets/js/blocks/price-filter/attributes.ts
@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const blockAttributes = {
+	heading: {
+		type: 'string',
+		default: __( 'Filter by price', 'woo-gutenberg-products-block' ),
+	},
+};
diff --git a/assets/js/blocks/price-filter/block.json b/assets/js/blocks/price-filter/block.json
@@ -19,6 +19,10 @@
 		}
 	},
 	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		},
 		"showInputFields": {
 			"type": "boolean",
 			"default": true
diff --git a/assets/js/blocks/price-filter/block.tsx b/assets/js/blocks/price-filter/block.tsx
@@ -14,14 +14,20 @@ import PropTypes from 'prop-types';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { getSettingWithCoercion } from '@woocommerce/settings';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
-import { isBoolean } from '@woocommerce/types';
+import {
+	CurrencyResponse,
+	isBoolean,
+	isString,
+	objectHasProp,
+} from '@woocommerce/types';
 
 /**
  * Internal dependencies
  */
-import usePriceConstraints from './use-price-constraints.js';
+import usePriceConstraints from './use-price-constraints';
 import { getUrlParameter } from '../../utils/filters';
 import './style.scss';
+import { Attributes } from './types';
 
 /**
  * Formats filter values into a string for the URL parameters needed for filtering PHP templates.
@@ -31,8 +37,11 @@ import './style.scss';
  *
  * @return {string} New URL with query parameters in it.
  */
-function formatParams( url, params ) {
-	const paramObject = {};
+function formatParams(
+	url: string,
+	params: Record< string, string | number >
+) {
+	const paramObject: Record< string, string > = {};
 
 	for ( const [ key, value ] of Object.entries( params ) ) {
 		if ( value ) {
@@ -51,13 +60,13 @@ function formatParams( url, params ) {
 /**
  * Formats price values taking into account precision
  *
- * @param {string} value
- * @param {number} minorUnit
+ * @param {string|void} value
+ * @param {number}      minorUnit
  *
  * @return {number} Formatted price.
  */
 
-function formatPrice( value, minorUnit ) {
+function formatPrice( value: unknown, minorUnit: number ) {
 	return Number( value ) * 10 ** minorUnit;
 }
 
@@ -68,7 +77,13 @@ function formatPrice( value, minorUnit ) {
  * @param {Object}  props.attributes Incoming block attributes.
  * @param {boolean} props.isEditor   Whether in editor context or not.
  */
-const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
+const PriceFilterBlock = ( {
+	attributes,
+	isEditor = false,
+}: {
+	attributes: Attributes;
+	isEditor: boolean;
+} ) => {
 	const hasFilterableProducts = getSettingWithCoercion(
 		'has_filterable_products',
 		false,
@@ -97,7 +112,11 @@ const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
 		queryState,
 	} );
 
-	const currency = getCurrencyFromPriceResponse( results.price_range );
+	const currency = getCurrencyFromPriceResponse(
+		objectHasProp( results, 'price_range' )
+			? ( results.price_range as CurrencyResponse )
+			: undefined
+	);
 
 	const [ minPriceQuery, setMinPriceQuery ] = useQueryStateByKey(
 		'min_price',
@@ -116,12 +135,18 @@ const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
 	);
 
 	const { minConstraint, maxConstraint } = usePriceConstraints( {
-		minPrice: results.price_range
-			? results.price_range.min_price
-			: undefined,
-		maxPrice: results.price_range
-			? results.price_range.max_price
-			: undefined,
+		minPrice:
+			objectHasProp( results, 'price_range' ) &&
+			objectHasProp( results.price_range, 'min_price' ) &&
+			isString( results.price_range.min_price )
+				? results.price_range.min_price
+				: undefined,
+		maxPrice:
+			objectHasProp( results, 'price_range' ) &&
+			objectHasProp( results.price_range, 'max_price' ) &&
+			isString( results.price_range.max_price )
+				? results.price_range.max_price
+				: undefined,
 		minorUnit: currency.minorUnit,
 	} );
 
@@ -290,7 +315,7 @@ const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
 		return null;
 	}
 
-	const TagName = `h${ attributes.headingLevel }`;
+	const TagName = `h${ attributes.headingLevel }` as keyof JSX.IntrinsicElements;
 
 	return (
 		<>
diff --git a/assets/js/blocks/price-filter/constants.ts b/assets/js/blocks/price-filter/constants.ts
diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx
@@ -8,6 +8,7 @@ import { blocksConfig } from '@woocommerce/block-settings';
 import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar';
 import BlockTitle from '@woocommerce/editor-components/block-title';
 import { Icon, currencyDollar, external } from '@wordpress/icons';
+import type { BlockEditProps } from '@wordpress/blocks';
 import {
 	Placeholder,
 	Disabled,
@@ -23,10 +24,14 @@ import {
 /**
  * Internal dependencies
  */
-import Block from './block.js';
+import Block from './block';
 import './editor.scss';
+import type { Attributes } from './types';
 
-export default function ( { attributes, setAttributes } ) {
+export default function ( {
+	attributes,
+	setAttributes,
+}: BlockEditProps< Attributes > ) {
 	const {
 		heading,
 		headingLevel,
@@ -51,7 +56,7 @@ export default function ( { attributes, setAttributes } ) {
 							'woo-gutenberg-products-block'
 						) }
 						value={ showInputFields ? 'editable' : 'text' }
-						onChange={ ( value ) =>
+						onChange={ ( value: string ) =>
 							setAttributes( {
 								showInputFields: value === 'editable',
 							} )
@@ -106,7 +111,7 @@ export default function ( { attributes, setAttributes } ) {
 						minLevel={ 2 }
 						maxLevel={ 7 }
 						selectedLevel={ headingLevel }
-						onChange={ ( newLevel ) =>
+						onChange={ ( newLevel: number ) =>
 							setAttributes( { headingLevel: newLevel } )
 						}
 					/>
@@ -164,7 +169,7 @@ export default function ( { attributes, setAttributes } ) {
 						className="wc-block-price-filter__title"
 						headingLevel={ headingLevel }
 						heading={ heading }
-						onChange={ ( value ) =>
+						onChange={ ( value: string ) =>
 							setAttributes( { heading: value } )
 						}
 					/>
diff --git a/assets/js/blocks/price-filter/frontend.ts b/assets/js/blocks/price-filter/frontend.ts
@@ -6,13 +6,19 @@ import { renderFrontend } from '@woocommerce/base-utils';
 /**
  * Internal dependencies
  */
-import Block from './block.js';
+import Block from './block';
+import metadata from './block.json';
+import { blockAttributes } from './attributes';
 
-const getProps = ( el ) => {
+const getProps = ( el: HTMLElement ) => {
 	return {
 		attributes: {
 			showInputFields: el.dataset.showinputfields === 'true',
 			showFilterButton: el.dataset.showfilterbutton === 'true',
+			heading: el.dataset.heading || blockAttributes.heading.default,
+			headingLevel: el.dataset.headingLevel
+				? parseInt( el.dataset.headingLevel, 10 )
+				: metadata.attributes.headingLevel.default,
 		},
 		isEditor: false,
 	};
diff --git a/assets/js/blocks/price-filter/index.tsx b/assets/js/blocks/price-filter/index.tsx
@@ -11,8 +11,9 @@ import { useBlockProps } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import edit from './edit.js';
+import edit from './edit';
 import metadata from './block.json';
+import { blockAttributes } from './attributes';
 
 registerBlockType( metadata, {
 	title: __( 'Filter Products by Price', 'woo-gutenberg-products-block' ),
@@ -40,10 +41,7 @@ registerBlockType( metadata, {
 	},
 	attributes: {
 		...metadata.attributes,
-		heading: {
-			type: 'string',
-			default: __( 'Filter by price', 'woo-gutenberg-products-block' ),
-		},
+		...blockAttributes,
 	},
 	transforms: {
 		from: [
diff --git a/assets/js/blocks/price-filter/types.ts b/assets/js/blocks/price-filter/types.ts
@@ -0,0 +1,7 @@
+export interface Attributes {
+	showFilterButton: boolean;
+	showInputFields: boolean;
+	heading: string;
+	headingLevel: number;
+	className?: string;
+}
diff --git a/assets/js/blocks/price-filter/use-price-constraints.js b/assets/js/blocks/price-filter/use-price-constraints.js
diff --git a/assets/js/blocks/price-filter/use-price-constraints.ts b/assets/js/blocks/price-filter/use-price-constraints.ts
@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import { usePrevious } from '@woocommerce/base-hooks';
+
+/**
+ * Internal dependencies
+ */
+import { ROUND_UP, ROUND_DOWN } from './constants';
+
+/**
+ * Return the price constraint.
+ *
+ * @param {string}              price     Price in minor unit, e.g. cents.
+ * @param {number}              minorUnit Price minor unit (number of digits after the decimal separator).
+ * @param {ROUND_UP|ROUND_DOWN} direction Rounding flag whether we round up or down.
+ */
+export const usePriceConstraint = (
+	price: string,
+	minorUnit: number,
+	direction: string
+) => {
+	const step = 10 * 10 ** minorUnit;
+	let currentConstraint = null;
+	const parsedPrice = parseFloat( price );
+
+	if ( ! isNaN( parsedPrice ) ) {
+		if ( direction === ROUND_UP ) {
+			currentConstraint = Math.ceil( parsedPrice / step ) * step;
+		} else if ( direction === ROUND_DOWN ) {
+			currentConstraint = Math.floor( parsedPrice / step ) * step;
+		}
+	}
+
+	const previousConstraint = usePrevious(
+		currentConstraint,
+		Number.isFinite
+	);
+	return Number.isFinite( currentConstraint )
+		? currentConstraint
+		: previousConstraint;
+};
+
+/**
+ * Return the min and max price constraints.
+ *
+ * @param {Object}           priceData           Price data object.
+ * @param {string|undefined} priceData.minPrice  Min price in minor unit, e.g. cents.
+ * @param {string|undefined} priceData.maxPrice  Max price in minor unit, e.g. cents.
+ * @param {number}           priceData.minorUnit Price minor unit (number of digits after the decimal separator).
+ */
+export default ( {
+	minPrice,
+	maxPrice,
+	minorUnit,
+}: {
+	minPrice: string | undefined;
+	maxPrice: string | undefined;
+	minorUnit: number;
+} ) => {
+	return {
+		minConstraint: usePriceConstraint(
+			minPrice || '',
+			minorUnit,
+			ROUND_DOWN
+		),
+		maxConstraint: usePriceConstraint(
+			maxPrice || '',
+			minorUnit,
+			ROUND_UP
+		),
+	};
+};
diff --git a/packages/prices/utils/price.ts b/packages/prices/utils/price.ts
