pfadi-bussle/components/dateSelect.js

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

import TimeSelect from './timeSelect'

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 (
    <>
      <div>
        {state.multipleDays === false && (
          <SingleDatePicker
            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
            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()}
          />
        )}
      </div>
      <TimeSelect
        id="pickup"
        name="pickupTime"
        label="Abholung Uhrzeit"
        value={pickupTime}
        setValue={(payload) =>
          dispatch({ type: ACTIONS.SET_PICKUP_TIME, payload })
        }
      />
      <TimeSelect
        id="dropoff"
        name="dropoffTime"
        label="Rückgabe Uhrzeit"
        value={dropoffTime}
        setValue={(payload) =>
          dispatch({ type: ACTIONS.SET_DROPOFF_TIME, payload })
        }
      />
    </>
  )
}