Merge pull request #402 from oceanprotocol/issue397-form-persistance

save form values for both publish forms

src/components/pages/Publish/FormAlgoPublish.tsx

@@ -13,6 +13,8 @@ import Input from '../../atoms/Input'
 import Button from '../../atoms/Button'
 import { FormContent, FormFieldProps } from '../../../@types/Form'
 import { MetadataPublishFormAlgorithm } from '../../../@types/MetaData'
+import { initialValues as initialValuesAlgorithm } from '../../../models/FormAlgoPublish'
+
 import stylesIndex from './index.module.css'
 
 const query = graphql`
@@ -109,7 +111,10 @@ export default function FormPublish(): ReactElement {
 
   const resetFormAndClearStorage = (e: FormEvent<Element>) => {
     e.preventDefault()
-    resetForm({ values: initialValues, status: 'empty' })
+    resetForm({
+      values: initialValuesAlgorithm as MetadataPublishFormAlgorithm,
+      status: 'empty'
+    })
     setStatus('empty')
   }
 

src/components/pages/Publish/FormPublish.tsx

@@ -7,6 +7,7 @@ import Input from '../../atoms/Input'
 import Button from '../../atoms/Button'
 import { FormContent, FormFieldProps } from '../../../@types/Form'
 import { MetadataPublishFormDataset } from '../../../@types/MetaData'
+import { initialValues as initialValuesDataset } from '../../../models/FormAlgoPublish'
 import stylesIndex from './index.module.css'
 
 const query = graphql`
@@ -72,7 +73,10 @@ export default function FormPublish(): ReactElement {
 
   const resetFormAndClearStorage = (e: FormEvent<Element>) => {
     e.preventDefault()
-    resetForm({ values: initialValues, status: 'empty' })
+    resetForm({
+      values: initialValuesDataset as MetadataPublishFormDataset,
+      status: 'empty'
+    })
     setStatus('empty')
   }
 

src/components/pages/Publish/index.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, useState, useEffect } from 'react'
-import { Formik } from 'formik'
+import { Formik, FormikState } from 'formik'
 import { usePublish, useOcean } from '@oceanprotocol/react'
 import styles from './index.module.css'
 import FormPublish from './FormPublish'
@@ -73,6 +73,22 @@ export default function PublishPage({
   const [error, setError] = useState<string>()
   const [title, setTitle] = useState<string>()
   const [did, setDid] = useState<string>()
+  const [algoInitialValues, setAlgoInitialValues] = useState<
+    Partial<MetadataPublishFormAlgorithm>
+  >(
+    (localStorage.getItem('ocean-publish-form-algorithms') &&
+      (JSON.parse(localStorage.getItem('ocean-publish-form-algorithms'))
+        .initialValues as MetadataPublishFormAlgorithm)) ||
+      initialValuesAlgorithm
+  )
+  const [datasetInitialValues, setdatasetInitialValues] = useState<
+    Partial<MetadataPublishFormDataset>
+  >(
+    (localStorage.getItem('ocean-publish-form-datasets') &&
+      (JSON.parse(localStorage.getItem('ocean-publish-form-datasets'))
+        .initialValues as MetadataPublishFormDataset)) ||
+      initialValues
+  )
   const [publishType, setPublishType] = useState<MetadataMain['type']>(
     'dataset'
   )
@@ -87,7 +103,9 @@ export default function PublishPage({
 
   async function handleSubmit(
     values: Partial<MetadataPublishFormDataset>,
-    resetForm: () => void
+    resetForm: (
+      nextState?: Partial<FormikState<Partial<MetadataPublishFormDataset>>>
+    ) => void
   ): Promise<void> {
     const metadata = transformPublishFormToMetadata(values)
     const timeout = mapTimeoutStringToSeconds(values.timeout)
@@ -121,7 +139,10 @@ export default function PublishPage({
       setSuccess(
         '🎉 Successfully published. 🎉 Now create a price on your data set.'
       )
-      resetForm()
+      resetForm({
+        values: initialValues as MetadataPublishFormDataset,
+        status: 'empty'
+      })
     } catch (error) {
       setError(error.message)
       Logger.error(error.message)
@@ -130,7 +151,9 @@ export default function PublishPage({
 
   async function handleAlgorithmSubmit(
     values: Partial<MetadataPublishFormAlgorithm>,
-    resetForm: () => void
+    resetForm: (
+      nextState?: Partial<FormikState<Partial<MetadataPublishFormAlgorithm>>>
+    ) => void
   ): Promise<void> {
     const metadata = transformPublishAlgorithmFormToMetadata(values)
 
@@ -154,7 +177,10 @@ export default function PublishPage({
       setSuccess(
         '🎉 Successfully published. 🎉 Now create a price for your algorithm.'
       )
-      resetForm()
+      resetForm({
+        values: initialValuesAlgorithm as MetadataPublishFormAlgorithm,
+        status: 'empty'
+      })
     } catch (error) {
       setError(error.message)
       Logger.error(error.message)
@@ -164,7 +190,7 @@ export default function PublishPage({
   return isInPurgatory && purgatoryData ? null : (
     <Formik
       initialValues={
-        publishType === 'dataset' ? initialValues : initialValuesAlgorithm
+        publishType === 'dataset' ? datasetInitialValues : algoInitialValues
       }
       initialStatus="empty"
       validationSchema={
@@ -178,6 +204,7 @@ export default function PublishPage({
           ? await handleSubmit(values, resetForm)
           : await handleAlgorithmSubmit(values, resetForm)
       }}
+      enableReinitialize
     >
       {({ values }) => {
         const tabs = [
@@ -225,9 +252,12 @@ export default function PublishPage({
                 <Tabs
                   className={styles.tabs}
                   items={tabs}
-                  handleTabChange={(title) =>
+                  handleTabChange={(title) => {
                     setPublishType(title.toLowerCase().replace(' ', '') as any)
-                  }
+                    title === 'Algorithm'
+                      ? setdatasetInitialValues(values)
+                      : setAlgoInitialValues(values)
+                  }}
                 />
               </>
             )}