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
|
initState
|
||||||
)
|
)
|
||||||
const { lexicon, phones, phonemes, epochs, options, features, results } = state;
|
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 (
|
return (
|
||||||
<div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
|
<div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
|
||||||
|
|
|
@ -2,13 +2,13 @@ import React, { useState } from 'react';
|
||||||
import './Options.scss';
|
import './Options.scss';
|
||||||
import ls from 'local-storage';
|
import ls from 'local-storage';
|
||||||
|
|
||||||
const Options = props => {
|
const Options = ({ options, dispatch }) => {
|
||||||
const [ load, setLoad ] = useState('');
|
const [ load, setLoad ] = useState('');
|
||||||
|
|
||||||
const handleRadioChange = e => {
|
const handleRadioChange = e => {
|
||||||
const option = e.target.name;
|
const option = e.target.name;
|
||||||
const setValue = e.target.id;
|
const setValue = e.target.id;
|
||||||
props.dispatch({
|
dispatch({
|
||||||
type: 'SET_OPTIONS',
|
type: 'SET_OPTIONS',
|
||||||
value: {
|
value: {
|
||||||
option,
|
option,
|
||||||
|
@ -20,7 +20,7 @@ const Options = props => {
|
||||||
const handleCheckChange = e => {
|
const handleCheckChange = e => {
|
||||||
const option = e.target.name;
|
const option = e.target.name;
|
||||||
const setValue = e.target.checked ? 'true' : 'false';
|
const setValue = e.target.checked ? 'true' : 'false';
|
||||||
props.dispatch({
|
dispatch({
|
||||||
type: 'SET_OPTIONS',
|
type: 'SET_OPTIONS',
|
||||||
value: {
|
value: {
|
||||||
option,
|
option,
|
||||||
|
@ -31,7 +31,7 @@ const Options = props => {
|
||||||
|
|
||||||
const handleFormSubmit = (e, options) => {
|
const handleFormSubmit = (e, options) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
props.dispatch({
|
dispatch({
|
||||||
type: 'RUN',
|
type: 'RUN',
|
||||||
value: options
|
value: options
|
||||||
});
|
});
|
||||||
|
@ -41,13 +41,13 @@ const Options = props => {
|
||||||
<div className="Options" data-testid="Options">
|
<div className="Options" data-testid="Options">
|
||||||
<h3>Modeling Options</h3>
|
<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> */}
|
{/* <h5>Output</h5> */}
|
||||||
|
|
||||||
<input
|
<input
|
||||||
type="radio" name="output" id="default"
|
type="radio" name="output" id="default"
|
||||||
checked={props.options ? props.options.output === 'default' : true}
|
checked={options ? options.output === 'default' : true}
|
||||||
onChange={e=>handleRadioChange(e)}
|
onChange={e=>handleRadioChange(e)}
|
||||||
/>
|
/>
|
||||||
<label htmlFor="default">Default
|
<label htmlFor="default">Default
|
||||||
|
@ -56,7 +56,7 @@ const Options = props => {
|
||||||
|
|
||||||
<input
|
<input
|
||||||
type="radio" name="output" id="proto"
|
type="radio" name="output" id="proto"
|
||||||
checked={props.options ? props.options.output === 'proto' : false}
|
checked={options ? options.output === 'proto' : false}
|
||||||
onChange={e=>handleRadioChange(e)}
|
onChange={e=>handleRadioChange(e)}
|
||||||
/>
|
/>
|
||||||
<label htmlFor="proto">Proto
|
<label htmlFor="proto">Proto
|
||||||
|
@ -65,7 +65,7 @@ const Options = props => {
|
||||||
|
|
||||||
<input
|
<input
|
||||||
type="radio" name="output" id="diachronic"
|
type="radio" name="output" id="diachronic"
|
||||||
checked={props.options ? props.options.output === 'diachronic' : false}
|
checked={options ? options.output === 'diachronic' : false}
|
||||||
onChange={e=>handleRadioChange(e)}
|
onChange={e=>handleRadioChange(e)}
|
||||||
/>
|
/>
|
||||||
<label htmlFor="diachronic">Diachronic
|
<label htmlFor="diachronic">Diachronic
|
||||||
|
@ -74,7 +74,7 @@ const Options = props => {
|
||||||
|
|
||||||
<input
|
<input
|
||||||
type="checkbox" name="save"
|
type="checkbox" name="save"
|
||||||
checked={props.options ? props.options.save : false}
|
checked={options ? options.save : false}
|
||||||
onChange={e=>handleCheckChange(e)}
|
onChange={e=>handleCheckChange(e)}
|
||||||
/>
|
/>
|
||||||
<label htmlFor="save">Store session on Run</label>
|
<label htmlFor="save">Store session on Run</label>
|
||||||
|
|
|
@ -14,7 +14,7 @@ const Output = props => {
|
||||||
|
|
||||||
const renderDefault = () => {
|
const renderDefault = () => {
|
||||||
return results.map((epoch, i) => {
|
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 (
|
return (
|
||||||
<div key={`epoch-${i}`} className="Output-epoch">
|
<div key={`epoch-${i}`} className="Output-epoch">
|
||||||
<h5>{epoch.pass}</h5>
|
<h5>{epoch.pass}</h5>
|
||||||
|
|
|
@ -20,8 +20,10 @@ describe('Output', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders output lexicon list from output hook', () => {
|
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>';
|
|
@ -259,7 +259,6 @@ export const run = (state: stateType, action: resultsAction): stateType => {
|
||||||
|
|
||||||
// TODO iterate through each epoch
|
// TODO iterate through each epoch
|
||||||
try {
|
try {
|
||||||
console.log('running results')
|
|
||||||
const passResults = state.epochs.reduce((results, epoch, _) => {
|
const passResults = state.epochs.reduce((results, epoch, _) => {
|
||||||
const { phones, features, lexicon } = state;
|
const { phones, features, lexicon } = state;
|
||||||
let lexiconBundle;
|
let lexiconBundle;
|
||||||
|
@ -277,10 +276,8 @@ export const run = (state: stateType, action: resultsAction): stateType => {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const results = passResults.map(stringifyResults);
|
const results = passResults.map(stringifyResults);
|
||||||
console.log(results)
|
|
||||||
return {...state, results }
|
return {...state, results }
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log(err)
|
|
||||||
return {...state, errors: err };
|
return {...state, errors: err };
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in a new issue