diff --git a/components/wizard.js b/components/wizard.js
index 4b11236..22006c2 100644
--- a/components/wizard.js
+++ b/components/wizard.js
@@ -3,7 +3,7 @@ import React, { useContext } from 'react'
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
-import WizardStore, { WizardContext, ACTIONS } from '../context/wizardStore'
+import WizardStore, { WizardContext } from '../context/wizardStore'
import DateSelect from './dateSelect'
import Reason from './reason'
@@ -11,19 +11,39 @@ import Contact from './contact'
//import Driver from './driver'
function WizardInternal() {
- const { onSubmit, state, storeData } = useContext(WizardContext)
- const { postData, postDataSuccess, postDataError } = state
+ const { onSubmit, state, storeData, forgetData } = useContext(WizardContext)
+ const {
+ postData,
+ postDataSuccess,
+ postDataError,
+ dataStored,
+ dataStoredLoaded,
+ } = state
if (postDataSuccess) {
return (
<>
Danke, die Buchung ist in Bearbeitung!
Wir melden uns per E-Mail sobald die Buchung bestätigt ist.
-
- Sollen die eingegebenen Daten in Deinem Browser für die nächste
- Buchung gespeichert werden?
-
-
+ {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.
+ )}
>
)
}
@@ -35,6 +55,14 @@ function WizardInternal() {
onSubmit()
}}
>
+ {dataStoredLoaded && (
+
+ Gespeicherte Daten aus Deinem Browser geladen.{' '}
+
+
+ )}
diff --git a/context/wizardStore.js b/context/wizardStore.js
index 724ed8f..f89c389 100644
--- a/context/wizardStore.js
+++ b/context/wizardStore.js
@@ -1,6 +1,6 @@
import React, { useReducer, useEffect } from 'react'
-import { storeFormData, loadFormData } from '../helpers/storage'
+import { storeFormData, loadFormData, clearFormData } from '../helpers/storage'
export const WizardContext = React.createContext()
@@ -9,6 +9,9 @@ export const ACTIONS = {
POST_DATA: 'postData',
POST_DATA_ERROR: 'postDataError',
POST_DATA_SUCCESS: 'postDataSuccess',
+ DATA_STORED: 'dataStored',
+ DATA_STORED_LOADED: 'dataStoredLoaded',
+ DATA_STORED_FORGOTTEN: 'dataStoredForgotten',
}
function reducer(state, action) {
@@ -46,6 +49,27 @@ function reducer(state, action) {
postDataError: null,
postDataSuccess: true,
}
+ case ACTIONS.DATA_STORED_LOADED:
+ return {
+ ...state,
+ dataStoredLoaded: true,
+ formData: {
+ ...state.formData,
+ ...action.payload,
+ },
+ }
+ case ACTIONS.DATA_STORED_FORGOTTEN:
+ return {
+ ...state,
+ dataStored: undefined,
+ dataStoredLoaded: undefined,
+ formData: { ...initialState.formData },
+ }
+ case ACTIONS.DATA_STORED:
+ return {
+ ...state,
+ dataStored: action.payload,
+ }
default:
throw new Error(`Unkown Action type ${action.type}`)
}
@@ -63,16 +87,16 @@ const initialState = {
postDataError: null,
postDataSuccess: null,
formData: {
- //startDate: '2020-08-10',
- //endDate: '2020-08-17',
- //purpose: 'Sommerlager 2021',
- //org: 'VCP Rosenfeld',
- //destination: 'Lüneburger Heide',
- //name: 'Thomas Ruoff',
- //email: 'thomasruoff@gmail.com',
- //street: 'Mömpelgardgasse 25',
- //zip: '72348',
- //city: 'Rosenfeld',
+ startDate: '',
+ endDate: '',
+ purpose: '',
+ org: '',
+ destination: '',
+ name: '',
+ email: '',
+ street: '',
+ zip: '',
+ city: '',
},
}
@@ -96,7 +120,9 @@ export default function WizardStore({ children }) {
useEffect(() => {
const data = loadFormData()
- dispatch({ type: ACTIONS.SET_FORM_DATA, payload: data })
+ if (data !== null) {
+ dispatch({ type: ACTIONS.DATA_STORED_LOADED, payload: data })
+ }
}, [])
const onChangeEvent = (event) => {
@@ -127,11 +153,30 @@ export default function WizardStore({ children }) {
}
}
- const storeData = () => storeFormData(state.formData)
+ const storeData = (value) => {
+ if (value) {
+ storeFormData(state.formData)
+ }
+
+ dispatch({ type: ACTIONS.DATA_STORED, payload: value })
+ }
+
+ const forgetData = () => {
+ clearFormData()
+ dispatch({ type: ACTIONS.DATA_STORED_FORGOTTEN })
+ }
return (
{children}
diff --git a/helpers/storage.js b/helpers/storage.js
index 6848e3a..3576db6 100644
--- a/helpers/storage.js
+++ b/helpers/storage.js
@@ -11,7 +11,18 @@ export function storeFormData({ org, name, email, street, zip, city }) {
)
}
+export function clearFormData() {
+ getStorage().removeItem(FORM_DATA_KEY)
+}
+
export function loadFormData() {
const dataAsString = getStorage().getItem(FORM_DATA_KEY)
- return JSON.parse(dataAsString || '{}')
+ let result = null
+ try {
+ result = JSON.parse(dataAsString)
+ } catch (e) {
+ console.error(`localStorage ${FORM_DATA_KEY} has invalid data stored`)
+ }
+
+ return result
}