add appStore and use router for booking

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
 

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

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

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() {
+export default function Wizard() {
-  const { onSubmit, state, storeData, forgetData } = useContext(WizardContext)
+  const { onSubmit, state, storeData, forgetData } = useContext(AppContext)
   const {
     postData,
     postDataSuccess,
@@ -22,7 +22,7 @@ function WizardInternal() {
       <>
         <h3>Danke, die Buchung ist in Bearbeitung!</h3>
         <p>Nach Prüfung bestätigen wir die Buchung bald per E-Mail!</p>
-        {typeof dataStored !== 'boolean' && (
+        {!dataStoredLoaded && typeof dataStored !== 'boolean' && (
           <>
             <p>
               Sollen die eingegebenen Daten in <strong>Deinem Browser</strong>{' '}
@@ -55,9 +55,11 @@ function WizardInternal() {
       }}
     >
       {dataStoredLoaded && (
-        <p>
+        <p className="my-12">
           Gespeicherte Daten wurden aus Deinem Browser geladen.{' '}
-          <a onClick={forgetData}>Daten vergessen</a>
+          <a className="link" onClick={forgetData} href="">
+            Daten wieder vergessen
+          </a>
         </p>
       )}
       <DateSelect />
@@ -72,11 +74,3 @@ function WizardInternal() {
     </form>
   )
 }
-
-export default function Wizard() {
-  return (
-    <WizardStore>
-      <WizardInternal />
-    </WizardStore>
-  )
-}

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 (
-    <WizardContext.Provider
+    <AppContext.Provider
       value={{
         state,
         dispatch,
@@ -184,6 +190,6 @@ export default function WizardStore({ children }) {
       }}
     >
       {children}
-    </WizardContext.Provider>
+    </AppContext.Provider>
   )
 }

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 <Component {...pageProps} />
+  return (
+    <AppStore>
+      <Component {...pageProps} />
+    </AppStore>
+  )
 }

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 (
+    <div className="mx-3 flex flex-col min-h-screen">
+      <main className="flex-grow">
+        <h1 className="text-3xl">Pfadi Bussle Buchung</h1>
+
+        <h3>Danke, die Buchung ist in Bearbeitung!</h3>
+        <p>Nach Prüfung bestätigen wir die Buchung bald per E-Mail!</p>
+        {!dataStoredLoaded && typeof dataStored !== 'boolean' && (
+          <>
+            <p>
+              Sollen die eingegebenen Daten in <strong>Deinem Browser</strong>{' '}
+              für die nächste Buchung gespeichert werden?
+            </p>
+            <button onClick={() => storeData(true)} className="btn btn-blue">
+              Ja, bitte speichern
+            </button>
+            <button
+              onClick={() => storeData(false)}
+              className="btn btn-grey ml-2"
+            >
+              Nein danke
+            </button>
+          </>
+        )}
+        {dataStored === true && (
+          <p>Ok, die Daten wurden für die nächste Buchung gespeichert.</p>
+        )}
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

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;