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,121 +104,120 @@ 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);
 
+  const handleAttributeSelect: FormChange = event => {
+    const id = event.target.name.substr(attributeNamePrefix.length);
+
+    change({
+      target: {
+        name: "exportInfo",
+        value: {
+          ...data.exportInfo,
+          attributes: toggle(id, data.exportInfo.attributes, (a, b) => a === b)
+        }
+      }
+    });
+
+    const choice = attributeChoices.find(choice => choice.value === id);
+
+    setSelectedAttributes(
+      toggle(choice, selectedAttributes, (a, b) => a.value === b.value)
+    );
+  };
+
   return (
     <Dialog onClose={onClose} open={open} maxWidth="sm" fullWidth>
-      <Form initial={initialForm} onSubmit={onSubmit}>
+      <>
-        {({ change, data }) => {
+        <DialogTitle>
-          const handleAttributeSelect: FormChange = event => {
+          <FormattedMessage
-            const id = event.target.name.substr(attributeNamePrefix.length);
+            defaultMessage="Export Information"
+            description="export products to csv file, dialog header"
+          />
+        </DialogTitle>
+        <DialogContent>
+          <ProductExportSteps
+            currentStep={step}
+            steps={steps}
+            onStepClick={setStep}
+          />
+          {step === ProductExportStep.INFO && (
+            <ProductExportDialogInfo
+              attributes={attributeChoices}
+              data={data}
+              selectedAttributes={selectedAttributes}
+              onAttrtibuteSelect={handleAttributeSelect}
+              onChange={change}
+              {...fetchMoreProps}
+            />
+          )}
+          {step === ProductExportStep.SETTINGS && (
+            <ProductExportDialogSettings
+              data={data}
+              errors={dialogErrors}
+              productQuantity={productQuantity}
+              selectedProducts={selectedProducts}
+              onChange={change}
+            />
+          )}
+        </DialogContent>
 
-            change({
+        {notFormErrors.length > 0 && (
-              target: {
+          <DialogContent>
-                name: "exportInfo",
+            {notFormErrors.map(err => (
-                value: {
+              <Typography color="error" key={err.field + err.code}>
-                  ...data.exportInfo,
+                {getExportErrorMessage(err, intl)}
-                  attributes: toggle(
+              </Typography>
-                    id,
+            ))}
-                    data.exportInfo.attributes,
+          </DialogContent>
-                    (a, b) => a === b
+        )}
-                  )
-                }
-              }
-            });
 
-            const choice = attributeChoices.find(choice => choice.value === id);
+        <DialogActions>
-
+          {step === ProductExportStep.INFO && (
-            setSelectedAttributes(
+            <Button onClick={onClose} data-test="cancel">
-              toggle(choice, selectedAttributes, (a, b) => a.value === b.value)
+              <FormattedMessage {...buttonMessages.cancel} />
-            );
+            </Button>
-          };
+          )}
-
+          {step === ProductExportStep.SETTINGS && (
-          return (
+            <Button onClick={prev} data-test="back">
-            <>
+              <FormattedMessage {...buttonMessages.back} />
-              <DialogTitle>
+            </Button>
-                <FormattedMessage
+          )}
-                  defaultMessage="Export Information"
+          {step === ProductExportStep.INFO && (
-                  description="export products to csv file, dialog header"
+            <Button
-                />
+              color="primary"
-              </DialogTitle>
+              variant="contained"
-              <DialogContent>
+              onClick={next}
-                <ProductExportSteps
+              data-test="next"
-                  currentStep={step}
+            >
-                  steps={steps}
+              <FormattedMessage {...buttonMessages.nextStep} />
-                  onStepClick={setStep}
+            </Button>
-                />
+          )}
-                {step === ProductExportStep.INFO && (
+          {step === ProductExportStep.SETTINGS && (
-                  <ProductExportDialogInfo
+            <ConfirmButton
-                    attributes={attributeChoices}
+              transitionState={confirmButtonState}
-                    data={data}
+              variant="contained"
-                    selectedAttributes={selectedAttributes}
+              type="submit"
-                    onAttrtibuteSelect={handleAttributeSelect}
+              data-test="submit"
-                    onChange={change}
+              onClick={submit}
-                    {...fetchMoreProps}
+            >
-                  />
+              <FormattedMessage
-                )}
+                defaultMessage="export products"
-                {step === ProductExportStep.SETTINGS && (
+                description="export products to csv file, button"
-                  <ProductExportDialogSettings
+              />
-                    data={data}
+            </ConfirmButton>
-                    errors={dialogErrors}
+          )}
-                    productQuantity={productQuantity}
+        </DialogActions>
-                    selectedProducts={selectedProducts}
+      </>
-                    onChange={change}
-                  />
-                )}
-              </DialogContent>
-
-              {notFormErrors.length > 0 && (
-                <DialogContent>
-                  {notFormErrors.map(err => (
-                    <Typography color="error" key={err.field + err.code}>
-                      {getExportErrorMessage(err, intl)}
-                    </Typography>
-                  ))}
-                </DialogContent>
-              )}
-
-              <DialogActions>
-                {step === ProductExportStep.INFO && (
-                  <Button onClick={onClose} data-test="cancel">
-                    <FormattedMessage {...buttonMessages.cancel} />
-                  </Button>
-                )}
-                {step === ProductExportStep.SETTINGS && (
-                  <Button onClick={prev} data-test="back">
-                    <FormattedMessage {...buttonMessages.back} />
-                  </Button>
-                )}
-                {step === ProductExportStep.INFO && (
-                  <Button
-                    color="primary"
-                    variant="contained"
-                    onClick={next}
-                    data-test="next"
-                  >
-                    <FormattedMessage {...buttonMessages.nextStep} />
-                  </Button>
-                )}
-                {step === ProductExportStep.SETTINGS && (
-                  <ConfirmButton
-                    transitionState={confirmButtonState}
-                    variant="contained"
-                    type="submit"
-                    data-test="submit"
-                  >
-                    <FormattedMessage
-                      defaultMessage="export products"
-                      description="export products to csv file, button"
-                    />
-                  </ConfirmButton>
-                )}
-              </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 && (