Move withProduct() HOC to editor-block.js

assets/js/blocks/reviews/reviews-by-product/edit.js

@@ -10,31 +10,27 @@ import {
 	Button,
 	PanelBody,
 	Placeholder,
-	Spinner,
 	Toolbar,
 	withSpokenMessages,
 } from '@wordpress/components';
 import { SearchListItem } from '@woocommerce/components';
 import { Fragment } from '@wordpress/element';
-import { compose } from '@wordpress/compose';
 import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
-import ApiErrorPlaceholder from '../../../components/api-error-placeholder';
 import EditorBlock from './editor-block.js';
 import ProductControl from '../../../components/product-control';
 import { IconReviewsByProduct } from '../../../components/icons';
-import { withProduct } from '../../../hocs';
 import { ENABLE_REVIEW_RATING, SHOW_AVATARS } from '../../../constants';
 import { getSharedReviewContentControls, getSharedReviewListControls } from '../edit.js';
 import { getBlockClassName } from '../utils.js';
 
 /**
  * Component to handle edit mode of "Reviews by Product".
  */
-const ReviewsByProductEditor = ( { attributes, debouncedSpeak, error, getProduct, isLoading, product, setAttributes } ) => {
+const ReviewsByProductEditor = ( { attributes, debouncedSpeak, setAttributes } ) => {
 	attributes.showReviewImage = ( SHOW_AVATARS || attributes.imageType === 'product' ) && attributes.showReviewImage;
 	attributes.showReviewRating = ENABLE_REVIEW_RATING && attributes.showReviewRating;
 
@@ -111,27 +107,6 @@ const ReviewsByProductEditor = ( { attributes, debouncedSpeak, error, getProduct
 		);
 	};
 
-	const renderApiError = () => (
-		<ApiErrorPlaceholder
-			className="wc-block-featured-product-error"
-			error={ error }
-			isLoading={ isLoading }
-			onRetry={ getProduct }
-		/>
-	);
-
-	const renderLoadingScreen = () => {
-		return (
-			<Placeholder
-				icon={ <IconReviewsByProduct className="block-editor-block-icon" /> }
-				label={ __( 'Reviews by Product', 'woo-gutenberg-products-block' ) }
-				className="wc-block-reviews-by-product"
-			>
-				<Spinner />
-			</Placeholder>
-		);
-	};
-
 	const renderEditMode = () => {
 		const onDone = () => {
 			setAttributes( { editMode: false } );
@@ -198,18 +173,10 @@ const ReviewsByProductEditor = ( { attributes, debouncedSpeak, error, getProduct
 		);
 	};
 
-	if ( error ) {
-		return renderApiError();
-	}
-
 	if ( ! productId || editMode ) {
 		return renderEditMode();
 	}
 
-	if ( ! product || isLoading ) {
-		return renderLoadingScreen();
-	}
-
 	return (
 		<Fragment>
 			{ getBlockControls() }
@@ -232,19 +199,8 @@ ReviewsByProductEditor.propTypes = {
 	 * A callback to update attributes.
 	 */
 	setAttributes: PropTypes.func.isRequired,
-	// from withProduct
-	error: PropTypes.object,
-	getProduct: PropTypes.func,
-	isLoading: PropTypes.bool,
-	product: PropTypes.shape( {
-		name: PropTypes.node,
-		review_count: PropTypes.number,
-	} ),
 	// from withSpokenMessages
 	debouncedSpeak: PropTypes.func.isRequired,
 };
 
-export default compose( [
-	withProduct,
-	withSpokenMessages,
-] )( ReviewsByProductEditor );
+export default withSpokenMessages( ReviewsByProductEditor );

assets/js/blocks/reviews/reviews-by-product/editor-block.js

@@ -6,17 +6,20 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
 import { escapeHTML } from '@wordpress/escape-html';
-import { Disabled, Placeholder } from '@wordpress/components';
+import { RawHTML } from '@wordpress/element';
+import { Disabled, Placeholder, Spinner } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import ApiErrorPlaceholder from '../../../components/api-error-placeholder';
 import { getOrderArgs, getReviews } from '../utils';
 import LoadMoreButton from '../../../base/components/load-more-button';
 import ReviewList from '../../../base/components/review-list';
 import ReviewOrderSelect from '../../../base/components/review-order-select';
 import withComponentId from '../../../base/hocs/with-component-id';
 import { IconReviewsByProduct } from '../../../components/icons';
+import { withProduct } from '../../../hocs';
 import { ENABLE_REVIEW_RATING } from '../../../constants';
 /**
  * Block rendered in the editor.
@@ -69,33 +72,67 @@ class EditorBlock extends Component {
 		} );
 	}
 
+	renderApiError() {
+		const { error, getProduct, isLoading } = this.props;
+
+		return (
+			<ApiErrorPlaceholder
+				className="wc-block-featured-product-error"
+				error={ error }
+				isLoading={ isLoading }
+				onRetry={ getProduct }
+			/>
+		);
+	}
+
+	renderLoadingScreen() {
+		return (
+			<Placeholder
+				icon={ <IconReviewsByProduct className="block-editor-block-icon" /> }
+				label={ __( 'Reviews by Product', 'woo-gutenberg-products-block' ) }
+				className="wc-block-reviews-by-product"
+			>
+				<Spinner />
+			</Placeholder>
+		);
+	}
+
 	renderNoReviews() {
-		const { attributes } = this.props;
-		const { product } = attributes;
+		const { product } = this.props;
+
 		return (
 			<Placeholder
 				className="wc-block-reviews-by-product"
 				icon={ <IconReviewsByProduct className="block-editor-block-icon" /> }
 				label={ __( 'Reviews by Product', 'woo-gutenberg-products-block' ) }
 			>
-				<div dangerouslySetInnerHTML={ {
-					__html: sprintf(
+				<RawHTML>
+					{ sprintf(
 						__(
 							"This block lists reviews for a selected product. %s doesn't have any reviews yet, but they will show up here when it does.",
 							'woo-gutenberg-products-block'
 						),
 						'<strong>' + escapeHTML( product.name ) + '</strong>'
-					),
-				} } />
+					) }
+				</RawHTML>
 			</Placeholder>
 		);
 	}
 
 	render() {
-		const { attributes, componentId } = this.props;
-		const { reviews, totalReviews, isLoading } = this.state;
+		const { attributes, componentId, error, product } = this.props;
+		const { reviews, totalReviews } = this.state;
+		const isLoading = this.state.isLoading || this.props.isLoading;
+
+		if ( error ) {
+			return this.renderApiError();
+		}
+
+		if ( isLoading || ! product ) {
+			return this.renderLoadingScreen();
+		}
 
-		if ( 0 === reviews.length && ! isLoading ) {
+		if ( 0 === reviews.length ) {
 			return this.renderNoReviews();
 		}
 
@@ -128,8 +165,15 @@ EditorBlock.propTypes = {
 	 * The attributes for this block.
 	 */
 	attributes: PropTypes.object.isRequired,
+	// from withProduct
+	error: PropTypes.object,
+	getProduct: PropTypes.func,
+	isLoading: PropTypes.bool,
+	product: PropTypes.shape( {
+		name: PropTypes.node,
+	} ),
 	// from withComponentId
 	componentId: PropTypes.number,
 };
 
-export default withComponentId( EditorBlock );
+export default withComponentId( withProduct( EditorBlock ) );