hook features and phones into Features render
This commit is contained in:
parent
f574e7b05f
commit
5e0100edac
6 changed files with 38 additions and 30 deletions
|
@ -14,3 +14,7 @@
|
|||
; all=true
|
||||
|
||||
[strict]
|
||||
|
||||
[untyped]
|
||||
.*\.scss
|
||||
.*\.css
|
|
@ -18,11 +18,11 @@ const PhonoChangeApplier = () => {
|
|||
{},
|
||||
initState
|
||||
)
|
||||
|
||||
// ! DONE
|
||||
const [ lexicon, setLexicon ] = useState(['mun', 'tʰu', 'tɯm', 'utʰ']);
|
||||
|
||||
// ! UNDONE
|
||||
const [ phonemes, setPhonemes ] = useState(
|
||||
// ! candidate for trie to avoid situations where >2 graph phonemes
|
||||
// ! are uncaught by lexeme decomposition when <n graph phonemes are not present
|
||||
{
|
||||
n: [ 'occlusive', 'sonorant', 'obstruent', 'nasal', 'alveolar' ],
|
||||
m: [ 'occlusive', 'sonorant', 'obstruent', 'nasal', 'bilabial' ],
|
||||
|
@ -123,7 +123,7 @@ const PhonoChangeApplier = () => {
|
|||
return (
|
||||
<div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
|
||||
<ProtoLang lexicon={state.lexicon} dispatch={dispatch}/>
|
||||
<Features phonemes={phonemes} setPhonemes={setPhonemes} features={features} setFeatures={setFeatures}/>
|
||||
<Features phones={state.phones} features={state.features} diispatch={dispatch}/>
|
||||
<Epochs epochs={epochs} setEpochs={setEpochs} errors={errors}/>
|
||||
<Options options={options} setOptions={setOptions} runChanges={runChanges}/>
|
||||
<Output results={results} setResults={setResults}/>
|
||||
|
|
|
@ -1,15 +1,29 @@
|
|||
// @flow
|
||||
import React, {useState} from 'react';
|
||||
import './Features.scss';
|
||||
|
||||
const parseFeaturesFromPhonemeObject = phonemeObject => {
|
||||
let featureMap = Object.keys(phonemeObject).reduce((featureObject, phonemeName) => {
|
||||
let phoneme = phonemeObject[phonemeName];
|
||||
phoneme.forEach(feature => {
|
||||
featureObject[feature] ? featureObject[feature].push(phonemeName) : featureObject[feature] = [ phonemeName ]
|
||||
const parseFeaturesFromPhonemeObject = phonesObject => {
|
||||
|
||||
let featureMap = Object.keys(phonesObject).reduce((featureObject, phoneName) => {
|
||||
let phone = phonesObject[phoneName];
|
||||
Object.keys(phone.features).forEach(feature => {
|
||||
if (!featureObject[feature]) featureObject[feature] = {plus: [], minus: []}
|
||||
if (phone.features[feature]) featureObject[feature].plus.push(phone.grapheme)
|
||||
else featureObject[feature].minus.push(phone.grapheme)
|
||||
});
|
||||
return featureObject;
|
||||
},{})
|
||||
return Object.keys(featureMap).map(feature => <li key={`feature__${feature}`}>{`[+ ${feature}] = `}{featureMap[feature].join('|')}</li>);
|
||||
}, {})
|
||||
|
||||
return Object.keys(featureMap).map(feature => {
|
||||
const plusPhones = featureMap[feature].plus.join('|');
|
||||
const minusPhones = featureMap[feature].minus.join('|');
|
||||
return (
|
||||
<li key={`feature__${feature}`}>
|
||||
<span className="plus-phones">{`[+ ${feature}] = ${plusPhones}`}{'\t\t\t'}</span>
|
||||
<span className="minus-phones">{`[- ${feature}] = ${minusPhones}`}</span>
|
||||
</li>
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
const getPhonemesFromFeatureSubmission = (props, newPhonemes, feature) => {
|
||||
|
@ -42,7 +56,7 @@ const Features = (props) => {
|
|||
<div className="Features" data-testid="Features">
|
||||
<h3>Phonetic Features</h3>
|
||||
<ul className="Features__list" data-testid="Features-list">
|
||||
{props.phonemes ? <>{parseFeaturesFromPhonemeObject(props.phonemes)}</> : <></>}
|
||||
{props.phones ? <>{parseFeaturesFromPhonemeObject(props.phones)}</> : <></>}
|
||||
</ul>
|
||||
<form className="Features__form" data-testid="Features-form">
|
||||
<input
|
||||
|
|
|
@ -20,21 +20,13 @@ describe('Features', () => {
|
|||
});
|
||||
|
||||
it('renders features from phonemes hook', () => {
|
||||
const { getByTestId } = render(<Features phonemes={ {n:[ 'nasal', 'occlusive' ]} }/>);
|
||||
expect(getByTestId('Features-list')).toContainHTML('<li>[+ nasal] = n</li><li>[+ occlusive] = n</li>');
|
||||
const { getByTestId } = render(<Features phones={
|
||||
{n:{
|
||||
grapheme: 'n',
|
||||
features: { nasal: true, occlusive: true, vowel: false } }}
|
||||
}/>);
|
||||
|
||||
expect(getByTestId('Features-list'))
|
||||
.toContainHTML('<li>[+ nasal] = n</li><li>[+ occlusive] = n</li><li>[- vowel] = n</li>');
|
||||
});
|
||||
|
||||
// it('adds new features and new phonemes from features and newPhonemes hooks', () => {
|
||||
// const { getByTestId } = render(<Features />);
|
||||
// getByTestId('Features-form')
|
||||
// })
|
||||
|
||||
// it('adds features from form to hooks', () => {
|
||||
// const phonemes = [];
|
||||
// const setPhonemes = jest.fn()
|
||||
// const { getByTestId } = render(<Features phonemes={phonemes} setPhonemes={setPhonemes}/>);
|
||||
// // mock function for adding feature to state ([+ nasal] = n)
|
||||
|
||||
// expect(getByTestId('Features-list')).toContainHTML('<li>[+ nasal] = n</li>');
|
||||
// })
|
||||
});
|
|
@ -66,7 +66,6 @@ export const stateReducer = (state: stateType, action: actionType): stateType =>
|
|||
}
|
||||
|
||||
default:
|
||||
console.log('default')
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -35,7 +35,6 @@ export const addLexeme = (state: stateType, action: addLexemeAction): stateType
|
|||
}
|
||||
|
||||
export const setLexicon = (state: stateType, action: setLexiconAction): stateType => {
|
||||
console.log('dispatched')
|
||||
let newLexicon = action.value;
|
||||
newLexicon = newLexicon.map(lexeme => makeLexeme(lexeme.lexeme, lexeme.epoch, state));
|
||||
return {...state, lexicon: newLexicon}
|
||||
|
|
Loading…
Reference in a new issue