attempts props and callback function cycle for recent submission, add…

…s index and player

src/components/Game.js

@@ -13,6 +13,27 @@ const Game = () => {
     }
   }).join(' ');
 
+  const [submissionList, setSubmissionList] = useState([]);
+  const [lastSubmission, setLastSubmission] = useState('');
+  const submissions = [];
+  const [player, setPlayer] = useState(1);
+
+  const addSubmission = (submission) => {
+    console.log(submission) // delete laterz
+
+    // Duplicate the submission list.
+    const newSubmissionList = [...submissions];
+
+    newSubmissionList.push(submission);
+
+    setSubmissionList(newSubmissionList);
+
+    setPlayer(player +1)
+
+    setLastSubmission(submissionList[submissionList.length-1]);
+
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,9 +46,9 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      { (submissionList.length !== 0) ? <RecentSubmission submission={lastSubmission} /> : <span /> }
 
-      <PlayerSubmissionForm fields={FIELDS}/>
+      <PlayerSubmissionForm fields={FIELDS} sendSubmission={addSubmission} index={player}/>
 
       <FinalPoem />
 

src/components/PlayerSubmissionForm.js

@@ -3,25 +3,74 @@ import PropTypes from 'prop-types';
 
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = ({fields}) => {
-  // console.log(fields)
+const PlayerSubmissionForm = ({fields, sendSubmission, index}) => {
+
+  const [formFields, setFormFields] = useState({
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    adj2: '',
+    noun2: ''
+  });
+
+  const onInputChange = (event) => {
+    console.log(`Changing field ${ event.target.name } to ${ event.target.value }`);
+    // Duplicate formFields into new object
+    const newFormFields = {
+      ...formFields,
+    }
+
+    newFormFields[event.target.name] = event.target.value;
+    setFormFields(newFormFields);
+  }
+
+  const onFormSubmit = (event) => {
+    // prevent the browser from trying to submit the form.
+    event.preventDefault();
+
+    const submission = fields.map(field => {
+      const submittedFields = {...formFields};
+      if (field.key) {
+        return submittedFields[field.key]
+      } else {
+        return field
+      }
+    }).join(' ');
+
+    sendSubmission(submission);
+
+    // reset form fields
+    setFormFields({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: ''
+    });
+
+    // console.log(formFields); // remove me laterz
+  };  
 
   const generateInputFields = fields.map((field) => {
     if (field.key) {
       return <input
+      name={field.key}
       placeholder={field.placeholder}
-      type="text" />  
+      onChange={onInputChange}
+      type="text" />;  
     }
     else {
-      return <span>{field}</span>
+      return <span>{field}</span>;
     }
-  })
+  });
 
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{index}</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form className="PlayerSubmissionForm__form" onSubmit={onFormSubmit}>
 
         <div className="PlayerSubmissionForm__poem-inputs">
           {

src/components/RecentSubmission.js

@@ -3,10 +3,13 @@ import PropTypes from 'prop-types';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
+
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">
+        {props.submission}
+      </p>
     </div>
   );
 }