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

Update EventDetails and RSVPForm components with needed items functionality and improved styling

Browse Source
This commit is contained in:
Joshua Ryder
2025-04-29 19:56:17 -04:00
parent 4b800c849b
commit 765da97b52
2 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/EventDetails.tsx
View File

@@ -181,9 +181,9 @@ const EventDetails: React.FC = () => {
Bringing {rsvp.guest_count} guest{rsvp.guest_count !== 1 ? 's' : ''}: {rsvp.guest_names}
</Typography>
)}
{rsvp.items_bringing && (
<Typography variant="body2" color="text.secondary">
<strong>Items:</strong> {rsvp.items_bringing}
{rsvp.items_bringing && rsvp.items_bringing.length > 0 && (
<Typography>
<strong>Items:</strong> {Array.isArray(rsvp.items_bringing) ? rsvp.items_bringing.join(', ') : rsvp.items_bringing}
</Typography>
)}
</Box>

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

@@ -73,10 +73,9 @@ const RSVPForm: React.FC = () => {
const handleItemsChange = (e: SelectChangeEvent<string[]>) => {
const { value } = e.target;
const newValue = typeof value === 'string' ? value.split(',') : value;
setFormData(prev => ({
...prev,
items_bringing: Array.isArray(newValue) ? newValue : [],
items_bringing: Array.isArray(value) ? value : typeof value === 'string' ? value.split(',') : [],
}));
};
@@ -203,18 +202,21 @@ const RSVPForm: React.FC = () => {
<Select
multiple
name="items_bringing"
value={Array.isArray(formData.items_bringing) ? formData.items_bringing : []}
value={formData.items_bringing || []}
onChange={handleItemsChange}
input={<OutlinedInput label="What items are you bringing?" />}
renderValue={(selected) => (
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{Array.isArray(selected) ? selected.map((value) => (
<Typography key={value} variant="body2">
{value}
</Typography>
)) : null}
</Box>
)}
renderValue={(selected) => {
const selectedArray = Array.isArray(selected) ? selected : [];
return (
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{selectedArray.map((value) => (
<Typography key={value} variant="body2">
{value}
</Typography>
))}
</Box>
);
}}
>
{neededItems.map((item) => (
<MenuItem key={item} value={item}>