From 46f1b2a831efb7698a93bd0ed7a9deeedf510385 Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Tue, 26 Nov 2019 18:39:40 -0800
Subject: [PATCH] implement hook for proto lang lexicon

---
 public/index.html                | 31 +------------------------------
 src/App.js                       |  4 +---
 src/PhonoChangeApplier.js        |  6 ++++--
 src/components/ProtoLang.js      | 11 ++++++++++-
 src/components/ProtoLang.scss    |  5 +++++
 src/components/ProtoLang.test.js |  9 ++++++++-
 6 files changed, 29 insertions(+), 37 deletions(-)
diff --git a/public/index.html b/public/index.html
index c240d2c..3f2a2b3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,40 +4,11 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>Phono Change Applier</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
index ec21e33..27a8461 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,9 +5,7 @@ import PhonoChangeApplier from './PhonoChangeApplier';
 function App() {
   return (
     <div className="App" data-testid="App">
-      <header className="App-header">
-        Phono Change Applier
-      </header>
+      <h1>Phono Change Applier</h1>
       <PhonoChangeApplier />
     </div>
   );
diff --git a/src/PhonoChangeApplier.js b/src/PhonoChangeApplier.js
index eb4e700..1dec8b6 100644
--- a/src/PhonoChangeApplier.js
+++ b/src/PhonoChangeApplier.js
@@ -1,12 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './PhonoChangeApplier.scss';
 
 import ProtoLang from './components/ProtoLang';
 
 const PhonoChangeApplier = () => {
+  const [ lexicon, setLexicon ] = useState(['one'])
+
   return (
     <div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
-      <ProtoLang />
+      <ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
     </div>
   );
 }
diff --git a/src/components/ProtoLang.js b/src/components/ProtoLang.js
index 74bec72..c858ccb 100644
--- a/src/components/ProtoLang.js
+++ b/src/components/ProtoLang.js
@@ -1,10 +1,19 @@
 import React from 'react';
 import './ProtoLang.scss';
 
-const ProtoLang = () => {
+const ProtoLang = (props) => {
   return (
     <div className="ProtoLang" data-testid="ProtoLang">
       <h3>Proto Language Lexicon</h3>
+      <br />
+      <form data-testid="ProtoLang-Lexicon">
+        <textarea
+          name="lexicon" 
+          value={props.lexicon ? props.lexicon.join("\n") : ''}
+          onChange={e=>props.setLexicon(e.target.value.split(/\n/))}
+          >
+        </textarea>
+      </form>
     </div>
   );
 }
diff --git a/src/components/ProtoLang.scss b/src/components/ProtoLang.scss
index e69de29..0840944 100644
--- a/src/components/ProtoLang.scss
+++ b/src/components/ProtoLang.scss
@@ -0,0 +1,5 @@
+.ProtoLang {
+  width: 100%;
+  height: 100%;
+  color: black;
+}
\ No newline at end of file
diff --git a/src/components/ProtoLang.test.js b/src/components/ProtoLang.test.js
index e532ebb..63b879a 100644
--- a/src/components/ProtoLang.test.js
+++ b/src/components/ProtoLang.test.js
@@ -12,9 +12,16 @@ it('renders ProtoLang without crashing', () => {
   ReactDOM.unmountComponentAtNode(div);
 });
 
+
+
 describe('ProtoLang', () => {
-  it('renders the correct title', () => {
+  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={['one']}/>);
+    expect(getByTestId('ProtoLang-Lexicon')).toHaveFormValues({lexicon: 'one'});
+  })
 })
\ No newline at end of file
