From 5d98f91b0fb5da995ebc0ad14beb4179ddf5645a Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Wed, 18 Dec 2019 15:38:22 -0800
Subject: [PATCH] patch feature display support for multi-graph phones

---
 src/components/Features.js            | 32 ++++++++++++++++++++++++++-
 src/reducers/stateReducer.features.js |  1 -
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/components/Features.js b/src/components/Features.js
index fbd8f65..637ffc5 100644
--- a/src/components/Features.js
+++ b/src/components/Features.js
@@ -4,6 +4,36 @@ import './Features.scss';
 
 import type { featureAction } from '../reducers/stateReducer.features';
 
+const parsePhonesFromFeatureObject = featureObject => {
+  
+  const getFeatureMap = (featureObject) => {
+    return Object.keys(featureObject).map(feature => {
+      const plusPhones = featureObject[feature].positive.map(phone => phone.grapheme).join('|');
+      const minusPhones = featureObject[feature].negative.map(phone => phone.grapheme).join('|');
+      return {[feature]: {plus: plusPhones, minus: minusPhones}}
+    })
+  }
+
+  const getFeatureMapJSX = (featureMap) => {
+    return featureMap.map((feature, index) => {
+      const featureName = Object.keys(feature)
+      const plusPhones = feature[featureName].plus;
+      const minusPhones = feature[featureName].minus;
+      return (
+        <li key={`feature__${featureName}`}>
+          <span className="plus-phones">{`[+ ${featureName}] = ${plusPhones}`}</span>
+          <span className="minus-phones">{`[- ${featureName}] = ${minusPhones}`}</span>
+        </li>
+      )
+    })
+  }
+
+  const featureMap = getFeatureMap(featureObject);
+  console.log(featureMap)
+  const featureMapJSX = getFeatureMapJSX(featureMap);
+  return featureMapJSX;
+}
+
 const parseFeaturesFromPhonemeObject = phonesObject => {
 
   const getFeatureMap = (phonesObject) => {
@@ -92,7 +122,7 @@ const Features = (props) => {
       <h3>Phonetic Features</h3>
       
       <ul className="Features__list" data-testid="Features-list">
-        {props.phones ? <>{parseFeaturesFromPhonemeObject(props.phones)}</> : <></>}
+        {props.phones ? <>{parsePhonesFromFeatureObject(props.features)}</> : <></>}
       </ul>
 
       <form className="Features__form" data-testid="Features-form">
diff --git a/src/reducers/stateReducer.features.js b/src/reducers/stateReducer.features.js
index d4239d5..f984206 100644
--- a/src/reducers/stateReducer.features.js
+++ b/src/reducers/stateReducer.features.js
@@ -45,7 +45,6 @@ export const addFeature = (state: stateType, action: featureAction): stateType =
   let positivePhones = action.value.positivePhones || [];
   let negativePhones = action.value.negativePhones || [];
   let newFeatureName = action.value.feature;
-      
   let newPhoneObject = [
     ...positivePhones, ...negativePhones
   ].reduce((phoneObject, phone) => addPhones(phoneObject, phone), state.phones)