Fix: Convert Active Filters Block codebase to TypeScript (#6580)

Author: dinhtungdu

assets/js/base/components/chip/chip.tsx

@@ -12,7 +12,7 @@ export interface ChipProps {
 	/**
 	 * Text for chip content.
 	 */
-	text: string;
+	text: string | JSX.Element;
 	/**
 	 * Screenreader text for the content.
 	 */

…tive-filters/active-attribute-filters.js …ive-filters/active-attribute-filters.tsxassets/js/blocks/active-filters/active-attribute-filters.js renamed to assets/js/blocks/active-filters/active-attribute-filters.tsx assets/js/blocks/active-filters/active-attribute-filters.js renamed to assets/js/blocks/active-filters/active-attribute-filters.tsx

@@ -8,14 +8,26 @@ import {
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { getSettingWithCoercion } from '@woocommerce/settings';
-import { isBoolean } from '@woocommerce/types';
+import {
+	AttributeObject,
+	isAttributeQueryCollection,
+	isAttributeTermCollection,
+	isBoolean,
+} from '@woocommerce/types';
 
 /**
  * Internal dependencies
  */
 import { renderRemovableListItem, removeArgsFromFilterUrl } from './utils';
 import { removeAttributeFilterBySlug } from '../../utils/attributes-query';
 
+interface ActiveAttributeFiltersProps {
+	displayStyle: string;
+	operator: 'and' | 'in';
+	slugs: string[];
+	attributeObject: AttributeObject;
+}
+
 /**
  * Component that renders active attribute (terms) filters.
  *
@@ -26,11 +38,11 @@ import { removeAttributeFilterBySlug } from '../../utils/attributes-query';
  * @param {string} props.displayStyle    The style used for displaying the filters.
  */
 const ActiveAttributeFilters = ( {
-	attributeObject = {},
+	attributeObject,
 	slugs = [],
 	operator = 'in',
 	displayStyle,
-} ) => {
+}: ActiveAttributeFiltersProps ) => {
 	const { results, isLoading } = useCollection( {
 		namespace: '/wc/store/v1',
 		resourceName: 'products/attributes/terms',
@@ -42,7 +54,12 @@ const ActiveAttributeFilters = ( {
 		[]
 	);
 
-	if ( isLoading ) {
+	if (
+		isLoading ||
+		! Array.isArray( results ) ||
+		! isAttributeTermCollection( results ) ||
+		! isAttributeQueryCollection( productAttributes )
+	) {
 		return null;
 	}
 
@@ -69,7 +86,7 @@ const ActiveAttributeFilters = ( {
 						return null;
 					}
 
-					let prefix = '';
+					let prefix: string | JSX.Element = '';
 
 					if ( index > 0 && operator === 'and' ) {
 						prefix = (
@@ -92,7 +109,7 @@ const ActiveAttributeFilters = ( {
 								);
 
 								// If only one attribute was selected, we remove both filter and query type from the URL.
-								if ( currentAttribute.slug.length === 1 ) {
+								if ( currentAttribute?.slug.length === 1 ) {
 									return removeArgsFromFilterUrl(
 										`query_type_${ attributeObject.name }`,
 										`filter_${ attributeObject.name }`

assets/js/blocks/active-filters/attributes.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const blockAttributes = {
+	heading: {
+		type: 'string',
+		default: __( 'Active filters', 'woo-gutenberg-products-block' ),
+	},
+};

assets/js/blocks/active-filters/block.js assets/js/blocks/active-filters/block.tsxassets/js/blocks/active-filters/block.js renamed to assets/js/blocks/active-filters/block.tsx

@@ -8,7 +8,13 @@ import { useMemo, useEffect } from '@wordpress/element';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import Label from '@woocommerce/base-components/label';
-import { isBoolean } from '@woocommerce/types';
+import {
+	isAttributeQueryCollection,
+	isBoolean,
+	isRatingQueryCollection,
+	isStockStatusQueryCollection,
+	isStockStatusOptions,
+} from '@woocommerce/types';
 import { getUrlParameter } from '@woocommerce/utils';
 
 /**
@@ -23,6 +29,7 @@ import {
 	cleanFilterUrl,
 } from './utils';
 import ActiveAttributeFilters from './active-attribute-filters';
+import { Attributes } from './types';
 
 /**
  * Component displaying active filters.
@@ -34,6 +41,9 @@ import ActiveAttributeFilters from './active-attribute-filters';
 const ActiveFiltersBlock = ( {
 	attributes: blockAttributes,
 	isEditor = false,
+}: {
+	attributes: Attributes;
+	isEditor?: boolean;
 } ) => {
 	const filteringForPhpTemplate = getSettingWithCoercion(
 		'is_rendering_php_template',
@@ -53,28 +63,34 @@ const ActiveFiltersBlock = ( {
 
 	const STOCK_STATUS_OPTIONS = getSetting( 'stockStatusOptions', [] );
 	const activeStockStatusFilters = useMemo( () => {
-		if ( productStockStatus.length > 0 ) {
-			return productStockStatus.map( ( slug ) => {
-				return renderRemovableListItem( {
-					type: __( 'Stock Status', 'woo-gutenberg-products-block' ),
-					name: STOCK_STATUS_OPTIONS[ slug ],
-					removeCallback: () => {
-						if ( filteringForPhpTemplate ) {
-							return removeArgsFromFilterUrl( {
-								filter_stock_status: slug,
-							} );
+		if (
+			productStockStatus.length === 0 ||
+			! isStockStatusQueryCollection( productStockStatus ) ||
+			! isStockStatusOptions( STOCK_STATUS_OPTIONS )
+		) {
+			return null;
+		}
+
+		return productStockStatus.map( ( slug ) => {
+			return renderRemovableListItem( {
+				type: __( 'Stock Status', 'woo-gutenberg-products-block' ),
+				name: STOCK_STATUS_OPTIONS[ slug ],
+				removeCallback: () => {
+					if ( filteringForPhpTemplate ) {
+						return removeArgsFromFilterUrl( {
+							filter_stock_status: slug,
+						} );
+					}
+					const newStatuses = productStockStatus.filter(
+						( status ) => {
+							return status !== slug;
 						}
-						const newStatuses = productStockStatus.filter(
-							( status ) => {
-								return status !== slug;
-							}
-						);
-						setProductStockStatus( newStatuses );
-					},
-					displayStyle: blockAttributes.displayStyle,
-				} );
+					);
+					setProductStockStatus( newStatuses );
+				},
+				displayStyle: blockAttributes.displayStyle,
 			} );
-		}
+		} );
 	}, [
 		STOCK_STATUS_OPTIONS,
 		productStockStatus,
@@ -109,10 +125,19 @@ const ActiveFiltersBlock = ( {
 	] );
 
 	const activeAttributeFilters = useMemo( () => {
+		if ( ! isAttributeQueryCollection( productAttributes ) ) {
+			return null;
+		}
+
 		return productAttributes.map( ( attribute ) => {
 			const attributeObject = getAttributeFromTaxonomy(
 				attribute.attribute
 			);
+
+			if ( ! attributeObject ) {
+				return null;
+			}
+
 			return (
 				<ActiveAttributeFilters
 					attributeObject={ attributeObject }
@@ -151,35 +176,35 @@ const ActiveFiltersBlock = ( {
 	}, [ filteringForPhpTemplate, productRatings, setProductRatings ] );
 
 	const activeRatingFilters = useMemo( () => {
-		if ( productRatings.length > 0 ) {
-			return productRatings.map( ( slug ) => {
-				return renderRemovableListItem( {
-					type: __( 'Rating', 'woo-gutenberg-products-block' ),
-					name: sprintf(
-						/* translators: %s is referring to the average rating value */
-						__(
-							'Rated %s out of 5',
-							'woo-gutenberg-products-block'
-						),
-						slug
-					),
-					removeCallback: () => {
-						if ( filteringForPhpTemplate ) {
-							return removeArgsFromFilterUrl( {
-								rating_filter: slug,
-							} );
-						}
-						const newRatings = productRatings.filter(
-							( rating ) => {
-								return rating !== slug;
-							}
-						);
-						setProductRatings( newRatings );
-					},
-					displayStyle: blockAttributes.displayStyle,
-				} );
-			} );
+		if (
+			productRatings.length === 0 ||
+			! isRatingQueryCollection( productRatings )
+		) {
+			return null;
 		}
+
+		return productRatings.map( ( slug ) => {
+			return renderRemovableListItem( {
+				type: __( 'Rating', 'woo-gutenberg-products-block' ),
+				name: sprintf(
+					/* translators: %s is referring to the average rating value */
+					__( 'Rated %s out of 5', 'woo-gutenberg-products-block' ),
+					slug
+				),
+				removeCallback: () => {
+					if ( filteringForPhpTemplate ) {
+						return removeArgsFromFilterUrl( {
+							rating_filter: slug,
+						} );
+					}
+					const newRatings = productRatings.filter( ( rating ) => {
+						return rating !== slug;
+					} );
+					setProductRatings( newRatings );
+				},
+				displayStyle: blockAttributes.displayStyle,
+			} );
+		} );
 	}, [
 		productRatings,
 		setProductRatings,
@@ -201,7 +226,8 @@ const ActiveFiltersBlock = ( {
 		return null;
 	}
 
-	const TagName = `h${ blockAttributes.headingLevel }`;
+	const TagName =
+		`h${ blockAttributes.headingLevel }` as keyof JSX.IntrinsicElements;
 	const hasFilterableProducts = getSettingWithCoercion(
 		'has_filterable_products',
 		false,

assets/js/blocks/active-filters/edit.js assets/js/blocks/active-filters/edit.tsxassets/js/blocks/active-filters/edit.js renamed to assets/js/blocks/active-filters/edit.tsx

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar';
 import BlockTitle from '@woocommerce/editor-components/block-title';
+import type { BlockEditProps } from '@wordpress/blocks';
 import {
 	Disabled,
 	PanelBody,
@@ -18,9 +19,13 @@ import {
 /**
  * Internal dependencies
  */
-import Block from './block.js';
+import Block from './block';
+import type { Attributes } from './types';
 
-const Edit = ( { attributes, setAttributes } ) => {
+const Edit = ( {
+	attributes,
+	setAttributes,
+}: BlockEditProps< Attributes > ) => {
 	const { className, displayStyle, heading, headingLevel } = attributes;
 
 	const blockProps = useBlockProps( {
@@ -42,7 +47,7 @@ const Edit = ( { attributes, setAttributes } ) => {
 							'woo-gutenberg-products-block'
 						) }
 						value={ displayStyle }
-						onChange={ ( value ) =>
+						onChange={ ( value: Attributes[ 'displayStyle' ] ) =>
 							setAttributes( {
 								displayStyle: value,
 							} )
@@ -74,7 +79,7 @@ const Edit = ( { attributes, setAttributes } ) => {
 						minLevel={ 2 }
 						maxLevel={ 7 }
 						selectedLevel={ headingLevel }
-						onChange={ ( newLevel ) =>
+						onChange={ ( newLevel: Attributes[ 'headingLevel' ] ) =>
 							setAttributes( { headingLevel: newLevel } )
 						}
 					/>
@@ -90,7 +95,9 @@ const Edit = ( { attributes, setAttributes } ) => {
 				className="wc-block-active-filters__title"
 				headingLevel={ headingLevel }
 				heading={ heading }
-				onChange={ ( value ) => setAttributes( { heading: value } ) }
+				onChange={ ( value: Attributes[ 'heading' ] ) =>
+					setAttributes( { heading: value } )
+				}
 			/>
 			<Disabled>
 				<Block attributes={ attributes } isEditor={ true } />

assets/js/blocks/active-filters/frontend.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { renderFrontend } from '@woocommerce/base-utils';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import metadata from './block.json';
+import { blockAttributes } from './attributes';
+
+const getProps = ( el: HTMLElement ) => {
+	return {
+		attributes: {
+			displayStyle:
+				el.dataset.displayStyle ||
+				metadata.attributes.displayStyle.default,
+			heading: el.dataset.heading || blockAttributes.heading.default,
+			headingLevel: el.dataset.headingLevel
+				? parseInt( el.dataset.headingLevel, 10 )
+				: metadata.attributes.headingLevel.default,
+		},
+		isEditor: false,
+	};
+};
+
+renderFrontend( {
+	selector: '.wp-block-woocommerce-active-filters',
+	Block,
+	getProps,
+} );