hook lexicon into ProtoLang render

src/PhonoChangeApplier.js

@@ -122,7 +122,7 @@ const PhonoChangeApplier = () => {
 
   return (
     <div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
-      <ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
+      <ProtoLang lexicon={state.lexicon} dispatch={dispatch}/>
       <Features phonemes={phonemes} setPhonemes={setPhonemes} features={features} setFeatures={setFeatures}/>
       <Epochs epochs={epochs} setEpochs={setEpochs} errors={errors}/>
       <Options options={options} setOptions={setOptions} runChanges={runChanges}/>

src/components/ProtoLang.js

@@ -9,8 +9,8 @@ const ProtoLang = (props) => {
       <form data-testid="ProtoLang-Lexicon">
         <textarea
           name="lexicon" 
-          value={props.lexicon ? props.lexicon.join("\n") : ''}
+          value={props.lexicon ? props.lexicon.map(lexeme => `${lexeme.lexeme} \t#${lexeme.epoch.name}`).join('\n'): ''}
-          onChange={e=>props.setLexicon(e.target.value.split(/\n/))}
+          onChange={e=>props.dispatch({action: 'SET_LEXION', value: e.target.value.split(/\n/)})}
           >
         </textarea>
       </form>

src/components/ProtoLang.test.js

@@ -21,7 +21,11 @@ describe('ProtoLang', () => {
   })
   
   it('renders lexicon from state', () => {
-    const { getByTestId } = render(<ProtoLang lexicon={['one']}/>);
+    const { getByTestId } = render(<ProtoLang lexicon={[{ lexeme:'one', epoch:{name: 'epoch-one', changes: []} }]}/>);
-    expect(getByTestId('ProtoLang-Lexicon')).toHaveFormValues({lexicon: 'one'});
+    expect(getByTestId('ProtoLang-Lexicon')).toHaveFormValues({lexicon: 'one #epoch-one'});
+  })
+
+  it('', () => {
+
   })
 })