From 1698abe26a27573eff5419ba05a6cb6d8977138b Mon Sep 17 00:00:00 2001
From: Ngoc Le <ngocle@outlook.com>
Date: Thu, 20 Jun 2019 23:22:08 -0700
Subject: [PATCH 1/4] added on change event handler and state to hold form
 inputs to playersubmission form, added AddPoeamLIneCallback function in Game
 component

---
 src/components/FinalPoem.js            |  3 +-
 src/components/Game.js                 | 21 +++++-
 src/components/PlayerSubmissionForm.js | 92 ++++++++++++++++++++++++--
 3 files changed, 106 insertions(+), 10 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..e02213f7 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -9,9 +9,8 @@ const FinalPoem = (props) => {
         <h3>Final Poem</h3>
 
       </section>
-
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn"/>
       </div>
     </div>
   );
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..2e8ba574 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,8 +8,25 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
-  }
 
+    this.state = {
+      poem: []
+    }
+  }
+  //addPoemLine is a place holder function that add exampleFormat to the final poem
+  addPoemLineCallback = (words) => {
+     let line = FIELDS.map((field) => {
+       if(field.key) {
+         if (words[field.key] !== "") {
+         return words[field.key]
+         }
+       } else {
+         return field;
+       }                              
+     })
+    //  .join(" ");
+    console.log(line)
+  }
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -34,7 +51,7 @@ class Game extends Component {
 
         <RecentSubmission />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm addPoemLineCallback={this.addPoemLineCallback} />
 
         <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..b8a7e32f 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,25 +5,105 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+    
+    this.cleared = {
+      adj1: "",
+      noun1: "",
+      adv: "",
+      verb: "",
+      adj2: "",
+      noun2: "",
+    }
+
+    this.state = {...this.cleared, player: 1}
+  }
+  //Add function to call the callback function from Game here
+  addWords  = (event) => {
+    
+    event.preventDefault();
+    
+    const words = this.state
+
+    this.props.addPoemLineCallback(words)
+
+    this.setState({...this.cleared})
+
+    let updatedUserId = this.state.player
+    updatedUserId += 1
+  
+    this.setState({
+      player: updatedUserId});
+      
+  }
+  
+  onChangeHandler = (event) => {
+    const updatedState = {};
+    
+    const field = event.target.name;
+    const value = event.target.value;
+    
+    updatedState[field] = value;
+    this.setState(updatedState);
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.state.player }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form className="PlayerSubmissionForm__form" onSubmit={this.addWords}>
 
           <div className="PlayerSubmissionForm__poem-inputs">
-
+            "The"
             {
               // Put your form inputs here... We've put in one below as an example
             }
+            
             <input
-              placeholder="hm..."
-              type="text" />
-
+              name="adj1"
+              placeholder="adjective"
+              value={this.state.adj1}
+              type="text" 
+              onChange={this.onChangeHandler}
+              />
+            <input
+              name="noun1"
+              placeholder="noun"
+              value={this.state.noun1}
+              type="text" 
+              onChange={this.onChangeHandler}
+              />      
+            <input
+              name="adv"
+              placeholder="adverb"
+              type="text" 
+              value={this.state.adv}
+              onChange={this.onChangeHandler}
+              />
+            <input
+              name="verb"
+              placeholder="verb"
+              value={this.state.verb}
+              type="text" 
+              onChange={this.onChangeHandler}
+              />
+            "the"
+            <input
+              name="adj2"
+              placeholder="adjective"
+              value={this.state.adj2}
+              type="text"
+              onChange={this.onChangeHandler}
+              />
+            <input
+              name="noun2"
+              placeholder="noun"
+              value={this.state.noun2}
+              type="text" 
+              onChange={this.onChangeHandler}
+              />
+            "."
           </div>
 
           <div className="PlayerSubmissionForm__submit">

From e0f982a49f7b4a875510282c4281ed34a05ef8dc Mon Sep 17 00:00:00 2001
From: Ngoc Le <ngocle@outlook.com>
Date: Thu, 20 Jun 2019 23:45:09 -0700
Subject: [PATCH 2/4] pass recent submission props from game component to
 recentsubmission component

---
 src/components/Game.js             | 10 ++++++----
 src/components/RecentSubmission.js |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 2e8ba574..b2fba33e 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -10,7 +10,8 @@ class Game extends Component {
     super(props);
 
     this.state = {
-      poem: []
+      recentSubmission: "",
+      finalPoem: []
     }
   }
   //addPoemLine is a place holder function that add exampleFormat to the final poem
@@ -23,9 +24,10 @@ class Game extends Component {
        } else {
          return field;
        }                              
+     }).filter(word => word !== undefined ).join(" ");
+     this.setState({
+       recentSubmission: line
      })
-    //  .join(" ");
-    console.log(line)
   }
   render() {
 
@@ -49,7 +51,7 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        <RecentSubmission recentSubmission={this.state.recentSubmission}/>
 
         <PlayerSubmissionForm addPoemLineCallback={this.addPoemLineCallback} />
 
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..f95a7827 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -5,7 +5,7 @@ const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ props.recentSubmission }</p>
     </div>
   );
 }

From a2d97bcdeba5ee695943f95982b71e5d659869d2 Mon Sep 17 00:00:00 2001
From: Ngoc Le <ngocle@outlook.com>
Date: Fri, 21 Jun 2019 01:32:09 -0700
Subject: [PATCH 3/4] added conditional hide and show statements and onclick
 handler to FinalPoem and displaycallback function to game

