woocommerce/plugins/woocommerce-admin/client/products/edit-product-page.tsx

134 lines
3.4 KiB
TypeScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { recordEvent } from '@woocommerce/tracks';
import { useEffect, useRef } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { Form, Spinner, FormRef } from '@woocommerce/components';
import {
PartialProduct,
Product,
PRODUCTS_STORE_NAME,
WCDataSelector,
} from '@woocommerce/data';
import { useParams } from 'react-router-dom';
/**
* Internal dependencies
*/
import { ProductFormLayout } from './layout/product-form-layout';
import { ProductFormActions } from './product-form-actions';
import { ProductDetailsSection } from './sections/product-details-section';
import './product-page.scss';
const EditProductPage: React.FC = () => {
const { productId } = useParams();
const previousProductRef = useRef< PartialProduct >();
const formRef = useRef< FormRef< Partial< Product > > >( null );
const { product, isLoading, isPendingAction } = useSelect(
( select: WCDataSelector ) => {
const {
getProduct,
hasFinishedResolution,
isPending,
getPermalinkParts,
} = select( PRODUCTS_STORE_NAME );
if ( productId ) {
const retrievedProduct = getProduct(
parseInt( productId, 10 ),
undefined
);
const permalinkParts = getPermalinkParts(
parseInt( productId, 10 )
);
return {
product:
permalinkParts && retrievedProduct
? retrievedProduct
: undefined,
isLoading:
! hasFinishedResolution( 'getProduct', [
parseInt( productId, 10 ),
] ) ||
! hasFinishedResolution( 'getPermalinkParts', [
parseInt( productId, 10 ),
] ),
isPendingAction:
isPending( 'createProduct' ) ||
isPending(
'deleteProduct',
parseInt( productId, 10 )
) ||
isPending( 'updateProduct', parseInt( productId, 10 ) ),
};
}
return {
isLoading: false,
isPendingAction: false,
};
}
);
useEffect( () => {
// used for determening the wasDeletedUsingAction condition.
if (
previousProductRef.current &&
product &&
previousProductRef.current.id !== product.id &&
formRef.current
) {
formRef.current.resetForm( product );
}
previousProductRef.current = product;
}, [ product ] );
useEffect( () => {
recordEvent( 'view_new_product_management_experience' );
}, [] );
const wasDeletedUsingAction =
previousProductRef.current?.id === product?.id &&
previousProductRef.current?.status !== 'trash' &&
product?.status === 'trash';
return (
<div className="woocommerce-edit-product">
{ isLoading && ! product ? (
<div className="woocommerce-edit-product__spinner">
<Spinner />
</div>
) : null }
{ product &&
product.status === 'trash' &&
! isPendingAction &&
! wasDeletedUsingAction && (
<ProductFormLayout>
<div className="woocommerce-edit-product__error">
{ __(
'You cannot edit this item because it is in the Trash. Please restore it and try again.',
'woocommerce'
) }
</div>
</ProductFormLayout>
) }
{ product &&
( product.status !== 'trash' || wasDeletedUsingAction ) && (
<Form< Partial< Product > >
ref={ formRef }
initialValues={ product || {} }
errors={ {} }
>
<ProductFormLayout>
<ProductDetailsSection />
<ProductFormActions />
</ProductFormLayout>
</Form>
) }
</div>
);
};
export default EditProductPage;