feat: add reset form

collective · Mar 18, 2021 · d07a79f · d07a79f
1 parent e7f4864
commit d07a79f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/src/components/Form.jsx b/src/components/Form.jsx
@@ -115,6 +115,7 @@ const Form = ({ data, id, path }) => {
 
           if (isAttachment) {
             attachments[name] = formData[name].value;
+            delete formData[name];
           }
         }
       });
@@ -137,6 +138,17 @@ const Form = ({ data, id, path }) => {
     }
   };
 
+  const resetFormState = () => {
+    setFormData({
+      ...static_fields.reduce(
+        (acc, field) => ({ ...acc, [getFieldName(field.label)]: field }),
+        {},
+      ),
+    });
+    console.log('reset state');
+    setFormState({ type: FORM_STATES.normal });
+  };
+
   useEffect(() => {
     if (submitResults?.loaded) {
       setFormState({
@@ -161,6 +173,7 @@ const Form = ({ data, id, path }) => {
       onChangeFormData={onChangeFormData}
       data={data}
       onSubmit={submit}
+      resetFormState={resetFormState}
     />
   );
 };

diff --git a/src/components/FormView.jsx b/src/components/FormView.jsx
@@ -29,6 +29,10 @@ const messages = defineMessages({
     id: 'form_empty_values_validation',
     defaultMessage: 'Fill in the required fields',
   },
+  reset: {
+    id: 'form_reset',
+    defaultMessage: 'Clear',
+  },
 });
 
 const FormView = ({
@@ -38,6 +42,7 @@ const FormView = ({
   onChangeFormData,
   data,
   onSubmit,
+  resetFormState,
 }) => {
   const intl = useIntl();
 
@@ -69,13 +74,19 @@ const FormView = ({
                 {intl.formatMessage(messages.error)}
               </Message.Header>
               <p>{formState.error}</p>
+              <Button secondary type="clear" onClick={resetFormState}>
+                {intl.formatMessage(messages.reset)}
+              </Button>
             </Message>
           ) : formState.result ? (
             <Message positive role="alert">
               <Message.Header as="h4">
                 {intl.formatMessage(messages.success)}
               </Message.Header>
               <p>{formState.result}</p>
+              <Button secondary type="clear" onClick={resetFormState}>
+                {intl.formatMessage(messages.reset)}
+              </Button>
             </Message>
           ) : (
             <Form loading={formState.loading} onSubmit={onSubmit} method="post">