further make dateSelect functional

components/dateSelect.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useRef } from 'react'
+import React, { useContext, useState, useRef, useEffect } from 'react'
 import useSWR from 'swr'
 
 import { WizardContext } from '../context/wizardStore'
@@ -6,7 +6,7 @@ import { WizardContext } from '../context/wizardStore'
 import Form from 'react-bootstrap/Form'
 import Button from 'react-bootstrap/Button'
 
-import DayPicker, { DateUtils } from 'react-day-picker'
+import { DateUtils } from 'react-day-picker'
 import DayPickerInput from 'react-day-picker/DayPickerInput'
 
 import Required from './required'
@@ -16,17 +16,20 @@ import { getNextSmaller, getNextBigger } from '../helpers/array'
 const fetcher = (path) => fetch(path).then((r) => r.json())
 
 export default function DateSelect() {
-  // const [focusedInput, setFocusedInput] = useState(null)
   const { state, onChange } = useContext(WizardContext)
   const [range, setRange] = useState({ form: null, to: null })
   const { data: daysBooked, error: fetchBookedOnError } = useSWR(
     '/api/daysbooked',
     fetcher
   )
-  const prevBookedDay = getNextSmaller(daysBooked, dateFormat(range.from))
+  const prevBookedDay = getNextSmaller(
-  const nextBookedDay = getNextBigger(daysBooked, dateFormat(range.from))
+    daysBooked,
-  console.log(range.from, range.to)
+    dateFormat(range.from || range.to)
-  console.log(prevBookedDay, nextBookedDay)
+  )
+  const nextBookedDay = getNextBigger(
+    daysBooked,
+    dateFormat(range.from || range.to)
+  )
 
   const fromRef = useRef()
   const toRef = useRef()
@@ -36,20 +39,22 @@ export default function DateSelect() {
   }
 
   function dayDisabled(day) {
-    const result =
+    return (
       DateUtils.isPastDay(day) ||
       dayBooked(day) ||
       (prevBookedDay && day < new Date(prevBookedDay)) ||
       (nextBookedDay && day > new Date(nextBookedDay))
-
+    )
-    console.log(day, result)
-    return result
   }
 
   function parseDate(value) {
     return new Date(value)
   }
 
+  useEffect(() => {
+    toRef.current?.getInput().focus()
+  }, [range.from])
+
   const { multipleDays } = state.formData
   const { from, to } = range
   const disabledDays = [dayDisabled]
@@ -112,31 +117,12 @@ export default function DateSelect() {
           <Form.Label component="legend" style={{ display: 'block' }}>
             Datum <Required />
           </Form.Label>
-          {multipleDays === false && <p>not implemented</p>}
-          {multipleDays === false && (
-            <DayPicker
-              className="Selectable"
-              numberOfMonths={2}
-              selectedDays={[from, { from, to }]}
-              disabledDays={disabledDays}
-              modifiers={modifiers}
-              onDayClick={(day, modifiers, event) => {
-                console.log(modifiers, event)
-                if (modifiers.disabled) {
-                  return
-                }
-                const newRange = DateUtils.addDayToRange(day, range)
-                setRange(newRange)
-              }}
-            />
-          )}
           {
             <>
               <Form.Group>
                 <DayPickerInput
                   ref={fromRef}
-                  // seems this makes getInput NOT work anymore :(
+                  component={Form.Control}
-                  component={(props) => <Form.Control {...props} />}
                   value={from}
                   placeholder="Von"
                   formatDate={dateFormat}
@@ -147,14 +133,14 @@ export default function DateSelect() {
                     disabledDays,
                     modifiers,
                     numberOfMonths: 1,
-                    onDayClick: () => toRef.current?.getInput().focus(),
                   }}
                   onDayChange={(from) => setRange({ ...range, from })}
                 />
                 <Form.Label className="px-2">bis</Form.Label>
                 <DayPickerInput
                   ref={toRef}
-                  component={(props) => <Form.Control {...props} />}
+                  component={Form.Control}
+                  inputProps={{ disabled: !range.from }}
                   value={to}
                   placeholder="Bis"
                   formatDate={dateFormat}