enables lessons learned from Repeater in Group, adds Group to backend schema creation

src/client/components/forms/RenderFields/index.js

@@ -4,14 +4,13 @@ import fieldTypes from '../field-types';
 
 import './index.scss';
 
-const RenderFields = ({ fields, formatter, initialData }) => {
+const RenderFields = ({ fields, initialData }) => {
   if (fields) {
     return (
       <>
         {fields.map((field, i) => {
           const { defaultValue } = field;
           const FieldComponent = field.component || fieldTypes[field.type];
-          const formattedField = (formatter && typeof formatter === 'function') ? formatter(field, i) : {};
 
           if (FieldComponent) {
             return (
@@ -19,7 +18,6 @@ const RenderFields = ({ fields, formatter, initialData }) => {
                 key={i}
                 {...field}
                 defaultValue={defaultValue || initialData[field.name]}
-                {...formattedField}
               />
             );
           }
@@ -45,7 +43,6 @@ const RenderFields = ({ fields, formatter, initialData }) => {
 };
 
 RenderFields.defaultProps = {
-  formatter: null,
   initialData: {},
 };
 
@@ -53,7 +50,6 @@ RenderFields.propTypes = {
   fields: PropTypes.arrayOf(
     PropTypes.shape({}),
   ).isRequired,
-  formatter: PropTypes.func,
   initialData: PropTypes.shape({}),
 };
 

src/client/components/forms/field-types/Group/index.js

@@ -5,36 +5,32 @@ import RenderFields from '../../RenderFields';
 
 import './index.scss';
 
-const formatSubField = (parentName, subField) => {
-  const formatted = {
-    ...subField,
-    name: `${parentName}[${subField.name}]`
-  };
-
-  return formatted;
-};
-
 const Group = (props) => {
-  const { label, fields, name } = props;
+  const { label, fields, name, defaultValue } = props;
 
   return (
     <Section
       heading={label}
       className="field-group"
     >
-      <RenderFields
-        fields={fields}
-        formatter={(field) => formatSubField(name, field)}
-      />
+      <RenderFields fields={fields.map((subField) => {
+        return {
+          ...subField,
+          name: `${name}[${subField.name}]`,
+          defaultValue: defaultValue[subField.name],
+        };
+      })} />
     </Section>
   );
 };
 
 Group.defaultProps = {
   label: '',
+  defaultValue: {},
 };
 
 Group.propTypes = {
+  defaultValue: PropTypes.shape({}),
   fields: PropTypes.arrayOf(
     PropTypes.shape({}),
   ).isRequired,

src/client/components/forms/field-types/Repeater/index.js

@@ -14,7 +14,6 @@ const Repeater = (props) => {
         <RenderFields
           fields={fields.map((subField, i) => {
             let defaultSubValue = null;
-            const subFieldName = `${name}[${i}][${subField.name}]`;
 
             if (defaultValue[i] && defaultValue[i][subField.name]) {
               defaultSubValue = defaultValue[i][subField.name];
@@ -22,7 +21,7 @@ const Repeater = (props) => {
 
             return {
               ...subField,
-              name: subFieldName,
+              name: `${name}[${i}][${subField.name}]`,
               defaultValue: defaultSubValue,
             };
           })}