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

Use query hooks in product image viiew

Browse source
This commit is contained in:
dominik-zeglen 2020-08-24 12:14:59 +02:00
parent 4df1c71a79
commit b1fd1c3243
2 changed files with 78 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/products/queries.ts
View file

@ -252,7 +252,7 @@ const productImageQuery = gql`
} }
} }
`; `;
export const TypedProductImageQuery = TypedQuery< export const useProductImageQuery = makeQuery<
ProductImageById, ProductImageById,
ProductImageByIdVariables ProductImageByIdVariables
>(productImageQuery); >(productImageQuery);

63
src/products/views/ProductImage.tsx
View file

@ -7,14 +7,12 @@ import { commonMessages } from "@saleor/intl";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import { maybe } from "../../misc";
import ProductImagePage from "../components/ProductImagePage"; import ProductImagePage from "../components/ProductImagePage";
import { import {
TypedProductImageDeleteMutation, useProductImageDeleteMutation,
TypedProductImageUpdateMutation useProductImageUpdateMutation
} from "../mutations"; } from "../mutations";
import { TypedProductImageQuery } from "../queries"; import { useProductImageQuery } from "../queries";
import { ProductImageUpdate } from "../types/ProductImageUpdate";
import { import {
productImageUrl, productImageUrl,
ProductImageUrlQueryParams, ProductImageUrlQueryParams,
@ -38,36 +36,37 @@ export const ProductImage: React.FC<ProductImageProps> = ({
const intl = useIntl(); const intl = useIntl();
const handleBack = () => navigate(productUrl(productId)); const handleBack = () => navigate(productUrl(productId));
const handleUpdateSuccess = (data: ProductImageUpdate) => {
const { data, loading } = useProductImageQuery({
displayLoader: true,
variables: {
imageId,
productId
}
});
const [updateImage, updateResult] = useProductImageUpdateMutation({
onCompleted: data => {
if (data.productImageUpdate.errors.length === 0) { if (data.productImageUpdate.errors.length === 0) {
notify({ notify({
status: "success", status: "success",
text: intl.formatMessage(commonMessages.savedChanges) text: intl.formatMessage(commonMessages.savedChanges)
}); });
} }
}; }
return ( });
<TypedProductImageQuery
displayLoader const [deleteImage, deleteResult] = useProductImageDeleteMutation({
variables={{ onCompleted: handleBack
imageId, });
productId
}}
>
{({ data, loading }) => {
const product = data?.product; const product = data?.product;
if (product === null) { if (product === null) {
return <NotFoundPage onBack={() => navigate(productListUrl())} />; return <NotFoundPage onBack={() => navigate(productListUrl())} />;
} }
return ( const handleDelete = () => deleteImage({ variables: { id: imageId } });
<TypedProductImageUpdateMutation onCompleted={handleUpdateSuccess}>
{(updateImage, updateResult) => (
<TypedProductImageDeleteMutation onCompleted={handleBack}>
{(deleteImage, deleteResult) => {
const handleDelete = () =>
deleteImage({ variables: { id: imageId } });
const handleImageClick = (id: string) => () => const handleImageClick = (id: string) => () =>
navigate(productImageUrl(productId, id)); navigate(productImageUrl(productId, id));
const handleUpdate = (formData: { description: string }) => { const handleUpdate = (formData: { description: string }) => {
@ -78,15 +77,15 @@ export const ProductImage: React.FC<ProductImageProps> = ({
} }
}); });
}; };
const image = data && data.product && data.product.mainImage; const image = data?.product?.mainImage;
return ( return (
<> <>
<ProductImagePage <ProductImagePage
disabled={loading} disabled={loading}
product={maybe(() => data.product.name)} product={data?.product?.name}
image={image || null} image={image || null}
images={maybe(() => data.product.images)} images={data?.product?.images}
onBack={handleBack} onBack={handleBack}
onDelete={() => onDelete={() =>
navigate( navigate(
@ -100,9 +99,7 @@ export const ProductImage: React.FC<ProductImageProps> = ({
saveButtonBarState={updateResult.status} saveButtonBarState={updateResult.status}
/> />
<ActionDialog <ActionDialog
onClose={() => onClose={() => navigate(productImageUrl(productId, imageId), true)}
navigate(productImageUrl(productId, imageId), true)
}
onConfirm={handleDelete} onConfirm={handleDelete}
open={params.action === "remove"} open={params.action === "remove"}
title={intl.formatMessage({ title={intl.formatMessage({
@ -118,13 +115,5 @@ export const ProductImage: React.FC<ProductImageProps> = ({
</ActionDialog> </ActionDialog>
</> </>
); );
}}
</TypedProductImageDeleteMutation>
)}
</TypedProductImageUpdateMutation>
);
}}
</TypedProductImageQuery>
);
}; };
export default ProductImage; export default ProductImage;