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 DayPicker, { DateUtils } from 'react-day-picker'
-import 'react-dates/initialize'
-import { DateRangePicker, SingleDatePicker } from 'react-dates'
 
 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 && (
+          {multipleDays === false && <p>not implemented</p>}
-            <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 === true && (
-            <DateRangePicker
+            <DayPicker
-              small={true}
+              className="Selectable"
-              startDate={startDate && moment(startDate)}
+              numberOfMonths={2}
-              startDateId="startDate"
+              selectedDays={[from, { from, to }]}
-              startDatePlaceholderText="Start"
+              disabledDays={disabledDays}
-              endDatePlaceholderText="Ende"
+              modifiers={modifiers}
-              required
+              onDayClick={(day) => {
-              numberOfMonths={1}
+                const newRange = DateUtils.addDayToRange(day, range)
-              endDate={endDate && moment(endDate)}
+                setRange(newRange)
-              endDateId="endDate"
-              onDatesChange={({ startDate, endDate }) => {
-                onChange({
-                  startDate: startDate && dateFormat(startDate),
-                  endDate: endDate && dateFormat(endDate),
-                })
               }}
-              focusedInput={focusedInput}
-              onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
-              isDayBlocked={isDayBlocked}
-              minDate={moment()}
             />
           )}
         </Form.Group>

db/index.js

@@ -30,7 +30,10 @@ export async function getBookedDays() {
     'startDate endDate'
   ).exec()
 
-  return bookings.map((booking) => booking.days).flat()
+  return bookings
+    .map((booking) => booking.days)
+    .flat()
+    .sort()
 }
 
 export async function createBooking({

package-lock.json

@@ -6826,6 +6826,14 @@
         "react-with-styles-interface-css": "^6.0.0"
       }
     },
+    "react-day-picker": {
+      "version": "7.4.8",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-7.4.8.tgz",
+      "integrity": "sha512-pp0hnxFVoRuBQcRdR1Hofw4CQtOCGVmzCNrscyvS0Q8NEc+UiYLEDqE5dk37bf0leSnBW4lheIt0CKKhuKzDVw==",
+      "requires": {
+        "prop-types": "^15.6.2"
+      }
+    },
     "react-dom": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",

package.json

@@ -15,6 +15,7 @@
     "react": "16.13.1",
     "react-bootstrap": "^1.3.0",
     "react-dates": "^21.8.0",
+    "react-day-picker": "^7.4.8",
     "react-dom": "16.13.1",
     "rebass": "^4.0.7",
     "swr": "^0.2.3"

pages/_app.js

@@ -1,5 +1,8 @@
+import React from 'react'
+
 import 'bootstrap/dist/css/bootstrap.min.css'
-import 'react-dates/lib/css/_datepicker.css'
+//import 'react-dates/lib/css/_datepicker.css'
+import 'react-day-picker/lib/style.css'
 
 import 'moment'
 import 'moment/locale/de'

pages/index.js

@@ -37,6 +37,26 @@ export default function Home() {
         * {
           box-sizing: border-box;
         }
+        .Selectable
+          .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+          background-color: #f0f8ff !important;
+          color: #4a90e2;
+        }
+        .Selectable .DayPicker-Day {
+          border-radius: 0 !important;
+        }
+        .Selectable .DayPicker-Day--start {
+          border-top-left-radius: 50% !important;
+          border-bottom-left-radius: 50% !important;
+        }
+        .Selectable .DayPicker-Day--end {
+          border-top-right-radius: 50% !important;
+          border-bottom-right-radius: 50% !important;
+        }
+        .Selectable .DayPicker-Day--dayBooked:not(.DayPicker-Day--outside) {
+          color: #505050;
+          background-color: #fcc;
+        }
       `}</style>
     </div>
   )