diff --git a/components/contact.js b/components/contact.js index af6d821..754be19 100644 --- a/components/contact.js +++ b/components/contact.js @@ -1,9 +1,9 @@ import React, { useContext } from 'react' -import { AppContext } from '../context/appStore' +import { WizardContext } from '../context/wizardStore' import Required from './required' export default function Contact() { - const { state, onChangeEvent } = useContext(AppContext) + const { state, onChangeEvent } = useContext(WizardContext) const { name, email, street, zip, city } = state.formData diff --git a/components/dateSelect.js b/components/dateSelect.js index 017076d..e836e75 100644 --- a/components/dateSelect.js +++ b/components/dateSelect.js @@ -1,7 +1,7 @@ import React, { useContext, useState, useRef, useEffect } from 'react' import useSWR from 'swr' -import { AppContext } from '../context/appStore' +import { WizardContext } from '../context/wizardStore' import { DateUtils } from 'react-day-picker' import DayPickerInput from 'react-day-picker/DayPickerInput' @@ -19,7 +19,7 @@ import 'moment/locale/de' const fetcher = (path) => fetch(path).then((r) => r.json()) export default function DateSelect() { - const { state, onChange } = useContext(AppContext) + const { state, onChange } = useContext(WizardContext) const [range, setRange] = useState({ form: state.startDate && new Date(state.startDate), to: state.endDate && new Date(state.endDate), diff --git a/components/reason.js b/components/reason.js index 69c969c..f3d1f4a 100644 --- a/components/reason.js +++ b/components/reason.js @@ -1,9 +1,9 @@ import React, { useContext } from 'react' -import { AppContext } from '../context/appStore' +import { WizardContext } from '../context/wizardStore' import Required from './required' export default function Contact() { - const { state, onChangeEvent } = useContext(AppContext) + const { state, onChangeEvent } = useContext(WizardContext) const { formDataChanged } = state const { purpose, destination, org } = state.formData diff --git a/components/wizard.js b/components/wizard.js index 75eea3d..e79f89b 100644 --- a/components/wizard.js +++ b/components/wizard.js @@ -1,19 +1,58 @@ import React, { useContext } from 'react' -import { AppContext } from '../context/appStore' +import Link from 'next/link' + +import WizardStore, { WizardContext } from '../context/wizardStore' import DateSelect from './dateSelect' import Reason from './reason' import Contact from './contact' //import Driver from './driver' -export default function Wizard() { - const { onSubmit, state, forgetData } = useContext(AppContext) - const { postData, postDataSuccess, postDataError, dataStoredLoaded } = state +function WizardInternal() { + const { onSubmit, state, forgetData, storeData } = useContext(WizardContext) + const { + postData, + postDataSuccess, + postDataError, + dataStoredLoaded, + dataStored, + booking, + } = state if (postDataSuccess) { - // /booking/[id] takes over - return null + return ( + <> +

Vielen Dank für die Buchungsanfrage!

+

Nach Prüfung bestätigen wir die Buchung bald per E-Mail!

+

+ + Buchungstatus einsehen + +

+ + {!dataStoredLoaded && typeof dataStored !== 'boolean' && ( + <> +

+ Sollen die eingegebenen Daten in Deinem Browser{' '} + für die nächste Buchung gespeichert werden? +

+ + + + )} + {dataStored === true && ( +

Ok, die Daten wurden für die nächste Buchung gespeichert.

+ )} + + ) } return ( @@ -44,3 +83,11 @@ export default function Wizard() { ) } + +export default function Wizard() { + return ( + + + + ) +} diff --git a/context/appStore.js b/context/wizardStore.js similarity index 87% rename from context/appStore.js rename to context/wizardStore.js index 5175973..1a143df 100644 --- a/context/appStore.js +++ b/context/wizardStore.js @@ -1,10 +1,12 @@ import React, { useReducer, useEffect } from 'react' -import { useRouter } from 'next/router' +import { + storeBookingData, + loadBookingData, + clearBookingData, +} from '../helpers/storage' -import { storeFormData, loadFormData, clearFormData } from '../helpers/storage' - -export const AppContext = React.createContext() +export const WizardContext = React.createContext() export const ACTIONS = { SET_FORM_DATA: 'setFormData', @@ -122,13 +124,11 @@ async function createBooking(formData) { return response.json() } -export default function AppStore({ children }) { +export default function WizardStore({ children }) { const [state, dispatch] = useReducer(debugReducer, initialState) - const router = useRouter() - useEffect(() => { - const data = loadFormData() + const data = loadBookingData() if (data !== null) { dispatch({ type: ACTIONS.DATA_STORED_LOADED, payload: data }) } @@ -154,10 +154,8 @@ export default function AppStore({ children }) { dispatch({ type: ACTIONS.POST_DATA }) try { - const bookingData = await createBooking(state.formData) - dispatch({ type: ACTIONS.POST_DATA_SUCCESS, payload: bookingData }) - - router.push('/booking/[id]', `/booking/${bookingData.uuid}`) + const booking = await createBooking(state.formData) + dispatch({ type: ACTIONS.POST_DATA_SUCCESS, payload: booking }) } catch (error) { console.error(error) dispatch({ type: ACTIONS.POST_DATA_ERROR, payload: error.message }) @@ -166,19 +164,19 @@ export default function AppStore({ children }) { const storeData = (value) => { if (value) { - storeFormData(state.formData) + storeBookingData(state.booking) } dispatch({ type: ACTIONS.DATA_STORED, payload: value }) } const forgetData = () => { - clearFormData() + clearBookingData() dispatch({ type: ACTIONS.DATA_STORED_FORGOTTEN }) } return ( - {children} - + ) } diff --git a/pages/_app.js b/pages/_app.js index cfd3806..0678854 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -4,12 +4,6 @@ import '../styles/index.css' import 'react-day-picker/lib/style.css' -import AppStore from '../context/appStore' - export default function MyApp({ Component, pageProps }) { - return ( - - - - ) + return }