make form just simple

components/contact.js

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

components/dateSelect.js

@@ -9,11 +9,13 @@ import moment from 'moment'
 import 'react-dates/initialize'
 import { DateRangePicker, SingleDatePicker } from 'react-dates'
 
+import { dateFormat } from '../lib/dateHelper'
+
 const fetcher = (path) => fetch(path).then((r) => r.json())
 
 export default function DateSelect() {
   const [focusedInput, setFocusedInput] = useState(null)
-  const { state, dispatch } = useContext(WizardContext)
+  const { state, onChange, onChangeEvent } = useContext(WizardContext)
   const { data: daysBooked, error: fetchBookedOnError } = useSWR(
     '/api/daysbooked',
     fetcher
@@ -49,13 +51,10 @@ export default function DateSelect() {
           checked={multipleDays === false}
           onChange={() => {
             setFocusedInput(null)
-            dispatch({
-              type: ACTIONS.SET_FORM_DATA,
-              payload: {
-                multipleDays: false,
-                startDate: null,
-                endDate: null,
-              },
+            onChange({
+              multipleDays: false,
+              startDate: null,
+              endDate: null,
             })
           }}
         />
@@ -68,13 +67,10 @@ export default function DateSelect() {
           checked={multipleDays === true}
           onChange={() => {
             setFocusedInput(null)
-            dispatch({
-              type: ACTIONS.SET_FORM_DATA,
-              payload: {
-                multipleDays: true,
-                startDate: null,
-                endDate: null,
-              },
+            onChange({
+              multipleDays: true,
+              startDate: null,
+              endDate: null,
             })
           }}
         />
@@ -91,11 +87,8 @@ export default function DateSelect() {
               placeholder="Datum"
               numberOfMonths={1}
               onDateChange={(date) =>
-                dispatch({
-                  type: ACTIONS.SET_FORM_DATA,
-                  payload: {
-                    startDate: date && date.toISOString(),
-                  },
+                onChange({
+                  startDate: date && dateFormat(date),
                 })
               }
               focused={typeof focusedInput === 'boolean' && focusedInput}
@@ -115,12 +108,9 @@ export default function DateSelect() {
               endDate={endDate && moment(endDate)}
               endDateId="endDate"
               onDatesChange={({ startDate, endDate }) => {
-                dispatch({
-                  type: ACTIONS.SET_FORM_DATA,
-                  payload: {
-                    startDate: startDate && startDate.toISOString(),
-                    endDate: endDate && endDate.toISOString(),
-                  },
+                onChange({
+                  startDate: startDate && dateFormat(startDate),
+                  endDate: endDate && dateFormat(endDate),
                 })
               }}
               focusedInput={focusedInput}

components/reason.js

@@ -4,7 +4,7 @@ import { WizardContext, ACTIONS } from '../context/wizardStore'
 import Form from 'react-bootstrap/Form'
 
 export default function Contact() {
-  const { state } = useContext(WizardContext)
+  const { state, onChangeEvent } = useContext(WizardContext)
 
   const { purpose, destination, org } = state.formData
 
@@ -14,22 +14,30 @@ export default function Contact() {
         <Form.Label>Zweck der Fahrt</Form.Label>
         <Form.Control
           type="text"
-          id="purpose"
+          name="purpose"
           placeholder="Zweck der Fahrt"
           value={purpose}
+          onChange={onChangeEvent}
         />
       </Form.Group>
       <Form.Group>
         <Form.Label>Verein</Form.Label>
-        <Form.Control type="text" id="org" placeholder="Verein" value={org} />
+        <Form.Control
+          type="text"
+          name="org"
+          placeholder="Verein"
+          value={org}
+          onChange={onChangeEvent}
+        />
       </Form.Group>
       <Form.Group>
         <Form.Label>Ziel der Fahrt</Form.Label>
         <Form.Control
           type="text"
-          id="destination"
+          name="destination"
           placeholder="Fahrtziel"
           value={destination}
+          onChange={onChangeEvent}
         />
       </Form.Group>
     </>

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>
   )
 }