From 38f6c00a39918e665d5248c57c3102e64169df9d Mon Sep 17 00:00:00 2001 From: charlotte adams Date: Wed, 22 Apr 2020 13:14:06 -0700 Subject: [PATCH 01/10] create 6 inputs and write comments for next steps --- src/components/PlayerSubmissionForm.js | 57 ++++++++++++++++++++++---- 1 file changed, 49 insertions(+), 8 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..68343f3c 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,6 +2,11 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; const PlayerSubmissionForm = () => { + + // formFields Hook goes here + // onInputChange goes here + // textValidation goes here + // onFormSubmit goes here return (

Player Submission Form for Player #{ }

@@ -9,14 +14,49 @@ const PlayerSubmissionForm = () => {
- - { - // Put your form inputs here... We've put in one below as an example - } - - + The + + + + + +
@@ -27,5 +67,6 @@ const PlayerSubmissionForm = () => { ); } +// PropTypes go here export default PlayerSubmissionForm; From 0e1b7a110c1f9f7cc82499507a5c9c7eddb71186 Mon Sep 17 00:00:00 2001 From: charlotte adams Date: Wed, 22 Apr 2020 13:40:53 -0700 Subject: [PATCH 02/10] form fields showing as expected --- src/components/PlayerSubmissionForm.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 68343f3c..dc79cff8 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -19,43 +19,43 @@ const PlayerSubmissionForm = () => { name="adj1" placeholder="adjective" type="text" - noChange={onInputChange} - value={formFields.adj1} + // noChange={onInputChange} + // value={formFields.adj1} />
From 5630d7fbd7d892862a0cd046f15fa08633d84e87 Mon Sep 17 00:00:00 2001 From: charlotte adams Date: Wed, 22 Apr 2020 15:47:51 -0700 Subject: [PATCH 03/10] form fields will not submit unless all fields have text --- src/components/PlayerSubmissionForm.js | 86 +++++++++++++++++++++----- 1 file changed, 71 insertions(+), 15 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index dc79cff8..36aaf270 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,17 +1,66 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; +// import PropTypes from 'prop-types'; -const PlayerSubmissionForm = () => { +const PlayerSubmissionForm = ({ onSubmitCallBack }) => { + + // formFields hook goes here + const [formFields, setFormFields ] = useState({ + the1: "The", + adj1: '', + noun1: '', + adv: '', + verb: '', + the2: 'the', + adj2: '', + noun2: '' + + }); - // formFields Hook goes here // onInputChange goes here + const onInputChange = (event) => { + const newFormFields = { + ...formFields, + }; + + newFormFields[event.target.name] = event.target.value; + setFormFields(newFormFields); + }; + // textValidation goes here + // not sure what to do about textValidation + // onFormSubmit goes here + const onFormSubmit = (event) => { + event.preventDefault(); + + const formFieldsArray = Object.values(formFields); + + if(!formFieldsArray.includes('')) { + console.log('Success! Form Submitted!'); + + onSubmitCallBack(formFields); + + setFormFields({ + the1: "The", + adj1: '', + noun1: '', + adv: '', + verb: '', + the2: 'the', + adj2: '', + noun2: '' + + }); + } + } return (

Player Submission Form for Player #{ }

- +
The @@ -19,43 +68,44 @@ const PlayerSubmissionForm = () => { name="adj1" placeholder="adjective" type="text" - // noChange={onInputChange} - // value={formFields.adj1} + // DRY + onChange={onInputChange} + value={formFields.adj1} />
@@ -68,5 +118,11 @@ const PlayerSubmissionForm = () => { } // PropTypes go here +// PlayerSubmissionForm.propTypes = { + // onFormSubmit: PropTypes.func.isRequired, + // onSubmitCallBack: PropTypes.func.isRequired, + // formFieldsArray: PropTypes.array.isRequired + +// }; export default PlayerSubmissionForm; From 53759b3264dd801a4e3dbbf22f5b5a66bd6ba468 Mon Sep 17 00:00:00 2001 From: charlotte adams Date: Wed, 22 Apr 2020 16:59:23 -0700 Subject: [PATCH 04/10] submit line button behaves as expected. reveal poem button behaves as expected and hidden after clicking --- src/components/FinalPoem.js | 36 +++++- src/components/Game.js | 26 ++++- src/components/PlayerSubmissionForm.js | 155 ++++++++++++++----------- src/components/RecentSubmission.js | 19 ++- 4 files changed, 156 insertions(+), 80 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..ae2a1147 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,18 +1,42 @@ -import React from 'react'; +import React, { useState } from 'react'; import './FinalPoem.css'; -const FinalPoem = (props) => { +const FinalPoem = ({poem, onSubmitCallBack}) => { + + const [showPoem, setShowPoem ] = useState(''); + const [showFinalPoemButton, setShowFinalPoemButton] = useState(true); + let finalPoemLines = []; + + poem.forEach (poemLine => { + finalPoemLines.push(Object.values(poemLine).join(" ").concat('.')); + }); + + const onFinalPoemButtonClick = (event) => { + event.preventDefault(); + + let finalPoem = finalPoemLines.join('\n'); + setShowPoem(finalPoem); + onSubmitCallBack(false); + setShowFinalPoemButton(false); + } return (
-
+

Final Poem

- + + {showPoem} +
+ {showFinalPoemButton &&
- -
+ +
}
); } diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..37109794 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -13,6 +13,24 @@ const Game = () => { } }).join(" "); + const [poemLines, setPoemLines] = useState([]); + const [showRecentSubmission, setShowRecentSubmission] = useState(false); + const [showPlayerSubmissionForm, setShowPlayerSubmissionForm] = useState(true); + + const addPoemLine = (poem) => { + const newPoemLines = [...poemLines]; + + newPoemLines.push(poem); + + setPoemLines(newPoemLines); + setShowRecentSubmission(true); + } + + const hidePlayerSubmissionForm = (value) => { + setShowPlayerSubmissionForm(value); + setShowRecentSubmission(false); + } + return (

Game

@@ -25,11 +43,11 @@ const Game = () => { { exampleFormat }

- + {showRecentSubmission && } - + {showPlayerSubmissionForm && } - +
); @@ -66,4 +84,4 @@ const FIELDS = [ ".", ]; -export default Game; +export default Game; \ No newline at end of file diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 36aaf270..b36e7711 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,10 +1,9 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; -// import PropTypes from 'prop-types'; +import PropTypes from 'prop-types'; -const PlayerSubmissionForm = ({ onSubmitCallBack }) => { +const PlayerSubmissionForm = ({onSubmitCallBack, currentPlayerId}) => { - // formFields hook goes here const [formFields, setFormFields ] = useState({ the1: "The", adj1: '', @@ -14,10 +13,29 @@ const PlayerSubmissionForm = ({ onSubmitCallBack }) => { the2: 'the', adj2: '', noun2: '' - }); - // onInputChange goes here + const inputs = { + adj1: { + validation: /.+/, + }, + noun1: { + validation: /.+/, + }, + adv: { + validation: /.+/, + }, + verb: { + validation: /.+/, + }, + adj2: { + validation: /.+/, + }, + noun2: { + validation: /.+/, + } + }; + const onInputChange = (event) => { const newFormFields = { ...formFields, @@ -27,17 +45,16 @@ const PlayerSubmissionForm = ({ onSubmitCallBack }) => { setFormFields(newFormFields); }; - // textValidation goes here - // not sure what to do about textValidation + const fieldValid = fieldName => { + return inputs[fieldName].validation.test(formFields[fieldName]); + }; - // onFormSubmit goes here const onFormSubmit = (event) => { event.preventDefault(); - + const formFieldsArray = Object.values(formFields); - if(!formFieldsArray.includes('')) { - console.log('Success! Form Submitted!'); + if (!formFieldsArray.includes('')) { onSubmitCallBack(formFields); @@ -50,63 +67,71 @@ const PlayerSubmissionForm = ({ onSubmitCallBack }) => { the2: 'the', adj2: '', noun2: '' - }); } + } + return (
-

Player Submission Form for Player #{ }

+

Player Submission Form for Player #{currentPlayerId}

+ className="PlayerSubmissionForm__form" + onSubmit={onFormSubmit}>
- The - - - - - - + The + + + + + the + + + .
@@ -117,12 +142,8 @@ const PlayerSubmissionForm = ({ onSubmitCallBack }) => { ); } -// PropTypes go here -// PlayerSubmissionForm.propTypes = { - // onFormSubmit: PropTypes.func.isRequired, - // onSubmitCallBack: PropTypes.func.isRequired, - // formFieldsArray: PropTypes.array.isRequired - -// }; +PlayerSubmissionForm.propTypes = { + onSubmitCallBack: PropTypes.func.isRequired +}; -export default PlayerSubmissionForm; +export default PlayerSubmissionForm; \ No newline at end of file diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..7975d370 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,26 @@ import React from 'react'; import './RecentSubmission.css'; -const RecentSubmission = (props) => { - return ( +const RecentSubmission = ({ poem }) => { + let submission = [] + let mostRecentSubmission = poem.slice(-1)[0]; + + if (mostRecentSubmission === undefined) { + submission.push('') + } else { + submission.push(Object.values(mostRecentSubmission).join(" ").concat('.')); + } + + return (

