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
|
; all=true
|
||||||
|
|
||||||
[strict]
|
[strict]
|
||||||
|
|
||||||
|
[untyped]
|
||||||
|
.*\.scss
|
||||||
|
.*\.css
|
|
@ -18,11 +18,11 @@ const PhonoChangeApplier = () => {
|
||||||
{},
|
{},
|
||||||
initState
|
initState
|
||||||
)
|
)
|
||||||
|
// ! DONE
|
||||||
const [ lexicon, setLexicon ] = useState(['mun', 'tʰu', 'tɯm', 'utʰ']);
|
const [ lexicon, setLexicon ] = useState(['mun', 'tʰu', 'tɯm', 'utʰ']);
|
||||||
|
|
||||||
|
// ! UNDONE
|
||||||
const [ phonemes, setPhonemes ] = useState(
|
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' ],
|
n: [ 'occlusive', 'sonorant', 'obstruent', 'nasal', 'alveolar' ],
|
||||||
m: [ 'occlusive', 'sonorant', 'obstruent', 'nasal', 'bilabial' ],
|
m: [ 'occlusive', 'sonorant', 'obstruent', 'nasal', 'bilabial' ],
|
||||||
|
@ -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 phonemes={phonemes} setPhonemes={setPhonemes} features={features} setFeatures={setFeatures}/>
|
<Features phones={state.phones} features={state.features} diispatch={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}/>
|
||||||
|
|
|
@ -1,15 +1,29 @@
|
||||||
|
// @flow
|
||||||
import React, {useState} from 'react';
|
import React, {useState} from 'react';
|
||||||
import './Features.scss';
|
import './Features.scss';
|
||||||
|
|
||||||
const parseFeaturesFromPhonemeObject = phonemeObject => {
|
const parseFeaturesFromPhonemeObject = phonesObject => {
|
||||||
let featureMap = Object.keys(phonemeObject).reduce((featureObject, phonemeName) => {
|
|
||||||
let phoneme = phonemeObject[phonemeName];
|
let featureMap = Object.keys(phonesObject).reduce((featureObject, phoneName) => {
|
||||||
phoneme.forEach(feature => {
|
let phone = phonesObject[phoneName];
|
||||||
featureObject[feature] ? featureObject[feature].push(phonemeName) : featureObject[feature] = [ phonemeName ]
|
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 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) => {
|
const getPhonemesFromFeatureSubmission = (props, newPhonemes, feature) => {
|
||||||
|
@ -42,7 +56,7 @@ const Features = (props) => {
|
||||||
<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.phonemes ? <>{parseFeaturesFromPhonemeObject(props.phonemes)}</> : <></>}
|
{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
|
||||||
|
|
|
@ -20,21 +20,13 @@ describe('Features', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders features from phonemes hook', () => {
|
it('renders features from phonemes hook', () => {
|
||||||
const { getByTestId } = render(<Features phonemes={ {n:[ 'nasal', 'occlusive' ]} }/>);
|
const { getByTestId } = render(<Features phones={
|
||||||
expect(getByTestId('Features-list')).toContainHTML('<li>[+ nasal] = n</li><li>[+ occlusive] = n</li>');
|
{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:
|
default:
|
||||||
console.log('default')
|
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -35,7 +35,6 @@ export const addLexeme = (state: stateType, action: addLexemeAction): stateType
|
||||||
}
|
}
|
||||||
|
|
||||||
export const setLexicon = (state: stateType, action: setLexiconAction): stateType => {
|
export const setLexicon = (state: stateType, action: setLexiconAction): stateType => {
|
||||||
console.log('dispatched')
|
|
||||||
let newLexicon = action.value;
|
let newLexicon = action.value;
|
||||||
newLexicon = newLexicon.map(lexeme => makeLexeme(lexeme.lexeme, lexeme.epoch, state));
|
newLexicon = newLexicon.map(lexeme => makeLexeme(lexeme.lexeme, lexeme.epoch, state));
|
||||||
return {...state, lexicon: newLexicon}
|
return {...state, lexicon: newLexicon}
|
||||||
|
|
Loading…
Reference in a new issue