more hacking

components/contact.js

@@ -15,6 +15,10 @@ export default function Contact() {
         <Form.Label>Name</Form.Label>
         <Form.Control type="text" id="name" placeholder="Name" />
       </Form.Group>
+      <Form.Group>
+        <Form.Label>E-Mail</Form.Label>
+        <Form.Control type="email" id="email" placeholder="E-Mail" />
+      </Form.Group>
       <Form.Group>
         <Form.Label>Straße</Form.Label>
         <Form.Control type="text" id="street" placeholder="Straße" />
@@ -29,18 +33,6 @@ export default function Contact() {
           <Form.Control type="text" id="city" placeholder="Stadt" />
         </Form.Group>
       </Form.Row>
-      <Form.Group>
-        <Form.Label>Verein</Form.Label>
-        <Form.Control type="text" id="org" placeholder="Verein" />
-      </Form.Group>
-      <Form.Group>
-        <Form.Label>Zweck der Fahrt</Form.Label>
-        <Form.Control type="text" id="purpose" placeholder="Zweck der Fahrt" />
-      </Form.Group>
-      <Form.Group>
-        <Form.Label>Ziel der Fahrt</Form.Label>
-        <Form.Control type="text" id="destination" placeholder="Fahrtziel" />
-      </Form.Group>
     </>
   )
 }

components/dateSelect.js

@@ -13,8 +13,8 @@ const fetcher = (path) => fetch(path).then((r) => r.json())
 
 export default function DateSelect() {
   const { state, dispatch } = useContext(WizardContext)
-  const { data: bookedOn, error: fetchBookedOnError } = useSWR(
-    '/api/booked',
+  const { data: daysBooked, error: fetchBookedOnError } = useSWR(
+    '/api/daysbooked',
     fetcher
   )
 
@@ -29,18 +29,15 @@ export default function DateSelect() {
 
   function isDayBlocked(momentDay) {
     return (
-      bookedOn && bookedOn.some((rawDay) => momentDay.isSame(rawDay, 'day'))
+      daysBooked && daysBooked.some((rawDay) => momentDay.isSame(rawDay, 'day'))
     )
   }
 
-  if (!bookedOn) {
-    return <div>Lade Buchungen...</div>
-  }
-
   if (fetchBookedOnError) {
     return (
       <div>
-        Entschuldige, aber die Buchungszeiten konnten nicht geladen werden
+        Entschuldige, aber die Buchungszeiten konnten nicht geladen werden.
+        Versuchen Sie es später nochmals.
       </div>
     )
   }

components/reason.js

@@ -0,0 +1,28 @@
+import { useContext } from 'react'
+import { WizardContext, ACTIONS } from '../context/wizardStore'
+
+import Form from 'react-bootstrap/Form'
+import Col from 'react-bootstrap/Col'
+
+export default function Contact() {
+  const { state, dispatch } = useContext(WizardContext)
+
+  const { multipleDays, startDate, endDate } = state
+
+  return (
+    <>
+      <Form.Group>
+        <Form.Label>Zweck der Fahrt</Form.Label>
+        <Form.Control type="text" id="purpose" placeholder="Zweck der Fahrt" />
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>Verein</Form.Label>
+        <Form.Control type="text" id="org" placeholder="Verein" />
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>Ziel der Fahrt</Form.Label>
+        <Form.Control type="text" id="destination" placeholder="Fahrtziel" />
+      </Form.Group>
+    </>
+  )
+}

components/wizard.js

@@ -6,16 +6,18 @@ import Form from 'react-bootstrap/Form'
 import WizardStore, { WizardContext, ACTIONS } from '../context/wizardStore'
 
 import DateSelect from './dateSelect'
+import Reason from './reason'
 import Contact from './contact'
-import Driver from './driver'
+//import Driver from './driver'
 
 const STEPS = [
   { id: 'DATE_SELECT', component: DateSelect },
+  { id: 'REASON', component: Reason },
   { id: 'CONTACT', component: Contact },
 ]
 
 function WizardInternal() {
-  const { state, dispatch } = useContext(WizardContext)
+  const { state, dispatch, onSubmit } = useContext(WizardContext)
   const { currentStep } = state
 
   const isFirstStep = currentStep === 0
@@ -36,7 +38,7 @@ function WizardInternal() {
           return
         }
 
-        dispatch({ type: ACTIONS.SUBMIT })
+        onSubmit()
       }}
     >
       {STEPS.map(({ id, component: Component }, index) => (