simplify date selection

components/wizard/dateSelect.tsx

@@ -1,129 +1,40 @@
-import 'moment/locale/de'
+import React, { useContext } from 'react'
-import React, { useContext, useEffect, useRef, useState } from 'react'
-import { DateUtils, RangeModifier } from 'react-day-picker'
-import DayPickerInput from 'react-day-picker/DayPickerInput'
-import MomentLocaleUtils from 'react-day-picker/moment'
-import useSWR from 'swr'
-import { getNextBigger, getNextSmaller } from '../../helpers/array'
-import { dateFormatBackend } from '../../helpers/date'
 import { WizardContext } from './context/wizardStore'
 import InputWrapper from './inputWrapper'
 
-const fetcher = (path: string) => fetch(path).then((r) => r.json())
-
 export default function DateSelect() {
-  const { onChange } = useContext(WizardContext)
+  const { onChangeEvent, state } = useContext(WizardContext)
-  const [range, setRange] = useState<RangeModifier>({
+  const { startDate, endDate } = state.formData
-    from: undefined, //state.startDate && new Date(state.startDate),
-    to: undefined, //state.endDate && new Date(state.endDate),
-  })
-  const { from, to } = range
-  const { data: daysBooked, error: fetchBookedOnError } = useSWR(
-    '/api/daysbooked',
-    fetcher
-  )
-  const prevBookedDay = getNextSmaller(
-    daysBooked,
-    dateFormatBackend(from || to)
-  )
-  const nextBookedDay = getNextBigger(daysBooked, dateFormatBackend(from || to))
 
-  const fromRef = useRef<DayPickerInput>()
+  const today = new Date().toISOString().substring(0, 10)
-  const toRef = useRef<DayPickerInput>()
-
-  function dayBooked(day: Date) {
-    return daysBooked && daysBooked.includes(dateFormatBackend(day))
-  }
-
-  function dayDisabled(day: Date) {
-    return (
-      DateUtils.isPastDay(day) ||
-      dayBooked(day) ||
-      (prevBookedDay && day < new Date(prevBookedDay)) ||
-      (nextBookedDay && day > new Date(nextBookedDay)) ||
-      day < from
-    )
-  }
-
-  useEffect(() => {
-    toRef.current?.getInput().focus()
-  }, [from])
-
-  useEffect(() => {
-    onChange({ startDate: from?.toISOString(), endDate: to?.toISOString() })
-  }, [from, to])
-
-  const disabledDays = [dayDisabled]
-  const modifiers = {
-    dayBooked,
-    start: from,
-    end: to,
-  }
-
-  if (fetchBookedOnError) {
-    return (
-      <div>
-        Entschuldige, aber die Buchungszeiten konnten nicht geladen werden.
-        Versuchen Sie es später nochmals.
-      </div>
-    )
-  }
 
   return (
-    <InputWrapper label="Datum" required>
+    <>
-      <DayPickerInput
+      <InputWrapper label="Datum" required>
-        ref={fromRef}
+        <label className="flabel inline-block mr-3" htmlFor="startDate">
-        inputProps={{ className: 'input-text', required: true }}
+          Von
-        value={from}
+        </label>
-        placeholder="Von"
+        <input
-        formatDate={MomentLocaleUtils.formatDate}
+          required
-        parseDate={MomentLocaleUtils.parseDate}
+          type="date"
-        dayPickerProps={{
+          name="startDate"
-          locale: 'de',
+          value={startDate}
-          localeUtils: MomentLocaleUtils,
+          onChange={onChangeEvent}
-          className: 'datepicker',
+          min={today}
-          disabledDays,
+        />
-          modifiers,
+        <label className="flabel inline-block ml-6 mr-3" htmlFor="endDate">
-          numberOfMonths: 1,
+          Bis
-        }}
+        </label>
-        onDayChange={(from) => setRange({ ...range, from })}
+        <input
-      />
+          required
-      {' - '}
+          type="date"
-      <DayPickerInput
+          name="endDate"
-        ref={toRef}
+          value={endDate}
-        inputProps={{
+          placeholder="Von"
-          className: 'input-text',
+          onChange={onChangeEvent}
-          disabled: !from,
+          min={startDate || today}
-          required: true,
+        />
-        }}
+      </InputWrapper>
-        value={to}
+    </>
-        placeholder="Bis"
-        formatDate={MomentLocaleUtils.formatDate}
-        parseDate={MomentLocaleUtils.parseDate}
-        dayPickerProps={{
-          locale: 'de',
-          localeUtils: MomentLocaleUtils,
-          className: 'datepicker',
-          selectedDays: [from, { from, to }],
-          disabledDays,
-          modifiers,
-          numberOfMonths: 1,
-          month: from,
-          fromMonth: from,
-        }}
-        onDayChange={(to) => setRange({ ...range, to })}
-      />
-      <button
-        onClick={() => setRange({ from: undefined, to: undefined })}
-        className="ibtn"
-      >
-        <svg className="w-full" viewBox="0 0 352 512">
-          <path
-            fill="currentColor"
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          ></path>
-        </svg>
-      </button>
-    </InputWrapper>
   )
 }

package-lock.json

@@ -9525,14 +9525,6 @@
         "prop-types": "^15.6.2"
       }
     },
-    "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

@@ -16,7 +16,6 @@
     "mongoose": "^5.9.25",
     "next": "^9.5.2",
     "react": "16.13.1",
-    "react-day-picker": "^7.4.8",
     "react-dom": "16.13.1",
     "rebass": "^4.0.7",
     "swr": "^0.3.0",

styles/index.css

@@ -6,10 +6,6 @@
 @tailwind components;
 /* Stop purging. */
 
-/* Start purging... */
-@tailwind utilities;
-/* Stop purging. */
-
 /* Your own custom utilities */
 
 .wrapper {
@@ -114,31 +110,6 @@
   @apply text-blue-700;
 }
 
-.DayPickerInput .input-text {
+/* Start purging... */
-  @apply w-full;
+@tailwind utilities;
-}
+/* Stop purging. */
-
-.DayPickerInput {
-  @apply w-1/3;
-}
-
-.datepicker
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
-  background-color: #f0f8ff !important;
-  color: #4a90e2;
-}
-.datepicker .DayPicker-Day {
-  border-radius: 0 !important;
-}
-.datepicker .DayPicker-Day--start {
-  border-top-left-radius: 50% !important;
-  border-bottom-left-radius: 50% !important;
-}
-.datepicker .DayPicker-Day--end {
-  border-top-right-radius: 50% !important;
-  border-bottom-right-radius: 50% !important;
-}
-.datepicker .DayPicker-Day--dayBooked:not(.DayPicker-Day--outside) {
-  color: #505050;
-  background-color: #fcc;
-}