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}