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

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