From e1d1de469b9f31a4646e2fb531c443844082b857 Mon Sep 17 00:00:00 2001 From: Thomas Ruoff Date: Wed, 19 Aug 2020 00:59:45 +0200 Subject: [PATCH] add appStore and use router for booking --- components/contact.js | 4 +-- components/dateSelect.js | 4 +-- components/reason.js | 4 +-- components/wizard.js | 22 +++++--------- context/{wizardStore.js => appStore.js} | 16 ++++++---- pages/_app.js | 8 ++++- pages/booking/[id].js | 40 +++++++++++++++++++++++++ styles/index.css | 8 +++++ 8 files changed, 80 insertions(+), 26 deletions(-) rename context/{wizardStore.js => appStore.js} (92%) create mode 100644 pages/booking/[id].js diff --git a/components/contact.js b/components/contact.js index 754be19..af6d821 100644 --- a/components/contact.js +++ b/components/contact.js @@ -1,9 +1,9 @@ import React, { useContext } from 'react' -import { WizardContext } from '../context/wizardStore' +import { AppContext } from '../context/appStore' import Required from './required' export default function Contact() { - const { state, onChangeEvent } = useContext(WizardContext) + const { state, onChangeEvent } = useContext(AppContext) const { name, email, street, zip, city } = state.formData diff --git a/components/dateSelect.js b/components/dateSelect.js index e836e75..017076d 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 { WizardContext } from '../context/wizardStore' +import { AppContext } from '../context/appStore' 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(WizardContext) + const { state, onChange } = useContext(AppContext) 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 f3d1f4a..69c969c 100644 --- a/components/reason.js +++ b/components/reason.js @@ -1,9 +1,9 @@ import React, { useContext } from 'react' -import { WizardContext } from '../context/wizardStore' +import { AppContext } from '../context/appStore' import Required from './required' export default function Contact() { - const { state, onChangeEvent } = useContext(WizardContext) + const { state, onChangeEvent } = useContext(AppContext) const { formDataChanged } = state const { purpose, destination, org } = state.formData diff --git a/components/wizard.js b/components/wizard.js index b9c46e1..cefcefc 100644 --- a/components/wizard.js +++ b/components/wizard.js @@ -1,14 +1,14 @@ import React, { useContext } from 'react' -import WizardStore, { WizardContext } from '../context/wizardStore' +import { AppContext } from '../context/appStore' import DateSelect from './dateSelect' import Reason from './reason' import Contact from './contact' //import Driver from './driver' -function WizardInternal() { - const { onSubmit, state, storeData, forgetData } = useContext(WizardContext) +export default function Wizard() { + const { onSubmit, state, storeData, forgetData } = useContext(AppContext) const { postData, postDataSuccess, @@ -22,7 +22,7 @@ function WizardInternal() { <>

Danke, die Buchung ist in Bearbeitung!

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

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

Sollen die eingegebenen Daten in Deinem Browser{' '} @@ -55,9 +55,11 @@ function WizardInternal() { }} > {dataStoredLoaded && ( -

+

Gespeicherte Daten wurden aus Deinem Browser geladen.{' '} - Daten vergessen + + Daten wieder vergessen +

)} @@ -72,11 +74,3 @@ function WizardInternal() { ) } - -export default function Wizard() { - return ( - - - - ) -} diff --git a/context/wizardStore.js b/context/appStore.js similarity index 92% rename from context/wizardStore.js rename to context/appStore.js index 794a084..177edce 100644 --- a/context/wizardStore.js +++ b/context/appStore.js @@ -1,8 +1,10 @@ import React, { useReducer, useEffect } from 'react' +import { useRouter } from 'next/router' + import { storeFormData, loadFormData, clearFormData } from '../helpers/storage' -export const WizardContext = React.createContext() +export const AppContext = React.createContext() export const ACTIONS = { SET_FORM_DATA: 'setFormData', @@ -47,8 +49,8 @@ function reducer(state, action) { ...state, formData: { ...state.formData, - ...action.payload, }, + booking: { ...action.payload }, postData: false, postDataError: null, postDataSuccess: true, @@ -120,9 +122,11 @@ async function createBooking(formData) { return response.json() } -export default function WizardStore({ children }) { +export default function AppStore({ children }) { const [state, dispatch] = useReducer(debugReducer, initialState) + const router = useRouter() + useEffect(() => { const data = loadFormData() if (data !== null) { @@ -152,6 +156,8 @@ export default function WizardStore({ children }) { try { const bookingData = await createBooking(state.formData) dispatch({ type: ACTIONS.POST_DATA_SUCCESS, payload: bookingData }) + + router.push('/booking/[id]', `/booking/${bookingData._id}`) } catch (error) { console.error(error) dispatch({ type: ACTIONS.POST_DATA_ERROR, payload: error.message }) @@ -172,7 +178,7 @@ export default function WizardStore({ children }) { } return ( - {children} - + ) } diff --git a/pages/_app.js b/pages/_app.js index 0678854..cfd3806 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -4,6 +4,12 @@ import '../styles/index.css' import 'react-day-picker/lib/style.css' +import AppStore from '../context/appStore' + export default function MyApp({ Component, pageProps }) { - return + return ( + + + + ) } diff --git a/pages/booking/[id].js b/pages/booking/[id].js new file mode 100644 index 0000000..e2efb53 --- /dev/null +++ b/pages/booking/[id].js @@ -0,0 +1,40 @@ +import React, { useContext } from 'react' +import { AppContext } from '../../context/appStore' +import Footer from '../../components/footer' + +export default function Booking() { + const { dataStored, dataStoredLoaded } = state + + return ( +
+
+

Pfadi Bussle Buchung

+ +

Danke, die Buchung ist in Bearbeitung!

+

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

+ {!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.

+ )} +
+ +
+ ) +} diff --git a/styles/index.css b/styles/index.css index 5d2e2f6..76b82d4 100644 --- a/styles/index.css +++ b/styles/index.css @@ -76,6 +76,14 @@ @apply bg-gray-700; } +.link { + @apply font-medium text-blue-500 underline; +} + +.link:hover { + @apply text-blue-700; +} + @screen sm { .fs { @apply w-1/2 mb-0;