Use renderFrontend function to render the Price Filter block in the frontend (#1136)

* Fix minor issues in comments

* Use renderFrontend function for price filter

Author: Aljullu

assets/js/base/components/review-list-item/index.js

@@ -203,11 +203,11 @@ ReviewListItem.propTypes = {
 
 /**
  * BE AWARE. ReviewListItem expects product data that is equivalent to what is
- * made avaialble for output in a public view. Thus content that may contain
+ * made available for output in a public view. Thus content that may contain
  * html data is not sanitized further.
  *
  * Currently the following data is trusted (assumed to already be sanitized):
- * - `review.review` (review content).
+ * - `review.review` (review content)
  * - `review.product_name` (the product title)
  */
 export default ReviewListItem;

assets/js/blocks/price-filter/frontend.js

@@ -1,25 +1,20 @@
 /**
- * External dependencies
+ * Internal dependencies
  */
-import { render } from 'react-dom';
+import renderFrontend from '../../utils/render-frontend.js';
 
 /**
  * Internal dependencies
  */
 import Block from './block.js';
 
-const containers = document.querySelectorAll(
-	'.wp-block-woocommerce-price-filter'
-);
-
-if ( containers.length ) {
-	Array.prototype.forEach.call( containers, ( el ) => {
-		const attributes = {
+const getProps = ( el ) => {
+	return {
+		attributes: {
 			showInputFields: el.dataset.showinputfields === 'true',
 			showFilterButton: el.dataset.showfilterbutton === 'true',
-		};
-		el.classList.remove( 'is-loading' );
+		},
+	};
+};
 
-		render( <Block attributes={ attributes } />, el );
-	} );
-}
+renderFrontend( '.wp-block-woocommerce-price-filter', Block, getProps );

assets/js/data/collections/README.md

@@ -36,7 +36,7 @@ This selector will return the collection for the given arguments. It has a sibli
 | `query`       | Object  |  The query arguments for the collection. Eg. `{ order: 'ASC', sortBy: Price }`                                                                                                                          |
 | `ids`         | Array   |  If the collection route has placeholders for ids you provide the values for those placeholders in this array (in order).                                                                               |
 
-### `getCollectionHeader( namespace, modelName, header, query = null, ids = [])
+### `getCollectionHeader( namespace, modelName, header, query = null, ids = [])`
 
 This selector will return a header from the collection response using the given arguments. It has a sibling resolver that will resolve `getCollection` using the arguments if that has never been resolved.
 

assets/js/data/collections/selectors.js

@@ -108,7 +108,7 @@ export const getCollectionHeader = (
 	);
 	// Can't just do a truthy check because `getCollectionHeaders` resolver
 	// invokes the `getCollection` selector to trigger the resolution of the
-	// collection request. It's fallback is an empty array.
+	// collection request. Its fallback is an empty array.
 	if ( headers && headers.get ) {
 		return headers.has( header ) ? headers.get( header ) : undefined;
 	}