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

import React, { useEffect, useState } from 'react'
import Link from 'next/link'
import Footer from '../../../components/footer'
import Header from '../../../components/header'
import { Booking } from '../../../db/booking'
import { loadBookingData, storeBookingData } from '../../../helpers/storage'
import { getServerSideBooking } from '../../../lib/getServerSideProps'

export const getServerSideProps = getServerSideBooking

export default function ShowBookingStored({ booking }: { booking: Booking }) {
  const [storedBookingData, setStoredBookingData] = useState(null)
  const [bookingDataStored, setBookingDataStored] = useState(false)

  useEffect(() => setStoredBookingData(loadBookingData()), [])

  const store = () => {
    storeBookingData(booking)
    setBookingDataStored(true)
  }

  return (
    <>
      <Header />
      <main className="main">
        <h3 className="text-lg mb-3">Vielen Dank für die Buchungsanfrage</h3>
        <p className="mb-6">
          Nach Prüfung bestätigen wir die Buchung zeitnah per E-Mail.
        </p>
        <p>
          Den{' '}
          <Link href={`/booking/${booking.uuid}`}>
            <a className="link">Link</a>
          </Link>{' '}
          zur Buchung schicken wir Dir auch per E-Mail. Dort kann die Buchung
          auch jederzeit storniert werden.
        </p>
        {!storedBookingData && !bookingDataStored && (
          <div className="mt-6">
            <p>
              Sollen deine Buchungsdaten für die nächste Buchung in{' '}
              <strong>deinem Browser</strong> gespeichert werden?
            </p>
            <button onClick={store} className="btn btn-blue ml-0 mt-3">
              Ja, bitte speichern
            </button>
          </div>
        )}
        {bookingDataStored === true && (
          <div className="mt-6">
            <p className="info-message">
              Ok, deine Buchungsdaten wurden für die nächste Buchung
              gespeichert.
            </p>
          </div>
        )}
      </main>

      <Footer />
    </>
  )
}