appStore was a stupid idea...

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
 

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

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

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() {
+function WizardInternal() {
-  const { onSubmit, state, forgetData } = useContext(AppContext)
+  const { onSubmit, state, forgetData, storeData } = useContext(WizardContext)
-  const { postData, postDataSuccess, postDataError, dataStoredLoaded } = state
+  const {
+    postData,
+    postDataSuccess,
+    postDataError,
+    dataStoredLoaded,
+    dataStored,
+    booking,
+  } = state
 
   if (postDataSuccess) {
-    // /booking/[id] takes over
+    return (
-    return null
+      <>
+        <h3>Vielen Dank für die Buchungsanfrage!</h3>
+        <p>Nach Prüfung bestätigen wir die Buchung bald per E-Mail!</p>
+        <p>
+          <Link href={`/booking/${booking.uuid}`}>
+            <a className="link">Buchungstatus einsehen</a>
+          </Link>
+        </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>
+        )}
+      </>
+    )
   }
 
   return (
@@ -44,3 +83,11 @@ export default function Wizard() {
     </form>
   )
 }
+
+export default function Wizard() {
+  return (
+    <WizardStore>
+      <WizardInternal />
+    </WizardStore>
+  )
+}

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 WizardContext = React.createContext()
-
-export const AppContext = 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)
+      const booking = await createBooking(state.formData)
-      dispatch({ type: ACTIONS.POST_DATA_SUCCESS, payload: bookingData })
+      dispatch({ type: ACTIONS.POST_DATA_SUCCESS, payload: booking })
-
-      router.push('/booking/[id]', `/booking/${bookingData.uuid}`)
     } 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 (
-    <AppContext.Provider
+    <WizardContext.Provider
       value={{
         state,
         dispatch,
@@ -190,6 +188,6 @@ export default function AppStore({ children }) {
       }}
     >
       {children}
-    </AppContext.Provider>
+    </WizardContext.Provider>
   )
 }

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