fix most type errors

still have a few things outstanding

components/footer.tsx

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

components/header.tsx

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

components/wizard/contact.tsx

@@ -1,9 +1,9 @@
-import React, { useContext } from 'react'
+import * as React from 'react'
+import { useContext } from 'react'
 import { WizardContext } from './context/wizardStore'
 import Required from './required'
 
 export default function Contact() {
-  // @ts-expect-error ts-migrate(2339) FIXME: Property 'state' does not exist on type '{}'.
   const { state, onChangeEvent } = useContext(WizardContext)
 
   const { name, email, street, zip, city } = state.formData

components/wizard/context/wizardStore.tsx

@@ -1,4 +1,5 @@
-import React, { useReducer, useEffect } from 'react'
+import * as React from 'react'
+import { useReducer, useEffect } from 'react'
 
 import {
   storeBookingData,
@@ -6,8 +7,52 @@ import {
   clearBookingData,
 } from '../../../helpers/storage'
 
-// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
-export const WizardContext = React.createContext()
+interface WizardFormData {
+  startDate: string
+  endDate: string
+  purpose: string
+  org: string
+  destination: string
+  name: string
+  email: string
+  street: string
+  zip: string
+  city: string
+}
+
+interface Booking {
+  uuid: string
+}
+
+interface WizardStoreState {
+  postData?: boolean
+  postDataError?: string
+  postDataSuccess?: boolean
+  formData: WizardFormData
+  formDataChanged: string[]
+  booking?: Booking
+  dataStored: boolean
+  dataStoredLoaded: boolean
+}
+
+interface WizardStore {
+  state: WizardStoreState
+  dispatch: React.Dispatch<WizardAction>
+  onChange: (data: object) => void
+  onChangeEvent: (event: React.ChangeEvent<React.ElementRef<'input'>>) => void
+  onSubmit: () => void
+  storeData: (value: boolean) => void
+  forgetData: () => void
+}
+
+interface WizardAction {
+  type: string
+  payload?: any
+}
+
+export const WizardContext: React.Context<WizardStore> = React.createContext<
+  WizardStore
+>(null)
 
 export const ACTIONS = {
   SET_FORM_DATA: 'setFormData',
@@ -19,7 +64,7 @@ export const ACTIONS = {
   DATA_STORED_FORGOTTEN: 'dataStoredForgotten',
 }
 
-function reducer(state, action) {
+function reducer(state: WizardStoreState, action: WizardAction) {
   switch (action.type) {
     case ACTIONS.SET_FORM_DATA:
       return {
@@ -84,14 +129,7 @@ function reducer(state, action) {
   }
 }
 
-function debugReducer(state, action) {
-  console.debug('applying action', action)
-  const newState = reducer(state, action)
-  console.debug(newState)
-  return newState
-}
-
-const initialState = {
+const initialState: WizardStoreState = {
   postData: false,
   postDataError: null,
   postDataSuccess: null,
@@ -108,9 +146,11 @@ const initialState = {
     city: '',
   },
   formDataChanged: [],
+  dataStored: undefined,
+  dataStoredLoaded: undefined,
 }
 
-async function createBooking(formData) {
+async function createBooking(formData: WizardFormData) {
   const response = await fetch('/api/booking', {
     method: 'POST',
     mode: 'cors',
@@ -126,7 +166,7 @@ async function createBooking(formData) {
 }
 
 export default function WizardStore({ children }) {
-  const [state, dispatch] = useReducer(debugReducer, initialState)
+  const [state, dispatch] = useReducer(reducer, initialState)
 
   useEffect(() => {
     const data = loadBookingData()
@@ -135,7 +175,9 @@ export default function WizardStore({ children }) {
     }
   }, [])
 
-  const onChangeEvent = (event) => {
+  const onChangeEvent = (
+    event: React.ChangeEvent<React.ElementRef<'input'>>
+  ) => {
     const { name, value } = event.target
 
     dispatch({
@@ -144,7 +186,7 @@ export default function WizardStore({ children }) {
     })
   }
 
-  const onChange = (data) => {
+  const onChange = (data: object) => {
     dispatch({
       type: ACTIONS.SET_FORM_DATA,
       payload: data,
@@ -163,7 +205,7 @@ export default function WizardStore({ children }) {
     }
   }
 
-  const storeData = (value) => {
+  const storeData = (value: boolean) => {
     if (value) {
       storeBookingData(state.booking)
     }

components/wizard/dateSelect.tsx

@@ -1,33 +1,27 @@
-import React, { useContext, useState, useRef, useEffect } from 'react'
+import * as React from 'react'
+import { useEffect, useContext, useState, useRef } from 'react'
 import useSWR from 'swr'
 
 import { WizardContext } from './context/wizardStore'
 
-import { DateUtils } from 'react-day-picker'
+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, {
-  // @ts-expect-error ts-migrate(2614) FIXME: Module '"../../node_modules/react-day-picker/types... Remove this comment to see the full error message
-  formatDate,
-  // @ts-expect-error ts-migrate(2614) FIXME: Module '"../../node_modules/react-day-picker/types... Remove this comment to see the full error message
-  parseDate,
-} from 'react-day-picker/moment'
+import MomentLocaleUtils from 'react-day-picker/moment'
 import 'moment/locale/de'
 
-const fetcher = (path) => fetch(path).then((r) => r.json())
+const fetcher = (path: string) => fetch(path).then((r) => r.json())
 
 export default function DateSelect() {
-  // @ts-expect-error ts-migrate(2339) FIXME: Property 'state' does not exist on type '{}'.
-  const { state, onChange } = useContext(WizardContext)
-  const [range, setRange] = useState({
-    form: state.startDate && new Date(state.startDate),
-    to: state.endDate && new Date(state.endDate),
+  const { onChange } = useContext(WizardContext)
+  const [range, setRange] = useState<RangeModifier>({
+    from: undefined, //state.startDate && new Date(state.startDate),
+    to: undefined, //state.endDate && new Date(state.endDate),
   })
-  // @ts-expect-error ts-migrate(2339) FIXME: Property 'from' does not exist on type '{ form: Da... Remove this comment to see the full error message
   const { from, to } = range
   const { data: daysBooked, error: fetchBookedOnError } = useSWR(
     '/api/daysbooked',
@@ -39,14 +33,14 @@ export default function DateSelect() {
   )
   const nextBookedDay = getNextBigger(daysBooked, dateFormatBackend(from || to))
 
-  const fromRef = useRef()
-  const toRef = useRef()
+  const fromRef = useRef<DayPickerInput>()
+  const toRef = useRef<DayPickerInput>()
 
-  function dayBooked(day) {
+  function dayBooked(day: Date) {
     return daysBooked && daysBooked.includes(dateFormatBackend(day))
   }
 
-  function dayDisabled(day) {
+  function dayDisabled(day: Date) {
     return (
       DateUtils.isPastDay(day) ||
       dayBooked(day) ||
@@ -57,7 +51,6 @@ export default function DateSelect() {
   }
 
   useEffect(() => {
-    // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
     toRef.current?.getInput().focus()
   }, [from])
 
@@ -92,8 +85,8 @@ export default function DateSelect() {
           inputProps={{ className: 'input-text' }}
           value={from}
           placeholder="Von"
-          formatDate={formatDate}
-          parseDate={parseDate}
+          formatDate={MomentLocaleUtils.formatDate}
+          parseDate={MomentLocaleUtils.parseDate}
           dayPickerProps={{
             locale: 'de',
             localeUtils: MomentLocaleUtils,
@@ -102,7 +95,6 @@ export default function DateSelect() {
             modifiers,
             numberOfMonths: 1,
           }}
-          // @ts-expect-error ts-migrate(2345) FIXME: Object literal may only specify known properties, ... Remove this comment to see the full error message
           onDayChange={(from) => setRange({ ...range, from })}
         />
         {' - '}
@@ -111,8 +103,8 @@ export default function DateSelect() {
           inputProps={{ className: 'input-text', disabled: !from }}
           value={to}
           placeholder="Bis"
-          formatDate={formatDate}
-          parseDate={parseDate}
+          formatDate={MomentLocaleUtils.formatDate}
+          parseDate={MomentLocaleUtils.parseDate}
           dayPickerProps={{
             locale: 'de',
             localeUtils: MomentLocaleUtils,
@@ -126,8 +118,10 @@ export default function DateSelect() {
           }}
           onDayChange={(to) => setRange({ ...range, to })}
         />
-        {/* @ts-expect-error ts-migrate(2345) FIXME: Type '{}' provides no match for the signature '(pr... Remove this comment to see the full error message */}
-        <button onClick={() => setRange({})} className="ibtn">
+        <button
+          onClick={() => setRange({ from: undefined, to: undefined })}
+          className="ibtn"
+        >
           <svg className="w-full" viewBox="0 0 352 512">
             <path
               fill="currentColor"

components/wizard/index.tsx

@@ -1,4 +1,5 @@
-import React, { useContext } from 'react'
+import * as React from 'react'
+import { useContext } from 'react'
 
 import Link from 'next/link'
 
@@ -9,7 +10,6 @@ import Reason from './reason'
 import Contact from './contact'
 
 function WizardInternal() {
-  // @ts-expect-error ts-migrate(2339) FIXME: Property 'onSubmit' does not exist on type '{}'.
   const { onSubmit, state, forgetData, storeData } = useContext(WizardContext)
   const {
     postData,

components/wizard/reason.tsx

@@ -1,9 +1,9 @@
-import React, { useContext } from 'react'
+import * as React from 'react'
+import { useContext } from 'react'
 import { WizardContext } from './context/wizardStore'
 import Required from './required'
 
 export default function Contact() {
-  // @ts-expect-error ts-migrate(2339) FIXME: Property 'state' does not exist on type '{}'.
   const { state, onChangeEvent } = useContext(WizardContext)
 
   const { formDataChanged } = state

components/wizard/required.tsx

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