refactor components to remove unused useState hooks
This commit is contained in:
parent
6f55f0ac39
commit
3f2b4e6618
5 changed files with 15 additions and 94 deletions
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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']}]}/>);
|
||||
expect(getByTestId('Output-lexicon')).toContainHTML('<p>word</p><p>lex</p><p>word</p>');
|
||||
const { getByTestId } = render(<Output results={[{pass: 'test', lexicon: ['word', 'lex', 'word']}]} options={{output: 'default'}}/>);
|
||||
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>';
|
|
@ -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 };
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue