diff --git a/components/wizard/calendar.tsx b/components/wizard/calendar.tsx index c76d0a6..3b0aec7 100644 --- a/components/wizard/calendar.tsx +++ b/components/wizard/calendar.tsx @@ -7,23 +7,18 @@ import { isWithinInterval, endOfDay, } from 'date-fns' -import useSWR from 'swr' import Calendar from 'react-calendar' import { dateFormatBackend } from '../../helpers/date' import { getNextBigger, getNextSmaller } from '../../helpers/array' import { WizardContext } from './context/wizardStore' -const fetcher = (path: string) => fetch(path).then((r) => r.json()) - export default function MyCalendar({ ...props }) { - const { onChange, state } = useContext(WizardContext) + const { onChange, state, daysBooked, daysBookedErrorMessage } = useContext( + WizardContext + ) const { startDate: start, endDate: end } = state.formData const startDate = (start && new Date(start)) || null const endDate = (end && new Date(end)) || null - const { data: daysBooked, error: fetchBookedOnError } = useSWR( - '/api/daysbooked', - fetcher - ) const inSelection = !!start && !end const prevBooked = inSelection && getNextSmaller(daysBooked, start) @@ -77,7 +72,7 @@ export default function MyCalendar({ ...props }) { }) } - if (fetchBookedOnError) { + if (daysBookedErrorMessage) { return (
Entschuldigen Sie, aber die Buchungszeiten konnten nicht geladen werden. @@ -92,7 +87,7 @@ export default function MyCalendar({ ...props }) { ) => { + onClickDay={(date: Date, event: React.MouseEvent) => { event.preventDefault() event.stopPropagation() diff --git a/components/wizard/context/wizardStore.tsx b/components/wizard/context/wizardStore.tsx index d9ef89a..dfb3d47 100644 --- a/components/wizard/context/wizardStore.tsx +++ b/components/wizard/context/wizardStore.tsx @@ -2,6 +2,9 @@ import React, { useEffect, useReducer } from 'react' import { useRouter } from 'next/router' import { clearBookingData, loadBookingData } from '../../../helpers/storage' import { ValidationError } from './validationError' +import useSWR from 'swr' + +const fetcher = (path: string) => fetch(path).then((r) => r.json()) interface WizardFormData { startDate: string @@ -39,6 +42,8 @@ interface WizardStore { onChangeEvent: (event: React.ChangeEvent>) => void onSubmit: () => void forgetData: () => void + daysBooked: string[] + daysBookedErrorMessage: string } interface WizardAction { @@ -164,6 +169,10 @@ async function createBooking(formData: WizardFormData) { export default function WizardStore({ children }) { const router = useRouter() const [state, dispatch] = useReducer(reducer, initialState) + const { data: daysBooked, error: daysBookedError } = useSWR( + '/api/daysbooked', + fetcher + ) useEffect(() => { const data = loadBookingData() @@ -216,6 +225,8 @@ export default function WizardStore({ children }) { onChange, onSubmit, forgetData, + daysBooked, + daysBookedErrorMessage: daysBookedError?.message, }} > {children}