Fix: Convert Filter Products by Attribute Block to TypeScript (#6545)

* wip: convert attribute filter to ts

* change query to optional

* update SearchListControlProps and SearchListItemType

* get default attribute from metadata

* update types

* convert attributes utils to ts

* convert attribute query utils to ts

* fix type error, remove type casting

* revert type change for SearchListItemType

* apply new format

Author: dinhtungdu

assets/js/base/context/hooks/collections/use-collection-data.ts

@@ -5,6 +5,7 @@ import { useState, useEffect, useMemo } from '@wordpress/element';
 import { useDebounce } from 'use-debounce';
 import { sortBy } from 'lodash';
 import { useShallowEqual } from '@woocommerce/base-hooks';
+import { objectHasProp } from '@woocommerce/types';
 
 /**
  * Internal dependencies
@@ -78,6 +79,7 @@ export const useCollectionData = ( {
 			const foundAttribute = calculateAttributesQueryState.find(
 				( attribute ) => {
 					return (
+						objectHasProp( currentQueryAttribute, 'taxonomy' ) &&
 						attribute.taxonomy === currentQueryAttribute.taxonomy
 					);
 				}

assets/js/base/context/hooks/collections/use-collection.ts

@@ -44,7 +44,7 @@ export interface useCollectionOptions {
 	namespace: string;
 	resourceName: string;
 	resourceValues?: number[];
-	query: Record< string, unknown >;
+	query?: Record< string, unknown >;
 	shouldSelect?: boolean;
 }
 

assets/js/blocks/attribute-filter/attributes.ts

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

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

@@ -18,6 +18,10 @@
 		}
 	},
 	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		},
 		"attributeId": {
 			"type": "number",
 			"default": 0

…sets/js/blocks/attribute-filter/block.js …ets/js/blocks/attribute-filter/block.tsxassets/js/blocks/attribute-filter/block.js renamed to assets/js/blocks/attribute-filter/block.tsx assets/js/blocks/attribute-filter/block.js renamed to assets/js/blocks/attribute-filter/block.tsx

@@ -21,7 +21,12 @@ import { Notice } from '@wordpress/components';
 import classNames from 'classnames';
 import { getSettingWithCoercion } from '@woocommerce/settings';
 import { getQueryArgs, removeQueryArgs } from '@wordpress/url';
-import { isBoolean, isString } from '@woocommerce/types';
+import {
+	AttributeQuery,
+	isBoolean,
+	isString,
+	objectHasProp,
+} from '@woocommerce/types';
 import {
 	PREFIX_QUERY_ARG_FILTER_TYPE,
 	PREFIX_QUERY_ARG_QUERY_TYPE,
@@ -42,6 +47,7 @@ import {
 	isQueryArgsEqual,
 	parseTaxonomyToGenerateURL,
 } from './utils';
+import { BlockAttributes, DisplayOption } from './types';
 
 /**
  * Formats filter values into a string for the URL parameters needed for filtering PHP templates.
@@ -62,6 +68,9 @@ import {
 const AttributeFilterBlock = ( {
 	attributes: blockAttributes,
 	isEditor = false,
+}: {
+	attributes: BlockAttributes;
+	isEditor?: boolean;
 } ) => {
 	const hasFilterableProducts = getSettingWithCoercion(
 		'has_filterable_products',
@@ -93,7 +102,9 @@ const AttributeFilterBlock = ( {
 		getActiveFilters( filteringForPhpTemplate, attributeObject )
 	);
 
-	const [ displayedOptions, setDisplayedOptions ] = useState(
+	const [ displayedOptions, setDisplayedOptions ] = useState<
+		DisplayOption[]
+	>(
 		blockAttributes.isPreview && ! blockAttributes.attributeId
 			? previewOptions
 			: []
@@ -119,7 +130,7 @@ const AttributeFilterBlock = ( {
 	const { results: filteredCounts, isLoading: filteredCountsLoading } =
 		useCollectionData( {
 			queryAttribute: {
-				taxonomy: attributeObject?.taxonomy,
+				taxonomy: attributeObject?.taxonomy || '',
 				queryType: blockAttributes.queryType,
 			},
 			queryState: {
@@ -133,7 +144,10 @@ const AttributeFilterBlock = ( {
 	 */
 	const getFilteredTerm = useCallback(
 		( id ) => {
-			if ( ! filteredCounts.attribute_counts ) {
+			if (
+				! objectHasProp( filteredCounts, 'attribute_counts' ) ||
+				! Array.isArray( filteredCounts.attribute_counts )
+			) {
 				return null;
 			}
 			return filteredCounts.attribute_counts.find(
@@ -152,13 +166,13 @@ const AttributeFilterBlock = ( {
 		 *
 		 * @param {string} termSlug The term of the slug to check.
 		 */
-		const isTermInQueryState = ( termSlug ) => {
+		const isTermInQueryState = ( termSlug: string ) => {
 			if ( ! queryState?.attributes ) {
 				return false;
 			}
 			return queryState.attributes.some(
-				( { attribute, slug = [] } ) =>
-					attribute === attributeObject.taxonomy &&
+				( { attribute, slug = [] }: AttributeQuery ) =>
+					attribute === attributeObject?.taxonomy &&
 					slug.includes( termSlug )
 			);
 		};
@@ -167,6 +181,10 @@ const AttributeFilterBlock = ( {
 			return;
 		}
 
+		if ( ! Array.isArray( attributeTerms ) ) {
+			return;
+		}
+
 		const newOptions = attributeTerms
 			.map( ( term ) => {
 				const filteredTerm = getFilteredTerm( term.id );
@@ -193,7 +211,7 @@ const AttributeFilterBlock = ( {
 					),
 				};
 			} )
-			.filter( Boolean );
+			.filter( ( option ): option is DisplayOption => !! option );
 
 		setDisplayedOptions( newOptions );
 	}, [
@@ -212,6 +230,9 @@ const AttributeFilterBlock = ( {
 	 */
 	const getSelectedTerms = useCallback(
 		( newChecked ) => {
+			if ( ! Array.isArray( attributeTerms ) ) {
+				return [];
+			}
 			return attributeTerms.reduce( ( acc, term ) => {
 				if ( newChecked.includes( term.slug ) ) {
 					acc.push( term );
@@ -231,12 +252,15 @@ const AttributeFilterBlock = ( {
 	const redirectPageForPhpTemplate = useCallback(
 		( query, allFiltersRemoved = false ) => {
 			if ( allFiltersRemoved ) {
+				if ( ! attributeObject?.taxonomy ) {
+					return;
+				}
 				const currentQueryArgKeys = Object.keys(
 					getQueryArgs( window.location.href )
 				);
 
 				const parsedTaxonomy = parseTaxonomyToGenerateURL(
-					attributeObject?.taxonomy
+					attributeObject.taxonomy
 				);
 
 				const url = currentQueryArgKeys.reduce(
@@ -267,7 +291,7 @@ const AttributeFilterBlock = ( {
 		[ pageUrl, attributeObject?.taxonomy ]
 	);
 
-	const onSubmit = ( checkedFilters ) => {
+	const onSubmit = ( checkedFilters: string[] ) => {
 		const query = updateAttributeFilter(
 			productAttributesQuery,
 			setProductAttributesQuery,
@@ -283,7 +307,7 @@ const AttributeFilterBlock = ( {
 	};
 
 	const updateCheckedFilters = useCallback(
-		( checkedFilters ) => {
+		( checkedFilters: string[] ) => {
 			if ( isEditor ) {
 				return;
 			}
@@ -324,6 +348,7 @@ const AttributeFilterBlock = ( {
 	// Track ATTRIBUTES QUERY changes so the block reflects current filters.
 	useEffect( () => {
 		if (
+			previousCheckedQuery &&
 			! isShallowEqual( previousCheckedQuery, currentCheckedQuery ) && // checked query changed
 			! isShallowEqual( checked, currentCheckedQuery ) // checked query doesn't match the UI
 		) {
@@ -345,15 +370,23 @@ const AttributeFilterBlock = ( {
 	 */
 	const onChange = useCallback(
 		( checkedValue ) => {
-			const getFilterNameFromValue = ( filterValue ) => {
-				const { name } = displayedOptions.find(
+			const getFilterNameFromValue = ( filterValue: string ) => {
+				const result = displayedOptions.find(
 					( option ) => option.value === filterValue
 				);
 
-				return name;
+				if ( result ) {
+					return result.name;
+				}
 			};
 
-			const announceFilterChange = ( { filterAdded, filterRemoved } ) => {
+			const announceFilterChange = ( {
+				filterAdded,
+				filterRemoved,
+			}: {
+				filterAdded?: string | null;
+				filterRemoved?: string | null;
+			} ) => {
 				const filterAddedName = filterAdded
 					? getFilterNameFromValue( filterAdded )
 					: null;
@@ -526,7 +559,8 @@ const AttributeFilterBlock = ( {
 		return null;
 	}
 
-	const TagName = `h${ blockAttributes.headingLevel }`;
+	const TagName =
+		`h${ blockAttributes.headingLevel }` as keyof JSX.IntrinsicElements;
 	const isLoading = ! blockAttributes.isPreview && attributeTermsLoading;
 	const isDisabled = ! blockAttributes.isPreview && filteredCountsLoading;