fix range selection issue

components/dateSelect.js

@@ -9,6 +9,7 @@ import DayPicker, { DateUtils } from 'react-day-picker'
 
 import Required from './required'
 import { dateFormat } from '../helpers/date'
+import { getNextSmaller, getNextBigger } from '../helpers/array'
 
 const fetcher = (path) => fetch(path).then((r) => r.json())
 
@@ -20,21 +21,8 @@ export default function DateSelect() {
     '/api/daysbooked',
     fetcher
   )
-  const prevBookedDay = range.from
+  const prevBookedDay = getNextSmaller(daysBooked, dateFormat(range.from))
-    ? daysBooked
+  const nextBookedDay = getNextBigger(daysBooked, dateFormat(range.from))
-        .reverse()
-        .find((dayBooked) => dayBooked < dateFormat(range.from))
-    : null
-  const nextBookedDay = range.from
-    ? daysBooked.find((dayBooked) => dayBooked > dateFormat(range.from))
-    : null
-
-  console.log('from', dateFormat(range.from), 'to', dateFormat(range.to))
-  console.log('prev', prevBookedDay, 'next', nextBookedDay)
-
-  function dayBeforeToday(day) {
-    return new Date() > day
-  }
 
   function dayBooked(day) {
     return daysBooked && daysBooked.includes(dateFormat(day))
@@ -42,7 +30,7 @@ export default function DateSelect() {
 
   function dayDisabled(day) {
     return (
-      dayBeforeToday(day) ||
+      DateUtils.isPastDay(day) ||
       dayBooked(day) ||
       (prevBookedDay && day < new Date(prevBookedDay)) ||
       (nextBookedDay && day > new Date(nextBookedDay))

helpers/array.js

@@ -0,0 +1,18 @@
+export function getNextSmaller(array, pivot) {
+  if (!array || !Array.isArray(array) || !array.length) {
+    return null
+  }
+
+  return array
+    .sort()
+    .reverse()
+    .find((item) => item < pivot)
+}
+
+export function getNextBigger(array, pivot) {
+  if (!array || !Array.isArray(array) || !array.length) {
+    return null
+  }
+
+  return array.sort().find((day) => day > pivot)
+}