From 946f1cb930b9dc45dfc33232562c1107bf5c3584 Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Sat, 30 Nov 2019 15:58:44 -0800
Subject: [PATCH] output error message for sound change suite

---
 src/PhonoChangeApplier.js          | 13 ++++++++-----
 src/components/Epochs.js           |  9 ++++++++-
 src/components/SoundChangeSuite.js |  3 +++
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/PhonoChangeApplier.js b/src/PhonoChangeApplier.js
index a4fdd76..8d52d83 100644
--- a/src/PhonoChangeApplier.js
+++ b/src/PhonoChangeApplier.js
@@ -15,11 +15,12 @@ const PhonoChangeApplier = () => {
   const [ epochs, setEpochs ] = useState([{name: 'epoch 1', changes:['[+ feature]>[- feature]/_#']}]);
   const [ options, setOptions ] = useState({output: 'default', save: false})
   const [ results, setResults ] = useState([])
+  const [ errors, setErrors ] = useState({})
   
   const runChanges = e => {
     e.preventDefault();
-    // validate rules
-    let error = epochs.reduce((errorObject, epoch) => {
+
+    let ruleError = epochs.reduce((errorObject, epoch) => {
       epoch.changes.map((change, index) => {
         if (!change.match(/>.*\/.*_/)) errorObject[epoch.name] 
           ? errorObject[epoch.name].push(index) 
@@ -27,16 +28,18 @@ const PhonoChangeApplier = () => {
       })
       return errorObject;
     }, {})
-    console.log(error)
-    // validate lexicon
     
+    if (Object.entries(ruleError).length) return setErrors(ruleError)
+    setErrors({});
+    
+    // setResults
   }
 
   return (
     <div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
       <ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
       <Features phonemes={phonemes} setPhonemes={setPhonemes}/>
-      <Epochs epochs={epochs} setEpochs={setEpochs}/>
+      <Epochs epochs={epochs} setEpochs={setEpochs} errors={errors}/>
       <Options options={options} setOptions={setOptions} runChanges={runChanges}/>
       <Output results={results} setResults={setResults}/>
     </div>
diff --git a/src/components/Epochs.js b/src/components/Epochs.js
index 66f8e5f..e73edab 100644
--- a/src/components/Epochs.js
+++ b/src/components/Epochs.js
@@ -28,7 +28,14 @@ const Epochs = props => {
   return (
     <div className="Epochs" data-testid="Epochs">
       <h3>Sound Change Epochs</h3>
-      {props.epochs ? props.epochs.map((epoch, idx) => <SoundChangeSuite key={`epochname-${idx}`} epochIndex={idx} epoch={epoch} updateEpoch={updateEpoch} removeEpoch={removeEpoch}/>) : <></>}
+      {props.epochs 
+        ? props.epochs.map((epoch, idx) => {
+        return <SoundChangeSuite 
+          key={`epochname-${idx}`} epochIndex={idx} epoch={epoch} 
+          updateEpoch={updateEpoch} removeEpoch={removeEpoch}
+          error={props.errors[epoch.name]}
+        />}) 
+        : <></>}
       <form onSubmit={e=>addEpoch(e, props)}>
         <input type="submit" name="add-epoch" value="Add Epoch" ></input>
       </form>
diff --git a/src/components/SoundChangeSuite.js b/src/components/SoundChangeSuite.js
index 59abeef..34e04f0 100644
--- a/src/components/SoundChangeSuite.js
+++ b/src/components/SoundChangeSuite.js
@@ -23,6 +23,9 @@ 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"