hook remove epoch to dispatch REMOVE_EPOCH

src/components/Epochs.js

@@ -18,14 +18,19 @@ const Epochs = props => {
 
   const removeEpoch = (e, epochName) => {
     e.preventDefault()
-    let newEpochs = props.epochs.filter(epoch => epoch.name !== epochName);
-    props.setEpochs(newEpochs)
+    props.dispatch({
+      type: 'REMOVE_EPOCH',
+      value: {name: epochName}
+    });
   }
 
   const updateEpoch = (epoch, epochIndex) => {
     let updatedEpochs = [...props.epochs]
     updatedEpochs[epochIndex] = epoch
-    props.setEpochs(updatedEpochs)
+    props.dispatch({
+      type: "SET_EPOCH",
+      value: epoch
+    })
   }
 
   return (

src/components/SoundChangeSuite.js

@@ -23,9 +23,6 @@ const SoundChangeSuite = props => {
           )} 
         ></textarea>
         
-        {props.error 
-          ? <p><span className="error-message">{`Formatting errors in line(s) ${props.error.join(', ')}`}</span></p>
-          : <></>}
         <textarea 
           name="changes" 
           id="" cols="30" rows="10" 

src/reducers/stateReducer.epochs.js

@@ -2,7 +2,7 @@
 import type { stateType } from './stateReducer';
 
 export type epochAction = {
-  type: "ADD_EPOCH" | "SET_EPOCH",
+  type: "ADD_EPOCH" | "SET_EPOCH" | "REMOVE_EPOCH",
   value: {
     index?: number,
     name: string,
@@ -28,4 +28,9 @@ export const setEpoch = (state: stateType, action: epochAction): stateType => {
     ? action.value.changes 
     : mutatedEpochs[index].changes;
   return {...state, epochs: [...mutatedEpochs]}
+}
+
+export const removeEpoch = (state: stateType, action: epochAction): stateType => {
+  const mutatedEpochs = state.epochs.filter(epoch => epoch.name !== action.value.name )
+  return {...state, epochs: [...mutatedEpochs]}
 }

src/reducers/stateReducer.epochs.test.js

@@ -46,7 +46,17 @@ describe('Epochs', () => {
           {name: 'epoch 2', changes: ['']}
         ]
       }
-    );
+      );
+    });
+    
+    it('epochs returned with deleted epoch removed', () => {
+      const firstAction = {type: 'ADD_EPOCH', value: { name: 'epoch 2', changes: ['']}};
+      const stateWithTwoEpochs = stateReducer(state, firstAction);
+      const secondAction = {type: 'REMOVE_EPOCH', value: {index: 0, name: 'epoch 1'}}
+      expect(stateReducer(stateWithTwoEpochs, secondAction)).toEqual({
+        ...state,
+        epochs: [{ name: 'epoch 2', changes: ['']}]
+      });
   });
 
 });

src/reducers/stateReducer.js

@@ -1,7 +1,7 @@
 // @flow
 import { addLexeme, setLexicon } from './stateReducer.lexicon';
 import type { lexiconAction } from './stateReducer.lexicon';
-import { addEpoch, setEpoch } from './stateReducer.epochs';
+import { addEpoch, setEpoch, removeEpoch } from './stateReducer.epochs';
 import type { epochAction } from './stateReducer.epochs';
 import { addFeature } from './stateReducer.features';
 import type { featureAction } from './stateReducer.features';
@@ -41,31 +41,20 @@ export const stateReducer = (state: stateType, action: actionType): stateType =>
       return initState();
     }
     
-    case 'ADD_LEXEME': {
-      return addLexeme(state, action);
-    }
+    case 'ADD_LEXEME': return addLexeme(state, action);
     
-    case 'SET_LEXICON': {
-      return setLexicon(state, action);
-    }
+    case 'SET_LEXICON': return setLexicon(state, action);
 
-    case 'ADD_EPOCH': {
-      return addEpoch(state, action);
-    }
+    case 'ADD_EPOCH': return addEpoch(state, action);
 
-    case 'SET_EPOCH': {
-      return setEpoch(state, action);
-    }
+    case 'SET_EPOCH': return setEpoch(state, action);
 
-    case 'ADD_FEATURE': {
-      return addFeature(state, action);
-    }
+    case 'REMOVE_EPOCH': return removeEpoch(state, action);
 
-    case 'RUN': {
-      return run(state, action);
-    }
+    case 'ADD_FEATURE': return addFeature(state, action);
 
-    default:
-      return state;
+    case 'RUN': return run(state, action);
+
+    default: return state;
   }
 }