Merge branch 'add/588-reviews-by-product-block' into update/reviews-b…

…y-product-hook-order-by-endpoint
woocommerce · Jul 19, 2019 · b64641f · b64641f
2 parents 990211e + 86cff9c
commit b64641f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/assets/js/blocks/reviews-by-product/block.js b/assets/js/blocks/reviews-by-product/block.js
@@ -53,7 +53,12 @@ class ReviewsByProduct extends Component {
 	}
 
 	onChangeOrderby( event ) {
+		const { attributes } = this.props;
+		const { perPage } = attributes;
+		const { totalReviews } = this.state;
+		const newReviews = Math.min( totalReviews, perPage );
 		this.setState( {
+			reviews: Array( newReviews ).fill( {} ),
 			orderby: event.target.value,
 		} );
 		this.getReviews( event.target.value );
@@ -111,7 +116,10 @@ class ReviewsByProduct extends Component {
 					if ( page === 1 ) {
 						this.setState( { reviews: newReviews, totalReviews } );
 					} else {
-						this.setState( { reviews: reviews.concat( newReviews ), totalReviews } );
+						this.setState( {
+							reviews: reviews.filter( ( review ) => Object.keys( review ).length ).concat( newReviews ),
+							totalReviews,
+						} );
 					}
 				} ).catch( () => {
 					this.setState( { reviews: [] } );
@@ -125,8 +133,14 @@ class ReviewsByProduct extends Component {
 	}
 
 	appendReviews() {
-		const page = Math.round( this.state.reviews.length / this.props.attributes.perPage ) + 1;
+		const { attributes } = this.props;
+		const { perPage } = attributes;
+		const { reviews, totalReviews } = this.state;
+
+		const newReviews = Math.min( totalReviews - reviews.length, perPage );
+		this.setState( { reviews: reviews.concat( Array( newReviews ).fill( {} ) ) } );
 
+		const page = Math.round( reviews.length / perPage ) + 1;
 		this.getReviews( null, page );
 	}
 
@@ -178,7 +192,7 @@ class ReviewsByProduct extends Component {
 						(
 							renderReview( attrs )
 						) : (
-							reviews.map( ( review ) => renderReview( attrs, review ) )
+							reviews.map( ( review, i ) => renderReview( attrs, review, i ) )
 						)
 					}
 				</ul>

diff --git a/assets/js/blocks/reviews-by-product/utils.js b/assets/js/blocks/reviews-by-product/utils.js
@@ -13,7 +13,7 @@ import classNames from 'classnames';
  *
  * @return {Object} React JSx nodes of the block
  */
-export function renderReview( attributes, review = {} ) {
+export function renderReview( attributes, review = {}, i = 0 ) {
 	const { showAvatar, showProductRating, showReviewDate, showReviewerName } = attributes;
 	const { id = null, date_created: dateCreated, rating, review: text = '', reviewer = '', reviewer_avatar_urls: avatarUrls = {} } = review;
 	const isLoading = ! Object.keys( review ).length > 0;
@@ -30,7 +30,7 @@ export function renderReview( attributes, review = {} ) {
 	};
 
 	return (
-		<li className={ classes } key={ id } aria-hidden={ isLoading }>
+		<li className={ classes } key={ id || i } aria-hidden={ isLoading }>
 			<span
 				className="wc-block-reviews-by-product__text"
 				dangerouslySetInnerHTML={ {