fixes the deletion that was not working

src/client/components/controls/Button/index.js

@@ -25,7 +25,7 @@ class Button extends Component {
       ...this.props,
       className: classes,
       onClick: this.props.onClick,
-      disabled: this.props.disabled
+      disabled: this.props.disabled,
     };
   }
 
@@ -33,14 +33,20 @@ class Button extends Component {
     switch (this.props.el) {
       case 'link':
         return (
-          <Link {...this.buttonProps} to={this.props.to ? this.props.to : this.props.url}>
+          <Link
+            {...this.buttonProps}
+            to={this.props.to ? this.props.to : this.props.url}
+          >
             {this.props.children}
           </Link>
         );
 
       case 'anchor':
         return (
-          <a {...this.buttonProps} href={this.props.url}>
+          <a
+            {...this.buttonProps}
+            href={this.props.url}
+          >
             {this.props.children}
           </a>
         );

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

@@ -1,4 +1,4 @@
-import React, { useState, useReducer, useCallback } from 'react';
+import React, { useState, useReducer } from 'react';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import flatten, { unflatten } from 'flat';
@@ -18,14 +18,20 @@ const reduceToFieldNames = fields => fields.reduce((acc, field) => {
 }, []);
 
 const reindexRows = ({
-  fieldName, fields, rowFieldNamesAsArray, totalRows, index: adjustmentIndex, type,
+  fieldName, fields, rowFieldNamesAsArray, totalRows, index: adjustmentIndex, adjustmentType,
 }) => {
   return Array.from(Array(totalRows).keys()).reduce((reindexedRows, _, rowIndex) => {
     const currentRow = rowFieldNamesAsArray.reduce((fieldAcc, rowFieldName) => {
       let newIndex;
-      switch (type) {
+      const defaultFieldValues = {
+        value: null,
+        valid: true,
+      };
+
+      switch (adjustmentType) {
         case 'addAfter':
           newIndex = rowIndex <= adjustmentIndex ? rowIndex : rowIndex + 1;
+
           if (rowIndex === adjustmentIndex) {
             return {
               ...fieldAcc,
@@ -38,12 +44,12 @@ const reindexRows = ({
           };
 
         case 'remove':
-          if (rowIndex === adjustmentIndex) return { ...fieldAcc };
+          if (rowIndex === adjustmentIndex) return fieldAcc;
 
           newIndex = rowIndex < adjustmentIndex ? rowIndex : rowIndex - 1;
           return {
             ...fieldAcc,
-            [`${fieldName}.${newIndex}.${rowFieldName}`]: fields[`${fieldName}.${rowIndex}.${rowFieldName}`],
+            [`${fieldName}.${newIndex}.${rowFieldName}`]: fields[`${fieldName}.${rowIndex}.${rowFieldName}`] || { ...defaultFieldValues },
           };
 
         default:
@@ -83,7 +89,7 @@ const Form = (props) => {
   const { addStatus } = useStatusList();
 
   function adjustRows({
-    index, fieldName, fields: fieldsForInsert, totalRows, type,
+    index, fieldName, fields: fieldsForInsert, totalRows, adjustmentType,
   }) {
     const rowFieldNamesAsArray = reduceToFieldNames(fieldsForInsert);
     const reindexedRows = reindexRows({
@@ -92,16 +98,20 @@ const Form = (props) => {
       rowFieldNamesAsArray,
       totalRows,
       index,
-      type,
+      adjustmentType,
     });
 
     const stateWithoutFields = { ...fields };
     Array.from(Array(totalRows).keys()).forEach((rowIndex) => {
       rowFieldNamesAsArray.forEach((rowFieldName) => { delete stateWithoutFields[`${fieldName}.${rowIndex}.${rowFieldName}`]; });
     });
+    console.log({
+      ...stateWithoutFields,
+      ...reindexedRows,
+    });
 
     dispatchFields({
-      type,
+      type: 'replace',
       value: {
         ...stateWithoutFields,
         ...reindexedRows,

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

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import fieldTypes from '../field-types';
 

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

@@ -8,7 +8,6 @@ import RepeatFieldButton from '../../../controls/RepeatFieldButton';
 import Button from '../../../controls/Button';
 import X from '../../../graphics/X';
 
-
 import './index.scss';
 
 const baseClass = 'field-repeater';
@@ -34,7 +33,7 @@ const Repeater = (props) => {
       fieldName: name,
       totalRows: internalRowCount,
       fields,
-      type: 'addAfter',
+      adjustmentType: 'addAfter',
     });
   }
 
@@ -45,7 +44,7 @@ const Repeater = (props) => {
       fieldName: name,
       totalRows: internalRowCount,
       fields,
-      type: 'remove',
+      adjustmentType: 'remove',
     });
   }
 
@@ -59,6 +58,10 @@ const Repeater = (props) => {
         className="repeater"
       >
 
+        {iterableInternalRowCount.length === 0
+          && (
+            <RepeatFieldButton onClick={() => addNewRow({ rowIndex: 0 })} />
+          )}
         {iterableInternalRowCount.map((_, rowIndex) => {
           return (
             <React.Fragment key={rowIndex}>