further typing improvements

components/footer.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 
 export default function Footer() {
   return (

components/header.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 
 export default function Header() {
   return (

components/wizard/contact.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react'
-import { useContext } from 'react'
+import React, { useContext } from 'react'
 import { WizardContext } from './context/wizardStore'
 import Required from './required'
 

components/wizard/context/wizardStore.tsx

@@ -1,10 +1,8 @@
-import * as React from 'react'
-import { useReducer, useEffect } from 'react'
-
+import React, { useEffect, useReducer } from 'react'
 import {
-  storeBookingData,
-  loadBookingData,
   clearBookingData,
+  loadBookingData,
+  storeBookingData,
 } from '../../../helpers/storage'
 
 interface WizardFormData {

components/wizard/dateSelect.tsx

@@ -1,18 +1,13 @@
-import * as React from 'react'
-import { useEffect, useContext, useState, useRef } from 'react'
-import useSWR from 'swr'
-
-import { WizardContext } from './context/wizardStore'
-
+import 'moment/locale/de'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import { DateUtils, RangeModifier } from 'react-day-picker'
 import DayPickerInput from 'react-day-picker/DayPickerInput'
-
-import Required from './required'
-import { dateFormatBackend } from '../../helpers/date'
-import { getNextSmaller, getNextBigger } from '../../helpers/array'
-
 import MomentLocaleUtils from 'react-day-picker/moment'
-import 'moment/locale/de'
+import useSWR from 'swr'
+import { getNextBigger, getNextSmaller } from '../../helpers/array'
+import { dateFormatBackend } from '../../helpers/date'
+import { WizardContext } from './context/wizardStore'
+import Required from './required'
 
 const fetcher = (path: string) => fetch(path).then((r) => r.json())
 

components/wizard/index.tsx

@@ -1,13 +1,9 @@
-import * as React from 'react'
-import { useContext } from 'react'
-
 import Link from 'next/link'
-
+import React, { useContext } from 'react'
+import Contact from './contact'
 import WizardStore, { WizardContext } from './context/wizardStore'
-
 import DateSelect from './dateSelect'
 import Reason from './reason'
-import Contact from './contact'
 
 function WizardInternal() {
   const { onSubmit, state, forgetData, storeData } = useContext(WizardContext)

components/wizard/reason.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react'
-import { useContext } from 'react'
+import React, { useContext } from 'react'
 import { WizardContext } from './context/wizardStore'
 import Required from './required'
 

components/wizard/required.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 
 const Required = () => <span>*</span>
 export default Required

db/booker.ts

@@ -1,6 +1,16 @@
 import * as mongoose from 'mongoose'
 
-const BookerSchema = new mongoose.Schema(
+export interface Booker
+  extends mongoose.SchemaTimestampsConfig,
+    mongoose.Document {
+  name: string
+  email: string
+  street: string
+  zip: string
+  city: string
+}
+
+const BookerSchema = new mongoose.Schema<Booker>(
   {
     name: { type: String, required: true },
     email: { type: String, required: true, unique: true, minlength: 5 },
@@ -11,4 +21,6 @@ const BookerSchema = new mongoose.Schema(
   { timestamps: true, collation: { locale: 'de', strength: 1 } }
 )
 
-export default mongoose.models.Booker || mongoose.model('Booker', BookerSchema)
+const Model: mongoose.Model<Booker> =
+  mongoose.models.Booker || mongoose.model('Booker', BookerSchema)
+export default Model

db/booking.ts

@@ -1,11 +1,24 @@
-import { v4 as uuidv4 } from 'uuid'
 import * as mongoose from 'mongoose'
-
-import { getDays, dateFormatBackend } from '../helpers/date'
-
+import { v4 as uuidv4 } from 'uuid'
+import { dateFormatBackend, getDays } from '../helpers/date'
+import { Booker } from './booker'
 import { BOOKING_STATUS } from './bookingStatus'
 
-const BookingSchema = new mongoose.Schema(
+export interface Booking
+  extends mongoose.Document,
+    mongoose.SchemaTimestampsConfig {
+  uuid: string
+  booker: Booker
+  startDate: Date
+  endDate: Date
+  status: string
+  purpose: string
+  org: string
+  destination: string
+  days?: string[]
+}
+
+const BookingSchema = new mongoose.Schema<Booking>(
   {
     // need a seperate uuid to be able to target a booking anonimously
     uuid: {
@@ -51,7 +64,7 @@ BookingSchema.virtual('days').get(function () {
   return getDays({ startDate: this.startDate, endDate: this.endDate })
 })
 
-BookingSchema.virtual('hash').get(function () {})
+const Model: mongoose.Model<Booking> =
+  mongoose.models.Booking || mongoose.model('Booking', BookingSchema)
 
-export default mongoose.models.Booking ||
-  mongoose.model('Booking', BookingSchema)
+export default Model

db/index.ts

@@ -1,5 +1,4 @@
 import * as mongoose from 'mongoose'
-
 import Booker from './booker'
 import Booking from './booking'
 import { BOOKING_STATUS } from './bookingStatus'

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() {