Richelle (water) - Exquisite React

src/components/FinalPoem.js

@@ -2,20 +2,35 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
+const FinalPoem = ({isSubmitted, submissions, revealPoem}) => {
+  // can only call the revealPoem call back if submissions is not empty?? 
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+  const poemLines = submissions.map((line, i) => {
+    return (
+      <p key={i}>{line}</p>
+    )
+  })
 
-      </section>
+  if ( isSubmitted ) {
+    return (
+      <div className="FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+          {poemLines}
+        </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={revealPoem} />
+        </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

@@ -4,7 +4,13 @@ import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
+
 const Game = () => {
+
+  const [player, setPlayer] = useState(1);
+  const [isSubmitted, setSubmissionStatus] = useState(false)
+  const [submission, setSubmission] = useState([])
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,6 +19,18 @@ const Game = () => {
     }
   }).join(' ');
 
+  const completePoem = () => {
+    setSubmissionStatus( !isSubmitted ) //toggle is submitted to true
+  }
+
+  const addPoemLine = (line) => {
+    const newSubmissionList = [...submission];
+    newSubmissionList.push(line)
+
+    setSubmission(newSubmissionList)
+    setPlayer(player + 1)
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -24,12 +42,11 @@ const Game = () => {
       <p className="Game__format-example">
         { exampleFormat }
       </p>
-
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
-
-      <FinalPoem />
+      { submission.length === 0 || isSubmitted ? '' : <RecentSubmission submission={submission[submission.length - 1]} /> }
+
+      { isSubmitted ?  '' : <PlayerSubmissionForm index={player} fields={FIELDS} sendSubmission={ addPoemLine } /> }
+
+      <FinalPoem submissions={submission} isSubmitted={isSubmitted} revealPoem={completePoem} />
 
     </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.js

@@ -1,23 +1,65 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = ({fields, index, sendSubmission}) => {
+  let emptyBoxes = {}
+  for (let i = 0; i < fields.length; i++) {
+    if (fields[i].key) {
+      emptyBoxes[fields[i].key] = ''
+    }
+  }
+
+  const [wordFields, setWordFields] = useState(emptyBoxes);
+
+  const onInputChange = event => {
+    const newWordFields = {
+      ...wordFields
+    };
+
+    newWordFields[event.target.name] = event.target.value;
+    setWordFields(newWordFields);
+  };
+
+  const onFormSubmit = event => {
+    event.preventDefault();
+
+    const poemLine = fields.map((field) => {
+      if (field.key) {
+        return wordFields[field.key]
+      } else {
+        return field
+      }
+    }).join(' ');
+
+    sendSubmission(poemLine);
+    setWordFields(emptyBoxes);
+
+  };
+
+  const inputValid = (input) => {
+    return input !== '' // return true if valid, else false if empty string
+  }
+
+  const inputBoxes = fields.map((field, i) => {
+    if (field.key) {
+      return <input key={i} name={field.key} placeholder={field.placeholder} onChange={onInputChange} value={wordFields[field.key]} type="text" className={inputValid(wordFields[field.key]) ? 'valid' : 'PlayerSubmissionFormt__input--invalid'} />
+    } else {
+      return <div key={i}>{field}</div>
+    }
+  })
+
+
+
   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">
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
+          {inputBoxes}          
 
         </div>
 

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

@@ -110,4 +110,4 @@ describe('Wave 1:  PlayerSubmissionForm', () => {
       cleanup();
     }
   });
-});
+});

src/components/RecentSubmission.js

@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RecentSubmission.css';
 
-const RecentSubmission = (props) => {
+const RecentSubmission = ({submission}) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ 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'} />);