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',