From 765da97b520dd822b0cb66ff5cce21686be6a9b5 Mon Sep 17 00:00:00 2001
From: Starstrike <ryderjj89@outlook.com>
Date: Tue, 29 Apr 2025 19:56:17 -0400
Subject: [PATCH] Update EventDetails and RSVPForm components with needed items
 functionality and improved styling

---
 frontend/src/components/EventDetails.tsx |  6 +++---
 frontend/src/components/RSVPForm.tsx     | 26 +++++++++++++-----------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/EventDetails.tsx b/frontend/src/components/EventDetails.tsx
index e1526a5..39a550b 100644
--- a/frontend/src/components/EventDetails.tsx
+++ b/frontend/src/components/EventDetails.tsx
@@ -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>
diff --git a/frontend/src/components/RSVPForm.tsx b/frontend/src/components/RSVPForm.tsx
index 3d61861..79289e6 100644
--- a/frontend/src/components/RSVPForm.tsx
+++ b/frontend/src/components/RSVPForm.tsx
@@ -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}>