reset form fix

src/components/pages/Publish/Preview.tsx

@@ -5,7 +5,7 @@ import Tags from '../../atoms/Tags'
 import MetaItem from '../../organisms/AssetContent/MetaItem'
 import styles from './Preview.module.css'
 import File from '../../atoms/File'
-import { MetadataPublishForm } from '../../../@types/Metadata'
+import { MetadataPublishForm } from '../../../@types/MetaData'
 
 export default function Preview({
   values

src/components/pages/Publish/PublishForm.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect } from 'react'
+import React, { ReactElement, useEffect, FormEvent } from 'react'
 import styles from './PublishForm.module.css'
 import { useOcean, usePublish } from '@oceanprotocol/react'
 import { useFormikContext, Form, Field } from 'formik'
@@ -22,9 +22,10 @@ export default function PublishForm({
     setErrors,
     setTouched,
     resetForm,
+    setValues,
     initialValues
   } = useFormikContext()
-
+  const formName = 'ocean-publish-form'
   // reset form validation on every mount
   useEffect(() => {
     setErrors({})
@@ -32,6 +33,14 @@ export default function PublishForm({
     // setSubmitting(false)
   }, [])
 
+  const resetFormAndClearStorage = async (e: FormEvent<Element>) => {
+    e.preventDefault()
+
+    await resetForm({ values: initialValues, status: 'empty' })
+
+    setStatus('empty')
+  }
+
   return (
     <Form
       className={styles.form}
@@ -57,18 +66,14 @@ export default function PublishForm({
             <Button
               style="text"
               size="small"
-              onClick={(e) => {
-                e.preventDefault()
-                resetForm(initialValues)
-                setStatus('empty')
-              }}
+              onClick={resetFormAndClearStorage}
             >
               Reset Form
             </Button>
           )}
         </footer>
       )}
-      <Persist name="ocean-publish-form" />
+      <Persist name={formName} />
     </Form>
   )
 }

src/components/pages/Publish/index.tsx

@@ -34,7 +34,12 @@ export default function PublishPage({
     `)
 
     const metadata = transformPublishFormToMetadata(values)
-    const { tokensToMint, type, weightOnDataToken, ownerFee } = values.price
+    const {
+      tokensToMint,
+      type,
+      weightOnDataToken,
+      liquidityProviderFee
+    } = values.price
     const serviceType = values.access === 'Download' ? 'access' : 'compute'
 
     console.log(`
@@ -61,7 +66,7 @@ export default function PublishPage({
             ddo.dataToken,
             tokensToMint.toString(),
             weightOnDataToken,
-            ownerFee
+            liquidityProviderFee
           )
         }
       }

src/models/FormPublish.ts

@@ -29,20 +29,20 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
 })
 
 export const initialValues: MetadataPublishForm = {
-  name: undefined,
-  author: undefined,
+  name: '',
+  author: '',
   price: {
     type: 'simple',
     tokensToMint: 1,
     weightOnDataToken: '9', // 90% on data token
     liquidityProviderFee: '0.1' // in %
   },
-  files: undefined,
-  description: undefined,
-  license: undefined,
-  access: undefined,
+  files: '',
+  description: '',
+  license: '',
+  access: '',
   termsAndConditions: false,
-  copyrightHolder: undefined,
-  tags: undefined,
-  links: undefined
+  copyrightHolder: '',
+  tags: '',
+  links: ''
 }