TS error fixes

Author: hritikchaudhary

assets/js/blocks/reviews/reviews-by-product/block.tsx

@@ -23,7 +23,7 @@ import {
 	getSharedReviewContentControls,
 	getSharedReviewListControls,
 } from '../edit-utils.js';
-import { ReviewsByProductEditorProps } from './types';
+import type { ReviewsByProductEditorProps, SearchListItemProps } from './types';
 
 const ReviewsByProductEditor = ( {
 	attributes,
@@ -32,9 +32,7 @@ const ReviewsByProductEditor = ( {
 }: ReviewsByProductEditorProps ) => {
 	const { editMode, productId } = attributes;
 
-	const renderProductControlItem = ( args ) => {
-		const { item = 0 } = args;
-
+	const renderProductControlItem = ( args: SearchListItemProps ) => {
 		return (
 			<SearchListItem
 				{ ...args }
@@ -43,21 +41,21 @@ const ReviewsByProductEditor = ( {
 					_n(
 						'%d review',
 						'%d reviews',
-						item.review_count,
+						args.reviewCount,
 						'woo-gutenberg-products-block'
 					),
-					item.review_count
+					args.reviewCount
 				) }
 				aria-label={ sprintf(
 					/* translators: %1$s is the item name, and %2$d is the number of reviews for the item. */
 					_n(
 						'%1$s, has %2$d review',
 						'%1$s, has %2$d reviews',
-						item.review_count,
+						args.reviewCount,
 						'woo-gutenberg-products-block'
 					),
-					item.name,
-					item.review_count
+					args.name,
+					args.reviewCount
 				) }
 			/>
 		);

assets/js/blocks/reviews/reviews-by-product/edit.tsx

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import type { ReviewsByProductEditorProps } from './types';
+
+export const Edit = (
+	props: unknown & ReviewsByProductEditorProps
+): JSX.Element => {
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<Block { ...props } />
+		</div>
+	);
+};

assets/js/blocks/reviews/reviews-by-product/index.tsx

@@ -8,7 +8,7 @@ import { Icon, commentContent } from '@wordpress/icons';
  * Internal dependencies
  */
 import '../editor.scss';
-import Editor from './edit';
+import { Edit } from './edit';
 import sharedAttributes from '../attributes';
 import save from '../save.js';
 import { example } from '../example';
@@ -64,9 +64,7 @@ registerBlockType( 'woocommerce/reviews-by-product', {
 	 *
 	 * @param {Object} props Props to pass to block.
 	 */
-	edit( props ) {
-		return <Editor { ...props } />;
-	},
+	edit: Edit,
 
 	/**
 	 * Save the props to post content.

assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.tsx

@@ -3,13 +3,21 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, Spinner } from '@wordpress/components';
-import PropTypes from 'prop-types';
 import ErrorPlaceholder from '@woocommerce/editor-components/error-placeholder';
 import { Icon, commentContent } from '@wordpress/icons';
 import { withProduct } from '@woocommerce/block-hocs';
 import { decodeEntities } from '@wordpress/html-entities';
+/**
+ * Internal dependencies
+ */
+import type { NoReviewsPlaceholderProps } from './types';
 
-const NoReviewsPlaceholder = ( { error, getProduct, isLoading, product } ) => {
+const NoReviewsPlaceholder = ( {
+	error,
+	getProduct,
+	isLoading,
+	product,
+}: NoReviewsPlaceholderProps ) => {
 	const renderApiError = () => (
 		<ErrorPlaceholder
 			className="wc-block-featured-product-error"
@@ -53,14 +61,4 @@ const NoReviewsPlaceholder = ( { error, getProduct, isLoading, product } ) => {
 	);
 };
 
-NoReviewsPlaceholder.propTypes = {
-	// from withProduct
-	error: PropTypes.object,
-	isLoading: PropTypes.bool,
-	product: PropTypes.shape( {
-		name: PropTypes.node,
-		review_count: PropTypes.number,
-	} ),
-};
-
 export default withProduct( NoReviewsPlaceholder );

assets/js/blocks/reviews/reviews-by-product/types.ts

@@ -1,6 +1,8 @@
 /**
  * External dependencies
  */
+import { ErrorObject } from '@woocommerce/editor-components/error-placeholder';
+import { renderItemArgs } from '@woocommerce/editor-components/search-list-control/types';
 import { BlockEditProps } from '@wordpress/blocks';
 
 interface ReviewByProductAttributes {
@@ -13,3 +15,17 @@ export interface ReviewsByProductEditorProps
 	attributes: ReviewByProductAttributes;
 	debouncedSpeak: ( message: string ) => void;
 }
+
+export interface NoReviewsPlaceholderProps {
+	error: ErrorObject;
+	getProduct: () => void;
+	isLoading: boolean;
+	product?: {
+		name: string;
+	};
+}
+
+export interface SearchListItemProps extends renderItemArgs {
+	name: string;
+	reviewCount: number;
+}