Remove propTypes definitions from Reviews By Category (#9623)

* converted reviews-by-category block

* converted index.js to tsx

* fix imports

* removed unnecessary metadata

* added type explicitly

Author: hritikchaudhary

assets/js/blocks/reviews/reviews-by-category/edit.js renamed to assets/js/blocks/reviews/reviews-by-category/block.tsx

@@ -10,20 +10,20 @@ import {
 	ToggleControl,
 	withSpokenMessages,
 } from '@wordpress/components';
-import PropTypes from 'prop-types';
 import ProductCategoryControl from '@woocommerce/editor-components/product-category-control';
 import { Icon, commentContent } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import EditorContainerBlock from '../editor-container-block.js';
-import NoReviewsPlaceholder from './no-reviews-placeholder.js';
+import NoReviewsPlaceholder from './no-reviews-placeholder';
 import {
 	getBlockControls,
 	getSharedReviewContentControls,
 	getSharedReviewListControls,
 } from '../edit-utils.js';
+import type { ReviewsByCategoryEditorProps } from './types';
 
 /**
  * Component to handle edit mode of "Reviews by Category".
@@ -37,7 +37,7 @@ const ReviewsByCategoryEditor = ( {
 	attributes,
 	debouncedSpeak,
 	setAttributes,
-} ) => {
+}: ReviewsByCategoryEditorProps ) => {
 	const { editMode, categoryIds } = attributes;
 
 	const getInspectorControls = () => {
@@ -160,27 +160,10 @@ const ReviewsByCategoryEditor = ( {
 					'Reviews by Category',
 					'woo-gutenberg-products-block'
 				) }
-				noReviewsPlaceholder={ NoReviewsPlaceholder }
+				noReviewsPlaceholder={ NoReviewsPlaceholder() }
 			/>
 		</>
 	);
 };
 
-ReviewsByCategoryEditor.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( ReviewsByCategoryEditor );

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

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

assets/js/blocks/reviews/reviews-by-category/index.js renamed to assets/js/blocks/reviews/reviews-by-category/index.tsx

@@ -8,10 +8,10 @@ import { Icon, commentContent } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import Editor from './edit';
-import sharedAttributes from '../attributes';
+import { Edit } from './edit';
+import sharedAttributes from '../attributes.js';
 import save from '../save.js';
-import { example } from '../example';
+import { example } from '../example.js';
 
 /**
  * Register and run the "Reviews by category" block.
@@ -73,9 +73,7 @@ registerBlockType( 'woocommerce/reviews-by-category', {
 	 *
 	 * @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-category/no-reviews-placeholder.js renamed to assets/js/blocks/reviews/reviews-by-category/no-reviews-placeholder.tsx

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { Placeholder } from '@wordpress/components';
 import { Icon, commentContent } from '@wordpress/icons';
-const NoReviewsPlaceholder = () => {
+const NoReviewsPlaceholder = (): JSX.Element => {
 	return (
 		<Placeholder
 			className="wc-block-reviews-by-category"

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

@@ -0,0 +1,13 @@
+export interface ReviewsByCategoryEditorProps {
+	attributes: {
+		editMode: boolean;
+		categoryIds: number[];
+		showProductName: boolean;
+	};
+	setAttributes: ( attributes: {
+		editMode?: boolean;
+		categoryIds?: number[];
+		showProductName?: boolean;
+	} ) => void;
+	debouncedSpeak: ( message: string ) => void;
+}

checkstyle.xml

@@ -3621,7 +3621,7 @@
 <error line="71" column="26" severity="error" message="Property &apos;instance&apos; does not exist on type &apos;{ showProductName: 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...&apos;." source="TS2339" />
 <error line="73" column="20" severity="error" message="Property &apos;instance&apos; does not exist on type &apos;{ showProductName: 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...&apos;." source="TS2339" />
 </file>
-<file name="assets/js/blocks/reviews/reviews-by-category/edit.js">
+<file name="assets/js/blocks/reviews/reviews-by-category/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;categoryIds&apos; does not exist on type &apos;Object&apos;." source="TS2339" />
 <error line="51" column="29" severity="error" message="Property &apos;categoryIds&apos; does not exist on type &apos;Object&apos;." source="TS2339" />
@@ -3632,7 +3632,7 @@
 <error line="124" column="20" severity="error" message="Parameter &apos;value&apos; implicitly has an &apos;any[]&apos; type." source="TS7006" />
 <error line="163" column="26" severity="error" message="Type &apos;() =&gt; JSX.Element&apos; is not assignable to type &apos;ReactElementLike&apos;." source="TS2322" />
 </file>
-<file name="assets/js/blocks/reviews/reviews-by-category/index.js">
+<file name="assets/js/blocks/reviews/reviews-by-category/index.tsx">
 <error line="19" column="1" severity="error" message="No overload matches this call.
   Overload 1 of 2, &apos;(metadata: BlockConfiguration&lt;{ categoryIds: unknown; showProductName: 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;{ categoryIds: unknown; showProductName: unknown; editMode: unknown; imageType: unknown; orderby: unknown; reviewsOnLoadMore: unknown; reviewsOnPageLoad: unknown; showLoadMore: unknown; showOrderby: unknown; showReviewDate: unknown; showReviewerName: unknown; showReviewImage: unknown; showReviewRa...&apos;.