---
 src/components/FinalPoem.js | 53 ++++++++++++++++++++++++++++++-------
 src/components/Game.js      | 35 +++++++++++++++++++-----
 2 files changed, 73 insertions(+), 15 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index e02213f7..d85233c3 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,19 +1,54 @@
-import React from 'react';
+import React, { Component } from 'react';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
+class FinalPoem extends Component {
 
-  return (
-    <div className="FinalPoem">
+  constructor(props) {
+    super(props);
+    this.state = {
+      finalPoem: props.poem
+    }
+  }
+  showFinalPoem = () => {
+    const poemlines = this.state.finalPoem.map((poemline, i) => {
+      return (
+        <p key={i}>{poemline}</p>
+      )
+    });
+    return poemlines
+  }
+
+  onSubmitButtonClick = () => {
+    this.props.displayCallback()
+  }
+
+  render() {
+   if(this.props.display) {
+
+    return (
+      <div className="FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+        </section>
+        <div className="FinalPoem__reveal-btn-container">
+          <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={this.onSubmitButtonClick}/>
+        </div>
+      </div>
+    );
+   } else {
+     return(
+      <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        <section>
+        {this.showFinalPoem()}
+        </section> 
       </section>
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn"/>
       </div>
-    </div>
-  );
+     )
+
+   }
+  }
 }
 
 export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index b2fba33e..c5010e61 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -11,10 +11,18 @@ class Game extends Component {
 
     this.state = {
       recentSubmission: "",
-      finalPoem: []
+      finalPoem: [],
+      display: true
+
     }
   }
-  //addPoemLine is a place holder function that add exampleFormat to the final poem
+  
+  displayCallback = () => {
+    this.setState({
+      display: false,
+    })
+  }
+
   addPoemLineCallback = (words) => {
      let line = FIELDS.map((field) => {
        if(field.key) {
@@ -25,8 +33,12 @@ class Game extends Component {
          return field;
        }                              
      }).filter(word => word !== undefined ).join(" ");
+
+     let updatedPoem = this.state.finalPoem;
+     updatedPoem.push(line)
      this.setState({
-       recentSubmission: line
+       recentSubmission: line,
+       finalPoem: updatedPoem
      })
   }
   render() {
@@ -50,12 +62,23 @@ class Game extends Component {
         <p className="Game__format-example">
           { exampleFormat }
         </p>
+        {
+          this.state.display?
+            <section>
+            <RecentSubmission recentSubmission={this.state.recentSubmission}/>
 
-        <RecentSubmission recentSubmission={this.state.recentSubmission}/>
+            <PlayerSubmissionForm addPoemLineCallback={this.addPoemLineCallback} />
+            </section>
 
-        <PlayerSubmissionForm addPoemLineCallback={this.addPoemLineCallback} />
+            :null
+        }
 
-        <FinalPoem />
+        <FinalPoem 
+          
+          poem ={this.state.finalPoem}
+          displayCallback={this.displayCallback}
+          display={this.state.display}
+        />
 
       </div>
     );

From 85458dc72bb3230e6b4afba516006ac1fafa35ff Mon Sep 17 00:00:00 2001
From: Ngoc Le <ngocle@outlook.com>
Date: Fri, 21 Jun 2019 10:49:39 -0700
Subject: [PATCH 4/4] added validation for form field text

---
 src/components/PlayerSubmissionForm.js | 27 +++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index b8a7e32f..92f88c49 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -17,7 +17,20 @@ class PlayerSubmissionForm extends Component {
 
     this.state = {...this.cleared, player: 1}
   }
-  //Add function to call the callback function from Game here
+  
+  validations = {
+    adj1: /.+/,
+    noun1: /.+/,
+    adv: /.+/, 
+    verb: /.+/, 
+    adj2: /.+/, 
+    noun2: /.+/
+  };
+
+  fieldValid = (fieldName) => {
+    return this.validations[fieldName].test(this.state[fieldName]);
+  };
+
   addWords  = (event) => {
     
     event.preventDefault();
@@ -60,28 +73,28 @@ class PlayerSubmissionForm extends Component {
               // Put your form inputs here... We've put in one below as an example
             }
             
-            <input
+            <input className={!this.fieldValid('adj1') ? 'PlayerSubmissionFormt__input--invalid' : ''}
               name="adj1"
               placeholder="adjective"
               value={this.state.adj1}
               type="text" 
               onChange={this.onChangeHandler}
               />
-            <input
+            <input className={!this.fieldValid('noun1') ? 'PlayerSubmissionFormt__input--invalid' : ''}
               name="noun1"
               placeholder="noun"
               value={this.state.noun1}
               type="text" 
               onChange={this.onChangeHandler}
               />      
-            <input
+            <input className={!this.fieldValid('adv') ? 'PlayerSubmissionFormt__input--invalid' : ''}
               name="adv"
               placeholder="adverb"
               type="text" 
               value={this.state.adv}
               onChange={this.onChangeHandler}
               />
-            <input
+            <input className={!this.fieldValid('verb') ? 'PlayerSubmissionFormt__input--invalid' : ''}
               name="verb"
               placeholder="verb"
               value={this.state.verb}
@@ -89,14 +102,14 @@ class PlayerSubmissionForm extends Component {
               onChange={this.onChangeHandler}
               />
             "the"
-            <input
+            <input className={!this.fieldValid('adj2') ? 'PlayerSubmissionFormt__input--invalid' : ''}
               name="adj2"
               placeholder="adjective"
               value={this.state.adj2}
               type="text"
               onChange={this.onChangeHandler}
               />
-            <input
+            <input className={!this.fieldValid('noun2') ? 'PlayerSubmissionFormt__input--invalid' : ''}
               name="noun2"
               placeholder="noun"
               value={this.state.noun2}