pfadi-bussle/components/dateSelect.js

import { useContext, useState } from 'react'
import useSWR from 'swr'

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

import Form from 'react-bootstrap/Form'

import moment from 'moment'
import 'react-dates/initialize'
import { DateRangePicker, SingleDatePicker } from 'react-dates'

import Required from './required'
import { dateFormat } from '../helpers/date'

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

export default function DateSelect() {
  const [focusedInput, setFocusedInput] = useState(null)
  const { state, onChange } = useContext(WizardContext)
  const { data: daysBooked, error: fetchBookedOnError } = useSWR(
    '/api/daysbooked',
    fetcher
  )

  const { multipleDays, startDate, endDate } = state.formData

  function isDayBlocked(momentDay) {
    return (
      daysBooked && daysBooked.some((rawDay) => momentDay.isSame(rawDay, 'day'))
    )
  }

  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>
          {multipleDays === false && (
            <SingleDatePicker
              small={true}
              date={startDate && moment(startDate)}
              placeholder="Datum"
              numberOfMonths={1}
              required
              onDateChange={(date) =>
                onChange({
                  startDate: date && dateFormat(date),
                })
              }
              focused={typeof focusedInput === 'boolean' && focusedInput}
              onFocusChange={({ focused }) => setFocusedInput(focused)}
              isDayBlocked={isDayBlocked}
              id="startDate"
            />
          )}
          {multipleDays === true && (
            <DateRangePicker
              small={true}
              startDate={startDate && moment(startDate)}
              startDateId="startDate"
              startDatePlaceholderText="Start"
              endDatePlaceholderText="Ende"
              required
              numberOfMonths={1}
              endDate={endDate && moment(endDate)}
              endDateId="endDate"
              onDatesChange={({ startDate, endDate }) => {
                onChange({
                  startDate: startDate && dateFormat(startDate),
                  endDate: endDate && dateFormat(endDate),
                })
              }}
              focusedInput={focusedInput}
              onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
              isDayBlocked={isDayBlocked}
              minDate={moment()}
            />
          )}
        </Form.Group>
      )}
    </>
  )
}