diff --git a/components/contact.js b/components/contact.js
index 7207053..85ac856 100644
--- a/components/contact.js
+++ b/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 (
<>
diff --git a/components/dateSelect.js b/components/dateSelect.js
index 5b449a6..34dfbb5 100644
--- a/components/dateSelect.js
+++ b/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,
+ },
+ })
+ }}
/>
- 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,
+ },
+ })
+ }}
/>
{multipleDays !== null && (
@@ -67,7 +84,7 @@ export default function DateSelect() {
Datum
- {state.multipleDays === false && (
+ {multipleDays === false && (
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 && (
{
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()}
/>
diff --git a/components/reason.js b/components/reason.js
index b6cdc78..7dad69f 100644
--- a/components/reason.js
+++ b/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 (
<>
diff --git a/context/wizardStore.js b/context/wizardStore.js
index 2da9b01..3a4009c 100644
--- a/context/wizardStore.js
+++ b/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',