diff --git a/package-lock.json b/package-lock.json index 1132c7edf..d3758ef2a 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 790d63d5a..ce156ef61 100644 --- a/package.json +++ b/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", diff --git a/src/components/atoms/FormikPersist.tsx b/src/components/atoms/FormikPersist.tsx new file mode 100644 index 000000000..cebf469a1 --- /dev/null +++ b/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 +> { + static defaultProps = { + debounce: 300 + } + + saveForm = debounce((data: FormikProps) => { + 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) => { + 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 }) { + 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(PersistImpl) diff --git a/src/components/pages/Publish/PublishForm.tsx b/src/components/pages/Publish/PublishForm.tsx index 4f7d1ebd2..ac4ff747e 100644 --- a/src/components/pages/Publish/PublishForm.tsx +++ b/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({ )} )} - + ) } diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx index 046a85688..187d28750 100644 --- a/src/components/pages/Publish/index.tsx +++ b/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 { - 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 }) => ( <> - +