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,

package-lock.json

@@ -7055,6 +7055,21 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swr": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-0.2.3.tgz",
+      "integrity": "sha512-JhuuD5ojqgjAQpZAhoPBd8Di0Mr1+ykByVKuRJdtKaxkUX/y8kMACWKkLgLQc8pcDOKEAnbIreNjU7HfqI9nHQ==",
+      "requires": {
+        "fast-deep-equal": "2.0.1"
+      },
+      "dependencies": {
+        "fast-deep-equal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
+        }
+      }
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",

package.json

@@ -15,6 +15,7 @@
     "react-bootstrap": "^1.0.1",
     "react-dates": "^21.8.0",
     "react-dom": "16.13.1",
-    "rebass": "^4.0.7"
+    "rebass": "^4.0.7",
+    "swr": "^0.2.3"
   }
 }

pages/api/booked.js

@@ -2,13 +2,5 @@
 
 export default (req, res) => {
   res.statusCode = 200
-  res.json({
+  res.json(['2020-07-23', '2020-07-24', '2020-07-25', '2020-08-01'])
-    bookedOn: [
-      '2020-07-10',
-      '2020-07-11',
-      '2020-07-12',
-      '2020-07-23',
-      '2020-08-01',
-    ],
-  })
 }