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

77 lines
1.8 KiB
JavaScript

/**
* External dependencies
*/
import { Component } from '@wordpress/element';
import { createHigherOrderComponent } from '@wordpress/compose';
/**
* Internal dependencies
*/
import { getCategory } from '../components/utils';
const withCategory = createHigherOrderComponent(
( OriginalComponent ) => {
return class WrappedComponent extends Component {
constructor() {
super( ...arguments );
this.state = {
error: null,
loading: false,
category: null,
};
this.loadCategory = this.loadCategory.bind( this );
}
componentDidMount() {
this.loadCategory();
}
componentDidUpdate( prevProps ) {
if ( prevProps.attributes.categoryId !== this.props.attributes.categoryId ) {
this.loadCategory();
}
}
loadCategory() {
const { categoryId } = this.props.attributes;
if ( ! categoryId ) {
this.setState( { category: null, loading: false, error: null } );
return;
}
this.setState( { loading: true } );
getCategory( categoryId ).then( ( category ) => {
this.setState( { category, loading: false, error: null } );
} ).catch( ( apiError ) => {
const error = typeof apiError === 'object' && apiError.hasOwnProperty( 'message' ) ? {
apiMessage: apiError.message,
} : {
// If we can't get any message from the API, set it to null and
// let <ApiErrorPlaceholder /> handle the message to display.
apiMessage: null,
};
this.setState( { category: null, loading: false, error } );
} );
}
render() {
const { error, loading, category } = this.state;
return <OriginalComponent
{ ...this.props }
error={ error }
getCategory={ this.loadCategory }
isLoading={ loading }
category={ category }
/>;
}
};
},
'withCategory'
);
export default withCategory;