From b1fd1c3243e3d63da5f827c6c2f9d55f7545f0df Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Mon, 24 Aug 2020 12:14:59 +0200
Subject: [PATCH] Use query hooks in product image viiew

---
 src/products/queries.ts             |   2 +-
 src/products/views/ProductImage.tsx | 165 +++++++++++++---------------
 2 files changed, 78 insertions(+), 89 deletions(-)

diff --git a/src/products/queries.ts b/src/products/queries.ts
index e042f7b0d..5d0f967cc 100644
--- a/src/products/queries.ts
+++ b/src/products/queries.ts
@@ -252,7 +252,7 @@ const productImageQuery = gql`
     }
   }
 `;
-export const TypedProductImageQuery = TypedQuery<
+export const useProductImageQuery = makeQuery<
   ProductImageById,
   ProductImageByIdVariables
 >(productImageQuery);
diff --git a/src/products/views/ProductImage.tsx b/src/products/views/ProductImage.tsx
index 23186bdd8..2efe9cbd5 100644
--- a/src/products/views/ProductImage.tsx
+++ b/src/products/views/ProductImage.tsx
@@ -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;