The Most Recent Submission

-

{ }

+

+ { submission } +

); } + + export default RecentSubmission; From 141c8557653add044db35c127c72fcb1c5f25e95 Mon Sep 17 00:00:00 2001 From: charlotte adams Date: Wed, 22 Apr 2020 19:53:03 -0700 Subject: [PATCH 05/10] finishe wave 2 --- src/components/FinalPoem.js | 6 ++++-- src/components/Game.js | 10 +++++++++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index ae2a1147..5bf4c939 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,6 +3,7 @@ import './FinalPoem.css'; const FinalPoem = ({poem, onSubmitCallBack}) => { + // hooks/state organized here const [showPoem, setShowPoem ] = useState(''); const [showFinalPoemButton, setShowFinalPoemButton] = useState(true); let finalPoemLines = []; @@ -11,8 +12,9 @@ const FinalPoem = ({poem, onSubmitCallBack}) => { finalPoemLines.push(Object.values(poemLine).join(" ").concat('.')); }); - const onFinalPoemButtonClick = (event) => { - event.preventDefault(); + const onFinalPoemButtonClick = (e) => { + // prevent default behavior + e.preventDefault(); let finalPoem = finalPoemLines.join('\n'); setShowPoem(finalPoem); diff --git a/src/components/Game.js b/src/components/Game.js index 37109794..40cb778b 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -13,10 +13,16 @@ const Game = () => { } }).join(" "); + // Game.js keeps track of state + // all the hooks/useState organized here const [poemLines, setPoemLines] = useState([]); const [showRecentSubmission, setShowRecentSubmission] = useState(false); const [showPlayerSubmissionForm, setShowPlayerSubmissionForm] = useState(true); + // use this example + // const addStudent = (student) => { + // Duplicate the student list. + // const newStudentList = [...students]; const addPoemLine = (poem) => { const newPoemLines = [...poemLines]; @@ -30,6 +36,7 @@ const Game = () => { setShowPlayerSubmissionForm(value); setShowRecentSubmission(false); } + return (
@@ -43,8 +50,9 @@ const Game = () => { { exampleFormat }

+ {/* figured out how to write the next two lines with && by looking at classmates' code */} {showRecentSubmission && } - + {/* define currentPlayerId here */} {showPlayerSubmissionForm && } From 8c66814258c8ce0cb4134a24e1ddf7fd98ace9a3 Mon Sep 17 00:00:00 2001 From: charlotte adams Date: Wed, 22 Apr 2020 19:54:37 -0700 Subject: [PATCH 06/10] add comments/clean file --- src/components/RecentSubmission.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 7975d370..1fd52a24 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,13 +5,16 @@ const RecentSubmission = ({ poem }) => { let submission = [] let mostRecentSubmission = poem.slice(-1)[0]; + +// As a player, I only want to see the "The Most Recent Submission" section if +// there has already been at least one submission. If no submission, return empty string. if (mostRecentSubmission === undefined) { submission.push('') } else { submission.push(Object.values(mostRecentSubmission).join(" ").concat('.')); } - - return ( + + return (

The Most Recent Submission

From 0df3ae56b0643de51bd4bd0d4f58dcda5f1068d7 Mon Sep 17 00:00:00 2001 From: charlotte adams Date: Wed, 22 Apr 2020 19:55:05 -0700 Subject: [PATCH 07/10] complete wave 3 --- src/components/PlayerSubmissionForm.js | 44 +++++++++++++++----------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index b36e7711..b99f0386 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,6 +1,5 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; -import PropTypes from 'prop-types'; const PlayerSubmissionForm = ({onSubmitCallBack, currentPlayerId}) => { @@ -16,28 +15,32 @@ const PlayerSubmissionForm = ({onSubmitCallBack, currentPlayerId}) => { }); const inputs = { + // This feels repetitive - need to DRY adj1: { - validation: /.+/, + // This regex allows alphabetic characters only. However, + // upon the actual 'submit', non-alphabetic characters pass through my program! :( + validation: /[a-zA-Z]/, }, noun1: { - validation: /.+/, + validation: /[a-zA-Z]/, }, adv: { - validation: /.+/, + validation: /[a-zA-Z]/, }, verb: { - validation: /.+/, + validation: /[a-zA-Z]/, }, adj2: { - validation: /.+/, + validation: /[a-zA-Z]/, }, noun2: { - validation: /.+/, + validation: /[a-zA-Z]/, } }; const onInputChange = (event) => { const newFormFields = { + // using the spread operator go grab ALL the form fields ...formFields, }; @@ -45,15 +48,17 @@ const PlayerSubmissionForm = ({onSubmitCallBack, currentPlayerId}) => { setFormFields(newFormFields); }; - const fieldValid = fieldName => { + const validateField = fieldName => { return inputs[fieldName].validation.test(formFields[fieldName]); }; - const onFormSubmit = (event) => { - event.preventDefault(); + const onFormSubmit = (e) => { + // prevent default behavior which is to call external api (?) + e.preventDefault(); const formFieldsArray = Object.values(formFields); + // check if form fields are NOT empty if (!formFieldsArray.includes('')) { onSubmitCallBack(formFields); @@ -86,8 +91,11 @@ const PlayerSubmissionForm = ({onSubmitCallBack, currentPlayerId}) => { name="adj1" placeholder="adjective" type="text" + // This is repetitive - need to DRY onChange={onInputChange} - className={fieldValid("adj1") ? "" : "PlayerSubmissionFormt__input--invalid"} + // This too is repetitive - need to DRY + // This applies the (already provided) css for pink fields + className={validateField("adj1") ? "" : "PlayerSubmissionFormt__input--invalid"} value={formFields.adj1} /> { placeholder="noun" type="text" onChange={onInputChange} - className={fieldValid("noun1") ? "" : "PlayerSubmissionFormt__input--invalid"} + className={validateField("noun1") ? "" : "PlayerSubmissionFormt__input--invalid"} value={formFields.noun1} /> { placeholder="adverb" type="text" onChange={onInputChange} - className={fieldValid("adv") ? "" : "PlayerSubmissionFormt__input--invalid"} + className={validateField("adv") ? "" : "PlayerSubmissionFormt__input--invalid"} value={formFields.adv} /> { placeholder="verb" type="text" onChange={onInputChange} - className={fieldValid("verb") ? "" : "PlayerSubmissionFormt__input--invalid"} + className={validateField("verb") ? "" : "PlayerSubmissionFormt__input--invalid"} value={formFields.verb} /> the @@ -120,7 +128,7 @@ const PlayerSubmissionForm = ({onSubmitCallBack, currentPlayerId}) => { placeholder="adjective" type="text" onChange={onInputChange} - className={fieldValid("adj2") ? "" : "PlayerSubmissionFormt__input--invalid"} + className={validateField("adj2") ? "" : "PlayerSubmissionFormt__input--invalid"} value={formFields.adj2} /> { placeholder="noun" type="text" onChange={onInputChange} - className={fieldValid("noun2") ? "" : "PlayerSubmissionFormt__input--invalid"} + className={validateField("noun2") ? "" : "PlayerSubmissionFormt__input--invalid"} value={formFields.noun2} /> . @@ -142,8 +150,6 @@ const PlayerSubmissionForm = ({onSubmitCallBack, currentPlayerId}) => { ); } -PlayerSubmissionForm.propTypes = { - onSubmitCallBack: PropTypes.func.isRequired -}; + export default PlayerSubmissionForm; \ No newline at end of file From 9d863116237e0d611c977279e773ccbc71e489fa Mon Sep 17 00:00:00 2001 From: charlotte adams Date: Wed, 22 Apr 2020 19:55:42 -0700 Subject: [PATCH 08/10] commit this file - not sure why? yes, this is a poor commit message --- .vscode/settings.json | 1 + 1 file changed, 1 insertion(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..2cd8968b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ +123,125 \ No newline at end of file From d8cd1095162f5e010a774ea25e08dccb39a41325 Mon Sep 17 00:00:00 2001 From: charlotte adams Date: Thu, 23 Apr 2020 14:21:48 -0700 Subject: [PATCH 09/10] final clean-up and more comments --- src/components/Game.js | 2 +- src/components/PlayerSubmissionForm.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 40cb778b..a16a04fe 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -52,7 +52,7 @@ const Game = () => { {/* figured out how to write the next two lines with && by looking at classmates' code */} {showRecentSubmission && } - {/* define currentPlayerId here */} + {/* define currentPlayerId here - got idea from Chris' video where he did student_id */} {showPlayerSubmissionForm && } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index b99f0386..f33b9354 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; const PlayerSubmissionForm = ({onSubmitCallBack, currentPlayerId}) => { - + // https://codesandbox.io/s/serene-fire-no8p7?file=/src/components/SignupForm.js const [formFields, setFormFields ] = useState({ the1: "The", adj1: '', @@ -18,7 +18,7 @@ const PlayerSubmissionForm = ({onSubmitCallBack, currentPlayerId}) => { // This feels repetitive - need to DRY adj1: { // This regex allows alphabetic characters only. However, - // upon the actual 'submit', non-alphabetic characters pass through my program! :( + // upon the actual 'submit', non-alphabetic characters pass through my program! :( validation: /[a-zA-Z]/, }, noun1: { @@ -40,14 +40,14 @@ const PlayerSubmissionForm = ({onSubmitCallBack, currentPlayerId}) => { const onInputChange = (event) => { const newFormFields = { - // using the spread operator go grab ALL the form fields + // using the spread operator to grab ALL the form fields ...formFields, }; newFormFields[event.target.name] = event.target.value; setFormFields(newFormFields); }; - + // https://codesandbox.io/s/serene-fire-no8p7?file=/src/components/SignupForm.js const validateField = fieldName => { return inputs[fieldName].validation.test(formFields[fieldName]); }; From fbb5817d841db2ef1e3fa77cee5ccd9c9db2762d Mon Sep 17 00:00:00 2001 From: charlotte adams Date: Thu, 23 Apr 2020 15:31:14 -0700 Subject: [PATCH 10/10] add links for my resources --- src/components/PlayerSubmissionForm.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index f33b9354..2575a737 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,6 +2,9 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; const PlayerSubmissionForm = ({onSubmitCallBack, currentPlayerId}) => { + // I did not do this project in the Waves as recommended. The instructions did not totally make sense to me. + // I got a solid 3 hours of tutoring while working on this project. React can get confusing - fast. + // I referenced this link often. // https://codesandbox.io/s/serene-fire-no8p7?file=/src/components/SignupForm.js const [formFields, setFormFields ] = useState({ the1: "The", @@ -86,6 +89,9 @@ const PlayerSubmissionForm = ({onSubmitCallBack, currentPlayerId}) => { onSubmit={onFormSubmit}>

+ {/* There's a lot of repeition in the form. Not sure if that's just how forms work, + or if this can be refactored. If time were not an issue, I would look into this further. + The example forms in lecture etc. seem to have this repeition as well. */} The { // This is repetitive - need to DRY onChange={onInputChange} // This too is repetitive - need to DRY - // This applies the (already provided) css for pink fields + // This applies the (already provided) css for pink fields. Not sure why the 't' is + // after "PlayerSubmissionFormt". Why is that 't' there? I looked at the css to verify as the + // css was provided. className={validateField("adj1") ? "" : "PlayerSubmissionFormt__input--invalid"} value={formFields.adj1} />