Reduce the number of dependencies used in Reviews by Product (#774)

* Reduce the number of dependencies used in Reviews by Product * Use 'withComponentId' HOC * Remove debounce * Fix wrong proptype * Get rid of JS warning * Load render from react-dom
woocommerce · Jul 31, 2019 · 73d9c28 · 73d9c28
1 parent c19a38b
commit 73d9c28
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 55 deletions.
diff --git a/assets/js/blocks/reviews-by-product/block.js b/assets/js/blocks/reviews-by-product/block.js
@@ -3,16 +3,14 @@
  */
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
-import { Component, Fragment } from '@wordpress/element';
-import { debounce } from 'lodash';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { renderReview } from './utils';
+import withComponentId from '../../utils/with-component-id';
 
 /**
  * Component to handle edit mode of "Reviews by Product".
@@ -27,7 +25,6 @@ class ReviewsByProduct extends Component {
 			totalReviews: 0,
 		};
 
-		this.debouncedGetReviews = debounce( this.getReviews.bind( this ), 200 );
 		this.onChangeOrderby = this.onChangeOrderby.bind( this );
 		this.getReviews = this.getReviews.bind( this );
 		this.appendReviews = this.appendReviews.bind( this );
@@ -37,17 +34,13 @@ class ReviewsByProduct extends Component {
 		this.getReviews();
 	}
 
-	componentWillUnmount() {
-		this.debouncedGetReviews.cancel();
-	}
-
 	componentDidUpdate( prevProps ) {
 		if (
 			prevProps.attributes.orderby !== this.props.attributes.orderby ||
 			prevProps.attributes.perPage !== this.props.attributes.perPage ||
 			prevProps.attributes.productId !== this.props.attributes.productId
 		) {
-			this.debouncedGetReviews();
+			this.getReviews();
 		}
 	}
 
@@ -100,14 +93,15 @@ class ReviewsByProduct extends Component {
 			return;
 		}
 
+		const args = {
+			order,
+			orderby,
+			page,
+			per_page: parseInt( perPage, 10 ) || 1,
+			product_id: productId,
+		};
 		apiFetch( {
-			path: addQueryArgs( `/wc/blocks/products/reviews`, {
-				order,
-				orderby,
-				page,
-				per_page: parseInt( perPage, 10 ) || 1,
-				product_id: productId,
-			} ),
+			path: '/wc/blocks/products/reviews?' + Object.entries( args ).map( ( arg ) => arg.join( '=' ) ).join( '&' ),
 			parse: false,
 		} ).then( ( response ) => {
 			if ( response.json ) {
@@ -149,10 +143,10 @@ class ReviewsByProduct extends Component {
 			return null;
 		}
 
-		const { attributes, instanceId, isPreview } = this.props;
+		const { attributes, componentId, isPreview } = this.props;
 		const { orderby } = this.state;
 
-		const selectId = `wc-block-reviews-by-product__orderby__select-${ instanceId }`;
+		const selectId = `wc-block-reviews-by-product__orderby__select-${ componentId }`;
 		const selectProps = isPreview ? {
 			readOnly: true,
 			value: attributes.orderby,
@@ -162,7 +156,10 @@ class ReviewsByProduct extends Component {
 		};
 
 		return (
-			<p className="wc-block-reviews-by-product__orderby">
+			<p
+				key={ `wc-block-reviews-by-product__orderby-${ componentId }` }
+				className="wc-block-reviews-by-product__orderby"
+			>
 				<label className="wc-block-reviews-by-product__orderby__label" htmlFor={ selectId }>
 					{ __( 'Order by', 'woo-gutenberg-products-block' ) }
 				</label>
@@ -182,7 +179,7 @@ class ReviewsByProduct extends Component {
 	}
 
 	renderReviewsList() {
-		const { attributes } = this.props;
+		const { attributes, componentId } = this.props;
 		const { reviews } = this.state;
 		const showAvatar = wc_product_block_data.showAvatars && attributes.showAvatar;
 		const showProductRating = wc_product_block_data.enableReviewRating && attributes.showProductRating;
@@ -193,7 +190,10 @@ class ReviewsByProduct extends Component {
 		};
 
 		return (
-			<ul className="wc-block-reviews-by-product__list">
+			<ul
+				key={ `wc-block-reviews-by-product__reviews-list-${ componentId }` }
+				className="wc-block-reviews-by-product__list"
+			>
 				{ reviews.length === 0 ?
 					(
 						renderReview( attrs )
@@ -206,7 +206,7 @@ class ReviewsByProduct extends Component {
 	}
 
 	renderLoadMoreButton() {
-		const { isPreview } = this.props;
+		const { componentId, isPreview } = this.props;
 		const { reviews, totalReviews } = this.state;
 
 		if ( totalReviews <= reviews.length ) {
@@ -215,6 +215,7 @@ class ReviewsByProduct extends Component {
 
 		return (
 			<button
+				key={ `wc-block-reviews-by-product__rload-more-${ componentId }` }
 				className="wc-block-reviews-by-product__load-more"
 				onClick={ isPreview ? null : this.appendReviews }
 			>
@@ -224,13 +225,11 @@ class ReviewsByProduct extends Component {
 	}
 
 	render() {
-		return (
-			<Fragment>
-				{ this.renderOrderBySelect() }
-				{ this.renderReviewsList() }
-				{ this.renderLoadMoreButton() }
-			</Fragment>
-		);
+		return [
+			this.renderOrderBySelect(),
+			this.renderReviewsList(),
+			this.renderLoadMoreButton(),
+		];
 	}
 }
 
@@ -239,14 +238,12 @@ ReviewsByProduct.propTypes = {
 	 * The attributes for this block.
 	 */
 	attributes: PropTypes.object.isRequired,
-	/**
-	 * A unique ID for identifying the label for the select dropdown.
-	 */
-	instanceId: PropTypes.number,
 	/**
 	 * Whether this is the block preview or frontend display.
 	 */
 	isPreview: PropTypes.bool,
+	// from withComponentId
+	componentId: PropTypes.number,
 };
 
