From 896d8916b8151994e130022d2683a83ca82bc9b8 Mon Sep 17 00:00:00 2001
From: Dominique <dom_taylor@icloud.com>
Date: Wed, 11 Dec 2019 16:52:33 -0800
Subject: [PATCH 1/5] finished form

---
 src/components/Game.js                 |  20 ++++-
 src/components/PlayerSubmissionForm.js | 118 ++++++++++++++++++++++---
 2 files changed, 126 insertions(+), 12 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..6b07775b 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,6 +8,23 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      playerInput: [],
+    }
+    
+  }
+
+
+  addPlayerInput = (newInput) => {
+    const {playerInput} = this.state
+    console.log(playerInput)
+
+    playerInput.push(newInput);
+
+    this.setState({
+      playerInput
+    })
   }
 
   render() {
@@ -34,7 +51,7 @@ class Game extends Component {
 
         <RecentSubmission />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm addPlayerInputCallback={this.addPlayerInput}/>
 
         <FinalPoem />
 
@@ -44,6 +61,7 @@ class Game extends Component {
 }
 
 const FIELDS = [
+  // Can I use this FIELDS globally? Like can I use it in the state of PlayerSubmissionForm?
   "The",
   {
     key: 'adj1',
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..ff64ea20 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,25 +5,121 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    }
   }
 
-  render() {
+  resetState = () => {
+    this.setState({
+      adj1: '',
+      noun1: '',  
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    }); 
+  }
+
+  
+  onFormChange = (event) => {
+    
+    //target is the html element itself. You can do 
+    //event.target.id to see specifics in the html target.
+    
+    const field = event.target.id;
+
+    const value = event.target.value;
+    // describe what the event.target syntax is doing exactly
+
+    const updatedState = {};
+    updatedState[field] = value;
+
+    this.setState(updatedState); 
+  }
 
+  onSubmit = (event) => {
+    
+    event.preventDefault();
+    // this prevents the page from refreshing so you don't loose the state
+    // what does this do again?
+
+    const {adj1, noun1, adv, verb, adj2, noun2} = this.state;
+  
+    // what is this saying exactly?
+    
+    this.props.addPlayerInputCallback(this.state);
+    this.resetState();
+  }
+
+
+  render() {
+    let count = 0 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{count}</h3>
+        {console.log(count)}
 
-        <form className="PlayerSubmissionForm__form" >
+        <form onSubmit={this.onSubmit} className="PlayerSubmissionForm__form" >
 
           <div className="PlayerSubmissionForm__poem-inputs">
-
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
-
+            <div>The</div>
+            <input 
+              placeholder="adjective"
+              type="text" 
+              className="PlaySubmissionForm_input--invalid"
+              onChange={this.onFormChange}
+              id="adj1"
+              value={this.state.adj1}
+              // the id, placeholder and value are all very useful. Value is equal to whatever the state is
+            />
+            <input 
+              placeholder="noun"
+              type="text" 
+              className="PlaySubmissionForm_input--invalid"
+              onChange={this.onFormChange}
+              id="noun1"
+              value={this.state.noun1}
+            />
+            <input 
+              placeholder="adverb"
+              type="text" 
+              className="PlaySubmissionForm_input--invalid"
+              onChange={this.onFormChange}
+              id="adv"
+              value={this.state.adv}
+            />
+            <input 
+              placeholder="verb"
+              type="text" 
+              className="PlaySubmissionForm_input--invalid"
+              onChange={this.onFormChange}
+              id="verb"
+              value={this.state.verb}
+            />
+            <input 
+              placeholder="adjective"
+              type="text" 
+              className="PlaySubmissionForm_input--invalid"
+              onChange={this.onFormChange}
+              id="adj2"
+              value={this.state.adj2}
+            />
+            <div>the</div>
+            <input 
+              placeholder="noun"
+              type="text" 
+              className="PlaySubmissionForm_input--invalid"
+              onChange={this.onFormChange}
+              id="noun2"
+              value={this.state.noun}
+            />
           </div>
 
           <div className="PlayerSubmissionForm__submit">

From d687ea0274ac403400e370eb92a1ebed56acf239 Mon Sep 17 00:00:00 2001
From: Dominique <dom_taylor@icloud.com>
Date: Wed, 11 Dec 2019 20:31:59 -0800
Subject: [PATCH 2/5] wave 1 finished

---
 src/components/FinalPoem.js            |  2 ++
 src/components/Game.js                 |  8 +++-----
 src/components/PlayerSubmissionForm.js | 11 +++++++----
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..5784ccf8 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -2,6 +2,8 @@ import React from 'react';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
+  
+  console.log(props)
 
   return (
     <div className="FinalPoem">
diff --git a/src/components/Game.js b/src/components/Game.js
index 6b07775b..e9284fdf 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -12,13 +12,11 @@ class Game extends Component {
     this.state = {
       playerInput: [],
     }
-    
   }
 
-
   addPlayerInput = (newInput) => {
     const {playerInput} = this.state
-    console.log(playerInput)
+
 
     playerInput.push(newInput);
 
@@ -51,10 +49,10 @@ class Game extends Component {
 
         <RecentSubmission />
 
-        <PlayerSubmissionForm addPlayerInputCallback={this.addPlayerInput}/>
+        <PlayerSubmissionForm addPlayerInputCallback={this.addPlayerInput}
+        playerNumber={this.state.playerInput.length}/>
 
         <FinalPoem />
-
       </div>
     );
   }
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ff64ea20..1ea03589 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -14,6 +14,8 @@ class PlayerSubmissionForm extends Component {
       adj2: '',
       noun2: '',
     }
+
+
   }
 
   resetState = () => {
@@ -60,14 +62,15 @@ class PlayerSubmissionForm extends Component {
 
 
   render() {
-    let count = 0 
+  
+
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{count}</h3>
-        {console.log(count)}
+        <h3>Player Submission Form for Player #{this.props.playerNumber}</h3>
 
-        <form onSubmit={this.onSubmit} className="PlayerSubmissionForm__form" >
 
+        <form onSubmit={this.onSubmit} className="PlayerSubmissionForm__form" >
+          
           <div className="PlayerSubmissionForm__poem-inputs">
             <div>The</div>
             <input 

From d695d6d77572425d34840bfa62a89ba8a44ab58a Mon Sep 17 00:00:00 2001
From: Dominique <dom_taylor@icloud.com>
Date: Thu, 12 Dec 2019 16:53:54 -0800
Subject: [PATCH 3/5] finished wave 2

---
 src/components/FinalPoem.js            | 18 ++++++++++++++++--
 src/components/Game.js                 |  8 ++++++--
 src/components/PlayerSubmissionForm.js |  5 ++++-
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 5784ccf8..1736163a 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,7 +3,20 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
   
-  console.log(props)
+  const submissions = props.finalPlayerInput;
+  // console.log(finalPoem);
+  // why does this show in the console when I hit "submit" button?
+
+  
+  const poemContent = submissions.map((line, i) => {
+    return <p key={ i }>{ line }</p>;
+    // why can I use tags here?
+  });
+
+  const onFinalClick = (event) => {
+    return submissions
+    // can't render an object, only components which render itself. YOu can't render an array. 
+  };
 
   return (
     <div className="FinalPoem">
@@ -13,7 +26,8 @@ const FinalPoem = (props) => {
       </section>
 
       <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={onFinalClick}/>
+        <ul>{poemContent}</ul>
       </div>
     </div>
   );
diff --git a/src/components/Game.js b/src/components/Game.js
index e9284fdf..33573f27 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -17,10 +17,12 @@ class Game extends Component {
   addPlayerInput = (newInput) => {
     const {playerInput} = this.state
 
-
     playerInput.push(newInput);
 
     this.setState({
+      // always change state through set state
+      // if I didn't have this, the state wouldn't be change, it would only
+      // change the local variable 
       playerInput
     })
   }
@@ -52,7 +54,9 @@ class Game extends Component {
         <PlayerSubmissionForm addPlayerInputCallback={this.addPlayerInput}
         playerNumber={this.state.playerInput.length}/>
 
-        <FinalPoem />
+
+        <FinalPoem finalPlayerInput={this.state.playerInput}/>
+
       </div>
     );
   }
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1ea03589..e3098e78 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -7,6 +7,7 @@ class PlayerSubmissionForm extends Component {
     super(props);
 
     this.state = {
+      
       adj1: '',
       noun1: '',
       adv: '',
@@ -55,8 +56,10 @@ class PlayerSubmissionForm extends Component {
     const {adj1, noun1, adv, verb, adj2, noun2} = this.state;
   
     // what is this saying exactly?
+
+    const newSubmission = `The ${adj1} ${adv} ${verb} the ${adj2} ${noun2}`
     
-    this.props.addPlayerInputCallback(this.state);
+    this.props.addPlayerInputCallback(newSubmission);
     this.resetState();
   }
 

From caeb5fb5b19d75d95bd0ad84782d009a512cce1f Mon Sep 17 00:00:00 2001
From: Dominique <dom_taylor@icloud.com>
Date: Thu, 12 Dec 2019 21:21:28 -0800
Subject: [PATCH 4/5] hidden playsubmission form

---
 src/components/FinalPoem.js            | 61 +++++++++++++-------------
 src/components/Game.js                 | 29 ++++++++----
 src/components/PlayerSubmissionForm.js |  2 +-
 src/components/RecentSubmission.js     | 28 +++++++++---
 4 files changed, 75 insertions(+), 45 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 1736163a..5361d044 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,36 +1,37 @@
-import React from 'react';
+import React, { Component } from 'react';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
-  
-  const submissions = props.finalPlayerInput;
-  // console.log(finalPoem);
-  // why does this show in the console when I hit "submit" button?
-
-  
-  const poemContent = submissions.map((line, i) => {
-    return <p key={ i }>{ line }</p>;
-    // why can I use tags here?
-  });
-
-  const onFinalClick = (event) => {
-    return submissions
-    // can't render an object, only components which render itself. YOu can't render an array. 
-  };
-
-  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" onClick={onFinalClick}/>
-        <ul>{poemContent}</ul>
+class FinalPoem extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isClicked: false
+    }
+  }
+
+  render () {
+    const poemContent = this.props.finalPlayerInput.map((line, i) => {
+      return <p key={ i }>{ line }</p>;
+      // why can I use tags here?
+    });
+
+    return (
+      <div className="FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+
+        </section>
+
+        <div className="FinalPoem__reveal-btn-container">
+          {this.props.isPoemSubmitted ? <ul>{poemContent}</ul>: <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={this.props.onPoemSubmittedCallback}/>}
+          
+          {/* <ul>{poemContent}</ul> */}
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
 }
 
 export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index 33573f27..924f9849 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -11,9 +11,18 @@ class Game extends Component {
 
     this.state = {
       playerInput: [],
+      isPoemSubmitted: false,
     }
   }
 
+
+  onPoemSubmittedCallback = () => {
+    this.setState({
+      isPoemSubmitted: true,
+    })
+  }
+
+
   addPlayerInput = (newInput) => {
     const {playerInput} = this.state
 
@@ -37,6 +46,12 @@ class Game extends Component {
       }
     }).join(" ");
 
+    const recentSubmission = <RecentSubmission
+    latestSubmission={this.state.playerInput[this.state.playerInput.length-1]}/>
+
+    const playerSubmissionForm = <PlayerSubmissionForm addPlayerInputCallback={this.addPlayerInput}
+    playerNumber={this.state.playerInput.length}/>
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -48,15 +63,13 @@ class Game extends Component {
         <p className="Game__format-example">
           { exampleFormat }
         </p>
+        
+        {this.state.isPoemSubmitted ? <div/>: recentSubmission}
+        {this.state.isPoemSubmitted ? <div/>: playerSubmissionForm}
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm addPlayerInputCallback={this.addPlayerInput}
-        playerNumber={this.state.playerInput.length}/>
-
-
-        <FinalPoem finalPlayerInput={this.state.playerInput}/>
-
+        <FinalPoem onPoemSubmittedCallback={this.onPoemSubmittedCallback}
+        isPoemSubmitted={this.state.isPoemSubmitted}
+        finalPlayerInput={this.state.playerInput}/>
       </div>
     );
   }
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index e3098e78..2d7bdbc3 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -57,7 +57,7 @@ class PlayerSubmissionForm extends Component {
   
     // what is this saying exactly?
 
-    const newSubmission = `The ${adj1} ${adv} ${verb} the ${adj2} ${noun2}`
+    const newSubmission = `The ${adj1} ${noun1} ${adv} ${verb} the ${adj2} ${noun2} .`
     
     this.props.addPlayerInputCallback(newSubmission);
     this.resetState();
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..b779b967 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -2,12 +2,28 @@ import React from 'react';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
-  return (
-    <div className="RecentSubmission">
-      <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
-    </div>
-  );
+  
+  if (props.latestSubmission) {
+    return (
+
+      <div className="RecentSubmission">
+        <h3>The Most Recent Submission</h3>
+        <p className="RecentSubmission__submission">{props.latestSubmission}</p>
+      </div>
+    );
+  } else {
+    return (
+      <div />
+    )
+  }
+
+  // return (
+
+  //   <div className="RecentSubmission">
+  //     <h3>The Most Recent Submission</h3>
+  //     <p className="RecentSubmission__submission">{ props.latestSubmission  }</p>
+  //   </div>
+  // );
 }
 
 export default RecentSubmission;

From 3fdc690e2a1508b884b6aac8c6a7c5c5ac4c5e36 Mon Sep 17 00:00:00 2001
From: Dominique <dom_taylor@icloud.com>
Date: Thu, 12 Dec 2019 22:43:58 -0800
Subject: [PATCH 5/5] finished project

---
 src/components/FinalPoem.js             | 54 +++++++++++++------------
 src/components/PlayerSubmissionForm.css |  1 +
 src/components/PlayerSubmissionForm.js  | 25 ++++++++----
 src/components/RecentSubmission.js      | 11 ++---
 4 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 5361d044..bccaf6b9 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,37 +1,39 @@
-import React, { Component } from 'react';
+import React from 'react';
 import './FinalPoem.css';
-
-class FinalPoem extends Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isClicked: false
-    }
-  }
-
-  render () {
-    const poemContent = this.props.finalPlayerInput.map((line, i) => {
+import PropTypes from 'prop-types';
+
+const FinalPoem = (props) => {
+    
+    const revealPoemButton = 
+      <div className="FinalPoem__reveal-btn-container">
+        <input type="button" 
+          value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.onPoemSubmittedCallback}/>
+      </div>;
+    
+
+    const poemContent = props.finalPlayerInput.map((line, i) => {
       return <p key={ i }>{ line }</p>;
-      // why can I use tags here?
     });
 
-    return (
-      <div className="FinalPoem">
-        <section className="FinalPoem__poem">
-          <h3>Final Poem</h3>
+    const revealPoem = 
+      <section className="FinalPoem__poem">
+        <h3>Final Poem</h3>
+        {poemContent}
+      </section>;
 
-        </section>
+    const content = props.isPoemSubmitted ? revealPoem : revealPoemButton
 
-        <div className="FinalPoem__reveal-btn-container">
-          {this.props.isPoemSubmitted ? <ul>{poemContent}</ul>: <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={this.props.onPoemSubmittedCallback}/>}
-          
-          {/* <ul>{poemContent}</ul> */}
-        </div>
+    return (
+      <div className="FinalPoem">
+        {content}
       </div>
     );
-  }
+}
+
+FinalPoem.propTypes = {
+  onPoemSubmittedCallback: PropTypes.isRequired,
+  isPoemSubmitted: PropTypes.isRequired,
+  finalPlayerInput: PropTypes.arrayOf(String), 
 }
 
 export default FinalPoem;
diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css
index 7cded5d9..5feb49ec 100644
--- a/src/components/PlayerSubmissionForm.css
+++ b/src/components/PlayerSubmissionForm.css
@@ -35,6 +35,7 @@
   background-color: #FFE9E9;
 }
 
+
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 2d7bdbc3..aa627c9c 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
 class PlayerSubmissionForm extends Component {
 
@@ -14,9 +15,9 @@ class PlayerSubmissionForm extends Component {
       verb: '',
       adj2: '',
       noun2: '',
-    }
-
+    };
 
+    this.isValid = false
   }
 
   resetState = () => {
@@ -45,6 +46,9 @@ class PlayerSubmissionForm extends Component {
     updatedState[field] = value;
 
     this.setState(updatedState); 
+    this.isValid = true
+
+    
   }
 
   onSubmit = (event) => {
@@ -79,7 +83,7 @@ class PlayerSubmissionForm extends Component {
             <input 
               placeholder="adjective"
               type="text" 
-              className="PlaySubmissionForm_input--invalid"
+              className={this.isValid ? "PlaySubmissionForm__input" : "PlayerSubmissionFormt__input--invalid"}
               onChange={this.onFormChange}
               id="adj1"
               value={this.state.adj1}
@@ -88,7 +92,7 @@ class PlayerSubmissionForm extends Component {
             <input 
               placeholder="noun"
               type="text" 
-              className="PlaySubmissionForm_input--invalid"
+              className={this.isValid ? "PlaySubmissionForm__input" : "PlayerSubmissionFormt__input--invalid"}
               onChange={this.onFormChange}
               id="noun1"
               value={this.state.noun1}
@@ -96,7 +100,7 @@ class PlayerSubmissionForm extends Component {
             <input 
               placeholder="adverb"
               type="text" 
-              className="PlaySubmissionForm_input--invalid"
+              className={this.isValid ? "PlaySubmissionForm__input" : "PlayerSubmissionFormt__input--invalid"}
               onChange={this.onFormChange}
               id="adv"
               value={this.state.adv}
@@ -104,7 +108,7 @@ class PlayerSubmissionForm extends Component {
             <input 
               placeholder="verb"
               type="text" 
-              className="PlaySubmissionForm_input--invalid"
+              className={this.isValid ? "PlaySubmissionForm__input" : "PlayerSubmissionFormt__input--invalid"}
               onChange={this.onFormChange}
               id="verb"
               value={this.state.verb}
@@ -112,7 +116,7 @@ class PlayerSubmissionForm extends Component {
             <input 
               placeholder="adjective"
               type="text" 
-              className="PlaySubmissionForm_input--invalid"
+              className={this.isValid ? "PlaySubmissionForm__input" : "PlayerSubmissionFormt__input--invalid"}
               onChange={this.onFormChange}
               id="adj2"
               value={this.state.adj2}
@@ -121,7 +125,7 @@ class PlayerSubmissionForm extends Component {
             <input 
               placeholder="noun"
               type="text" 
-              className="PlaySubmissionForm_input--invalid"
+              className={this.isValid ? "PlaySubmissionForm__input" : "PlayerSubmissionFormt__input--invalid"}
               onChange={this.onFormChange}
               id="noun2"
               value={this.state.noun}
@@ -137,4 +141,9 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  addPlayerInputCallback: PropTypes.isRequired,
+  playerNumber: PropTypes.number 
+}
+
 export default PlayerSubmissionForm;
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index b779b967..c0570346 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import './RecentSubmission.css';
+import PropTypes from 'prop-types';
 
 const RecentSubmission = (props) => {
   
@@ -16,14 +17,10 @@ const RecentSubmission = (props) => {
       <div />
     )
   }
+}
 
-  // return (
-
-  //   <div className="RecentSubmission">
-  //     <h3>The Most Recent Submission</h3>
-  //     <p className="RecentSubmission__submission">{ props.latestSubmission  }</p>
-  //   </div>
-  // );
+RecentSubmission.propTypes = {
+  latestSubmission: PropTypes.string
 }
 
 export default RecentSubmission;