add error messaging for improper rules

public/stylesheets/_variables.scss

@@ -3,4 +3,5 @@ $colors: (
   "main": #d5bfbf,
   "text-input": #e8e22e,
   "text-input--bg": #1d191a,
+  "error": #ff0000
   );

src/PhonoChangeApplier.js

@@ -16,13 +16,13 @@ const PhonoChangeApplier = () => {
     {},
     initState
   )
-  const { lexicon, phones, phonemes, epochs, options, features, results } = state;
+  const { lexicon, phones, phonemes, epochs, options, features, results, errors } = state;
 
   return (
     <div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
       <ProtoLang lexicon={lexicon} dispatch={dispatch}/>
       <Features phones={phones} features={features} dispatch={dispatch}/>
-      <Epochs epochs={epochs} dispatch={dispatch} />
+      <Epochs epochs={epochs} errors={errors} dispatch={dispatch} />
       <Options options={options} dispatch={dispatch}/>
       <Output results={results} options={options} dispatch={dispatch}/>
     </div>

src/components/Epochs.js

@@ -6,7 +6,7 @@ import { render } from 'react-dom';
 
 
 
-const Epochs = ({epochs, dispatch}) => {
+const Epochs = ({epochs, errors, dispatch}) => {
   
   const addEpoch = e => {
     e.preventDefault()
@@ -29,8 +29,7 @@ const Epochs = ({epochs, dispatch}) => {
     const dispatchValue = {
       name: epoch.name,
       index: epochIndex,
-      changes: epoch.changes,
-      parent: epoch.parent
+      changes: epoch.changes
     }
     dispatch({
       type: "SET_EPOCH",
@@ -48,7 +47,9 @@ const Epochs = ({epochs, dispatch}) => {
   }
 
   const renderEpochs = () => {
-    if (epochs.length) return epochs.map((epoch, index) => (
+    if (epochs.length) return epochs.map((epoch, index) => {
+      const epochError = errors.epoch ? errors.error : null
+      return (
       <div 
         className="SoundChangeSuite" 
         data-testid={`${epoch.name}_SoundChangeSuite`}
@@ -58,11 +59,11 @@ const Epochs = ({epochs, dispatch}) => {
           epochIndex={index} epoch={epoch} 
           updateEpoch={updateEpoch} removeEpoch={removeEpoch}
           epochs={epochs}
-          // error={errors[epoch.name]}
+          error={epochError}
         />
         {renderAddEpochButton(index)}
       </div>
-    ));
+    )});
     return renderAddEpochButton(-1)
   }
 

src/components/Output.js

@@ -2,7 +2,7 @@ import React from 'react';
 import './Output.scss';
 
 const Output = props => {
-  const { results, options } = props;
+  const { results, options, errors } = props;
   const renderResults = () => {
     switch(options.output) {
       case 'default':
@@ -23,10 +23,10 @@ const Output = props => {
       )
     })
   }
+
   return (
     <div className="Output" data-testid="Output">
       <h3>Results of Run</h3>
-
       <div data-testid="Output-lexicon" className="Output__container">
         {results && results.length ? renderResults() : <></>}
       </div>

src/components/SoundChangeSuite.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import './SoundChangeSuite.scss';
 
 const SoundChangeSuite = props => {
-  const { epochIndex, removeEpoch, epochs } = props;
+  const { epochIndex, error, removeEpoch, epochs } = props;
   const [ epoch, setEpoch ] = useState(props.epoch ? props.epoch : {name:'', changes:[''], parent:'none'});
   
   const changeHandler = (e,cb) => {
@@ -60,9 +60,17 @@ const SoundChangeSuite = props => {
     return <></>
   }
 
+  const renderError = () => {
+    if (error) return (
+      <p className="error">{error}</p>
+    )
+    return <></>
+  }
+
   return (
     <>
       <h4>{epoch.name}</h4>
+      {renderError()}
       <form className="SoundChangeSuite__form" data-testid={`${epoch.name}_SoundChangeSuite_changes`}>
         <label htmlFor={`${epoch.name}-name`}>
           Name: 

src/index.scss

@@ -17,4 +17,8 @@ body {
     font-family: 'Fira Code', monospace;
   }
 
+  p.error {
+    color: map-get($colors, 'error');
+  }
+
 }

src/reducers/reducer.epochs.js

@@ -7,12 +7,12 @@ export type epochAction = {
     index?: number,
     name: string,
     changes?: Array<string>,
-    parent: string
+    parent?: string
   }
 }
 
 export const addEpoch = (state: stateType, action: epochAction): stateType => {
-  const newEpoch = { name: action.value.name, changes: action.value.changes || [''] };
+  const newEpoch = { name: action.value.name, changes: action.value.changes || [''], parent: null};
   return {...state, epochs: [...state.epochs, newEpoch]}
 }
 

src/reducers/reducer.results.js

@@ -170,7 +170,8 @@ export const decomposeRules = (epoch: epochType, phones: {[key: string]: phoneTy
       .map(decomposeRule)
       .map(mapRuleBundleToFeatureBundle(phones));
   } catch (err) {
-    return err;
+    const ruleError = {epoch: epoch.name, error: err}
+    throw ruleError;
   }
 }