start simplifying form data handling

components/contact.js

@@ -7,7 +7,7 @@ import Col from 'react-bootstrap/Col'
 export default function Contact() {
   const { state } = useContext(WizardContext)
 
-  const { name, email, street, zip, city } = state
+  const { name, email, street, zip, city } = state.formData
 
   return (
     <>

components/dateSelect.js

@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useState } from 'react'
 import useSWR from 'swr'
 
 import { WizardContext, ACTIONS } from '../context/wizardStore'
@@ -12,13 +12,14 @@ import { DateRangePicker, SingleDatePicker } from 'react-dates'
 const fetcher = (path) => fetch(path).then((r) => r.json())
 
 export default function DateSelect() {
+  const [focusedInput, setFocusedInput] = useState(null)
   const { state, dispatch } = useContext(WizardContext)
   const { data: daysBooked, error: fetchBookedOnError } = useSWR(
     '/api/daysbooked',
     fetcher
   )
 
-  const { multipleDays, startDate, endDate, focusedInput } = state
+  const { multipleDays, startDate, endDate } = state.formData
 
   function isDayBlocked(momentDay) {
     return (
@@ -45,10 +46,18 @@ export default function DateSelect() {
           label="Einen Tag"
           name="multipleDays"
           value="single"
-          checked={state.multipleDays === false}
-          onChange={() =>
-            dispatch({ type: ACTIONS.SET_MULTIPLE_DAYS, payload: false })
-          }
+          checked={multipleDays === false}
+          onChange={() => {
+            setFocusedInput(null)
+            dispatch({
+              type: ACTIONS.SET_FORM_DATA,
+              payload: {
+                multipleDays: false,
+                startDate: null,
+                endDate: null,
+              },
+            })
+          }}
         />
         <Form.Check
           type="radio"
@@ -56,10 +65,18 @@ export default function DateSelect() {
           label="Mehrere Tage"
           name="multipleDays"
           value="multiple"
-          checked={state.multipleDays === true}
-          onChange={() =>
-            dispatch({ type: ACTIONS.SET_MULTIPLE_DAYS, payload: true })
-          }
+          checked={multipleDays === true}
+          onChange={() => {
+            setFocusedInput(null)
+            dispatch({
+              type: ACTIONS.SET_FORM_DATA,
+              payload: {
+                multipleDays: true,
+                startDate: null,
+                endDate: null,
+              },
+            })
+          }}
         />
       </Form.Group>
       {multipleDays !== null && (
@@ -67,7 +84,7 @@ export default function DateSelect() {
           <Form.Label component="legend" style={{ display: 'block' }}>
             Datum
           </Form.Label>
-          {state.multipleDays === false && (
+          {multipleDays === false && (
             <SingleDatePicker
               small={true}
               date={startDate && moment(startDate)}
@@ -75,22 +92,19 @@ export default function DateSelect() {
               numberOfMonths={1}
               onDateChange={(date) =>
                 dispatch({
-                  type: ACTIONS.SET_DATE,
-                  payload: { startDate: date.toISOString() },
+                  type: ACTIONS.SET_FORM_DATA,
+                  payload: {
+                    startDate: date && date.toISOString(),
+                  },
                 })
               }
               focused={typeof focusedInput === 'boolean' && focusedInput}
-              onFocusChange={({ focused }) =>
-                dispatch({
-                  type: ACTIONS.SET_FOCUSED_INPUT,
-                  payload: focused,
-                })
-              }
+              onFocusChange={({ focused }) => setFocusedInput(focused)}
               isDayBlocked={isDayBlocked}
               id="startDate"
             />
           )}
-          {state.multipleDays === true && (
+          {multipleDays === true && (
             <DateRangePicker
               small={true}
               startDate={startDate && moment(startDate)}
@@ -102,7 +116,7 @@ export default function DateSelect() {
               endDateId="endDate"
               onDatesChange={({ startDate, endDate }) => {
                 dispatch({
-                  type: ACTIONS.SET_DATE,
+                  type: ACTIONS.SET_FORM_DATA,
                   payload: {
                     startDate: startDate && startDate.toISOString(),
                     endDate: endDate && endDate.toISOString(),
@@ -110,12 +124,7 @@ export default function DateSelect() {
                 })
               }}
               focusedInput={focusedInput}
-              onFocusChange={(focusedInput) =>
-                dispatch({
-                  type: ACTIONS.SET_FOCUSED_INPUT,
-                  payload: focusedInput,
-                })
-              }
+              onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
               isDayBlocked={isDayBlocked}
               minDate={moment()}
             />

components/reason.js

@@ -6,7 +6,7 @@ import Form from 'react-bootstrap/Form'
 export default function Contact() {
   const { state } = useContext(WizardContext)
 
-  const { purpose, destination, org } = state
+  const { purpose, destination, org } = state.formData
 
   return (
     <>