From 52a68e9989b01a3e7b922603796b8875deaa292e Mon Sep 17 00:00:00 2001 From: Thomas Ruoff Date: Fri, 28 Aug 2020 23:20:18 +0200 Subject: [PATCH] further typing improvements --- components/footer.tsx | 2 +- components/header.tsx | 2 +- components/wizard/contact.tsx | 3 +-- components/wizard/context/wizardStore.tsx | 8 +++---- components/wizard/dateSelect.tsx | 19 ++++++--------- components/wizard/index.tsx | 8 ++----- components/wizard/reason.tsx | 3 +-- components/wizard/required.tsx | 2 +- db/booker.ts | 16 +++++++++++-- db/booking.ts | 29 ++++++++++++++++------- db/index.ts | 1 - pages/_app.tsx | 4 +--- pages/api/booking/[uuid].tsx | 15 ++++++++---- pages/api/booking/index.tsx | 12 ++++++---- pages/api/daysbooked.tsx | 8 ++++--- pages/booking/[uuid].tsx | 27 +++++++++++---------- pages/index.tsx | 6 ++--- 17 files changed, 94 insertions(+), 71 deletions(-) diff --git a/components/footer.tsx b/components/footer.tsx index cfc199b..b593008 100644 --- a/components/footer.tsx +++ b/components/footer.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' export default function Footer() { return ( diff --git a/components/header.tsx b/components/header.tsx index e90863e..9eb593e 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' export default function Header() { return ( diff --git a/components/wizard/contact.tsx b/components/wizard/contact.tsx index f3de283..d172669 100644 --- a/components/wizard/contact.tsx +++ b/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' diff --git a/components/wizard/context/wizardStore.tsx b/components/wizard/context/wizardStore.tsx index 0be550d..e32d84f 100644 --- a/components/wizard/context/wizardStore.tsx +++ b/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 { diff --git a/components/wizard/dateSelect.tsx b/components/wizard/dateSelect.tsx index 6144915..1a4241d 100644 --- a/components/wizard/dateSelect.tsx +++ b/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()) diff --git a/components/wizard/index.tsx b/components/wizard/index.tsx index 660d698..fdc82ef 100644 --- a/components/wizard/index.tsx +++ b/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) diff --git a/components/wizard/reason.tsx b/components/wizard/reason.tsx index 86b42b1..848377f 100644 --- a/components/wizard/reason.tsx +++ b/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' diff --git a/components/wizard/required.tsx b/components/wizard/required.tsx index f3ae905..6274306 100644 --- a/components/wizard/required.tsx +++ b/components/wizard/required.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' const Required = () => * export default Required diff --git a/db/booker.ts b/db/booker.ts index 56a04ed..492818d 100644 --- a/db/booker.ts +++ b/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( { 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 = + mongoose.models.Booker || mongoose.model('Booker', BookerSchema) +export default Model diff --git a/db/booking.ts b/db/booking.ts index bc26b1e..64ad9f1 100644 --- a/db/booking.ts +++ b/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( { // 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 = + mongoose.models.Booking || mongoose.model('Booking', BookingSchema) -export default mongoose.models.Booking || - mongoose.model('Booking', BookingSchema) +export default Model diff --git a/db/index.ts b/db/index.ts index 16b7eed..7ec14c2 100644 --- a/db/index.ts +++ b/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' diff --git a/pages/_app.tsx b/pages/_app.tsx index 0678854..b82b0cf 100644 --- a/pages/_app.tsx +++ b/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 diff --git a/pages/api/booking/[uuid].tsx b/pages/api/booking/[uuid].tsx index 29ce52f..2249468 100644 --- a/pages/api/booking/[uuid].tsx +++ b/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': diff --git a/pages/api/booking/index.tsx b/pages/api/booking/index.tsx index a409c2b..733c01b 100644 --- a/pages/api/booking/index.tsx +++ b/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': diff --git a/pages/api/daysbooked.tsx b/pages/api/daysbooked.tsx index 71e5e1e..9bbde4d 100644 --- a/pages/api/daysbooked.tsx +++ b/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) { diff --git a/pages/booking/[uuid].tsx b/pages/booking/[uuid].tsx index 5490f5b..487a5f9 100644 --- a/pages/booking/[uuid].tsx +++ b/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 diff --git a/pages/index.tsx b/pages/index.tsx index 18e5992..9589210 100644 --- a/pages/index.tsx +++ b/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() {