pfadi-bussle/components/dateSelect.js

import { useContext } from 'react'
import { AppContext, ACTIONS } from '../context/appStore'

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(AppContext)

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

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

  if (multipleDays === null || multipleDays === undefined) {
    return null
  }

  return (
    <>
      <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>
    </>
  )
}