patch epochs hook update function for rule validation

src/components/Epochs.js

@@ -3,23 +3,32 @@ import './Epochs.scss';
 
 import SoundChangeSuite from './SoundChangeSuite';
 
+
+
+const Epochs = props => {
+  
   const addEpoch = (e, props) => {
     e.preventDefault()
     let index = props.epochs.length + 1;
     props.setEpochs([...props.epochs, {name: `epoch ${index}`, changes:['[+ feature]>[- feature]/_#']}])
   }
 
-
-const Epochs = props => {
   const removeEpoch = (e, epochName) => {
     e.preventDefault()
     let newEpochs = props.epochs.filter(epoch => epoch.name !== epochName);
     props.setEpochs(newEpochs)
   }
+
+  const updateEpoch = (epoch, epochIndex) => {
+    let updatedEpochs = [...props.epochs]
+    updatedEpochs[epochIndex] = epoch
+    props.setEpochs(updatedEpochs)
+  }
+
   return (
     <div className="Epochs" data-testid="Epochs">
       <h3>Sound Change Epochs</h3>
-      {props.epochs ? props.epochs.map((epoch, idx) => <SoundChangeSuite key={`epochname-${idx}`} epoch={epoch} removeEpoch={removeEpoch}/>) : <></>}
+      {props.epochs ? props.epochs.map((epoch, idx) => <SoundChangeSuite key={`epochname-${idx}`} epochIndex={idx} epoch={epoch} updateEpoch={updateEpoch} removeEpoch={removeEpoch}/>) : <></>}
       <form onSubmit={e=>addEpoch(e, props)}>
         <input type="submit" name="add-epoch" value="Add Epoch" ></input>
       </form>

src/components/SoundChangeSuite.js

@@ -4,14 +4,37 @@ import './SoundChangeSuite.scss';
 const SoundChangeSuite = props => {
   const [ epoch, setEpoch ] = useState(props.epoch ? props.epoch : {name:'', changes:['']});
   
+  const changeHandler = (e,cb) => {
+    cb(e);
+    props.updateEpoch(epoch, props.epochIndex);
+  }
+
   return (
     <div className="SoundChangeSuite" data-testid={`${epoch.name}_SoundChangeSuite`}>
       <h4>{epoch.name}</h4>
       <form className="SoundChangeSuite__form" data-testid={`${epoch.name}_SoundChangeSuite_changes`}>
-        <textarea name="epoch" id="" cols="30" rows="1" value={epoch.name} onChange={e=>setEpoch({...epoch, name:e.target.value})} ></textarea>
+        
-        <textarea name="changes" id="" cols="30" rows="10" 
+        <textarea 
+          name="epoch" 
+          id="" cols="30" rows="1" 
+          value={epoch.name} 
+          onChange={e=>changeHandler(
+            e, () => setEpoch({...epoch, name:e.target.value})
+          )} 
+        ></textarea>
+        
+        <textarea 
+          name="changes" 
+          id="" cols="30" rows="10" 
           value={epoch.changes.join('\n')} 
-          onChange={e=>setEpoch({...epoch, changes:e.target.value.split(/\n/).map(change=>change === ' ' ? '[+ feature]>[- feature]/_#' : change)})}
+          onChange={e=> changeHandler(
+            e, ()=>setEpoch(
+              {...epoch, changes:e.target.value.split(/\n/).map(change=>change === ' ' 
+                ? '[+ feature]>[- feature]/_#' 
+                : change
+              )}
+            )
+          )}
         ></textarea>
       </form>
       <form onSubmit={e=>props.removeEpoch(e, epoch.name)}>