Merge pull request #56 from ahoopes16/feature-full-breeze

Feature Full Breeze

src/components/RSVPForm.jsx

@@ -4,7 +4,7 @@ import { generateErrorModal, generateSuccessModal } from '../helpers'
 import { Fragment, useState } from 'react'
 import Button from './Button'
 import Checkbox from './Checkbox'
-import { FoodOptions, YesNoOptions } from './select-options'
+import { FoodOptions, YesNoOptions, YesNoValues } from './select-options'
 import SelectBox from './SelectBox'
 import TextBox from './TextBox'
 
@@ -42,15 +42,18 @@ function RSVPForm({ guest }) {
         const newRsvp = event.target.value
         setRsvp(newRsvp)
 
-        if (newRsvp === 'Yes') {
+        if (newRsvp === YesNoValues.YES) {
             setRsvpDate(new Date().toISOString().split('T')[0])
         } else {
             setRsvpDate(new Date('2000-01-01').toISOString().split('T')[0])
         }
     }
 
     const isSubmitDisabled = () => {
-        return !rsvp || !dinnerOption
+        if (!rsvp) return true
+        if (rsvp === YesNoValues.NO) return false
+
+        return !dinnerOption
     }
 
     const handleSubmit = async (event) => {
@@ -84,6 +87,7 @@ function RSVPForm({ guest }) {
 
     return (
         <form id='rsvp-form'>
+            <h4 className="underline pb-4">RSVP Information for {guest.firstName} {guest.lastName}</h4>
             <div className='flex flex-col items-start'>
                 <SelectBox className={fieldClass} label='RSVP' value={rsvp} onChange={toggleRSVP}>
                     <YesNoOptions />

src/components/select-options/FoodOptions.jsx

@@ -1,12 +1,18 @@
 import { Fragment } from 'react'
 
+export const FoodValues = {
+    NO_RESTRICTIONS: 'No Restrictions',
+    GLUTEN_FREE: 'GlutenFree',
+    VEGAN: 'Vegan',
+}
+
 function FoodOptions() {
     return (
         <Fragment>
             <option value="">--Please choose an option--</option>
-            <option value="No Restrictions">No Dietary Restrictions</option>
-            <option value="GlutenFree">Gluten-Free</option>
-            <option value="Vegan">Vegan</option>
+            <option value={FoodValues.NO_RESTRICTIONS}>No Dietary Restrictions</option>
+            <option value={FoodValues.GLUTEN_FREE}>Gluten-Free</option>
+            <option value={FoodValues.VEGAN}>Vegan</option>
         </Fragment>
     )
 }

src/components/select-options/YesNoOptions.jsx

@@ -1,11 +1,16 @@
 import { Fragment } from 'react'
 
+export const YesNoValues = {
+    YES: 'Yes',
+    NO: 'No'
+}
+
 function YesNoOptions() {
     return (
         <Fragment>
             <option value="">--Please choose an option--</option>
-            <option value="Yes">Yes</option>
-            <option value="No">No</option>
+            <option value={YesNoValues.YES}>Yes</option>
+            <option value={YesNoValues.NO}>No</option>
         </Fragment>
     )
 }

src/components/select-options/index.js

@@ -1,7 +1,9 @@
-import FoodOptions from './FoodOptions'
-import YesNoOptions from './YesNoOptions'
+import FoodOptions, { FoodValues } from './FoodOptions'
+import YesNoOptions, { YesNoValues } from './YesNoOptions'
 
 export {
     FoodOptions,
+    FoodValues,
     YesNoOptions,
+    YesNoValues,
 }