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

165
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,93 +36,84 @@ 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) => {
if (data.productImageUpdate.errors.length === 0) { const { data, loading } = useProductImageQuery({
notify({ displayLoader: true,
status: "success", variables: {
text: intl.formatMessage(commonMessages.savedChanges) 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 ( return (
<TypedProductImageQuery <>
displayLoader <ProductImagePage
variables={{ disabled={loading}
imageId, product={data?.product?.name}
productId image={image || null}
}} images={data?.product?.images}
> onBack={handleBack}
{({ data, loading }) => { onDelete={() =>
const product = data?.product; navigate(
productImageUrl(productId, imageId, {
if (product === null) { action: "remove"
return <NotFoundPage onBack={() => navigate(productListUrl())} />; })
)
} }
onRowClick={handleImageClick}
return ( onSubmit={handleUpdate}
<TypedProductImageUpdateMutation onCompleted={handleUpdateSuccess}> saveButtonBarState={updateResult.status}
{(updateImage, updateResult) => ( />
<TypedProductImageDeleteMutation onCompleted={handleBack}> <ActionDialog
{(deleteImage, deleteResult) => { onClose={() => navigate(productImageUrl(productId, imageId), true)}
const handleDelete = () => onConfirm={handleDelete}
deleteImage({ variables: { id: imageId } }); open={params.action === "remove"}
const handleImageClick = (id: string) => () => title={intl.formatMessage({
navigate(productImageUrl(productId, id)); defaultMessage: "Delete Image",
const handleUpdate = (formData: { description: string }) => { description: "dialog header"
updateImage({ })}
variables: { variant="delete"
alt: formData.description, confirmButtonState={deleteResult.status}
id: imageId >
} <DialogContentText>
}); <FormattedMessage defaultMessage="Are you sure you want to delete this image?" />
}; </DialogContentText>
const image = data && data.product && data.product.mainImage; </ActionDialog>
</>
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>
); );
}; };
export default ProductImage; export default ProductImage;