add clear stored data

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 (
       <>
         <h3>Danke, die Buchung ist in Bearbeitung!</h3>
         <p>Wir melden uns per E-Mail sobald die Buchung bestätigt ist.</p>
-        <p>
-          Sollen die eingegebenen Daten in Deinem Browser für die nächste
-          Buchung gespeichert werden?
-        </p>
-        <Button onClick={storeData}>Ja, bitte speichern</Button>
+        {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)}>Ja, bitte speichern</Button>
+            <Button
+              onClick={() => storeData(false)}
+              className="ml-2"
+              variant="secondary"
+            >
+              Nein danke
+            </Button>
+          </>
+        )}
+        {dataStored === true && (
+          <p>Ok, die Daten wurden für die nächste Buchung gespeichert.</p>
+        )}
       </>
     )
   }
@@ -35,6 +55,14 @@ function WizardInternal() {
         onSubmit()
       }}
     >
+      {dataStoredLoaded && (
+        <p>
+          Gespeicherte Daten aus Deinem Browser geladen.{' '}
+          <Button size="sm" variant="outline-secondary" onClick={forgetData}>
+            Daten wieder Vergessen
+          </Button>
+        </p>
+      )}
       <DateSelect />
       <Reason />
       <Contact />

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 (
     <WizardContext.Provider
-      value={{ state, dispatch, onChangeEvent, onChange, onSubmit, storeData }}
+      value={{
+        state,
+        dispatch,
+        onChangeEvent,
+        onChange,
+        onSubmit,
+        storeData,
+        forgetData,
+      }}
     >
       {children}
     </WizardContext.Provider>

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
 }