🔴 Problem
In the event booking sidebar component (BookEvent), users input their email to register. If a user tries to book the same event twice, MongoDB correctly prevents duplicates due to a unique index ({ eventId: 1, email: 1 }). However, the frontend does not show any error feedback to the user; it only logs console.error and exceptions to PostHog. The user is left with no feedback. Furthermore, the submit button has no loading state, meaning users could double-click it during a slow database operation.
🔍 Technical Context
In
BookEvent.tsx:L11-L23
:
typescript
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const { success } = await createBooking({ eventId, slug, email });
if(success) {
setSubmitted(true);
posthog.capture('event_booked', { eventId, slug, email })
} else {
console.error('Booking creation failed')
posthog.captureException('Booking creation failed')
}
}
✅ Requirements & Expected Behavior
Catch the specific error string returned by createBooking (e.g. "You have already booked this event" or general "Failed to create booking").
Display a descriptive red/error text message underneath the form field.
Manage a loading/pending state (e.g., isPending or isSubmitting) using useState or React's useTransition.
While the server action is processing:
The submit button should be disabled.
The submit button text should change to "Submitting...".
The input field should be disabled.
If the submission succeeds, clear any previous errors and show the success message.
🛠️ Suggested Steps for Contributors
Add error and loading states in
BookEvent.tsx
:
typescript
const [error, setError] = useState<string | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
Update the handleSubmit logic to capture and display the error:
typescript
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
setError(null);
const response = await createBooking({ eventId, slug, email });
if (response.success) {
setSubmitted(true);
posthog.capture('event_booked', { eventId, slug, email });
} else {
setError(response.error || "An unexpected error occurred. Please try again.");
posthog.captureException('Booking creation failed');
}
setIsSubmitting(false);
};
Update JSX markup: disable controls and conditionally render {error &&
{error}
}.
🔴 Problem
In the event booking sidebar component (BookEvent), users input their email to register. If a user tries to book the same event twice, MongoDB correctly prevents duplicates due to a unique index ({ eventId: 1, email: 1 }). However, the frontend does not show any error feedback to the user; it only logs console.error and exceptions to PostHog. The user is left with no feedback. Furthermore, the submit button has no loading state, meaning users could double-click it during a slow database operation.
🔍 Technical Context
In
BookEvent.tsx:L11-L23
:
typescript
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const { success } = await createBooking({ eventId, slug, email });
if(success) {
setSubmitted(true);
posthog.capture('event_booked', { eventId, slug, email })
} else {
console.error('Booking creation failed')
posthog.captureException('Booking creation failed')
}
}
✅ Requirements & Expected Behavior
Catch the specific error string returned by createBooking (e.g. "You have already booked this event" or general "Failed to create booking").
Display a descriptive red/error text message underneath the form field.
Manage a loading/pending state (e.g., isPending or isSubmitting) using useState or React's useTransition.
While the server action is processing:
The submit button should be disabled.
The submit button text should change to "Submitting...".
The input field should be disabled.
If the submission succeeds, clear any previous errors and show the success message.
🛠️ Suggested Steps for Contributors
Add error and loading states in
BookEvent.tsx
:
typescript
const [error, setError] = useState<string | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
Update the handleSubmit logic to capture and display the error:
typescript
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
setError(null);
};
Update JSX markup: disable controls and conditionally render {error &&
{error}
}.