diff --git a/src/components/RSVP.tsx b/src/components/RSVP.tsx index d183dff..7b72609 100644 --- a/src/components/RSVP.tsx +++ b/src/components/RSVP.tsx @@ -4,6 +4,7 @@ import "../styles/global.css"; interface FormData { name: string; + attending: boolean | null; dietaryRestrictions: string; notes: string; } @@ -16,6 +17,7 @@ interface ApiResponse { const RSVPForm = () => { const [formData, setFormData] = useState({ name: "", + attending: null, dietaryRestrictions: "", notes: "", }); @@ -23,7 +25,7 @@ const RSVPForm = () => { const [error, setError] = useState(null); const [success, setSuccess] = useState(false); - const isFormValid = formData.name.trim().length > 0; + const isFormValid = formData.name.trim().length > 0 && formData.attending !== null; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); @@ -34,9 +36,8 @@ const RSVPForm = () => { setSuccess(false); try { - // Create an AbortController for timeout const controller = new AbortController(); - const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout + const timeoutId = setTimeout(() => controller.abort(), 10000); const response = await fetchWithAuth("/api/rsvp", { method: "POST", @@ -63,6 +64,7 @@ const RSVPForm = () => { setFormData({ name: "", + attending: null, dietaryRestrictions: "", notes: "", }); @@ -80,7 +82,6 @@ const RSVPForm = () => { } }; - return (
@@ -147,30 +148,68 @@ const RSVPForm = () => { />
- {/* Dietary Restrictions Input */} + {/* Attendance Selection */}
-