frontend/submission: send formData on every wizard page change

Closes Github issue #50

frontend/submission/components/forms/FormWizard.tsx

@@ -18,7 +18,7 @@ type FormWizardProps = Record<string, never>
 export const FormWizard = ({}: FormWizardProps) => {
   const { t } = useTranslation()
   const {currentStep} = useWizardQueryState()
-  const {setSerializedPubKeys, formData, setFormData} = useArmoredDatastore()
+  const {setSerializedPubKeys, formData, formDataDirty, setFormData, sendFormData} = useArmoredDatastore()
   const { replace } = useRouter()
   const [loading, setLoading] = useState(true)
 
@@ -50,6 +50,13 @@ export const FormWizard = ({}: FormWizardProps) => {
     setSerializedPubKeys(pubKeys)
   }, [data, setSerializedPubKeys, token, replace, setLoading])
 
+  // send formData on when wizard page changes
+  useEffect(() => {
+    if (formDataDirty && token && userId) {
+      sendFormData(token, userId)
+    }
+  }, [currentStep, sendFormData])
+
   const handleFormChange = useCallback(
     (name: string, state: Pick<JsonFormsCore, 'data' | 'errors'>) => {
       setFormData(name, state.data)

frontend/submission/state/useArmoredDatastore.ts

@@ -33,6 +33,7 @@ type ArmoredDatastoreState = {
   pubKeys: Key[]
 
   formData: any
+  formDataDirty: boolean
   setFormData: (name: string, formData: any) => void
 
   sendFormData: (token: string, userId: string) => Promise<void>
@@ -57,12 +58,14 @@ export const useArmoredDatastore = zustand<ArmoredDatastoreState>((set, get) =>
   pubKeys: [],
 
   formData: {},
+  formDataDirty: false,
   setFormData: (name: string, data: any) => {
     set(({formData}) => ({
       formData: {
         ...formData,
         [name]: data,
-      }
+      },
+      formDataDirty: true,
     }))
   },
 
@@ -99,6 +102,11 @@ export const useArmoredDatastore = zustand<ArmoredDatastoreState>((set, get) =>
     if (!res.ok) {
       throw new Error(`upload-form: HTTP ${res.status}`)
     }
+
+    if (get().formData == formData) {
+      // only mark clean if there has been no form change during the fetch
+      set({ formDataDirty: false })
+    }
   },
 
   attachments: [],