pfadi-bussle/components/wizard.js

import { useContext } from 'react'

import Button from 'react-bootstrap/Button'
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'

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

  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()
      }}
    >
      <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>}
    </Form>
  )
}

export default function Wizard() {
  return (
    <WizardStore>
      <WizardInternal />
    </WizardStore>
  )
}