djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use query hooks in product variant create view

Browse source
This commit is contained in:
dominik-zeglen 2020-08-24 12:18:58 +02:00
parent b1fd1c3243
commit 0fc4d1afb2
2 changed files with 85 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/products/queries.ts
View file

@ -230,7 +230,7 @@ const productVariantCreateQuery = gql`
}
}
`;
export const TypedProductVariantCreateQuery = TypedQuery<
export const useProductVariantCreateQuery = makeQuery<
ProductVariantCreateData,
ProductVariantCreateDataVariables
>(productVariantCreateQuery);

181
src/products/views/ProductVariantCreate.tsx
View file

@ -12,9 +12,8 @@ import { decimal, weight } from "../../misc";
import ProductVariantCreatePage, {
ProductVariantCreatePageSubmitData
} from "../components/ProductVariantCreatePage";
import { TypedVariantCreateMutation } from "../mutations";
import { TypedProductVariantCreateQuery } from "../queries";
import { VariantCreate } from "../types/VariantCreate";
import { useVariantCreateMutation } from "../mutations";
import { useProductVariantCreateQuery } from "../queries";
import { productListUrl, productUrl, productVariantEditUrl } from "../urls";
interface ProductVariantCreateProps {
@ -35,102 +34,90 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
}
});
return (
<TypedProductVariantCreateQuery displayLoader variables={{ id: productId }}>
{({ data, loading: productLoading }) => {
const product = data?.product;
const { data, loading: productLoading } = useProductVariantCreateQuery({
displayLoader: true,
variables: { id: productId }
});
if (product === null) {
return <NotFoundPage onBack={() => navigate(productListUrl())} />;
}
const handleCreateSuccess = (data: VariantCreate) => {
if (data.productVariantCreate.errors.length === 0) {
notify({
status: "success",
text: intl.formatMessage(commonMessages.savedChanges)
});
navigate(
productVariantEditUrl(
productId,
data.productVariantCreate.productVariant.id
)
);
}
};
return (
<TypedVariantCreateMutation onCompleted={handleCreateSuccess}>
{(variantCreate, variantCreateResult) => {
const handleBack = () => navigate(productUrl(productId));
const handleSubmit = (
formData: ProductVariantCreatePageSubmitData
) =>
variantCreate({
variables: {
input: {
attributes: formData.attributes
.filter(attribute => attribute.value !== "")
.map(attribute => ({
id: attribute.id,
values: [attribute.value]
})),
costPrice: decimal(formData.costPrice),
price: decimal(formData.price),
product: productId,
sku: formData.sku,
stocks: formData.stocks.map(stock => ({
quantity: parseInt(stock.value, 0),
warehouse: stock.id
})),
trackInventory: true,
weight: weight(formData.weight)
}
}
});
const handleVariantClick = (id: string) =>
navigate(productVariantEditUrl(productId, id));
const disableForm = productLoading || variantCreateResult.loading;
return (
<>
<WindowTitle
title={intl.formatMessage({
defaultMessage: "Create variant",
description: "window title"
})}
/>
<ProductVariantCreatePage
currencySymbol={shop?.defaultCurrency}
disabled={disableForm}
errors={
variantCreateResult.data?.productVariantCreate.errors ||
[]
}
header={intl.formatMessage({
defaultMessage: "Create Variant",
description: "header"
})}
product={data?.product}
onBack={handleBack}
onSubmit={handleSubmit}
onVariantClick={handleVariantClick}
saveButtonBarState={variantCreateResult.status}
warehouses={
warehouses.data?.warehouses.edges.map(
edge => edge.node
) || []
}
weightUnit={shop?.defaultWeightUnit}
/>
</>
);
}}
</TypedVariantCreateMutation>
const [variantCreate, variantCreateResult] = useVariantCreateMutation({
onCompleted: data => {
if (data.productVariantCreate.errors.length === 0) {
notify({
status: "success",
text: intl.formatMessage(commonMessages.savedChanges)
});
navigate(
productVariantEditUrl(
productId,
data.productVariantCreate.productVariant.id
)
);
}}
</TypedProductVariantCreateQuery>
}
}
});
const product = data?.product;
if (product === null) {
return <NotFoundPage onBack={() => navigate(productListUrl())} />;
}
const handleBack = () => navigate(productUrl(productId));
const handleSubmit = (formData: ProductVariantCreatePageSubmitData) =>
variantCreate({
variables: {
input: {
attributes: formData.attributes
.filter(attribute => attribute.value !== "")
.map(attribute => ({
id: attribute.id,
values: [attribute.value]
})),
costPrice: decimal(formData.costPrice),
price: decimal(formData.price),
product: productId,
sku: formData.sku,
stocks: formData.stocks.map(stock => ({
quantity: parseInt(stock.value, 0),
warehouse: stock.id
})),
trackInventory: true,
weight: weight(formData.weight)
}
}
});
const handleVariantClick = (id: string) =>
navigate(productVariantEditUrl(productId, id));
const disableForm = productLoading || variantCreateResult.loading;
return (
<>
<WindowTitle
title={intl.formatMessage({
defaultMessage: "Create variant",
description: "window title"
})}
/>
<ProductVariantCreatePage
currencySymbol={shop?.defaultCurrency}
disabled={disableForm}
errors={variantCreateResult.data?.productVariantCreate.errors || []}
header={intl.formatMessage({
defaultMessage: "Create Variant",
description: "header"
})}
product={data?.product}
onBack={handleBack}
onSubmit={handleSubmit}
onVariantClick={handleVariantClick}
saveButtonBarState={variantCreateResult.status}
warehouses={
warehouses.data?.warehouses.edges.map(edge => edge.node) || []
}
weightUnit={shop?.defaultWeightUnit}
/>
</>
);
};
export default ProductVariant;