BradNut/weddingsite
1
0
Fork 0
mirror of https://github.com/BradNut/weddingsite synced 2025-09-08 17:40:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updating dependencies and changing to use '_' in case we use UUID as the backend ID.

Browse source
This commit is contained in:
Bradley Shellnut 2022-03-08 12:08:13 -08:00
parent 57092ea420
commit e0b46ec0ac
7 changed files with 414 additions and 370 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
components/GuestRSVP.js
View file

@ -82,24 +82,24 @@ export default function GuestRSVP({ guest, inputs, handleChange }) {
</h3> </h3>
<input <input
type="radio" type="radio"
id={`${guest.id}-accepted`} id={`${guest.id}_accepted`}
name={`${guest.id}-rsvpStatus`} name={`${guest.id}_rsvpStatus`}
value="accepted" value="accepted"
checked={inputs[guest.id]?.rsvpStatus === 'accepted'} checked={inputs[guest.id]?.rsvpStatus === 'accepted'}
onChange={handleChange} onChange={handleChange}
/> />
<label htmlFor={`${guest.id}-accepted`}> <label htmlFor={`${guest.id}_accepted`}>
{inputs[guest.id]?.rsvpStatus === 'accepted' ? 'Accepted' : 'Accept'} {inputs[guest.id]?.rsvpStatus === 'accepted' ? 'Accepted' : 'Accept'}
</label> </label>
<input <input
type="radio" type="radio"
id={`${guest.id}-declined`} id={`${guest.id}_declined`}
name={`${guest.id}-rsvpStatus`} name={`${guest.id}_rsvpStatus`}
value="declined" value="declined"
checked={inputs[guest.id]?.rsvpStatus === 'declined'} checked={inputs[guest.id]?.rsvpStatus === 'declined'}
onChange={handleChange} onChange={handleChange}
/> />
<label htmlFor={`${guest.id}-declined`}> <label htmlFor={`${guest.id}_declined`}>
{inputs[guest.id]?.rsvpStatus === 'declined' ? 'Declined' : 'Decline'} {inputs[guest.id]?.rsvpStatus === 'declined' ? 'Declined' : 'Decline'}
</label> </label>
</GuestStyles> </GuestStyles>

10
components/PlusOneRSVP.js
View file

@ -61,7 +61,7 @@ export default function PlusOneRSVP({ guest, inputs, handleChange }) {
handleChange({ handleChange({
target: { target: {
value: !inputs[`${guest.id}`].plusOne, value: !inputs[`${guest.id}`].plusOne,
name: `${guest.id}-plusOne`, name: `${guest.id}_plusOne`,
type: 'text', type: 'text',
}, },
}); });
@ -100,16 +100,16 @@ export default function PlusOneRSVP({ guest, inputs, handleChange }) {
<div className="plusone__names"> <div className="plusone__names">
<input <input
type="text" type="text"
id={`${guest.id}-plusOneFirstName`} id={`${guest.id}_plusOneFirstName`}
name={`${guest.id}-plusOneFirstName`} name={`${guest.id}_plusOneFirstName`}
placeholder="First Name" placeholder="First Name"
value={inputs[`${guest.id}`]?.plusOneFirstName} value={inputs[`${guest.id}`]?.plusOneFirstName}
onChange={handleChange} onChange={handleChange}
/> />
<input <input
type="text" type="text"
id={`${guest.id}-plusOneLastName`} id={`${guest.id}_plusOneLastName`}
name={`${guest.id}-plusOneLastName`} name={`${guest.id}_plusOneLastName`}
placeholder="Last Name" placeholder="Last Name"
value={inputs[`${guest.id}`]?.plusOneLastName} value={inputs[`${guest.id}`]?.plusOneLastName}
onChange={handleChange} onChange={handleChange}

6
lib/useForm.js
View file

@ -12,9 +12,9 @@ export default function useForm(initial = {}) {
function handleChange(e) { function handleChange(e) {
let { value, name, type } = e.target; let { value, name, type } = e.target;
// console.log(value, name, type); console.log(value, name, type);
if (name.includes('-')) { if (name.includes('_')) {
const values = name.split('-'); const values = name.split('_');
// console.log(`Values: ${JSON.stringify(values)}`); // console.log(`Values: ${JSON.stringify(values)}`);
const [id, property] = values; const [id, property] = values;
const data = inputs[id]; const data = inputs[id];

708
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

26
package.json
View file

@ -15,17 +15,17 @@
"@reach/portal": "^0.16.2", "@reach/portal": "^0.16.2",
"@reach/visually-hidden": "^0.16.0", "@reach/visually-hidden": "^0.16.0",
"babel-core": "^6.26.3", "babel-core": "^6.26.3",
"babel-plugin-styled-components": "^2.0.2", "babel-plugin-styled-components": "^2.0.6",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"cloudinary-build-url": "^0.2.4", "cloudinary-build-url": "^0.2.4",
"dotenv": "^16.0.0", "dotenv": "^16.0.0",
"escape-html": "^1.0.3", "escape-html": "^1.0.3",
"iron-session": "^6.0.5", "iron-session": "^6.0.5",
"jsonwebtoken": "^8.5.1", "jsonwebtoken": "^8.5.1",
"mongodb": "^4.3.1", "mongodb": "^4.4.1",
"mongoose": "^6.2.2", "mongoose": "^6.2.4",
"next": "^12.0.10", "next": "^12.1.0",
"next-with-apollo": "^5.2.1", "next-with-apollo": "^5.3.0",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"plaiceholder": "^2.3.0", "plaiceholder": "^2.3.0",
@ -33,32 +33,32 @@
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-icons": "^4.3.1", "react-icons": "^4.3.1",
"sharp": "^0.30.1", "sharp": "^0.30.2",
"styled-components": "^5.3.3", "styled-components": "^5.3.3",
"swr": "^0.5.6", "swr": "^0.5.6",
"waait": "^1.0.5" "waait": "^1.0.5"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.4", "@babel/core": "^7.17.5",
"@babel/preset-env": "^7.16.11", "@babel/preset-env": "^7.16.11",
"@testing-library/jest-dom": "^5.16.2", "@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3", "@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"@typescript-eslint/eslint-plugin": "^5.12.0", "@typescript-eslint/eslint-plugin": "^5.14.0",
"@typescript-eslint/parser": "^5.12.0", "@typescript-eslint/parser": "^5.14.0",
"eslint": "^8.9.0", "eslint": "^8.10.0",
"eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.5.0",
"eslint-config-wesbos": "^3.0.2", "eslint-config-wesbos": "^3.0.2",
"eslint-plugin-html": "^6.2.0", "eslint-plugin-html": "^6.2.0",
"eslint-plugin-import": "^2.25.4", "eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0", "eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.28.0", "eslint-plugin-react": "^7.29.3",
"eslint-plugin-react-hooks": "^4.3.0", "eslint-plugin-react-hooks": "^4.3.0",
"jest": "^27.5.1", "jest": "^27.5.1",
"prettier": "^2.5.1", "prettier": "^2.5.1",
"typescript": "^4.5.5" "typescript": "^4.6.2"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [

2
pages/api/rsvp.js
View file

@ -19,7 +19,7 @@ export default withSession(async (req, res) => {
// TODO: REMOVE THIS WHEN TAKING YOUR SITE TO PRODUCTION // TODO: REMOVE THIS WHEN TAKING YOUR SITE TO PRODUCTION
if (process.env.SITE_ENV === 'TEST_SITE') { if (process.env.SITE_ENV === 'TEST_SITE') {
res.status(200).json({ status: 'SUCCESS', groupId: 'TESTID_12345' }); res.status(200).json({ status: 'SUCCESS', groupId: 'TESTID-12345' });
} else { } else {
await connectDb(); await connectDb();
const { firstName, lastName } = await req.body; const { firstName, lastName } = await req.body;

20
pages/rsvp/[id].js
View file

@ -209,7 +209,7 @@ export default function SingleGroupPage({ group }) {
if (res.message === 'SUCCESS') { if (res.message === 'SUCCESS') {
setMessage( setMessage(
`Successfully submited your RSVP${ `Successfully submitted your RSVP${
body.guests.length > 1 ? 's' : '' body.guests.length > 1 ? 's' : ''
}. Don't forget to save the date!!` }. Don't forget to save the date!!`
); );
@ -300,15 +300,15 @@ export default function SingleGroupPage({ group }) {
// eslint-disable-next-line react/prop-types // eslint-disable-next-line react/prop-types
group?.guests?.map((guest) => group?.guests?.map((guest) =>
!guest.isPlusOne ? ( !guest.isPlusOne ? (
<QuestionStyles key={`${guest?.id}-dietaryNotes`}> <QuestionStyles key={`${guest?.id}_dietaryNotes`}>
<p> <p>
{guest.firstName} {guest.lastName} : {guest.firstName} {guest.lastName} :
</p> </p>
<label htmlFor={`${guest.id}-dietaryNotes`}> <label htmlFor={`${guest.id}_dietaryNotes`}>
<p className="sr-only">{`Enter dietery restrictions for ${guest.firstName} ${guest.lastName}`}</p> <p className="sr-only">{`Enter dietery restrictions for ${guest.firstName} ${guest.lastName}`}</p>
<textarea <textarea
name={`${guest.id}-dietaryNotes`} name={`${guest.id}_dietaryNotes`}
id={`${guest.id}-dietaryNotes`} id={`${guest.id}_dietaryNotes`}
cols="30" cols="30"
rows="2" rows="2"
placeholder="Example: Nut allergy, Fish, etc." placeholder="Example: Nut allergy, Fish, etc."
@ -336,15 +336,15 @@ export default function SingleGroupPage({ group }) {
// eslint-disable-next-line react/prop-types // eslint-disable-next-line react/prop-types
group?.guests?.map((guest) => group?.guests?.map((guest) =>
!guest?.isPlusOne ? ( !guest?.isPlusOne ? (
<QuestionStyles key={`${guest?.id}-songRequests`}> <QuestionStyles key={`${guest?.id}_songRequests`}>
<p> <p>
{guest.firstName} {guest.lastName}: {guest.firstName} {guest.lastName}:
</p> </p>
<label htmlFor={`${guest.id}-songRequests`}> <label htmlFor={`${guest.id}_songRequests`}>
<p className="sr-only">{`Enter song requests for ${guest.firstName} ${guest.lastName}`}</p> <p className="sr-only">{`Enter song requests for ${guest.firstName} ${guest.lastName}`}</p>
<textarea <textarea
name={`${guest.id}-songRequests`} name={`${guest.id}_songRequests`}
id={`${guest.id}-songRequests`} id={`${guest.id}_songRequests`}
cols="30" cols="30"
rows="2" rows="2"
placeholder="Example: Paint It Black - Rolling Stones" placeholder="Example: Paint It Black - Rolling Stones"
@ -420,7 +420,7 @@ export async function getServerSideProps({ params }) {
group.id = params.id; group.id = params.id;
group.guests = [ group.guests = [
{ {
id: 'TEST_GUEST_ID_12345', id: 'TEST-GUEST-ID-12345',
firstName: 'Test', firstName: 'Test',
lastName: 'Lastname', lastName: 'Lastname',
rsvpStatus: false, rsvpStatus: false,