Water - Kayla

.gitignore

@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 .eslintcache
 
+package-lock.jsonpackage-lock.json

src/components/FinalPoem.js

@@ -3,20 +3,36 @@ import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
+  const printLines = props.submissions.map((submission,index) => {
+    return (
+      <p key={index}>{submission}</p>
+    )
+  });
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
-      </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+  if (props.isSubmitted) {
+    return (
+      <div className="FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+            {printLines}
+        </section>
       </div>
-    </div>
-  );
-}
+    );
+  } else {
+    return (
+      <div className="FinalPoem">
+        <div className="FinalPoem__reveal-btn-container">
+          <input 
+            type="button" 
+            value="We are finished: Reveal the Poem" 
+            className="FinalPoem__reveal-btn" 
+            onClick={props.revealPoem} />
+
+        </div>
+      </div>
+    );
+  }
+};
 
 FinalPoem.propTypes = {
   isSubmitted: PropTypes.bool.isRequired,

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,14 +5,33 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
-  const exampleFormat = FIELDS.map((field) => {
+  const [playerCount, setPlayerCount] = useState(1); //set count at 1
+  const [submissions, setSubmissions] = useState([]);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+    const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
     } else {
       return field;
     }
   }).join(' ');
 
+
+  const lineSubmission = (submission) => {
+    const newLineSubmission = [...submissions]
+    newLineSubmission.push(submission)
+
+    setSubmissions(newLineSubmission)
+    setPlayerCount(playerCount + 1)
+  }
+
+  const revealPoem = () => {
+    setIsSubmitted(true);
+  }
+
+  const revealLastSubmission = submissions[submissions.length - 1]
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,18 +44,30 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      { (!isSubmitted) ? 
+        <PlayerSubmissionForm
+          index={playerCount}
+          sendSubmission={lineSubmission}
+          fields={FIELDS} /> 
+        : ''}
 
-      <PlayerSubmissionForm />
+      {(!isSubmitted && submissions.length > 0) ? 
+        <RecentSubmission submission={revealLastSubmission}/> 
+        : '' }
 
-      <FinalPoem />
+      <FinalPoem 
+          isSubmitted={isSubmitted}
+          submissions={submissions}
+          revealPoem={revealPoem}
+      />
+
 
     </div>
   );
 }
 
-
-const FIELDS = [
+//ading export here per Matt Mcknett suggestion
+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

@@ -1,24 +1,92 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+  //set form entries with initial empty values
+  const [entry, setEntry] = useState ({
+
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    adj2: '',
+    noun2: '',
+  })
+
+  const onEntryChange = (event) => {
+    const newEntryValues = {
+      ...entry,
+    }
+    const {name, value} = event.target;
+
+    newEntryValues[name] = value;
+    setEntry(newEntryValues);
+  };
+
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+
+    const poemData = props.fields.map(field => {
+      const submittedData = {...entry};
+      if (field.key) {
+        return submittedData[field.key];
+      } else {
+        return field;
+      }
+    }).join(' ');
+
+    props.sendSubmission(poemData);
+
+    //TODO: Should have found way to validate entries so that blank entries could not be submitted
+    // if (
+    //   input.adj1 !== '' &&
+    //   input.noun1 !== '' &&
+    //   input.adverb !== '' &&
+    //   input.verb !== '' &&
+    //   input.adj2 !== '' &&
+    //   input.noun2 !== ''
+    // ) {
+
+      setEntry({
+        adj1: '',
+        noun1: '',
+        adv: '',
+        verb: '',
+        adj2: '',
+        noun2: '',
+      });
+    }
+
+
   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={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" />
-
+            props.fields.map((field, i) => {
+              if (field.key) {
+                return (
+                  <input
+                  key={field.key}
+                  name={field.key}
+                  placeholder={field.placeholder}
+                  value={entry[field.key] || ''} 
+                  onChange={onEntryChange}
+                  data-testid={field.key}
+                  type="text" 
+                  className={entry[field.key] === '' ? 'PlayerSubmissionFormt__input--invalid' : ''}
+                  />)
+                } else {
+                  return field;
+                }
+            })
+          }      
         </div>
 
         <div className="PlayerSubmissionForm__submit">

src/components/PlayerSubmissionForm.test.js → src/components/PlayerSubmissionForm.test.js

@@ -3,32 +3,11 @@ import '@testing-library/jest-dom/extend-expect';
 import { render, screen, cleanup } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import PlayerSubmissionForm from './PlayerSubmissionForm';
+import { FIELDS } from './Game';
+
 
 describe('Wave 1:  PlayerSubmissionForm', () => {
   // Arrange
-
-  const FIELDS = [
-    'The',
-    {
-      key: 'adj1',
-      placeholder: 'adjective1',
-    },
-    'Test',
-    {
-      key: 'noun1',
-      placeholder: 'noun1',
-    },
-    'Better',
-    {
-      key: 'verb1',
-      placeholder: 'verb1',
-    },
-    'Pass',
-    {
-      key: 'adverb1',
-      placeholder: 'adverb1',
-    },
-  ];
 
   test('renders with the proper input fields and a submit button', () => {
      // Act
@@ -42,8 +21,8 @@ describe('Wave 1:  PlayerSubmissionForm', () => {
 
     // Assert
     inputFields.forEach(field => {
-      const regex = new RegExp('^' + field.placeholder + '$', 'i');
-      const inputField = screen.getByPlaceholderText(regex);
+      const regex = new RegExp('^' + field.key + '$', 'i');
+      const inputField = screen.getByTestId(regex);
       expect(inputField).toBeInTheDocument();
     });
   });
@@ -64,9 +43,8 @@ describe('Wave 1:  PlayerSubmissionForm', () => {
     // Assert
     inputFields.forEach(async field => {
       // Find the input field
-      const regex = new RegExp('^' + field.placeholder + '$', 'i');
-      const inputField = screen.getByPlaceholderText(regex)
-
+      const regex = new RegExp('^' + field.key + '$', 'i');
+      const inputField = screen.getByTestId(regex)
       // Type in that input field
       userEvent.type(inputField, letters.charAt(index));
       // assert that the field now has the current letter

src/components/RecentSubmission.js

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