From 6f55f0ac39c131872b9d86fe00396e35d612c930 Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Fri, 21 Feb 2020 20:21:06 -0800
Subject: [PATCH] refactor Output component to display multiple results

---
 src/PhonoChangeApplier.js  |  2 +-
 src/components/Output.js   | 26 +++++++++++++++++++++++---
 src/components/Output.scss |  6 ++++++
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/PhonoChangeApplier.js b/src/PhonoChangeApplier.js
index ac06c52..08db24e 100644
--- a/src/PhonoChangeApplier.js
+++ b/src/PhonoChangeApplier.js
@@ -102,7 +102,7 @@ const PhonoChangeApplier = () => {
       <Features phones={phones} features={features} dispatch={dispatch}/>
       <Epochs epochs={epochs} dispatch={dispatch} />
       <Options options={options} dispatch={dispatch}/>
-      <Output results={results} dispatch={dispatch}/>
+      <Output results={results} options={options} dispatch={dispatch}/>
     </div>
   );
 }
diff --git a/src/components/Output.js b/src/components/Output.js
index 6861213..1aa36a8 100644
--- a/src/components/Output.js
+++ b/src/components/Output.js
@@ -2,13 +2,33 @@ import React from 'react';
 import './Output.scss';
 
 const Output = props => {
-  const { results } = props;
+  const { results, options } = props;
+  const renderResults = () => {
+    switch(options.output) {
+      case 'default':
+        return renderDefault();
+      default:
+        return <></>
+    }
+  }
+
+  const renderDefault = () => {
+    return results.map((epoch, i) => {
+    const lexicon = epoch.lexicon.map(lexeme => <span>{lexeme}</span>);
+      return (
+      <div key={`epoch-${i}`} className="Output-epoch">
+        <h5>{epoch.pass}</h5>
+        <p className="lexicon">{lexicon}</p>
+      </div>
+      )
+    })
+  }
   return (
     <div className="Output" data-testid="Output">
       <h3>Results of Run</h3>
 
-      <div data-testid="Output-lexicon">
-        {results && results.length ? results[0].lexicon.map((lexicalItem, i) => <p key={`output-lexical-item-${i}`}>{lexicalItem}</p>) : <></>}
+      <div data-testid="Output-lexicon" className="Output_container">
+        {results && results.length ? renderResults() : <></>}
       </div>
     </div>
   );
diff --git a/src/components/Output.scss b/src/components/Output.scss
index e69de29..3bd79e2 100644
--- a/src/components/Output.scss
+++ b/src/components/Output.scss
@@ -0,0 +1,6 @@
+div.Output-epoch {
+  display: flex;
+  p.lexicon {
+    display: flex;
+  }
+}
\ No newline at end of file