From 319c2637eb31fce1812ab1bc5579e3c9394106d6 Mon Sep 17 00:00:00 2001
From: Alexandre Lara <allexandrelara@gmail.com>
Date: Tue, 20 Feb 2024 10:58:52 -0300
Subject: [PATCH] Reviews block: Convert editor-block.js to editor-block.tsx
 and replace propTypes with TypeScript definitions (#44594)

* Convert Reviews Editor code to TypeScript

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 .../assets/js/blocks/reviews/attributes.ts    |  2 +-
 .../{editor-block.js => editor-block.tsx}     | 36 ++++++++++++-------
 .../blocks/reviews/editor-container-block.tsx |  2 +-
 ...rt-reviews-editor-block-file-to-typescript |  4 +++
 4 files changed, 29 insertions(+), 15 deletions(-)
 rename plugins/woocommerce-blocks/assets/js/blocks/reviews/{editor-block.js => editor-block.tsx} (71%)
 create mode 100644 plugins/woocommerce/changelog/44594-chore-42294-convert-reviews-editor-block-file-to-typescript

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/attributes.ts b/plugins/woocommerce-blocks/assets/js/blocks/reviews/attributes.ts
index 19e52de781d..a4a79bc4006 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/attributes.ts
+++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/attributes.ts
@@ -110,7 +110,7 @@ export default {
 export type ReviewBlockAttributes = BlockAttributes & {
 	editMode: boolean;
 	imageType: string;
-	orderby: string;
+	orderby: 'most-recent' | 'highest-rating' | 'lowest-rating';
 	reviewsOnLoadMore: number;
 	reviewsOnPageLoad: number;
 	showLoadMore: boolean;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-block.js b/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-block.tsx
similarity index 71%
rename from plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-block.js
rename to plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-block.tsx
index 3c480371090..382b184c9bf 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-block.tsx
@@ -3,31 +3,39 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import PropTypes from 'prop-types';
 import { Disabled } from '@wordpress/components';
 import { getSetting } from '@woocommerce/settings';
-import ErrorPlaceholder from '@woocommerce/editor-components/error-placeholder';
+import ErrorPlaceholder, {
+	ErrorObject,
+} from '@woocommerce/editor-components/error-placeholder';
 import LoadMoreButton from '@woocommerce/base-components/load-more-button';
 import {
 	ReviewList,
 	ReviewSortSelect,
 } from '@woocommerce/base-components/reviews';
+import type { Review } from '@woocommerce/base-components/reviews/types';
 import withReviews from '@woocommerce/base-hocs/with-reviews';
 
+/**
+ * Internal dependencies
+ */
+import { ReviewBlockAttributes } from './attributes';
+
+interface EditorBlockProps {
+	attributes: ReviewBlockAttributes;
+	reviews: Review[];
+	totalReviews: number;
+	error?: ErrorObject;
+	isLoading: boolean;
+	noReviewsPlaceholder: React.ComponentType< {
+		attributes: EditorBlockProps[ 'attributes' ];
+	} >;
+}
+
 /**
  * Block rendered in the editor.
  */
-class EditorBlock extends Component {
-	static propTypes = {
-		/**
-		 * The attributes for this block.
-		 */
-		attributes: PropTypes.object.isRequired,
-		// from withReviews
-		reviews: PropTypes.array,
-		totalReviews: PropTypes.number,
-	};
-
+class EditorBlock extends Component< EditorBlockProps > {
 	render() {
 		const {
 			attributes,
@@ -63,6 +71,7 @@ class EditorBlock extends Component {
 						onChange={ () => null }
 					/>
 				) }
+
 				<ReviewList attributes={ attributes } reviews={ reviews } />
 				{ attributes.showLoadMore && totalReviews > reviews.length && (
 					<LoadMoreButton
@@ -70,6 +79,7 @@ class EditorBlock extends Component {
 							'Load more reviews',
 							'woocommerce'
 						) }
+						onClick={ () => null }
 					/>
 				) }
 			</Disabled>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-container-block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-container-block.tsx
index c08b82d112e..0c1329bc02a 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-container-block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor-container-block.tsx
@@ -10,7 +10,7 @@ import { EditorContainerBlockProps } from '@woocommerce/blocks/reviews/types';
 /**
  * Internal dependencies
  */
-import EditorBlock from './editor-block.js';
+import EditorBlock from './editor-block';
 import { getBlockClassName, getSortArgs } from './utils.js';
 
 const EditorContainerBlock = ( {
diff --git a/plugins/woocommerce/changelog/44594-chore-42294-convert-reviews-editor-block-file-to-typescript b/plugins/woocommerce/changelog/44594-chore-42294-convert-reviews-editor-block-file-to-typescript
new file mode 100644
index 00000000000..eb2da7196e9
--- /dev/null
+++ b/plugins/woocommerce/changelog/44594-chore-42294-convert-reviews-editor-block-file-to-typescript
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+Comment: Convert editor-block.js from the Reviews block to editor-block.tsx and replace propTypes with TypeScript definitions.
+