pfadi-bussle/components/dateSelect.js

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

export default function DateSelect() {
  const { state, dispatch } = useContext(WizardContext)

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

  function isDayBlocked(momentDay) {
    return bookedOn.some((rawDay) => momentDay.isSame(rawDay))
  }

  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)}
              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="your_unique_id"
            />
          )}
          {state.multipleDays === true && (
            <DateRangePicker
              small={true}
              startDate={startDate && moment(startDate)}
              startDateId="bussle_start_date_id"
              endDate={endDate && moment(endDate)}
              endDateId="bussle_end_date_id"
              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>
      )}
    </>
  )
}