initial commit

packages/woocommerce-blocks/assets/js/base/context/hooks/collections/index.js

@@ -0,0 +1,3 @@
+export * from './use-collection-data';
+export * from './use-collection-header';
+export * from './use-collection';

packages/woocommerce-blocks/assets/js/base/context/hooks/collections/test/use-collection.js

@@ -0,0 +1,298 @@
+/**
+ * External dependencies
+ */
+import TestRenderer, { act } from 'react-test-renderer';
+import { createRegistry, RegistryProvider } from '@wordpress/data';
+import { Component as ReactComponent } from '@wordpress/element';
+import { COLLECTIONS_STORE_KEY as storeKey } from '@woocommerce/block-data';
+
+/**
+ * Internal dependencies
+ */
+import { useCollection } from '../use-collection';
+
+jest.mock( '@woocommerce/block-data', () => ( {
+	__esModule: true,
+	COLLECTIONS_STORE_KEY: 'test/store',
+} ) );
+
+class TestErrorBoundary extends ReactComponent {
+	constructor( props ) {
+		super( props );
+		this.state = { hasError: false, error: {} };
+	}
+	static getDerivedStateFromError( error ) {
+		// Update state so the next render will show the fallback UI.
+		return { hasError: true, error };
+	}
+
+	render() {
+		if ( this.state.hasError ) {
+			return <div error={ this.state.error } />;
+		}
+
+		return this.props.children;
+	}
+}
+
+describe( 'useCollection', () => {
+	let registry, mocks, renderer;
+	const getProps = ( testRenderer ) => {
+		const { results, isLoading } = testRenderer.root.findByType(
+			'div'
+		).props;
+		return {
+			results,
+			isLoading,
+		};
+	};
+
+	const getWrappedComponents = ( Component, props ) => (
+		<RegistryProvider value={ registry }>
+			<TestErrorBoundary>
+				<Component { ...props } />
+			</TestErrorBoundary>
+		</RegistryProvider>
+	);
+
+	const getTestComponent = () => ( { options } ) => {
+		const items = useCollection( options );
+		return <div { ...items } />;
+	};
+
+	const setUpMocks = () => {
+		mocks = {
+			selectors: {
+				getCollectionError: jest.fn().mockReturnValue( false ),
+				getCollection: jest
+					.fn()
+					.mockImplementation( () => ( { foo: 'bar' } ) ),
+				hasFinishedResolution: jest.fn().mockReturnValue( true ),
+			},
+		};
+		registry.registerStore( storeKey, {
+			reducer: () => ( {} ),
+			selectors: mocks.selectors,
+		} );
+	};
+
+	beforeEach( () => {
+		registry = createRegistry();
+		mocks = {};
+		renderer = null;
+		setUpMocks();
+	} );
+	it(
+		'should throw an error if an options object is provided without ' +
+			'a namespace property',
+		() => {
+			const TestComponent = getTestComponent();
+			act( () => {
+				renderer = TestRenderer.create(
+					getWrappedComponents( TestComponent, {
+						options: {
+							resourceName: 'products',
+							query: { bar: 'foo' },
+						},
+					} )
+				);
+			} );
+			const props = renderer.root.findByType( 'div' ).props;
+			expect( props.error.message ).toMatch( /options object/ );
+			expect( console ).toHaveErrored( /your React components:/ );
+			renderer.unmount();
+		}
+	);
+	it(
+		'should throw an error if an options object is provided without ' +
+			'a resourceName property',
+		() => {
+			const TestComponent = getTestComponent();
+			act( () => {
+				renderer = TestRenderer.create(
+					getWrappedComponents( TestComponent, {
+						options: {
+							namespace: 'test/store',
+							query: { bar: 'foo' },
+						},
+					} )
+				);
+			} );
+			const props = renderer.root.findByType( 'div' ).props;
+			expect( props.error.message ).toMatch( /options object/ );
+			expect( console ).toHaveErrored( /your React components:/ );
+			renderer.unmount();
+		}
+	);
+	it(
+		'should return expected behaviour for equivalent query on props ' +
+			'across renders',
+		() => {
+			const TestComponent = getTestComponent();
+			act( () => {
+				renderer = TestRenderer.create(
+					getWrappedComponents( TestComponent, {
+						options: {
+							namespace: 'test/store',
+							resourceName: 'products',
+							query: { bar: 'foo' },
+						},
+					} )
+				);
+			} );
+			const { results } = getProps( renderer );
+			// rerender
+			act( () => {
+				renderer.update(
+					getWrappedComponents( TestComponent, {
+						options: {
+							namespace: 'test/store',
+							resourceName: 'products',
+							query: { bar: 'foo' },
+						},
+					} )
+				);
+			} );
+			// re-render should result in same products object because although
+			// query-state is a different instance, it's still equivalent.
+			const { results: newResults } = getProps( renderer );
+			expect( newResults ).toBe( results );
+			// now let's change the query passed through to verify new object
+			// is created.
+			// remember this won't actually change the results because the mock
+			// selector is returning an equivalent object when it is called,
+			// however it SHOULD be a new object instance.
+			act( () => {
+				renderer.update(
+					getWrappedComponents( TestComponent, {
+						options: {
+							namespace: 'test/store',
+							resourceName: 'products',
+							query: { foo: 'bar' },
+						},
+					} )
+				);
+			} );
+			const { results: resultsVerification } = getProps( renderer );
+			expect( resultsVerification ).not.toBe( results );
+			expect( resultsVerification ).toEqual( results );
+			renderer.unmount();
+		}
+	);
+	it(
+		'should return expected behaviour for equivalent resourceValues on' +
+			' props across renders',
+		() => {
+			const TestComponent = getTestComponent();
+			act( () => {
+				renderer = TestRenderer.create(
+					getWrappedComponents( TestComponent, {
+						options: {
+							namespace: 'test/store',
+							resourceName: 'products',
+							resourceValues: [ 10, 20 ],
+						},
+					} )
+				);
+			} );
+			const { results } = getProps( renderer );
+			// rerender
+			act( () => {
+				renderer.update(
+					getWrappedComponents( TestComponent, {
+						options: {
+							namespace: 'test/store',
+							resourceName: 'products',
+							resourceValues: [ 10, 20 ],
+						},
+					} )
+				);
+			} );
+			// re-render should result in same products object because although
+			// query-state is a different instance, it's still equivalent.
+			const { results: newResults } = getProps( renderer );
+			expect( newResults ).toBe( results );
+			// now let's change the query passed through to verify new object
+			// is created.
+			// remember this won't actually change the results because the mock
+			// selector is returning an equivalent object when it is called,
+			// however it SHOULD be a new object instance.
+			act( () => {
+				renderer.update(
+					getWrappedComponents( TestComponent, {
+						options: {
+							namespace: 'test/store',
+							resourceName: 'products',
+							resourceValues: [ 20, 10 ],
+						},
+					} )
+				);
+			} );
+			const { results: resultsVerification } = getProps( renderer );
+			expect( resultsVerification ).not.toBe( results );
+			expect( resultsVerification ).toEqual( results );
+			renderer.unmount();
+		}
+	);
+	it( 'should return previous query results if `shouldSelect` is false', () => {
+		mocks.selectors.getCollection.mockImplementation(
+			( state, ...args ) => {
+				return args;
+			}
+		);
+		const TestComponent = getTestComponent();
+		act( () => {
+			renderer = TestRenderer.create(
+				getWrappedComponents( TestComponent, {
+					options: {
+						namespace: 'test/store',
+						resourceName: 'products',
+						resourceValues: [ 10, 20 ],
+					},
+				} )
+			);
+		} );
+		const { results } = getProps( renderer );
+		// rerender but with shouldSelect to false
+		act( () => {
+			renderer.update(
+				getWrappedComponents( TestComponent, {
+					options: {
+						namespace: 'test/store',
+						resourceName: 'productsb',
+						resourceValues: [ 10, 30 ],
+						shouldSelect: false,
+					},
+				} )
+			);
+		} );
+		const { results: results2 } = getProps( renderer );
+		expect( results2 ).toBe( results );
+		// expect 2 calls because internally, useSelect invokes callback twice
+		// on mount.
+		expect( mocks.selectors.getCollection ).toHaveBeenCalledTimes( 2 );
+
+		// rerender again but set shouldSelect to true again and we should see
+		// new results
+		act( () => {
+			renderer.update(
+				getWrappedComponents( TestComponent, {
+					options: {
+						namespace: 'test/store',
+						resourceName: 'productsb',
+						resourceValues: [ 10, 30 ],
+						shouldSelect: true,
+					},
+				} )
+			);
+		} );
+		const { results: results3 } = getProps( renderer );
+		expect( results3 ).not.toEqual( results );
+		expect( results3 ).toEqual( [
+			'test/store',
+			'productsb',
+			{},
+			[ 10, 30 ],
+		] );
+	} );
+} );

