From d4139ee57548451b3ce2d1be73342282b60ccab3 Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Fri, 29 Nov 2019 15:36:55 -0800
Subject: [PATCH] render epoch name

---
 src/PhonoChangeApplier.js               | 2 ++
 src/components/Epochs.js                | 2 +-
 src/components/SoundChangeSuite.js      | 4 ++--
 src/components/SoundChangeSuite.test.js | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/PhonoChangeApplier.js b/src/PhonoChangeApplier.js
index 39fd870..78aacf3 100644
--- a/src/PhonoChangeApplier.js
+++ b/src/PhonoChangeApplier.js
@@ -3,6 +3,7 @@ import './PhonoChangeApplier.scss';
 
 import ProtoLang from './components/ProtoLang';
 import Features from './components/Features';
+import Epochs from './components/Epochs';
 
 const PhonoChangeApplier = () => {
   const [ lexicon, setLexicon ] = useState(['one']);
@@ -14,6 +15,7 @@ const PhonoChangeApplier = () => {
     <div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
       <ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
       <Features phonemes={phonemes} setPhonemes={setPhonemes}/>
+      <Epochs />
     </div>
   );
 }
diff --git a/src/components/Epochs.js b/src/components/Epochs.js
index ff253f0..caa8523 100644
--- a/src/components/Epochs.js
+++ b/src/components/Epochs.js
@@ -3,7 +3,7 @@ import './Epochs.scss';
 
 import SoundChangeSuite from './SoundChangeSuite';
 
-const Epochs = () => {
+const Epochs = props => {
   return (
     <div className="Epochs" data-testid="Epochs">
       <h3>Sound Change Epochs</h3>
diff --git a/src/components/SoundChangeSuite.js b/src/components/SoundChangeSuite.js
index 47d7838..5cecafb 100644
--- a/src/components/SoundChangeSuite.js
+++ b/src/components/SoundChangeSuite.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import './SoundChangeSuite.scss';
 
-const SoundChangeSuite = () => {
+const SoundChangeSuite = props => {
   return (
     <div className="SoundChangeSuite" data-testid="SoundChangeSuite">
-      <h4>Epoch Name</h4>
+      <h4>{props.epoch ? Object.keys(props.epoch)[0] : 'Changes'}</h4>
     </div>
   );
 }
diff --git a/src/components/SoundChangeSuite.test.js b/src/components/SoundChangeSuite.test.js
index 69f87b7..5dc02b2 100644
--- a/src/components/SoundChangeSuite.test.js
+++ b/src/components/SoundChangeSuite.test.js
@@ -14,7 +14,7 @@ it('renders SoundChangeSuite without crashing', () => {
 
 describe('SoundChangeSuite', () => {
   it('renders the correct subtitle', () => {
-    const { getByTestId } = render(<SoundChangeSuite />);
+    const { getByTestId } = render(<SoundChangeSuite epoch={{'Epoch Name': ['sound change rule']}}/>);
     expect(getByTestId('SoundChangeSuite')).toHaveTextContent('Epoch Name');
   });