extract non-interactive calendar

components/calendar.tsx

@@ -7,28 +7,26 @@ import {
   isWithinInterval,
   endOfDay,
 } from 'date-fns'
-import useSWR from 'swr'
 import Calendar from 'react-calendar'
-import { dateFormatBackend } from '../../helpers/date'
+import useBookedDays from '../helpers/useDaysBooked'
-import { getNextBigger, getNextSmaller } from '../../helpers/array'
+import { dateFormatBackend } from '../helpers/date'
-import { WizardContext } from './context/wizardStore'
+import { getNextBigger, getNextSmaller } from '../helpers/array'
 
-const fetcher = (path: string) => fetch(path).then((r) => r.json())
+export default function PlainCalendar({
+  start,
+  end,
+  onChange = null,
+  className,
+}: {
+  start?: string
+  end?: string
+  onChange?: (arg0: any) => void
+  className?: string
+}) {
+  const { daysBooked, daysBookedError, daysBookedLoading } = useBookedDays()
 
-export default function MyCalendar({ ...props }) {
-  const { onChange, state } = useContext(WizardContext)
-  const { startDate: start, endDate: end } = state.formData
   const startDate = (start && new Date(start)) || null
   const endDate = (end && new Date(end)) || null
-  const { data: daysBooked, error: fetchBookedOnError } = useSWR(
-    '/api/daysbooked',
-    fetcher,
-    {
-      revalidateOnFocus: true,
-      revalidateOnReconnect: true,
-      focusThrottleInterval: 24 * 60 * 60 * 1000,
-    }
-  )
 
   const inSelection = !!start && !end
   const prevBooked = inSelection && getNextSmaller(daysBooked, start)
@@ -79,10 +77,11 @@ export default function MyCalendar({ ...props }) {
         inSelection &&
         ((prevBooked && date < new Date(prevBooked)) ||
           (nextBooked && date > new Date(nextBooked))),
+      'react-calendar__tile--not-interactive': !onChange,
     })
   }
 
-  if (fetchBookedOnError) {
+  if (daysBookedError) {
     return (
       <div>
         Entschuldigen Sie, aber die Buchungszeiten konnten nicht geladen werden.
@@ -92,12 +91,16 @@ export default function MyCalendar({ ...props }) {
   }
 
   return (
-    <div {...props}>
+    <div className={className}>
       <h2 className="text-xl">Belegungsplan</h2>
       <Calendar
         minDate={new Date()}
         // @ts-ignore
-        onClickDay={(date, event: React.MouseEvent<HTMLInputElement>) => {
+        onClickDay={(date: Date, event: React.MouseEvent<HTMLInputElement>) => {
+          if (!onChange) {
+            return
+          }
+
           event.preventDefault()
           event.stopPropagation()
 

components/wizard/dateSelect.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react'
 import { WizardContext } from './context/wizardStore'
 import InputWrapper from '../inputWrapper'
-import Calendar from './calendar'
+import Calendar from '../calendar'
 
 export default function DateSelect() {
-  const { onChangeEvent, state } = useContext(WizardContext)
+  const { onChangeEvent, onChange, state } = useContext(WizardContext)
   const { startDate, endDate } = state.formData
 
   const today = new Date().toISOString().substring(0, 10)
@@ -12,7 +12,12 @@ export default function DateSelect() {
   return (
     <>
       <InputWrapper label="Datum" required>
-        <Calendar className="m-6" />
+        <Calendar
+          start={startDate}
+          end={endDate}
+          onChange={onChange}
+          className="m-6"
+        />
         <div className="inline-block mr-6">
           <label className="flabel inline-block w-6 mr-3" htmlFor="startDate">
             Von

helpers/useDaysBooked.ts

@@ -0,0 +1,23 @@
+import useSWR from 'swr'
+
+const fetcher = (path: string) => fetch(path).then((r) => r.json())
+
+function useDaysBooked() {
+  const { data: daysBooked, error: daysBookedError } = useSWR(
+    '/api/daysbooked',
+    fetcher,
+    {
+      revalidateOnFocus: true,
+      revalidateOnReconnect: true,
+      focusThrottleInterval: 24 * 60 * 60 * 1000,
+    }
+  )
+
+  return {
+    daysBooked,
+    daysBookedError,
+    daysBookedLoading: !daysBooked && !daysBookedError,
+  }
+}
+
+export default useDaysBooked

styles/index.css

@@ -194,7 +194,7 @@
   cursor: pointer;
 }
 
-.react-calendar__tile--free:hover:not(.react-calendar__tile--unselectable) {
+.react-calendar__tile--free:hover:not(.react-calendar__tile--unselectable):not(.react-calendar__tile--not-interactive) {
   @apply bg-gray-500;
 }
 
@@ -214,7 +214,7 @@
   @apply bg-blue-400;
 }
 
-.react-calendar__tile--selected:hover {
+.react-calendar__tile--selected:hover:not(.react-calendar__tile--not-interactive) {
   @apply bg-blue-600;
 }
 
@@ -234,6 +234,10 @@
   @apply text-green-400;
 }
 
+.react-calendar__tile--not-interactive {
+  @apply cursor-default;
+}
+
 /* Start purging... */
 @tailwind utilities;
 /* Stop purging. */