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, ProductVariantCreateData,
ProductVariantCreateDataVariables ProductVariantCreateDataVariables
>(productVariantCreateQuery); >(productVariantCreateQuery);

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

@ -12,9 +12,8 @@ import { decimal, weight } from "../../misc";
import ProductVariantCreatePage, { import ProductVariantCreatePage, {
ProductVariantCreatePageSubmitData ProductVariantCreatePageSubmitData
} from "../components/ProductVariantCreatePage"; } from "../components/ProductVariantCreatePage";
import { TypedVariantCreateMutation } from "../mutations"; import { useVariantCreateMutation } from "../mutations";
import { TypedProductVariantCreateQuery } from "../queries"; import { useProductVariantCreateQuery } from "../queries";
import { VariantCreate } from "../types/VariantCreate";
import { productListUrl, productUrl, productVariantEditUrl } from "../urls"; import { productListUrl, productUrl, productVariantEditUrl } from "../urls";
interface ProductVariantCreateProps { interface ProductVariantCreateProps {
@ -35,102 +34,90 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
} }
}); });
return ( const { data, loading: productLoading } = useProductVariantCreateQuery({
<TypedProductVariantCreateQuery displayLoader variables={{ id: productId }}> displayLoader: true,
{({ data, loading: productLoading }) => { variables: { id: productId }
const product = data?.product; });
if (product === null) { const [variantCreate, variantCreateResult] = useVariantCreateMutation({
return <NotFoundPage onBack={() => navigate(productListUrl())} />; onCompleted: data => {
} if (data.productVariantCreate.errors.length === 0) {
notify({
const handleCreateSuccess = (data: VariantCreate) => { status: "success",
if (data.productVariantCreate.errors.length === 0) { text: intl.formatMessage(commonMessages.savedChanges)
notify({ });
status: "success", navigate(
text: intl.formatMessage(commonMessages.savedChanges) productVariantEditUrl(
}); productId,
navigate( data.productVariantCreate.productVariant.id
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>
); );
}} }
</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; export default ProductVariant;