withSelect: fix for multiple select() calls (https://github.com/woocommerce/woocommerce-admin/pull/1037)

* withSelect: fix for multiple select() calls

This fixes a problem with a fresh-data store implementation that was
cancelling out previous requirements when mapSelectToProps
select( 'wc-api' ) was called more than once.

* wc-api: Only clear if no requirements selected.

Small update to only clear out a component's requirements if withSelect
returns without any requirements.

plugins/woocommerce-admin/client/wc-api/with-select.js

@@ -57,16 +57,39 @@ const withSelect = mapSelectToProps =>
 			 * @return {Object} Props to merge into rendered wrapped element.
 			 */
 			getNextMergeProps( props ) {
-				const context = { component: this };
-				const select = reducerKey => {
-					const selectors = props.registry.select( reducerKey );
-					if ( isFunction( selectors ) ) {
-						return selectors( context );
+				const storeSelectors = {};
+				const onCompletes = [];
+				const componentContext = { component: this };
+
+				const getStoreFromRegistry = ( key, registry, context ) => {
+					// This is our first time selecting from this store.
+					// Do some lazy-loading of handling at this time.
+					const selectorsForKey = registry.select( key );
+
+					if ( isFunction( selectorsForKey ) ) {
+						// This store has special handling for its selectors.
+						// We give it a context, and we check for a "resolve"
+						const { selectors, onComplete } = selectorsForKey( context );
+						onComplete && onCompletes.push( onComplete );
+						storeSelectors[ key ] = selectors;
+					} else {
+						storeSelectors[ key ] = selectorsForKey;
 					}
-					return selectors;
 				};
 
-				return mapSelectToProps( select, props.ownProps ) || DEFAULT_MERGE_PROPS;
+				const select = key => {
+					if ( ! storeSelectors[ key ] ) {
+						getStoreFromRegistry( key, props.registry, componentContext );
+					}
+
+					return storeSelectors[ key ];
+				};
+
+				const selectedProps = mapSelectToProps( select, props.ownProps ) || DEFAULT_MERGE_PROPS;
+
+				// Complete the select for those stores which support it.
+				onCompletes.forEach( onComplete => onComplete() );
+				return selectedProps;
 			}
 
 			componentDidMount() {

plugins/woocommerce-admin/client/wc-api/wp-data-store/index.js

@@ -15,18 +15,17 @@ function createWcApiStore() {
 
 	function getComponentSelectors( component ) {
 		const componentRequirements = [];
-		const apiSelectors = apiClient.getSelectors( componentRequirements );
 
-		apiClient.clearComponentRequirements( component );
-
-		return Object.keys( apiSelectors ).reduce( ( componentSelectors, selectorName ) => {
-			componentSelectors[ selectorName ] = ( ...args ) => {
-				const result = apiSelectors[ selectorName ]( ...args );
-				apiClient.setComponentRequirements( component, componentRequirements );
-				return result;
-			};
-			return componentSelectors;
-		}, {} );
+		return {
+			selectors: apiClient.getSelectors( componentRequirements ),
+			onComplete: () => {
+				if ( 0 === componentRequirements.length ) {
+					apiClient.clearComponentRequirements( component );
+				} else {
+					apiClient.setComponentRequirements( component, componentRequirements );
+				}
+			},
+		};
 	}
 
 	return {