From 5e0100edacdac150239ce2e04a5c727131538960 Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Mon, 16 Dec 2019 22:22:37 -0800
Subject: [PATCH] hook features and phones into Features render

---
 .flowconfig                          |  4 ++++
 src/PhonoChangeApplier.js            |  8 ++++----
 src/components/Features.js           | 30 ++++++++++++++++++++--------
 src/components/Features.test.js      | 24 ++++++++--------------
 src/reducers/stateReducer.js         |  1 -
 src/reducers/stateReducer.lexicon.js |  1 -
 6 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/.flowconfig b/.flowconfig
index d988226..e4c8310 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -14,3 +14,7 @@
 ; all=true 
 
 [strict]
+
+[untyped]
+.*\.scss
+.*\.css
\ No newline at end of file
diff --git a/src/PhonoChangeApplier.js b/src/PhonoChangeApplier.js
index 3c41f02..fd8b82c 100644
--- a/src/PhonoChangeApplier.js
+++ b/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}/>
diff --git a/src/components/Features.js b/src/components/Features.js
index deb4ada..f33208a 100644
--- a/src/components/Features.js
+++ b/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 
diff --git a/src/components/Features.test.js b/src/components/Features.test.js
index 58c681c..02595c9 100644
--- a/src/components/Features.test.js
+++ b/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>');
-  });
-
-  // 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)
+    const { getByTestId } = render(<Features phones={ 
+      {n:{ 
+        grapheme: 'n', 
+        features: { nasal: true, occlusive: true, vowel: false } }} 
+    }/>);
     
-  //   expect(getByTestId('Features-list')).toContainHTML('<li>[+ nasal] = n</li>');
-  // })
+    expect(getByTestId('Features-list'))
+      .toContainHTML('<li>[+ nasal] = n</li><li>[+ occlusive] = n</li><li>[- vowel] = n</li>');
+  });
 });
\ No newline at end of file
diff --git a/src/reducers/stateReducer.js b/src/reducers/stateReducer.js
index 023e39a..aca0046 100644
--- a/src/reducers/stateReducer.js
+++ b/src/reducers/stateReducer.js
@@ -66,7 +66,6 @@ export const stateReducer = (state: stateType, action: actionType): stateType =>
     }
 
     default:
-      console.log('default')
       return state;
   }
 }
diff --git a/src/reducers/stateReducer.lexicon.js b/src/reducers/stateReducer.lexicon.js
index ef0b4a2..2d71efa 100644
--- a/src/reducers/stateReducer.lexicon.js
+++ b/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}