From 469f6e48b2d46d4ba1b132728e97940e80b131e2 Mon Sep 17 00:00:00 2001 From: daniela sanchez Date: Wed, 11 Dec 2019 13:20:51 -0800 Subject: [PATCH 01/12] Form Fields --- src/App.js | 1 + src/components/Game.js | 6 +-- src/components/PlayerSubmissionForm.js | 73 +++++++++++++++++++++----- 3 files changed, 65 insertions(+), 15 deletions(-) diff --git a/src/App.js b/src/App.js index 8e1f9446..b8572ca0 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import './App.css'; import Game from './components/Game.js'; class App extends Component { + render() { return (
diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..387064e7 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -6,9 +6,9 @@ import RecentSubmission from './RecentSubmission'; class Game extends Component { - constructor(props) { - super(props); - } + // constructor(props) { + // super(props); + // } render() { diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..0cf5847a 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -3,12 +3,61 @@ import './PlayerSubmissionForm.css'; class PlayerSubmissionForm extends Component { - constructor(props) { - super(props); + // constructor(props) { + // super(props); + // } + + state = { + adjective: '', + noun: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '', + }; + + onAdjectiveChange = (event) => { + // console.log(event.target.value) + this.setState({ + adjective: event.target.value + }); + }; + + onNounChange = (event) => { + this.setState({ + noun: event.target.value + }) + }; + + onAdverbChange = (event) => { + this.setState({ + adverb: event.target.value + }) + }; + + onVerbeChange = (event) => { + this.setState({ + verbe: event.target.value + }) + }; + + onAdjective2Change = (event) => { + this.setState({ + adjective2: event.target.value + }) + }; + + onNoun2Change = (event) => { + this.setState({ + noun2: event.target.value + }) + }; + + onSubmit = () => { + console.log(this.state) } render() { - return (

Player Submission Form for Player #{ }

@@ -16,18 +65,18 @@ class PlayerSubmissionForm extends Component {
- - { - // Put your form inputs here... We've put in one below as an example - } - - + The + + + + + + + .
- +
From 8b9e4a2eaea62da1c52b4935366fa90e8dff1826 Mon Sep 17 00:00:00 2001 From: daniela sanchez Date: Wed, 11 Dec 2019 15:51:32 -0800 Subject: [PATCH 02/12] Most recent submission --- src/components/Game.js | 39 +++++++++++++--- src/components/PlayerSubmissionForm.js | 61 +++++++++++++++++++------- src/components/RecentSubmission.js | 5 ++- 3 files changed, 82 insertions(+), 23 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 387064e7..73f514ae 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -6,9 +6,38 @@ import RecentSubmission from './RecentSubmission'; class Game extends Component { - // constructor(props) { - // super(props); - // } + constructor(props) { + super(props); + + this.state = { + submissions: [], + lastSubmission: {} + } + }; + + addSubmission = (submission) => { + + const submissions = this.state.submissions; + + submissions.push(submission); + this.setState({ + submissions + }) + }; + + lastSubmission = (submission) => { + + let { lastSubmission } = this.state.lastSubmission; + + lastSubmission = submission + this.setState({ + lastSubmission, + }); + + console.log(this.state.lastSubmission) + + } + render() { @@ -32,9 +61,9 @@ class Game extends Component { { exampleFormat }

- + - + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 0cf5847a..ed60c93e 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,20 +1,21 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from 'prop-types'; class PlayerSubmissionForm extends Component { - // constructor(props) { - // super(props); - // } - - state = { - adjective: '', - noun: '', - adverb: '', - verb: '', - adjective2: '', - noun2: '', - }; + constructor(props) { + super(props); + + this.state = { + adjective: '', + noun: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '', + }; + } onAdjectiveChange = (event) => { // console.log(event.target.value) @@ -35,9 +36,9 @@ class PlayerSubmissionForm extends Component { }) }; - onVerbeChange = (event) => { + onVerbChange = (event) => { this.setState({ - verbe: event.target.value + verb: event.target.value }) }; @@ -53,8 +54,30 @@ class PlayerSubmissionForm extends Component { }) }; - onSubmit = () => { - console.log(this.state) + onSubmit = (event) => { + // Stop the default page reload + event.preventDefault(); + + const newSubmission = { + adjective: this.state.adjective, + noun: this.state.noun, + adverb: this.state.adverb, + verb: this.state.verb, + adjective2: this.state.adjective2, + noun2: this.state.noun2, + } + + this.props.addSubmissionCallback(newSubmission); + this.props.lastSubmissionCallback(newSubmission); + + this.setState({ + adjective: '', + noun: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '', + }); } render() { @@ -69,7 +92,7 @@ class PlayerSubmissionForm extends Component { - + . @@ -84,4 +107,8 @@ class PlayerSubmissionForm extends Component { } } +PlayerSubmissionForm.propTypes = { + addSubmissionCallback: PropTypes.func.isRequired, +}; + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..ec57d2ca 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -2,10 +2,13 @@ import React from 'react'; import './RecentSubmission.css'; const RecentSubmission = (props) => { + + const lastSubmission = `The ${props.submission.adjective} ${props.submission.noun} ${props.submission.adverb} ${props.submission.verb} the ${props.submission.adjective2} ${props.submission.noun2}.`; + return (

The Most Recent Submission

-

{ }

+

{ lastSubmission }

); } From 97a507e3d0bf1bdf5aa7757cb32f7cf6944a473c Mon Sep 17 00:00:00 2001 From: daniela sanchez Date: Wed, 11 Dec 2019 16:03:54 -0800 Subject: [PATCH 03/12] Wave 1 --- src/components/Game.js | 10 ++++++---- src/components/PlayerSubmissionForm.js | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 73f514ae..d04a5546 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -11,17 +11,19 @@ class Game extends Component { this.state = { submissions: [], - lastSubmission: {} + lastSubmission: {}, + player: 1, } }; addSubmission = (submission) => { const submissions = this.state.submissions; - + submissions.push(submission); this.setState({ - submissions + submissions, + player: this.state.player + 1 }) }; @@ -63,7 +65,7 @@ class Game extends Component { - + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ed60c93e..0e1d01d7 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -83,7 +83,7 @@ class PlayerSubmissionForm extends Component { render() { return (
-

Player Submission Form for Player #{ }

+

Player Submission Form for Player #{ this.props.player }

From ab045a2363e93609940ff4a26f7f7acc5b283e8c Mon Sep 17 00:00:00 2001 From: daniela sanchez Date: Wed, 11 Dec 2019 16:54:40 -0800 Subject: [PATCH 04/12] Poem, with separated lines --- src/components/FinalPoem.js | 11 +++++++++-- src/components/Game.js | 2 +- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..8a5d5b62 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,13 +1,20 @@ import React from 'react'; import './FinalPoem.css'; -const FinalPoem = (props) => { +const FinalPoem = (props) => { + + const submissionstCollection = props.poems.map((submission, i) => { + return

{`The ${submission.adjective} ${submission.noun} ${submission.adverb} ${submission.verb} the ${submission.adjective2} ${submission.noun2}.`}

; + } + ); return (

Final Poem

- +
    + {submissionstCollection} +
diff --git a/src/components/Game.js b/src/components/Game.js index d04a5546..6aed59f4 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -67,7 +67,7 @@ class Game extends Component { - +
); From c9390e0d50c272f48429eddaf0767d8fdc2c0e75 Mon Sep 17 00:00:00 2001 From: daniela sanchez Date: Thu, 12 Dec 2019 16:29:06 -0800 Subject: [PATCH 05/12] DRY code form --- src/components/PlayerSubmissionForm.js | 51 ++++++-------------------- 1 file changed, 12 insertions(+), 39 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 0e1d01d7..8dd5d3c8 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -17,41 +17,13 @@ class PlayerSubmissionForm extends Component { }; } - onAdjectiveChange = (event) => { - // console.log(event.target.value) - this.setState({ - adjective: event.target.value - }); - }; - - onNounChange = (event) => { - this.setState({ - noun: event.target.value - }) - }; + onFieldChange = (event) => { + const { placeholder, value } = event.target; - onAdverbChange = (event) => { - this.setState({ - adverb: event.target.value - }) - }; + const updatedState = {}; + updatedState[placeholder] = value; - onVerbChange = (event) => { - this.setState({ - verb: event.target.value - }) - }; - - onAdjective2Change = (event) => { - this.setState({ - adjective2: event.target.value - }) - }; - - onNoun2Change = (event) => { - this.setState({ - noun2: event.target.value - }) + this.setState(updatedState); }; onSubmit = (event) => { @@ -89,12 +61,13 @@ class PlayerSubmissionForm extends Component {
The - - - - - - + + + + the + + + .
From 2e7f12667d417607dd0502dccda0b6a79a1809da Mon Sep 17 00:00:00 2001 From: daniela sanchez Date: Thu, 12 Dec 2019 22:20:24 -0800 Subject: [PATCH 06/12] Validation color and hidden recent submission --- src/components/Game.js | 3 +- src/components/PlayerSubmissionForm.css | 2 +- src/components/PlayerSubmissionForm.js | 56 +++++++++++++++++++++---- src/components/RecentSubmission.js | 23 ++++++---- 4 files changed, 66 insertions(+), 18 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 6aed59f4..8ad4638e 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -37,7 +37,6 @@ class Game extends Component { }); console.log(this.state.lastSubmission) - } @@ -65,7 +64,7 @@ class Game extends Component { - + diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..dd4d8811 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -35,6 +35,6 @@ background-color: #FFE9E9; } -.PlayerSubmissionForm__input--invalid::placeholder { +.PlayerSubmissionFormt__input--invalid::placeholder { color: black; } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 8dd5d3c8..5f079621 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -15,7 +15,16 @@ class PlayerSubmissionForm extends Component { adjective2: '', noun2: '', }; - } + + this.validators = { + adjective: /.+/, + noun: /.+/, + adverb: /.+/, + verb: /.+/, + adjective2: /.+/, + noun2: /.+/, + } + }; onFieldChange = (event) => { const { placeholder, value } = event.target; @@ -26,10 +35,33 @@ class PlayerSubmissionForm extends Component { this.setState(updatedState); }; + validate = (fieldName) => { + const value = this.state[fieldName]; + const validation = this.validators[fieldName]; + + if (value.match(validation)) { + return 'PlayerSubmissionFormt__input'; + } + + return 'PlayerSubmissionFormt__input--invalid'; + }; + onSubmit = (event) => { // Stop the default page reload event.preventDefault(); + let allValid = true; + + Object.keys(this.validators).forEach((key) => { + if (!this.state[key].match(this.validators[key])) { + allValid = false; + } + }); + + if (!allValid) { + return; + } + const newSubmission = { adjective: this.state.adjective, noun: this.state.noun, @@ -50,9 +82,16 @@ class PlayerSubmissionForm extends Component { adjective2: '', noun2: '', }); - } + }; render() { + const adjectiveValid = this.validate('adjective'); + const nounValid = this.validate('noun'); + const adverbValid = this.validate('adverb'); + const verbValid = this.validate('verb'); + const adjective2Valid = this.validate('adjective2'); + const noun2Valid = this.validate('noun2'); + return (

Player Submission Form for Player #{ this.props.player }

@@ -61,13 +100,13 @@ class PlayerSubmissionForm extends Component {
The - - - + + + the - - - + + + .
@@ -82,6 +121,7 @@ class PlayerSubmissionForm extends Component { PlayerSubmissionForm.propTypes = { addSubmissionCallback: PropTypes.func.isRequired, + lastSubmissionCallback: PropTypes.func.isRequired, }; export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index ec57d2ca..c8e22949 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,16 +1,25 @@ import React from 'react'; import './RecentSubmission.css'; +import PropTypes from 'prop-types'; const RecentSubmission = (props) => { const lastSubmission = `The ${props.submission.adjective} ${props.submission.noun} ${props.submission.adverb} ${props.submission.verb} the ${props.submission.adjective2} ${props.submission.noun2}.`; - - return ( -
-

The Most Recent Submission

-

{ lastSubmission }

-
- ); + + if (props.submission.adjective !== undefined) { + return ( +
+

The Most Recent Submission

+

{ lastSubmission }

+
+ ); + } else { + return ('') + } } +// RecentSubmission.propTypes = { +// submission: PropTypes.func +// }; + export default RecentSubmission; From 578be97039d37203500b21e793e88d89a3a64d3b Mon Sep 17 00:00:00 2001 From: daniela sanchez Date: Fri, 13 Dec 2019 11:36:17 -0800 Subject: [PATCH 07/12] Reveal Poem on Click --- src/components/FinalPoem.js | 66 ++++++++++++++++++++++++++----------- 1 file changed, 46 insertions(+), 20 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 8a5d5b62..5f537086 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,27 +1,53 @@ -import React from 'react'; +import React, { Component } from 'react'; import './FinalPoem.css'; -const FinalPoem = (props) => { - - const submissionstCollection = props.poems.map((submission, i) => { - return

{`The ${submission.adjective} ${submission.noun} ${submission.adverb} ${submission.verb} the ${submission.adjective2} ${submission.noun2}.`}

; - } - ); - - return ( -
-
-

Final Poem

-
    - {submissionstCollection} -
-
+// const FinalPoem = (props) => { +class FinalPoem extends Component { + + constructor(props) { + super(props); + this.state = { + show: false, + }; + }; + + onShowPoem = () => { + this.setState( { show: true } ) + }; + + submissionstCollection () { + const submissionstCollection = this.props.poems.map((submission, i) => { + return

{`The ${submission.adjective} ${submission.noun} ${submission.adverb} ${submission.verb} the ${submission.adjective2} ${submission.noun2}.`}

; + } + ); + return submissionstCollection + } + + render () { + + if (this.state.show === true) { + + return ( +
+
+

Final Poem

+
    + {this.submissionstCollection()} +
+
+
+ ); + } + + else { + return (
- +
-
- ); -} + ); + } + } +}; export default FinalPoem; From 826509aae7c27068d26ed3329bc212514f2a2462 Mon Sep 17 00:00:00 2001 From: daniela sanchez Date: Fri, 13 Dec 2019 14:48:24 -0800 Subject: [PATCH 08/12] Show Poem Button --- src/components/FinalPoem.js | 84 ++++++++++++------------------ src/components/Game.js | 35 ++++++++++--- src/components/RecentSubmission.js | 2 +- 3 files changed, 62 insertions(+), 59 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 5f537086..c3c1b287 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,53 +1,37 @@ -import React, { Component } from 'react'; +import React from 'react'; import './FinalPoem.css'; -// const FinalPoem = (props) => { -class FinalPoem extends Component { - - constructor(props) { - super(props); - - this.state = { - show: false, - }; - }; - - onShowPoem = () => { - this.setState( { show: true } ) +const FinalPoem = (props) => { + + const revealPoemButton = +
+ +
+ + const submissionsCollection = props.poems.map((submission, i) => { + const sentence = `The ${submission.adjective} ${submission.noun} ${submission.adverb} ${submission.verb} the ${submission.adjective2} ${submission.noun2}.` + return

{sentence}

; + } + ); + + const Poem = +
+
+

Final Poem

+
    + {submissionsCollection} +
+
+
; + + + return ( + props.showPoem ? Poem : revealPoemButton + ); }; - - submissionstCollection () { - const submissionstCollection = this.props.poems.map((submission, i) => { - return

{`The ${submission.adjective} ${submission.noun} ${submission.adverb} ${submission.verb} the ${submission.adjective2} ${submission.noun2}.`}

; - } - ); - return submissionstCollection - } - - render () { - - if (this.state.show === true) { - - return ( -
-
-

Final Poem

-
    - {this.submissionstCollection()} -
-
-
- ); - } - - else { - return ( -
- -
- ); - } - } -}; - -export default FinalPoem; + +export default FinalPoem; \ No newline at end of file diff --git a/src/components/Game.js b/src/components/Game.js index 8ad4638e..1cf8ab85 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -13,6 +13,7 @@ class Game extends Component { submissions: [], lastSubmission: {}, player: 1, + showPoem: false, } }; @@ -23,7 +24,8 @@ class Game extends Component { submissions.push(submission); this.setState({ submissions, - player: this.state.player + 1 + player: this.state.player + 1, + showSubmission: true, }) }; @@ -35,10 +37,17 @@ class Game extends Component { this.setState({ lastSubmission, }); - - console.log(this.state.lastSubmission) } + revealPoem = (event) => { + event.preventDefault(); + if (this.state.submissions.length > 0) { + this.setState({ + showPoem: true + }); + }; + }; + render() { @@ -62,11 +71,21 @@ class Game extends Component { { exampleFormat }

- - - - - + + + + +
); diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index c8e22949..c27ee369 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -6,7 +6,7 @@ const RecentSubmission = (props) => { const lastSubmission = `The ${props.submission.adjective} ${props.submission.noun} ${props.submission.adverb} ${props.submission.verb} the ${props.submission.adjective2} ${props.submission.noun2}.`; - if (props.submission.adjective !== undefined) { + if (props.showSubm === true && props.showCompletePoem === false) { return (

The Most Recent Submission

From 30778fa126452fc9f403a620a15ecf59a421b2c0 Mon Sep 17 00:00:00 2001 From: daniela sanchez Date: Fri, 13 Dec 2019 17:37:33 -0800 Subject: [PATCH 09/12] Fixed Reveal Poem to not show last submission when pressed --- src/components/FinalPoem.js | 5 +- src/components/Game.js | 27 +++++----- src/components/PlayerSubmissionForm.js | 72 +++++++++++--------------- src/components/RecentSubmission.js | 32 +++++------- 4 files changed, 60 insertions(+), 76 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index c3c1b287..79cfd938 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -12,9 +12,9 @@ const FinalPoem = (props) => { onClick={props.revealPoem} />
- const submissionsCollection = props.poems.map((submission, i) => { + const submissionsCollection = props.poem.map((submission, i) => { const sentence = `The ${submission.adjective} ${submission.noun} ${submission.adverb} ${submission.verb} the ${submission.adjective2} ${submission.noun2}.` - return

{sentence}

; + return

{sentence}

; } ); @@ -28,7 +28,6 @@ const FinalPoem = (props) => {
; - return ( props.showPoem ? Poem : revealPoemButton ); diff --git a/src/components/Game.js b/src/components/Game.js index 1cf8ab85..157ee5ac 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -14,6 +14,7 @@ class Game extends Component { lastSubmission: {}, player: 1, showPoem: false, + showSubm: false } }; @@ -25,7 +26,7 @@ class Game extends Component { this.setState({ submissions, player: this.state.player + 1, - showSubmission: true, + showSubm: true, }) }; @@ -43,7 +44,8 @@ class Game extends Component { event.preventDefault(); if (this.state.submissions.length > 0) { this.setState({ - showPoem: true + showPoem: true, + showSubm: false, }); }; }; @@ -73,20 +75,21 @@ class Game extends Component { + showSubm={this.state.showSubm} + showPoem={this.state.showPoem}/> - - +
); } @@ -95,15 +98,15 @@ class Game extends Component { const FIELDS = [ "The", { - key: 'adj1', + key: 'adjective', placeholder: 'adjective', }, { - key: 'noun1', + key: 'noun', placeholder: 'noun', }, { - key: 'adv', + key: 'adverb', placeholder: 'adverb', }, { @@ -112,7 +115,7 @@ const FIELDS = [ }, "the", { - key: 'adj2', + key: 'adjective2', placeholder: 'adjective', }, { diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 5f079621..40e29f47 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,20 +1,12 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; -import PropTypes from 'prop-types'; class PlayerSubmissionForm extends Component { constructor(props) { super(props); - this.state = { - adjective: '', - noun: '', - adverb: '', - verb: '', - adjective2: '', - noun2: '', - }; + this.state = STATE this.validators = { adjective: /.+/, @@ -28,7 +20,7 @@ class PlayerSubmissionForm extends Component { onFieldChange = (event) => { const { placeholder, value } = event.target; - + const updatedState = {}; updatedState[placeholder] = value; @@ -42,7 +34,6 @@ class PlayerSubmissionForm extends Component { if (value.match(validation)) { return 'PlayerSubmissionFormt__input'; } - return 'PlayerSubmissionFormt__input--invalid'; }; @@ -74,54 +65,49 @@ class PlayerSubmissionForm extends Component { this.props.addSubmissionCallback(newSubmission); this.props.lastSubmissionCallback(newSubmission); - this.setState({ - adjective: '', - noun: '', - adverb: '', - verb: '', - adjective2: '', - noun2: '', - }); + this.setState( + STATE + ); }; render() { - const adjectiveValid = this.validate('adjective'); - const nounValid = this.validate('noun'); - const adverbValid = this.validate('adverb'); - const verbValid = this.validate('verb'); - const adjective2Valid = this.validate('adjective2'); - const noun2Valid = this.validate('noun2'); - - return ( -
-

Player Submission Form for Player #{ this.props.player }

+ if (this.props.showPoem !== true) + { + return ( +
+

Player Submission Form for Player #{ this.props.player }

-
The - - - + + + the - - - + + + .
-
-
- ); +
); + } else { + return ('') + } } -} +}; -PlayerSubmissionForm.propTypes = { - addSubmissionCallback: PropTypes.func.isRequired, - lastSubmissionCallback: PropTypes.func.isRequired, +const STATE = { + adjective: '', + noun: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '', }; + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index c27ee369..3d6e60a4 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,25 +1,21 @@ import React from 'react'; import './RecentSubmission.css'; -import PropTypes from 'prop-types'; const RecentSubmission = (props) => { - const lastSubmission = `The ${props.submission.adjective} ${props.submission.noun} ${props.submission.adverb} ${props.submission.verb} the ${props.submission.adjective2} ${props.submission.noun2}.`; - - if (props.showSubm === true && props.showCompletePoem === false) { - return ( -
-

The Most Recent Submission

-

{ lastSubmission }

-
- ); - } else { - return ('') - } -} - -// RecentSubmission.propTypes = { -// submission: PropTypes.func -// }; + const lastSubmission = `The ${props.submission.adjective} ${props.submission.noun} + ${props.submission.adverb} ${props.submission.verb} the ${props.submission.adjective2} + ${props.submission.noun2}.`; + + const showSubmission = +
+

The Most Recent Submission

+

{ lastSubmission }

+
; + + return ( + props.showSubm ? showSubmission : ("") + ); +}; export default RecentSubmission; From abee9a4f53745ed6a45703ef72590b214e039f48 Mon Sep 17 00:00:00 2001 From: daniela sanchez Date: Fri, 13 Dec 2019 17:59:14 -0800 Subject: [PATCH 10/12] Destructuring --- src/components/RecentSubmission.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 3d6e60a4..0f6fadab 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -2,10 +2,11 @@ import React from 'react'; import './RecentSubmission.css'; const RecentSubmission = (props) => { + const { adjective, noun, adverb, verb, adjective2, noun2 } = props.submission; - const lastSubmission = `The ${props.submission.adjective} ${props.submission.noun} - ${props.submission.adverb} ${props.submission.verb} the ${props.submission.adjective2} - ${props.submission.noun2}.`; + const lastSubmission = `The ${adjective} ${noun} + ${adverb} ${verb} the ${adjective2} + ${noun2}.`; const showSubmission =
From ccb2cc342cdf045c5bfaa5d3451db5df98b94f73 Mon Sep 17 00:00:00 2001 From: daniela sanchez Date: Sat, 14 Dec 2019 20:40:49 -0800 Subject: [PATCH 11/12] DRY and PropTypes validation --- src/components/FinalPoem.js | 16 ++++++--- src/components/Game.js | 4 +-- src/components/PlayerSubmissionForm.js | 49 +++++++++++++++----------- src/components/RecentSubmission.js | 12 +++++-- 4 files changed, 52 insertions(+), 29 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 79cfd938..390c5fb3 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,5 +1,6 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; const FinalPoem = (props) => { @@ -9,11 +10,12 @@ const FinalPoem = (props) => { type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" - onClick={props.revealPoem} /> + onClick={ props.revealPoem } />
const submissionsCollection = props.poem.map((submission, i) => { - const sentence = `The ${submission.adjective} ${submission.noun} ${submission.adverb} ${submission.verb} the ${submission.adjective2} ${submission.noun2}.` + const { adjective, noun, adverb, verb, adjective2, noun2 } = submission + const sentence = `The ${adjective} ${noun} ${adverb} ${verb} the ${adjective2} ${noun2}.` return

{sentence}

; } ); @@ -30,7 +32,13 @@ const FinalPoem = (props) => { return ( props.showPoem ? Poem : revealPoemButton - ); - }; + ); +}; + +FinalPoem.propTypes = { + poem: PropTypes.array.isRequired, + revealPoem: PropTypes.func.isRequired, + showPoem: PropTypes.bool.isRequired +} export default FinalPoem; \ No newline at end of file diff --git a/src/components/Game.js b/src/components/Game.js index 157ee5ac..47625b9c 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -6,8 +6,8 @@ import RecentSubmission from './RecentSubmission'; class Game extends Component { - constructor(props) { - super(props); + constructor() { + super(); this.state = { submissions: [], diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 40e29f47..f1770d0f 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 { @@ -7,7 +8,7 @@ class PlayerSubmissionForm extends Component { super(props); this.state = STATE - + this.validators = { adjective: /.+/, noun: /.+/, @@ -53,14 +54,10 @@ class PlayerSubmissionForm extends Component { return; } - const newSubmission = { - adjective: this.state.adjective, - noun: this.state.noun, - adverb: this.state.adverb, - verb: this.state.verb, - adjective2: this.state.adjective2, - noun2: this.state.noun2, - } + let newSubmission = {} + Object.keys(this.state).forEach((key) => { + newSubmission[key] = this.state[key] + }); this.props.addSubmissionCallback(newSubmission); this.props.lastSubmissionCallback(newSubmission); @@ -72,6 +69,19 @@ class PlayerSubmissionForm extends Component { render() { + let form = this.props.fields.map((field) => { + if (field['key']) { + return + } else { + return field + } + }); + if (this.props.showPoem !== true) { return ( @@ -79,15 +89,7 @@ class PlayerSubmissionForm extends Component {

Player Submission Form for Player #{ this.props.player }

- The - - - - the - - - - . + { form }
@@ -100,14 +102,21 @@ class PlayerSubmissionForm extends Component { } }; -const STATE = { +const STATE = { adjective: '', noun: '', adverb: '', verb: '', adjective2: '', - noun2: '', + noun2: '' }; +PlayerSubmissionForm.propTypes = { + addSubmissionCallback: PropTypes.func.isRequired, + lastSubmissionCallback: PropTypes.func.isRequired, + player: PropTypes.number.isRequired, + showPoem: PropTypes.bool.isRequired, + fields: PropTypes.array.isRequired +} export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 0f6fadab..d8bab38b 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,12 +1,12 @@ import React from 'react'; import './RecentSubmission.css'; +import PropTypes from 'prop-types'; const RecentSubmission = (props) => { const { adjective, noun, adverb, verb, adjective2, noun2 } = props.submission; - const lastSubmission = `The ${adjective} ${noun} - ${adverb} ${verb} the ${adjective2} - ${noun2}.`; + const lastSubmission = `The ${adjective} ${noun} ${adverb} ${verb} + the ${adjective2} ${noun2}.`; const showSubmission =
@@ -19,4 +19,10 @@ const RecentSubmission = (props) => { ); }; +RecentSubmission.propTypes = { + showSubmission: PropTypes.bool.isRequired, + showPoem: PropTypes.bool.isRequired, + submission: PropTypes.object.isRequired +} + export default RecentSubmission; From 332844dd3f4e4e12eac934382e50b695e1c17c18 Mon Sep 17 00:00:00 2001 From: daniela sanchez Date: Sat, 14 Dec 2019 22:47:14 -0800 Subject: [PATCH 12/12] .. --- src/components/FinalPoem.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 390c5fb3..6da53f11 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,7 +3,6 @@ import './FinalPoem.css'; import PropTypes from 'prop-types'; const FinalPoem = (props) => { - const revealPoemButton =