render features from state

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 (
     <div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
       <ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
-      <Features />
+      <Features phonemes={phonemes} setPhonemes={setPhonemes}/>
     </div>
   );
 }

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 => <li key={`feature__${feature}`}>{`[+ ${feature}] = `}{featureMap[feature].join('|')}</li>);
+}
+
+const Features = (props) => {
+  const {feature, setFeature} = useState('[+ nasal]')
+  const {newPhonemes, setNewPhonemes} = useState('n / m / ŋ')
+
   return (
     <div className="Features" data-testid="Features">
       <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>
   );
 }

src/components/Features.test.js

@@ -18,10 +18,10 @@ describe('Features', () => {
   it('renders the correct subtitle', () => {
     const { getByTestId } = render(<Features />);
     expect(getByTestId('Features')).toHaveTextContent('Phonetic Features');
-  })
+  });
   
-  // it('renders lexicon from state', () => {
-  //   const { getByTestId } = render(<Features />);
-  //   expect(getByTestId('Features'));
-  // })
-})
+  it('renders features from state', () => {
+    const { getByTestId } = render(<Features phonemes={ [{n:[ 'nasal', 'occlusive' ]}] }/>);
+    expect(getByTestId('Features-list')).toContainHTML('<li>[+ nasal] = n</li><li>[+ occlusive] = n</li>');
+  });
+});