pfadi-bussle/components/dateSelect.js

import { useContext } from 'react'
import useSWR, { SWRConfig } 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'

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

export default function DateSelect() {
  const { state, dispatch } = useContext(WizardContext)
  const { data: daysBooked, error: fetchBookedOnError } = useSWR(
    '/api/daysbooked',
    fetcher
  )

  const {
    multipleDays,
    startDate,
    endDate,
    focusedInput,
    pickupTime,
    dropoffTime,
  } = state

  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?</Form.Label>
        <Form.Check
          type="radio"
          id={'multipleDays-single'}
          label="Einen Tag"
          name="multipleDays"
          value="single"
          checked={state.multipleDays === false}
          onChange={() =>
            dispatch({ type: ACTIONS.SET_MULTIPLE_DAYS, payload: false })
          }
        />
        <Form.Check
          type="radio"
          id={'multipleDays-multiple'}
          label="Mehrere Tage"
          name="multipleDays"
          value="multiple"
          checked={state.multipleDays === true}
          onChange={() =>
            dispatch({ type: ACTIONS.SET_MULTIPLE_DAYS, payload: true })
          }
        />
      </Form.Group>
      {multipleDays !== null && (
        <Form.Group>
          <Form.Label component="legend" style={{ display: 'block' }}>
            Datum
          </Form.Label>
          {state.multipleDays === false && (
            <SingleDatePicker
              small={true}
              date={startDate && moment(startDate)}
              placeholder="Datum"
              numberOfMonths={1}
              onDateChange={(date) =>
                dispatch({
                  type: ACTIONS.SET_DATE,
                  payload: { startDate: date.toISOString() },
                })
              }
              focused={typeof focusedInput === 'boolean' && focusedInput}
              onFocusChange={({ focused }) =>
                dispatch({
                  type: ACTIONS.SET_FOCUSED_INPUT,
                  payload: focused,
                })
              }
              isDayBlocked={isDayBlocked}
              id="startDate"
            />
          )}
          {state.multipleDays === true && (
            <DateRangePicker
              small={true}
              startDate={startDate && moment(startDate)}
              startDateId="startDate"
              startDatePlaceholderText="Start"
              endDatePlaceholderText="Ende"
              numberOfMonths={1}
              endDate={endDate && moment(endDate)}
              endDateId="endDate"
              onDatesChange={({ startDate, endDate }) => {
                dispatch({
                  type: ACTIONS.SET_DATE,
                  payload: {
                    startDate: startDate && startDate.toISOString(),
                    endDate: endDate && endDate.toISOString(),
                  },
                })
              }}
              focusedInput={focusedInput}
              onFocusChange={(focusedInput) =>
                dispatch({
                  type: ACTIONS.SET_FOCUSED_INPUT,
                  payload: focusedInput,
                })
              }
              isDayBlocked={isDayBlocked}
              minDate={moment()}
            />
          )}
        </Form.Group>
      )}
    </>
  )
}