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 (
     <>

context/wizardStore.js

@@ -5,11 +5,7 @@ export const WizardContext = React.createContext()
 export const ACTIONS = {
   NEXT_STEP: 'nextStep',
   PREV_STEP: 'prevStep',
-  SET_MULTIPLE_DAYS: 'setMultipleDays',
-  SET_DATE: 'setDate',
-  SET_FOCUSED_INPUT: 'setFocusedInput',
-  SET_PICKUP_TIME: 'setPickupTime',
-  SET_DROPOFF_TIME: 'setDropoffTime',
+  SET_FORM_DATA: 'setFormData',
 }
 
 function reducer(state, action) {
@@ -24,27 +20,14 @@ function reducer(state, action) {
         ...state,
         currentStep: Math.max(0, state.currentStep - 1),
       }
-    case ACTIONS.SET_MULTIPLE_DAYS:
+    case ACTIONS.SET_FORM_DATA:
       return {
         ...state,
-        multipleDays: action.payload,
-        focusedInput: undefined,
-        startDate: undefined,
-        endDate: undefined,
-        days: [],
+        formData: {
+          ...state.formData,
+          ...action.payload,
+        },
       }
-    case ACTIONS.SET_DATE:
-      return {
-        ...state,
-        startDate: action.payload.startDate,
-        endDate: action.payload.endDate,
-      }
-    case ACTIONS.SET_FOCUSED_INPUT:
-      return { ...state, focusedInput: action.payload }
-    case ACTIONS.SET_PICKUP_TIME:
-      return { ...state, pickupTime: action.payload }
-    case ACTIONS.SET_DROPOFF_TIME:
-      return { ...state, dropoffTime: action.payload }
     default:
       throw new Error(`Unkown Action type ${action.type}`)
   }
@@ -58,7 +41,7 @@ function debugReducer(state, action) {
 }
 
 async function createBooking(state) {
-  const { name, email, startDate, endDate } = state
+  const { name, email, startDate, endDate } = state.formData
   const response = await fetch('/api/booking', {
     method: 'POST',
     mode: 'cors',
@@ -75,10 +58,12 @@ async function createBooking(state) {
 }
 
 const initialState = {
-  name: 'Thomas Ruoff',
-  email: 'thomasruoff@gmail.com',
+  formData: {
+    name: 'Thomas Ruoff',
+    email: 'thomasruoff@gmail.com',
+    multipleDays: null,
+  },
   currentStep: 0,
-  multipleDays: null,
   bookedOn: [
     '2020-07-10',
     '2020-07-11',