swaps flat for flatley, enables nested repeaters

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

@@ -1,7 +1,7 @@
 import React, { useState, useReducer } from 'react';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { unflatten } from 'flat';
+import { unflatten } from 'flatley';
 import FormContext from './Context';
 import { useLocale } from '../../utilities/Locale';
 import { useStatusList } from '../../modules/Status';
@@ -123,6 +123,8 @@ const Form = (props) => {
     baseClass,
   ].filter(Boolean).join(' ');
 
+  // console.log(fields);
+
   return (
     <form
       noValidate

src/client/components/forms/Form/reducer.js

@@ -1,4 +1,4 @@
-import { unflatten, flatten } from 'flat';
+import { unflatten, flatten } from 'flatley';
 
 const splitRowsFromState = (state, name) => {
   // Take a copy of state
@@ -6,12 +6,14 @@ const splitRowsFromState = (state, name) => {
 
   const rowsFromStateObject = {};
 
+  const namePrefixToRemove = name.substring(0, name.lastIndexOf('.') + 1);
+
   // Loop over all keys from state
   // If the key begins with the name of the parent field,
   // Add value to rowsFromStateObject and delete it from remaining state
   Object.keys(state).forEach((key) => {
     if (key.indexOf(`${name}.`) === 0) {
-      rowsFromStateObject[key] = state[key];
+      rowsFromStateObject[key.replace(namePrefixToRemove, '')] = state[key];
       delete remainingState[key];
     }
   });
@@ -19,11 +21,20 @@ const splitRowsFromState = (state, name) => {
   const rowsFromState = unflatten(rowsFromStateObject);
 
   return {
-    rowsFromState: rowsFromState[name] || [],
+    rowsFromState: rowsFromState[name.replace(namePrefixToRemove, '')] || [],
     remainingState,
   };
 };
 
+const flattenFilters = [{
+  test: (_, value) => {
+    const hasValidProperty = Object.prototype.hasOwnProperty.call(value, 'valid');
+    const hasValueProperty = Object.prototype.hasOwnProperty.call(value, 'value');
+
+    return (hasValidProperty && hasValueProperty);
+  },
+}];
+
 function fieldReducer(state, action) {
   switch (action.type) {
     case 'REPLACE_ALL':
@@ -39,7 +50,7 @@ function fieldReducer(state, action) {
 
       return {
         ...remainingState,
-        ...(flatten({ [name]: rowsFromState }, { maxDepth: 3 })),
+        ...(flatten({ [name]: rowsFromState }, { filters: flattenFilters })),
       };
     }
 
@@ -48,14 +59,23 @@ function fieldReducer(state, action) {
       const { rowsFromState, remainingState } = splitRowsFromState(state, name);
 
       // Get names of sub fields
-      const subFields = fields.reduce((acc, field) => ({ ...acc, [field.name]: {} }), {});
+      const subFields = fields.reduce((acc, field) => {
+        if (field.type === 'flexible' || field.type === 'repeater') {
+          return acc;
+        }
+
+        return {
+          ...acc,
+          [field.name]: {},
+        };
+      }, {});
 
       // Add new object containing subfield names to rowsFromState array
       rowsFromState.splice(rowIndex + 1, 0, subFields);
 
       return {
         ...remainingState,
-        ...(flatten({ [name]: rowsFromState }, { maxDepth: 3 })),
+        ...(flatten({ [name]: rowsFromState }, { filters: flattenFilters })),
       };
     }