woocommerce/plugins/woocommerce-blocks/assets/js/hocs/with-attributes.js

/**
 * External dependencies
 */
import { Component } from '@wordpress/element';
import { createHigherOrderComponent } from '@wordpress/compose';
import PropTypes from 'prop-types';
import { debounce } from 'lodash';

/**
 * Internal dependencies
 */
import { getAttributes, getTerms } from '../components/utils';
import { formatError } from '../base/utils/errors.js';

const withAttributes = createHigherOrderComponent(
	( OriginalComponent ) => {
		class WrappedComponent extends Component {
			constructor() {
				super( ...arguments );
				this.state = {
					attributes: [],
					error: null,
					expandedAttribute: null,
					loading: false,
					termsList: {},
					termsLoading: false,
				};

				this.loadAttributes = this.loadAttributes.bind( this );
				this.onExpandAttribute = this.onExpandAttribute.bind( this );
				this.debouncedLoadTerms = debounce( this.loadTerms.bind( this ), 200 );
			}

			componentDidMount() {
				this.loadAttributes();
			}

			componentWillUnmount() {
				this.debouncedLoadTerms.cancel();
			}

			componentDidUpdate( prevProps, prevState ) {
				if ( prevState.expandedAttribute !== this.state.expandedAttribute ) {
					this.debouncedLoadTerms();
				}
			}

			loadAttributes() {
				const { selected } = this.props;
				const { expandedAttribute } = this.state;
				this.setState( { loading: true } );

				getAttributes().then( ( attributes ) => {
					attributes = attributes.map( ( item ) => ( { ...item, parent: 0 } ) );
					let newExpandedAttribute = expandedAttribute;
					if ( ! expandedAttribute && selected.length > 0 ) {
						const attr = attributes.find( ( item ) => item.slug === selected[ 0 ].attr_slug );
						if ( attr ) {
							newExpandedAttribute = attr.id;
						}
					}
					this.setState( { attributes, expandedAttribute: newExpandedAttribute, loading: false, error: null } );
				} ).catch( async ( e ) => {
					const error = await formatError( e );

					this.setState( { attributes: [], expandedAttribute: null, loading: false, error } );
				} );
			}

			loadTerms() {
				const { expandedAttribute, termsList } = this.state;
				if ( ! expandedAttribute ) {
					return;
				}
				if ( ! termsList[ expandedAttribute ] ) {
					this.setState( { termsLoading: true } );
				}

				getTerms( expandedAttribute )
					.then( ( terms ) => {
						terms = terms.map( ( term ) => ( { ...term, parent: expandedAttribute, attr_slug: term.attribute.slug } ) );
						this.setState( ( prevState ) => ( {
							termsList: { ...prevState.termsList, [ expandedAttribute ]: terms },
							termsLoading: false,
						} ) );
					} )
					.catch( async ( e ) => {
						const error = await formatError( e );

						this.setState( { termsList: {}, termsLoading: false, error } );
					} );
			}

			onExpandAttribute( attributeId ) {
				const { expandedAttribute } = this.state;

				this.setState( {
					expandedAttribute: attributeId === expandedAttribute ? null : attributeId,
				} );
			}

			render() {
				const { error, expandedAttribute, loading, attributes, termsList, termsLoading } = this.state;

				return <OriginalComponent
					{ ...this.props }
					attributes={ attributes }
					error={ error }
					expandedAttribute={ expandedAttribute }
					onExpandAttribute={ this.onExpandAttribute }
					isLoading={ loading }
					termsAreLoading={ termsLoading }
					termsList={ termsList }
				/>;
			}
		}
		WrappedComponent.propTypes = {
			selected: PropTypes.array,
		};
		WrappedComponent.defaultProps = {
			selected: [],
		};
		return WrappedComponent;
	},
	'withAttributes'
);

export default withAttributes;