move all wizard specific stuff to components/wizard

2026-03-03 14:37:13 +01:00 · 2020-08-22 00:25:14 +02:00
parent 1df26814ba
commit 1bf7c7b801
9 changed files with 23 additions and 16 deletions
--- a/components/wizard/dateSelect.js
+++ b/components/wizard/dateSelect.js
@@ -0,0 +1,134 @@
+import React, { useContext, useState, useRef, useEffect } from 'react'
+import useSWR from 'swr'
+
+import { WizardContext } from './context/wizardStore'
+
+import { DateUtils } from 'react-day-picker'
+import DayPickerInput from 'react-day-picker/DayPickerInput'
+
+import Required from './required'
+import { dateFormatBackend } from '../../helpers/date'
+import { getNextSmaller, getNextBigger } from '../../helpers/array'
+
+import MomentLocaleUtils, {
+  formatDate,
+  parseDate,
+} from 'react-day-picker/moment'
+import 'moment/locale/de'
+
+const fetcher = (path) => fetch(path).then((r) => r.json())
+
+export default function DateSelect() {
+  const { state, onChange } = useContext(WizardContext)
+  const [range, setRange] = useState({
+    form: state.startDate && new Date(state.startDate),
+    to: 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()
+  const toRef = useRef()
+
+  function dayBooked(day) {
+    return daysBooked && daysBooked.includes(dateFormatBackend(day))
+  }
+
+  function dayDisabled(day) {
+    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 (
+    <div className="fsw">
+      <div className="fs">
+        <label className="flabel">
+          Datum <Required />
+        </label>
+        <DayPickerInput
+          ref={fromRef}
+          inputProps={{ className: 'input-text' }}
+          value={from}
+          placeholder="Von"
+          formatDate={formatDate}
+          parseDate={parseDate}
+          dayPickerProps={{
+            locale: 'de',
+            localeUtils: MomentLocaleUtils,
+            className: 'datepicker',
+            disabledDays,
+            modifiers,
+            numberOfMonths: 1,
+          }}
+          onDayChange={(from) => setRange({ ...range, from })}
+        />
+        {' - '}
+        <DayPickerInput
+          ref={toRef}
+          inputProps={{ className: 'input-text', disabled: !from }}
+          value={to}
+          placeholder="Bis"
+          formatDate={formatDate}
+          parseDate={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({})} 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>
+      </div>
+    </div>
+  )
+}