packages/woocommerce-blocks/assets/js/base/context/hooks/collections/use-collection-data.js

@@ -0,0 +1,140 @@
+/**
+ * External dependencies
+ */
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useDebounce } from 'use-debounce';
+import { sortBy } from 'lodash';
+import { useShallowEqual } from '@woocommerce/base-hooks';
+
+/**
+ * Internal dependencies
+ */
+import { useQueryStateByContext, useQueryStateByKey } from '../use-query-state';
+import { useCollection } from './use-collection';
+import { useQueryStateContext } from '../../providers/query-state-context';
+
+const buildCollectionDataQuery = ( collectionDataQueryState ) => {
+	const query = collectionDataQueryState;
+
+	if ( collectionDataQueryState.calculate_attribute_counts ) {
+		query.calculate_attribute_counts = sortBy(
+			collectionDataQueryState.calculate_attribute_counts.map(
+				( { taxonomy, queryType } ) => {
+					return {
+						taxonomy,
+						query_type: queryType,
+					};
+				}
+			),
+			[ 'taxonomy', 'query_type' ]
+		);
+	}
+
+	return query;
+};
+
+export const useCollectionData = ( {
+	queryAttribute,
+	queryPrices,
+	queryStock,
+	queryState,
+} ) => {
+	let context = useQueryStateContext();
+	context = `${ context }-collection-data`;
+
+	const [ collectionDataQueryState ] = useQueryStateByContext( context );
+	const [
+		calculateAttributesQueryState,
+		setCalculateAttributesQueryState,
+	] = useQueryStateByKey( 'calculate_attribute_counts', [], context );
+	const [
+		calculatePriceRangeQueryState,
+		setCalculatePriceRangeQueryState,
+	] = useQueryStateByKey( 'calculate_price_range', null, context );
+	const [
+		calculateStockStatusQueryState,
+		setCalculateStockStatusQueryState,
+	] = useQueryStateByKey( 'calculate_stock_status_counts', null, context );
+
+	const currentQueryAttribute = useShallowEqual( queryAttribute || {} );
+	const currentQueryPrices = useShallowEqual( queryPrices );
+	const currentQueryStock = useShallowEqual( queryStock );
+
+	useEffect( () => {
+		if (
+			typeof currentQueryAttribute === 'object' &&
+			Object.keys( currentQueryAttribute ).length
+		) {
+			const foundAttribute = calculateAttributesQueryState.find(
+				( attribute ) => {
+					return (
+						attribute.taxonomy === currentQueryAttribute.taxonomy
+					);
+				}
+			);
+
+			if ( ! foundAttribute ) {
+				setCalculateAttributesQueryState( [
+					...calculateAttributesQueryState,
+					currentQueryAttribute,
+				] );
+			}
+		}
+	}, [
+		currentQueryAttribute,
+		calculateAttributesQueryState,
+		setCalculateAttributesQueryState,
+	] );
+
+	useEffect( () => {
+		if (
+			calculatePriceRangeQueryState !== currentQueryPrices &&
+			currentQueryPrices !== undefined
+		) {
+			setCalculatePriceRangeQueryState( currentQueryPrices );
+		}
+	}, [
+		currentQueryPrices,
+		setCalculatePriceRangeQueryState,
+		calculatePriceRangeQueryState,
+	] );
+
+	useEffect( () => {
+		if (
+			calculateStockStatusQueryState !== currentQueryStock &&
+			currentQueryStock !== undefined
+		) {
+			setCalculateStockStatusQueryState( currentQueryStock );
+		}
+	}, [
+		currentQueryStock,
+		setCalculateStockStatusQueryState,
+		calculateStockStatusQueryState,
+	] );
+
+	// Defer the select query so all collection-data query vars can be gathered.
+	const [ shouldSelect, setShouldSelect ] = useState( false );
+	const [ debouncedShouldSelect ] = useDebounce( shouldSelect, 200 );
+
+	if ( ! shouldSelect ) {
+		setShouldSelect( true );
+	}
+
+	const collectionDataQueryVars = useMemo( () => {
+		return buildCollectionDataQuery( collectionDataQueryState );
+	}, [ collectionDataQueryState ] );
+
+	return useCollection( {
+		namespace: '/wc/store',
+		resourceName: 'products/collection-data',
+		query: {
+			...queryState,
+			page: undefined,
+			per_page: undefined,
+			orderby: undefined,
+			order: undefined,
+			...collectionDataQueryVars,
+		},
+		shouldSelect: debouncedShouldSelect,
+	} );
+};

