hook features and phones into Features render

.flowconfig

@@ -14,3 +14,7 @@
 ; all=true 
 
 [strict]
+
+[untyped]
+.*\.scss
+.*\.css

src/PhonoChangeApplier.js

@@ -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}/>

src/components/Features.js

@@ -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 

src/components/Features.test.js

@@ -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>');
-  // })
 });

src/reducers/stateReducer.js

@@ -66,7 +66,6 @@ export const stateReducer = (state: stateType, action: actionType): stateType =>
     }
 
     default:
-      console.log('default')
       return state;
   }
 }

src/reducers/stateReducer.lexicon.js

@@ -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}