half way

components/dateSelect.js

@@ -1,13 +1,11 @@
-import { useContext, useState } from 'react'
+import React, { useContext, useState } from 'react'
 import useSWR from 'swr'
 
-import { WizardContext, ACTIONS } from '../context/wizardStore'
+import { WizardContext } from '../context/wizardStore'
 
 import Form from 'react-bootstrap/Form'
 
-import moment from 'moment'
-import 'react-dates/initialize'
-import { DateRangePicker, SingleDatePicker } from 'react-dates'
+import DayPicker, { DateUtils } from 'react-day-picker'
 
 import Required from './required'
 import { dateFormat } from '../helpers/date'
@@ -15,21 +13,51 @@ import { dateFormat } from '../helpers/date'
 const fetcher = (path) => fetch(path).then((r) => r.json())
 
 export default function DateSelect() {
-  const [focusedInput, setFocusedInput] = useState(null)
+  // const [focusedInput, setFocusedInput] = useState(null)
   const { state, onChange } = useContext(WizardContext)
+  const [range, setRange] = useState({ form: null, to: null })
   const { data: daysBooked, error: fetchBookedOnError } = useSWR(
     '/api/daysbooked',
     fetcher
   )
+  const prevBookedDay = range.from
+    ? daysBooked
+        .reverse()
+        .find((dayBooked) => dayBooked < dateFormat(range.from))
+    : null
+  const nextBookedDay = range.from
+    ? daysBooked.find((dayBooked) => dayBooked > dateFormat(range.from))
+    : null
 
-  const { multipleDays, startDate, endDate } = state.formData
+  console.log('from', dateFormat(range.from), 'to', dateFormat(range.to))
+  console.log('prev', prevBookedDay, 'next', nextBookedDay)
 
-  function isDayBlocked(momentDay) {
+  function dayBeforeToday(day) {
+    return new Date() > day
+  }
+
+  function dayBooked(day) {
+    return daysBooked && daysBooked.includes(dateFormat(day))
+  }
+
+  function dayDisabled(day) {
     return (
-      daysBooked && daysBooked.some((rawDay) => momentDay.isSame(rawDay, 'day'))
+      dayBeforeToday(day) ||
+      dayBooked(day) ||
+      (prevBookedDay && day < new Date(prevBookedDay)) ||
+      (nextBookedDay && day > new Date(nextBookedDay))
     )
   }
 
+  const { multipleDays } = state.formData
+  const { from, to } = range
+  const disabledDays = [dayDisabled]
+  const modifiers = {
+    dayBooked,
+    start: from,
+    end: to,
+  }
+
   if (fetchBookedOnError) {
     return (
       <div>
@@ -53,7 +81,7 @@ export default function DateSelect() {
           value="single"
           checked={multipleDays === false}
           onChange={() => {
-            setFocusedInput(null)
+            //setFocusedInput(null)
             onChange({
               multipleDays: false,
               startDate: null,
@@ -69,7 +97,7 @@ export default function DateSelect() {
           value="multiple"
           checked={multipleDays === true}
           onChange={() => {
-            setFocusedInput(null)
+            //setFocusedInput(null)
             onChange({
               multipleDays: true,
               startDate: null,
@@ -83,45 +111,18 @@ export default function DateSelect() {
           <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 === false && <p>not implemented</p>}
           {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),
-                })
+            <DayPicker
+              className="Selectable"
+              numberOfMonths={2}
+              selectedDays={[from, { from, to }]}
+              disabledDays={disabledDays}
+              modifiers={modifiers}
+              onDayClick={(day) => {
+                const newRange = DateUtils.addDayToRange(day, range)
+                setRange(newRange)
               }}
-              focusedInput={focusedInput}
-              onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
-              isDayBlocked={isDayBlocked}
-              minDate={moment()}
             />
           )}
         </Form.Group>