-export default withInstanceId( ReviewsByProduct );
+export default withComponentId( ReviewsByProduct );
diff --git a/assets/js/blocks/reviews-by-product/frontend.js b/assets/js/blocks/reviews-by-product/frontend.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { forEach } from 'lodash';
-import { render } from '@wordpress/element';
+import { render } from 'react-dom';
 
 /**
  * Internal dependencies
@@ -14,7 +13,8 @@ const containers = document.querySelectorAll(
 );
 
 if ( containers.length ) {
-	forEach( containers, ( el ) => {
+	// Use Array.forEach for IE11 compatibility
+	Array.prototype.forEach.call( containers, ( el ) => {
 		const attributes = {
 			orderby: el.dataset.orderby,
 			perPage: el.dataset.perPage,

diff --git a/assets/js/blocks/reviews-by-product/utils.js b/assets/js/blocks/reviews-by-product/utils.js
@@ -2,9 +2,16 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { format } from '@wordpress/date';
-import classNames from 'classnames';
 
+function getReviewClasses( isLoading ) {
+	const classArray = [ 'wc-block-reviews-by-product__item' ];
+
+	if ( isLoading ) {
+		classArray.push( 'is-loading' );
+	}
+
+	return classArray.join( ' ' );
+}
 /**
  * Render a review for the Reviews by Product block
  *
@@ -15,13 +22,10 @@ import classNames from 'classnames';
  */
 export function renderReview( attributes, review = {}, i = 0 ) {
 	const { showAvatar, showProductRating: showProductRatingAttr, showReviewDate, showReviewerName } = attributes;
-	const { id = null, date_created: dateCreated, rating, review: text = '', reviewer = '', reviewer_avatar_urls: avatarUrls = {} } = review;
+	const { id = null, date_created: dateCreated, formatted_date_created: formattedDateCreated, rating, review: text = '', reviewer = '', reviewer_avatar_urls: avatarUrls = {} } = review;
 	const isLoading = ! Object.keys( review ).length > 0;
 	const showProductRating = Number.isFinite( rating ) && showProductRatingAttr;
-
-	const classes = classNames( 'wc-block-reviews-by-product__item', {
-		'is-loading': isLoading,
-	} );
+	const classes = getReviewClasses( isLoading );
 	const starStyle = {
 		width: ( rating / 5 * 100 ) + '%',
 	};
@@ -61,7 +65,7 @@ export function renderReview( attributes, review = {}, i = 0 ) {
 						</div>
 					) }
 					{ showReviewDate && (
-						<time className="wc-block-reviews-by-product__published-date" dateTime={ dateCreated }>{ format( 'F j, Y', dateCreated ) }</time>
+						<time className="wc-block-reviews-by-product__published-date" dateTime={ dateCreated }>{ formattedDateCreated }</time>
 					) }
 				</div>
 			) }

diff --git a/src/RestApi/Controllers/ProductReviews.php b/src/RestApi/Controllers/ProductReviews.php
@@ -219,15 +219,16 @@ public function prepare_item_for_response( $review, $request ) {
 		$context = ! empty( $request['context'] ) ? $request['context'] : 'view';
 		$rating  = get_comment_meta( $review->comment_ID, 'rating', true ) === '' ? null : (int) get_comment_meta( $review->comment_ID, 'rating', true );
 		$data    = array(
-			'id'                   => (int) $review->comment_ID,
-			'date_created'         => wc_rest_prepare_date_response( $review->comment_date ),
-			'date_created_gmt'     => wc_rest_prepare_date_response( $review->comment_date_gmt ),
-			'product_id'           => (int) $review->comment_post_ID,
-			'reviewer'             => $review->comment_author,
-			'review'               => $review->comment_content,
-			'rating'               => $rating,
-			'verified'             => wc_review_is_from_verified_owner( $review->comment_ID ),
-			'reviewer_avatar_urls' => rest_get_avatar_urls( $review->comment_author_email ),
+			'id'                     => (int) $review->comment_ID,
+			'date_created'           => wc_rest_prepare_date_response( $review->comment_date ),
+			'formatted_date_created' => get_comment_date( 'F j, Y', $review->comment_ID ),
+			'date_created_gmt'       => wc_rest_prepare_date_response( $review->comment_date_gmt ),
+			'product_id'             => (int) $review->comment_post_ID,
+			'reviewer'               => $review->comment_author,
+			'review'                 => $review->comment_content,
+			'rating'                 => $rating,
+			'verified'               => wc_review_is_from_verified_owner( $review->comment_ID ),
+			'reviewer_avatar_urls'   => rest_get_avatar_urls( $review->comment_author_email ),
 		);
 
 		if ( 'view' === $context ) {