Fix not updated file attribute field on delete (#911)

src/pages/components/PageDetailsPage/form.tsx

@@ -29,7 +29,7 @@ import { mapMetadataItemToInput } from "@saleor/utils/maps";
 import getMetadata from "@saleor/utils/metadata/getMetadata";
 import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import useRichText from "@saleor/utils/richText/useRichText";
-import React, { useEffect } from "react";
+import React from "react";
 
 export interface PageFormData extends MetadataFormData {
   isPublished: boolean;
@@ -144,10 +144,6 @@ function usePageForm(
     triggerChange
   );
 
-  useEffect(() => {
-    attributesWithNewFileValue.set([]);
-  }, [page]);
-
   // Need to make it function to always have content.current up to date
   const getData = (): PageData => ({
     ...form.data,
@@ -165,9 +161,19 @@ function usePageForm(
     attributesWithNewFileValue: attributesWithNewFileValue.data
   });
 
+  const handleSubmit = async (data: PageData) => {
+    const errors = await onSubmit(data);
+
+    if (!errors?.length && pageExists) {
+      attributesWithNewFileValue.set([]);
+    }
+
+    return errors;
+  };
+
   const submit = () =>
     pageExists
-      ? handleFormSubmit(getSubmitData(), onSubmit, setChanged)
+      ? handleFormSubmit(getSubmitData(), handleSubmit, setChanged)
       : onSubmit(getSubmitData());
 
   return {

src/products/components/ProductUpdatePage/form.tsx

@@ -37,7 +37,7 @@ import getMetadata from "@saleor/utils/metadata/getMetadata";
 import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import useRichText from "@saleor/utils/richText/useRichText";
 import { diff } from "fast-array-diff";
-import React, { useEffect } from "react";
+import React from "react";
 
 import { ProductStockFormsetData, ProductStockInput } from "../ProductStocks";
 
@@ -260,10 +260,6 @@ function useProductUpdateForm(
     triggerChange
   );
 
-  useEffect(() => {
-    attributesWithNewFileValue.set([]);
-  }, [product]);
-
   const data: ProductUpdateData = {
     ...form.data,
     attributes: getAttributesDisplayData(
@@ -284,8 +280,18 @@ function useProductUpdateForm(
     description: description.current
   });
 
+  const handleSubmit = async (data: ProductUpdateSubmitData) => {
+    const errors = await onSubmit(data);
+
+    if (!errors?.length) {
+      attributesWithNewFileValue.set([]);
+    }
+
+    return errors;
+  };
+
   const submit = async () =>
-    handleFormSubmit(getSubmitData(), onSubmit, setChanged);
+    handleFormSubmit(getSubmitData(), handleSubmit, setChanged);
 
   const disabled =
     !opts.hasVariants &&

src/products/components/ProductVariantPage/form.tsx

@@ -29,7 +29,7 @@ import { mapMetadataItemToInput } from "@saleor/utils/maps";
 import getMetadata from "@saleor/utils/metadata/getMetadata";
 import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import { diff } from "fast-array-diff";
-import React, { useEffect } from "react";
+import React from "react";
 
 import handleFormSubmit from "../../../utils/handlers/handleFormSubmit";
 import { ProductStockInput } from "../ProductStocks";
@@ -166,10 +166,6 @@ function useProductVariantUpdateForm(
     triggerChange();
   };
 
-  useEffect(() => {
-    attributesWithNewFileValue.set([]);
-  }, [variant]);
-
   const dataStocks = stocks.data.map(stock => stock.id);
   const variantStocks = variant?.stocks.map(stock => stock.warehouse.id) || [];
   const stockDiff = diff(variantStocks, dataStocks);
@@ -206,7 +202,17 @@ function useProductVariantUpdateForm(
     updateStocks
   };
 
-  const submit = () => handleFormSubmit(submitData, onSubmit, setChanged);
+  const handleSubmit = async (data: ProductVariantUpdateSubmitData) => {
+    const errors = await onSubmit(data);
+
+    if (!errors?.length) {
+      attributesWithNewFileValue.set([]);
+    }
+
+    return errors;
+  };
+
+  const submit = () => handleFormSubmit(submitData, handleSubmit, setChanged);
 
   return {
     change: handleChange,