From fe1dc3a2081238efa191b04878441d070d7ec091 Mon Sep 17 00:00:00 2001
From: Luxi Lindsey <Luxi.Lindsey@gmail.com>
Date: Fri, 1 Jun 2018 15:19:49 -0700
Subject: [PATCH 1/3] Created new js file NewMadLibsFrom and started creating
 the controlled form

---
 package.json                     |   2 +-
 src/App.js                       |   6 +-
 src/components/NewMadLibsForm.js | 113 +++++++++++++++++++++++++++++++
 3 files changed, 117 insertions(+), 4 deletions(-)
 create mode 100644 src/components/NewMadLibsForm.js

diff --git a/package.json b/package.json
index 9d7a88e..be01922 100644
--- a/package.json
+++ b/package.json
@@ -13,4 +13,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.js b/src/App.js
index dd2692a..eb58f50 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import './App.css';
 import MadLibs from './madlibs/MadLibs.js';
 import Story from './components/Story.js';
+import NewMadLibsForm from './components/NewMadLibsForm';
 
 class App extends Component {
   constructor() {
@@ -28,9 +29,8 @@ class App extends Component {
       <section className="App">
         <h1>Welcome to MadLibs!</h1>
         <p>Fill in all of the choices to see your final story.</p>
-        {/*
-          Render your form with input values
-        */}
+        <NewMadLibsForm
+          addMadLibsCallback={this.updateWord}/>
         <Story
           title={ this.state.selectedMadLib.title }
           text={ this.state.selectedMadLib.getText() }
diff --git a/src/components/NewMadLibsForm.js b/src/components/NewMadLibsForm.js
new file mode 100644
index 0000000..14638e0
--- /dev/null
+++ b/src/components/NewMadLibsForm.js
@@ -0,0 +1,113 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class NewMadLibsForm extends Component {
+  static propTypes = {
+    addStudentCallback: PropTypes.func.isRequired,
+  }
+
+  constructor() {
+    super();
+
+    this.state = {
+      adjective_1: '',
+      adjective_2: '',
+      noun_1: '',
+      noun_2: ''
+    }
+  }
+
+  onInputChange = (event) => {
+    console.log(`Got inupt change on ${event.target.name}, new value is ${event.target.value}`)
+
+    const newState = {};
+    newState[event.target.name] = event.target.value;
+    this.setState(newState);
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    console.log('form submissions');
+
+    const adjective_1 = this.state.adjective_1;
+    const adjective_2 = this.state.adjective_2;
+    const noun_1 = this.state.noun_1;
+    const noun_2 = this.state.noun_2;
+    this.props.addStudentCallback(adjective_1, adjective_2, noun_1, noun_2);
+
+    this.setState({
+      adjective_1: '',
+      adjective_2: '',
+      noun_1: '',
+      noun_2: ''
+    });
+  }
+
+
+  render() {
+
+
+    return (
+      <div>
+        <form
+        className="new-madlibs-form"
+        id="new-madlibs"
+        >
+          <div>
+            <label htmlFor="adjective_1"></label>
+            <input
+              name="adjective_1"
+              type="text"
+              placeholder="adjective_1"
+              value={this.state.adjective_1}
+              onChange={this.onInputChange}
+              />
+          </div>
+
+          <div>
+            <label htmlFor="adjective_2"></label>
+            <input
+              name="adjective_2"
+              type="text"
+              placeholder="adjective_2"
+              value={this.state.adjective_2}
+              onChange={this.onInputChange}
+              />
+          </div>
+
+          <div>
+            <label htmlFor="noun_1"></label>
+            <input
+              name="noun_1"
+              type="text"
+              placeholder="noun_1"
+              value={this.state.noun_1}
+              onChange={this.onInputChange}
+              />
+          </div>
+
+          <div>
+            <label htmlFor="noun_2"></label>
+            <input
+              name="noun_2"
+              type="text"
+              placeholder="noun_2"
+              value={this.state.noun_2}
+              onChange={this.onInputChange}
+              />
+          </div>
+
+          <input
+            className="button success"
+            type="submit"
+            value="Show MadLib"
+          />
+        </form>
+      </div>
+    );
+  }
+
+}
+
+export default NewMadLibsForm;

From b50b8b9e9a3dfc0088eaf8e174d80084b0b76a7c Mon Sep 17 00:00:00 2001
From: Luxi Lindsey <Luxi.Lindsey@gmail.com>
Date: Fri, 1 Jun 2018 17:40:27 -0700
Subject: [PATCH 2/3] Updating the controlled form

---
 src/App.js                       |  10 +++-
 src/components/NewMadLibsForm.js | 100 +++++++++++--------------------
 2 files changed, 42 insertions(+), 68 deletions(-)

diff --git a/src/App.js b/src/App.js
index eb58f50..0c91f9c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,6 +10,7 @@ class App extends Component {
 
     this.state = {
       selectedMadLib: MadLibs[0]
+      // selectedMadLib: MadLibs[Math.floor(Math.random() * (MadLibs.length-1))]
     };
   }
 
@@ -23,14 +24,19 @@ class App extends Component {
     changedWord.value = value;
     this.setState({selectedMadLib: updatedMadLib});
   }
-
+  
   render() {
+
+    console.log(this.state.selectedMadLib);
+
     return (
       <section className="App">
         <h1>Welcome to MadLibs!</h1>
         <p>Fill in all of the choices to see your final story.</p>
         <NewMadLibsForm
-          addMadLibsCallback={this.updateWord}/>
+          words = {this.state.selectedMadLib.words}
+          updateWord = {this.updateWord}
+          />
         <Story
           title={ this.state.selectedMadLib.title }
           text={ this.state.selectedMadLib.getText() }
diff --git a/src/components/NewMadLibsForm.js b/src/components/NewMadLibsForm.js
index 14638e0..4d72de7 100644
--- a/src/components/NewMadLibsForm.js
+++ b/src/components/NewMadLibsForm.js
@@ -3,22 +3,23 @@ import PropTypes from 'prop-types';
 
 class NewMadLibsForm extends Component {
   static propTypes = {
-    addStudentCallback: PropTypes.func.isRequired,
+    words: PropTypes.array.isRequired,
+    updateWord: PropTypes.func.isRequired,
   }
 
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
-    this.state = {
-      adjective_1: '',
-      adjective_2: '',
-      noun_1: '',
-      noun_2: ''
-    }
+    let initialState = {};
+    props.words.forEach((word) => {
+      initialState[word.key]= '';
+    });
+
+    this.state = initialState;
   }
 
   onInputChange = (event) => {
-    console.log(`Got inupt change on ${event.target.name}, new value is ${event.target.value}`)
+    console.log(`Got input change on ${event.target.name}, new value is ${event.target.value}`)
 
     const newState = {};
     newState[event.target.name] = event.target.value;
@@ -30,74 +31,41 @@ class NewMadLibsForm extends Component {
 
     console.log('form submissions');
 
-    const adjective_1 = this.state.adjective_1;
-    const adjective_2 = this.state.adjective_2;
-    const noun_1 = this.state.noun_1;
-    const noun_2 = this.state.noun_2;
-    this.props.addStudentCallback(adjective_1, adjective_2, noun_1, noun_2);
-
-    this.setState({
-      adjective_1: '',
-      adjective_2: '',
-      noun_1: '',
-      noun_2: ''
+    this.props.words.forEach((word) => {
+
+      this.props.updateWord(word.key, this.state[word.key])
+      this.setState({
+        [word.key]: '',
+      });
     });
+
   }
 
 
   render() {
 
+    const words = this.props.words;
+    const inputs = words.map((word, index) => {
+      return <div key={ index }>
+            <label htmlFor={word.label}></label>
+            <input
+              name={word.key}
+              type="text"
+              placeholder={word.key}
+              value={this.state[word.key]}
+              onChange={this.onInputChange}
+              />
+          </div>
+    });
 
     return (
       <div>
         <form
         className="new-madlibs-form"
         id="new-madlibs"
+        onSubmit={this.onFormSubmit}
         >
-          <div>
-            <label htmlFor="adjective_1"></label>
-            <input
-              name="adjective_1"
-              type="text"
-              placeholder="adjective_1"
-              value={this.state.adjective_1}
-              onChange={this.onInputChange}
-              />
-          </div>
-
-          <div>
-            <label htmlFor="adjective_2"></label>
-            <input
-              name="adjective_2"
-              type="text"
-              placeholder="adjective_2"
-              value={this.state.adjective_2}
-              onChange={this.onInputChange}
-              />
-          </div>
-
-          <div>
-            <label htmlFor="noun_1"></label>
-            <input
-              name="noun_1"
-              type="text"
-              placeholder="noun_1"
-              value={this.state.noun_1}
-              onChange={this.onInputChange}
-              />
-          </div>
-
-          <div>
-            <label htmlFor="noun_2"></label>
-            <input
-              name="noun_2"
-              type="text"
-              placeholder="noun_2"
-              value={this.state.noun_2}
-              onChange={this.onInputChange}
-              />
-          </div>
-
+          {inputs}
           <input
             className="button success"
             type="submit"
@@ -105,7 +73,7 @@ class NewMadLibsForm extends Component {
           />
         </form>
       </div>
-    );
+    )
   }
 
 }

From f4b355820bbd945fb6576fa14949a6ae489a06a1 Mon Sep 17 00:00:00 2001
From: Luxi Lindsey <Luxi.Lindsey@gmail.com>
Date: Fri, 1 Jun 2018 18:20:03 -0700
Subject: [PATCH 3/3] Updated the form to render the words from the form

---
 src/App.css                      | 4 ++++
 src/App.js                       | 9 ++++-----
 src/components/NewMadLibsForm.js | 6 +++---
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index ea5a671..c822203 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,3 +7,7 @@ body {
   color: white;
   font: normal 18px/1.5 "Fira Sans", "Helvetica Neue", sans-serif;
 }
+
+/* .false {
+  display: none;
+} */
diff --git a/src/App.js b/src/App.js
index 0c91f9c..1870c0d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,14 +9,13 @@ class App extends Component {
     super();
 
     this.state = {
-      selectedMadLib: MadLibs[0]
-      // selectedMadLib: MadLibs[Math.floor(Math.random() * (MadLibs.length-1))]
+      selectedMadLib: MadLibs[Math.floor(Math.random() * (MadLibs.length-1))],
     };
   }
 
   // Update the value of a word in the selected
   // mad lib using setState
-  updateWord(key, value) {
+  updateWord = (key, value) => {
     const updatedMadLib = this.state.selectedMadLib;
     const changedWord = updatedMadLib.words.find((word) => {
       return word.key === key
@@ -24,7 +23,7 @@ class App extends Component {
     changedWord.value = value;
     this.setState({selectedMadLib: updatedMadLib});
   }
-  
+
   render() {
 
     console.log(this.state.selectedMadLib);
@@ -40,7 +39,7 @@ class App extends Component {
         <Story
           title={ this.state.selectedMadLib.title }
           text={ this.state.selectedMadLib.getText() }
-          />
+        />
       </section>
     );
   }
diff --git a/src/components/NewMadLibsForm.js b/src/components/NewMadLibsForm.js
index 4d72de7..32d940d 100644
--- a/src/components/NewMadLibsForm.js
+++ b/src/components/NewMadLibsForm.js
@@ -34,9 +34,9 @@ class NewMadLibsForm extends Component {
     this.props.words.forEach((word) => {
 
       this.props.updateWord(word.key, this.state[word.key])
-      this.setState({
-        [word.key]: '',
-      });
+      this.setState(
+        {[word.key]: '',},
+      );
     });
 
   }