render features from state
This commit is contained in:
parent
983e858b7b
commit
13e04ab20d
3 changed files with 36 additions and 10 deletions
|
@ -5,12 +5,17 @@ import ProtoLang from './components/ProtoLang';
|
||||||
import Features from './components/Features';
|
import Features from './components/Features';
|
||||||
|
|
||||||
const PhonoChangeApplier = () => {
|
const PhonoChangeApplier = () => {
|
||||||
const [ lexicon, setLexicon ] = useState(['one'])
|
const [ lexicon, setLexicon ] = useState(['one']);
|
||||||
|
const [ phonemes, setPhonemes ] = useState(
|
||||||
|
[
|
||||||
|
{ phoneme: [ 'feature' ] }
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
|
<div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
|
||||||
<ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
|
<ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
|
||||||
<Features />
|
<Features phonemes={phonemes} setPhonemes={setPhonemes}/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,31 @@
|
||||||
import React from 'react';
|
import React, {useState} from 'react';
|
||||||
import './Features.scss';
|
import './Features.scss';
|
||||||
|
|
||||||
const Features = () => {
|
const parseFeaturesFromPhonemeList = phonemeList => {
|
||||||
|
let featureMap = phonemeList.reduce((featureObject, phonemeObject) => {
|
||||||
|
let phoneme = Object.keys(phonemeObject)[0];
|
||||||
|
phonemeObject[phoneme].forEach(feature => {
|
||||||
|
featureObject[feature] ? featureObject[feature].push(phoneme) : featureObject[feature] = [ phoneme ]
|
||||||
|
});
|
||||||
|
return featureObject;
|
||||||
|
},{})
|
||||||
|
console.log(featureMap)
|
||||||
|
return Object.keys(featureMap).map(feature => <li key={`feature__${feature}`}>{`[+ ${feature}] = `}{featureMap[feature].join('|')}</li>);
|
||||||
|
}
|
||||||
|
|
||||||
|
const Features = (props) => {
|
||||||
|
const {feature, setFeature} = useState('[+ nasal]')
|
||||||
|
const {newPhonemes, setNewPhonemes} = useState('n / m / ŋ')
|
||||||
|
|
||||||
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">
|
||||||
|
{props.phonemes ? <>{parseFeaturesFromPhonemeList(props.phonemes)}</> : <></>}
|
||||||
|
</ul>
|
||||||
|
{/* <form className="Features__form" data-testid="Features-form">
|
||||||
|
|
||||||
|
</form> */}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,10 +18,10 @@ describe('Features', () => {
|
||||||
it('renders the correct subtitle', () => {
|
it('renders the correct subtitle', () => {
|
||||||
const { getByTestId } = render(<Features />);
|
const { getByTestId } = render(<Features />);
|
||||||
expect(getByTestId('Features')).toHaveTextContent('Phonetic Features');
|
expect(getByTestId('Features')).toHaveTextContent('Phonetic Features');
|
||||||
})
|
});
|
||||||
|
|
||||||
// it('renders lexicon from state', () => {
|
it('renders features from state', () => {
|
||||||
// const { getByTestId } = render(<Features />);
|
const { getByTestId } = render(<Features phonemes={ [{n:[ 'nasal', 'occlusive' ]}] }/>);
|
||||||
// expect(getByTestId('Features'));
|
expect(getByTestId('Features-list')).toContainHTML('<li>[+ nasal] = n</li><li>[+ occlusive] = n</li>');
|
||||||
// })
|
});
|
||||||
})
|
});
|
Loading…
Reference in a new issue