woocommerce/packages/woocommerce-blocks/assets/js/blocks/single-product/block.js
2021-12-10 12:03:04 +00:00

58 lines
1.5 KiB
JavaScript

/**
* External dependencies
*/
import { useEffect } from '@wordpress/element';
import { withProduct } from '@woocommerce/block-hocs';
import {
InnerBlockLayoutContextProvider,
ProductDataContextProvider,
} from '@woocommerce/shared-context';
import { StoreNoticesProvider } from '@woocommerce/base-context';
import { useStoreEvents } from '@woocommerce/base-context/hooks';
/**
* Internal dependencies
*/
import { BLOCK_NAME } from './constants';
/** @typedef {import('react')} React */
/**
* The Single Product Block.
*
* @param {Object} props Incoming props for the component.
* @param {boolean} props.isLoading
* @param {Object} props.product
* @param {React.ReactChildren} props.children
*/
const Block = ( { isLoading, product, children } ) => {
const { dispatchStoreEvent } = useStoreEvents();
const className = 'wc-block-single-product wc-block-layout';
const noticeContext = `woocommerce/single-product/${ product?.id || 0 }`;
useEffect( () => {
dispatchStoreEvent( 'product-render', {
product,
listName: BLOCK_NAME,
} );
}, [ product, dispatchStoreEvent ] );
return (
<InnerBlockLayoutContextProvider
parentName={ BLOCK_NAME }
parentClassName={ className }
>
<ProductDataContextProvider
product={ product }
isLoading={ isLoading }
>
<StoreNoticesProvider context={ noticeContext }>
<div className={ className }>{ children }</div>
</StoreNoticesProvider>
</ProductDataContextProvider>
</InnerBlockLayoutContextProvider>
);
};
export default withProduct( Block );