From 6490f99ac29e828394276601c5e0e58de9c6e8d2 Mon Sep 17 00:00:00 2001
From: Lucio Giannotta <lucio.giannotta@a8c.com>
Date: Wed, 1 Dec 2021 02:56:09 +0100
Subject: [PATCH] Convert `ErrorPlaceholder` and `ErrorMessage` to TypeScript

---
 .../{error-message.js => error-message.tsx}   | 33 ++++-----
 .../error-placeholder/{index.js => index.tsx} | 70 ++++++++++---------
 2 files changed, 52 insertions(+), 51 deletions(-)
 rename assets/js/editor-components/error-placeholder/{error-message.js => error-message.tsx} (66%)
 rename assets/js/editor-components/error-placeholder/{index.js => index.tsx} (65%)

diff --git a/assets/js/editor-components/error-placeholder/error-message.js b/assets/js/editor-components/error-placeholder/error-message.tsx
similarity index 66%
rename from assets/js/editor-components/error-placeholder/error-message.js
rename to assets/js/editor-components/error-placeholder/error-message.tsx
index 2b0c5d0ab54..2f0c113a183 100644
--- a/assets/js/editor-components/error-placeholder/error-message.js
+++ b/assets/js/editor-components/error-placeholder/error-message.tsx
@@ -2,10 +2,21 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import PropTypes from 'prop-types';
 import { escapeHTML } from '@wordpress/escape-html';
 
-const getErrorMessage = ( { message, type } ) => {
+/**
+ * Internal dependencies
+ */
+import { ErrorObject } from '.';
+
+export interface ErrorMessageProps {
+	/**
+	 * The error object.
+	 */
+	error: ErrorObject;
+}
+
+const getErrorMessage = ( { message, type }: ErrorObject ) => {
 	if ( ! message ) {
 		return __(
 			'An unknown error occurred which prevented the block from being updated.',
@@ -42,24 +53,8 @@ const getErrorMessage = ( { message, type } ) => {
 	return message;
 };
 
-const ErrorMessage = ( { error } ) => (
+const ErrorMessage = ( { error }: ErrorMessageProps ): JSX.Element => (
 	<div className="wc-block-error-message">{ getErrorMessage( error ) }</div>
 );
 
-ErrorMessage.propTypes = {
-	/**
-	 * The error object.
-	 */
-	error: PropTypes.shape( {
-		/**
-		 * Human-readable error message to display.
-		 */
-		message: PropTypes.node,
-		/**
-		 * Context in which the error was triggered. That will determine how the error is displayed to the user.
-		 */
-		type: PropTypes.oneOf( [ 'api', 'general' ] ),
-	} ),
-};
-
 export default ErrorMessage;
diff --git a/assets/js/editor-components/error-placeholder/index.js b/assets/js/editor-components/error-placeholder/index.tsx
similarity index 65%
rename from assets/js/editor-components/error-placeholder/index.js
rename to assets/js/editor-components/error-placeholder/index.tsx
index dc630caae7c..ba834e29e66 100644
--- a/assets/js/editor-components/error-placeholder/index.js
+++ b/assets/js/editor-components/error-placeholder/index.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import PropTypes from 'prop-types';
 import { Icon, notice } from '@woocommerce/icons';
 import classNames from 'classnames';
 import { Button, Placeholder, Spinner } from '@wordpress/components';
@@ -10,10 +9,46 @@ import { Button, Placeholder, Spinner } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import ErrorMessage from './error-message.js';
+import ErrorMessage from './error-message';
 import './editor.scss';
 
-const ErrorPlaceholder = ( { className, error, isLoading, onRetry } ) => (
+export interface ErrorObject {
+	/**
+	 * Human-readable error message to display.
+	 */
+	message: string;
+	/**
+	 * Context in which the error was triggered. That will determine how the error is displayed to the user.
+	 */
+	type: 'api' | 'general';
+}
+
+export interface ErrorPlaceholderProps {
+	/**
+	 * Classname to add to placeholder in addition to the defaults.
+	 */
+	className?: string;
+	/**
+	 * The error object.
+	 */
+	error: ErrorObject;
+	/**
+	 * Whether there is a request running, so the 'Retry' button is hidden and
+	 * a spinner is shown instead.
+	 */
+	isLoading: boolean;
+	/**
+	 * Callback to retry an action.
+	 */
+	onRetry?: () => void;
+}
+
+const ErrorPlaceholder = ( {
+	className,
+	error,
+	isLoading = false,
+	onRetry,
+}: ErrorPlaceholderProps ): JSX.Element => (
 	<Placeholder
 		icon={ <Icon srcElement={ notice } /> }
 		label={ __(
@@ -37,33 +72,4 @@ const ErrorPlaceholder = ( { className, error, isLoading, onRetry } ) => (
 	</Placeholder>
 );
 
-ErrorPlaceholder.propTypes = {
-	/**
-	 * Classname to add to placeholder in addition to the defaults.
-	 */
-	className: PropTypes.string,
-	/**
-	 * The error object.
-	 */
-	error: PropTypes.shape( {
-		/**
-		 * Human-readable error message to display.
-		 */
-		message: PropTypes.node,
-		/**
-		 * Context in which the error was triggered. That will determine how the error is displayed to the user.
-		 */
-		type: PropTypes.oneOf( [ 'api', 'general' ] ),
-	} ),
-	/**
-	 * Whether there is a request running, so the 'Retry' button is hidden and
-	 * a spinner is shown instead.
-	 */
-	isLoading: PropTypes.bool,
-	/**
-	 * Callback to retry an action.
-	 */
-	onRetry: PropTypes.func,
-};
-
 export default ErrorPlaceholder;