Function ViewCalendarEvent

components/calendar/ViewCalendarEvent.tsx:128–275

(
  { initialCalendarEvent, calendars, formData: formDataObject, error, notice }: ViewCalendarEventProps,
)

}

export default function ViewCalendarEvent(
  { initialCalendarEvent, calendars, formData: formDataObject, error, notice }: ViewCalendarEventProps,
) {
  const isDeleting = useSignal<boolean>(false);
  const calendarEvent = useSignal<CalendarEvent>(initialCalendarEvent);

  const formData = convertObjectToFormData(formDataObject);

  async function onClickDeleteEvent() {
    const message = calendarEvent.peek().isRecurring
      ? 'Are you sure you want to delete _all_ instances of this recurring event?'
      : 'Are you sure you want to delete this event?';
    if (confirm(message)) {
      if (isDeleting.value) {
        return;
      }

      isDeleting.value = true;

      try {
        const requestBody: DeleteRequestBody = {
          calendarIds: calendars.map((calendar) => calendar.uid!),
          calendarView: 'day',
          calendarStartDate: new Date().toISOString().substring(0, 10),
          calendarEventId: calendarEvent.value.uid!,
          calendarId: calendarEvent.value.calendarId,
        };
        const response = await fetch(`/api/calendar/delete-event`, {
          method: 'POST',
          body: JSON.stringify(requestBody),
        });
        const result = await response.json() as DeleteResponseBody;

        if (!result.success) {
          throw new Error('Failed to delete event!');
        }

        window.location.href = '/calendar';
      } catch (error) {
        console.error(error);
      }

      isDeleting.value = false;
    }
  }

  return (
    <>
      <section class='flex flex-row items-center justify-between mb-4'>
        <a href='/calendar' class='mr-2'>View calendar</a>
        <section class='flex items-center'>
          <button
            class='inline-block justify-center gap-x-1.5 rounded-md bg-red-800 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 ml-2'
            type='button'
            title='Delete event'
            onClick={() => onClickDeleteEvent()}
          >
            <img