move daysbooked fetch to context

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 (
       <div>
         Entschuldigen Sie, aber die Buchungszeiten konnten nicht geladen werden.
@@ -92,7 +87,7 @@ export default function MyCalendar({ ...props }) {
       <Calendar
         minDate={new Date()}
         // @ts-ignore
-        onClickDay={(date, event: React.MouseEvent<HTMLInputElement>) => {
+        onClickDay={(date: Date, event: React.MouseEvent<HTMLInputElement>) => {
           event.preventDefault()
           event.stopPropagation()
 

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<React.ElementRef<'input'>>) => 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<string[], Error>(
+    '/api/daysbooked',
+    fetcher
+  )
 
   useEffect(() => {
     const data = loadBookingData()
@@ -216,6 +225,8 @@ export default function WizardStore({ children }) {
         onChange,
         onSubmit,
         forgetData,
+        daysBooked,
+        daysBookedErrorMessage: daysBookedError?.message,
       }}
     >
       {children}