further hacking

components/contact.js

@@ -5,32 +5,47 @@ import Form from 'react-bootstrap/Form'
 import Col from 'react-bootstrap/Col'
 
 export default function Contact() {
-  const { state, dispatch } = useContext(WizardContext)
+  const { state } = useContext(WizardContext)
 
-  const { multipleDays, startDate, endDate } = state
+  const { name, email, street, zip, city } = state
 
   return (
     <>
       <Form.Group>
         <Form.Label>Name</Form.Label>
-        <Form.Control type="text" id="name" placeholder="Name" />
+        <Form.Control type="text" id="name" placeholder="Name" value={name} />
       </Form.Group>
       <Form.Group>
         <Form.Label>E-Mail</Form.Label>
-        <Form.Control type="email" id="email" placeholder="E-Mail" />
+        <Form.Control
+          type="email"
+          id="email"
+          placeholder="E-Mail"
+          value={email}
+        />
       </Form.Group>
       <Form.Group>
         <Form.Label>Straße</Form.Label>
-        <Form.Control type="text" id="street" placeholder="Straße" />
+        <Form.Control
+          type="text"
+          id="street"
+          placeholder="Straße"
+          value={street}
+        />
       </Form.Group>
       <Form.Row>
         <Form.Group as={Col} xs={4}>
           <Form.Label>PLZ</Form.Label>
-          <Form.Control type="text" id="plz" placeholder="PLZ" />
+          <Form.Control type="text" id="plz" placeholder="PLZ" value={zip} />
         </Form.Group>
         <Form.Group as={Col}>
           <Form.Label>Stadt</Form.Label>
-          <Form.Control type="text" id="city" placeholder="Stadt" />
+          <Form.Control
+            type="text"
+            id="city"
+            placeholder="Stadt"
+            value={city}
+          />
         </Form.Group>
       </Form.Row>
     </>

components/dateSelect.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import useSWR, { SWRConfig } from 'swr'
+import useSWR from 'swr'
 
 import { WizardContext, ACTIONS } from '../context/wizardStore'
 
@@ -18,14 +18,7 @@ export default function DateSelect() {
     fetcher
   )
 
-  const {
+  const { multipleDays, startDate, endDate, focusedInput } = state
-    multipleDays,
-    startDate,
-    endDate,
-    focusedInput,
-    pickupTime,
-    dropoffTime,
-  } = state
 
   function isDayBlocked(momentDay) {
     return (

components/driver.js

@@ -1,18 +0,0 @@
-export default function Driver({}) {
-  return (
-    <>
-      <div>
-        <label htmlFor="driver1">Fahrer 1</label>
-        <input id="driver1" name="driver1" type="text" />
-        <label htmlFor="driver">Alter</label>
-        <input id="ageDriver1" name="ageDriver1" type="number" min="20" />
-      </div>
-      <div>
-        <label htmlFor="driver">Fahrer 2</label>
-        <input id="driver2" name="driver2" type="text" />
-        <label htmlFor="driver">Alter</label>
-        <input id="ageDriver2" name="ageDriver2" type="number" min="20" />
-      </div>
-    </>
-  )
-}

components/reason.js

@@ -2,26 +2,35 @@ 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 { state } = useContext(WizardContext)
 
-  const { multipleDays, startDate, endDate } = state
+  const { purpose, destination, org } = state
 
   return (
     <>
       <Form.Group>
         <Form.Label>Zweck der Fahrt</Form.Label>
-        <Form.Control type="text" id="purpose" placeholder="Zweck der Fahrt" />
+        <Form.Control
+          type="text"
+          id="purpose"
+          placeholder="Zweck der Fahrt"
+          value={purpose}
+        />
       </Form.Group>
       <Form.Group>
         <Form.Label>Verein</Form.Label>
-        <Form.Control type="text" id="org" placeholder="Verein" />
+        <Form.Control type="text" id="org" placeholder="Verein" value={org} />
       </Form.Group>
       <Form.Group>
         <Form.Label>Ziel der Fahrt</Form.Label>
-        <Form.Control type="text" id="destination" placeholder="Fahrtziel" />
+        <Form.Control
+          type="text"
+          id="destination"
+          placeholder="Fahrtziel"
+          value={destination}
+        />
       </Form.Group>
     </>
   )

components/wizard.js

@@ -23,6 +23,8 @@ function WizardInternal() {
   const isFirstStep = currentStep === 0
   const isLastStep = currentStep === STEPS.length - 1
 
+  const CurrentStepComponent = STEPS[currentStep].component
+
   return (
     <Form
       onSubmit={(event) => {
@@ -41,9 +43,7 @@ function WizardInternal() {
         onSubmit()
       }}
     >
-      {STEPS.map(({ id, component: Component }, index) => (
+      <CurrentStepComponent />
-        <>{currentStep === index && <Component />}</>
-      ))}
       {!isFirstStep && (
         <Button
           variant="secondary"