Test #9692

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

@@ -10,39 +10,33 @@ import {
 	withSpokenMessages,
 } from '@wordpress/components';
 import { SearchListItem } from '@woocommerce/editor-components/search-list-control';
-import PropTypes from 'prop-types';
 import ProductControl from '@woocommerce/editor-components/product-control';
 import { Icon, commentContent } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import EditorContainerBlock from '../editor-container-block.js';
-import NoReviewsPlaceholder from './no-reviews-placeholder.js';
 import {
 	getBlockControls,
 	getSharedReviewContentControls,
 	getSharedReviewListControls,
 } from '../edit-utils.js';
+import type { ReviewsByProductEditorProps, SearchListItemProps } from './types';
+import NoReviewsPlaceholder from './no-reviews-placeholder';
 
 /**
  * Component to handle edit mode of "Reviews by Product".
  *
- * @param {Object}            props                Incoming props for the component.
- * @param {Object}            props.attributes     Incoming block attributes.
- * @param {function(any):any} props.debouncedSpeak
- * @param {function(any):any} props.setAttributes  Setter for block attributes.
  */
 const ReviewsByProductEditor = ( {
 	attributes,
 	debouncedSpeak,
 	setAttributes,
-} ) => {
+}: ReviewsByProductEditorProps ) => {
 	const { editMode, productId } = attributes;
 
-	const renderProductControlItem = ( args ) => {
-		const { item = 0 } = args;
-
+	const renderProductControlItem = ( args: SearchListItemProps ) => {
 		return (
 			<SearchListItem
 				{ ...args }
@@ -51,21 +45,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
 				) }
 			/>
 		);
@@ -189,21 +183,4 @@ const ReviewsByProductEditor = ( {
 	);
 };
 
-ReviewsByProductEditor.propTypes = {
-	/**
-	 * The attributes for this block.
-	 */
-	attributes: PropTypes.object.isRequired,
-	/**
-	 * The register block name.
-	 */
-	name: PropTypes.string.isRequired,
-	/**
-	 * A callback to update attributes.
-	 */
-	setAttributes: PropTypes.func.isRequired,
-	// from withSpokenMessages
-	debouncedSpeak: PropTypes.func.isRequired,
-};
-
 export default withSpokenMessages( ReviewsByProductEditor );

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.js → 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.js → 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

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { ErrorObject } from '@woocommerce/editor-components/error-placeholder';
+import { renderItemArgs } from '@woocommerce/editor-components/search-list-control/types';
+
+export interface ReviewsByProductEditorProps {
+	attributes: {
+		editMode: boolean;
+		categoryIds: number[];
+		showProductName: boolean;
+		productId: number[];
+	};
+	setAttributes: ( attributes: {
+		editMode?: boolean;
+		categoryIds?: number[];
+		showProductName?: boolean;
+		productId?: number[];
+	} ) => void;
+	debouncedSpeak: ( message: string ) => void;
+}
+
+export interface SearchListItemProps extends renderItemArgs {
+	name: string;
+	reviewCount: number;
+}
+
+export interface NoReviewsPlaceholderProps {
+	error: ErrorObject;
+	getProduct: () => void;
+	isLoading: boolean;
+	product?: {
+		name: string;
+	};
+}

checkstyle.xml

@@ -3643,13 +3643,13 @@
         Type '{ type: string; default: boolean; }' is not assignable to type 'BlockAttribute<unknown>'." source="TS2769" />
 <error line="77" column="11" severity="error" message="Type &apos;{ constructor: Function; toString(): string; toLocaleString(): string; valueOf(): Object; hasOwnProperty(v: PropertyKey): boolean; isPrototypeOf(v: Object): boolean; propertyIsEnumerable(v: PropertyKey): boolean; }&apos; is missing the following properties from type &apos;Omit&lt;{ attributes: Object; debouncedSpeak: (arg0: any) =&gt; any; setAttributes: (arg0: any) =&gt; any; }, &quot;speak&quot; | &quot;debouncedSpeak&quot;&gt;&apos;: attributes, setAttributes" source="TS2739" />
 </file>
-<file name="assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.js">
+<file name="assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.tsx">
 <error line="11" column="34" severity="error" message="Binding element &apos;error&apos; implicitly has an &apos;any&apos; type." source="TS7031" />
 <error line="11" column="41" severity="error" message="Binding element &apos;getProduct&apos; implicitly has an &apos;any&apos; type." source="TS7031" />
 <error line="11" column="53" severity="error" message="Binding element &apos;isLoading&apos; implicitly has an &apos;any&apos; type." source="TS7031" />
 <error line="11" column="64" severity="error" message="Binding element &apos;product&apos; implicitly has an &apos;any&apos; type." source="TS7031" />
 </file>
-<file name="assets/js/blocks/reviews/reviews-by-product/edit.js">
+<file name="assets/js/blocks/reviews/reviews-by-product/edit.tsx">
 <error line="41" column="10" severity="error" message="Property &apos;editMode&apos; does not exist on type &apos;Object&apos;." source="TS2339" />
 <error line="41" column="20" severity="error" message="Property &apos;productId&apos; does not exist on type &apos;Object&apos;." source="TS2339" />
 <error line="43" column="37" severity="error" message="Parameter &apos;args&apos; implicitly has an &apos;any&apos; type." source="TS7006" />
@@ -3664,7 +3664,7 @@
 <error line="186" column="5" severity="error" message="Type &apos;ComponentType&lt;{ error: any; getProduct: any; isLoading: any; product: any; }&gt;&apos; is not assignable to type &apos;ReactElementLike&apos;.
   Type &apos;ComponentClass&lt;{ error: any; getProduct: any; isLoading: any; product: any; }, any&gt;&apos; is missing the following properties from type &apos;ReactElementLike&apos;: type, props, key" source="TS2322" />
 </file>
-<file name="assets/js/blocks/reviews/reviews-by-product/index.js">
+<file name="assets/js/blocks/reviews/reviews-by-product/index.tsx">
 <error line="19" column="1" severity="error" message="No overload matches this call.
   Overload 1 of 2, &apos;(metadata: BlockConfiguration&lt;{ productId: unknown; editMode: unknown; imageType: unknown; orderby: unknown; reviewsOnLoadMore: unknown; reviewsOnPageLoad: unknown; showLoadMore: unknown; showOrderby: unknown; showReviewDate: unknown; showReviewerName: unknown; showReviewImage: unknown; showReviewRating: unknown; showReviewContent: unknown; previewReviews: unknown; }&gt;, settings?: Partial&lt;...&gt; | undefined): Block&lt;...&gt; | undefined&apos;, gave the following error.
     Argument of type &apos;string&apos; is not assignable to parameter of type &apos;BlockConfiguration&lt;{ productId: unknown; editMode: unknown; imageType: unknown; orderby: unknown; reviewsOnLoadMore: unknown; reviewsOnPageLoad: unknown; showLoadMore: unknown; showOrderby: unknown; showReviewDate: unknown; showReviewerName: unknown; showReviewImage: unknown; showReviewRating: unknown; showReviewCon...&apos;.