refactor components to remove unused useState hooks

src/PhonoChangeApplier.js

@@ -17,84 +17,6 @@ const PhonoChangeApplier = () => {
     initState
   )
   const { lexicon, phones, phonemes, epochs, options, features, results } = state;
-  // ! UNDONE
-  const [ errors, setErrors ] = 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]
-          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({});
-    
-    // decompose Lexical Items
-    // moving window on phonemes of each lexical item
-    let lexicalFeatureBundles = []
-    lexicon.forEach(lexeme => {
-      let lexemeBundle = [];
-      let startingIndex = 0;
-      let lastIndex = lexeme.length - 1;
-      [...lexeme].forEach((_, index) => {
-        if (phonemes[lexeme.slice(startingIndex, index + 1)] && index !== lastIndex) return;
-        if (phonemes[lexeme.slice(startingIndex, index + 1)]) return lexemeBundle.push(phonemes[lexeme.slice(startingIndex)])
-        if (index !== 0 && index !== lastIndex) lexemeBundle.push(phonemes[lexeme.slice(startingIndex, index)])
-        if (index === lastIndex) {
-          lexemeBundle.push(phonemes[lexeme.slice(startingIndex, index)])
-          lexemeBundle.push(phonemes[lexeme.slice(index)])
-        }
-        startingIndex = index;
-      })
-      lexicalFeatureBundles.push(lexemeBundle);
-    })
-    
-    // decompose rules
-    let allEpochs = epochs.map(epoch => {
-      let ruleBundle = epoch.changes.map(rule => {
-        return {
-          input: rule.split('>')[0].replace(/\[|\]|\+/g, '').trim(),
-          result: rule.split('>')[1].split('/')[0],
-          preInput: rule.split('/')[1].split('_')[0].replace(/\[|\]|\+/g, '').trim(),
-          postInput: rule.split('/')[1].split('_')[1].replace(/\[|\]|\+/g, '').trim(),
-        }
-      })
-      return {epoch: epoch.name, rules: ruleBundle}
-    })
-
-    // apply sound changes
-    allEpochs.reduce((diachronicLexicon, epoch) => {
-      let startingLexicon = diachronicLexicon.length 
-        ? diachronicLexicon[diachronicLexicon.length - 1]
-        : lexicalFeatureBundles;
-      let currentRules = epoch.rules;
-      let resultingLexicon = startingLexicon.forEach(lexeme => {
-        currentRules.forEach(rule => {
-          let ruleEnvironment = [[rule.preInput], [rule.input], [rule.postInput]];
-          console.log(ruleEnvironment)
-        })
-      })
-      diachronicLexicon.push(resultingLexicon) 
-    },[])
-
-    // handle output
-  }
 
   return (
     <div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">

src/components/Options.js

@@ -2,13 +2,13 @@ import React, { useState } from 'react';
 import './Options.scss';
 import ls from 'local-storage';
 
-const Options = props => {
+const Options = ({ options, dispatch }) => {
   const [ load, setLoad ] = useState('');
 
   const handleRadioChange = e => {
     const option = e.target.name;
     const setValue = e.target.id;
-    props.dispatch({
+    dispatch({
       type: 'SET_OPTIONS',
       value: {
         option,
@@ -20,7 +20,7 @@ const Options = props => {
   const handleCheckChange = e => {
     const option = e.target.name;
     const setValue = e.target.checked ? 'true' : 'false';
-    props.dispatch({
+    dispatch({
       type: 'SET_OPTIONS',
       value: {
         option,
@@ -31,7 +31,7 @@ const Options = props => {
 
   const handleFormSubmit = (e, options) => {
     e.preventDefault();
-    props.dispatch({
+    dispatch({
       type: 'RUN',
       value: options
     });
@@ -41,13 +41,13 @@ const Options = props => {
     <div className="Options" data-testid="Options">
       <h3>Modeling Options</h3>
 
-      <form onSubmit={e=>handleFormSubmit(e, props.options)} data-testid="Options-form">
+      <form onSubmit={e=>handleFormSubmit(e, options)} data-testid="Options-form">
         
         {/* <h5>Output</h5> */}
 
         <input 
           type="radio" name="output" id="default" 
-          checked={props.options ? props.options.output === 'default' : true}
+          checked={options ? options.output === 'default' : true}
           onChange={e=>handleRadioChange(e)}
           />
         <label htmlFor="default">Default 
@@ -56,7 +56,7 @@ const Options = props => {
         
         <input 
           type="radio" name="output" id="proto" 
-          checked={props.options ? props.options.output === 'proto' : false}
+          checked={options ? options.output === 'proto' : false}
           onChange={e=>handleRadioChange(e)}
           />
         <label htmlFor="proto">Proto 
@@ -65,7 +65,7 @@ const Options = props => {
         
         <input 
           type="radio" name="output" id="diachronic" 
-          checked={props.options ? props.options.output === 'diachronic' : false}
+          checked={options ? options.output === 'diachronic' : false}
           onChange={e=>handleRadioChange(e)}
         />
         <label htmlFor="diachronic">Diachronic 
@@ -74,7 +74,7 @@ const Options = props => {
         
         <input 
           type="checkbox" name="save"
-          checked={props.options ? props.options.save : false}
+          checked={options ? options.save : false}
           onChange={e=>handleCheckChange(e)}
         />
         <label htmlFor="save">Store session on Run</label>

src/components/Output.js

@@ -14,7 +14,7 @@ const Output = props => {
 
   const renderDefault = () => {
     return results.map((epoch, i) => {
-    const lexicon = epoch.lexicon.map(lexeme => <span>{lexeme}</span>);
+    const lexicon = epoch.lexicon.map((lexeme, i) => <span key={`${epoch.pass}-${i}`}>{lexeme}</span>);
       return (
       <div key={`epoch-${i}`} className="Output-epoch">
         <h5>{epoch.pass}</h5>

src/components/Output.test.js

@@ -20,8 +20,10 @@ describe('Output', () => {
   });
   
   it('renders output lexicon list from output hook', () => {
-    const { getByTestId } = render(<Output results={[{pass: 'test', lexicon: ['word', 'lex', 'word']}]}/>);
+    const { getByTestId } = render(<Output results={[{pass: 'test', lexicon: ['word', 'lex', 'word']}]} options={{output: 'default'}}/>);
-    expect(getByTestId('Output-lexicon')).toContainHTML('<p>word</p><p>lex</p><p>word</p>');
+    expect(getByTestId('Output-lexicon')).toContainHTML(wordListWordHTML);
   });
 
 });
+
+const wordListWordHTML = '<div class="Output-epoch"><h5>test</h5><p class="lexicon"><span>word</span><span>lex</span><span>word</span></p></div>';

src/reducers/reducer.results.js

@@ -259,7 +259,6 @@ export const run = (state: stateType, action: resultsAction): stateType => {
 
   // TODO iterate through each epoch
   try {
-    console.log('running results')
     const passResults = state.epochs.reduce((results, epoch, _) => {
       const { phones, features, lexicon } = state;
       let lexiconBundle;
@@ -277,10 +276,8 @@ export const run = (state: stateType, action: resultsAction): stateType => {
     }, []);
     
     const results = passResults.map(stringifyResults);
-    console.log(results)
     return {...state, results }
   } catch (err) {
-    console.log(err)
     return {...state, errors: err };
   }
 }