diff --git a/frontend/src/components/EventAdmin.tsx b/frontend/src/components/EventAdmin.tsx index 1a55e7a..f3f9a2f 100644 --- a/frontend/src/components/EventAdmin.tsx +++ b/frontend/src/components/EventAdmin.tsx @@ -52,6 +52,7 @@ interface Event { location: string; slug: string; needed_items?: string[] | string; + wallpaper?: string; } const EventAdmin: React.FC = () => { @@ -121,9 +122,8 @@ const EventAdmin: React.FC = () => { itemsBringing = rsvp.items_bringing; } - if (itemsBringing.length > 0) { - itemsBringing.forEach(item => claimed.add(item)); - } + // Add items to claimed set + itemsBringing.forEach(item => claimed.add(item)); } catch (e) { console.error('Error processing items for RSVP:', e); } @@ -134,12 +134,11 @@ const EventAdmin: React.FC = () => { }; }); - // Filter out claimed items from needed items - const availableItems = items.filter(item => !claimed.has(item)); - - setNeededItems(availableItems); - setClaimedItems(Array.from(claimed)); + // Update state with processed data setRsvps(processedRsvps); + setClaimedItems(Array.from(claimed)); + // Filter needed items to only show unclaimed ones + setNeededItems(items.filter(item => !claimed.has(item))); setLoading(false); } catch (error) { setError('Failed to load event data'); @@ -300,302 +299,312 @@ const EventAdmin: React.FC = () => { } return ( - - - - - {event.title} - Admin - - - - - {/* Add items status section */} - - - Items Status - - - - - Still Needed: - - - {neededItems.map((item: string, index: number) => ( - - ))} - {neededItems.length === 0 && ( - - All items have been claimed - - )} - - - - - Claimed Items: - - - {claimedItems.map((item: string, index: number) => ( - - ))} - {claimedItems.length === 0 && ( - - No items have been claimed yet - - )} - - + + + + + + {event.title} - Admin + + - - - RSVPs ({rsvps.length}) - - - - - - - Name - Attending - Guests - Items Bringing - Actions - - - - {rsvps.map((rsvp: RSVP) => ( - - {rsvp.name} - {rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)} - - {rsvp.bringing_guests === 'yes' ? - `${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` : - 'No' - } - - - {(() => { - let items: string[] = []; - try { - if (typeof rsvp.items_bringing === 'string') { - try { - const parsed = JSON.parse(rsvp.items_bringing); - items = Array.isArray(parsed) ? parsed : []; - } catch (e) { - console.error('Error parsing items_bringing JSON in table:', e); - } - } else if (Array.isArray(rsvp.items_bringing)) { - items = rsvp.items_bringing; - } - } catch (e) { - console.error('Error processing items in table:', e); - } - - return ( - - {items.length > 0 ? items.map((item: string, index: number) => ( - - )) : ( - - No items - - )} - - ); - })()} - - - + + Items Status + + + + + Still Needed: + + + {neededItems.map((item: string, index: number) => ( + handleEditRsvp(rsvp)} - sx={{ mr: 1 }} - > - - - handleDeleteRsvp(rsvp)} - > - - - - - ))} - -
- - - - - - - - setDeleteDialogOpen(false)} - > - Delete RSVP - - - Are you sure you want to delete {rsvpToDelete?.name}'s RSVP? - - - - - - - - - setEditDialogOpen(false)} - maxWidth="sm" - fullWidth - > - Edit RSVP - - - - - Attending - - - - Bringing Guests - - - {editForm.bringing_guests === 'yes' && ( - <> - - - - )} - - What items are you bringing? - - + ))} + {neededItems.length === 0 && ( + + All items have been claimed + + )} + + + + + Claimed Items: + + + {claimedItems.map((item: string, index: number) => ( + + ))} + {claimedItems.length === 0 && ( + + No items have been claimed yet + + )} + + + - - - - - - - setDeleteEventDialogOpen(false)} - > - Delete Event - - - Are you sure you want to delete "{event.title}"? This action cannot be undone. + + RSVPs ({rsvps.length}) - - All RSVPs associated with this event will also be deleted. - - - - - - - - + + + + + + Name + Attending + Guests + Items Bringing + Actions + + + + {rsvps.map((rsvp: RSVP) => ( + + {rsvp.name} + {rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)} + + {rsvp.bringing_guests === 'yes' ? + `${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` : + 'No' + } + + + {(() => { + let items: string[] = []; + try { + if (typeof rsvp.items_bringing === 'string') { + try { + const parsed = JSON.parse(rsvp.items_bringing); + items = Array.isArray(parsed) ? parsed : []; + } catch (e) { + console.error('Error parsing items_bringing JSON in table:', e); + } + } else if (Array.isArray(rsvp.items_bringing)) { + items = rsvp.items_bringing; + } + } catch (e) { + console.error('Error processing items in table:', e); + } + + return ( + + {items.length > 0 ? items.map((item: string, index: number) => ( + + )) : ( + + No items + + )} + + ); + })()} + + + handleEditRsvp(rsvp)} + sx={{ mr: 1 }} + > + + + handleDeleteRsvp(rsvp)} + > + + + + + ))} + +
+ + + + + + + + setDeleteDialogOpen(false)} + > + Delete RSVP + + + Are you sure you want to delete {rsvpToDelete?.name}'s RSVP? + + + + + + + + + setEditDialogOpen(false)} + maxWidth="sm" + fullWidth + > + Edit RSVP + + + + + Attending + + + + Bringing Guests + + + {editForm.bringing_guests === 'yes' && ( + <> + + + + )} + + What items are you bringing? + + + + + + + + + + + setDeleteEventDialogOpen(false)} + > + Delete Event + + + Are you sure you want to delete "{event.title}"? This action cannot be undone. + + + All RSVPs associated with this event will also be deleted. + + + + + + + + + ); }; diff --git a/frontend/src/components/EventView.tsx b/frontend/src/components/EventView.tsx index 0a24116..99f51a4 100644 --- a/frontend/src/components/EventView.tsx +++ b/frontend/src/components/EventView.tsx @@ -34,6 +34,7 @@ interface Event { location: string; slug: string; needed_items?: string[] | string; + wallpaper?: string; } const EventView: React.FC = () => { @@ -131,134 +132,144 @@ const EventView: React.FC = () => { } return ( - - - - - {event.title} - RSVPs - - - + + + + + + {event.title} - RSVPs + + + - - - Items Status - - - - - Still Needed: - - - {neededItems.map((item: string, index: number) => ( - - ))} - {neededItems.length === 0 && ( - - All items have been claimed - - )} + + + Items Status + + + + + Still Needed: + + + {neededItems.map((item: string, index: number) => ( + + ))} + {neededItems.length === 0 && ( + + All items have been claimed + + )} + - - - - Claimed Items: - - - {claimedItems.map((item: string, index: number) => ( - - ))} - {claimedItems.length === 0 && ( - - No items have been claimed yet - - )} + + + Claimed Items: + + + {claimedItems.map((item: string, index: number) => ( + + ))} + {claimedItems.length === 0 && ( + + No items have been claimed yet + + )} + - - - RSVPs ({rsvps.length}) - + + RSVPs ({rsvps.length}) + - - - - - Name - Attending - Guests - Items Bringing - - - - {rsvps.map((rsvp: RSVP) => ( - - {rsvp.name} - {rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)} - - {rsvp.bringing_guests === 'yes' ? - `${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` : - 'No' - } - - - - {(() => { - let items: string[] = []; - try { - if (typeof rsvp.items_bringing === 'string') { - try { - const parsed = JSON.parse(rsvp.items_bringing); - items = Array.isArray(parsed) ? parsed : []; - } catch (e) { - console.error('Error parsing items_bringing JSON in table:', e); - } - } else if (Array.isArray(rsvp.items_bringing)) { - items = rsvp.items_bringing; - } - } catch (e) { - console.error('Error processing items in table:', e); - } - - return items.length > 0 ? items.map((item: string, index: number) => ( - - )) : ( - - No items - - ); - })()} - - + +
+ + + Name + Attending + Guests + Items Bringing - ))} - -
- - - + + + {rsvps.map((rsvp: RSVP) => ( + + {rsvp.name} + {rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)} + + {rsvp.bringing_guests === 'yes' ? + `${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` : + 'No' + } + + + + {(() => { + let items: string[] = []; + try { + if (typeof rsvp.items_bringing === 'string') { + try { + const parsed = JSON.parse(rsvp.items_bringing); + items = Array.isArray(parsed) ? parsed : []; + } catch (e) { + console.error('Error parsing items_bringing JSON in table:', e); + } + } else if (Array.isArray(rsvp.items_bringing)) { + items = rsvp.items_bringing; + } + } catch (e) { + console.error('Error processing items in table:', e); + } + + return items.length > 0 ? items.map((item: string, index: number) => ( + + )) : ( + + No items + + ); + })()} + + + + ))} + + + + + + ); }; diff --git a/frontend/src/components/RSVPForm.tsx b/frontend/src/components/RSVPForm.tsx index 7c592d6..2c5124b 100644 --- a/frontend/src/components/RSVPForm.tsx +++ b/frontend/src/components/RSVPForm.tsx @@ -45,6 +45,7 @@ const RSVPForm: React.FC = () => { const [error, setError] = useState(null); const [success, setSuccess] = useState(false); const navigate = useNavigate(); + const [event, setEvent] = useState(null); useEffect(() => { const fetchEventDetails = async () => { @@ -86,6 +87,7 @@ const RSVPForm: React.FC = () => { setNeededItems(availableItems); setClaimedItems(Array.from(claimed)); + setEvent(eventResponse.data); } catch (error) { console.error('Error fetching event details:', error); setError('Failed to load event details'); @@ -211,127 +213,137 @@ const RSVPForm: React.FC = () => { } return ( - - - - RSVP Form - - - {error && ( - - {error} + + + + + RSVP Form - )} - - - - - - Are you attending? - - - - {formData.attending === 'yes' && ( - <> - - Are you bringing any guests? - - - - {formData.bringing_guests === 'yes' && ( - <> - - - - - )} - - {neededItems.length > 0 && ( - - What items are you bringing? - - - )} - + + {error && ( + + {error} + )} - - - - + + + + + Are you attending? + + + + {formData.attending === 'yes' && ( + <> + + Are you bringing any guests? + + + + {formData.bringing_guests === 'yes' && ( + <> + + + + + )} + + {neededItems.length > 0 && ( + + What items are you bringing? + + + )} + + )} + + + + + + ); };