feat(client): use React Final Form instead of Redux Form (#36742)

client/src/components/formHelpers/Form.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { reduxForm } from 'redux-form';
+import { Form } from 'react-final-form';
 
 import {
   FormFields,
@@ -12,16 +12,7 @@ import {
 const propTypes = {
   buttonText: PropTypes.string,
   enableSubmit: PropTypes.bool,
-  errors: PropTypes.object,
-  fields: PropTypes.objectOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      onChange: PropTypes.func.isRequired,
-      value: PropTypes.string.isRequired
-    })
-  ),
   formFields: PropTypes.arrayOf(PropTypes.string).isRequired,
-  handleSubmit: PropTypes.func,
   hideButton: PropTypes.bool,
   id: PropTypes.string.isRequired,
   initialValues: PropTypes.object,
@@ -33,67 +24,44 @@ const propTypes = {
   submit: PropTypes.func.isRequired
 };
 
-export function DynamicForm({
-  // redux-form
-  errors,
-  fields,
-  handleSubmit,
-  fields: {
-    // eslint-disable-next-line react/prop-types
-    _meta: { allPristine }
-  },
-
-  // HOC
+function DynamicForm({
+  id,
+  formFields,
+  initialValues,
+  options,
+  submit,
   buttonText,
   enableSubmit,
-  hideButton,
-  id,
-  options,
-  submit
+  hideButton
 }) {
   return (
-    <form
-      id={`dynamic-${id}`}
-      onSubmit={handleSubmit((values, ...args) =>
+    <Form
+      initialValues={initialValues}
+      onSubmit={(values, ...args) =>
         submit(formatUrlValues(values, options), ...args)
-      )}
-      style={{ width: '100%' }}
+      }
     >
-      <FormFields
-        errors={errors}
-        fields={fields}
-        formId={id}
-        options={options}
-      />
-      <BlockSaveWrapper>
-        {hideButton ? null : (
-          <BlockSaveButton
-            disabled={
-              (allPristine && !enableSubmit) ||
-              !!Object.keys(errors).filter(key => errors[key]).length
-            }
-          >
-            {buttonText ? buttonText : null}
-          </BlockSaveButton>
-        )}
-      </BlockSaveWrapper>
-    </form>
+      {({ handleSubmit, pristine, error }) => (
+        <form
+          id={`dynamic-${id}`}
+          onSubmit={handleSubmit}
+          style={{ width: '100%' }}
+        >
+          <FormFields fields={formFields} options={options} />
+          <BlockSaveWrapper>
+            {hideButton ? null : (
+              <BlockSaveButton disabled={(pristine && !enableSubmit) || error}>
+                {buttonText ? buttonText : null}
+              </BlockSaveButton>
+            )}
+          </BlockSaveWrapper>
+        </form>
+      )}
+    </Form>
   );
 }
 
 DynamicForm.displayName = 'DynamicForm';
 DynamicForm.propTypes = propTypes;
 
-const DynamicFormWithRedux = reduxForm()(DynamicForm);
-
-export default function Form(props) {
-  return (
-    <DynamicFormWithRedux
-      {...props}
-      fields={props.formFields}
-      form={props.id}
-    />
-  );
-}
-
-Form.propTypes = propTypes;
+export default DynamicForm;