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

Fix: Add type safety and improve items handling in both components

Browse Source
This commit is contained in:
Joshua Ryder
2025-04-30 11:05:46 -04:00
parent 7522b04334
commit c0554d2575
3 changed files with 58 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/components/EventAdmin.tsx
View File

@@ -198,10 +198,22 @@ const EventAdmin: React.FC = () => {
if (!rsvpToEdit) return;
try {
await axios.put(`/api/events/${slug}/rsvps/${rsvpToEdit.id}`, editForm);
const submissionData = {
...editForm,
items_bringing: JSON.stringify(editForm.items_bringing)
};
await axios.put(`/api/events/${slug}/rsvps/${rsvpToEdit.id}`, submissionData);
// Update the local state
const updatedRsvps = rsvps.map((r: RSVP) => r.id === rsvpToEdit.id ? { ...r, ...editForm } : r);
const updatedRsvps = rsvps.map((r: RSVP) =>
r.id === rsvpToEdit.id
? {
...r,
...editForm,
items_bringing: editForm.items_bringing // Keep as array in local state
}
: r
);
// Recalculate claimed items
const claimed = new Set<string>();
@@ -222,6 +234,7 @@ const EventAdmin: React.FC = () => {
: [];
} catch (e) {
console.error('Error parsing event needed_items:', e);
allItems = [];
}
}
@@ -346,12 +359,23 @@ const EventAdmin: React.FC = () => {
</TableCell>
<TableCell>
{(() => {
const items = typeof rsvp.items_bringing === 'string'
? JSON.parse(rsvp.items_bringing)
: Array.isArray(rsvp.items_bringing)
? rsvp.items_bringing
const items = Array.isArray(rsvp.items_bringing)
? rsvp.items_bringing
: typeof rsvp.items_bringing === 'string'
? JSON.parse(rsvp.items_bringing)
: [];
return items.join(', ');
return (
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{items.map((item, index) => (
<Chip
key={index}
label={item}
color="primary"
size="small"
/>
))}
</Box>
);
})()}
</TableCell>
<TableCell>
@@ -474,7 +498,7 @@ const EventAdmin: React.FC = () => {
</Box>
)}
>
{[...new Set([...neededItems, ...editForm.items_bringing])].map((item) => (
{Array.from(new Set([...neededItems, ...editForm.items_bringing])).map((item) => (
<MenuItem key={item} value={item}>
<Checkbox checked={editForm.items_bringing.includes(item)} />
<ListItemText

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

@@ -16,6 +16,7 @@ import {
Checkbox,
ListItemText,
OutlinedInput,
Chip,
} from '@mui/material';
interface RSVPFormData {
@@ -51,7 +52,6 @@ const RSVPForm: React.FC = () => {
axios.get(`/api/events/${slug}`),
axios.get(`/api/events/${slug}/rsvps`)
]);
console.log('API Response:', eventResponse.data);
// Process needed items
let items: string[] = [];
@@ -86,7 +86,6 @@ const RSVPForm: React.FC = () => {
// Filter out claimed items
const availableItems = items.filter(item => !claimed.has(item));
console.log('Available items:', availableItems);
setNeededItems(availableItems);
setClaimedItems(Array.from(claimed));
} catch (error) {
@@ -98,10 +97,6 @@ const RSVPForm: React.FC = () => {
fetchEventDetails();
}, [slug]);
useEffect(() => {
console.log('Current neededItems state:', neededItems);
}, [neededItems]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setFormData(prev => ({
@@ -119,14 +114,8 @@ const RSVPForm: React.FC = () => {
};
const handleItemsChange = (e: SelectChangeEvent<string[]>) => {
const value = e.target.value;
console.log('Select onChange value:', value);
const itemsArray = Array.isArray(value)
? value
: typeof value === 'string'
? value.split(',').map((item: string): string => item.trim())
: [];
console.log('Processed items array:', itemsArray);
const { value } = e.target;
const itemsArray = Array.isArray(value) ? value : [];
setFormData(prev => ({
...prev,
items_bringing: itemsArray
@@ -139,7 +128,11 @@ const RSVPForm: React.FC = () => {
setError(null);
try {
await axios.post(`/api/events/${slug}/rsvp`, formData);
const submissionData = {
...formData,
items_bringing: JSON.stringify(formData.items_bringing)
};
await axios.post(`/api/events/${slug}/rsvp`, submissionData);
setSuccess(true);
} catch (err) {
setError('Failed to submit RSVP. Please try again.');
@@ -256,17 +249,20 @@ 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) => {
if (!Array.isArray(selected) || selected.length === 0) return '';
return selected.join(', ');
}}
renderValue={(selected) => (
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{selected.map((value) => (
<Chip key={value} label={value} />
))}
</Box>
)}
>
{neededItems.map((item) => (
<MenuItem key={item} value={item}>
<Checkbox checked={Array.isArray(formData.items_bringing) && formData.items_bringing.includes(item)} />
<Checkbox checked={formData.items_bringing.includes(item)} />
<ListItemText primary={item} />
</MenuItem>
))}

12
frontend/tsconfig.json
View File

@@ -1,7 +1,11 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"target": "es2015",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
@@ -16,5 +20,7 @@
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
"include": [
"src"
]
}