RyderTech/rsvp-manager
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Update RSVP form with Material-UI components and improved styling

Browse Source
This commit is contained in:
Your Name
2025-04-29 14:05:13 -04:00
parent e4e20c5bcf
commit 55aae01652
1 changed files with 116 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
frontend/src/components/RSVPForm.tsx
View File

@@ -1,11 +1,24 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import axios from 'axios'; import axios from 'axios';
import {
Box,
Paper,
Typography,
TextField,
Button,
FormControl,
InputLabel,
Select,
MenuItem,
SelectChangeEvent,
Container,
} from '@mui/material';
interface RSVPFormData { interface RSVPFormData {
name: string; name: string;
attending: boolean; attending: string;
bringing_guests: boolean; bringing_guests: string;
guest_count: number; guest_count: number;
guest_names: string; guest_names: string;
items_bringing: string; items_bringing: string;
@@ -15,8 +28,8 @@ const RSVPForm: React.FC = () => {
const { slug } = useParams<{ slug: string }>(); const { slug } = useParams<{ slug: string }>();
const [formData, setFormData] = useState<RSVPFormData>({ const [formData, setFormData] = useState<RSVPFormData>({
name: '', name: '',
attending: false, attending: '',
bringing_guests: false, bringing_guests: '',
guest_count: 0, guest_count: 0,
guest_names: '', guest_names: '',
items_bringing: '' items_bringing: ''
@@ -26,10 +39,18 @@ const RSVPForm: React.FC = () => {
const [success, setSuccess] = useState(false); const [success, setSuccess] = useState(false);
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value, type } = e.target; const { name, value } = e.target;
setFormData(prev => ({ setFormData(prev => ({
...prev, ...prev,
[name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value [name]: value
}));
};
const handleSelectChange = (e: SelectChangeEvent) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
})); }));
}; };
@@ -50,108 +71,126 @@ const RSVPForm: React.FC = () => {
if (success) { if (success) {
return ( return (
<div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md"> <Container maxWidth="sm">
<h2 className="text-2xl font-bold mb-4">Thank You!</h2> <Paper elevation={3} sx={{ p: 4, mt: 4, textAlign: 'center' }}>
<p>Your RSVP has been submitted successfully.</p> <Typography variant="h4" component="h2" gutterBottom color="primary">
</div> Thank You!
</Typography>
<Typography variant="body1">
Your RSVP has been submitted successfully.
</Typography>
</Paper>
</Container>
); );
} }
return ( return (
<div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md"> <Container maxWidth="sm">
<h2 className="text-2xl font-bold mb-4">RSVP Form</h2> <Paper elevation={3} sx={{ p: 4, mt: 4 }}>
{error && <div className="text-red-500 mb-4">{error}</div>} <Typography variant="h4" component="h2" gutterBottom color="primary" align="center">
RSVP Form
<form onSubmit={handleSubmit}> </Typography>
<div className="mb-4">
<label className="block text-gray-700 mb-2">Name</label> {error && (
<input <Typography color="error" align="center" sx={{ mb: 2 }}>
type="text" {error}
</Typography>
)}
<Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
<TextField
label="Name"
name="name" name="name"
value={formData.name} value={formData.name}
onChange={handleChange} onChange={handleChange}
required required
className="w-full px-3 py-2 border rounded-md" fullWidth
variant="outlined"
/> />
</div>
<div className="mb-4"> <FormControl fullWidth>
<label className="flex items-center"> <InputLabel>Are you attending?</InputLabel>
<input <Select
type="checkbox"
name="attending" name="attending"
checked={formData.attending} value={formData.attending}
onChange={handleChange} onChange={handleSelectChange}
className="mr-2" label="Are you attending?"
/> required
Are you attending? >
</label> <MenuItem value="yes">Yes</MenuItem>
</div> <MenuItem value="no">No</MenuItem>
</Select>
</FormControl>
{formData.attending && ( {formData.attending === 'yes' && (
<> <>
<div className="mb-4"> <FormControl fullWidth>
<label className="flex items-center"> <InputLabel>Are you bringing any guests?</InputLabel>
<input <Select
type="checkbox"
name="bringing_guests" name="bringing_guests"
checked={formData.bringing_guests} value={formData.bringing_guests}
onChange={handleChange} onChange={handleSelectChange}
className="mr-2" label="Are you bringing any guests?"
/> >
Are you bringing any guests? <MenuItem value="yes">Yes</MenuItem>
</label> <MenuItem value="no">No</MenuItem>
</div> </Select>
</FormControl>
{formData.bringing_guests && ( {formData.bringing_guests === 'yes' && (
<> <>
<div className="mb-4"> <TextField
<label className="block text-gray-700 mb-2">Number of Guests</label> label="Number of Guests"
<input
type="number"
name="guest_count" name="guest_count"
type="number"
value={formData.guest_count} value={formData.guest_count}
onChange={handleChange} onChange={handleChange}
min="1" fullWidth
className="w-full px-3 py-2 border rounded-md" variant="outlined"
inputProps={{ min: 1 }}
/> />
</div>
<div className="mb-4"> <TextField
<label className="block text-gray-700 mb-2">Guest Names</label> label="Guest Names"
<textarea
name="guest_names" name="guest_names"
value={formData.guest_names} value={formData.guest_names}
onChange={handleChange} onChange={handleChange}
multiline
rows={3}
fullWidth
variant="outlined"
placeholder="Please list the names of your guests" placeholder="Please list the names of your guests"
className="w-full px-3 py-2 border rounded-md"
/> />
</div> </>
</> )}
)}
<div className="mb-4"> <TextField
<label className="block text-gray-700 mb-2">What items are you bringing?</label> label="What items are you bringing?"
<textarea
name="items_bringing" name="items_bringing"
value={formData.items_bringing} value={formData.items_bringing}
onChange={handleChange} onChange={handleChange}
multiline
rows={3}
fullWidth
variant="outlined"
placeholder="List any items you plan to bring to the event" placeholder="List any items you plan to bring to the event"
className="w-full px-3 py-2 border rounded-md"
/> />
</div> </>
</> )}
)}
<button <Button
type="submit" type="submit"
disabled={isSubmitting} variant="contained"
className="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 disabled:bg-blue-300" color="primary"
> size="large"
{isSubmitting ? 'Submitting...' : 'Submit RSVP'} disabled={isSubmitting}
</button> sx={{ mt: 2 }}
</form> >
</div> {isSubmitting ? 'Submitting...' : 'Submit RSVP'}
</Button>
</Box>
</Paper>
</Container>
); );
}; };