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..9b2e6853d --- /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 }, + {} +> { + 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); \ No newline at end of file diff --git a/src/components/pages/Publish/PublishForm.tsx b/src/components/pages/Publish/PublishForm.tsx index 4f7d1ebd2..aad87ed79 100644 --- a/src/components/pages/Publish/PublishForm.tsx +++ b/src/components/pages/Publish/PublishForm.tsx @@ -5,16 +5,20 @@ 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 + content: FormContent, + publishStepText?:string, + isLoading:boolean }): ReactElement { const { ocean, account } = useOcean() - const { publishStepText, isLoading } = usePublish() const { status, setStatus, @@ -30,6 +34,7 @@ export default function PublishForm({ useEffect(() => { setErrors({}) setTouched({}) + // setSubmitting(false) }, []) @@ -57,7 +62,7 @@ export default function PublishForm({ @@ -73,7 +78,7 @@ export default function PublishForm({ )} )} - + ) } diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx index 046a85688..6ca4a58e2 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,7 @@ export default function PublishPage({ > {({ values }) => ( <> - +