diff --git a/src/PhonoChangeApplier.js b/src/PhonoChangeApplier.js
index 53b6ff3..8114a3d 100644
--- a/src/PhonoChangeApplier.js
+++ b/src/PhonoChangeApplier.js
@@ -5,12 +5,17 @@ import ProtoLang from './components/ProtoLang';
import Features from './components/Features';
const PhonoChangeApplier = () => {
- const [ lexicon, setLexicon ] = useState(['one'])
+ const [ lexicon, setLexicon ] = useState(['one']);
+ const [ phonemes, setPhonemes ] = useState(
+ [
+ { phoneme: [ 'feature' ] }
+ ]
+ );
return (
);
}
diff --git a/src/components/Features.js b/src/components/Features.js
index 0bfabfd..50fedd3 100644
--- a/src/components/Features.js
+++ b/src/components/Features.js
@@ -1,10 +1,31 @@
-import React from 'react';
+import React, {useState} from 'react';
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 => {`[+ ${feature}] = `}{featureMap[feature].join('|')});
+}
+
+const Features = (props) => {
+ const {feature, setFeature} = useState('[+ nasal]')
+ const {newPhonemes, setNewPhonemes} = useState('n / m / ŋ')
+
return (
Phonetic Features
+
+ {props.phonemes ? <>{parseFeaturesFromPhonemeList(props.phonemes)}> : <>>}
+
+ {/*
*/}
);
}
diff --git a/src/components/Features.test.js b/src/components/Features.test.js
index 351877d..0e21614 100644
--- a/src/components/Features.test.js
+++ b/src/components/Features.test.js
@@ -18,10 +18,10 @@ describe('Features', () => {
it('renders the correct subtitle', () => {
const { getByTestId } = render();
expect(getByTestId('Features')).toHaveTextContent('Phonetic Features');
- })
+ });
- // it('renders lexicon from state', () => {
- // const { getByTestId } = render();
- // expect(getByTestId('Features'));
- // })
-})
\ No newline at end of file
+ it('renders features from state', () => {
+ const { getByTestId } = render();
+ expect(getByTestId('Features-list')).toContainHTML('[+ nasal] = n[+ occlusive] = n');
+ });
+});
\ No newline at end of file