make form just simple

components/wizard.js

@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useRef } from 'react'
 
 import Button from 'react-bootstrap/Button'
 import Form from 'react-bootstrap/Form'
@@ -10,50 +10,23 @@ import Reason from './reason'
 import Contact from './contact'
 //import Driver from './driver'
 
-const STEPS = [
-  { id: 'DATE_SELECT', component: DateSelect },
-  { id: 'REASON', component: Reason },
-  { id: 'CONTACT', component: Contact },
-]
-
 function WizardInternal() {
-  const { state, dispatch, onSubmit } = useContext(WizardContext)
-  const { currentStep } = state
-
-  const isFirstStep = currentStep === 0
-  const isLastStep = currentStep === STEPS.length - 1
-
-  const CurrentStepComponent = STEPS[currentStep].component
+  const { state, storeBooking } = useContext(WizardContext)
+  const onChange = (payload) =>
+    dispatch({ action: ACTIONS.SET_FORM_DATA, payload })
 
   return (
     <Form
       onSubmit={(event) => {
         event.preventDefault()
 
-        const fd = new FormData(event.currentTarget)
-        for (const [key, value] of fd.entries()) {
-          console.log(key, value)
-        }
-
-        if (!isLastStep) {
-          dispatch({ type: ACTIONS.NEXT_STEP })
-          return
-        }
-
-        onSubmit()
+        storeBooking()
       }}
     >
-      <CurrentStepComponent />
-      {!isFirstStep && (
-        <Button
-          variant="secondary"
-          onClick={() => dispatch({ type: ACTIONS.PREV_STEP })}
-        >
-          Zurück
-        </Button>
-      )}
-      {!isLastStep && <Button type="submit">Weiter</Button>}
-      {isLastStep && <Button type="submit">Absenden</Button>}
+      <DateSelect />
+      <Reason />
+      <Contact />
+      <Button type="submit">Absenden</Button>
     </Form>
   )
 }