Merge pull request #644 from mirumee/fix/reset-export-dialog

Reset modal state after closing

CHANGELOG.md

@@ -19,6 +19,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Update to newest schema - #638 by @dominik-zeglen
 - Fix missing save button - #636 by @dominik-zeglen
 - Fix user avatars - #639 by @dominik-zeglen
+- Reset modal state after closing - #644 by @dominik-zeglen
 
 ## 2.10.1
 

src/products/components/ProductExportDialog/ProductExportDialog.tsx

@@ -8,11 +8,11 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import makeCreatorSteps, { Step } from "@saleor/components/CreatorSteps";
-import Form from "@saleor/components/Form";
 import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
 import { ExportErrorFragment } from "@saleor/fragments/types/ExportErrorFragment";
-import { FormChange } from "@saleor/hooks/useForm";
+import useForm, { FormChange } from "@saleor/hooks/useForm";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
+import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
 import useWizard from "@saleor/hooks/useWizard";
 import { buttonMessages } from "@saleor/intl";
 import { SearchAttributes_search_edges_node } from "@saleor/searches/types/SearchAttributes";
@@ -104,13 +104,17 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
   const [selectedAttributes, setSelectedAttributes] = React.useState<
     MultiAutocompleteChoiceType[]
   >([]);
+  const { change, data, reset, submit } = useForm(initialForm, onSubmit);
+
+  useModalDialogOpen(open, {
+    onClose: () => {
+      reset();
+      setStep(ProductExportStep.INFO);
+    }
+  });
 
   const attributeChoices = mapNodeToChoice(attributes);
 
-  return (
-    <Dialog onClose={onClose} open={open} maxWidth="sm" fullWidth>
-      <Form initial={initialForm} onSubmit={onSubmit}>
-        {({ change, data }) => {
   const handleAttributeSelect: FormChange = event => {
     const id = event.target.name.substr(attributeNamePrefix.length);
 
@@ -119,11 +123,7 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
         name: "exportInfo",
         value: {
           ...data.exportInfo,
-                  attributes: toggle(
+          attributes: toggle(id, data.exportInfo.attributes, (a, b) => a === b)
-                    id,
-                    data.exportInfo.attributes,
-                    (a, b) => a === b
-                  )
         }
       }
     });
@@ -136,6 +136,7 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
   };
 
   return (
+    <Dialog onClose={onClose} open={open} maxWidth="sm" fullWidth>
       <>
         <DialogTitle>
           <FormattedMessage
@@ -207,6 +208,7 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
               variant="contained"
               type="submit"
               data-test="submit"
+              onClick={submit}
             >
               <FormattedMessage
                 defaultMessage="export products"
@@ -216,9 +218,6 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
           )}
         </DialogActions>
       </>
-          );
-        }}
-      </Form>
     </Dialog>
   );
 };

src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx

@@ -190,6 +190,7 @@ const FieldAccordion: React.FC<AccordionProps & {
                     }
                   })
                 }
+                key={field}
               />
             ))}
             {selectedFields.length > maxChips && (
@@ -331,6 +332,7 @@ const ProductExportDialogInfo: React.FC<ProductExportDialogInfoProps> = ({
                       }
                     })
                   }
+                  key={attribute.value}
                 />
               ))}
               {selectedAttributes.length > maxChips && (