Sockets - Pauline

src/components/FinalPoem.js

@@ -3,15 +3,22 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  const displayLines = props.submissions.map((line, i) => {
+    return <p key={i}>{line}</p>
+  })
+
+
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
 
+        { props.showPoem ? displayLines : "" }
+
       </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" onClick={props.showFinalPoem}/>
       </div>
     </div>
   );

src/components/Game.js

@@ -5,13 +5,28 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 class Game extends Component {
-
   constructor(props) {
     super(props);
+    this.state = {
+      submissions: [],
+      showPoem: false,
+    }
   }
 
-  render() {
+  addSubmission = (newSubmission) => {
+    const newSentence = Object.values(newSubmission).join(" ")
+    this.setState({
+      submissions: [...this.state.submissions, newSentence],
+    })
+  }
+
+  showFinalPoem = (event) => {
+    event.preventDefault();
 
+    this.setState({ showPoem: true })
+  }
+
+  render() {
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
         return field.placeholder;
@@ -20,6 +35,29 @@ class Game extends Component {
       }
     }).join(" ");
 
+
+    // const newestSub = (allSubmissions) => {
+    //   if (allSubmissions.length > 0) {
+    //     return allSubmissions[newestSubIndex]
+    //   } else {
+    //     return ""
+    //   }
+    // }
+
+    // <RecentSubmission newestSubmission={newestSub(this.state.submissions)} />
+
+    const mostRecentSubmission = () => {
+      if ((this.state.submissions).length > 0) {
+        const allSubmissions = this.state.submissions
+        const newestSubIndex = allSubmissions.length - 1
+        const newestSub = allSubmissions[newestSubIndex]
+
+        return <RecentSubmission newestSubmission={newestSub} />
+      } else {
+        return ''
+      }
+    }
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -32,11 +70,11 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+          { mostRecentSubmission() }
 
-        <PlayerSubmissionForm />
+          { this.state.showPoem ? "" : <PlayerSubmissionForm fields={FIELDS} addSubmissionCallback={this.addSubmission} playerID={this.state.submissions.length + 1} /> }
 
-        <FinalPoem />
+        <FinalPoem submissions={ this.state.submissions } showPoem={this.state.showPoem} showFinalPoem={this.showFinalPoem} />
 
       </div>
     );

src/components/PlayerSubmissionForm.js

@@ -5,24 +5,93 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    const stateFromFields = {}
+    console.log(this.props.fields)
+    this.props.fields.forEach((field) => {
+      if (field.key) { 
+        stateFromFields[field.key] = ''
+      }
+    });
+    this.state = stateFromFields;
+
+    // this.state = {
+    //   adj1: '',
+    //   noun1: '',
+    //   adv: '',
+    //   verb: '',
+    //   adj2: '',
+    //   noun2: '',
+    // }
   }
 
+  onInputChange = (event) => {
+    console.log(`Field updated ${event.target.value}`)
+    const updatedState = {}
+
+    const field = event.target.name;
+    const value = event.target.value;
+
+    updatedState[field] = value;
+
+    this.setState(updatedState);
+  }
+
+  clearFields() {
+    const fields = {}
+    this.props.fields.forEach((field) => {
+      if (field.key) {
+        fields[field.key] = ""
+      }
+      this.setState(fields)
+    })
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    const dataFromForm = {}
+    this.props.fields.forEach((field) => {
+      if (field.key) {
+        dataFromForm[field.key] = this.state[field.key]
+      }
+    });
+
+    this.props.addSubmissionCallback(dataFromForm);
+    this.clearFields()
+  }
+
+
+  toggleClassName = (field) => {
+    return (this.state[field.key] === '' ? 'PlayerSubmissionFormt__input--invalid' : 'PlayerSubmissionFormt__input')
+  }
+
   render() {
+    const formInputs = this.props.fields.filter(f => f.key).map((field) => {
+      return <input
+                key={field.key}
+                type="text"
+                placeholder={field.placeholder}
+                name={field.key}
+                value={this.state[field.key]}
+                onChange={this.onInputChange}
+                className={this.toggleClassName(field)}
+              />
+    })
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.props.playerID }</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
             }
-            <input
-              placeholder="hm..."
-              type="text" />
+
+            { formInputs }
 
           </div>
 

src/components/RecentSubmission.js

@@ -2,10 +2,12 @@ import React from 'react';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
+  console.log(props)
+
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ props.newestSubmission }</p>
     </div>
   );
 }