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,
ProductImageByIdVariables
>(productImageQuery);

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

@ -7,14 +7,12 @@ import { commonMessages } from "@saleor/intl";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { maybe } from "../../misc";
import ProductImagePage from "../components/ProductImagePage";
import {
TypedProductImageDeleteMutation,
TypedProductImageUpdateMutation
useProductImageDeleteMutation,
useProductImageUpdateMutation
} from "../mutations";
import { TypedProductImageQuery } from "../queries";
import { ProductImageUpdate } from "../types/ProductImageUpdate";
import { useProductImageQuery } from "../queries";
import {
productImageUrl,
ProductImageUrlQueryParams,
@ -38,93 +36,84 @@ export const ProductImage: React.FC<ProductImageProps> = ({
const intl = useIntl();
const handleBack = () => navigate(productUrl(productId));
const handleUpdateSuccess = (data: ProductImageUpdate) => {
if (data.productImageUpdate.errors.length === 0) {
notify({
status: "success",
text: intl.formatMessage(commonMessages.savedChanges)
});
const { data, loading } = useProductImageQuery({
displayLoader: true,
variables: {
imageId,
productId
}
});
const [updateImage, updateResult] = useProductImageUpdateMutation({
onCompleted: data => {
if (data.productImageUpdate.errors.length === 0) {
notify({
status: "success",
text: intl.formatMessage(commonMessages.savedChanges)
});
}
}
});
const [deleteImage, deleteResult] = useProductImageDeleteMutation({
onCompleted: handleBack
});
const product = data?.product;
if (product === null) {
return <NotFoundPage onBack={() => navigate(productListUrl())} />;
}
const handleDelete = () => deleteImage({ variables: { id: imageId } });
const handleImageClick = (id: string) => () =>
navigate(productImageUrl(productId, id));
const handleUpdate = (formData: { description: string }) => {
updateImage({
variables: {
alt: formData.description,
id: imageId
}
});
};
const image = data?.product?.mainImage;
return (
<TypedProductImageQuery
displayLoader
variables={{
imageId,
productId
}}
>
{({ data, loading }) => {
const product = data?.product;
if (product === null) {
return <NotFoundPage onBack={() => navigate(productListUrl())} />;
<>
<ProductImagePage
disabled={loading}
product={data?.product?.name}
image={image || null}
images={data?.product?.images}
onBack={handleBack}
onDelete={() =>
navigate(
productImageUrl(productId, imageId, {
action: "remove"
})
)
}
return (
<TypedProductImageUpdateMutation onCompleted={handleUpdateSuccess}>
{(updateImage, updateResult) => (
<TypedProductImageDeleteMutation onCompleted={handleBack}>
{(deleteImage, deleteResult) => {
const handleDelete = () =>
deleteImage({ variables: { id: imageId } });
const handleImageClick = (id: string) => () =>
navigate(productImageUrl(productId, id));
const handleUpdate = (formData: { description: string }) => {
updateImage({
variables: {
alt: formData.description,
id: imageId
}
});
};
const image = data && data.product && data.product.mainImage;
return (
<>
<ProductImagePage
disabled={loading}
product={maybe(() => data.product.name)}
image={image || null}
images={maybe(() => data.product.images)}
onBack={handleBack}
onDelete={() =>
navigate(
productImageUrl(productId, imageId, {
action: "remove"
})
)
}
onRowClick={handleImageClick}
onSubmit={handleUpdate}
saveButtonBarState={updateResult.status}
/>
<ActionDialog
onClose={() =>
navigate(productImageUrl(productId, imageId), true)
}
onConfirm={handleDelete}
open={params.action === "remove"}
title={intl.formatMessage({
defaultMessage: "Delete Image",
description: "dialog header"
})}
variant="delete"
confirmButtonState={deleteResult.status}
>
<DialogContentText>
<FormattedMessage defaultMessage="Are you sure you want to delete this image?" />
</DialogContentText>
</ActionDialog>
</>
);
}}
</TypedProductImageDeleteMutation>
)}
</TypedProductImageUpdateMutation>
);
}}
</TypedProductImageQuery>
onRowClick={handleImageClick}
onSubmit={handleUpdate}
saveButtonBarState={updateResult.status}
/>
<ActionDialog
onClose={() => navigate(productImageUrl(productId, imageId), true)}
onConfirm={handleDelete}
open={params.action === "remove"}
title={intl.formatMessage({
defaultMessage: "Delete Image",
description: "dialog header"
})}
variant="delete"
confirmButtonState={deleteResult.status}
>
<DialogContentText>
<FormattedMessage defaultMessage="Are you sure you want to delete this image?" />
</DialogContentText>
</ActionDialog>
</>
);
};
export default ProductImage;