Fire | Ayesha - Exquisite react submission

src/components/FinalPoem.js

@@ -3,18 +3,31 @@ import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
+  const onClickCallback = (event) => {
+    event.preventDefault();
+    props.revealPoem();
+  }
+  const finishedPoem = 
+  <section className="FinalPoem__poem">
+    <h3>Final Poem</h3>
+    {props.submissions.map((element, i) => {
+        return(<p key={i}>{element}</p>)
+    })}
+  </section>
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
 
-      </section>
+const poemButton = 
+  <div className="FinalPoem__reveal-btn-container">
+    <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={onClickCallback} />
+  </div>
+
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+const display = props.isSubmitted ? finishedPoem : poemButton
+
+return (
+    <div className="FinalPoem">
+      {display}
       </div>
-    </div>
   );
 }
 

src/components/FinalPoem.test.js

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import FinalPoem from './FinalPoem';
 
-describe.skip('FinalPoem', () => {
+describe('FinalPoem', () => {
   describe('before the poem is finished', () => {
     test('it renders with a button when isSubmitted is false', () => {
       // Act

src/components/Game.js

@@ -5,6 +5,8 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
+  const [submittedLines, setSubmittedLines] = useState([])
+  const [submitted, setSubmitted] = useState(false)
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,6 +15,19 @@ const Game = () => {
     }
   }).join(' ');
 
+  const onSubmitLine = (submittedLine) => {
+    const newLineList = [...submittedLines, submittedLine];
+    setSubmittedLines(newLineList);
+
+  }
+  const getLastLine = () => {
+    return( (submittedLines.length > 0) ? submittedLines[submittedLines.length - 1] : '');
+  }
+  const finishGame = () => {
+    setSubmitted(!submitted);
+  }
+  const showRecentSubmission = (!submitted && submittedLines.length > 0) ? <RecentSubmission submission={ getLastLine() } /> : ''
+  const showSubmissionForm = (!submitted) ? <PlayerSubmissionForm fields={FIELDS} sendSubmission={onSubmitLine} index={0}/> : ''
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,11 +40,11 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
+      {showRecentSubmission}
 
-      <FinalPoem />
+      {showSubmissionForm}
+
+      <FinalPoem isSubmitted={submitted} submissions={submittedLines} revealPoem={finishGame} />
 
     </div>
   );

src/components/Game.test.js

@@ -37,7 +37,7 @@ const FIELDS = [
 
 const INPUT_FIELDS = FIELDS.filter((element) => typeof element !== 'string');
 
-describe.skip('Game', () => {
+describe('Game', () => {
 
   describe('Wave 1:  Rendering Game', () => {
 

src/components/PlayerSubmissionForm.css

@@ -17,6 +17,10 @@
   justify-content: center;
 }
 
+input.empty {
+  background: gray;
+}
+
 .PlayerSubmissionForm__submit-btn {
   flex: 0.5;
   margin: 2rem;

src/components/PlayerSubmissionForm.js

@@ -3,21 +3,62 @@ import PropTypes from 'prop-types';
 
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+  const blankFields = {
+    adj1: '',
+    noun1: '', 
+    adv: '', 
+    verb: '', 
+    adj2: '',
+    noun2: '', 
+  }
+
+  const [player, setPlayer] = useState(1);
+  const [playerSubmission, setPlayerSubmission] = useState(blankFields)
+  const onInputChange = (event) => {
+
+    const updatedField = {...playerSubmission}
+    updatedField[event.target.name] = event.target.value
+    setPlayerSubmission(updatedField)
+
+  }
+  const makeSentence = () => {
+    const words = props.fields.map((element) => {
+      if (element.key) {
+        return playerSubmission[`${element.key}`]
+      } else {
+        return element
+      }
+    })
+    return words.join(' ')
+  }
+  const onSubmitNewLine = (event) => {
+    event.preventDefault();
+
+    setPlayer(player + 1);
+    console.log(player);
+
+    props.sendSubmission(makeSentence());
+
+    setPlayerSubmission(blankFields);
+  }
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{player}</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form className="PlayerSubmissionForm__form" onSubmit={onSubmitNewLine} >
 
         <div className="PlayerSubmissionForm__poem-inputs">
 
           {
-            // Put your form inputs here... We've put in one below as an example
+            props.fields.map((element, i) => {
+              if (element.key) {
+                return(<input key={ `${i}` } className={ playerSubmission[element.key] === '' ? 'empty' : 'full' } name={ element.key } placeholder={ element.placeholder } type="text" value={ playerSubmission[element.key] } onChange={ onInputChange } />)
+              } else {
+                return(element)
+              }
+            })
           }
-          <input
-            placeholder="hm..."
-            type="text" />
 
         </div>
 

src/components/RecentSubmission.js

@@ -6,7 +6,7 @@ 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>
   );
 }

src/components/RecentSubmission.test.js

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import RecentSubmission from './RecentSubmission';
 
 
-describe.skip('Wave 2:  RecentSubmission', () => {
+describe('Wave 2:  RecentSubmission', () => {
   test('It renders with a submission and shows the text', () => {
     // Act
     render(<RecentSubmission submission={'This is a submission'} />);