hook feature submit to reducer dispatch ADD_FEATURE
This commit is contained in:
parent
5e0100edac
commit
cf0c971ee3
3 changed files with 87 additions and 29 deletions
|
@ -123,7 +123,7 @@ const PhonoChangeApplier = () => {
|
||||||
return (
|
return (
|
||||||
<div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
|
<div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
|
||||||
<ProtoLang lexicon={state.lexicon} dispatch={dispatch}/>
|
<ProtoLang lexicon={state.lexicon} dispatch={dispatch}/>
|
||||||
<Features phones={state.phones} features={state.features} diispatch={dispatch}/>
|
<Features phones={state.phones} features={state.features} dispatch={dispatch}/>
|
||||||
<Epochs epochs={epochs} setEpochs={setEpochs} errors={errors}/>
|
<Epochs epochs={epochs} setEpochs={setEpochs} errors={errors}/>
|
||||||
<Options options={options} setOptions={setOptions} runChanges={runChanges}/>
|
<Options options={options} setOptions={setOptions} runChanges={runChanges}/>
|
||||||
<Output results={results} setResults={setResults}/>
|
<Output results={results} setResults={setResults}/>
|
||||||
|
|
|
@ -2,9 +2,12 @@
|
||||||
import React, {useState} from 'react';
|
import React, {useState} from 'react';
|
||||||
import './Features.scss';
|
import './Features.scss';
|
||||||
|
|
||||||
|
import type { featureAction } from '../reducers/stateReducer.features';
|
||||||
|
|
||||||
const parseFeaturesFromPhonemeObject = phonesObject => {
|
const parseFeaturesFromPhonemeObject = phonesObject => {
|
||||||
|
|
||||||
let featureMap = Object.keys(phonesObject).reduce((featureObject, phoneName) => {
|
const getFeatureMap = (phonesObject) => {
|
||||||
|
return Object.keys(phonesObject).reduce((featureObject, phoneName) => {
|
||||||
let phone = phonesObject[phoneName];
|
let phone = phonesObject[phoneName];
|
||||||
Object.keys(phone.features).forEach(feature => {
|
Object.keys(phone.features).forEach(feature => {
|
||||||
if (!featureObject[feature]) featureObject[feature] = {plus: [], minus: []}
|
if (!featureObject[feature]) featureObject[feature] = {plus: [], minus: []}
|
||||||
|
@ -13,19 +16,48 @@ const parseFeaturesFromPhonemeObject = phonesObject => {
|
||||||
});
|
});
|
||||||
return featureObject;
|
return featureObject;
|
||||||
}, {})
|
}, {})
|
||||||
|
}
|
||||||
|
|
||||||
|
const getFeatureMapJSX = (featureMap) => {
|
||||||
return Object.keys(featureMap).map(feature => {
|
return Object.keys(featureMap).map(feature => {
|
||||||
const plusPhones = featureMap[feature].plus.join('|');
|
const plusPhones = featureMap[feature].plus.join('|');
|
||||||
const minusPhones = featureMap[feature].minus.join('|');
|
const minusPhones = featureMap[feature].minus.join('|');
|
||||||
return (
|
return (
|
||||||
<li key={`feature__${feature}`}>
|
<li key={`feature__${feature}`}>
|
||||||
<span className="plus-phones">{`[+ ${feature}] = ${plusPhones}`}{'\t\t\t'}</span>
|
<span className="plus-phones">{`[+ ${feature}] = ${plusPhones}`}</span>
|
||||||
<span className="minus-phones">{`[- ${feature}] = ${minusPhones}`}</span>
|
<span className="minus-phones">{`[- ${feature}] = ${minusPhones}`}</span>
|
||||||
</li>
|
</li>
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const featureMap = getFeatureMap(phonesObject);
|
||||||
|
const featureMapJSX = getFeatureMapJSX(featureMap);
|
||||||
|
return featureMapJSX;
|
||||||
|
}
|
||||||
|
|
||||||
|
const buildReducerAction = (e, newPositivePhones, newNegativePhones, feature): featureAction => {
|
||||||
|
e.preventDefault();
|
||||||
|
const positivePhones = []
|
||||||
|
newPositivePhones !== ''
|
||||||
|
? newPositivePhones.split('/').forEach(phone => positivePhones.push(phone.trim()))
|
||||||
|
: positivePhones.push('')
|
||||||
|
|
||||||
|
const negativePhones = []
|
||||||
|
newNegativePhones !== ''
|
||||||
|
? newNegativePhones.split('/').forEach(phone => negativePhones.push(phone.trim()))
|
||||||
|
: negativePhones.push('')
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: "ADD_FEATURE",
|
||||||
|
value: {
|
||||||
|
positivePhones,
|
||||||
|
negativePhones,
|
||||||
|
feature
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const getPhonemesFromFeatureSubmission = (props, newPhonemes, feature) => {
|
const getPhonemesFromFeatureSubmission = (props, newPhonemes, feature) => {
|
||||||
let newPhonemeObject = newPhonemes.split('/').reduce((phonemeObject, newPhoneme) => {
|
let newPhonemeObject = newPhonemes.split('/').reduce((phonemeObject, newPhoneme) => {
|
||||||
newPhoneme = newPhoneme.trim();
|
newPhoneme = newPhoneme.trim();
|
||||||
|
@ -38,34 +70,60 @@ const getPhonemesFromFeatureSubmission = (props, newPhonemes, feature) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const Features = (props) => {
|
const Features = (props) => {
|
||||||
const [feature, setFeature] = useState('nasal')
|
const [feature, setFeature] = useState('aspirated')
|
||||||
const [newPhonemes, setNewPhonemes] = useState('n / m / ŋ')
|
const [ newPositivePhones, setNewPositivePhones ] = useState('tʰ / pʰ / kʰ');
|
||||||
|
const [ newNegativePhones, setNewNegativePhones ] = useState('t / p / k');
|
||||||
|
|
||||||
const newFeaturesSubmit = e => {
|
const newFeaturesSubmit = e => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
let newPhonemeObject = getPhonemesFromFeatureSubmission(props, newPhonemes, feature);
|
// let newPhonemeObject = getPhonemesFromFeatureSubmission(props, newPhonemes, feature);
|
||||||
props.setPhonemes(newPhonemeObject);
|
// props.setPhonemes(newPhonemeObject);
|
||||||
if (!props.features || !props.features.includes(feature)) props.setFeatures([...props.features, feature])
|
// if (!props.features || !props.features.includes(feature)) props.setFeatures([...props.features, feature])
|
||||||
|
|
||||||
setFeature('');
|
setFeature('');
|
||||||
setNewPhonemes('');
|
setNewPositivePhones('');
|
||||||
|
setNewNegativePhones('');
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="Features" data-testid="Features">
|
<div className="Features" data-testid="Features">
|
||||||
|
|
||||||
<h3>Phonetic Features</h3>
|
<h3>Phonetic Features</h3>
|
||||||
|
|
||||||
<ul className="Features__list" data-testid="Features-list">
|
<ul className="Features__list" data-testid="Features-list">
|
||||||
{props.phones ? <>{parseFeaturesFromPhonemeObject(props.phones)}</> : <></>}
|
{props.phones ? <>{parseFeaturesFromPhonemeObject(props.phones)}</> : <></>}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<form className="Features__form" data-testid="Features-form">
|
<form className="Features__form" data-testid="Features-form">
|
||||||
<input
|
<input
|
||||||
type="text" name="feature"
|
type="text" name="feature"
|
||||||
value={feature} onChange={e=> setFeature(e.target.value)}
|
value={feature} onChange={e=> setFeature(e.target.value)}
|
||||||
></input>
|
></input>
|
||||||
<input type="text" name="phonemes" value={newPhonemes} onChange={e=> setNewPhonemes(e.target.value)}></input>
|
|
||||||
<input type="submit" onClick={newFeaturesSubmit} value="Add feature"></input>
|
{/* ! Positive Phones */}
|
||||||
|
<label htmlFor="positive-phones">+</label>
|
||||||
|
<input
|
||||||
|
id="positive-phones"
|
||||||
|
type="text" name="phonemes"
|
||||||
|
value={newPositivePhones} onChange={e=> setNewPositivePhones(e.target.value)}
|
||||||
|
></input>
|
||||||
|
|
||||||
|
{/* ! Negative Phones */}
|
||||||
|
<label htmlFor="negative-phones">-</label>
|
||||||
|
<input
|
||||||
|
id="negative-phones"
|
||||||
|
type="text" name="phonemes"
|
||||||
|
value={newNegativePhones} onChange={e=> setNewNegativePhones(e.target.value)}
|
||||||
|
></input>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="submit"
|
||||||
|
onClick={e => props.dispatch(buildReducerAction(e, newPositivePhones, newNegativePhones, feature))}
|
||||||
|
value="Add feature"
|
||||||
|
></input>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -27,6 +27,6 @@ describe('Features', () => {
|
||||||
}/>);
|
}/>);
|
||||||
|
|
||||||
expect(getByTestId('Features-list'))
|
expect(getByTestId('Features-list'))
|
||||||
.toContainHTML('<li>[+ nasal] = n</li><li>[+ occlusive] = n</li><li>[- vowel] = n</li>');
|
.toContainHTML('<ul class="Features__list" data-testid="Features-list"><li><span class="plus-phones">[+ nasal] = n</span><span class="minus-phones">[- nasal] = </span></li><li><span class="plus-phones">[+ occlusive] = n</span><span class="minus-phones">[- occlusive] = </span></li><li><span class="plus-phones">[+ vowel] = </span><span class="minus-phones">[- vowel] = n</span></li></ul>');
|
||||||
});
|
});
|
||||||
});
|
});
|
Loading…
Reference in a new issue