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;