d0395abc3a
- Removed duplicate FormData.append() call for event_conclusion_message - The field was being appended twice: once in the forEach loop and once explicitly - This caused the backend to receive malformed data resulting in [object Object] - Now the field is only appended once through the normal form processing loop
476 lines
15 KiB
TypeScript
476 lines
15 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
Box,
|
|
Button,
|
|
TextField,
|
|
Typography,
|
|
Container,
|
|
Paper,
|
|
Chip,
|
|
IconButton,
|
|
styled,
|
|
Checkbox,
|
|
FormControlLabel,
|
|
Divider, // Added Divider for visual separation
|
|
} from '@mui/material';
|
|
import WallpaperIcon from '@mui/icons-material/Wallpaper';
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
import AddIcon from '@mui/icons-material/Add';
|
|
import axios from 'axios';
|
|
|
|
const DarkTextField = styled(TextField)({
|
|
'& .MuiOutlinedInput-root': {
|
|
'& fieldset': {
|
|
borderColor: 'rgba(255, 255, 255, 0.23)',
|
|
},
|
|
'&:hover fieldset': {
|
|
borderColor: 'rgba(255, 255, 255, 0.4)',
|
|
},
|
|
'&.Mui-focused fieldset': {
|
|
borderColor: '#90caf9',
|
|
},
|
|
},
|
|
'& .MuiInputLabel-root': {
|
|
color: 'rgba(255, 255, 255, 0.7)',
|
|
},
|
|
'& .MuiOutlinedInput-input': {
|
|
color: 'rgba(255, 255, 255, 0.9)',
|
|
},
|
|
});
|
|
|
|
interface FormData {
|
|
title: string;
|
|
description: string;
|
|
date: string;
|
|
location: string;
|
|
needed_items: string[];
|
|
rsvp_cutoff_date: string;
|
|
max_guests_per_rsvp: number;
|
|
email_notifications_enabled: boolean;
|
|
email_recipients: string;
|
|
event_conclusion_message: string; // Renamed from thank_you_message
|
|
event_conclusion_email_enabled: boolean; // Added state for event conclusion email toggle
|
|
}
|
|
|
|
const EventForm: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
const [formData, setFormData] = useState<FormData>({
|
|
title: '',
|
|
description: '',
|
|
date: '',
|
|
location: '',
|
|
needed_items: [],
|
|
rsvp_cutoff_date: '',
|
|
max_guests_per_rsvp: 0,
|
|
email_notifications_enabled: false,
|
|
email_recipients: '',
|
|
event_conclusion_message: '', // Renamed state
|
|
event_conclusion_email_enabled: false, // Initialize new state
|
|
});
|
|
const [wallpaper, setWallpaper] = useState<File | null>(null);
|
|
const [currentItem, setCurrentItem] = useState('');
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const fileInputRef = React.useRef<HTMLInputElement>(null);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[name]: value,
|
|
}));
|
|
};
|
|
|
|
const handleWallpaperClick = () => {
|
|
fileInputRef.current?.click();
|
|
};
|
|
|
|
const handleWallpaperChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (e.target.files && e.target.files[0]) {
|
|
setWallpaper(e.target.files[0]);
|
|
}
|
|
};
|
|
|
|
const handleItemChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setCurrentItem(e.target.value);
|
|
};
|
|
|
|
const handleAddItem = () => {
|
|
if (currentItem.trim()) {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
needed_items: [...prev.needed_items, currentItem.trim()],
|
|
}));
|
|
setCurrentItem('');
|
|
}
|
|
};
|
|
|
|
const handleRemoveItem = (index: number) => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
needed_items: prev.needed_items.filter((_, i) => i !== index),
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
try {
|
|
const submitData = new FormData();
|
|
|
|
// Append all form fields
|
|
Object.entries(formData).forEach(([key, value]) => {
|
|
if (key === 'needed_items') {
|
|
submitData.append(key, JSON.stringify(value));
|
|
} else {
|
|
submitData.append(key, String(value));
|
|
}
|
|
});
|
|
|
|
|
|
// Append wallpaper if selected
|
|
if (wallpaper) {
|
|
submitData.append('wallpaper', wallpaper);
|
|
}
|
|
|
|
console.log('Submitting event creation data:', Object.fromEntries(submitData.entries())); // Add logging
|
|
|
|
await axios.post('/api/events', submitData, {
|
|
headers: {
|
|
'Content-Type': 'multipart/form-data',
|
|
},
|
|
});
|
|
navigate('/');
|
|
} catch (error) {
|
|
setError('Failed to create event. Please try again.');
|
|
console.error('Error creating event:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Container maxWidth="sm">
|
|
<Paper
|
|
elevation={3}
|
|
sx={{
|
|
p: 4,
|
|
mt: 4,
|
|
bgcolor: 'rgba(22, 28, 36, 0.95)',
|
|
backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))'
|
|
}}
|
|
>
|
|
<Typography variant="h4" component="h2" gutterBottom color="primary" align="center" sx={{ color: '#90caf9' }}>
|
|
Create New Event
|
|
</Typography>
|
|
|
|
{error && (
|
|
<Typography color="error" align="center" sx={{ mb: 2 }}>
|
|
{error}
|
|
</Typography>
|
|
)}
|
|
|
|
<Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
|
{/* Part 1: Basic Event Details */}
|
|
<Box>
|
|
<Typography variant="h6" gutterBottom sx={{ color: 'rgba(255, 255, 255, 0.9)' }}>
|
|
Basic Event Details
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
|
<DarkTextField
|
|
fullWidth
|
|
label="Title"
|
|
name="title"
|
|
value={formData.title}
|
|
onChange={handleChange}
|
|
variant="outlined"
|
|
required
|
|
/>
|
|
<DarkTextField
|
|
fullWidth
|
|
label="Description"
|
|
name="description"
|
|
value={formData.description}
|
|
onChange={handleChange}
|
|
variant="outlined"
|
|
multiline
|
|
rows={4}
|
|
/>
|
|
<DarkTextField
|
|
fullWidth
|
|
label="Location"
|
|
name="location"
|
|
value={formData.location}
|
|
onChange={handleChange}
|
|
variant="outlined"
|
|
required
|
|
/>
|
|
<DarkTextField
|
|
fullWidth
|
|
label="Date and Time"
|
|
name="date"
|
|
type="datetime-local"
|
|
value={formData.date}
|
|
onChange={handleChange}
|
|
variant="outlined"
|
|
required
|
|
InputLabelProps={{
|
|
shrink: true,
|
|
}}
|
|
/>
|
|
<DarkTextField
|
|
fullWidth
|
|
label="RSVP Cut-off Date"
|
|
name="rsvp_cutoff_date"
|
|
type="datetime-local"
|
|
value={formData.rsvp_cutoff_date}
|
|
onChange={handleChange}
|
|
variant="outlined"
|
|
InputLabelProps={{
|
|
shrink: true,
|
|
}}
|
|
/>
|
|
<DarkTextField
|
|
fullWidth
|
|
label="Maximum Additional Guests Per RSVP"
|
|
name="max_guests_per_rsvp"
|
|
type="number"
|
|
value={formData.max_guests_per_rsvp}
|
|
onChange={(e) => {
|
|
const value = parseInt(e.target.value);
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
max_guests_per_rsvp: isNaN(value) ? 0 : value,
|
|
}));
|
|
}}
|
|
variant="outlined"
|
|
helperText="Set to 0 for no additional guests, -1 for unlimited"
|
|
inputProps={{ min: -1 }}
|
|
/>
|
|
{/* Needed Items moved here */}
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
|
<Typography variant="subtitle1" sx={{ color: 'rgba(255, 255, 255, 0.7)' }}>
|
|
Needed Items
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', gap: 1 }}>
|
|
<DarkTextField
|
|
fullWidth
|
|
label="Add Item"
|
|
value={currentItem}
|
|
onChange={handleItemChange}
|
|
variant="outlined"
|
|
size="small"
|
|
/>
|
|
<Button
|
|
variant="contained"
|
|
onClick={handleAddItem}
|
|
disabled={!currentItem.trim()}
|
|
startIcon={<AddIcon />}
|
|
sx={{
|
|
bgcolor: '#90caf9',
|
|
'&:hover': {
|
|
bgcolor: '#42a5f5',
|
|
},
|
|
'&.Mui-disabled': {
|
|
bgcolor: 'rgba(144, 202, 249, 0.3)',
|
|
}
|
|
}}
|
|
>
|
|
Add
|
|
</Button>
|
|
</Box>
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
|
{formData.needed_items.map((item, index) => (
|
|
<Chip
|
|
key={index}
|
|
label={item}
|
|
onDelete={() => handleRemoveItem(index)}
|
|
sx={{
|
|
bgcolor: 'rgba(144, 202, 249, 0.2)',
|
|
color: 'rgba(255, 255, 255, 0.9)',
|
|
'& .MuiChip-deleteIcon': {
|
|
color: 'rgba(255, 255, 255, 0.7)',
|
|
'&:hover': {
|
|
color: 'rgba(255, 255, 255, 0.9)',
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Divider sx={{ borderColor: 'rgba(255, 255, 255, 0.12)' }} />
|
|
|
|
{/* Part 2: Customization */}
|
|
<Box>
|
|
<Typography variant="h6" gutterBottom sx={{ color: 'rgba(255, 255, 255, 0.9)' }}>
|
|
Customization
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
|
<Typography variant="subtitle1" gutterBottom sx={{ color: 'rgba(255, 255, 255, 0.7)' }}>
|
|
Event Wallpaper
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
|
<Button
|
|
variant="outlined"
|
|
component="span"
|
|
startIcon={<WallpaperIcon />}
|
|
onClick={handleWallpaperClick}
|
|
sx={{
|
|
flexGrow: 1,
|
|
borderColor: '#64b5f6',
|
|
color: '#64b5f6',
|
|
'&:hover': {
|
|
borderColor: '#90caf9',
|
|
backgroundColor: 'rgba(100, 181, 246, 0.08)',
|
|
}
|
|
}}
|
|
>
|
|
{wallpaper ? 'Change Wallpaper' : 'Upload Wallpaper'}
|
|
</Button>
|
|
{wallpaper && (
|
|
<IconButton
|
|
color="error"
|
|
onClick={() => setWallpaper(null)}
|
|
size="small"
|
|
sx={{
|
|
color: '#f44336',
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(244, 67, 54, 0.08)',
|
|
}
|
|
}}
|
|
>
|
|
<DeleteIcon />
|
|
</IconButton>
|
|
)}
|
|
</Box>
|
|
{wallpaper && (
|
|
<Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.6)', mt: 1 }}>
|
|
Selected: {wallpaper.name}
|
|
</Typography>
|
|
)}
|
|
<input
|
|
type="file"
|
|
ref={fileInputRef}
|
|
onChange={handleWallpaperChange}
|
|
accept="image/jpeg,image/png,image/gif"
|
|
style={{ display: 'none' }}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Divider sx={{ borderColor: 'rgba(255, 255, 255, 0.12)' }} />
|
|
|
|
{/* Part 3: Notifications and Messaging */}
|
|
<Box>
|
|
<Typography variant="h6" gutterBottom sx={{ color: 'rgba(255, 255, 255, 0.9)' }}>
|
|
Notifications and Messaging
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
checked={formData.email_notifications_enabled}
|
|
onChange={(e) => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
email_notifications_enabled: e.target.checked,
|
|
}));
|
|
}}
|
|
sx={{
|
|
color: 'rgba(255, 255, 255, 0.7)',
|
|
'&.Mui-checked': {
|
|
color: '#90caf9',
|
|
},
|
|
}}
|
|
/>
|
|
}
|
|
label="Enable Email Notifications"
|
|
sx={{
|
|
color: 'rgba(255, 255, 255, 0.9)',
|
|
}}
|
|
/>
|
|
|
|
{formData.email_notifications_enabled && (
|
|
<DarkTextField
|
|
fullWidth
|
|
label="Email Recipients (comma separated)"
|
|
name="email_recipients"
|
|
value={formData.email_recipients}
|
|
onChange={handleChange}
|
|
variant="outlined"
|
|
placeholder="email1@example.com, email2@example.com"
|
|
helperText="Enter email addresses separated by commas"
|
|
sx={{ mt: 2 }} // Added margin top for spacing
|
|
/>
|
|
)}
|
|
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
checked={formData.event_conclusion_email_enabled}
|
|
onChange={(e) => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
event_conclusion_email_enabled: e.target.checked,
|
|
}));
|
|
}}
|
|
sx={{
|
|
color: 'rgba(255, 255, 255, 0.7)',
|
|
'&.Mui-checked': {
|
|
color: '#90caf9',
|
|
},
|
|
}}
|
|
/>
|
|
}
|
|
label="Enable Event Conclusion Email"
|
|
sx={{
|
|
color: 'rgba(255, 255, 255, 0.9)',
|
|
mt: 2, // Added margin top for spacing
|
|
}}
|
|
/>
|
|
|
|
{formData.event_conclusion_email_enabled && (
|
|
<DarkTextField
|
|
fullWidth
|
|
label="Event conclusion message"
|
|
name="event_conclusion_message" // Corrected name prop
|
|
value={formData.event_conclusion_message} // Corrected value prop
|
|
onChange={handleChange}
|
|
variant="outlined"
|
|
multiline
|
|
rows={4}
|
|
helperText="This message will be sent to attendees who opted for email notifications the day after the event."
|
|
sx={{ mt: 2 }} // Added margin top for spacing
|
|
/>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
|
|
<Button
|
|
type="submit"
|
|
variant="contained"
|
|
color="primary"
|
|
size="large"
|
|
sx={{
|
|
mt: 2,
|
|
bgcolor: '#90caf9',
|
|
'&:hover': {
|
|
bgcolor: '#42a5f5',
|
|
}
|
|
}}
|
|
>
|
|
Create Event
|
|
</Button>
|
|
</Box>
|
|
</Paper>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default EventForm;
|