Earth/Taylor

src/components/FinalPoem.js

@@ -4,16 +4,26 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+  const button = 
+    <div className="FinalPoem__reveal-btn-container">
+      <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.revealPoem} />
+    </div>
 
-      </section>
+  const completePoemLines = props.submissions.map((submission, index) => {
+    return <p key={index}>{submission}</p>
+  })
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+  const completePoem =
+    <section className="FinalPoem__poem">
+      <h3>Final Poem</h3>
+      {completePoemLines}
+    </section>
+
+  const buttonOrPoem = props.isSubmitted ? completePoem : button
+
+  return (
+    <div className="FinalPoem">
+      {buttonOrPoem}
     </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

@@ -13,6 +13,26 @@ const Game = () => {
     }
   }).join(' ');
 
+  const [submissions, setSubmissions] = useState([])
+  const [isSubmitted, setIsSubmitted] = useState(false)
+
+  const addSubmission = (submission) => {
+    setSubmissions([...submissions,submission])
+  }
+
+  const revealPoem = (event) => {
+    event.preventDefault();
+    setIsSubmitted(true);
+  }
+
+  const recentSubmission = isSubmitted ? '' : <RecentSubmission submission={ submissions[submissions.length - 1]} />
+
+  const playerForm = isSubmitted ? '' : <PlayerSubmissionForm 
+  index={submissions.length + 1}
+  sendSubmission={addSubmission}
+  fields={FIELDS} 
+  />
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,18 +45,30 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      {recentSubmission}
+
+      {playerForm}
+{/* 
+      <RecentSubmission submission={ submissions[submissions.length - 1]} />
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm 
+        index={submissions.length + 1}
+        sendSubmission={addSubmission}
+        fields={FIELDS} 
+      /> */}
 
-      <FinalPoem />
+      <FinalPoem 
+        isSubmitted={isSubmitted}
+        submissions={submissions}
+        revealPoem={revealPoem}
+      />
 
     </div>
   );
 }
 
 
-const FIELDS = [
+export const FIELDS = [
   'The',
   {
     key: 'adj1',

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.js

@@ -3,26 +3,78 @@ import PropTypes from 'prop-types';
 
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+
+  const emptyValues = {};
+  props.fields.forEach((field) => {
+    if (field.key) {
+      emptyValues[field.key] = '';
+    }
+  });
+
+  const [poemFields, setPoemFields] = useState(emptyValues)
+
+  const onInputChange = (value, name) => {
+    const newFields = {
+      ...poemFields,
+      [name]: value
+    }
+
+    setPoemFields(newFields);
+  };
+
+  const isValid = (value) => {
+    return value.length > 0
+  }
+
+  const sendSubmission = (event) => {
+    event.preventDefault();
+    const submission = props.fields.map((field) => {
+      if (field.key) {
+        return poemFields[field.key];
+      } else {
+        return field;
+      } 
+    });
+    props.sendSubmission(submission.join(' '));
+    setPoemFields(emptyValues)
+  }
+
+  const inputValues = props.fields.map((field) => {
+    if (field.key) {
+      return <input
+      name={field.name}
+      placeholder={field.placeholder} 
+      type="text"
+      onChange={(event) => {onInputChange(event.target.value, field.key)}}
+      value={poemFields[field.key]}
+      key={field.index}
+      className={isValid(poemFields[field.key]) ? 'PlayerSubmissionForm__poem-inputs' : 'PlayerSubmissionFormt__input--invalid'}
+      data-testid={field.name}
+    /> 
+    } else {
+      return field;
+    }
+  });
+
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{props.index}</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form 
+        className="PlayerSubmissionForm__form"
+        onSubmit={sendSubmission} >
 
         <div className="PlayerSubmissionForm__poem-inputs">
-
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
-
+          { inputValues }
         </div>
 
         <div className="PlayerSubmissionForm__submit">
-          <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+          <input 
+          type="submit" 
+          value="Submit Line" 
+          className="PlayerSubmissionForm__submit-btn"
+          />
         </div>
       </form>
     </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'} />);