hook lexicon form onChange to reducer dispatch SET_LEXICON

package.json

@@ -8,7 +8,7 @@
     "node-sass": "^4.13.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-scripts": "3.2.0"
+    "react-scripts": "^3.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/ProtoLang.js

@@ -9,9 +9,24 @@ const ProtoLang = (props) => {
       <form data-testid="ProtoLang-Lexicon">
         <textarea
           name="lexicon" 
+          data-testid="ProtoLang-Lexicon__textarea"
           value={props.lexicon ? props.lexicon.map(lexeme => `${lexeme.lexeme} \t#${lexeme.epoch.name}`).join('\n'): ''}
-          onChange={e=>props.dispatch({action: 'SET_LEXION', value: e.target.value.split(/\n/)})}
+          onChange={e=> {
-          >
+            console.log(e.target.value.split(/\n/).map(line => {
+              const lexeme = line.split('#')[0].trim();
+              const epoch = line.split('#')[1] || '';
+              return { lexeme, epoch }
+              }))
+            props.dispatch({
+              type: 'SET_LEXICON', 
+              value: e.target.value.split(/\n/).map(line => {
+                const lexeme = line.split('#')[0].trim();
+                const epoch = line.split('#')[1] || '';
+                return { lexeme, epoch }
+              })
+            })
+          }
+          }>
         </textarea>
       </form>
     </div>

src/components/ProtoLang.test.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import ProtoLang from './ProtoLang';
 import renderer from 'react-test-renderer';
 import { exportAllDeclaration } from '@babel/types';
-import { render } from '@testing-library/react';
+import {render, fireEvent} from '@testing-library/react';
 import extendExpect from '@testing-library/jest-dom/extend-expect'
 
 it('renders ProtoLang without crashing', () => {
@@ -13,19 +13,15 @@ it('renders ProtoLang without crashing', () => {
 });
 
 
-
 describe('ProtoLang', () => {
   it('renders the correct subtitle', () => {
     const { getByTestId } = render(<ProtoLang />);
     expect(getByTestId('ProtoLang')).toHaveTextContent('Proto Language Lexicon');
-  })
+  });
   
   it('renders lexicon from state', () => {
     const { getByTestId } = render(<ProtoLang lexicon={[{ lexeme:'one', epoch:{name: 'epoch-one', changes: []} }]}/>);
-    expect(getByTestId('ProtoLang-Lexicon')).toHaveFormValues({lexicon: 'one #epoch-one'});
+    expect(getByTestId('ProtoLang-Lexicon')).toHaveFormValues({lexicon: 'one \t#epoch-one'});
-  })
+  });
-
+  
-  it('', () => {
-
-  })
 })

src/reducers/stateReducer.js

@@ -66,6 +66,7 @@ export const stateReducer = (state: stateType, action: actionType): stateType =>
     }
 
     default:
+      console.log('default')
       return state;
   }
 }

src/reducers/stateReducer.lexicon.js

@@ -35,6 +35,7 @@ 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}