Properly rearranging fields in an array after being removed in form reducer. Fixes #174

Author: davidkpiano

src/reducers/form-reducer.js

@@ -28,6 +28,7 @@ const initialFieldState = {
   valid: true,
   validating: false,
   viewValue: null,
+  array: false,
   validity: {},
   errors: {},
 };
@@ -77,7 +78,7 @@ function setInField(state, localPath, props) {
     return icepick.assign(state, props);
   }
 
-  const field = _get(state, ['fields', localPath.join('.')], initialFieldState);
+  const field = getField(state, localPath);
 
   return icepick.setIn(
     state,
@@ -141,6 +142,7 @@ function _createFormReducer(model, initialState) {
         return setField(state, localPath, {
           blur: false, // will be deprecated
           focus: true,
+          array: Array.isArray(action.value),
         });
 
       case actionTypes.CHANGE: {
@@ -149,25 +151,51 @@ function _createFormReducer(model, initialState) {
         let setFieldDirtyState = setField(state, localPath, {
           dirty: true, // will be deprecated
           pristine: false,
+          value: action.value,
         });
 
-        const removeKeys = action.removeKeys
-          ? Object.keys(state.fields).filter((fieldKey) => {
+        if (action.removeKeys) {
+          const persistKeys = [];
+
+          const removeKeys = Object.keys(state.fields).filter((fieldKey) => {
+            const localStringPath = localPath.join('.');
+
             for (const removeKey of action.removeKeys) {
-              const removeKeyPath = localPath.concat(removeKey).join('.');
+              const removeKeyPath = `${localStringPath}.${removeKey}`;
               if (startsWith(fieldKey, removeKeyPath)) return true;
             }
 
+            if (startsWith(fieldKey, `${localStringPath}.`)) {
+              persistKeys.push(fieldKey);
+            }
+
             return false;
-          })
-          : false;
+          });
 
-        if (removeKeys) {
           removeKeys.forEach((removeKey) => {
+            setFieldDirtyState = icepick.updateIn(
+              setFieldDirtyState,
+              ['fields'],
+              (field) => icepick.dissoc(field, removeKey));
+          });
+
+          persistKeys.forEach((persistKey, index) => {
+            const newPersistKeyPath = toPath(persistKey);
+            newPersistKeyPath[localPath.length] = index;
+
+            const persistField = getField(state, persistKey);
+
+            // Update field to new key
             setFieldDirtyState = setInField(
               setFieldDirtyState,
-              toPath(removeKey),
-              initialFieldState);
+              newPersistKeyPath,
+              persistField);
+
+            // Remove old key
+            setFieldDirtyState = icepick.updateIn(
+              setFieldDirtyState,
+              ['fields'],
+              (field) => icepick.dissoc(field, persistKey));
           });
         }
 

test/form-reducer-spec.js

@@ -134,4 +134,44 @@ describe('formReducer()', () => {
 
     actions.remove('test.items', 1)(dispatch, getState);
   });
+
+  it('should clean after itself when a field is removed', (done) => {
+    const reducer = formReducer('test', {
+      items: [
+        { name: 'item1' },
+        { name: 'item2' },
+      ],
+    });
+
+    const validItem = reducer(
+      undefined,
+      actions.setValidity('test.items[0].name', true));
+    const invalidItem = reducer(
+      validItem,
+      actions.setValidity('test.items[1].name', false));
+
+    assert.isFalse(invalidItem.valid, 'form should be invalid');
+
+    let removedState;
+
+    const dispatch = action => {
+      removedState = reducer(invalidItem, action);
+      assert.isFalse(removedState.valid);
+      assert.isUndefined(removedState.fields['items.1.name']);
+    };
+
+    const getState = () => invalidItem;
+
+    actions.remove('test.items', 0)(dispatch, getState);
+
+    const dispatch2 = action => {
+      const removedState2 = reducer(removedState, action);
+      assert.isTrue(removedState2.valid);
+      done();
+    };
+
+    const getState2 = () => removedState;
+
+    actions.remove('test.items', 0)(dispatch2, getState2);
+  });
 });