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 Contact from './contact'
import Driver from './driver'

const STEPS = [
  { id: 'DATE_SELECT', component: DateSelect },
  { id: 'CONTACT', component: Contact },
]

function WizardInternal() {
  const { state, dispatch } = useContext(WizardContext)
  const { currentStep } = state

  const isFirstStep = currentStep === 0
  const isLastStep = currentStep === STEPS.length - 1

  return (
    <Form>
      {STEPS.map(({ id, component: Component }, index) => (
        <>{currentStep === index && <Component />}</>
      ))}
      {!isFirstStep && (
        <Button
          variant="secondary"
          onClick={() => dispatch({ type: ACTIONS.PREV_STEP })}
        >
          Zurück
        </Button>
      )}
      {!isLastStep && (
        <Button onClick={() => dispatch({ type: ACTIONS.NEXT_STEP })}>
          Weiter
        </Button>
      )}
      {isLastStep && (
        <Button onClick={() => console.log('SEND OFF', state)}>Absenden</Button>
      )}
    </Form>
  )
}

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