add features hook for ease of lookup in rule decomposition

src/PhonoChangeApplier.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import './PhonoChangeApplier.scss';
 import ls from 'local-storage';
 
@@ -24,19 +24,30 @@ const PhonoChangeApplier = () => {
   const [ options, setOptions ] = useState({output: 'default', save: false})
   const [ results, setResults ] = useState([])
   const [ errors, setErrors ] = useState({})
+  const [ features, setFeatures ] = useState([])
 
   const runChanges = e => {
     e.preventDefault();
 
     let ruleError = epochs.reduce((errorObject, epoch) => {
       epoch.changes.map((change, index) => {
-        if (!change.match(/>.*\/.*_/)) errorObject[epoch.name] 
-        ? errorObject[epoch.name].push(index) 
-        : errorObject[epoch.name] = [index]
+        if (!change.match(/>.*\/.*_/)) {
+          errorObject[epoch.name] 
+            ? errorObject[epoch.name].push(index) 
+            : errorObject[epoch.name] = [index]
+          errorObject[epoch.name].ruleSyntaxError = true;
+        }
+        
+        // TODO validate phoneme syntax
+        let decomposedChange = change.split('>');
+        decomposedChange = [decomposedChange[0], ...decomposedChange[1].split('/')]
+        decomposedChange = [decomposedChange[0], decomposedChange[1], ...decomposedChange[2].split('_')];
+      
       })
       return errorObject;
     }, {})
     
+    
     if (Object.entries(ruleError).length) return setErrors(ruleError)
     setErrors({});
     
@@ -57,9 +68,9 @@ const PhonoChangeApplier = () => {
         }
         startingIndex = index;
       })
-      lexicalFeatureBundles.push({[lexeme]: lexemeBundle});
+      lexicalFeatureBundles.push(lexemeBundle);
     })
-    console.log(lexicalFeatureBundles)
+    
     // apply sound changes
 
     // handle output
@@ -68,7 +79,7 @@ const PhonoChangeApplier = () => {
   return (
     <div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
       <ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
-      <Features phonemes={phonemes} setPhonemes={setPhonemes}/>
+      <Features phonemes={phonemes} setPhonemes={setPhonemes} features={features} setFeatures={setFeatures}/>
       <Epochs epochs={epochs} setEpochs={setEpochs} errors={errors}/>
       <Options options={options} setOptions={setOptions} runChanges={runChanges}/>
       <Output results={results} setResults={setResults}/>

src/components/Features.js

@@ -32,6 +32,7 @@ const Features = (props) => {
     
     let newPhonemeObject = getPhonemesFromFeatureSubmission(props, newPhonemes, feature);
     props.setPhonemes(newPhonemeObject);
+    if (!props.features || !props.features.includes(feature)) props.setFeatures([...props.features, feature])
     
     setFeature('');
     setNewPhonemes('');