From 44bf0f6c8f4750dde8dfad47dc731d8c0bb19ff7 Mon Sep 17 00:00:00 2001
From: Rinostar <codingrinostar@gmail.com>
Date: Wed, 11 Dec 2019 22:36:41 -0800
Subject: [PATCH 1/5] wave_1: update controlled player submission form

---
 src/components/Game.js                 | 13 +++-
 src/components/PlayerSubmissionForm.js | 93 +++++++++++++++++++++++---
 2 files changed, 96 insertions(+), 10 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..8d85088d 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,6 +8,17 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      lines: [],
+    }
+  }
+
+  addLine = (line) =>{
+    const lines = this.state.lines;
+    lines.push(line);
+
+    this.setState({ lines });
   }
 
   render() {
@@ -34,7 +45,7 @@ class Game extends Component {
 
         <RecentSubmission />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm addLineCallback={this.addLine} id={ (this.state.lines.length + 1) }/>
 
         <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..9992ba12 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,25 +5,100 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    }
+  }
+
+  onFieldChange = (event) => {
+    this.setState({ 
+      [event.target.name]: event.target.value,
+    });
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    const newLine = {
+      adj1: this.state.adj1,
+      noun1: this.state.noun1,
+      adv: this.state.adv,
+      verb: this.state.verb,
+      adj2: this.state.adj2,
+      noun2: this.state.noun2,
+    };
+
+    this.setState({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    });
+
+    this.props.addLineCallback(newLine);
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.props.id }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form className="PlayerSubmissionForm__form" onSubmit={this.onFormSubmit}>
 
           <div className="PlayerSubmissionForm__poem-inputs">
-
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
+            The
             <input
-              placeholder="hm..."
-              type="text" />
-
+              onChange={this.onFieldChange}
+              name="adj1"
+              value={this.state.adj1}
+              type="text"
+              placeholder="adjective"
+            />
+            <input
+              onChange={this.onFieldChange}
+              name="noun1"
+              value={this.state.noun1}
+              type="text"
+              placeholder="noun"
+            />
+            <input
+              onChange={this.onFieldChange}
+              name="adv"
+              value={this.state.adv}
+              type="text"
+              placeholder="adverb"
+            />
+            <input
+              onChange={this.onFieldChange}
+              name="verb"
+              value={this.state.verb}
+              type="text"
+              placeholder="verb"
+            />
+            The
+            <input
+              onChange={this.onFieldChange}
+              name="adj2"
+              value={this.state.adj2}
+              type="text"
+              placeholder="adjective"
+            />
+            <input
+              onChange={this.onFieldChange}
+              name="noun2"
+              value={this.state.noun2}
+              type="text"
+              placeholder="noun"
+            />.
           </div>
 
           <div className="PlayerSubmissionForm__submit">

From 85aa669be47b66bc5a0958834e0649f6bc9911c7 Mon Sep 17 00:00:00 2001
From: Rinostar <codingrinostar@gmail.com>
Date: Thu, 12 Dec 2019 16:56:37 -0800
Subject: [PATCH 2/5] wave_2: update FinalPoem button

---
 src/components/FinalPoem.js            | 26 ++++++++++++++++++--------
 src/components/Game.js                 |  7 ++++++-
 src/components/PlayerSubmissionForm.js | 12 +++---------
 3 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..cdb324cc 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,16 +3,26 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  const finalizedPoem = props.poem.map((line, i) => {
+    return (
+      <p key={i}>
+        {line}
+      </p>
+    )
+  });
+
   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" />
-      </div>
+      { props.ready ? 
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          { finalizedPoem }
+        </section> 
+        : 
+        <div className="FinalPoem__reveal-btn-container">
+          <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={ props.onFinalSubmit }/>
+        </div>
+      }
     </div>
   );
 }
diff --git a/src/components/Game.js b/src/components/Game.js
index 8d85088d..e64cef18 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -11,6 +11,7 @@ class Game extends Component {
 
     this.state = {
       lines: [],
+      ready: false,
     }
   }
 
