diff --git a/public/stylesheets/_variables.scss b/public/stylesheets/_variables.scss index 14f3b60..47a3d48 100644 --- a/public/stylesheets/_variables.scss +++ b/public/stylesheets/_variables.scss @@ -3,4 +3,5 @@ $colors: ( "main": #d5bfbf, "text-input": #e8e22e, "text-input--bg": #1d191a, + "error": #ff0000 ); \ No newline at end of file diff --git a/src/PhonoChangeApplier.js b/src/PhonoChangeApplier.js index 6db5c4b..9c981ad 100644 --- a/src/PhonoChangeApplier.js +++ b/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 (
- +
diff --git a/src/components/Epochs.js b/src/components/Epochs.js index 9aee655..0b489ef 100644 --- a/src/components/Epochs.js +++ b/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 (
{ epochIndex={index} epoch={epoch} updateEpoch={updateEpoch} removeEpoch={removeEpoch} epochs={epochs} - // error={errors[epoch.name]} + error={epochError} /> {renderAddEpochButton(index)}
- )); + )}); return renderAddEpochButton(-1) } diff --git a/src/components/Output.js b/src/components/Output.js index 14f3a30..cb0ed75 100644 --- a/src/components/Output.js +++ b/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 (

Results of Run

-
{results && results.length ? renderResults() : <>}
diff --git a/src/components/SoundChangeSuite.js b/src/components/SoundChangeSuite.js index 89b36bf..b066d6e 100644 --- a/src/components/SoundChangeSuite.js +++ b/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 ( +

{error}

+ ) + return <> + } + return ( <>

{epoch.name}

+ {renderError()}