packages/woocommerce-blocks/assets/js/base/context/hooks/collections/use-collection-header.js

@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import { COLLECTIONS_STORE_KEY as storeKey } from '@woocommerce/block-data';
+import { useSelect } from '@wordpress/data';
+import { useShallowEqual } from '@woocommerce/base-hooks';
+
+/**
+ * This is a custom hook that is wired up to the `wc/store/collections` data
+ * store. Given a header key and a collections option object, this will ensure a
+ * component is kept up to date with the collection header value matching that
+ * query in the store state.
+ *
+ * @param {string} headerKey              Used to indicate which header value to
+ *                                        return for the given collection query.
+ *                                        Example: `'x-wp-total'`
+ * @param {Object} options                An object declaring the various
+ *                                        collection arguments.
+ * @param {string} options.namespace      The namespace for the collection.
+ *                                        Example: `'/wc/blocks'`
+ * @param {string} options.resourceName   The name of the resource for the
+ *                                        collection. Example:
+ *                                        `'products/attributes'`
+ * @param {Array}  options.resourceValues An array of values (in correct order)
+ *                                        that are substituted in the route
+ *                                        placeholders for the collection route.
+ *                                        Example: `[10, 20]`
+ * @param {Object} options.query          An object of key value pairs for the
+ *                                        query to execute on the collection
+ *                                        (optional). Example:
+ *                                        `{ order: 'ASC', order_by: 'price' }`
+ *
+ * @return {Object} This hook will return an object with two properties:
+ *                  - value     Whatever value is attached to the specified
+ *                              header.
+ *                  - isLoading A boolean indicating whether the header is
+ *                              loading (true) or not.
+ */
+export const useCollectionHeader = ( headerKey, options ) => {
+	const {
+		namespace,
+		resourceName,
+		resourceValues = [],
+		query = {},
+	} = options;
+	if ( ! namespace || ! resourceName ) {
+		throw new Error(
+			'The options object must have valid values for the namespace and ' +
+				'the resource name properties.'
+		);
+	}
+	// ensure we feed the previous reference if it's equivalent
+	const currentQuery = useShallowEqual( query );
+	const currentResourceValues = useShallowEqual( resourceValues );
+	const { value, isLoading = true } = useSelect(
+		( select ) => {
+			const store = select( storeKey );
+			// filter out query if it is undefined.
+			const args = [
+				headerKey,
+				namespace,
+				resourceName,
+				currentQuery,
+				currentResourceValues,
+			];
+			return {
+				value: store.getCollectionHeader( ...args ),
+				isLoading: store.hasFinishedResolution(
+					'getCollectionHeader',
+					args
+				),
+			};
+		},
+		[
+			headerKey,
+			namespace,
+			resourceName,
+			currentResourceValues,
+			currentQuery,
+		]
+	);
+	return {
+		value,
+		isLoading,
+	};
+};

