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);

51
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,16 +34,13 @@ 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 => {
}
const handleCreateSuccess = (data: VariantCreate) => {
if (data.productVariantCreate.errors.length === 0) { if (data.productVariantCreate.errors.length === 0) {
notify({ notify({
status: "success", status: "success",
@ -57,15 +53,17 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
) )
); );
} }
}; }
});
const product = data?.product;
if (product === null) {
return <NotFoundPage onBack={() => navigate(productListUrl())} />;
}
return (
<TypedVariantCreateMutation onCompleted={handleCreateSuccess}>
{(variantCreate, variantCreateResult) => {
const handleBack = () => navigate(productUrl(productId)); const handleBack = () => navigate(productUrl(productId));
const handleSubmit = ( const handleSubmit = (formData: ProductVariantCreatePageSubmitData) =>
formData: ProductVariantCreatePageSubmitData
) =>
variantCreate({ variantCreate({
variables: { variables: {
input: { input: {
@ -104,10 +102,7 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
<ProductVariantCreatePage <ProductVariantCreatePage
currencySymbol={shop?.defaultCurrency} currencySymbol={shop?.defaultCurrency}
disabled={disableForm} disabled={disableForm}
errors={ errors={variantCreateResult.data?.productVariantCreate.errors || []}
variantCreateResult.data?.productVariantCreate.errors ||
[]
}
header={intl.formatMessage({ header={intl.formatMessage({
defaultMessage: "Create Variant", defaultMessage: "Create Variant",
description: "header" description: "header"
@ -118,19 +113,11 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
onVariantClick={handleVariantClick} onVariantClick={handleVariantClick}
saveButtonBarState={variantCreateResult.status} saveButtonBarState={variantCreateResult.status}
warehouses={ warehouses={
warehouses.data?.warehouses.edges.map( warehouses.data?.warehouses.edges.map(edge => edge.node) || []
edge => edge.node
) || []
} }
weightUnit={shop?.defaultWeightUnit} weightUnit={shop?.defaultWeightUnit}
/> />
</> </>
); );
}}
</TypedVariantCreateMutation>
);
}}
</TypedProductVariantCreateQuery>
);
}; };
export default ProductVariant; export default ProductVariant;