@@ -21,6 +22,10 @@ class Game extends Component {
     this.setState({ lines });
   }
 
+  finalSubmit = () => {
+    this.setState({ ready: true })
+  }
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -47,7 +52,7 @@ class Game extends Component {
 
         <PlayerSubmissionForm addLineCallback={this.addLine} id={ (this.state.lines.length + 1) }/>
 
-        <FinalPoem />
+        <FinalPoem poem={ this.state.lines } ready={ this.state.ready } onFinalSubmit={ this.finalSubmit }/>
 
       </div>
     );
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 9992ba12..9d351efa 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -25,15 +25,9 @@ class PlayerSubmissionForm extends Component {
   onFormSubmit = (event) => {
     event.preventDefault();
 
-    const newLine = {
-      adj1: this.state.adj1,
-      noun1: this.state.noun1,
-      adv: this.state.adv,
-      verb: this.state.verb,
-      adj2: this.state.adj2,
-      noun2: this.state.noun2,
-    };
-
+    // React won't render Object. Making the line a string or array to render successfully in FinalPoem's map function (line#9)
+    const newLine = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} ${this.state.adj2} ${this.state.noun2}.`
+    
     this.setState({
       adj1: '',
       noun1: '',

From eaec0aee97c9d2f861ce185ab16ab556cc54e673 Mon Sep 17 00:00:00 2001
From: Rinostar <codingrinostar@gmail.com>
Date: Thu, 12 Dec 2019 17:00:22 -0800
Subject: [PATCH 3/5] ***fix sentence style in PlayerSubmissionForm

---
 src/components/PlayerSubmissionForm.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 9d351efa..792ba526 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -26,7 +26,7 @@ class PlayerSubmissionForm extends Component {
     event.preventDefault();
 
     // React won't render Object. Making the line a string or array to render successfully in FinalPoem's map function (line#9)
-    const newLine = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} ${this.state.adj2} ${this.state.noun2}.`
+    const newLine = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`
     
     this.setState({
       adj1: '',
@@ -78,7 +78,7 @@ class PlayerSubmissionForm extends Component {
               type="text"
               placeholder="verb"
             />
-            The
+            the
             <input
               onChange={this.onFieldChange}
               name="adj2"

From 97a86a96d4301ec5284192c4341ff82e5458ab19 Mon Sep 17 00:00:00 2001
From: Rinostar <codingrinostar@gmail.com>
Date: Thu, 12 Dec 2019 22:25:10 -0800
Subject: [PATCH 4/5] wave_3.1: update conditional render for Game

---
 src/components/Game.js                 | 16 ++++++++++++----
 src/components/PlayerSubmissionForm.js |  2 +-
 src/components/RecentSubmission.js     |  2 +-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index e64cef18..37956cac 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -48,10 +48,18 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm addLineCallback={this.addLine} id={ (this.state.lines.length + 1) }/>
-
+        { this.state.lines.length > 0 && !this.state.ready ?
+          <RecentSubmission recentLine={ this.state.lines[this.state.lines.length - 1] } />
+          :
+          ''
+        }
+
+        { this.state.ready?
+          ''
+          :
+          <PlayerSubmissionForm addLineCallback={this.addLine} id={ (this.state.lines.length + 1) }/>
+        }
+        
         <FinalPoem poem={ this.state.lines } ready={ this.state.ready } onFinalSubmit={ this.finalSubmit }/>
 
       </div>
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 792ba526..51e07228 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -25,7 +25,7 @@ class PlayerSubmissionForm extends Component {
   onFormSubmit = (event) => {
     event.preventDefault();
 
-    // React won't render Object. Making the line a string or array to render successfully in FinalPoem's map function (line#9)
+    // React won't render Object. Making the line a string or array here to render successfully in FinalPoem's map function on line#9
     const newLine = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`
     
     this.setState({
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..21d7239e 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.recentLine }</p>
     </div>
   );
 }

