Merge pull request #60 from oceanprotocol/fix/publish

Fix/publish

package-lock.json

@@ -5174,6 +5174,24 @@
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.159.tgz",
       "integrity": "sha512-gF7A72f7WQN33DpqOWw9geApQPh4M3PxluMtaHxWHXEGSN12/WbcEk/eNSqWNQcQhF66VSZ06vCF94CrHwXJDg=="
     },
+    "@types/lodash.debounce": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz",
+      "integrity": "sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ==",
+      "dev": true,
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
+    "@types/lodash.omit": {
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash.omit/-/lodash.omit-4.5.6.tgz",
+      "integrity": "sha512-KXPpOSNX2h0DAG2w7ajpk7TXvWF28ZHs5nJhOJyP0BQHkehgr948RVsToItMme6oi0XJkp19CbuNXkIX8FiBlQ==",
+      "dev": true,
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
     "@types/lodash.sample": {
       "version": "4.2.6",
       "resolved": "https://registry.npmjs.org/@types/lodash.sample/-/lodash.sample-4.2.6.tgz",
@@ -14469,15 +14487,6 @@
         }
       }
     },
-    "formik-persist": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/formik-persist/-/formik-persist-1.1.0.tgz",
-      "integrity": "sha512-tZyyghHinnoqptYVD8vfkN8rg8sFKIuc1INFpuspTXffq1H8eeI1aYFiyoq2gNE1qIVJfPy+bzUItx/9qyO8Hw==",
-      "requires": {
-        "lodash.debounce": "^4.0.8",
-        "react-fast-compare": "^2.0.1"
-      }
-    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -23643,6 +23652,11 @@
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
+    "lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA="
+    },
     "lodash.orderby": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.orderby/-/lodash.orderby-4.6.0.tgz",

package.json

@@ -39,7 +39,6 @@
     "ethereum-blockies": "github:MyEtherWallet/blockies",
     "filesize": "^6.1.0",
     "formik": "^2.1.5",
-    "formik-persist": "^1.1.0",
     "gatsby": "^2.24.47",
     "gatsby-image": "^2.4.16",
     "gatsby-plugin-manifest": "^2.4.23",
@@ -55,6 +54,8 @@
     "gatsby-transformer-sharp": "^2.5.13",
     "intersection-observer": "^0.11.0",
     "is-url-superb": "^4.0.0",
+    "lodash.debounce": "^4.0.8",
+    "lodash.omit": "^4.5.0",
     "query-string": "^6.13.1",
     "react": "^16.13.1",
     "react-data-table-component": "^6.11.0",
@@ -76,6 +77,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",
+    "@types/lodash.debounce": "^4.0.3",
+    "@types/lodash.omit": "^4.5.6",
     "@babel/preset-typescript": "^7.10.1",
     "@storybook/addon-actions": "^6.0.12",
     "@storybook/addon-storyshots": "^6.0.12",

src/components/atoms/FormikPersist.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react'
+import { FormikProps, connect } from 'formik'
+import debounce from 'lodash.debounce'
+import omit from 'lodash.omit'
+import isEqual from 'react-fast-compare'
+
+export interface PersistProps {
+  name: string
+  ignoreFields?: string[]
+  debounce?: number
+  isSessionStorage?: boolean
+}
+
+class PersistImpl extends React.Component<
+  PersistProps & { formik: FormikProps<any> },
+  any
+> {
+  static defaultProps = {
+    debounce: 300
+  }
+
+  saveForm = debounce((data: FormikProps<any>) => {
+    const dataToSave = this.omitIgnoredFields(data)
+    console.log('data tosave', dataToSave)
+    if (this.props.isSessionStorage) {
+      window.sessionStorage.setItem(this.props.name, JSON.stringify(dataToSave))
+    } else {
+      window.localStorage.setItem(this.props.name, JSON.stringify(dataToSave))
+    }
+  }, this.props.debounce)
+
+  omitIgnoredFields = (data: FormikProps<any>) => {
+    const { ignoreFields } = this.props
+    console.log('omit fiel', ignoreFields)
+    const { values, touched, errors } = data
+
+    console.log('vale', values, omit(values, ignoreFields))
+    return ignoreFields
+      ? omit(
+          {
+            ...data,
+            values: omit(values, ignoreFields),
+            touched: omit(touched, ignoreFields),
+            errors: omit(errors, ignoreFields)
+          },
+          ignoreFields
+        )
+      : data
+  }
+
+  componentDidUpdate(prevProps: PersistProps & { formik: FormikProps<any> }) {
+    if (!isEqual(prevProps.formik, this.props.formik)) {
+      this.saveForm(this.props.formik)
+    }
+  }
+
+  componentDidMount() {
+    const maybeState = this.props.isSessionStorage
+      ? window.sessionStorage.getItem(this.props.name)
+      : window.localStorage.getItem(this.props.name)
+    if (maybeState && maybeState !== null) {
+      this.props.formik.setFormikState(JSON.parse(maybeState))
+    }
+  }
+
+  render(): any {
+    return null
+  }
+}
+
+export const Persist = connect<PersistProps, any>(PersistImpl)

