pfadi-bussle/pages/booking/[uuid].tsx

import { GetServerSideProps } from 'next'
import React, { useEffect, useState } from 'react'
import Footer from '../../components/footer'
import Header from '../../components/header'
import { Booking } from '../../db/booking'
import { BOOKING_STATUS } from '../../db/bookingStatus'
import { getBookingByUUID } from '../../db/index'
import { dateFormatFrontend } from '../../helpers/date'

export const getServerSideProps: GetServerSideProps = async (context) => {
  const {
    res,
    params: { uuid: uuids },
  } = context
  const uuid = Array.isArray(uuids) ? uuids[0] : uuids
  const booking = await getBookingByUUID(uuid)

  if (!booking) {
    res.statusCode = 404
    res.end()
    return { props: {} }
  }

  // TODO: hack, not sure why _id is not serilizable
  const bookingJSON = JSON.parse(JSON.stringify(booking.toJSON()))
  return {
    props: { booking: bookingJSON },
  }
}

function getBookingStatus(booking: Booking) {
  switch (booking.status) {
    case BOOKING_STATUS.REQUESTED:
      return 'In Bearbeitung'
    case BOOKING_STATUS.CONFIRMED:
      return 'Bestätigt'
    case BOOKING_STATUS.REJECTED:
      return 'Abgewiesen'
    case BOOKING_STATUS.CANCELED:
      return 'Storniert'
    default:
      return 'Unbekannt - bitte kontaktieren Sie uns!'
  }
}

async function cancelBooking(booking: Booking) {
  const response = await fetch(`/api/booking/${booking.uuid}`, {
    method: 'PATCH',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json',
    },
    referrerPolicy: 'no-referrer',
    body: JSON.stringify({ status: BOOKING_STATUS.CANCELED }),
  })
  return response.json()
}

export default function ShowBooking({
  booking: bookingProp,
}: {
  booking: Booking
}) {
  const [booking, setBooking] = useState(bookingProp)

  // in case the props change, update the internal state
  useEffect(() => setBooking(bookingProp), [bookingProp])

  const onCancelBooking = async () => {
    if (!confirm('Soll die Buchung wirklich storniert werden?')) {
      return
    }
    try {
      const updatedBooking = await cancelBooking(booking)
      setBooking(updatedBooking)
    } catch (e) {
      alert(
        'Die Buchung konnte nicht storniert werden. Kontaktieren Sie uns bitt per E-Mail!'
      )
    }
  }

  return (
    <div className="mx-3 flex flex-col min-h-screen">
      <Header />
      <main className="flex-grow">
        <h2 className="text-3xl">Ihre Pfadi Bussle Buchung</h2>
        <div>
          <strong>Buchungsstatus:</strong> {getBookingStatus(booking)}
        </div>
        <div>
          <strong>Buchungszeitraum:</strong>{' '}
          {dateFormatFrontend(booking.startDate)} -{' '}
          {dateFormatFrontend(booking.endDate)}
        </div>
        {[BOOKING_STATUS.CONFIRMED, BOOKING_STATUS.REQUESTED].includes(
          booking.status
        ) && (
          <div className="my-6">
            <button onClick={onCancelBooking} className="btn btn-red">
              Buchung Stornieren
            </button>
          </div>
        )}
      </main>

      <Footer />
    </div>
  )
}