Ana Lisa Sutherland Octocs: Mad Lib

package.json

@@ -13,4 +13,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.js

@@ -2,19 +2,23 @@ import React, { Component } from 'react';
 import './App.css';
 import MadLibs from './madlibs/MadLibs.js';
 import Story from './components/Story.js';
+import WordSelectForm from './components/WordSelectForm.js'
 
 class App extends Component {
   constructor() {
     super();
 
+    // Get a random index of an array
+    // Math.radom() returns a random num between 0 and 1, so we multiply that number by our length in order to get a random float and then we round it with Math.floor to the nearest whole num
     this.state = {
-      selectedMadLib: MadLibs[0]
+      selectedMadLib: MadLibs[Math.floor(Math.random()*MadLibs.length)]
+      //
     };
   }
 
   // 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
@@ -26,18 +30,19 @@ class App extends Component {
   render() {
     return (
       <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
+      <h1>Welcome to MadLibs!</h1>
+      <p>Fill in all of the choices to see your final story.</p>
+      < WordSelectForm story={this.state.selectedMadLib } wordsSubmitCallback= {this.updateWord} />
+      {/*
+        Render your form with input values
         */}
         <Story
-          title={ this.state.selectedMadLib.title }
-          text={ this.state.selectedMadLib.getText() }
-          />
-      </section>
-    );
+        title={ this.state.selectedMadLib.title }
+        text={ this.state.selectedMadLib.getText() }
+        />
+        </section>
+      );
+    }
   }
-}
 
-export default App;
+  export default App;

src/components/WordSelectForm.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import MadLibs from '../madlibs/MadLibs';
+import PropTypes from 'prop-types';
+
+class WordSelectForm extends Component {
+  constructor(props) {
+    super(props);
+    // tracking form fields as part of state
+    let initialState = {};
+
+    props.story.words.forEach((word) => {
+      initialState[word.key] = '';
+    });
+
+    this.state = initialState;
+  }
+
+  static propTypes = {
+    story: PropTypes.object.isRequired
+  }
+
+  // handler for input changes on the form
+  onInputChange = (event) => {
+    console.log(`Got an input change event on input ${event.target.name}, new value is ${event.target.value}`);
+
+    const newState = {};
+    // this is targeting the name section of the input on the form name= ....
+    newState[event.target.name] = event.target.value;
+    this.setState(newState);
+  }
+
+  // handler for form submission
+  formSubmitted = (event) => {
+    event.preventDefault();
+
+    console.log('Form Submitted')
+
+    this.props.story.words.forEach((word) => {
+      const value = this.state[word.key]
+      // call back fxn to send to the parent
+      this.props.wordsSubmitCallback(word.key, value)
+      this.setState({
+        [word.key]: ''
+      });
+    })
+  }
+
+  // FORM NOTES:
+  // W/ onInputChange and value --- every time the user types into the name input field the NewStudentForm's state is updated.
+  render() {
+    // need to map over all words for a given story and generate word components
+
+    const wordComponenets = this.props.story.words.map((word, index) => {
+      return (<div key= { index }>
+        <label htmlFor={word.key}>{word.label}:</label>
+        <input
+        onChange={this.onInputChange}
+        value={this.state[word.key]}
+        name={ word.key }
+        placeholder= { word.label }
+        />
+        </div>)
+      });
+
+      return (
+        <div>
+        <form className="words-form" onSubmit={this.formSubmitted}>
+        { wordComponenets }
+        <input
+        className="button success"
+        type="submit"
+        value="Submit Words"
+        />
+        </form>
+        </div>
+      );
+    }
+  }
+
+  export default WordSelectForm;