Convert ErrorPlaceholder and ErrorMessage to TypeScript

assets/js/editor-components/error-placeholder/error-message.js → 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;

assets/js/editor-components/error-placeholder/index.js → assets/js/editor-components/error-placeholder/index.tsx

@@ -2,18 +2,53 @@
  * 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';
 
 /**
  * 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;