src/components/pages/Publish/PublishForm.tsx

@@ -5,16 +5,19 @@ import { useFormikContext, Form, Field } from 'formik'
 import Input from '../../atoms/Input'
 import Button from '../../atoms/Button'
 import { FormContent, FormFieldProps } from '../../../@types/Form'
-import { Persist } from 'formik-persist'
 import Loader from '../../atoms/Loader'
+import { Persist } from '../../atoms/FormikPersist'
 
 export default function PublishForm({
-  content
+  content,
+  publishStepText,
+  isLoading
 }: {
   content: FormContent
+  publishStepText?: string
+  isLoading: boolean
 }): ReactElement {
   const { ocean, account } = useOcean()
-  const { publishStepText, isLoading } = usePublish()
   const {
     status,
     setStatus,
@@ -30,6 +33,7 @@ export default function PublishForm({
   useEffect(() => {
     setErrors({})
     setTouched({})
+
     // setSubmitting(false)
   }, [])
 
@@ -73,7 +77,7 @@ export default function PublishForm({
           )}
         </footer>
       )}
-      <Persist name={formName} />
+      <Persist name={formName} ignoreFields={['isSubmitting']} />
     </Form>
   )
 }

src/components/pages/Publish/index.tsx

@@ -20,18 +20,18 @@ export default function PublishPage({
 }): ReactElement {
   const { marketFeeAddress, marketFeeAmount } = useSiteMetadata()
   const { accountId, ocean } = useOcean()
-  const { publish, publishError } = usePublish()
+  const { publish, publishError, isLoading, publishStepText } = usePublish()
   const navigate = useNavigate()
 
   async function handleSubmit(
     values: MetadataPublishForm,
     resetForm: () => void
   ): Promise<void> {
-    console.log(`
-      Collected form values:
-      ----------------------
-      ${JSON.stringify(values, null, 2)}
-    `)
+    // console.log(`
+    //   Collected form values:
+    //   ----------------------
+    //   ${JSON.stringify(values, null, 2)}
+    // `)
 
     const metadata = transformPublishFormToMetadata(values)
     const {
@@ -42,12 +42,12 @@ export default function PublishPage({
     } = values.price
     const serviceType = values.access === 'Download' ? 'access' : 'compute'
 
-    console.log(`
-      Transformed metadata values:
-      ----------------------
-      ${JSON.stringify(metadata, null, 2)}
-      Tokens to mint: ${tokensToMint}
-    `)
+    // console.log(`
+    //   Transformed metadata values:
+    //   ----------------------
+    //   ${JSON.stringify(metadata, null, 2)}
+    //   Tokens to mint: ${tokensToMint}
+    // `)
 
     try {
       // mpAddress and mpFee are not yet implemented in ocean js so are not uset
@@ -104,7 +104,11 @@ export default function PublishPage({
       >
         {({ values }) => (
           <>
-            <PublishForm content={content.form} />
+            <PublishForm
+              content={content.form}
+              isLoading={isLoading}
+              publishStepText={publishStepText}
+            />
             <aside>
               <div className={styles.sticky}>
                 <Preview values={values} />