82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import {
|
|
__experimentalEditor as Editor,
|
|
AUTO_DRAFT_NAME,
|
|
ProductEditorSettings,
|
|
} from '@woocommerce/product-editor';
|
|
import { Product } from '@woocommerce/data';
|
|
import { useDispatch, useSelect, select as WPSelect } from '@wordpress/data';
|
|
import { useEffect, useState } from '@wordpress/element';
|
|
import { Spinner } from '@wordpress/components';
|
|
import { useParams } from 'react-router-dom';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './product-page.scss';
|
|
|
|
declare const productBlockEditorSettings: ProductEditorSettings;
|
|
|
|
const ProductEditor: React.FC< { product: Product | undefined } > = ( {
|
|
product,
|
|
} ) => {
|
|
if ( ! product ) {
|
|
return <Spinner />;
|
|
}
|
|
|
|
return (
|
|
<Editor
|
|
product={ product }
|
|
settings={ productBlockEditorSettings || {} }
|
|
/>
|
|
);
|
|
};
|
|
|
|
const EditProductEditor: React.FC< { productId: string } > = ( {
|
|
productId,
|
|
} ) => {
|
|
const { product } = useSelect( ( select: typeof WPSelect ) => {
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore Missing types.
|
|
const { getEditedEntityRecord } = select( 'core' );
|
|
|
|
return {
|
|
product: getEditedEntityRecord( 'postType', 'product', productId ),
|
|
};
|
|
} );
|
|
|
|
return <ProductEditor product={ product } />;
|
|
};
|
|
|
|
const AddProductEditor = () => {
|
|
const { saveEntityRecord } = useDispatch( 'core' );
|
|
const [ product, setProduct ] = useState< Product | undefined >(
|
|
undefined
|
|
);
|
|
|
|
useEffect( () => {
|
|
saveEntityRecord( 'postType', 'product', {
|
|
title: AUTO_DRAFT_NAME,
|
|
status: 'auto-draft',
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore Incorrect types.
|
|
} ).then( ( autoDraftProduct: Product ) => {
|
|
setProduct( autoDraftProduct );
|
|
} );
|
|
}, [] );
|
|
|
|
return <ProductEditor product={ product } />;
|
|
};
|
|
|
|
export default function ProductPage() {
|
|
const { productId } = useParams();
|
|
|
|
if ( productId ) {
|
|
return <EditProductEditor productId={ productId } />;
|
|
}
|
|
|
|
return <AddProductEditor />;
|
|
}
|