pfadi-bussle/components/dateSelect.js

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

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

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

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

import MomentLocaleUtils, {
  formatDate,
  parseDate,
} from 'react-day-picker/moment'
import 'moment/locale/de'

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

export default function DateSelect() {
  const { state, onChange } = useContext(WizardContext)
  const [range, setRange] = useState({
    form: state.startDate && new Date(state.startDate),
    to: state.endDate && new Date(state.endDate),
  })
  const { from, to } = range
  const { data: daysBooked, error: fetchBookedOnError } = useSWR(
    '/api/daysbooked',
    fetcher
  )
  const prevBookedDay = getNextSmaller(
    daysBooked,
    dateFormatBackend(from || to)
  )
  const nextBookedDay = getNextBigger(daysBooked, dateFormatBackend(from || to))

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

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

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

  useEffect(() => {
    toRef.current?.getInput().focus()
  }, [from])

  useEffect(() => {
    onChange({ startDate: from?.toISOString(), endDate: to?.toISOString() })
  }, [from, to])

  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 (
    <div className="fsw">
      <div className="fs">
        <label className="flabel">
          Datum <Required />
        </label>
        <DayPickerInput
          ref={fromRef}
          inputProps={{ className: 'input-text' }}
          value={from}
          placeholder="Von"
          formatDate={formatDate}
          parseDate={parseDate}
          dayPickerProps={{
            locale: 'de',
            localeUtils: MomentLocaleUtils,
            className: 'datepicker',
            disabledDays,
            modifiers,
            numberOfMonths: 1,
          }}
          onDayChange={(from) => setRange({ ...range, from })}
        />
        {' - '}
        <DayPickerInput
          ref={toRef}
          inputProps={{ className: 'input-text', disabled: !from }}
          value={to}
          placeholder="Bis"
          formatDate={formatDate}
          parseDate={parseDate}
          dayPickerProps={{
            locale: 'de',
            localeUtils: MomentLocaleUtils,
            className: 'datepicker',
            selectedDays: [from, { from, to }],
            disabledDays,
            modifiers,
            numberOfMonths: 1,
            month: from,
            fromMonth: from,
          }}
          onDayChange={(to) => setRange({ ...range, to })}
        />
        <button onClick={() => setRange({})} className="ibtn">
          <svg className="w-full" viewBox="0 0 352 512">
            <path
              fill="currentColor"
              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
            ></path>
          </svg>
        </button>
      </div>
    </div>
  )
}