packages/woocommerce-blocks/assets/js/base/context/hooks/collections/use-collection.js

@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import { COLLECTIONS_STORE_KEY as storeKey } from '@woocommerce/block-data';
+import { useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';
+import { useShallowEqual, useThrowError } from '@woocommerce/base-hooks';
+
+/**
+ * This is a custom hook that is wired up to the `wc/store/collections` data
+ * store. Given a collections option object, this will ensure a component is
+ * kept up to date with the collection matching that query in the store state.
+ *
+ * @throws {Object} Throws an exception object if there was a problem with the
+ * 					API request, to be picked up by BlockErrorBoundry.
+ *
+ * @param {Object} options                  An object declaring the various
+ *                                          collection arguments.
+ * @param {string} options.namespace        The namespace for the collection.
+ *                                          Example: `'/wc/blocks'`
+ * @param {string} options.resourceName     The name of the resource for the
+ *                                          collection. Example:
+ *                                          `'products/attributes'`
+ * @param {Array}  [options.resourceValues] An array of values (in correct order)
+ *                                          that are substituted in the route
+ *                                          placeholders for the collection route.
+ *                                          Example: `[10, 20]`
+ * @param {Object} [options.query]          An object of key value pairs for the
+ *                                          query to execute on the collection
+ *                                          Example:
+ *                                         `{ order: 'ASC', order_by: 'price' }`
+ * @param {boolean} [options.shouldSelect]  If false, the previous results will be
+ *                                          returned and internal selects will not
+ *                                          fire.
+ *
+ * @return {Object} This hook will return an object with two properties:
+ *                  - results   An array of collection items returned.
+ *                  - isLoading A boolean indicating whether the collection is
+ *                              loading (true) or not.
+ */
+export const useCollection = ( options ) => {
+	const {
+		namespace,
+		resourceName,
+		resourceValues = [],
+		query = {},
+		shouldSelect = true,
+	} = options;
+	if ( ! namespace || ! resourceName ) {
+		throw new Error(
+			'The options object must have valid values for the namespace and ' +
+				'the resource properties.'
+		);
+	}
+	const currentResults = useRef( { results: [], isLoading: true } );
+	// ensure we feed the previous reference if it's equivalent
+	const currentQuery = useShallowEqual( query );
+	const currentResourceValues = useShallowEqual( resourceValues );
+	const throwError = useThrowError();
+	const results = useSelect(
+		( select ) => {
+			if ( ! shouldSelect ) {
+				return null;
+			}
+			const store = select( storeKey );
+			const args = [
+				namespace,
+				resourceName,
+				currentQuery,
+				currentResourceValues,
+			];
+			const error = store.getCollectionError( ...args );
+
+			if ( error ) {
+				throwError( error );
+			}
+
+			return {
+				results: store.getCollection( ...args ),
+				isLoading: ! store.hasFinishedResolution(
+					'getCollection',
+					args
+				),
+			};
+		},
+		[
+			namespace,
+			resourceName,
+			currentResourceValues,
+			currentQuery,
+			shouldSelect,
+		]
+	);
+	// if selector was not bailed, then update current results. Otherwise return
+	// previous results
+	if ( results !== null ) {
+		currentResults.current = results;
+	}
+	return currentResults.current;
+};