From 4e3d4077aca78e8dfc1e48011fbf3f864157ce48 Mon Sep 17 00:00:00 2001
From: Rinostar <codingrinostar@gmail.com>
Date: Thu, 12 Dec 2019 22:50:35 -0800
Subject: [PATCH 5/5] wave_3.2: add validation styling & proptype

---
 src/components/FinalPoem.js            |  7 +++++++
 src/components/Game.js                 |  2 +-
 src/components/PlayerSubmissionForm.js | 16 ++++++++++++++++
 src/components/RecentSubmission.js     |  5 +++++
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index cdb324cc..97a263e7 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
 
@@ -27,4 +28,10 @@ const FinalPoem = (props) => {
   );
 }
 
+FinalPoem.propTypes = {
+  poem: PropTypes.array.isRequired,
+  ready: PropTypes.bool.isRequired,
+  onFinalSubmit: PropTypes.func.isRequired,
+}
+
 export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index 37956cac..ca9a5499 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -95,6 +95,6 @@ const FIELDS = [
     placeholder: 'noun',
   },
   ".",
-];
+]
 
 export default Game;
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 51e07228..3db1df40 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
 class PlayerSubmissionForm extends Component {
 
@@ -22,6 +23,10 @@ class PlayerSubmissionForm extends Component {
     });
   }
 
+  fieldValid = (fieldName) => {
+    return this.state[fieldName] !== '';
+  }
+
   onFormSubmit = (event) => {
     event.preventDefault();
 
@@ -56,6 +61,7 @@ class PlayerSubmissionForm extends Component {
               value={this.state.adj1}
               type="text"
               placeholder="adjective"
+              className={this.fieldValid("adj1")? "" : "PlayerSubmissionFormt__input--invalid"}
             />
             <input
               onChange={this.onFieldChange}
@@ -63,6 +69,7 @@ class PlayerSubmissionForm extends Component {
               value={this.state.noun1}
               type="text"
               placeholder="noun"
+              className={this.fieldValid("noun1")? "" : "PlayerSubmissionFormt__input--invalid"}
             />
             <input
               onChange={this.onFieldChange}
@@ -70,6 +77,7 @@ class PlayerSubmissionForm extends Component {
               value={this.state.adv}
               type="text"
               placeholder="adverb"
+              className={this.fieldValid("adv")? "" : "PlayerSubmissionFormt__input--invalid"}
             />
             <input
               onChange={this.onFieldChange}
@@ -77,6 +85,7 @@ class PlayerSubmissionForm extends Component {
               value={this.state.verb}
               type="text"
               placeholder="verb"
+              className={this.fieldValid("verb")? "" : "PlayerSubmissionFormt__input--invalid"}
             />
             the
             <input
@@ -85,6 +94,7 @@ class PlayerSubmissionForm extends Component {
               value={this.state.adj2}
               type="text"
               placeholder="adjective"
+              className={this.fieldValid("adj2")? "" : "PlayerSubmissionFormt__input--invalid"}
             />
             <input
               onChange={this.onFieldChange}
@@ -92,6 +102,7 @@ class PlayerSubmissionForm extends Component {
               value={this.state.noun2}
               type="text"
               placeholder="noun"
+              className={this.fieldValid("noun2")? "" : "PlayerSubmissionFormt__input--invalid"}
             />.
           </div>
 
@@ -104,4 +115,9 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  addLineCallback: PropTypes.func.isRequired,
+  id: PropTypes.number.isRequired,
+}
+
 export default PlayerSubmissionForm;
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 21d7239e..67d10d1b 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import './RecentSubmission.css';
+import PropTypes from 'prop-types';
 
 const RecentSubmission = (props) => {
   return (
@@ -10,4 +11,8 @@ const RecentSubmission = (props) => {
   );
 }
 
+RecentSubmission.propTypes = {
+  recentLine: PropTypes.string.isRequired,
+}
+
 export default RecentSubmission;