pfadi-bussle/components/dateSelect.js

import React, { useContext, useState, useRef, useEffect } from 'react'
import useSWR from 'swr'

import { WizardContext } from '../context/wizardStore'

import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'

import { DateUtils } from 'react-day-picker'
import DayPickerInput from 'react-day-picker/DayPickerInput'

import Required from './required'
import { dateFormat } from '../helpers/date'
import { getNextSmaller, getNextBigger } from '../helpers/array'

const fetcher = (path) => fetch(path).then((r) => r.json())

export default function DateSelect() {
  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 || range.to)
  )
  const nextBookedDay = getNextBigger(
    daysBooked,
    dateFormat(range.from || range.to)
  )

  const fromRef = useRef()
  const toRef = useRef()

  function dayBooked(day) {
    return daysBooked && daysBooked.includes(dateFormat(day))
  }

  function dayDisabled(day) {
    return (
      DateUtils.isPastDay(day) ||
      dayBooked(day) ||
      (prevBookedDay && day < new Date(prevBookedDay)) ||
      (nextBookedDay && day > new Date(nextBookedDay))
    )
  }

  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]
  const modifiers = {
    dayBooked,
    start: from,
    end: to,
  }

  if (fetchBookedOnError) {
    return (
      <div>
        Entschuldige, aber die Buchungszeiten konnten nicht geladen werden.
        Versuchen Sie es später nochmals.
      </div>
    )
  }

  return (
    <>
      <Form.Group controlId="dateSelect">
        <Form.Label>
          Willst du einen odere mehrere Tage buchen? <Required />
        </Form.Label>
        <Form.Check
          type="radio"
          id={'multipleDays-single'}
          label="Einen Tag"
          name="multipleDays"
          value="single"
          checked={multipleDays === false}
          onChange={() => {
            //setFocusedInput(null)
            onChange({
              multipleDays: false,
              startDate: null,
              endDate: null,
            })
          }}
        />
        <Form.Check
          type="radio"
          id={'multipleDays-multiple'}
          label="Mehrere Tage"
          name="multipleDays"
          value="multiple"
          checked={multipleDays === true}
          onChange={() => {
            //setFocusedInput(null)
            onChange({
              multipleDays: true,
              startDate: null,
              endDate: null,
            })
          }}
        />
      </Form.Group>
      {multipleDays !== null && (
        <Form.Group>
          <Form.Label component="legend" style={{ display: 'block' }}>
            Datum <Required />
          </Form.Label>
          {
            <>
              <Form.Group>
                <DayPickerInput
                  ref={fromRef}
                  component={Form.Control}
                  value={from}
                  placeholder="Von"
                  formatDate={dateFormat}
                  parseDate={parseDate}
                  dayPickerProps={{
                    className: 'Selectable',
                    selectedDays: [from, { from, to }],
                    disabledDays,
                    modifiers,
                    numberOfMonths: 1,
                  }}
                  onDayChange={(from) => setRange({ ...range, from })}
                />
                <Form.Label className="px-2">bis</Form.Label>
                <DayPickerInput
                  ref={toRef}
                  component={Form.Control}
                  inputProps={{ disabled: !range.from }}
                  value={to}
                  placeholder="Bis"
                  formatDate={dateFormat}
                  parseDate={parseDate}
                  dayPickerProps={{
                    className: 'Selectable',
                    selectedDays: [from, { from, to }],
                    disabledDays,
                    modifiers,
                    numberOfMonths: 1,
                    month: from,
                    fromMonth: from,
                  }}
                  onDayChange={(to) => setRange({ ...range, to })}
                />
                <Button
                  className="ml-2"
                  variant="outline-secondary"
                  onClick={() => setRange({})}
                >
                  Zurücksetzen
                </Button>
              </Form.Group>
            </>
          }
        </Form.Group>
      )}
    </>
  )
}