Earth - Sophie

src/components/FinalPoem.js

@@ -2,20 +2,36 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+const FinalPoem = (props) => {
 
-      </section>
+  const clickHandler = () => {
+    props.revealPoem()
+  }
 
+  if (props.isSubmitted === true) {
+    return (
+      <div className="FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          <ol>
+            {props.submissions.map(submission => (
+              <li key={submission}>{submission}</li>
+            ))}
+          </ol>
+        </section>
+      </div>
+    )
+  } else {
+    return(
       <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={clickHandler}/>
       </div>
-    </div>
-  );
+    )
+  };
 }
 
 FinalPoem.propTypes = {

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,32 @@ const Game = () => {
     }
   }).join(' ');
 
+
+  // Wave 1 - Handle Submissions
+  const [submissions, setSubmissions] = useState([])
+
+  const [isSubmitted, setSubmittedStatus] = useState(false)
+
+  const sendSubmission = (formFields) => {
+
+    const submission = formFields.map(field => {
+      if (field.key) {
+        return field.userInput;
+      } else {
+        return field;
+      }
+    }).join(' ');
+
+    setSubmissions([...submissions, submission])
+  }
+
+  // Wave 2 - Final Poem
+  const revealPoem = () => {    
+    setSubmittedStatus(true)
+  }
+
+
+  if (!isSubmitted) {
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,43 +51,48 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      <RecentSubmission submission={submissions[submissions.length - 1] || ''}/>
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm index={submissions.length+1} fields={FIELDS} sendSubmission={sendSubmission}/>
 
-      <FinalPoem />
+      <FinalPoem isSubmitted={isSubmitted} submissions={submissions} revealPoem={revealPoem} />  
 
     </div>
   );
+  } else {
+    return (
+      <FinalPoem isSubmitted={isSubmitted} submissions={submissions} revealPoem={revealPoem} />  
+    )
+  }
 }
 
 
 const FIELDS = [
   'The',
   {
     key: 'adj1',
-    placeholder: 'adjective',
+    placeholder: 'adjective1',
   },
   {
     key: 'noun1',
-    placeholder: 'noun',
+    placeholder: 'noun1',
   },
   {
-    key: 'adv',
-    placeholder: 'adverb',
+    key: 'adverb1',
+    placeholder: 'adverb1',
   },
   {
-    key: 'verb',
-    placeholder: 'verb',
+    key: 'verb1',
+    placeholder: 'verb1',
   },
   'the',
   {
     key: 'adj2',
-    placeholder: 'adjective',
+    placeholder: 'adjective2',
   },
   {
     key: 'noun2',
-    placeholder: 'noun',
+    placeholder: 'noun2',
   },
   '.',
 ];

src/components/Game.test.js

@@ -9,35 +9,35 @@ const FIELDS = [
   'The',
   {
     key: 'adj1',
-    placeholder: 'adjective',
+    placeholder: 'adjective1',
   },
   {
     key: 'noun1',
-    placeholder: 'noun',
+    placeholder: 'noun1',
   },
   {
-    key: 'adv',
-    placeholder: 'adverb',
+    key: 'adverb1',
+    placeholder: 'adverb1',
   },
   {
-    key: 'verb',
-    placeholder: 'verb',
+    key: 'verb1',
+    placeholder: 'verb1',
   },
   'the',
   {
     key: 'adj2',
-    placeholder: 'adjective',
+    placeholder: 'adjective2',
   },
   {
     key: 'noun2',
-    placeholder: 'noun',
+    placeholder: 'noun2',
   },
   '.',
 ];
 
 const INPUT_FIELDS = FIELDS.filter((element) => typeof element !== 'string');
 
-describe.skip('Game', () => {
+describe('Game', () => {
 
   describe('Wave 1:  Rendering Game', () => {
 
@@ -165,6 +165,7 @@ describe.skip('Game', () => {
       });
 
       test('Adding 2 lines to the poem and then revealing it', () => {
+
         const line1 = ['big', 'cat', 'abruptly', 'eats', 'tasty', 'dogfood'];
         const line2 = ['small', 'pooch', 'slowly', 'whines', 'annoying', 'pest'];
 

src/components/PlayerSubmissionForm.js

@@ -1,28 +1,67 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-
 import './PlayerSubmissionForm.css';
+import _ from 'lodash';
+
+const PlayerSubmissionForm = (props) => {
+
+  const newFields = props.fields.map((field) => {
+    if (field.key) {
+      return {...field, userInput: ''}
+    } else {
+      return field
+    }
+  })
+
+  const [formFields, setFormFields] = useState(newFields)
+
+  const resetFields = () => {
+    setFormFields(newFields)
+  }
+
+  const onFieldChange = (i, event) => {
+    const newFormData = _.cloneDeep(formFields) // make a deep copy
+    newFormData[i] = {...newFormData[i], userInput: event.target.value};
+    setFormFields(newFormData)
+  }
+
+  const generateFormFields = formFields.map((field, i) => {
+    if(field.key) {
+      return(
+        <input
+          key={i}
+          name={field.key}
+          placeholder={field.placeholder}
+          value={field.userInput}
+          onChange={(event)=>{onFieldChange(i, event)}}        
+          type="text" 
+        />
+      )
+    } else {
+      return (field)
+    }
+  })
+
+  const submitHandler = (event) => {
+    event.preventDefault()
+    props.sendSubmission(formFields)
+    resetFields()
+  }
 
-const PlayerSubmissionForm = () => {
   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={submitHandler}>
 
         <div className="PlayerSubmissionForm__poem-inputs">
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
+          {generateFormFields}
 
         </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

@@ -3,12 +3,17 @@ 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>
-    </div>
-  );
+
+  if(props.submission) {
+    return(
+      <div className="RecentSubmission">
+        <h3>The Most Recent Submission</h3>
+        <p className="RecentSubmission__submission">{ props.submission }</p>
+      </div>
+    )
+  } else {
+    return (<h3>Greetings.</h3>)
+  }
 }
 
 RecentSubmission.propTypes = {

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'} />);