further typing improvements

pages/_app.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
-
-import '../styles/index.css'
-
 import 'react-day-picker/lib/style.css'
+import '../styles/index.css'
 
 export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

pages/api/booking/[uuid].tsx

@@ -1,13 +1,20 @@
-import { getBookingByUUID, getBookingByUUIDAsJSON } from '../../../db/index'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { Booking } from '../../../db/booking'
 import { BOOKING_STATUS } from '../../../db/bookingStatus'
+import { getBookingByUUID, getBookingByUUIDAsJSON } from '../../../db/index'
 
-export default async function userHandler(req, res) {
+export default async function userHandler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
   const {
     method,
-    query: { uuid },
+    query: { uuids },
   } = req
 
-  let booking
+  const uuid = Array.isArray(uuids) ? uuids[0] : uuids
+
+  let booking: Booking
 
   switch (method) {
     case 'GET':

pages/api/booking/index.tsx

@@ -1,12 +1,16 @@
-import { createBooking } from '../../../db/index'
 import { Error } from 'mongoose'
-
+import { NextApiRequest, NextApiResponse } from 'next'
+import { Booking } from '../../../db/booking'
+import { createBooking } from '../../../db/index'
 import { sendReceivedBookingMail } from '../../../helpers/mail'
 
-export default async function userHandler(req, res) {
+export default async function userHandler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
   const { method } = req
 
-  let booking
+  let booking: Booking
 
   switch (method) {
     case 'POST':

pages/api/daysbooked.tsx

@@ -1,8 +1,10 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-
+import { NextApiRequest, NextApiResponse } from 'next'
 import { getBookedDays } from '../../db/index'
 
-export default async function useHandler(req, res) {
+export default async function useHandler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
   const { method } = req
 
   switch (method) {

pages/booking/[uuid].tsx

@@ -1,16 +1,15 @@
+import { GetServerSideProps } from 'next'
 import React, { useEffect, useState } from 'react'
-
-import { getBookingByUUIDAsJSON } from '../../db/index'
-
-import Header from '../../components/header'
 import Footer from '../../components/footer'
-
+import Header from '../../components/header'
+import { Booking } from '../../db/booking'
+import { BOOKING_STATUS } from '../../db/bookingStatus'
+import { getBookingByUUIDAsJSON } from '../../db/index'
 import { dateFormatFrontend } from '../../helpers/date'
 
-import { BOOKING_STATUS } from '../../db/bookingStatus'
-
-export async function getServerSideProps(context) {
-  const { uuid } = context.params
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const { uuids } = context.params
+  const uuid = Array.isArray(uuids) ? uuids[0] : uuids
   const booking = await getBookingByUUIDAsJSON(uuid)
   // TODO: hack, not sure why _id is not serilizable
   const bookingJSON = JSON.parse(JSON.stringify(booking))
@@ -19,7 +18,7 @@ export async function getServerSideProps(context) {
   }
 }
 
-function getBookingStatus(booking) {
+function getBookingStatus(booking: Booking) {
   switch (booking.status) {
     case BOOKING_STATUS.REQUESTED:
       return 'In Bearbeitung'
@@ -34,7 +33,7 @@ function getBookingStatus(booking) {
   }
 }
 
-async function cancelBooking(booking) {
+async function cancelBooking(booking: Booking) {
   const response = await fetch(`/api/booking/${booking.uuid}`, {
     method: 'PATCH',
     mode: 'cors',
@@ -49,7 +48,11 @@ async function cancelBooking(booking) {
   return response.json()
 }
 
-export default function Booking({ booking: bookingProp }) {
+export default function ShowBooking({
+  booking: bookingProp,
+}: {
+  booking: Booking
+}) {
   const [booking, setBooking] = useState(bookingProp)
 
   // in case the props change, update the internal state

pages/index.tsx

@@ -1,9 +1,7 @@
-import React from 'react'
-
 import Head from 'next/head'
-
-import Header from '../components/header'
+import React from 'react'
 import Footer from '../components/footer'
+import Header from '../components/header'
 import Wizard from '../components/wizard/index'
 
 export default function Home() {