diff --git a/components/dateSelect.js b/components/dateSelect.js index 59d4c97..5e01ace 100644 --- a/components/dateSelect.js +++ b/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 nextBookedDay = getNextBigger(daysBooked, dateFormat(range.from)) - console.log(range.from, range.to) - console.log(prevBookedDay, nextBookedDay) + const prevBookedDay = getNextSmaller( + daysBooked, + dateFormat(range.from || range.to) + ) + 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() {
not implemented
} - {multipleDays === false && ( -