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

client/src/components/formHelpers/FormFields.js

@@ -9,20 +9,11 @@ import {
   FormGroup,
   HelpBlock
 } from '@freecodecamp/react-bootstrap';
+import { Field } from 'react-final-form';
 
 const propTypes = {
-  errors: PropTypes.objectOf(PropTypes.string),
-  fields: PropTypes.objectOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      onChange: PropTypes.func.isRequired,
-      value: PropTypes.string.isRequired
-    })
-  ).isRequired,
+  fields: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
   options: PropTypes.shape({
-    errors: PropTypes.objectOf(
-      PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(null)])
-    ),
     ignored: PropTypes.arrayOf(PropTypes.string),
     placeholder: PropTypes.bool,
     required: PropTypes.arrayOf(PropTypes.string),
@@ -31,7 +22,7 @@ const propTypes = {
 };
 
 function FormFields(props) {
-  const { errors = {}, fields, options = {} } = props;
+  const { fields, options = {} } = props;
   const {
     ignored = [],
     placeholder = true,
@@ -40,38 +31,43 @@ function FormFields(props) {
   } = options;
   return (
     <div>
-      {Object.keys(fields)
+      {fields
         .filter(field => !ignored.includes(field))
-        .map(key => fields[key])
-        .map(({ name, onChange, value, pristine }) => {
-          const key = kebabCase(name);
-          const type = name in types ? types[name] : 'text';
-          return (
-            <Col key={key} xs={12}>
-              <FormGroup>
-                {type === 'hidden' ? null : (
-                  <ControlLabel htmlFor={key}>{startCase(name)}</ControlLabel>
-                )}
-                <FormControl
-                  componentClass={type === 'textarea' ? type : 'input'}
-                  id={key}
-                  name={name}
-                  onChange={onChange}
-                  placeholder={placeholder ? name : ''}
-                  required={required.includes(name)}
-                  rows={4}
-                  type={type}
-                  value={value}
-                />
-                {name in errors && !pristine ? (
-                  <HelpBlock>
-                    <Alert bsStyle='danger'>{errors[name]}</Alert>
-                  </HelpBlock>
-                ) : null}
-              </FormGroup>
-            </Col>
-          );
-        })}
+        .map(name => (
+          <Field key={`${name}-field`} name={name}>
+            {({ input: { value, onChange }, meta: { pristine, error } }) => {
+              const key = kebabCase(name);
+              const type = name in types ? types[name] : 'text';
+              return (
+                <Col key={key} xs={12}>
+                  <FormGroup>
+                    {type === 'hidden' ? null : (
+                      <ControlLabel htmlFor={key}>
+                        {startCase(name)}
+                      </ControlLabel>
+                    )}
+                    <FormControl
+                      componentClass={type === 'textarea' ? type : 'input'}
+                      id={key}
+                      name={name}
+                      onChange={onChange}
+                      placeholder={placeholder ? name : ''}
+                      required={required.includes(name)}
+                      rows={4}
+                      type={type}
+                      value={value}
+                    />
+                    {error && !pristine ? (
+                      <HelpBlock>
+                        <Alert bsStyle='danger'>{error}</Alert>
+                      </HelpBlock>
+                    ) : null}
+                  </FormGroup>
+                </Col>
+              );
+            }}
+          </Field>
+        ))}
     </div>
   );
 }