debug parse_latl, hook up Output to state

src/PhonoChangeApplier.js

@@ -21,7 +21,7 @@ const PhonoChangeApplier = () => {
     {},
     initState
   )
-  const { lexicon, phones, phonemes, epochs, options, features, results, errors, latl } = state;
+  const { lexicon, phones, phonemes, epochs, options, features, results, errors, latl, parseResults } = state;
 
   return (
     <>
@@ -30,7 +30,7 @@ const PhonoChangeApplier = () => {
         <Link to="/">Back to GUI</Link>
         <div className="PhonoChangeApplier PhonoChangeApplier--latl">
           <Latl latl={latl} dispatch={dispatch}/>
-          <LatlOutput results={results} options={options} errors={errors} dispatch={dispatch}/>
+          <LatlOutput results={results} options={options} parseResults={parseResults} errors={errors} dispatch={dispatch}/>
         </div>
       </Route>
 

src/components/LatlOutput.js

@@ -2,7 +2,7 @@ import React from 'react';
 import './LatlOutput.scss';
 import Output from './Output';
 
-const LatlOutput = ({results, options, dispatch, errors}) => {
+const LatlOutput = ({results, options, dispatch, errors, parseResults}) => {
   const handleClick = e => dispatchFunc => {
     e.preventDefault()
     return dispatchFunc();
@@ -61,7 +61,7 @@ const LatlOutput = ({results, options, dispatch, errors}) => {
           value="Run"
         />
       </form>
-      <Output results={results} errors={errors} options={options}/>
+      <Output results={results} errors={errors} options={options} parseResults={parseResults}/>
     </div>
   );
 }

src/components/Output.js

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

src/reducers/reducer.clear.js

@@ -1,3 +1,3 @@
 export const clearOutput = (state, action) => {
-  return { ...state, results: [], errors: {} };
+  return { ...state, results: [], errors: {}, parseResults: '' };
 }

src/reducers/reducer.latl.js

@@ -1,6 +1,6 @@
 export const setLatl = (state, action) => {
   let latl = action.value;
-  return {...state, latl};
+  return {...state, latl, parseResults: ''};
 }
 
 const getOneToken = (latl, tokens) => {
@@ -291,7 +291,6 @@ export const buildTree = tokens => {
   }
   const nodes = tokens.reduce(addToken, []);
   // return nodes
-  console.log(nodes)
   const tree = nodes.reduce(connectNodes, bareTree);
   return tree;
 }
@@ -309,12 +308,10 @@ export const parseLatl = (state, action) => {
     const latl = state.latl;
     const AST = generateAST(latl);
     Object.entries(AST).forEach(([key, value]) => state[key] = value);
-    console.log(state)
-    console.log(AST)
-    return { ...state, parseResults: 'success' }
+    return { ...state, parseResults: 'latl parsed successfully', results:[] }
   }
   catch (e) {
-    return { ...state, errors: e}
+    return { ...state, parseResults: e}
   }
 }
 

src/reducers/reducer.results.js

@@ -221,7 +221,7 @@ const transformLexemeCoda = (newLexeme, pre, post, position, phoneme, index, lex
   if (!isEnvironmentBoundByRule([phoneme], position)) return [...newLexeme, phoneme];
   const newPhoneme = transformPhoneme(phoneme, newFeatures[0], features);
   // if deletion occurs
-  if (!newPhoneme.grapheme) return [ ...newLexeme] ;
+  if (!newPhoneme || !newPhoneme.grapheme) return [ ...newLexeme] ;
   return [...newLexeme, newPhoneme];
 }
 
@@ -280,9 +280,9 @@ export const run = (state: stateType, action: resultsAction): stateType => {
     }, []);
     
     const results = passResults.map(stringifyResults);
-    return {...state, results, errors: {} }
+    return {...state, results, errors: {}, parseResults: '' }
   } catch (err) {
     console.log(err)
-    return {...state, errors: err, results:[] };
+    return {...state, errors: err, results:[], parseResults: '' };
   }
 }