diff --git a/components/footer.tsx b/components/footer.tsx index b593008..cfc199b 100644 --- a/components/footer.tsx +++ b/components/footer.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' export default function Footer() { return ( diff --git a/components/header.tsx b/components/header.tsx index 9eb593e..e90863e 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' export default function Header() { return ( diff --git a/components/wizard/contact.tsx b/components/wizard/contact.tsx index aeb549a..f3de283 100644 --- a/components/wizard/contact.tsx +++ b/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 diff --git a/components/wizard/context/wizardStore.tsx b/components/wizard/context/wizardStore.tsx index ab52efb..0be550d 100644 --- a/components/wizard/context/wizardStore.tsx +++ b/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 + onChange: (data: object) => void + onChangeEvent: (event: React.ChangeEvent>) => void + onSubmit: () => void + storeData: (value: boolean) => void + forgetData: () => void +} + +interface WizardAction { + type: string + payload?: any +} + +export const WizardContext: React.Context = 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> + ) => { 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) } diff --git a/components/wizard/dateSelect.tsx b/components/wizard/dateSelect.tsx index 02e4764..6144915 100644 --- a/components/wizard/dateSelect.tsx +++ b/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({ + 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() + const toRef = useRef() - 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 */} -