fetch booked from api with swr

components/dateSelect.js

@@ -1,4 +1,6 @@
 import { useContext } from 'react'
+import useSWR, { SWRConfig } from 'swr'
+
 import { WizardContext, ACTIONS } from '../context/wizardStore'
 
 import Form from 'react-bootstrap/Form'
@@ -7,8 +9,14 @@ import moment from 'moment'
 import 'react-dates/initialize'
 import { DateRangePicker, SingleDatePicker } from 'react-dates'
 
+const fetcher = (path) => fetch(path).then((r) => r.json())
+
 export default function DateSelect() {
   const { state, dispatch } = useContext(WizardContext)
+  const { data: bookedOn, error: fetchBookedOnError } = useSWR(
+    '/api/booked',
+    fetcher
+  )
 
   const {
     multipleDays,
@@ -17,11 +25,24 @@ export default function DateSelect() {
     focusedInput,
     pickupTime,
     dropoffTime,
-    bookedOn,
   } = state
 
   function isDayBlocked(momentDay) {
-    return bookedOn.some((rawDay) => momentDay.isSame(rawDay))
+    return (
+      bookedOn && bookedOn.some((rawDay) => momentDay.isSame(rawDay, 'day'))
+    )
+  }
+
+  if (!bookedOn) {
+    return <div>Lade Buchungen...</div>
+  }
+
+  if (fetchBookedOnError) {
+    return (
+      <div>
+        Entschuldige, aber die Buchungszeiten konnten nicht geladen werden
+      </div>
+    )
   }
 
   return (
@@ -60,6 +81,8 @@ export default function DateSelect() {
             <SingleDatePicker
               small={true}
               date={startDate && moment(startDate)}
+              placeholder="Datum"
+              numberOfMonths={1}
               onDateChange={(date) =>
                 dispatch({
                   type: ACTIONS.SET_DATE,
@@ -74,16 +97,19 @@ export default function DateSelect() {
                 })
               }
               isDayBlocked={isDayBlocked}
-              id="your_unique_id"
+              id="startDate"
             />
           )}
           {state.multipleDays === true && (
             <DateRangePicker
               small={true}
               startDate={startDate && moment(startDate)}
-              startDateId="bussle_start_date_id"
+              startDateId="startDate"
+              startDatePlaceholderText="Start"
+              endDatePlaceholderText="Ende"
+              numberOfMonths={1}
               endDate={endDate && moment(endDate)}
-              endDateId="bussle_end_date_id"
+              endDateId="endDate"
               onDatesChange={({ startDate, endDate }) => {
                 dispatch({
                   type: ACTIONS.SET_DATE,