hook SoundChangeSuite onChange events to dispatch SET_EPOCH

src/components/Epochs.js

@@ -25,11 +25,14 @@ const Epochs = props => {
   }
 
   const updateEpoch = (epoch, epochIndex) => {
-    let updatedEpochs = [...props.epochs]
+    const dispatchValue = {
-    updatedEpochs[epochIndex] = epoch
+      name: epoch.name,
+      index: epochIndex,
+      changes: epoch.changes
+    }
     props.dispatch({
       type: "SET_EPOCH",
-      value: epoch
+      value: dispatchValue
     })
   }
 

src/components/SoundChangeSuite.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import './SoundChangeSuite.scss';
 
 const SoundChangeSuite = props => {
@@ -9,6 +9,10 @@ const SoundChangeSuite = props => {
     props.updateEpoch(epoch, props.epochIndex);
   }
   
+  useEffect(() => {
+    props.updateEpoch(epoch, props.epochIndex);
+  }, [epoch])
+
   return (
     <div className="SoundChangeSuite" data-testid={`${epoch.name}_SoundChangeSuite`}>
       <h4>{epoch.name}</h4>
@@ -19,7 +23,9 @@ const SoundChangeSuite = props => {
           id="" cols="30" rows="1" 
           value={epoch.name} 
           onChange={e=>changeHandler(
-            e, () => setEpoch({...epoch, name:e.target.value})
+            e, () => {
+              setEpoch({...epoch, name:e.target.value})
+            }
           )} 
         ></textarea>